/* Global Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    overflow-x: hidden;
}

/*---------------------------------LOGO KFHF------------------------*/



/*------------------------------------------SLIDER 9 PROFILE----------------------------------------------------------------------------*/

main { 
    width: min(1200px, 90vw);
    margin: auto;
    position: absolute;
    z-index: 22;
}

.slider-profile{
    width: 100%;
    --quantity: 9; 
    height: var(--height);
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        #ff0000 10% 90%,
        transparent
    );
}
.slider-profile .list{
    display: flex;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    
    
}
.slider-profile .list .item{
    width: var(--width);
    height: var(--height);
    position: fixed;
    left: 100%;
    animation: autoRun 10s linear infinite;
    transition: filter 0.5s;
    animation-delay: calc( (10s / var(--quantity)) * (var(--position) - 1) - 10s)!important;
    color: white;
    font-weight: bold;
    background-color: maroon;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 10px;
}

.slider-profile .list .item img{
    width: 100%;
    display: flex;
    gap: 10px;
}
@keyframes autoRun{
    from{
        left: 100%;
    }to{
        left: calc(var(--width) * -1);
    }
}
.slider-profile:hover .item{
    animation-play-state: paused!important;
    filter: grayscale(1);
}
.slider-profile .item:hover{
    filter: grayscale(0);
}
.slider-profile[reverse="true"] .item{
    animation: reversePlay 10s linear infinite;
}
@keyframes reversePlay{
    from{
        left: calc(var(--width) * -1);
    }to{
        left: 100%;
    }
}


 /* Media Queries */
 @media (max-width: 1200px) {
    .slider-profile {
      --quantity: 7; /* Tampilkan 7 item pada layar besar */
    }
  }

  @media (max-width: 900px) {
    .slider-profile {
      --quantity: 5; /* Tampilkan 5 item pada layar sedang */
    }
  }

  @media (max-width: 600px) {
    .slider-profile {
      --quantity: 5; /* Tampilkan 3 item pada layar kecil */
    }
  }

    

/*----------------------------------------------------------------------------*/

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/customfont.woff2') format('woff2');
    font-display: swap;
}




/* Global Styles */
header {
    background-color: transparent; /* Pastikan transparansi untuk header */
    color: white;
    padding: 10px; /* Sesuaikan padding */
    text-align: center;
    font-size: em;
}


/*----------------------------GForm---------------------------------------------------------------------------------------------------------*/

/* === Google Form Elegant Button === */
.gform-link {
  text-align: center;
  margin-top: 20px;
  animation: fadeInUp 1.2s ease;
}

.gform-link a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #b30000, #6b0000);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 12px 25px;
  border-radius: 50px;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.gform-link a:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(255, 80, 80, 0.8);
  background: linear-gradient(135deg, #ff2a2a, #7a0000);
}

.gform-icon {
  width: 28px;
  height: 28px;
  transition: transform 0.3s ease;
}

.gform-link a:hover .gform-icon {
  transform: scale(1.1);
}

/* === Animasi Halus Saat Muncul === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/*-----------------------------------------------------*/


section {
    padding: 40px;
    text-align: center;
    color: rgb(0, 0, 0);
    background-color: #f9f9f9;
   
}
.cta-button {
    display: inline-block;
    padding: 16px 40px;
    background-color: #960606;
    color: white;
    text-decoration: none;
    border-radius: 37px;
    margin-top: 20px;
    font-weight: bold;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
}
footer {
    background-color: #510000;
    color: white;
    text-align: center;
    padding: 10px;
    bottom: 0;
}



.intro-section {
    position: relative;
    height: 100vh; /* Full height of the viewport */
    background-image: linear-gradient(270deg, #370000, #530000, #430000);
   /* background-image: radial-gradient(circle at 39% center, #ac0202 15%, #4a0000 63%, #1c0000 100%); */
   /* background-size: cover; /* Make sure the background covers the entire section */
   /* background-position: center center; /* Center the background image */
    background-repeat: no-repeat;
    background-color: #04010D;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Memastikan konten berada di bawah */
    color: white; /* Text color to contrast with background */
    text-align: center;
    padding-bottom: 0; /* Hilangkan padding bawah */
    margin-bottom: 0; /* Hilangkan margin agar menempel pada section berikutnya */
    flex-direction: column; /* Mengatur elemen secara vertikal */
}

.intro-section nav {
    position: absolute;
    top: 10px;
    right: 0px; /* Posisikan ke pojok kanan atas */
    z-index: 9999; /* Pastikan berada di atas elemen lain */
}

.menu-icon {
    font-size: 30px;
    cursor: pointer;
    color: white; /* Warna icon */
    display: block;
    margin-left: auto;
    margin-bottom: auto;
    z-index: 10000; /* Pastikan ikon berada di atas elemen lain */
}

.nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 93px;
    right: 0px;
    width: 200px;
    border-radius: 0 0 10px 10px;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease;
    transform: translateX(100%);
    opacity: 0; /* Awalnya transparan */
    transform: translateX(100%); /* Posisi awal di luar layar */
    z-index: 9999; /* Pastikan menu berada di layer atas */
}

.nav-menu a {
    padding: 13px 20px;
    border-bottom: 3px solid #2f0000;
    color: white;
    text-decoration: none;
    opacity: 0; /* Mulai dari transparan */
    transform: translateX(0%); /* Mulai dari luar layar */
    animation: slideInWithBackground 0.5s forwards; /* Memulai animasi untuk setiap link */
    border-radius: 0px;
    font-weight: bold;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.nav-menu a:nth-child(1) {
    animation-delay: 0.1s; /* Delay untuk Home */
}

.nav-menu a:nth-child(2) {
    animation-delay: 0.3s; /* Delay untuk Gallery */
}

.nav-menu a:nth-child(3) {
    animation-delay: 0.5s; /* Delay untuk Contact */
}

/* Keyframe animasi untuk teks dan background bergerak dari luar kanan */
@keyframes slideInWithBackground {
    0% {
        opacity: 0;
        background-color: transparent; /* Background awal transparan */
        transform: translateX(100%); /* Mulai dari luar layar */
    }
    50% {
        background-color: #670101; /* Background mulai muncul saat bergerak */
    }
    100% {
        opacity: 1;
        background-color: #1c1616; /* Background penuh saat tiba di posisi */
        transform: translateX(0); /* Di posisi akhir */
    }
}

.nav-menu a:hover {
    background-color: #800000;
}

.nav-menu.active {
    display: flex;
    transform: translateX(0);
    opacity: 1; /* Tampilkan menu dengan transisi */

}

/* Media Query untuk memastikan navigasi tersembunyi di layar kecil */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
        right: 0px;
    }
}


/* Responsive adjustments: Use a smaller background image for mobile devices */

@media (max-width: 1024px) {
    .intro-section {
       height: 93vh;
       
    }
}


@media (max-width: 768px) {
    .intro-section {
        height: 93vh;
       /* background-image: url('images/BG1.webp'); /* Use smaller image for mobile */
        background-attachment: scroll; /* Disable parallax on mobile for performance */
    }
}


/* Style untuk konten agar berada tepat di bagian bawah */
.intro-section .content {
    max-width: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Warna background transparan */
    padding: 10px;
    text-align: center;
    border-radius: 50px 50px 0 0; /* Ujung atas melengkung */
    margin-bottom: 0; /* Menghilangkan jarak dari bagian bawah */
    box-sizing: border-box; /* Memastikan padding tidak memengaruhi ukuran konten */
}


/* Fullscreen Intro Section with lightweight and responsive background */

/* Style for logo and title in intro-section */
.intro-logo-title {
    position: absolute; /* Make it easier to position the content */
    top: 3%;  /* Adjust this value as needed to move it higher */
    left: 5%;  /* Adjust the left position to bring it closer to the left side */
    text-align: left; /* Align text to the left */
    z-index: 10; /* Ensure it's above other elements */
}

.intro-logo-title .logo {
    max-width: 212px; /* Adjust size if necessary */
    height: auto;
    margin-bottom: -23px; /* Add space between logo and title */
}


/* Style untuk gambar baru di bawah judul */
.intro-logo-title .intro-image {
    max-width: 300px; /* Pastikan gambar memenuhi lebar elemen */
    height: auto;
    margin-top: -40px; /* Beri jarak di atas gambar */
    border-radius: 10px; /* Ujung gambar melengkung */
    
}

.intro-logo-title h1 {
    font-size: 2.5em; /* Adjust font size as needed */
    color: white; /* Ensure the text remains visible */
    margin-bottom: 32px; /* Add some space below the title */
}


/* Responsive styles untuk layar tablet dan smartphone */

@media (max-width: 1024px) {
    .intro-logo-title .logo {
        max-width: 200px;
    }
    .intro-logo-title .intro-image {
        max-width: 250px;
        margin-top: -40px;
    }
}

/* Responsive Styling */
@media (max-width: 768px) {
    .intro-logo-title {
        top: 4%; /* Adjust for mobile */
        left: 5%; /* Ensure it stays visible on smaller screens */
    }

    .intro-logo-title .intro-image {
        margin-top: -40px;
    }

    .intro-logo-title .logo {
        max-width: 200px; /* Make the logo smaller on mobile */
    }

    .intro-logo-title h1 {
        font-size: 1.8em; /* Adjust font size for smaller screens */
    }

}


@media (max-width: 480px) {
    .intro-logo-title .logo {
        max-width: 130px;
    }
    .intro-logo-title .intro-image {
        max-width: 150px;
        margin-top: -40px;
    }
}



/*---------------------------------------------------------VIDEO POP UP----------------------------------------------------------------------------------------------------------*/


.bottom-link {
    position: absolute;
    top: 71%; /* Adjust this value to position it below the title */
    left: 0%; /* Align with the logo and title */
  display: inline-block;
  padding: 25px 30px;
  color: #ffffff;
  margin-top: 100px;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
  font-weight: 600;
  letter-spacing: 4px;
  overflow: hidden;
}

/*--------------- BUTTON EFFECT------------*/

.bottom-link:hover {
  background: #ffffff;
  color: #7f0101;
  box-shadow: 0 0 5px #fff, 0 0 25px #fff, 0 0 50px #fff, 0 0 200px #fff;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}

.bottom-link span {
  position: absolute;
  display: block;
}

.bottom-link span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(90deg, transparent, #fff);
  animation: animate1 1s linear infinite;
}

@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

.bottom-link span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 10px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #fff);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}

@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

.bottom-link span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(270deg, transparent, #fff);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}

@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

.bottom-link span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 10px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #fff);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}

@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}


* Responsif untuk layar tablet */
@media (max-width: 1024px) {
    .bottom-link {
        font-size: 1rem; /* Perkecil ukuran font pada layar tablet */
        padding: 20px 35px; /* Sesuaikan padding */
       top: 71%;
    }
}

/* Responsif untuk layar smartphone */
@media (max-width: 768px) {
    .bottom-link {
        font-size: 0.9rem; /* Ukuran font lebih kecil untuk smartphone */
        padding: 16px 30px; /* Sesuaikan padding pada layar kecil */
        top:65%;
       
    }
}

/* Responsif untuk layar yang sangat kecil (misalnya, ponsel dengan lebar kurang dari 480px) */
@media (max-width: 480px) {
    .bottom-link {
        font-size: 0.8rem; /* Ukuran font lebih kecil */
        padding: 10px 25px; /* Padding lebih kecil untuk layar kecil */
        top: 45%;
    }
}


/*-------------------------------------------------------------------------------------------*/




/* Gaya untuk pop-up video */
.video-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
}

/* Gaya untuk konten dalam pop-up */
.popup-content {
    position: relative;
    background-color: #ffffff00;
    padding: 0px;
    border-radius: 20px;
    max-width: 80%; /* Max lebar pada layar besar */
    max-height: 90%; /* Max tinggi untuk menjaga rasio */
    overflow: hidden; /* Jika konten melebihi ukuran, tersembunyi */
    box-sizing: border-box;
    width: inherit;
}

/* Gaya iframe YouTube di dalam pop-up */
.popup-content iframe {
    width: 100%;
    height: 70vh; /* Tentukan tinggi maksimum untuk menjaga proporsi */
    border: none;
}

/* Gaya untuk tombol close */
.bottom-close {
    display: block;
    width: 100%;
    padding: 15px 0;
    background-color: #960606;
    color: white;
    border: none;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    margin-top: 0px;
    border-radius: 0 0 10px 10px;
    transition: background-color 0.3s ease;
}

/* Hover effect untuk tombol close */
.bottom-close:hover {
    background-color: #d30000;
}

/* Responsif untuk layar lebih kecil */
@media (max-width: 1024px) {
    .popup-content {
        max-width: 90%; /* Lebih lebar di layar tablet */
        max-height: 90%; /* Tinggi lebih besar */
    }

    .popup-content iframe {
        height: 60vh; /* Kurangi tinggi pada tablet */
    }
}

@media (max-width: 768px) {
    .popup-content {
        max-width: 95%; /* Lebih besar di smartphone */
        max-height: 90%; /* Tinggi lebih besar */
    }

    .popup-content iframe {
        height: 50vh; /* Kurangi lagi tinggi pada smartphone */
    }
}

@media (max-width: 480px) {
    .popup-content {
        max-width: 100%; /* Memenuhi lebar layar pada perangkat kecil */
        max-height: 100%; /* Mengambil tinggi penuh layar kecil */
    }

    .popup-content iframe {
        height: 40vh; /* Lebih kecil di layar yang sangat kecil */
    }
}



/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------*/



/* Responsive styling untuk konten */
@media (max-width: 1024px) {
    .intro-section .content {
        max-width: 100%; /* Kurangi lebar di layar tablet */
    }

    .intro-section h2 {
        font-size: 1.8rem; /* Perkecil ukuran font */
    }

    .intro-section p {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .intro-section .content {
        max-width: 97%; /* Lebih lebar di layar smartphone */
        padding: 8px; /* Kurangi padding untuk menghemat ruang */
        border-radius: 20px 20px 0 0;
    }

    .intro-section h2 {
        font-size: 0.9rem; /* Ukuran font lebih kecil untuk smartphone */
        margin-bottom: 0px;
    }

    .intro-section p {
        font-size: 0.9rem; /* Ukuran paragraf lebih kecil di smartphone */
    }
}

.intro-image-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Membuat elemen anak bisa diposisikan absolut */
}

.intro-side-image {
    max-width: 45%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.intro-side-image-overlay {
    position: absolute; /* Memungkinkan elemen berada di atas layer */
    top: 30%; /* Posisikan di atas gambar pertama (sesuaikan nilai ini) */
    left: 75%; /* Posisikan di tengah container */
    transform: translate(-35%, -71%); /* Pastikan gambar berada tepat di tengah */
    max-width: 21%; /* Gambar kedua lebih kecil */
    animation: float 3s ease-in-out infinite; /* Tambahkan animasi */
    z-index: 10; /* Pastikan berada di atas gambar pertama */
}

/* Keyframes untuk animasi naik turun */
@keyframes float {
    0% {
        transform: translate(-50%, -50%) translateY(0); /* Posisi awal */
    }
    50% {
        transform: translate(-50%, -50%) translateY(-20px); /* Naik */
    }
    100% {
        transform: translate(-50%, -50%) translateY(0); /* Kembali ke awal */
    }
}



@media (max-width: 768px) {
    .intro-section {
        flex-direction: column;
        text-align: center;
    }

    .intro-image-container {
        margin-top: 20px;
    }

    .intro-side-image {
        max-width: 120%;
        margin-left: auto;
        margin-right: auto;
        
    }
    
     @media (max-width: 768px) {
    .intro-side-image-overlay {
        max-width: 45%; /* Gambar kedua lebih besar di layar kecil */
        top: 21%; /* Sesuaikan posisi untuk layar kecil */
        transform: translate(-20%, -31%); /* Pastikan tetap di atas */
    }
}
}


/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.intro-imageline-container {
   
    position: relative; /* Untuk mengatur posisi gambar */
    margin-top: -140px; /* Menjulurkan gambar ke atas section */
    text-align: center; /* Pusatkan gambar */
    z-index: 5; /* Pastikan gambar di atas konten lainnya */
    padding-bottom: 20px;

}


.intro-side-imageline {

  display: block;
  width: auto;
  max-width: 16%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/*------------------images-event-whatsup---------------------*/

.image-next-event {
 
}

.image-event-whatsup {
 width: 100%
  height: auto;
  max-width: 500px;
}



/*----------------------------------------------------*/

@media (max-width: 768px) {

    .intro-imageline-container {
        margin-top: -120px; /* Menjulurkan gambar ke atas section */
        }

    .intro-side-imageline {

          display: block;
          width: auto;
          max-width: 35%;
          height: auto;
          margin-left: auto;
          margin-right: auto;
            }
      }

@media (max-width: 480px) {
  .intro-side-imageline {
    max-width: 50%;
  }
}

/*------------------------------------------------TESTIMONIAL ICON TITLE----------------------------------------------------------------------------------------*/
.intro-img-testimonial {
       position: relative; /* Untuk mengatur posisi gambar */
    margin-top: -90px; /* Menjulurkan gambar ke atas section */
    text-align: center; /* Pusatkan gambar */
    z-index: 5; /* Pastikan gambar di atas konten lainnya */
    padding-bottom: 0px;
}

@media (max-width: 768px) {

    .intro-img-testimonial {
        margin-top: -73px; /* Menjulurkan gambar ke atas section */
    }
}

.intro-size-testimonial {
 display: block;
  width: auto;
  max-width: 30%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
 .intro-size-testimonial {
  display: block;
  width: auto;
  max-width: 65%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
    }
}

@media (max-width: 480px) {
  .intro-size-testimonial {
    max-width: 87%;
  }
}


/*--------------------------------------------------------------------------------*/

.custom-hr {
  border: 0;
  height: 5px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(255 0 0), rgba(0, 0, 0, 0));
}




/* Gradient Sections */
.gradient-section {
    
    transition: background 0.5s ease;
}

.gradient-section p {

    text-align: center;
}

.gradient-section h2 {
    text-align: center;
    font-size: 2.5em;
}

#section-1, #section-2, #section-3, #section-4 {
    background: linear-gradient(#fbfbfd, #fbfbfd);
}




/*-----------------------------------------------------------------------------TESTIMONIALS----------------------------------------------------------------------------------------*/












/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* What's UP Section */
.whats-up {
    
    text-align: center;
    background-image: linear-gradient(270deg, #370000, #530000, #430000);
}



.whats-up h2 {
    font-size: 2.3em;
    margin-bottom: 20px;
    font-weight: bold;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.whats-up h1 {
    font-size: 1.5em;
    margin-bottom: 20px;
    font-weight: bold;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
}

/* Pagination Styles (What's UP Section) */
.nav-button, .page-num {
    background-color: #800000;
    color: white;
    border: none;
    margin: 0 107px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 20px;
    width: auto;
    font-size: 1rem; /* Default font size */
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
}

/* Hover effect */
.nav-button:hover, .page-num:hover {
    transform: scale(1.1); /* Slightly increase the size on hover */
    background-color: #660000;
}

/* Active button */
.page-num.active {
    background-color: #db0101;
}

/* Responsive Styles for Pagination */
@media (max-width: 768px) {
    .nav-button, .page-num {
        margin: 0 17px;
        padding: 8px 15px;
        font-size: 0.9rem; /* Smaller font size for smaller screens */
    }
}

@media (max-width: 480px) {
    .nav-button, .page-num {
        margin: 0 17px;
        padding: 6px 17px;
        font-size: 0.8rem; /* Even smaller font size for very small screens */
    }
}




/* Styling khusus untuk slide 3 (employee photo gallery) */
.employee-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Set ukuran minimal 100px */
    gap: 15px; /* Memberi jarak antar item */
    justify-items: center; /* Center the items horizontally */
    margin-top: 20px;
}

/* Styling untuk setiap foto dan nama di dalam slide 3 */
.employee-photo-item img {
    width: 80px; /* Ukuran gambar icon lebih kecil */
    height: 80px;
    object-fit: cover; /* Menjaga proporsi gambar */
    border-radius: 50%; /* Membuat gambar berbentuk lingkaran */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sedikit bayangan untuk efek */
    transition: transform 0.3s ease-in-out; /* Efek animasi saat hover */
}

.employee-photo-item img:hover {
    transform: scale(1.1); /* Gambar sedikit membesar saat dihover */
}

.employee-photo-item p {
    margin-top: 5px;
    font-size: 0.9rem; /* Ukuran teks yang lebih kecil */
    text-align: center;
    color: #333; /* Warna teks */
}
/* Media query untuk layar kecil (mobile) */
@media (max-width: 768px) {
    .employee-photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* Lebih kecil pada mobile */
    }

    .employee-photo-item img {
        width: 60px;
        height: 60px; /* Gambar lebih kecil di layar kecil */
    }
}



/* Tambahkan animasi bounce pada pagination button di section what's up */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* Posisi normal */
    }
    40% {
        transform: translateY(-10px); /* Melompat ke atas */
    }
    60% {
        transform: translateY(-5px); /* Kembali sedikit */
    }
}

/* Untuk tombol pagination pada What's UP Section */
.page-num {
    background-color: #800000;
    color: white;
    border: none;
    margin: 0 5px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 8px;
    width: auto;
    font-size: 1rem;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out; /* Efek smooth untuk perubahan ukuran */
}

.page-num:hover {
    transform: scale(1.1); /* Slightly increase the size on hover */
    background-color: #660000; /* Change background color smoothly */
}

/* Kembali ke posisi normal setelah animasi */
.page-num {
    transform: translateY(0); /* Posisi normal */
}




/* Slider Styles */
.up-slider {
    position: relative;
    overflow: hidden;
    max-width: 960px;
    margin: 0 auto;
    height: auto; /* Atur tinggi sesuai dengan konten */
    color: #ffffff;
}

.up-slides {
    display: flex;
    transition: transform 0.6s ease-in-out; /* Transisi halus */
}



.up-slides, .testimonial {
    width: 100%;
    max-width: 100%;
    text-align: justify;
}


.up-slide {
    min-width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 20px;
}



/* Up-slider styles */
.up-slide img {
    width: 100%; /* Gambar akan mengambil 100% dari lebar kontainer */
    height: auto; /* Mengatur proporsi gambar secara otomatis */
    margin-bottom: 10px;
    max-width: 500px; /* Default maksimal ukuran gambar di device kecil */
    transition: all 0.3s ease; /* Animasi saat perubahan ukuran */

    /* Tambahkan drop shadow */
   /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  Drop shadow */
    
    /* Tambahkan border untuk frame */
    /* border: 10px solid #f3f3f3; */
    
    /* Buat gambar berbentuk rectangle */
    border-radius: 10px; /* Pastikan sudut gambar tidak membulat */

}

/* Media query untuk layar desktop */
@media (min-width: 1024px) {
    .up-slide img {
        max-width: 770px; /* Membuat gambar lebih besar pada layar desktop */
    }
}

/*----------------------------------VIDEO IN WHATS UP?-----------------------*/

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: auto;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 19px 21px rgba(0, 0, 0, 0.2)   /* border-radius: 13px;     box-shadow: 0 4px 9px rgba(0, 0, 0, 0.1); */
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
}

.custom-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}


@media (min-width: 1024px) {
  .video-wrapper {
    max-width: 600px;
    border-radius: 20px;
  }
}

/*------------------------------------------------------------------------------------*/

/* Style for the "Click Here" button in the Info Career section */
.seq-button {
    display: inline-block;
    padding: 16px 30px; /* Adjust padding for a bigger button */
    background-color: #960606; /* Initial button color */
    color: white; /* Text color */
    text-decoration: none; /* Remove underline */
    border-radius: 30px; /* Rounded corners */
    font-weight: bold; /* Bold text */
    font-size: 1.1rem; /* Slightly larger font */
    transition: all 0.3s ease; /* Smooth transitions for hover effects */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Soft shadow for 3D effect */
}

/* Hover effect for the button */
.seq-button:hover {
    background-color: #d30000; /* Change background color on hover */
    color: white; /* Keep the text white */
    transform: scale(1.05); /* Slightly enlarge the button */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */
}

/* Add a slight arrow after the button text */
.seq-button::after {
    content: " →"; /* Adds an arrow */
    transition: transform 0.3s ease; /* Smooth arrow transition */
}

/* Make the arrow animate on hover */
.seq-button:hover::after {
    transform: translateX(5px); /* Move the arrow to the right on hover */
}








/* --------------------------------------------- ---------------------------------------------------------------------------------------------------- */


/* Section 1 Title and Subtitle */
.section-title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 10px;
}

.section-subtitle {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 40px;
    color: #666;
}




/* One Sections */
.one-section {
    padding: 10px 30px;
    transition: background 0.5s ease;
}

.one-section h3 {
    font-size: 2em;
}

.one-section p {
    list-style: none; /* Remove default list style if using ul or li */
    position: relative; /* To position the bullet */
    padding-left: 20px; /* Space before the text to make room for the bullet */
}

.one-section p::before {
    content: "•"; /* The bullet point character */
    color: black; /* Set bullet color to black */
    font-size: 1.7em; /* Slightly larger bullet */
    position: absolute; /* Position it relative to the text */
    left: 0; /* Align bullet to the left */
    top: 0; /* Align bullet vertically */
}


/* Layout Kanan-Kiri */
.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    margin: 0% 15%;
}

.column {
    flex: 1;
    padding: 20px;
}
.column.left {
    text-align: left;
}
.column.left h4{
    text-align: left;
    font-size: 0.8em;
    font-weight: bold;
    font-style: italic;
}
.column.left p {
    text-align: left;
    font-size: 0.9em;
    
}
.column.right {
    text-align: right;
}
.column.right p{
    text-align: right;
    font-size: 0.9em;
}
.column.right h4{
    text-align: right;
    font-size: 0.8em;
    font-weight: bold;
    font-style: italic;
}

/* Responsiveness */
.responsive-img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 19px 21px rgba(0, 0, 0, 0.2)
   /* border-radius: 13px;
     box-shadow: 0 4px 9px rgba(0, 0, 0, 0.1); */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .row {
        flex-direction: column;
        text-align: center;
        margin: 30px;
    }

    .column {
        padding: 10px 0;
    }

    .column.left {
        text-align: left;
    }

    .column.right {
        text-align: right;
    }
}



/* Styling untuk tombol scroll ke atas */
#scrollTopBtn {
    position: fixed; /* Tetap di satu tempat */
    bottom: 125px; /* Jarak dari bawah */
    right: 22px; /* Jarak dari kanan */
    z-index: 100; /* Pastikan di atas elemen lainnya */
    background-color: #800000; /* Warna background */
    color: white; /* Warna teks/icon */
    border: none;
    border-radius: 50%; /* Bentuk lingkaran */
    padding: 15px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sedikit bayangan */
    font-size: 18px;
    display: none; /* Sembunyikan secara default */
    transition: transform 0.3s ease-in-out, background-color 0.3s; /* Efek smooth */
}

/* Efek hover untuk tombol */
#scrollTopBtn:hover {
    background-color: #660000; /* Ubah warna saat hover */
    transform: scale(1.1); /* Sedikit membesar saat hover */
}




/* SECTION 2 */

/* Styling for the photo gallery slider */
.photo-gallery-slider {
    position: relative;
    overflow: hidden; /* Hide anything that goes outside the container */
    width: 100%;
    max-width: 1200px; /* Set a maximum width for the slider */
    margin: 0 auto;
    padding: 20px 0;
}

.photo-gallery-track {
    display: flex;
    animation: slideGallery 30s linear infinite; /* Infinite scroll effect */
    transition: transform 0.5s ease-in-out; /* Smooth transition */
    will-change: transform; /* Memastikan browser mengoptimalkan transformasi */
}

.gallery-photo-item {
    min-width: 200px; /* Set a fixed width for each photo frame */
    margin: 0 10px; /* Space between the frames */
    
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow effect for frame */
    border-radius: 10px; /* Rounded corners for the frames */
    overflow: hidden; /* Ensure images don’t overflow the frame */
}

/* Styling for the gallery images to fill the frame */
.gallery-photo-item img {
    width: 100%; /* Ensure the image occupies the entire width of the frame */
    height: 100%; /* Ensure the image occupies the entire height of the frame */
    object-fit: cover; /* Ensures the image covers the frame without distortion */
    display: block; /* Remove any extra spacing that might be caused by inline elements */
    border-radius: 10px; /* Optional: Add rounded corners to the images */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Optional: Add a subtle shadow */
}


/* Responsive adjustments for gallery items */
@media (max-width: 768px) {
    .gallery-photo-item img {
        object-fit: cover; /* Ensure the image still covers the frame on smaller screens */
        height: 100%; /* Allow the height to adjust naturally for better fit */
    }
}


/* Keyframes for the sliding animation */
@keyframes slideGallery {
    0% {
        transform: translateX(0); /* Start at the initial position */
    }
    100% {
        transform: translateX(-100%); /* Slide all the way to the left */
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gallery-photo-item {
        min-width: 150px; /* Smaller photo frames on mobile */
    }
}

@media (max-width: 480px) {
    .gallery-photo-item {
        min-width: 130px; /* Even smaller frames on very small screens */
    }
}


/* Styling for the navigation buttons under the gallery slider */
.gallery-nav-buttons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between buttons */
    margin-top: 20px;
}

/* Specific styling for "View Full Gallery" button with smooth transition effect */
.gallery-nav-buttons .nav-button.view-full-gallery {
    background-color: #800000; /* Initial button color */
    color: white;
    padding: 20px 30px;
    text-decoration: none;
    border-radius: 30px;
    transition: transform 0.2s ease-out, background-color 0.3s ease-in; /* Smooth transition for size and color */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    font-size: 1rem;
    display: inline-block;
    font-weight: bold;
}

/* Transform the button size and change background color on hover */
.gallery-nav-buttons .nav-button.view-full-gallery:hover {
    transform: scale(1.1); /* Slightly increase the size of the button */
    background-color: #d30000; /* Change background color smoothly */
}


@media (max-width: 768px) {
    .gallery-nav-buttons .nav-button.view-full-gallery {
        padding: 18px 18px;
    }

    .gallery-nav-buttons {
        
        gap: 10px;
        
    }

    .gallery-nav-buttons .nav-button {
       
        text-align: center;
    }
}



/*---------------------------------------------- SECTION 3 ----------------------------*/

/* Tab Container */
.tab-container {
    background-color: white;
    padding: 0;
    border-radius: 10px;
    box-shadow: 0 11px 33px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* Tab Buttons */
.tab-buttons {
    display: flex;
    justify-content: space-between;
    border-bottom: 0px solid #fbfbfd; /* Border line between buttons and content */
}

/* Base Style for All Tabs */
.tab-button {
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    color: rgb(255, 255, 255);
    border-radius: 10px 10px 0 0;
    flex: 1;
    text-align: center;
    background-color: #800000;
    font-weight: bold;
    color: white; /* Default text color */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition */
}

.tab-button.active {
    background-color: #fbfbfd; /* Change background to white */
    color: #800000; /* Change text color to maroon */
   
}


/* Tab One Styles */
#tab-one-button {
    background-color: #fbfbfd; /* Blue for Tab One */
   
}

#tab-one-button.active, #tab-one-button:hover {
    background-color: #fbfbfd; /* Darker blue when active or hovered */
    
}

/* Tab Two Styles */
#tab-two-button {
    background-color: #fbfbfd; /* Green for Tab Two */
   
}

#tab-two-button.active, #tab-two-button:hover {
    background-color: #fbfbfd; /* Darker green when active or hovered */
    
}

/* Tab Three Styles */
#tab-three-button {
    background-color: #fbfbfd; /* Yellow for Tab Three */
    
}

#tab-three-button.active, #tab-three-button:hover {
    background-color: #fbfbfd; /* Darker yellow when active or hovered */
    
}

/* Smooth Transitions for Tab Content */
.tab-content {
    
    display: none;
    padding: 20px;
    border: 2px solid transparent;
    border-radius: 0 0 10px 10px;
    opacity: 0; /* Start with 0 opacity for smooth transition */
    transform: translateY(10px); /* Slight shift for smooth entry */
    
    transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition for opacity and position */
    text-align: justify;
}
/* Tab One Content Styles */
#tab-one {
    background-color: #fbfbfd; /* Light blue background for content */
   
}

/* Tab Two Content Styles */
#tab-two {
    background-color: #fbfbfd; /* Light green background for content */
    
}

/* Tab Three Content Styles */
#tab-three {
    background-color: #fbfbfd; /* Light yellow background for content */
    
}

/* Active Tab Content */
.tab-content.active {
    display: block;
    opacity: 1; /* Set to full opacity */
    transform: translateY(0); /* Bring back to normal position */
    
}

.tab-content.active h2 {
    font-size: 1em;
    text-align: left;
}

.tab-content.active p {
    font-size: 0.8em;
    text-align: center;
    line-height: 50%;
}

/* Additional styling for text inside tab-content */
.tab-content p, .tab-content h1 {
    opacity: 0; /* Text is initially invisible */
    transition: opacity 1s ease-in-out; /* Smooth transition for text opacity */
}

/* When tab-content is active, text becomes fully visible */
.tab-content.active p, .tab-content.active h1 {
    opacity: 1; /* Text fades in */
    text-align: center;
}


/* Tablet View */
@media (min-width: 768px) {
    .tab-container {
        width: 80%; /* Adjust for tablet view */
        margin: 0 auto;
    }
}

/* Desktop View */
@media (min-width: 1024px) {
    .tab-container {
        width: 90%; /* Make it wider on desktop */
        margin: 0 auto;
    }
}



/*---------------------------------------------------------SECTION 4 -------------------------*/

/* Kontainer untuk peta lebar */
.wide-map-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
}

.wide-map-container h2 {
 font-size: 1.5em;
}

/* Pastikan iframe responsif */
.wide-map-container iframe {
    width: 100%;
    height: 450px;
    border: none;
    border-radius: 20px;
}

/* Pastikan footer tidak tumpang tindih dengan peta */
footer {
    padding-top: 50px;
}


/*-------------------------------------------------------------WA-----------------------------------------------------------------*/

/* Tombol WhatsApp */
.whatsapp-btn {
    position: fixed;
    bottom: 80px; /* Posisi di atas scrollTopBtn */
    right: 20px;
    background-color: #25D366;
    border: none;
    border-radius: 50%;
    padding: 15px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 101;
}

.whatsapp-btn img {
    width: 24px;
    height: 24px;
}



/* WhatsApp Icon Styles */
.whatsapp-icon {
    position: fixed;
    bottom: 0px;
    right: 13px;
    color: white;
    border-radius: 50%;
    padding: 0;
    text-align: center;
    z-index: 1000;
}

.whatsapp-icon img {
    width: 100%;
    height: 85px;
    border-radius: 50%;
}

.whatsapp-icon:hover {
    cursor: pointer;
}

/* Chat bubbles effect */
.effect-container {
    position: fixed;
    bottom: 70px; /* Jarak antara ikon dan balon chat */
    right: 70px;
    display: none; /* Initially hidden */
    z-index: 999;
}

.effect-container .effect-text {
    background-color: #25D366;
    color: white;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 19px;
    opacity: 0;
    transform: translateY(20px);
    animation: slideUp 0.5s forwards;
    display: block;
    text-decoration: none;
    max-width: 93px;
    text-align: center;
}

.effect-container .effect-text::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #25D366;
    transform: translateX(-50%);
}

.effect-container .effect-text:hover {
    background-color: #20b358;
}

/* Animations for showing/hiding the chat effect */
@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}
/*-------------------------------logo cambridge--------------------*/


.logo-cambridge {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 70px; /* bisa disesuaikan */
  width: 100%;
  height: auto;
  padding: 10px 0;
}

.logo-cambridge img {
  max-width: 180%;
  height: auto;
  display: block;
  margin-bottom: 21px;
}


/*------------------------------ MEDSOS -----------------------------*/

.social-media-icons {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.social-media-icons a {
    margin: 0 10px;
    transition: transform 0.3s ease;
}

.social-media-icons a:hover {
    transform: scale(1.2);
}

.social-media-icons img {
    width: 32px;
    height: 32px;
}


/*--------------------------------------MAPS--------------------------------*/
.custom-iframe {
  width: 100%;
  height: 450px;
}


/*------------------------------------------------------------------------*/