:root {
  --primary: #1E3A8A;
  --accent: #1D4ED8;
  --white: #ffffff;
}

/* Other existing styles remain unchanged */

/* ================= Popup Styles (Final Popup) ================= */

/* Animation for Call Button */
@keyframes pulse {
0% {
  transform: scale(1);
}
50% {
  transform: scale(1.05);
}
100% {
  transform: scale(1);
}
}
.animate-pulse {
animation: pulse 1.5s infinite;
}

/* Fade-in Animation */
@keyframes fadeIn {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}
.animate-fade-in {
animation: fadeIn 1s ease-in-out;
}

/* Overlay Fade In */
@keyframes overlayFadeIn {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}

/* Popup In Animation */
@keyframes popupIn {
from {
  opacity: 0;
  transform: scale(0.9);
}
to {
  opacity: 1;
  transform: scale(1);
}
}

.popup-close {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
font-size: 2rem;
line-height: 1;
cursor: pointer;
color: #e51937; /* Accent color */
z-index: 2100;
}

.popup-content {
padding: 2rem;
margin: 50px 0;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.popup-title {
font-size: 1.8rem;
margin-bottom: 1rem;
color: #003a70; /* Primary color */
}

.popup-phone-number {
display: flex;
align-items: center;
gap: 8px;
font-size: 1.6rem;
font-weight: 600;
color: #e51937; /* Accent color */
border: 1px solid #e51937;
border-radius: 12px;
margin: 0.5rem 0 1rem;
padding: 0.5rem 1rem;
animation: pulse 2s infinite;
}

.popup-text,
.popup-action-text {
margin: 0.75rem 0;
color: #333; /* Neutral text color */
}

.popup-call-circle {
margin: 1rem auto;
width: 100px;
height: 100px;
background: #e51937; /* Accent color */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}

.popup-call-circle:hover {
transform: scale(1.1);
}

.popup-click-to-call {
font-size: 2rem;
font-weight: 600;
}

/* Popup Overlay */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1999;
animation: overlayFadeIn 0.5s forwards;
}

/* Popup Container */
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
z-index: 2000;
overflow: hidden;
animation: popupIn 0.5s forwards;
}

/* Hide popup on larger screens */
@media (min-width: 769px) {
.popup,
.popup-overlay {
  display: none;
}
}

/* ================= End Popup Styles ================= */

/* ================= Other CSS (unchanged) ================= */

/* Big animated call button in hero */
.pulse-button {
animation: pulse 2s infinite;
}