@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap');

:root {
  --primary: 245 158 11;
  --background: hsl(0 0% 100%);
  --foreground: hsl(222.2 47.4% 11.2%);
  --muted: hsl(210 40% 96.1%);
  --muted-foreground: hsl(215.4 16.3% 46.9%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(222.2 47.4% 11.2%);
  --border: hsl(214.3 31.8% 91.4%);
  --input: hsl(214.3 31.8% 91.4%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(222.2 47.4% 11.2%);
  --primary: hsl(222.2 47.4% 11.2%);
  --primary-foreground: hsl(210 40% 98%);
  --secondary: hsl(210 40% 96.1%);
  --secondary-foreground: hsl(222.2 47.4% 11.2%);
  --accent: hsl(210 40% 96.1%);
  --accent-foreground: hsl(222.2 47.4% 11.2%);
  --destructive: hsl(0 100% 50%);
  --destructive-foreground: hsl(210 40% 98%);
  --ring: hsl(215 20.2% 65.1%);
  --radius: 0.5rem;
}
:root[class~="dark"] {
  --background: hsl(224 71% 4%);
  --foreground: hsl(213 31% 91%);
  --muted: hsl(223 47% 11%);
  --muted-foreground: hsl(215.4 16.3% 56.9%);
  --accent: hsl(216 34% 17%);
  --accent-foreground: hsl(210 40% 98%);
  --popover: hsl(224 71% 4%);
  --popover-foreground: hsl(215 20.2% 65.1%);
  --border: hsl(216 34% 17%);
  --input: hsl(216 34% 17%);
  --card: hsl(224 71% 4%);
  --card-foreground: hsl(213 31% 91%);
  --primary: hsl(210 40% 98%);
  --primary-foreground: hsl(222.2 47.4% 1.2%);
  --secondary: hsl(222.2 47.4% 11.2%);
  --secondary-foreground: hsl(210 40% 98%);
  --destructive: hsl(0 63% 31%);
  --destructive-foreground: hsl(210 40% 98%);
  --ring: hsl(216 34% 17%);
  --radius: 0.5rem;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeInUp 1.2s ease forwards;
}

.cta-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 25px -5px rgb(245 158 11 / 0.3),
              0 8px 10px -6px rgb(245 158 11 / 0.3);
}

.whatsapp-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.whatsapp-btn:hover {
  background-color: #1e2937;
  border-color: #25D366;
  transform: translateY(-3px);
}

.service-card {
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgb(245 158 11 / 0.15);
}

.about-image {
  transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.about-image:hover {
  transform: scale(1.05);
}
@media (max-width: 516px) {
  .text-vsm {
    font-size: 2.2vw;
  }
}