/* FONTS */
@import url(../css/clash-display.css);

/* VARIABLES */
:root {
    --c-dark: #212529;
    --c-brand: #385288;
    --c-brand-light: #47b5e0;
    --c-brand-rgb: 20, 18, 36 ;
    --c-body: #727272;
    --c-footer: #f0f0f0;
    --font-base: "FontBold", sans-serif;
    --font-bold: "FontBold" serif;
    --box-shadow: 0px 15px 25px rgba(0,0,0,0.08);
    --transition: all 0.5s ease;;
}

/* RESET & HELPERS */
body {
    font-family: var(--font-base);
    background-color: var(--c-dark);
    color: var(--c-body);
    overflow-x: hidden;
}

h2, h3,h4, h5, h6,
 .h2, .h3, .h4, .h5, .h6 {
    font-weight: 500;
    color: var(--c-footer);
}

h1,
.h1 {
    font-weight: 400;
    font-family: var(--font-bold);
    color: var(--c-footer);
} 
    
/* width */
::-webkit-scrollbar {
    width: 8px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--c-dark);
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--c-brand);
    border-radius: 10px;
    margin: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--c-brand-light);
  }

a {
    text-decoration: none;
    color: var(--c-brand);
    transition: var(--transition);
}

a:hover {
    color: var(--c-brand-light);
}

img {
    max-width: 100%;
    height: 50;
}

.logo-brand {
    max-width: 5.5rem;
}

.logo-footer {
    max-height: 90px;
    background-color: var(--c-footer);
    border-radius: 10px;
}


.theme-shadow {
    box-shadow: var(--box-shadow);
}

.section-padding {
    padding-top: 140px;
    padding-bottom: 140px;
}

.section-padding-home {
    padding : 100px

}

.bg-grey {
    background-color: rgba(255,255,255,0.1);
}

.text-cadetblue {
    color: cadetblue;
}

.contour {
    box-shadow: 15px 15px 0px  var(--c-footer);
    border-radius: 10px;
}

.text-justify {
    text-align: justify;
    text-justify: auto;
}

/* IMAGE ZOOM */
.image-zoom2 {
    position: relative;
    /* overflow: hidden; */
}

.image-zoom-wrapper {
    overflow: hidden;
    position: relative;
}

.image-zoom-wrapper img{
     transition: var(--transition);
}

.image-zoom2:hover .image-zoom-wrapper img {
    transform: scale(1.1);
}

.image-comp {
    max-height: 300vh;
}


table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    border-collapse: collapse;
    text-align: center;
    font-weight: bold;
    background-color: #f4f4f4;
}

th {
    background-color: var(--c-brand);
    font-weight: bold;
    color: #f4f4f4;

}

caption {
    caption-side: top;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left;
}

.table-container {
    max-width: 800px;
    margin: 0 auto;
}

.scrollable-table {
    border: 1px solid #ccc;
}

.scrollable-table tbody {
    display: block;
    max-height: 250px;
    overflow-y: auto;
}

.scrollable-table thead, .scrollable-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.scrollable-table thead {
    background-color: #f4f4f4;
}

/* TABEL 2 */
.table-container2 {
    max-width: 1100px;
    margin: 0 auto;
}

.scrollable-table2 {
    border: 1px solid #ccc;
}

.scrollable-table2 tbody {
    display: block;
    max-height: 600px;
    overflow-y: auto;
}

.scrollable-table2 thead, .scrollable-table2 tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.scrollable-table2 thead {
    background-color: #f4f4f4;
}

#notification {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    z-index: 1000;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}


/* NAVBAR */
/* Navbar Styles */
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
    background-color: var(--c-dark);
    transition: all 0.5s;
    padding: 10px 0;
  }

  /* Tambahkan untuk menyembunyikan header */
.header-hidden {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
  }
  
  /* Tambahkan untuk header saat scroll */
  .scrolled {
    background-color: rgba(0, 0, 0, 0.9); /* Ubah warna sesuai kebutuhan */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  }
  
  
  #header .logo {
    font-size: 32px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  
  #header .logo a {
    color: #fff;
  }
  
  #header .logo a span {
    color: #51b1ff;
  }
  
  #header .logo img {
    max-height: 40px;
  }
  
  
  /*--------------------------------------------------------------
  # Navigation Menu
  --------------------------------------------------------------*/
  /**
  * Desktop Navigation 
  */
  .navbar {
    padding: 0;
  }
  
  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }
  
  .navbar li {
    position: relative;
  }
  
  .navbar a,
  .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 10px 40px;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
    transition: 0.3s;
  }
  
  .navbar a i,
  .navbar a:focus i {
    font-size: 10px;
    line-height: 0;
    margin-left: 3px;
  }
  
  .navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover > a {
    color: #51abff;
  }
  
  .navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 14px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
  }
  
  .navbar .dropdown ul li {
    min-width: 200px;
  }
  
  .navbar .dropdown ul a {
    padding: 10px 20px;
    font-size: 14px;
    text-transform: none;
    color: #151515;
    font-weight: 400;
  }
  
  .navbar .dropdown ul a i {
    font-size: 12px;
  }
  
  .navbar .dropdown ul a:hover,
  #navbar .dropdown ul li a .active,
  .navbar .dropdown ul .active:hover,
  .navbar .dropdown ul li:hover > a {
    background-color: #51abffc6;
  }
  
  .navbar .dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }
  
  .navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
  }
  
  .navbar .dropdown .dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
  }
  
  @media (min-width: 992px) {
    #active1 {
        color: #51abff;
    }
  }

  @media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
      left: -90%;
    }
  
    .navbar .dropdown .dropdown:hover > ul {
      left: -100%;
    }
  }
  
  /**
  * Mobile Navigation 
  */
  .mobile-nav-toggle {
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
  }
  
  @media (max-width: 992px) {
    .mobile-nav-toggle {
      display: block;
    }

    #active1 {
        background-color: #51abff;
    }

    #active2 {
        background-color: #fff;
    }
  
    #active2:hover {
        background-color: #51abff;
    }
  
    .navbar ul {
      display: none;
    }
  }
  
  .navbar-mobile {
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    transition: 0.3s;
    z-index: 999;
  }
  
  .navbar-mobile .mobile-nav-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
  }
  
  .navbar-mobile ul {
    display: block;
    position: absolute;
    top: 55px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    padding: 10px 0;
    background-color: #fff;
    overflow-y: auto;
    transition: 0.3s;
  }
  
  .navbar-mobile a,
  .navbar-mobile a:focus {
    padding: 10px 20px;
    font-size: 15px;
    color: #151515;
  }
  
  .navbar-mobile a:hover,
  .navbar-mobile .active,
  .navbar-mobile li:hover > a {
    color: #151515;
    background-color: #51b1ff;
  }
  
  .navbar-mobile .getstarted,
  .navbar-mobile .getstarted:focus {
    margin: 15px;
  }
  
  .navbar-mobile .dropdown ul {
    position: static;
    display: none;
    margin: 10px 20px;
    padding: 10px 0;
    z-index: 99;
    opacity: 1;
    visibility: visible;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  }
  
  .navbar-mobile .dropdown ul li {
    min-width: 200px;
  }
  
  .navbar-mobile .dropdown ul a {
    padding: 10px 20px;
    color: #151515;
  }
  
  .navbar-mobile .dropdown ul a i {
    font-size: 12px;
  }
  
  .navbar-mobile .dropdown ul a:hover, 
  .navbar-mobile .dropdown ul .active:hover,
  .navbar-mobile .dropdown ul li:hover > a {
    background-color: #51b1ff;    
  }

  .navbar-mobile .dropdown > .dropdown-active {
    display: block;
  }
  

/* Search Bar - visible by default */

.search-bar-container {
    display: flex;
    position: absolute;
    top: 50%; /* Center vertically */
    right: 7%; /* Adjust as needed */
    transform: translateY(-50%); /* Center vertically */
    background: var(--c-dark); /* Dark background */
    border: 1px solid white; /* White border */
    border-radius: 10px;
    padding: 7px;
    width: 160px; /* Adjust width as needed */
    height: 35px;
    align-items: center;
    opacity: 1;
    pointer-events: auto; /* Allow interaction */
    transition: background 0.3s ease; /* Smooth transition */
}

/* Search Button */
.search-btn {
    background: transparent; /* Make the background transparent */
    border: none; /* Remove any border */
    cursor: pointer;
    color: white; /* Set the icon color to white */
}

/* Search Input */
.search-bar-container .search-input {
    border: none;
    outline: none;
    padding: 8px;
    font-size: 13px;
    width: 100%; /* Full width */
    background: transparent; /* Make input background transparent */
}

/* Change background color on focus */
.search-bar-container:focus-within {
    background: white; /* White background on focus */
}
.search-bar-container:focus-within .search-btn {
    color: var(--c-dark); /* White background on focus */
}

    .search-input .autocom-box {
    min-width: 180px;
    top: 100%;
    left: 0;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    max-height: 280px;
    overflow-y: auto;
    font-size: 0.75rem;
  }
  
    .search-input.active .autocom-box {
    padding: 5px 10px 5px 10px;
    opacity: 1;
    pointer-events: auto;
  }
  
  .autocom-box li {
    list-style: none;
    padding: 2px;
    display: none;
    width: 100%;
    cursor: default;
    border-radius: 3px;
  }
  
    .search-input.active .autocom-box li {
    display: block;
  }
  .autocom-box li:hover {
    background: #51b1ff;
  }

  /* Responsive Styles */
  @media (min-width: 320px) and (max-width: 480px) {

    .search-bar-container {
        width: 35%;
        position: absolute; 
        top: 50%;
        right: 30%;; 
    }
}
@media (min-width: 481px) and (max-width: 767px) {
    

    .search-bar-container {
        position: absolute; 
        top: 50%;
        right: 30%;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    

    .search-bar-container {
        position: absolute; 
        top: 50%;
        right: 30%;
    }
}



/* BTN */
.btn {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 0;
    padding: 10px 24px;
}

.btn-2 {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 0;
    padding: 10px 24px;
}

.btn-brand {
    background-color: var(--c-brand);
    border-color: var(--c-brand);
    color: white;
}

.btn-brand:hover {
    background-color: var(--c-brand-light);
    border-color: var(--c-brand-light);
    color: white;
}


/* HERO */
#hero {
    background-position: center;
    background-size: cover;
    justify-content: center;
    align-items: center;
}

#hero-competition {
    position: relative;
    background: linear-gradient(rgba(var(--c-brand-rgb), 0.2), rgba(var(--c-brand-rgb), 0.9)), url(../images/gallery24-3.jpg) no-repeat center center;
    background-size: cover;
    padding: 50px 0;
    color: #fff;
  
    /* Apply gradient mask */
    -webkit-mask-image: linear-gradient(
      rgba(0, 0, 0, 1) 0%,    /* Fully visible at the bottom */
      rgba(0, 0, 0, 1) 60%,   /* Midpoint fully visible */
      rgba(0, 0, 0, 0) 100%   /* Transparent at the top */
    );
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
  
    mask-image: linear-gradient(
      rgba(0, 0, 0, 1) 0%,    /* Fully visible at the bottom */
      rgba(0, 0, 0, 1) 60%,   /* Midpoint fully visible */
      rgba(0, 0, 0, 0) 100%   /* Transparent at the top */
    );
    mask-size: cover;
    mask-repeat: no-repeat;
  }
  
  
  
  #hero-competition h2 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  #hero-competition blockquote p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 30px;
  }

  .hero-image2 img {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: block;
  }
  

#hero-boat {
    background: linear-gradient(rgba(var(--c-brand-rgb), 0.2), rgba(var(--c-brand-rgb), 0.9)), url(../images/technicaldanau.JPG);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    justify-content: center;
    align-items: center;
    /* Apply gradient mask */
    -webkit-mask-image: linear-gradient(
      rgba(0, 0, 0, 1) 0%,    /* Fully visible at the bottom */
      rgba(0, 0, 0, 1) 60%,   /* Midpoint fully visible */
      rgba(0, 0, 0, 0) 100%   /* Transparent at the top */
    );
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
  
    mask-image: linear-gradient(
      rgba(0, 0, 0, 1) 0%,    /* Fully visible at the bottom */
      rgba(0, 0, 0, 1) 60%,   /* Midpoint fully visible */
      rgba(0, 0, 0, 0) 100%   /* Transparent at the top */
    );
    mask-size: cover;
    mask-repeat: no-repeat;
  }

#hero-research {
    background: linear-gradient(rgba(var(--c-brand-rgb), 0.2), rgba(var(--c-brand-rgb), 0.9)), url(../images/naval.jpg);
    background-position: center;
    background-size: cover;
    justify-content: center;
    align-items: center;
    /* Apply gradient mask */
    -webkit-mask-image: linear-gradient(
      rgba(0, 0, 0, 1) 0%,    /* Fully visible at the bottom */
      rgba(0, 0, 0, 1) 60%,   /* Midpoint fully visible */
      rgba(0, 0, 0, 0) 100%   /* Transparent at the top */
    );
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
  
    mask-image: linear-gradient(
      rgba(0, 0, 0, 1) 0%,    /* Fully visible at the bottom */
      rgba(0, 0, 0, 1) 60%,   /* Midpoint fully visible */
      rgba(0, 0, 0, 0) 100%   /* Transparent at the top */
    );
    mask-size: cover;
    mask-repeat: no-repeat;
  
}

#video-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background: black no-repeat center center/cover;
    overflow: hidden;
     /* Apply gradient mask */
     -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 1) 0%,    /* Fully visible at the bottom */
        rgba(0, 0, 0, 1) 50%,   /* Midpoint fully visible */
        rgba(0, 0, 0, 0) 100%   /* Transparent at the top */
      );
      -webkit-mask-size: cover;
      -webkit-mask-repeat: no-repeat;
    
      mask-image: linear-gradient(
        rgba(0, 0, 0, 1) 0%,    /* Fully visible at the bottom */
        rgba(0, 0, 0, 1) 50%,   /* Midpoint fully visible */
        rgba(0, 0, 0, 0) 100%   /* Transparent at the top */
      );
      mask-size: cover;
      mask-repeat: no-repeat;
  }
  
  .background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video scales well */
    z-index: 1;
  }
  
  .video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: white;
  }
  
  .video-overlay h1 {
    font-size: 4rem; /* Adjust the size as needed */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    background: rgba(0, 0, 0, 0.5); /* Optional for better contrast */
    padding: 10px 20px;
    border-radius: 5px;
  }
  


#about-profile {
    background: linear-gradient(rgba(var(--c-brand-rgb), 0.2), rgba(var(--c-brand-rgb), 0.9)), url(../images/buvall.JPG);
    background-position: center;
    background-size: cover;
    justify-content: center;
    align-items: center;
    /* Apply gradient mask */
    -webkit-mask-image: linear-gradient(
      rgba(0, 0, 0, 1) 0%,    /* Fully visible at the bottom */
      rgba(0, 0, 0, 1) 40%,   /* Midpoint fully visible */
      rgba(0, 0, 0, 0) 110%   /* Transparent at the top */
    );
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
  
    mask-image: linear-gradient(
      rgba(0, 0, 0, 1) 0%,    /* Fully visible at the bottom */
      rgba(0, 0, 0, 1) 40%,   /* Midpoint fully visible */
      rgba(0, 0, 0, 0) 110%   /* Transparent at the top */
    );
    mask-size: cover;
    mask-repeat: no-repeat;
}

.research {
    margin-top: 70px;
    width: auto;
    background-color: rgba(55, 74, 109, 0.7);
    filter:  opacity(85);
    border-radius: 20px;
}

.carousel1{    
    height: 100vh;
    margin-top: -50px;
    width: 100vw;
    overflow: hidden;
    position: relative;
}
.carousel1 .list .item{   
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0 0 0 0;
}
.carousel1 .list .item img{ 
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}
.carousel1 .list .item .content{
    position: absolute;
    top: 20%;
    width: 1140px;
    max-width: 80%;
    left: 50%;
    font-family: var(--font-bold);
    transform: translateX(-50%);
    padding-right: 30%;
    box-sizing: border-box;
    color: var(--c-footer);
    text-shadow: 0 5px 10px #0004;
}
.carousel1 .list .item .author{
    font-weight: bold;
    letter-spacing: 10px;
}
.carousel1 .list .item .title,
.carousel1 .list .item .topic{
    font-size: 5em;
    font-weight: bold;
    line-height: 1.3em;
}
.carousel1 .list .item .topic{
    color: var(--c-brand-light);
}

.carousel1 .list .item .buttons button:nth-child(2){
    background-color: transparent;
    border: 1px solid #fff;
    color: #eee;
}
/* thumbail */
.thumbnail{
    position: absolute;
    bottom: 50px;
    left: 60%;
    width: max-content;
    z-index: 100;
    display: flex;
    gap: 20px;
}
.thumbnail .item{
    width: 140px;
    height: 200px;
    flex-shrink: 0;
    
    position: relative;
}
.thumbnail .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;  
    border-radius: 20px;
}
.thumbnail .item .content{
    background-color: rgba(0, 0, 0, 0.3);
    padding: 5px;
    border-radius: 10px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
}
.thumbnail .item .content .title{
    font-weight: 500;
    margin: 0;
}
.thumbnail .item .content .description .p{
    font-weight: 150;  
    margin: 0;
}
/* arrows */
.arrows{
    position: absolute;
    top: 85%;
    right: 52%;
    z-index: 100;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 20px;
    align-items: center;
   
}
.arrows button{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--c-brand);
    border: none;
    color: #fff;
    font-family: monospace;
    font-weight: bold;
    padding-top: 0.3rem;
    transition: .5s;
}
.arrows button:hover{
    background-color: #fff;
    color: #000;
}

/* animation */
.carousel1 .list .item:nth-child(1){
    z-index: 1;
}

/* animation text in first item */

.carousel1 .list .item:nth-child(1) .content .author,
.carousel1 .list .item:nth-child(1) .content .title,
.carousel1 .list .item:nth-child(1) .content .topic,
.carousel1 .list .item:nth-child(1) .content .des,
.carousel1 .list .item:nth-child(1) .content .buttons
{
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s 1s linear 1 forwards;
}
@keyframes showContent{
    to{
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
.carousel1 .list .item:nth-child(1) .content .title{
    animation-delay: 1.2s!important;
}
.carousel1 .list .item:nth-child(1) .content .topic{
    animation-delay: 1.4s!important;
}
.carousel1 .list .item:nth-child(1) .content .des{
    animation-delay: 1.6s!important;
}
.carousel1 .list .item:nth-child(1) .content .buttons{
    animation-delay: 1.8s!important;
}
/* create animation when next click */
.carousel1.next .list .item:nth-child(1) img{
    width: 150px;
    height: 220px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    border-radius: 30px;
    animation: showImage .5s linear 1 forwards;
}
@keyframes showImage{
    to{
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

.carousel1.next .thumbnail .item:nth-last-child(1){
    overflow: hidden;
    animation: showThumbnail .5s linear 1 forwards;
}
.carousel1.prev .list .item img{
    z-index: 100;
}
@keyframes showThumbnail{
    from{
        width: 0;
        opacity: 0;
    }
}
.carousel1.next .thumbnail{
    animation: effectNext .5s linear 1 forwards;
}

@keyframes effectNext{
    from{
        transform: translateX(150px);
    }
}

/* running time */

.carousel1 .time{
    position: absolute;
    z-index: 1000;
    width: 0%;
    height: 3px;
    background-color: var(--c-brand);
    left: 0;
    top: 0;
}

.carousel1.next .time,
.carousel1.prev .time{
    animation: runningTime 3s linear 1 forwards;
}
@keyframes runningTime{
    from{ width: 100%}
    to{width: 0}
}


/* prev click */

.carousel1.prev .list .item:nth-child(2){
    z-index: 2;
}

.carousel1.prev .list .item:nth-child(2) img{
    animation: outFrame 0.5s linear 1 forwards;
    position: absolute;
    bottom: 0;
    left: 0;
}
@keyframes outFrame{
    to{
        width: 150px;
        height: 220px;
        bottom: 50px;
        left: 60%;
        border-radius: 20px;
    }
}

.carousel1.prev .thumbnail .item:nth-child(1){
    overflow: hidden;
    opacity: 0;
    animation: showThumbnail .5s linear 1 forwards;
}
.carousel1.next .arrows button,
.carousel1.prev .arrows button{
    pointer-events: none;
}
.carousel1.prev .list .item:nth-child(2) .content .author,
.carousel1.prev .list .item:nth-child(2) .content .title,
.carousel1.prev .list .item:nth-child(2) .content .topic,
.carousel1.prev .list .item:nth-child(2) .content .des,
.carousel1.prev .list .item:nth-child(2) .content .buttons
{
    animation: contentOut 1.5s linear 1 forwards!important;
}

@keyframes contentOut{
    to{
        transform: translateY(-150px);
        filter: blur(20px);
        opacity: 0;
    }
}

.hero {
    display: flex;
    justify-content: space-between; /* Text on the left, image on the right */
    align-items: center;
    flex-wrap: nowrap; /* Prevent wrapping unless on smaller screens */
}

.hero-content {
    width: 50%;
    padding: 20px;
    background-color: rgba(17, 17, 43, 0.418);
    border-radius: 20px;
    text-align: left; /* Ensure text is aligned left */
    margin-left: 10%;
}

.hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: white;
}

.hero p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 30px;
    color: white;
}


.hero-image {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.hero-image img {
    width: auto;
    height: 100%;
    max-height: 450px;
    margin-right: 15%;
    margin-bottom: 0; /* Remove bottom margin */
    bottom: 0;
}

/* Responsive adjustments */
@media (min-width: 320px) and (max-width: 600px) {
    .hero {
        flex-direction: column; /* Stack content vertically */
        align-items: center;
    }

    .hero-content .line {
        margin: auto;
    }

    .hero-content {
        width: 90%;
        text-align: center; /* Center text for smaller screens */
        margin-left: 0;
        order: 1; /* Tulisan tetap di atas */
        scale: 0.9;
    }

    .hero-image {
        height: 100%;
        margin-bottom: 0; /* Hilangkan jarak ke bawah */
        order: 2; /* Gambar di bawah tulisan */
    }

    .buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    #hero-competition .container{
        scale: 0.96;
    }

    #hero-competition blockquote p{
        font-size: 0.9rem;
    }
    .hero-image2 {
        scale: 0.9;
        margin-top: 2rem;
    }

    .hero-image img {
        width: 100%;
        height: auto;
        justify-content: center;
        max-height: 300px; /* Ukuran gambar lebih kecil */
        margin: 0; /* Pastikan tidak ada margin bawah */
    }

    .hero h1 {
        font-size: 32px; /* Ukuran heading lebih kecil */
    }

    .hero p {
        font-size: 14px; /* Ukuran paragraph lebih kecil */
    }

    .video-overlay h1 {
        font-size: 2rem; /* Adjust the size as needed */
        scale: 0.9;
      }
}
@media (min-width: 720px) and (max-width: 1024px) {
    .hero {
        flex-direction: column; /* Stack content vertically */
        align-items: center;
    }

    .hero-content .line {
        margin: auto;
    }

    .hero-content {
        width: 90%;
        text-align: center; /* Center text for smaller screens */
        margin-left: 0;
        order: 1; /* Tulisan tetap di atas */
        scale: 0.9;
    }

    .hero-image {
        height: 100%;
        width: auto;
        margin-bottom: 0; /* Hilangkan jarak ke bawah */
        order: 2; /* Gambar di bawah tulisan */
    }

    .buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    #hero-competition .container{
        scale: 0.96;
    }

    #hero-competition blockquote p{
        font-size: 0.9rem;
    }
    .hero-image2 {
        scale: 0.9;
        margin-top: 2.5rem;
    }

    .hero-image img {
        width: 100%;
        height: auto;
        justify-content: center;
        max-height: 300px; /* Ukuran gambar lebih kecil */
        margin: 0; /* Pastikan tidak ada margin bawah */
    }

    .hero h1 {
        font-size: 35px; /* Ukuran heading lebih kecil */
    }

    .hero p {
        font-size: 16px; /* Ukuran paragraph lebih kecil */
    }

    .video-overlay h1 {
        font-size: 2.5rem; /* Adjust the size as needed */
        scale: 0.9;
      }
}







/* SECTION TITLE */
.section-title {
    margin-bottom: 60px;
    font-variant: var(--font-bold);
}    

.section-title .line {
    width: 60px;
    height: 4px;
    margin: 16px auto 24px auto;
}

.section-title p {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.section .line {
    width: 30%;
    height: 5px;
    background-color: var(--c-brand);
}

/* ABOUT */
#about-home {
    padding: 80px 0;
}

.image-box {
    position: relative;
    background: var(--c-brand);
    padding: 40px; /* Padding for the frame */
    text-align: center;
    overflow: visible; /* Allow overflow for the image */
    margin-top: 70px; /* Margin for spacing */
    border: 5px solid #fff;
}

.image-box img {
    position: absolute; /* Position the image absolutely */
    left: 50%; /* Center the image */
    top: -144%; /* Move the image up to show half of it */
    transform: translateX(-50%); /* Center the image horizontally */
    width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
    max-height: none; /* Allow the image to exceed the height of the box */
    object-fit: cover; /* Ensure the image covers the box without distortion */
}

.text-center h3 {
    margin-top: 70px; /* Adjust margin for spacing */
    font-weight: 600;
}



/* LOADING */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
  }
  
  /* Show loading */
  .loading:not(.hidden) {
    opacity: 1;
    visibility: visible;
  }
  
  /* Styling untuk logo */
  .loading-logo {
    width: 15rem; /* Sesuaikan ukuran logo */
    height: auto;
    margin-bottom: 10px; /* Jarak antara logo dan spinner */
    animation: fadeIn 1s ease-in-out infinite; /* Opsional: animasi logo */
  }
  
  /* Animasi opsional untuk logo */
  @keyframes fadeIn {
    0%, 100% {
      opacity: 0.8;
    }
    50% {
      opacity: 1;
    }
  }

  /* Spinner animation */
  .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  


/* ICONBOX */
.iconbox {
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--c-brand-rgb), 0.1);
    color: var(--c-brand);
    font-size: 34px;
    flex: none;
}

/* SERVICE */
.service {
    position: relative;
    overflow: hidden;
    z-index: 2;
    background-color: rgba(255,255,255,0.1);
    border-radius: 10px;
}
.service img{
    height: 8rem;
    width: auto;
}

.service::after {
    content: "";
    width: 40px;
    height: 40px;
    background: rgba(var(--c-brand-rgb), 0.2);
    position: absolute;
    bottom: 0;
    right: 0;
    transition: var(--transition);
}


.service:hover::after {
    width: 100%;
    height: 100%;
    background: var(--c-brand);
    z-index: -1;
}

.service:hover h5,
.service:hover p {
    color: white;
}

.service:hover .iconbox {
    background-color: rgba(255,255,255,0.2);
    color: white;
}

/* CONTENT */
.section-padding2 {
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
}

.content-box {
    background-color: rgba(255,255,255,0.1);
    border-radius: 10px;
    box-shadow: 0 4px 10px var(--c-brand);
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.content-box2 {
    background-color:white;
    border-radius: 20px;
    box-shadow: 0px 8px 0px var(--c-brand);
    padding: 2px;
    justify-content: center;
    align-items: stretch;
    max-width: 45vh;
}

.text-content {
    flex: 1;
    padding: 20px;
    color: var(--c-footer);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.text-box {
    background-color: rgba(255,255,255,0.1);
    color: white;
    padding: 30px 40px; /* Tambahkan padding untuk teks */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    max-height: 50%; /* Lebar lebih kecil */
}

.text-box h1 {
    margin-bottom: 15px;
}

.text-box p {
    margin-bottom: 0;
}

.image-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
 
}

.boat {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* Ensures proper scaling */
}

.videointro {
    width: 70%;
    height: 75vh;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 4px 4px 12px var(--c-brand)
}

.videokapal {
    width: 100%; /* Make the video responsive */
    height: 41.2vh;
    border-radius: 15px;
    object-fit: cover !important;
    display: block; /* Ensures there's no inline spacing */
    margin-bottom: 20px; /* Adds space between videos */
    box-shadow: 6px 6px 8px var(--c-brand);
}

#ELECTRICAL .content-box {
    padding: 0; /* Menghapus padding pada kotak */
    height: 100%; /* Menyesuaikan tinggi */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#ELECTRICAL h3 {
    margin: 0; /* Menghapus margin/padding atas pada judul */
    padding-bottom: 10px; /* Menambahkan sedikit jarak di bawah */
}

.tinggigambar {
    height: auto;
    background-size: cover;
    width: 400px;
}

.pdf {
    width: 600px;
    height:800px;
}

/* Media Query untuk layar 320px hingga 480px */
@media (min-width: 320px) and (max-width: 480px) {

    #hero-competition h1 {
        font-size: 2rem;
        padding: 1rem;
        margin: 1rem;
    }

    .content-box2 {
        scale: 0.9;
        width: 50%;
    }

    #content-1 .text-box {
        scale: 0.9;
    }

    #content-1 img.boat {
        scale: 0.8;
    }

    #content-1 .text-content {
        padding: 1rem;

    }

    section #content-1 {
        padding: 0;
        width: 100%;
    }
    .content-box{
        scale: 0.95;
    }

    .content-box .row {
        flex-direction: column; /* Mengatur elemen dalam satu kolom */
        align-items: center;    /* Menjaga elemen tetap terpusat */
        text-align: start;     /* Menyesuaikan teks agar rapi di tengah */
    }

    .content-box .text-content {
        order: 1; /* Teks di atas */
    }

    .content-box .image-content {
        order: 2; /* Gambar di bawah */
        padding: 0;
    }

    .content-box img.boat {
        width: auto; /* Membuat gambar lebih besar */
        height: max-content;    /* Menjaga proporsi gambar */
        
    }

    .videokapal {
        margin-top: 2rem;
        width: 100%;
        height: auto;
        scale: 1.2;
    }

    #development-timeline img {
        width: 100%;       
        border-radius: 10px;
        scale: 1.19;
        margin-left: 0;
    }
    #development-timeline h1 {
        font-size: 1.5rem;
    }

    #HistoricalRecords{
        scale: 0.9;
    }

    .tinggigambar {
        width: 100%;
    }

    .pdf {
        width: 80%;
        height: 500px;
    }

    .videointro {
        width: 90%;
        height: 23vh;
        border-radius: 10px;
    }

    #NavigationSystem .text-content {
        text-align: justify;
        padding: 15px;
    }
    #NavigationSystem img {
        max-width: 100%;
        height: auto;
        margin-bottom: 20px;
    }
    #NavigationSystem .content-box {
        flex-direction: column; /* Susunan vertikal */
        text-align: center; /* Tengah untuk konten */
    }

    #WaterBlast .text-content {
        text-align: justify;
        padding: 15px;
        scale: 0.9;
    }

    #hero-exp h1{
        font-size: 2rem;
    }

}

/* Media Query untuk layar 481px hingga 767px */
@media (min-width: 481px) and (max-width: 767px) {
    #NavigationSystem .text-content {
        padding: 20px;
        font-size: 1rem;
    }
    #NavigationSystem img {
        max-width: 90%;
        height: auto;
    }
    #NavigationSystem .content-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 20px; /* Memberikan jarak antar elemen */
    }

    #hero-competition {
        border-bottom-right-radius: 2.5rem;
        border-bottom-left-radius: 2.5rem;
    }

    #hero-competition h1 {
        font-size: 2.5rem;
        padding: 1rem;
        margin: 1rem;
    }

    .content-box2 {
        scale: 1;
        width: 100%;
        margin-bottom: 1rem;
    }

    #content-1 .text-box {
        scale: 1;
    }

    #content-1 img.boat {
        scale: 1;
    }

    #content-1 .text-content {
        padding: 1rem;

    }

    .content-box{
        scale: 1;
        padding: 0.2rem;
    }

    .content-box .row {
        flex-direction: column; /* Mengatur elemen dalam satu kolom */
        align-items: center;    /* Menjaga elemen tetap terpusat */
        text-align: start;     /* Menyesuaikan teks agar rapi di tengah */
    }

    .content-box .text-content {
        order: 1; /* Teks di atas */
    }

    .content-box .image-content {
        order: 2; /* Gambar di bawah */
        padding: 0;
    }

    .content-box img.boat {
        width: auto; /* Membuat gambar lebih besar */
        height: max-content;    /* Menjaga proporsi gambar */
        
    }

    .videokapal {
        margin-top: 2rem;
        width: auto;
        height: 36.3vh;
        scale: 1.2;
    }

    #development-timeline img {
        width: 100%;       
        border-radius: 10px;
        scale: 1.2;
        margin-left: 0;
    }
    #development-timeline h1 {
        font-size: 1.7rem;
    }

    #HistoricalRecords{
        scale: 1;
    }

    .tinggigambar {
        width: 100%;
    }

    .videointro {
        width: 90%;
        height: 55vh;
        border-radius: 10px;
    }
}

/* Media Query untuk layar 720px hingga 1024px */
@media (min-width: 720px) and (max-width: 1024px) {
    #hero-competition h1 {
        font-size: 3rem;
        padding: 1.5rem;
        margin: 1.5rem;
    }

    #ELECTRICAL .content-box {
        padding: 0; /* Menghapus padding pada kotak */
    }
    #ELECTRICAL .text-content {
        padding: 0;
        width: 100%; /* Menghapus padding pada kotak */
    }
    
    #ELECTRICAL h3 {
        margin: 0; /* Menghapus margin/padding atas pada judul */
        padding-bottom: 10px; /* Menambahkan sedikit jarak di bawah */
    }

    .content-box2 {
        scale: 1;
        width: 80%;
        margin: 0 auto;
    }
    #content-1 .text-box {
        scale: 1;
    }
    #content-1 img.boat {
        scale: 1;
    }
    #content-1 .text-content {
        padding: 1.5rem;
    }
    section #content-1 {
        padding: 1rem;
        width: 90%;
        margin: 0 auto;
    }
    .content-box {
        scale: 1;
        padding: 1rem;
    }
    .content-box .row {
        flex-direction: row; /* Mengatur elemen dalam satu baris */
        align-items: center;
        text-align: justify;
    }
    .content-box .text-content {
        order: 1; /* Teks di kiri */
        width: 60%; /* Lebar teks */
    }
    .content-box .image-content {
        order: 2; /* Gambar di kanan */
        width: 100%; /* Lebar gambar */
        padding: 0;
    }
    .content-box img.boat {
        width: 100%; /* Gambar mengisi lebar kontainer */
        height: auto; /* Menjaga proporsi gambar */
    }
    .videokapal {
        margin-top: 2rem;
        width: 80%;
        height: auto;
        scale: 1;
        margin: 0 auto;
    }
    #development-timeline img {
        width: 80%;
        border-radius: 10px;
        scale: 1;
        margin-left: auto;
        margin-right: auto;
    }
    #development-timeline h1 {
        font-size: 2rem;
        text-align: center;
    }
    #HistoricalRecords {
        scale: 1;
    }
    .tinggigambar {
        width: 100%;
    }
    .pdf {
        width: 70%;
        height: 600px;
        margin: 0 auto;
    }
    .videointro {
        width: 80%;
        height: 40vh;
        border-radius: 10px;
        margin: 0 auto;
    }
    #NavigationSystem .text-content {
        text-align: justify;
        padding: 20px;
        font-size: 1.2rem;
    }
    #NavigationSystem img {
        max-width: 100%;
        height: auto;
        margin-bottom: 20px;
    }
    #NavigationSystem .content-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        gap: 20px;
    }
    #WaterBlast .text-content {
        text-align: justify;
        padding: 20px;
        scale: 1;
    }
    #hero-exp h1 {
        font-size: 3rem;
    }
}

/* CSS Responsiveness */
/* Media query untuk layar kecil (320px - 600px) */
@media (min-width: 320px) and (max-width: 600px) {
    .section-padding2 {
      flex-direction: column; /* Susun vertikal */
      padding: 5px; /* Kurangi padding */
    }
  
    .content-box, .text-box {
      padding: 15px; /* Kurangi padding */
    }
    

    .text-content, .image-content {
      width: 100%; /* Lebarkan ke seluruh layar */
      text-align: center; /* Pusatkan teks */
      padding: 10px;
    }
  
    .videokapal {
      width: 100%;
      height: auto; /* Tinggi otomatis agar tidak terpotong */
    }
  
    .boat {
      max-width: 100%;
      height: auto;
    }

    #hero-boat h1 {
        font-size: 2rem;
    }

    .custom-image {
        scale: 0.8;
        transform: translateY(-10rem);
    }
  }
  
  /* Media query untuk layar sedang (720px - 1024px) */
  @media (min-width: 720px) and (max-width: 1024px) {
    .section-padding2 {
      flex-direction: column;
      padding: 15px 30px;
    }
  
    .content-box, .text-box {
      padding: 20px;
    }
  
    .text-content {
      width: 100%;
      text-align: left;
    }
  
    .image-content {
      width: 100%;
      display: flex;
      justify-content: center;
      padding: 15px;
    }
  
    .videokapal {
      width: 100%;
      height: auto; /* Pastikan video tetap terlihat penuh */
    }

    .videointro {
        width: 90%;
        height: 400px;
    }
  
    .boat {
      max-width: 90%; /* Berikan jarak sedikit */
      height: auto;
    }
  }
  

/* COUNTER */
#counter {
    background: linear-gradient(rgba(var(--c-brand-rgb), 0.8), rgba(var(--c-brand-rgb), 0.8)), url(../images/naval.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 50px; /* Tambahkan padding agar nyaman pada layar kecil */
}

#counter2 {
    background: linear-gradient(rgba(var(--c-brand-rgb), 0.8), rgba(var(--c-brand-rgb), 0.8)), url(../images/zenithdanau\ \(2\).jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    padding: 50px; /* Tambahkan padding agar nyaman pada layar kecil */
}

#counter2 .container {
    max-width: 1200px;
    margin: 0 auto;
}

#counter2 h1 {
    font-size: 3rem; /* Ukuran default untuk judul angka */
    font-weight: bold;
}

#counter2 h6 {
    font-size: 1rem; /* Ukuran default untuk teks deskripsi */
    font-weight: 500;
}

#counter h1 {
    font-size: 3rem; /* Ukuran default untuk judul angka */
    font-weight: bold;
}

#counter h6 {
    font-size: 1rem; /* Ukuran default untuk teks deskripsi */
    font-weight: 500;
}




/* PORTFOLIO */
.portfolio-item .iconbox {
    background-color: var(--c-brand);
    color: white;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.portfolio-item:hover .iconbox {
    opacity: 1;
    top: 50%;
}


/* SUPERVISORS */

#supervisors {
    background: linear-gradient(rgba(var(--c-brand-rgb), 0.8), rgba(var(--c-brand-rgb), 0.8)), url(../images/DRAFT\ of\ Roboboat\ 2025.png);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    
}

.supervisor {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

.supervisor h5 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.supervisor p {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.team-member-image img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
}

@media (min-width: 320px) and (max-width: 600px) {
    .supervisor {
        padding: 10px; /* Adjust padding for mobile */
    }

    .supervisor h5 {
        font-size: 0.9rem; /* Scale down font size */
    }

    .supervisor p {
        font-size: 0.8rem; /* Scale down font size */
    }

    .team-member-image img {
        width: 20vh; /* Scale down image size */
        height: 100%; /* Scale down image size */
        object-fit: cover;
    }

    #supervisor {
        padding-left: 10px; /* Fix left padding */
        padding-right: 10px; /* Fix right padding */
    }
    

}

@media (min-width: 720px) and (max-width: 1024px) {
    .supervisor {
        padding: 5px;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .supervisor h5 {
        font-size: 1.2rem; /* Increase heading font size */
    }

    .supervisor p {
        font-size: 1rem; /* Ensure readability */
    }

    .team-member-image {
        flex-shrink: 0;
    }

    .team-member-image img {
        width: 100px; /* Increase width */
        height: 100%; /* Make image square */
        object-fit: cover;
        border-radius: 50%; /* Optional: Make images circular */
    }

    #supervisors {
        padding: 20px;
    }

    /* Adjust the card layout */
    #supervisors .col-lg-4, .col-md-6 {
        flex: 0 0 50%; /* Two cards per row */
        max-width: 50%;
    }
}




/* JOURNEY */
#journey {
    padding: 2rem 0;
  }
  
  .section-header {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .card-journey {
    background-color: #f8f9fa;
    border-radius: 10px;
    border: none;
    height: auto;
  }
  
  .card-title {
    color: #212529;
    font-weight: bold;
  }

  .card-body {
    padding: 1.5rem;
  }
  
 .carousel-control-prev,
 .carousel-control-next,
 .carousel-indicators button { 
  opacity: 1 ;
  background-color: rgba(24, 24, 24, 0.247);
  align-self: center;
  width: fit-content;
  height: fit-content;
  border-radius: 50%;
  padding: 5px;
  margin: 10px;
 }

  
  .img-fluid {
    background-size: cover;
    height: auto;   
  }

  @media (min-width: 320px) and (max-width: 719px){
    .card-journey{
        height: 400px;
        margin: 5px;
    }

    #journey .slide {
        box-shadow: none;
    }

    .card-body {
        padding: 0.8rem;
        margin-bottom: auto;
      }
    .card-body p{
        font-size: 0.7rem;
  }

  .carousel-control-prev,
 .carousel-control-next,
 .carousel-indicators button { 
  margin: auto 5px;
  scale: 0.9;
 }
  }
  @media (min-width: 720px) and (max-width: 1024px){
    .card-journey{
        max-height: 160px;
    }

    .card-body {
        padding: 1rem;
        margin-bottom: auto;
      }
    .card-body p{
        font-size: 0.7rem;
  }

  .carousel-control-prev,
 .carousel-control-next,
 .carousel-indicators button { 
  margin: auto 5px;
 }
  }

/* TEAM */
.boundary {
    background-color: rgba(255,255,255,0.1) ;
    padding: 30px;
    width: 100%;
    border-radius: 20px;
    box-shadow: 10px 0px 12px rgba(14, 14, 14, 0.603);
}

.team-member {
    display: flex; /* Use flexbox to align image and biodata */
    background-color: rgba(255, 255, 255, 0.1);
    padding: 10px;
    box-shadow: 10px 10px 12px rgba(14, 14, 14, 0.603);
    border-radius: 10px;
    height: auto;
    width: 450px;
}

.image-zoom {
    flex: 0 0 auto; /* Prevent the image from growing */
    margin-right: 15px; /* Space between image and biodata */
}

.image-zoom img {
    width: 10rem; /* Set a fixed width for the image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: round the image corners */
}

.biodata {
    display: flex;
    flex-direction: column; /* Stack the biodata vertically */
    justify-content: center; /* Center the content vertically */
}

.biodata p {
    margin: 5px 0; /* Add margin for spacing between lines */
}

.social-media-list {
    margin-top: 40px;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: start;
}

.social-media-list li {
    display: inline-block;
}

.social-link {
    display: flex;
    margin-right: 20px;
    font-size: 1.5rem;
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Hover Effect */
.social-link:hover {
    color: #0077b5; /* LinkedIn hover color */
}

.social-link i.fab.fa-instagram:hover {
    color: #e4405f; /* Instagram hover color */
}

.social-link i.fas.fa-envelope:hover {
    color: #ea4335; /* Gmail hover color */
}

/* Tulisan Pemisah (Technical dan Official Team) */
@media (min-width: 720px) and (max-width: 1024px) {
    .section-title {
        padding: 20px 15px; /* Tambahkan padding lebih besar untuk pemisah */
        text-align: center; /* Pastikan teks rata tengah */
    }

    .team-member {
        margin: auto;
        width: 300px; /* Lebar penuh untuk card */
        height: 100%;
    }

    .card-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Pusatkan card ke tengah layar */
    }

    .image-zoom img {
        width: 120px; /* Kurangi ukuran gambar */
        height: auto;
    }

    .biodata h4 {
        font-size: 1rem; /* Ukuran teks lebih kecil */
    }

    .biodata p {
        font-size: 0.8rem; /* Ukuran teks lebih kecil */
    }

    .social-media-list {
        justify-content: center; /* Ikon sosial rata tengah */
        margin-top: 20px;
    }
}

@media  (min-width: 320px) and (max-width: 600px)  {
    .boundary {
        padding: 3rem; /* Reduce padding for mobile */
    }

    .col-md-5 {
        width: auto;
    }

    .team-member {
        margin: 0;
        width: 43vh; /* Full width on mobile */
        box-shadow: 5px 5px 10px rgba(14, 14, 14, 0.4); /* Reduce shadow for mobile */
    }

    .image-zoom {
        margin-right: 10px; /* Adjust margin for mobile */
    }

    .image-zoom img {
        width: 9rem; /* Scale down image size */
        height: auto; /* Maintain aspect ratio */
    }

    .biodata {
        align-items: flex-start; /* Align biodata to the start */
    }

    .social-media-list {
        flex-wrap: nowrap; /* Allow social media icons to wrap */
        margin-top: 20px; /* Adjust margin for mobile */
        justify-content: center; /* Center the icons */
        margin-top: 10px; /* Add margin above the social media list */
    }

    
    .social-link {
        margin-right: 10px; /* Reduce margin for mobile */
        font-size: 1.2rem; /* Scale down font size */
    }

}
.social-media-list {
    justify-content: center; /* Center the icons */
    margin-top: 10px; /* Add margin above the social media list */
}

.social-media-list li {
    margin-right: 10px; /* Add gap between social icons */
}




/* CONTACT */
#contact {
    position: relative;
    z-index: 2;
}

#contact::after {
    content: "";
    width: 100%;
    height: 70%;
    background: linear-gradient(rgba(var(--c-brand-rgb), 0.8), rgba(var(--c-brand-rgb), 0.4)), url(../images/Rektorat.jpg);
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#contact .form-control {
    border-radius: 10px;
}

#contact .form-control:focus {
    box-shadow: none;
    border-color: var(--c-brand);
}

#map {
    width: 40%;
    height: 100%;
    position: fixed;
    right: 0;
}

.info {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
  }

  .info-item i {
    font-size: 24px;
    color: white;
    background-color: var(--c-brand-light);
    padding: 10px 15px;
    border-radius: 50%;
  }

  .info-item h4 {
    margin: 0;
    color: white;
  }

  .info-item p {
    margin: 0;
    color: white;
  }

  .info-item a {
    margin: 0;
    text-decoration: none;
  }

/* SLIDE IMAGE */
.hero-research {
    background-color: rgba(24, 24, 24, 0.616);
    margin: auto;
    border-radius: 20px;
    width: 800px;
    height: auto;
    padding : 30px;
}


.popular__container {
    margin-bottom: 50px;
    padding: 0px;
    background-color: none; 
    border-radius: 10px;
    box-shadow: 30px -30px 0px var(--c-footer);
}
  
.popular__card {   
    background-color: var(--c-brand);
    padding: 14px;
    text-align: center;
    justify-content: center;
    width: auto;
    height: 100%;
}
  
.popular__title {
    font-size: 1.4rem;
    font-weight: bold;
}
  
.popular__subtitle {
    font-size: 1.6rem;
    color: var(--c-brand-light);
    margin-left: auto;
    font-weight: bold;
    text-transform: uppercase;
}

.text-wrapper {
    background-color: var(--c-brand);
    border-top-right-radius: 50px;
    width: 50%;
    height: 100%;
    padding: 20px 10px 0px 15%;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 1);

}

.popular__subtitle2 {
    font-size: 1rem;
    color: var(--c-footer);
    margin-left: auto;
}
  
.popular__price {
    font-size: 1.8rem;
    padding-top: 20px;
    font-weight: bold
}

.popular__img {
    width: 280px;
    height: 200px;
    margin-left : auto;
    object-fit: cover;
    border-radius: 10px;
}

.swiper {
    width: 350px;
    height: auto;
}

.swiper-pagination-bullet {
    background: var(--c-footer);
}
  
.swiper-pagination-bullet-active {
    background-color: var(--c-brand-light);
}
  
.swiper-wrapper {
    display: flex;
    gap: auto;
}

.swiper-slide {
    flex-shrink: 0;
}

/* Styling untuk gambar lingkaran */
.circle-container {
    position: relative;
    display: inline-block;
}

.circle-image {
    width: 20vh;
    height: 20vh;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
    box-shadow: 3px 3px 8px   var(--c-brand);
}

/* Efek hover untuk gambar */
.circle-image:hover {
    transform: translateY(-10px);
    filter: grayscale(100%);
}

/* Styling untuk teks yang muncul saat hover */
.hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Selalu di tengah */
    color: var(--c-brand-light);
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 1rem;
    padding: 5px 10px;
    font-size: 1rem; /* Ukuran font default */
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Teks akan muncul saat hover */
.circle-container:hover .hover-text {
    opacity: 1;
}


.image-row {
    display: flex;
    justify-content: space-between; /* Membuat gambar sejajar dengan jarak sama */
    align-items: center; /* Menjaga gambar tetap sejajar secara vertikal */
}

/* Responsif untuk layar kecil: 320px - 480px */
@media (min-width: 320px) and (max-width: 600px) {
    #hero-research {
        width: 100%; /* Menyesuaikan lebar agar pas pada layar kecil */
    }

    .circle-image {
        width: 12vh; /* Ukuran gambar lebih kecil */
        height: 12vh;
    }

    .text-box {
        scale: 0.9;
    }

    .hover-text {
        font-size: 0.8rem; /* Teks hover lebih kecil */
    }

    .text-box h2 {
        font-size: 2.1rem; /* Ukuran judul lebih kecil */
    }

    .text-box p {
        font-size: 1rem; /* Ukuran teks paragraf lebih kecil */
    }

    .image-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Membuat 2 kolom */
        gap: 20px; /* Jarak antar elemen gambar */
        justify-items: center; /* Gambar rata tengah dalam kolom */
    }
    .hover-text {
        font-size: 0.8rem; /* Ukuran teks lebih kecil agar proporsional */
        padding: 3px 6px;
    }

    .text-wrapper {
        border-top-right-radius: 40px;
        width: 90%;
        height: 100%;
        margin-bottom: 2rem;
    }
    .text-wrapper p{
        font-size: 0.8rem;
    }

    .popular__container {
        scale: 0.8;
        box-shadow: 25px -25px 0px var(--c-footer);
        margin-right: 3rem;
    }

    .card-container{
        scale: 0.8;
    }
    .popular__title {
        margin: 0%;
        font-size: 1.5rem; /* Sesuaikan ukuran font pada layar kecil */
    }

    .popular__subtitle {
        font-size: 1rem;
        scale: 0.9;
        margin-left: 0;
    }
    .popular__price {
        font-size: 1.2rem; /* Sesuaikan ukuran font pada layar kecil */
    }
    .swiper {
        max-width: 100%;
    }

    .card-body {
        scale: 0.9;
        padding: 0.8rem;
        margin: 0.2rem;
    }   

    .card2 {
        scale: 0.97;
    }

    .card-body a {
        transform: translateY(2rem) translateX(2rem);
    }

    .section-title h2{
        font-size: 2rem;
    }
    .btnfilter {
        margin: 0.1rem;
        justify-content: space-between;
        width: 5rem;
    }
    
}

/* Responsif untuk layar sedang: 481px - 767px */
@media (min-width: 481px) and (max-width: 767px) {

    #hero-research {
        width: 100%; /* Sedikit lebih kecil dari layar sedang */
    }

    .circle-image {
        width: 18vh; /* Ukuran gambar menyesuaikan */
        height: 18vh;
    }

    .hover-text {
        font-size: 1rem; /* Teks hover sedikit lebih besar */
    }

    .text-box {
        scale: 0.97;
    }

    .text-box h2 {
        font-size: 3rem; /* Ukuran judul lebih besar dibanding layar kecil */
    }

    .text-box p {
        font-size: 1.1rem; /* Ukuran paragraf lebih besar */
    }

    .image-row {
        display: flex;
        flex-wrap: wrap; /* Membuat elemen turun ke baris berikutnya */
        justify-content: space-around; /* Memberikan ruang di antara elemen */
        gap: 15px; /* Jarak antar elemen */
    }

    .circle-container {
        width: 40%; /* Setiap elemen lebih kecil dibanding layar kecil */
        text-align: center; /* Menjaga teks tetap rata tengah */
        margin-bottom: 3rem;
    }
}
   
/* JOURNEY*/

#blog {
    padding: 60px 0;
}

.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 20px 0;
}

.slider-wrapper {
    width: 100%;
    overflow: hidden;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 0px;
    text-align: center;
    background-color: none;
    border-radius: 10px;
    box-shadow: 7px 7px 0px  var(--c-brand);
}

.slide2 img{
    border-radius: 10px;
}
.slide2 video{
    border-radius: 10px;
}

.slide img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

h5 {
    font-size: 1.2rem;
    margin-top: 10px;
    font-weight: bold;
}

p {
    font-size: 0.9rem;
    margin-top: 10px;
    line-height: 1.5;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
    z-index: 10;
}

.left-btn {
    left: 10px;
}

.right-btn {
    right: 10px;
}

.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* OUTREACH */

.outreach-title {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2% 10%;
    text-align: center;
    border-radius: 20px;
    margin-bottom: 2rem;
    box-shadow: 0px 8px 0px var(--c-brand);
}

.outreach-content {
    display: flex;
    justify-content: space-between;
    margin: 0 10%;
    gap: 2rem;
}

.outreach-left {
    flex: 1; /* Lebar lebih kecil */
    max-width: 40%; /* Membatasi lebar bagian kiri */
}

.outreach-right {
    flex: 1.2; /* Lebar lebih besar */
    max-width: 60%; /* Membatasi lebar bagian kanan */
}

.outreach-section {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 2rem;
    border-radius: 15px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 1.5rem;
}

.outreach-section h5 {
    background-color: var(--c-brand);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 1rem;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
}

.outreach-section p {
    color: white;
    line-height: 1.6;
}

.outreach-video {
    text-align: center;
}

.outreach-video iframe {
    border-radius: 10px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}

.outreach-video p {
    margin-top: 0.5rem;
    color: white;
}

@media (min-width: 320px) and (max-width: 600px) {
    .outreach-content {
        flex-direction: column;
        margin: 0 5%;
        gap: 1rem;
    }

    .outreach-left, 
    .outreach-right {
        max-width: 100%;
        flex: 1;
    }

    .outreach-title {
        padding: 5%;
        font-size: 0.9rem; /* Ukuran font lebih kecil */
    }

    .outreach-section {
        padding: 1rem;
        font-size: 0.9rem; /* Skala teks lebih kecil */
    }

    .outreach-section h5 {
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
    }

    .outreach-video iframe {
        width: 100%;
        height: auto;
    }

    .image-zoom-wrapper img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

}

@media (min-width: 720px) and (max-width: 1024px) {
    .outreach-content {
        flex-direction: column; /* Ubah arah flex jadi kolom */
        align-items: center; /* Tengah-tengahkan konten */
    }
    
    .outreach-left,
    .outreach-right {
        max-width: 100%; /* Gunakan seluruh lebar layar */
        margin-bottom: 1rem; /* Beri jarak antar elemen */
    }
    
    .outreach-right iframe {
        width: 100%; /* Iframe sesuai lebar container */
        height: auto; /* Sesuaikan tinggi secara otomatis */
    }

    .outreach-title {
        font-size: 1.2rem;
        padding: 3%;
    }

    .outreach-section {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .outreach-section h5 {
        font-size: 1.2rem;
        padding: 0.5rem 1rem;
       
    }

    .outreach-video iframe {
        width: 500px;
        height: 320px;
    }

    .image-zoom-wrapper img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .section-title h1 {
        font-size: 3rem;
    }

}


/*===============JOURNAL===============*/

.card2 {
    background-color: #727272;
    color: #fff;
    box-shadow: 7px 7px 0px var(--c-brand);
    transition: transform 0.3s ease;
    height: 100%;
    padding-bottom: 60px; /* Extra space for button */
 }
  
  .card2:hover {
    transform: translateY(-10px);
  }

  .card-title {
    font-size: 1.25rem;
    margin-bottom: 10px;
  }
  
  .card-img-top {
    align-items: start;
    justify-content: start;
    background-color: white;
    width: fit-content;
    padding: 3px;
  }

  .card2 img {
    max-height: 47px;
    object-fit: contain;
    margin-left: 10px;
  }
  
  .btn {
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ddd;
  }
  
  .btn-primary {
    background-color: #0d6efd;
  }
  
  .card-body a {
    bottom: 10px;
    right: 10px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    border-radius: 5px;
    padding: 10px;
  }

  .year {
    top: 10px;
    right: 20px;
    color: var(--c-footer);
    padding: 5px 10px;
    border-radius: 4px;
}
/* FOOTER */
.border-light {
    box-shadow: 0px -4px 12px var(--c-brand);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.border-round {
    border-top-left-radius: 55px;
    border-top-right-radius: 55px;
}

/* General Footer Styles */
footer {
    padding-top: 80px;
    color: var(--c-footer);
}

.pfooter {
    padding-top: 10px;
    color: rgba(255, 255, 255, 0.7);
}

.RYP {
    padding-top: 10px;
}

.map-footer {
    margin-top: 0;
    padding-top: 0;
}

.footer-top {
    padding-bottom: 40px;
}

/* Line styles */
.line {
    width: 150px;
    height: 4px;
    background-color: var(--c-brand);
    margin: 8px 0; /* Jarak atas dan bawah */
}

/* Social Icons */
.social-icons {
    display: flex;
    gap: 20px;
}

.social-icons a {
    font-size: 24px;
    color: white;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: var(--c-brand);
}

/* Useful Links */
footer ul {
    list-style: none;
    padding: 0;
}

footer ul li {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

footer ul li i {
    margin-right: 0.2rem;
    font-size: 16px;
    color: var(--c-brand-light);
}

footer ul li a {
    margin-left: 0;
    font-size: 16px;
    color: var(--c-footer);
}

/* Contact Section */
.row .col-md-6 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

footer ul {
    margin: 0;
}

footer ul li {
    word-wrap: break-word; /* Agar teks tidak terpotong */
    font-size: 0.95rem; /* Ukuran teks lebih kecil */
}

/* button ke atas */
/* style.css */
#scrollToTop {
    position: fixed;
    bottom: 100px;
    right: 50px;
    display: none; /* Tombol tersembunyi secara default */
    border: none;
    background-color: transparent;
    cursor: pointer;
    z-index: 1000;
    opacity: 0; /* Awal transparan */
    transform: translateY(20px); /* Posisi awal untuk animasi */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Transisi untuk efek */
  }
  
  /* Lingkaran di belakang tombol */
  #scrollToTop::before {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: #007BFF;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    transition: background-color 0.3s;
  }
  
  /* Ikon panah */
  #scrollToTop i {
    font-size: 24px;
    color: white;
    z-index: 1;
  }
  
  /* Hover efek */
  #scrollToTop:hover::before {
    background-color: #0056b3;
  }
  
  /* Saat tombol aktif */
  #scrollToTop.show {
    display: block; /* Pastikan tombol terlihat */
    opacity: 1; /* Tombol menjadi terlihat */
    transform: translateY(0); /* Reset posisi */
  }
  



/* Responsiveness */
@media (min-width: 720px) and (max-width: 1024px){
    .body {
        overflow-x: hidden;
    }

    #about-home {
        overflow-x: hidden;
    }



    #hero {
        width: 100%;
        overflow-x: hidden;
    }
    .image-box {
        padding: 50px; /* Reduce padding on smaller screens */
        margin-top: 100px; /* Adjust margin for smaller screens */
    }

    .image-box img {
        top: -185%; /* Adjust the position for smaller screens */
        width: 100%; /* Scale the image slightly larger */    
    }

    .text-center h3 {
        font-size: 1.5rem; /* Adjust font size for smaller screens */
    }

    .text-white {
        font-size: 0.9rem; /* Adjust font size for smaller screens */
    }

    #counter {
        background-attachment: scroll; /* Nonaktifkan efek fixed untuk layar kecil */
    }

    #counter h1 {
        font-size: 2rem; /* Sesuaikan ukuran angka untuk layar kecil */
    }

    #counter h6 {
        font-size: 0.8rem; /* Sesuaikan ukuran teks untuk layar kecil */
    }

    #counter .row.g-4 {
        row-gap: 3rem; /* Tambahkan jarak antar elemen untuk layar kecil */
    }

    footer h5 {
        font-size: 1.2rem;
    }

    footer ul li {
        font-size: 0.9rem;
    }

    footer .row {
        flex-direction: column;
    }

    footer .row .col-md-6 {
        margin-bottom: 20px;
    }
    .footer-content {
        flex-wrap: wrap;
    }
    .contact-section {
        margin-right: 0; /* Hilangkan margin di layar kecil */
    }
    .carousel1 {
        width: 100%;
        padding: 0
    }
    .carousel1 .list .item .content{
        padding-right: 0;
    }
    .carousel1 .list .item .content .author{
        font-size: 1rem;
    }
    .carousel1 .list .item .content .title{
        font-size: 3rem;
    }
    .carousel1 .list .item .content .topic{
        font-size: 4.5rem;
    }
    .carousel1 .list .item .content .des{
        font-size: 0.8rem;
    }
    .thumbnail{
        gap: 10px;
    }
    .thumbnail .item{
        width: 140px;
        height: 200px;
    }

}

@media (min-width: 320px) and (max-width: 600px) {
    .body {
        overflow-x: hidden;
    }

    td {
        font-size: 0.7rem;
    }

    th {
        font-size: 0.8rem;
    }


    .navbar-brand {
        height: 100%; /* Full height of the navbar */
        display: flex; /* Use flexbox for alignment */
        align-items: center; /* Center logo vertically */
        margin-right: 5px; /* Gap between logo and navbar items */
        margin-left: 0; /* Gap between logo and navbar items */
        background-color: var(--c-brand);
        padding: 0.1rem 0.4rem;
    }

    .carousel1 {
        width: 100%;
        padding: 0
    }
    .carousel1 .list .item .content{
        padding-right: 0;
    }
    .carousel1 .list .item .content .author{
        font-size: 0.8rem;
    }
    .carousel1 .list .item .content .title{
        font-size: 2rem;
    }
    .carousel1 .list .item .content .topic{
        font-size: 3rem;
    }
    .carousel1 .list .item .content .des{
        font-size: 0.8rem;
    }

    .thumbnail{
        gap: 10px;
        bottom: 15%;
    }
    .thumbnail .item{
        width: 120px;
        height: 180px;
    }

    #about-home {
        padding: 10px
    }
    #counter {
        background-attachment: scroll; /* Nonaktifkan efek fixed */
        padding: 30px 10px; /* Sesuaikan padding */
        
    }

    #counter h1 {
        font-size: 0.6rem; /* Kurangi ukuran angka */
    }

    #counter h6 {
        font-size: 0.3rem; /* Kurangi ukuran teks */
    }

    #counter .row {
        flex-direction: column; /* Ubah layout ke vertikal */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
        gap: 10px;
        
    }

    .col-lg-3 {
        width: 100%; /* Elemen menjadi satu baris penuh */
        text-align: center;
        margin-top: 50%;
        height: 150px;
    }

     /* Mengatur ulang grid */
     footer {
        padding: 50px 0px; /* Kurangi padding untuk layar kecil */
    }

    .logo-footer {
        margin-top: 2rem;
    }

    .footer-content {
        display: block; /* Buat vertikal */
        text-align: left; /* Semua teks rata kiri */
    }

    .footer-content > div {
        margin-bottom: 0.1rem; /* Kurangi jarak antar elemen */
    }

    .line {
        margin: 10px 0; /* Garis dengan jarak atas dan bawah lebih kecil */
    }

    footer h5 {
        font-size: 1.2rem; /* Ukuran heading */
        text-align: start;
    }

    footer p, footer li, footer a {
        font-size: 1rem; /* Ukuran teks biasa */
    }

    .social-icons {
        display: flex;
        gap: 15px; /* Jarak antar ikon media sosial */
    }

    .social-icons a i {
        font-size: 1.8rem; /* Ukuran ikon lebih besar */
    }


    /* Kontak dua bagian ke satu kolom */
    .contact-section {
        display: flex;
        flex-direction: column;
        grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
        gap: 10px;
        text-align: start;
        justify-content: start;
    }

    .contact-section ul {
        width: 100%;
        text-align: start;
        margin-bottom: 50px;
        justify-content: start;
        margin-left: 50%;
    }

    footer .col-lg-3 {
        margin-top: 3rem;
        height: fit-content;
    }

    footer .col-md-10 {
        text-align: start;
    }

    .footer ul li {
        font-size: 0.9rem; /* Ukuran teks lebih kecil */
    }

    .footer-content ul li i {
        font-size: 0.9rem; /* Ukuran teks lebih kecil */
    }
    .footer-content ul li i a{
        font-size: 0.9rem; /* Ukuran teks lebih kecil */
    }
    
    .time {
        margin: 0; /* Hilangkan margin default */
        padding: 0; /* Hilangkan padding default */
        display: block; /* Pastikan elemen ini menjadi blok */
        text-align: left; /* Atur agar sejajar kiri */
    }
    .time iframe {
        width: 100%; /* Pastikan iframe mengambil seluruh lebar parent */
        height: auto; /* Tinggi menyesuaikan proporsi konten */
    }

    .footer-top {
        padding: 10px; /* Mengurangi padding pada layar kecil */
        height: 100%;
    }
    .border-round {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }

    #scrollToTop::before {
        width: 40px;
        height: 40px;
        top: 90%;
        left: 85%;
        transform: translate(-85%, -90%);
      }

    #scrollToTop {
        width: 40px;
        height: 40px;
        top: 90%;
        left: 85%;
        transform: translate(-85%, -90%);
      }
      
}


/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 992px) {
    #counter h1 {
        font-size: 2.5rem; /* Sesuaikan ukuran angka untuk layar sedang */
    }

    #counter h6 {
        font-size: 0.9rem; /* Sesuaikan ukuran teks untuk layar sedang */
    }
}