body, .container-fluid {
            margin: 0;
            padding: 0;
            background-color: #004029;
        }

        /* ########################## nav link #############################  */
       .nav-link-custom {
          color: #ffffff;
          text-decoration: none;
          font-weight: bold;
          padding: 8px 16px;
          border-radius: 20px;
          transition: 0.3s;
          white-space: nowrap;
        }

        .nav-link-custom:hover {
          background-color: #fbb136;
          color: #004029;
        }


        .nav-link-custom.active {
          background-color: #fbb136;
          color: #004029;
        }

        .nav-container {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-end;
          gap: 12px;
          margin-right: 80px;
        }

        .nav-link-btn {
          background-color: #fbb136;
          color: #004029;
          border-radius: 20px;
          padding: 8px 16px;
          font-weight: bold;
          text-decoration: none;
          transition: 0.3s;
        }

        .nav-link-btn:hover {
          background-color: #004029;
          color: #fbb136;
          border: 1px solid #fbb136;
        }

        @media (max-width: 768px) {
          .nav-container {
            flex-direction: column;
            align-items: flex-start;
            margin-right: 0;
            margin-top: 15px;
          }
        }
        /* ########################## end nav link #############################  */

        .box-header {
          background-color: #004029;
          display: flex;
          flex-wrap: wrap;
          align-items: center; /* biar logo & tombol sejajar vertikal */
          margin: 0;
          padding: 0;
          white-space: nowrap;
          overflow-x: auto;
        }


        .logo-uir {
          margin-left:162px;
          margin-top:10px;
          margin-bottom:10px;
          margin-right:9px;
          width: 54px;
          height: 62px;
          flex-shrink: 0;
        }

        .header-text {
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          align-items: flex-start; /* Menyelaraskan teks ke kiri */
          color: #FFF;
          margin-top:39px;
          /* border: 1px solid #fff; */
        }

        .header-sistem {
          margin: 0;
          color: #FFF;
          font-family: Poppins;
          font-size: 18px;
          font-weight: bold;
          /* border: 1px solid #fff; */
        }

        .header-uir {
          margin: 0;
          font-size: 13px;
          font-family: Poppins;
          font-weight: 400;
          /* border: 1px solid #fff; */
        }


        .div-btn-masuk{
          margin-top:39px;
          background-color: #004029;
          width: 100%;
          height: 100%;
          font-weight: bold;
          margin-left: auto; /* Membuat tombol berada di sisi kanan */
          margin-right:164px;
        }


        .btn-masuk {
          margin-top:39px;
          background-color: #004029;
          width: 276px;
          height: 60px;
          color: #fff;
          font-family: Poppins;
          border-radius: 30px;
          border: 1px solid #FCBE13;
          font-weight: bold;
          margin-left: 620px; /* Membuat tombol berada di sisi kanan */
          position:relative;
          margin-right:0 auto;
        }
        .btn-masuk:hover {
            background-color: #fbb136; /* Background color on hover */
            color: #004029; /* Text color on hover */
            border: none; /* Border yang tipis dengan warna sama dengan teks */
        }


        /* box featured */
        .box-featured {
          background-color: #DEEDE8;
          display: flex;
          flex-wrap: column;
          margin:0;
        }

        .header-featured-title {
          align-items: flex-start; /* Memusatkan secara vertikal */
          display: flex;
          flex-direction: column;
          color: #FFF;
          width:80%;
          margin-left: 162px;
          /* border: 1px solid #fff; */
          margin-left:162px;
        }
        .logo-featured{
          display: flex;
          width: 75%;
          height: 80%;
          flex-shrink: 0;
          margin-top:11px;
          margin-left:0px;
          /* border: 1px solid #000; */
        }
        .div-logo-featured {
          width: 591px;
          height: 520px;
          /* border: 1px solid #fff; */
          display: flex;
          align-items: center; /* Memusatkan konten secara vertikal */
          justify-content: center; /* Memusatkan konten secara horizontal */
        }


        .logo-footer-featured{
          display: flex;
          width: 75%;
          height: 80%;
          flex-shrink: 0;
          margin-top:11px;
          margin-left:0px;
          /* border: 1px solid #000; */
        }
        .div-logo-footer-featured {
          width: 252px;
          height: 82px;
          /* border: 1px solid #fff; */
          display: flex;
          align-items: left; /* Memusatkan konten secara vertikal */
          justify-content: left; /* Memusatkan konten secara horizontal */
        }



        /* ########################## Tulisan featured #############################  */
        .p-featured-1{
          color: #004029;
          font-family: "Poppins";
          font-size: 50px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          margin-bottom:0px;
        }
        .p-featured-2{
          color: #004029;
          font-family: "Poppins";
          font-size: 30px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          margin-top:-10px;
          margin-bottom:0px;
        }
        .p-featured-3{
          color: #000;
          font-family: Poppins;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 150%; /* 36px */
          width: 70%;
          margin-bottom: 20px; /* Berikan sedikit jarak antara teks dan tombol */
        }

        /* ########################## End Tulisan featured #############################  */

        .column-button {
            width: 276px;
            height: 60px;
        }
        .btn-login {
          background-color: #fbb136;
          width:100%;
          height:100%;
          color: #004029;
          font-family: Poppins;
          border-radius: 30px;
          font-weight: bold;
          border: none; /* Border yang tipis dengan warna sama dengan teks */
        }
        .btn-login:hover {
            background-color: #004029; /* Background color on hover */
            color: #fff; /* Text color on hover */
            border: 1px solid #fbb136;
        }


        .btn-prosedur {
          background-color: #004029;
          width:100%;
          height:100%;
          color: #ffffff;
          font-family: Poppins;
          border-radius: 30px;
          font-weight: bold;
          border: none; /* Border yang tipis dengan warna sama dengan teks */
        }
        .btn-prosedur:hover {
            background-color: #fbb136; /* Background color on hover */
            color: #004029; /* Text color on hover */
            border: 1px solid #004029;
        }



        /* ########################## Tulisan featured #############################  */
        .p-prosedur-1{
          color: #000000;
          font-family: "Poppins";
          font-size: 32px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          margin-bottom:0px;
        }
        .p-prosedur-2{
          color: #004029;
          font-family: "Poppins";
          font-size: 30px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          margin-top:-10px;
          margin-bottom:0px;
        }
        .p-prosedur-3{
          color: #000;
          font-family: Poppins;
          font-size: 16px;
          font-style: normal;
          text-align: justify;
          font-weight: 400;
          line-height: 150%; /* 36px */
          width: 70%;
          margin-bottom: 20px; /* Berikan sedikit jarak antara teks dan tombol */
        }

        /* ########################## End Tulisan featured #############################  */


        /* ########################## Tulisan timeline #############################  */
        .p-timeline-1{
          color: #004029;
          font-family: "Poppins";
          font-size: 30px;
          margin-top: 50px;
          font-style: normal;
          font-weight: 800;
          line-height: normal;
          margin-bottom:0px;
          text-align: center;
        }


        .p-timelineprosedur-1{
          color: #004029;
          font-family: "Poppins";
          font-size: 30px;
          margin-top: 50px;
          font-style: normal;
          font-weight: 800;
          line-height: normal;
          margin-bottom:0px;
          text-align: center;
        }


        /* ########################## End Tulisan timeline #############################  */

        /* box news */
        .box-news {
          background-color: #fff;
          margin-left:0 auto;
          margin-top:0px;
        }
        .div-newslogo-featured {
          align-items: flex-start; /* Memusatkan secara vertikal */
          display: flex;
          flex-direction: column;
          color: #FFF;
          width:70%;
          margin-top:39px;
          /* border: 1px solid #fff; */
          margin-bottom:0px;
          /* border: 1px solid #fff; */
          margin-left: auto; /* Rata tengah secara horizontal */
          margin-right: auto; /* Rata tengah secara horizontal */

        }
        .logonews-featured{
          display: flex;
          width: 90%;
          height: 90%;
          flex-shrink: 0;
          border-radius: 18px;
          margin-left: auto; /* Rata tengah secara horizontal */
          margin-right: auto; /* Rata tengah secara horizontal */
          margin-top:auto;

          
          /* border: 1px solid #000; */
        }
        .p-logonews-container {
            display: flex;
            align-items: baseline; /* Menyelaraskan elemen secara horizontal */
            /* border: 1px solid #fff; */
            margin-top:-140px;
            margin-left: 60px; /* Rata tengah secara horizontal */
        }

        .p-logonews-1{
          color: #FFF;
          font-family: "Just Another Hand";
          font-size: 85px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          margin-bottom:0px;
        }
        .p-logonews-2{
          color: #FBB136;
          font-family: "Just Another Hand";
          font-size: 84px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          margin-bottom:0px;
        }
        .p-logonews-3{
          color: #FFF;
          font-family: "Just Another Hand";
          font-size: 85px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          margin-bottom:0px;
        }

        .segment-news {
          min-height:400px;
          align-items: flex-start; /* Memusatkan secara vertikal */
          display: flex;
          flex-direction: column;
          color: #FFF;
          width:80%;
          margin-top:39px;
          margin-left: 0px;
          /* border: 1px solid #fff; */
        }

        .box-image-1 {
          margin:10px;
          width: 122.709px;
          height: 122.709px;
          border-radius: 18px;
          border: 1px solid #fff;
        }
        .box-image-elemen-1 {
          margin-top:10px;
          margin-left: -10px;
          color: #E3E3E3;
          font-family: Poppins;
          font-size: 20.996px;
          font-style: normal;
          font-weight: 700;
          line-height: 160%; /* 43.193px */
          /* border: 1px solid #fff; */
        }
        .elemen-date-1 {
          margin-top:0px;
          margin-left:-10px;
          color:#809C92;
          font-family: Poppins;
          font-size: 13px;
          width:auto;
          height:auto;
          font-style: normal;
          font-weight: 400;
          line-height: 106.5%; /* 17.68px */
          /* border: 1px solid #fff; */
        }

        .elemen-date-2 {
          margin-top:0px;
          margin-left:-30px;
          color:#809C92;
          font-family: Poppins;
          font-size: 13px;
          width:auto;
          height:auto;
          font-style: normal;
          font-weight: 400;
          line-height: 106.5%; /* 17.68px */
          /* border: 1px solid #fff; */
        }

        .elemen-date-3 {
          margin-top:0px;
          margin-left:-120px;
          color:#809C92;
          font-family: Poppins;
          font-size: 13px;
          width:auto;
          height:auto;
          font-style: normal;
          font-weight: 400;
          line-height: 106.5%; /* 17.68px */
          /* border: 1px solid #fff; */
        }

        .logonews-1-featured{ 
          display: flex;
          width: 90%;
          height: 90%;
          flex-shrink: 0;
          border-radius: 18px;
          margin-left: auto; /* Rata tengah secara horizontal */
          margin-right: auto; /* Rata tengah secara horizontal */
          margin-top:5px;
          
          /* border: 1px solid #000; */
        }
        .others-news{
          color: #FFF;
          font-family: Poppins;
          font-size: 17px;
          font-style: normal;
          margin-left: auto; /* Rata tengah secara horizontal */
          font-weight: 500;
          /* border: 1px solid #fff; */
        }

        .segment-news-2 {
          text-align:right;
          color: #FFF;
          width:80%;
          margin-top:39px;
          /* border: 1px solid #fff; */
        }

        .box-image-elemen-line-1 {
          margin-left:-10px;
          margin-top:-20px;
          border-bottom: 1px solid #A8A8A8;
        }

        .box-footer {
          background-color: #003925;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;  /* Untuk align secara horizontal */
          align-items: center;      /* Untuk align secara vertikal */
          margin: 0;
          padding: 0;
          height:67px;
        }
        .footer-text {
          display: inline-flex;  /* Ubah menjadi inline-flex agar tetap satu baris */
          flex-wrap: wrap;
          font-size: 15.424px;
          text-align: center; /* Menyelaraskan teks di tengah */
          color: #FFF;
          width:100%;
          justify-content: center;  /* Untuk align secara horizontal */
          align-items: center;      /* Untuk align secara vertikal */
          /* border: 1px solid #fff; */
        }

        .url-footer {
          color: #E7E7E7;
          font-family: Poppins;
          font-size: 15.424px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          text-decoration: underline;
          margin-top:1px;
          /* border: 1px solid #fff; */

        }
        .footer-featured-title {
          align-items: flex-start; /* Memusatkan secara vertikal */
          display: inline-flex;  /* Ubah menjadi inline-flex agar tetap satu baris */
          flex-direction: column;
          color: #FFF;
          width:80%;
          margin-top:150px;
          margin-bottom:auto;
          margin-left: 162px;
          /* border: 1px solid #fff; */
          margin-left:162px;
        }
        .contact-featured-1{
          color: #FFF;
          font-family: "Just Another Hand";
          font-size: 95px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          margin-bottom:0px;
        }
        .contact-featured-2{
          color: #FBB136;
          font-family: "Just Another Hand";
          font-size: 94px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          margin-bottom:0px;
        }
        .contact-featured{
          display: flex;
          width: 501px;
          height: 520px;
          flex-shrink: 0;
          margin-top:11px;
          margin-left:0px;
          /* border: 1px solid #AAA; */
        }
        .div-contact-featured {
          width: 100%;
          height: 100%;
          /* border: 1px solid #fff; */
        }

        .box-contact {
          background-color: #FCBE13;          
          margin:0;
          /* border: 1px solid #fff; */

        }

        .box-uir {
          background-color: #004029;          
          margin:0;
          /* border: 1px solid #fff; */

        }

        .contact-text {
            display: flex;
            align-items: baseline; /* Menyelaraskan elemen secara horizontal */
            /* border: 1px solid #fff; */
            margin-top:40px;
            margin-left: 300px; /* Rata tengah secara horizontal */
            position:absolute;
        }
        .email-contact{
          color: #FFF;
          font-family: Poppins;
          font-size: 34.593px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
        .email-contact-2{
          color: #FFF;
          font-family: Poppins;
          font-size: 30.593px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }
        .phone-contact{
          color: #FFF;
          font-family: Poppins;
          font-size: 34.593px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
        .phone-contact-2{
          color: #FFF;
          font-family: Poppins;
          font-size: 30.593px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }
        .quotes-contact{
          color: #FFF;
          font-family: Poppins;
          font-size: 34.593px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
        .phone-featured{
          display: flex;
          width: 90px;
          height: 90px;
          margin:10px;
          /* border: 1px solid #000; */
        }
        .phone-container{
          display: flex;
          justify-content: space-between; /* Atur jarak antar gambar */
        }
        .div-contactinformation-featured {
          display:none;
        }

        @media (max-width: 768px) {
            body, .container-fluid {
                margin: 0;
                padding: 0;
                background-color: #004029;
            }
            .box-header {
                display: none;
            }
            
            .column-button {
                width: 276px;
                height: 60px;
                margin-bottom:40px;
            }
            .div-logo-featured{
                width: 100%;
                height: 100%;
                margin-top:10px;
                /* border: 1px solid #000; */
                margin: 0 auto; /* Rata tengah secara horizontal */
            }
            .btn-login {
              background-color: #004029;
              color: #fff;
              font-family: Poppins;
              border-radius: 30px;
              /* border: 1px solid #fbb136; */
              font-weight: bold;
              margin-left: 0 auto; /* Rata tengah secara horizontal */
            }
            .header-featured-title {
              display: flex;
              flex-direction: column;
              align-items: center; /* Pusatkan secara vertikal */
              justify-content: center; /* Pusatkan secara horizontal */
              color: #FFF;
              width:80%;
              margin-top: 50px; /* Memberikan margin atas 50px */
              margin-left: auto; /* Rata tengah secara horizontal */
              margin-right: auto; /* Rata tengah secara horizontal */
              /* border: 1px solid #fff; */
            }

  /*###########################################################################*/ 

          /* box news */
          .box-news {
            background-color: #003925;
            margin-left: auto; /* Rata tengah secara horizontal */
            margin-right: auto; /* Rata tengah secara horizontal */
            margin-top:auto;
          }
          .div-newslogo-featured {
            color: #FFF;
            margin-left: auto; /* Rata tengah secara horizontal */
            margin-right: auto; /* Rata tengah secara horizontal */
            margin-top:auto;
          }
          .logonews-featured{
            display: none;            
            /* border: 1px solid #000; */
          }
          .p-logonews-container {
              display: flex;
              align-items: baseline; /* Menyelaraskan elemen secara horizontal */
              /* border: 1px solid #fff; */
              margin-top:44px;
              margin-left: 27px; /* Rata tengah secara horizontal */
          }

          .p-logonews-1{
            color: #FFF;
            font-family: Poppins;
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
          }
          .p-logonews-2{
            color: #FFF;
            font-family: Poppins;
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
          }
          .p-logonews-3{
            color: #FBB136;
            font-family: Poppins;
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
          }

          .segment-news {
            align-items: flex-start; /* Memusatkan secara vertikal */
            display: flex;
            flex-direction: column;
            color: #FFF;
            width:100%;
            margin-top:39px;
            margin-left: 0px;
            margin-bottom:-160px;
            /* border: 1px solid #fff; */
          }

          .box-image-1 {
            margin:15px;
            width: 56.775px;
            height: 56.775px;
            border-radius: 5px;
            border: 1px solid #fff;
          }
          .box-image-elemen-1 {
            color: #E3E3E3;
            font-family: Poppins;
            font-size: 12.491px;
            font-style: normal;
            font-weight: 700;
            line-height: 160%; /* 19.985px */
          }
          .elemen-date-1 {
            font-family: Poppins;
            font-size: 7.681px;
            font-style: normal;
            font-weight: 400;
            line-height: 106.5%; /* 8.18px */
          }
          .elemen-date-2 {
            font-family: Poppins;
            font-size: 7.681px;
            margin-left:-50px;
            font-style: normal;
            font-weight: 400;
            line-height: 106.5%; /* 8.18px */
          }
          .elemen-date-3 {
            font-family: Poppins;
            font-size: 7.681px;
            margin-left:-135px;
            font-style: normal;
            font-weight: 400;
            line-height: 106.5%; /* 8.18px */
          }
          .logonews-1-featured{ 
            display: flex;
            width: 90%;
            height: 90%;
            flex-shrink: 0;
            border-radius: 3px;
            margin-left: auto; /* Rata tengah secara horizontal */
            margin-right: auto; /* Rata tengah secara horizontal */
            margin-top:3px;
            
            /* border: 1px solid #000; */
          }
          svg {
            width: 7.681px;
            height: 8.534px;
          }
          .others-news{
            color: #FFF;
            text-align: right;
            font-family: Poppins;
            font-size: 9.084px;
            font-style: normal;
            font-weight: 500;
            line-height: 180%; /* 16.351px */
          }

          .segment-news-2 {
            text-align:right;
            color: #FFF;
            width:100%;
            margin-top:39px;
            /* border: 1px solid #fff; */
          }


        .footer-text {
          display: inline-flex;  /* Ubah menjadi inline-flex agar tetap satu baris */
          flex-wrap: wrap;
          text-align: center; /* Menyelaraskan teks di tengah */
          font-size: 7.424px;
          color: #FFF;
          width:100%;
          justify-content: center;  /* Untuk align secara horizontal */
          align-items: center;      /* Untuk align secara vertikal */
          /* border: 1px solid #fff; */
        }

        .url-footer {
          color: #E7E7E7;
          font-family: Poppins;
          font-size: 7.424px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          text-decoration: underline;
          margin-top:0px;
          /* border: 1px solid #fff; */
        }

        .div-contactinformation-featured {
          align-items: flex-start; /* Memusatkan secara vertikal */
          display: flex;
          flex-direction: column;
          color: #FFF;
          width:70%;
          /* border: 1px solid #fff; */
          margin-bottom:0px;
          /* border: 1px solid #fff; */
          margin-left: auto; /* Rata tengah secara horizontal */
          margin-right: auto; /* Rata tengah secara horizontal */

        }

        
      .footer-featured-title {
          align-items: flex-start; /* Memusatkan secara vertikal */
          display: inline-flex;  /* Ubah menjadi inline-flex agar tetap satu baris */
          flex-direction: column;
          color: #FFF;
          width:100%;
          margin-top:12px;
          margin-bottom:auto;
          margin-left: 29px;
          /* border: 1px solid #fff; */
          justify-content: center; /* Untuk pusat horizontal */
          align-items: left;     /* Untuk pusat vertikal */
        }
        .contact-featured-1{
          display:none;
        }
        .contact-featured-2{
          display:none;
        }
        .contact-featured{
          display: flex;
          width: 272px;
          height: 272px;
          flex-shrink: 0;
          margin-top:11px;
          margin-left:0px;
          /* border: 1px solid #AAA; */
        }
        .div-contact-featured {
          width: 100%;
          height: 100%;
          /* border: 1px solid #fff; */
        }

        .box-contact {
          background-color: #FCBE13;          
          margin:0;
          /* border: 1px solid #fff; */

        }

        .box-uir {
          background-color: #004029;          
          margin:0;
          /* border: 1px solid #fff; */

        }
        .contact-text {
            display: flex;
            align-items: baseline; /* Menyelaraskan elemen secara horizontal */
            /* border: 1px solid #fff; */
            margin-top:40px;
            margin-left: 300px; /* Rata tengah secara horizontal */
            position:absolute;
        }
        .email-contact{
          color: #FFF;
          font-family: Poppins;
          font-size: 15.593px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
        .email-contact-2{
          color: #FFF;
          font-family: Poppins;
          font-size: 15.593px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }
        .phone-contact{
          color: #FFF;
          font-family: Poppins;
          font-size: 15.593px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
        .phone-contact-2{
          color: #FFF;
          font-family: Poppins;
          font-size: 15.593px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }
        .quotes-contact{
          color: #FFF;
          font-family: Poppins;
          font-size: 15.593px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }


        .phone-featured{
          width: 40px;
          height: 40px;
          /* border: 1px solid #000; */
        }
        .phone-container{
          display: flex;
          justify-content: space-between; /* Atur jarak antar gambar */
        }


        /* Gambar dengan efek blur */
        .img-blur {
          filter: blur(10px);
          transition: filter 0.5s ease-out;
        }
        .img-blur.loaded {
          filter: blur(0);
        }

        /* Skeleton Loader */
        .skeleton-img {
          width: 180px;
          height: 252px;
          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
          background-size: 200% 100%;
          animation: loading 1.5s infinite;
          border-radius: 10px;
        }

        /* Skeleton Animation */
        @keyframes loading {
          0% {
            background-position: -200% 0;
          }
          100% {
            background-position: 200% 0;
          }
        }

        .img-loaded {
          display: none;
        }
        .img-loaded.show {
          display: block;
        }
          
          
        }