.button {
  background-color: #799ED7; /* Primary CTA color */
  color: #ffffff; /* White text for contrast */
  font-size: 18px;
  font-weight: 500; /* Medium weight for luxury feel */
  padding: 12px 24px;
  border-radius: 8px; /* Slightly rounded for a refined look */
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;

  /* Custom Luxury Shadow */
  box-shadow:
    0px 4px 12px rgba(64, 66, 74, 0.2),  /* Main soft shadow */
    0px 2px 8px rgba(225, 242, 255, 0.15); /* Subtle light glow */
}

/* Hover Effect */
.button:hover {
  background-color: #40424A; /* Deep grey for luxury hover */
  color: #E1F2FF; /* Soft light blue for elegance */
  box-shadow:
    0px 6px 16px rgba(64, 66, 74, 0.3),  /* Increased depth */
    0px 3px 10px rgba(225, 242, 255, 0.2); /* Softer glow effect */
  transform: scale(1.03); /* Subtle upscale for interaction */
}

/* Click (Active) Effect */
.button:active {
  transform: scale(0.98); /* Slight press-down effect */
  box-shadow:
    0px 3px 8px rgba(64, 66, 74, 0.2),  
    0px 1px 6px rgba(225, 242, 255, 0.1); /* Softer for pressed state */
}