html,body{font-family: 'Poppins', sans-serif}
:root{--royal-yellow:#f6b70b;--dark-bg:#242424}

/* animations */
.fade-up { opacity: 0; transform: translateY(10px); }
.fade-up.show { animation: fadeUp 600ms cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes fadeUp { to { opacity:1; transform: translateY(0); } }

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: .12em solid rgba(255,255,255,0.8);
  animation: typing var(--tw-duration, 3s) steps(var(--steps, 30), end), blink .7s step-end infinite;
  max-width: 100%;
  box-sizing: content-box;
}
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink { 50% { border-color: transparent } }

/* hero video + overlay */
.hero-media { position: absolute; inset:0; overflow:hidden; z-index:0 }
.hero-media video, .hero-media img { width:100%; height:100%; object-fit:cover; display:block }
.hero-overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.6)); z-index:1 }
.hero-content { position:relative; z-index:2 }

/* slide-over menu */
.drawer { position: fixed; top:0; right:0; height:100vh; width:80vw; max-width:320px; background: #0f1724; color: white; transform: translateX(110%); transition: transform .28s cubic-bezier(.2,.9,.3,1); z-index:60; box-shadow: -10px 0 30px rgba(2,6,23,.6); }
.drawer.open { transform: translateX(0); }
.drawer .close-btn { background: transparent; border: none; color: inherit; }

.drawer-overlay { position:fixed; inset:0; background: rgba(0,0,0,0.45); z-index:50; opacity:0; pointer-events:none; transition: opacity .2s; }
.drawer-overlay.show { opacity:1; pointer-events:auto; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@media (prefers-reduced-motion: reduce) {
  .typewriter { animation: none; border-right: none }
  .fade-up.show { animation: none; opacity:1; transform:none }
}

/* slideshow containers */
.slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.slide-layer { transition: opacity 450ms ease-in-out; background-position: center; background-size: cover; }
.slide-layer.opacity-0 { opacity: 0; }
.slide-layer.opacity-100 { opacity: 1; }

/* ensure hero content sits above slides */
.hero-content { z-index: 10; }

/* optional: reduce motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .slide-layer { transition: none !important; }
}

/* Caption styles for hero slideshow */
.slide-caption {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%) translateY(12px);
  text-align: center;
  z-index: 20;
  pointer-events: none;
  max-width: 88%;
  color: white;
  opacity: 0;
  transition: opacity 450ms ease, transform 450ms cubic-bezier(.2,.9,.3,1);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  text-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
.slide-caption.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.slide-caption .caption-title {
  display: block;
  font-weight: 700;
  font-size: clamp(1.125rem, 2.4vw, 2.5rem);
  line-height: 1.05;
  margin-bottom: .25rem;
}
.slide-caption .caption-sub {
  display: block;
  font-weight: 500;
  font-size: clamp(.875rem, 1.6vw, 1.125rem);
  opacity: .95;
}

/* reduced motion: disable transform animation */
@media (prefers-reduced-motion: reduce) {
  .slide-caption { transition: none !important; transform: translateX(-50%) translateY(0) !important; opacity: 1 !important; }
}

/* animated gradient (fast but respects reduce-motion) */
.animated-gradient {
  min-height: 100%;
  width: 100%;
  background: linear-gradient(135deg, #fff8e6 0%, #fff1d6 20%, #fffbe8 40%, #fff9f0 60%, #fffaf6 100%);
  background-size: 300% 300%;
  animation: gradientShift 6s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* floating decorative circles */
.floating-ball { position: absolute; bottom:-20%; list-style:none; opacity:.12; border-radius:9999px; background: linear-gradient(180deg, rgba(250,204,21,0.9), rgba(254,243,199,0.8)); transform: translateY(0); }
.floating-ball::after { content:''; display:block; width:var(--size); height:var(--size); border-radius:9999px; }
.floating-ball { left: var(--left); animation: floatUp 9s linear infinite; animation-delay: var(--delay); transform-origin: center; }

@keyframes floatUp {
  0% { transform: translateY(40vh) scale(0.95) rotate(0deg); opacity:0; }
  10% { opacity:.12; }
  50% { transform: translateY(-20vh) scale(1.05) rotate(8deg); opacity:.08; }
  100% { transform: translateY(-80vh) scale(0.9) rotate(-6deg); opacity:0; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animated-gradient { animation: none; }
  .floating-ball { animation: none; display:none; }
}

/* alternate animated bg */
.animated-bg {
  background: linear-gradient(135deg, #fffdf3, #fff8d6, #fff4bf);
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}


/* contact.css — custom styles kept minimal (Tailwind handles most layout) */

/* font fallback */
html, body { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

/* Contact card decoration */
.contact-card {
  background: linear-gradient(135deg, rgba(255,243,205,0.9) 0%, rgba(255,255,255,0.85) 50%, rgba(255,243,205,0.9) 100%);
  border-radius: 1rem;
}

/* decorative circle (soft blur) */
.contact-card .decorative-circle {
  position: absolute;
  left: -2.5rem;
  top: -2.5rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: rgba(250, 204, 21, 0.12);
  filter: blur(18px);
  pointer-events: none;
}

/* iframe container responsiveness fallback */
.responsive-iframe iframe {
  min-height: 180px; /* for very small screens */
}

/* small screens: tighten paddings */
@media (max-width: 420px) {
  .contact-card { padding: 1rem; }
  .responsive-iframe iframe { min-height: 220px; }
}

/* subtle focus style for inputs (in addition to Tailwind) */
#contactForm input:focus, #contactForm textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(246, 186, 0, 0.12);
}

/* visually-hidden utility (if needed) */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}


/* contact.css — minimal custom styles to complement Tailwind */

/* Base font fallback */
html, body { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial; }

/* Card subtle border & elevated look */
aside > div { border-radius: 1rem; }

/* Decorative (small) square icon background */
.w-12.h-12 { min-width: 3rem; min-height: 3rem; }

/* Decorative gradient & gentle shadow (already handled inline) */

/* Responsive iframe fallback */
.responsive-iframe iframe {
  min-height: 180px;
}

/* Input focus enhancement */
#contactForm input:focus, #contactForm textarea:focus {
  box-shadow: 0 0 0 6px rgba(250, 204, 21, 0.08);
  outline: none;
}

/* Smaller screens: increase vertical spacing for readability */
@media (max-width: 420px) {
  #contactForm { gap: 12px; }
  .responsive-iframe iframe { min-height: 220px; }
}

/* Status text colors toggled via JS classes */
.text-red-600 { color: #dc2626 !important; }
.text-gray-600 { color: #4b5563 !important; }

/* Utility: visually hidden */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}



  .sr-only { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; clip-path: inset(50%); border: 0; padding: 0; margin: -1px; }



   /* ensure slideshow always sits behind content */
  .slideshow { z-index: 0; }
  .hero-content { z-index: 20; } /* already set via class on elements but keep for clarity */
  /* make sure overlay does not block pointer events (keeps buttons clickable) */
  .slideshow > .pointer-events-none { pointer-events: none; }