:root {
  --color-primary: #5a4e38; /* Deep Olive/Brown - Main Accent */
  --color-secondary: #f7f5ee; /* Creamy Off-White - Background */
  --color-text-dark: #2d251d; /* Very Dark Brown */
  --color-text-light: #c0a880; /* Muted Gold/Tan */
}
.bg-primary {
  background-color: var(--color-primary);
}
.text-primary {
  color: var(--color-primary);
}
.bg-secondary {
  background-color: var(--color-secondary);
}
.text-text-dark {
  color: var(--color-text-dark);
}
.text-text-light {
  color: var(--color-text-light);
}

/* Smooth page transition effect for content switching */
.page-content {
  transition: opacity 0.4s ease-in-out;
}

/* Custom scrollbar styling for a cleaner look */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: var(--color-text-light);
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-secondary);
}

/* Set Inter as default font */
body {
  font-family: "Inter", sans-serif;
  background-color: var(--color-secondary);
}

.nav-link {
    position: relative;
    color: #2D251D;
    transition: color .3s ease;
}

/* Animated underline effect */
.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #C0A880;
    transition: all .30s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Hover animation */
.nav-link:hover {
    color: #C0A880;
}

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

/* Active Nav — Desktop */
.nav-link-active {
    color: #C0A880 !important;
    font-weight: 500;
}

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

/* ---------- MOBILE MENU STYLE IMPROVEMENT ---------- */
@media (max-width: 768px){
    .nav-link {
        padding: 10px 12px;
        border-radius: 10px;
        transition: all .3s ease;
    }

    .nav-link:hover {
        background: #F7F5EE;
        transform: translateX(6px);
    }

    .nav-link::after {
        display: none; /* underline not needed in mobile */
    }

    .nav-link-active {
        background: rgba(192,168,128,0.18);
        color: #5A4E38 !important;
        font-weight: 700;
        border-left: 4px solid #C0A880;
    }
}

@keyframes infinity-move {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(20deg); }
}

.animate-infinity {
  display: inline-block;
  animation: infinity-move 2s ease-in-out infinite;
}