@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary: #f57a21;
  --secondary: #fbc510;
  --dark: #242b4b;
}

body {
  font-family: "Roboto", sans-serif;
}

/* Custom Animations */
@keyframes pulse-custom {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-pulse {
  animation: pulse-custom 1.5s infinite;
}

/* Base Styles Overrides */
.text-primary {
  color: var(--primary);
}
.bg-primary {
  background-color: var(--primary);
}
.text-secondary {
  color: var(--secondary);
}
.bg-secondary {
  background-color: var(--secondary);
}
.text-dark {
  color: var(--dark);
}
.bg-dark {
  background-color: var(--dark);
}

/* Hide scrollbar for carousel */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Hover Effect for Advantages Cards */
/* Hover Effect for Advantages Cards */
.reason {
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease;
  border: 2px solid transparent; /* Pre-allocate border space */
  will-change: transform; /* Optimize performance */
}

/* Inner elements transition */
.reason .rounded-full,
.reason h3 {
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.3s ease,
    background-color 0.3s ease;
}

.reason:hover {
  transform: scale(1.05) !important; /* Override GSAP inline styles */
  background-color: rgba(
    255,
    255,
    255,
    0.1
  ) !important; /* Boost visibility over dark background */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Strong shadow for depth */
  border-color: #fbc510; /* Primary Yellow */
  z-index: 20; /* Ensure it stays on top */
  cursor: default;
}

.reason:hover .rounded-full {
  transform: scale(1.2); /* Enlarge icon container */
  background-color: #fff; /* Highlight icon background */
  color: #fbc510; /* Icon becomes primary color */
}

.reason:hover h3 {
  transform: scale(1.15); /* Enlarge font */
  color: #fbc510; /* Text becomes primary color */
}