:root {
  --theme-color: rgb(225, 236, 181);
  --bg-dark: #121212;
  --bg-card: #1e1e1e;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: var(--bg-dark) !important;
  color: #fff;
  overflow-x: hidden;
}

/* Navbar */
.navbar {
  transition: background-color 0.3s ease, padding 0.3s ease;
}

.navbar.scrolled {
  background-color: rgba(18, 18, 18, 0.9) !important;
  backdrop-filter: blur(10px);
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.nav-link {
  color: #fff !important;
  position: relative;
  font-weight: 500;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 5px;
  left: 50%;
  background-color: var(--theme-color);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 80%;
}

.nav-link.active {
  color: var(--theme-color) !important;
}

/* Utilities */
.text-theme {
  color: var(--theme-color) !important;
}

.border-theme {
  border: 1px solid var(--theme-color) !important;
}

.bg-dark-theme {
  background-color: #1a1a1a;
}

.object-fit-cover {
  object-fit: cover;
}

/* Type Loop Cursor */
.type-loop::after {
  content: "|";
  margin-left: 5px;
  animation: blink 0.8s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Cards & Hover Effects */
.card-custom {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-custom:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  border-color: var(--theme-color);
}

.activity-card .card-custom {
  transform: none;
}

/* Skills Icons */
.skill-item {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.skill-item:hover {
  transform: scale(1.1);
}

.skill-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 5px;
}

/* Animations */
.fade-up,
.slide-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.visible,
.slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-left.visible,
.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Indicators */
.dot-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Activities Carousel */
#activities-container::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

#activities-container {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  scroll-snap-type: x mandatory;
  /* Enable Horizontal Snap */
  padding-bottom: 20px;
  /* Space for shadow/hover effects */
}

.activity-card {
  width: 100%;
  /* Default mobile: 1 item */
  flex-shrink: 0;
  scroll-snap-align: start;
  /* Snap to start for cleaner 2-item view */
}

@media (min-width: 768px) {
  .activity-card {
    width: calc(50% - 12px);
    /* Desktop: 2 items (gap-4 is 24px, so -12px each) */
  }
}


.carousel-nav {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background-color: rgba(0, 0, 0, 0.7);
  /* translucent background */
  backdrop-filter: blur(5px);
}

.carousel-nav:hover {
  background-color: var(--theme-color);
  color: #000;
  border-color: var(--theme-color);
}


/* Filter Dropdown */
#activity-filter {
  background-color: #000;
  color: #fff;
  border: 1px solid var(--theme-color);
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e1ecb5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  /* Custom SVG Arrow with Theme Color */
}

#activity-filter:focus {
  box-shadow: 0 0 0 0.25rem rgba(225, 236, 181, 0.25);
  border-color: var(--theme-color);
}

/* For Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--theme-color);
  border-radius: 4px;
}

/* For Firefox */
* {
  scrollbar-width: thin; /* "auto" | "thin" | "none" */
  scrollbar-color: var(--theme-color) transparent;
}

/* Responsive Typography & Layout Fixes */
@media (max-width: 768px) {
  .display-1 {
    font-size: 3rem;
    word-break: break-word;
    /* Prevent long words overflowing */
  }

  .display-4 {
    font-size: 2rem;
  }

  /* Fix potential overflow from rows/containers */
  .container-fluid,
  .container {
    padding-left: 15px;
    padding-right: 15px;
    overflow-x: hidden;
  }

  body,
  html {
    overflow-x: hidden;
    width: 100%;
  }

  /* Adjust spacing on mobile */
  section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .navbar-collapse {
    background-color: rgba(0, 0, 0, 0.95);
    padding: 1rem;
    border-radius: 0 0 1rem 1rem;
    border-bottom: 1px solid var(--theme-color);
  }
}