/* Custom Styles for Celestine Westlake (Emerald Green & Metallic Gold Pattern) */

/* Scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

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

/* Glass Header Background */
.glass-header {
  background: rgba(2, 44, 34, 0.85);
  /* Deep teal */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Glass Card */
.glass-card {
  background: rgba(17, 94, 89, 0.2);
  /* Teal 800 with low opacity */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.2);
  /* Subtle gold border */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

/* Gold Text Gradient for Headings */
.gold-text-gradient {
  background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Box Shadow Inset for Cinematic Glow */
.box-shadow-inset {
  box-shadow: inset 0 0 150px rgba(2, 44, 34, 1);
}

/* Buttons */
.btn-primary {
  /* Bright, elegant metallic gold gradient avoiding dark brown */
  background: linear-gradient(to right, #D4AF37 0%, #F5D061 50%, #C59B27 100%);
  color: #01140f;
  /* Darkest teal text for crisp, premium contrast */
  border: 1px solid rgba(255, 235, 160, 0.6);
  border-radius: 4px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Added a subtle inner white glow to make it look like a pure polished gold bar */
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  /* Lighter shifting gradient on hover */
  background: linear-gradient(to right, #F5D061 0%, #FFF2A8 50%, #D4AF37 100%);
}

.btn-secondary {
  background: rgba(1, 20, 15, 0.6);
  backdrop-filter: blur(8px);
  color: #F5D061;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 4px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 400ms ease;
}

.btn-secondary:hover {
  background: rgba(2, 64, 48, 0.8);
  border-color: #FCE68A;
  color: #FFF2A8;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.animation-delay-200 {
  animation-delay: 200ms;
}

.animation-delay-400 {
  animation-delay: 400ms;
}

.animation-delay-600 {
  animation-delay: 600ms;
}

/* Background utilities */
.bg-primary {
  background-color: #1C1917;
}

/* Form Inputs */
.input-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

.input-glass:focus {
  outline: none;
  border-color: #CA8A04;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.2);
}

/* Luxury Water / Lotus Pattern background (Hồ Tây) */
.bg-pattern-hotay {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.5' stroke-opacity='0.1'%3E%3Ccircle cx='20' cy='20' r='20' /%3E%3Ccircle cx='20' cy='20' r='15' /%3E%3Ccircle cx='20' cy='20' r='10' /%3E%3Ccircle cx='0' cy='0' r='20' /%3E%3Ccircle cx='0' cy='0' r='15' /%3E%3Ccircle cx='0' cy='0' r='10' /%3E%3Ccircle cx='40' cy='0' r='20' /%3E%3Ccircle cx='40' cy='0' r='15' /%3E%3Ccircle cx='40' cy='0' r='10' /%3E%3Ccircle cx='0' cy='40' r='20' /%3E%3Ccircle cx='0' cy='40' r='15' /%3E%3Ccircle cx='0' cy='40' r='10' /%3E%3Ccircle cx='40' cy='40' r='20' /%3E%3Ccircle cx='40' cy='40' r='15' /%3E%3Ccircle cx='40' cy='40' r='10' /%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* Wiggle animation for Phone icon */
@keyframes wiggle {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-15deg);
  }

  50% {
    transform: rotate(15deg);
  }

  75% {
    transform: rotate(-5deg);
  }

  85% {
    transform: rotate(5deg);
  }
}