/* Apply to the entire document */
html {
  scrollbar-width: thin;
  /* For Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.7) rgba(255, 255, 255, 0.2);
  /* Dark thumb with light track */
}

/* Webkit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 6px;
  /* Thin scrollbar */
  height: 6px;
  /* Thin horizontal scrollbar */
  z-index: 9999;
  /* Ensures it's on top */
  position: absolute;
  /* Position adjustment for visibility */
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.2);
  /* Light background track */
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.7);
  /* Dark glass effect for thumb */
  border-radius: 10px;
  /* Rounded corners for thumb */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  /* Glow effect for prominence */
  border: 1px solid rgba(255, 255, 255, 0.3);
  /* Glassy border */
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.9);
  /* Slightly darker on hover */
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
  /* Enhanced glow on hover */
}


body {
  /* background-color: #000; */
  /* color: #fff; */
  font-family: Arial, sans-serif;
  margin: 0;
}

.hero-section {
  position: relative;
  background: url('resources/background/peopleweknow.png') no-repeat center center/cover;
}

.section3 {
  background-image: url('../resources/background/About.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.hero-section .hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hero-section .container {
  position: relative;
  z-index: 2;
}

.box {
  background-color: rgba(170, 170, 170, 0.2);
  border-radius: 10px;
}


/* Custom styles */

.banner {
  position: relative;
  color: white;
  text-align: center;
  background: url('resources/background/peopleweknow.png') no-repeat center center/cover;
  height: 400px;

}

.bantext {
  font-size: 4rem;
  margin-top: 150px;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}

.hover_card {
  border-radius: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover_card:hover {
  transform: scale(1.05);
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
}

.hover_card1 {
  border-radius: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover_card1:hover {
  transform: scale(1.05);
  box-shadow: 10px 10px 0 rgba(255, 0, 0, 0.919);
}

        /* From Uiverse.io by H_K_MENON */
    /* this is the code  */
    .buttonX {
      position: relative;
      transition: all 0.3s ease-in-out;
      box-shadow: 0px 10px 20px ();
      padding-block: 0.5rem;
      padding-inline: 1.25rem;
      background-color: rgb(173, 0, 0);
      /* Dark red */
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffff;
      gap: 10px;
      font-weight: bold;
      border: 3px solid #ffffff4d;
      outline: none;
      overflow: hidden;
      font-size: 15px;
      cursor: pointer;
  }

  .iconX {
      width: 24px;
      height: 24px;
      transition: all 0.3s ease-in-out;
  }

  .buttonX:hover {
      transform: scale(1.05);
      border-color: #fff9;
  }
  

  .buttonX:hover .iconX {
      transform: translate(4px);
  }

  .buttonX:hover::before {
      animation: shine 1.5s ease-out infinite;
  }

  .buttonX::before {
      content: "";
      position: absolute;
      width: 100px;
      height: 100%;
      background-image: linear-gradient(120deg,
              rgba(255, 255, 255, 0) 30%,
              rgba(255, 255, 255, 0.8),
              rgba(255, 255, 255, 0) 70%);
      top: 0;
      left: -100px;
      opacity: 0.6;
  }


  @keyframes shine {
      0% {
          left: -100px;
      }

      60% {
          left: 100%;
      }

      to {
          left: 100%;
      }
  }

  #backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    display: none;
    background-color: #ff0000;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

#backToTop:hover {
    background-color: #b30000;
}