body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
:root {
  --charcoal-blue: #051527;
}

html {
  scroll-behavior: smooth;
  font-family: "Roboto", sans-serif;
  font-display: swap;
}

@font-face {
  font-family: "Amsterdam One";
  src: url("/fonts/AmsterdamOne-eZ12l.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.ff-amsterdam-one {
  font-family: "Amsterdam One";
  font-display: swap;
}

/* Footer & Header */
.bg-charcoal-blue {
  background-color: var(--charcoal-blue);
}

.text-charcoal-blue {
  color: var(--charcoal-blue);
}

/* Remove default swipper arrows */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

.swiper-pagination-bullet {
  background-color: #cacaca;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: #051527;
}

.swiper-pagination {
  margin-bottom: 0px;
  bottom: 10px;
}

/* Create Custom Scrollbar */
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--charcoal-blue);
}

.active-project {
  background-color: #051527;
  color: white;
}

/* Target only the first button */
#project-category ~ .category-btn {
  background-color: #051527;
  color: white;
}