:root {
--accent: #1d7081 !important;
--primary: #195526 !important;
--dark-blue-color: #fca240 !important;
--secondary: #4f4c4c !important;
--primary-font: Roboto Condensed, sans-serif;
--secondary-font: Roboto Mono, sans-serif;
}

/* 1. SMOOTH SCROLLING & FLUID BASICS */
html {
  scroll-behavior: smooth;
  /* Fluid font size: scales between 16px and 20px automatically */
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}

/* 2. RESPONSIVE UTILITIES */
/* Makes images and videos never overflow their containers */
img, video {
  max-width: 100%;
  height: auto;
}

/* A modern responsive grid: elements stack on mobile and side-by-side on desktop */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem;
}

/* 3. SCROLL-DRIVEN ANIMATION */
/* Apply the 'reveal' class to any element to make it fade in on scroll */
.reveal {
  view-timeline-name: --reveal;
  view-timeline-axis: block;
  animation: auto linear reveal both;
  animation-timeline: --reveal;
  /* Animates when the element is between 10% and 40% into the viewport */
  animation-range: entry 10% cover 40%;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 4. OPTIONAL: SCROLL PROGRESS BAR */
/* This adds a thin line at the top that fills as you scroll */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #3490dc; /* Change this to your brand color */
  z-index: 9999;
  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}