:root {
  --brand-blue: #1a4d7c;
  --brand-cyan: #2ab5c6;
}

body {
  font-family: 'Nunito', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
}

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #1a4d7c;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: overlayFade 2.5s ease forwards;
}

.intro-logo {
  width: min(240px, 45vw);
  animation: introZoom 1.2s ease forwards;
}

@keyframes introZoom {
  0% { transform: scale(0.35); opacity: 0.2; }
  70% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes overlayFade {
  0% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.hero-slide.active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.34);
}

.fade-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

button,
input[type="submit"],
.btn-anim,
.quote-btn,
.filter-btn,
.gal-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

button:hover,
input[type="submit"]:hover,
.btn-anim:hover,
.quote-btn:hover,
.filter-btn:hover,
.gal-btn:hover {
  transform: translateY(-2px) scale(1.05);
}

.product-card,
.gal-card,
.category-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover,
.gal-card:hover,
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(26, 77, 124, 0.14);
}

.gallery-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.gallery-grid img:hover {
  transform: scale(1.04);
}

.hero-buttons a,
.hero-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-img-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.hero-img-slide.active {
  opacity: 1;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease;
}

.hero-dot.active {
  background: #2BBCD6;
}