/* ================================================
   AZZALEA HOMESTAY — DESIGN MAKEOVER CSS
   Brand: Purple/Violet (#6B2D8C)
   Font: Rubik
   Style: Modern, professional hospitality
   ================================================ */

:root {
  --brand: #6B2D8C;
  --brand-light: #9B4DCA;
  --brand-dark: #4A1E63;
  --brand-gradient: linear-gradient(135deg, #6B2D8C 0%, #9B4DCA 100%);
  --brand-soft: #F3E8F9;
  --accent: #FFD700;
  --text-dark: #2D2D2D;
  --text-medium: #555;
  --text-light: #888;
  --bg-white: #FFFFFF;
  --bg-soft: #FAFAFA;
  --bg-purple-soft: #F8F4FB;
  --shadow-sm: 0 2px 8px rgba(107, 45, 140, 0.08);
  --shadow-md: 0 4px 20px rgba(107, 45, 140, 0.12);
  --shadow-lg: 0 8px 40px rgba(107, 45, 140, 0.16);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body, h1, h2, h3, h4, h5, h6, p, span, a, li, div, button, input, textarea {
  font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

nav, .navbar, .menu {
  background: rgba(107, 45, 140, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15) !important;
  transition: var(--transition) !important;
}

nav .nav-link, .navbar .nav-link, .menu .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: 0.3px !important;
  transition: var(--transition) !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
}

nav .nav-link:hover, .navbar .nav-link:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

nav .nav-link.link.text-primary { color: #FFD700 !important; }

nav .navbar-brand img, nav img { filter: brightness(0) invert(1); opacity: 0.95; }

.cid-se3COAocFy .mbr-overlay, .header10 .mbr-overlay, .header9 .mbr-overlay {
  background: linear-gradient(135deg, rgba(107, 45, 140, 0.6) 0%, rgba(74, 30, 99, 0.4) 50%, rgba(0, 0, 0, 0.3) 100%) !important;
  opacity: 1 !important;
}

.cid-se3COAocFy h1, .header10 h1, .header9 h1 {
  font-size: 3.5rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
  letter-spacing: -1px !important;
  line-height: 1.1 !important;
}

.header10 h3, .header9 h3, .cid-se3COAocFy .mbr-text, .cid-se3COAocFy p {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 1.5rem !important;
  font-weight: 300 !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4) !important;
}

.header10 .mbr-section-subtitle {
  font-size: 1.75rem !important;
  font-weight: 500 !important;
  color: #FFD700 !important;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5) !important;
}

.media-container-column { z-index: 10; position: relative; }

.btn {
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  border-radius: 50px !important;
  padding: 14px 36px !important;
  transition: var(--transition) !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-primary {
  background: var(--brand-gradient) !important;
  border: none !important;
  color: #FFFFFF !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.btn-white-outline, .btn-black-outline {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  color: #FFFFFF !important;
  backdrop-filter: blur(5px);
}

.btn-white-outline:hover, .btn-black-outline:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  color: #FFFFFF !important;
}

.gallery2 .btn { background: var(--brand-gradient) !important; color: #FFFFFF !important; border: none !important; }
.gallery2 .btn:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-lg) !important; }

.gallery2, .cid-se3FShLEne { background: var(--bg-purple-soft) !important; padding: 80px 0 !important; }

.gallery2 h2, .gallery2 .mbr-section-title {
  color: var(--brand-dark) !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
}

.gallery2 .mbr-section-subtitle { color: var(--text-medium) !important; font-weight: 300 !important; }

.gallery2 .card {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition) !important;
  margin-bottom: 30px !important;
}

.gallery2 .card:hover { transform: translateY(-8px) !important; box-shadow: var(--shadow-lg) !important; }
.gallery2 .card img { transition: transform 0.5s ease !important; border-radius: 16px 16px 0 0 !important; }
.gallery2 .card:hover img { transform: scale(1.05) !important; }
.gallery2 .card-title { color: var(--brand) !important; font-weight: 600 !important; }

.content10, .cid-r0UnT4fAfN {
  background: var(--brand-dark) !important;
  color: #FFFFFF !important;
  padding: 60px 0 !important;
}

.content10 h2 { color: #FFFFFF !important; font-size: 2rem !important; font-weight: 600 !important; }
.content10 p, .content10 .mbr-text { color: rgba(255, 255, 255, 0.8) !important; font-size: 1.1rem !important; font-weight: 300 !important; line-height: 1.8 !important; }

.carousel, .cid-r0O6oWAPHt { background: var(--bg-soft) !important; padding: 60px 0 !important; }
.carousel .mbr-section-title { color: var(--brand-dark) !important; font-weight: 700 !important; }

.carousel-control-prev, .carousel-control-next {
  opacity: 0.7 !important;
  width: 50px !important;
  height: 50px !important;
  background: var(--brand) !important;
  border-radius: 50% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.carousel-control-prev:hover, .carousel-control-next:hover { opacity: 1 !important; background: var(--brand-light) !important; }

.carousel-indicators li {
  background: var(--brand) !important;
  border-radius: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border: none !important;
  opacity: 0.4 !important;
}

.carousel-indicators li.active { opacity: 1 !important; width: 30px !important; border-radius: 5px !important; }

.footer2, .footer3, .cid-r0Ue0nsuSr, .cid-se3HkXkpY7 {
  background: linear-gradient(180deg, #2D2D2D 0%, #1A1A1A 100%) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 60px 0 30px 0 !important;
}

.footer2 h2, .footer3 h2 { color: #FFFFFF !important; font-weight: 600 !important; }
.footer2 a, .footer3 a { color: var(--brand-light) !important; transition: var(--transition) !important; }
.footer2 a:hover, .footer3 a:hover { color: #FFFFFF !important; text-decoration: none !important; }
.footer2 strong, .footer3 strong { color: var(--accent) !important; }
.footer2 iframe { border-radius: 12px !important; box-shadow: var(--shadow-md) !important; }

.footer2 .copyright, .footer3 .copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: 20px !important;
  margin-top: 30px !important;
  font-size: 0.85rem !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

img { border-radius: 8px; }

section { scroll-margin-top: 80px; }

section {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.6s ease forwards;
}

section:nth-child(1) { animation-delay: 0.1s; }
section:nth-child(2) { animation-delay: 0.2s; }
section:nth-child(3) { animation-delay: 0.3s; }
section:nth-child(4) { animation-delay: 0.4s; }
section:nth-child(5) { animation-delay: 0.5s; }
section:nth-child(6) { animation-delay: 0.6s; }

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

@media (max-width: 768px) {
  .header10 h3, .header9 h3 { font-size: 1.25rem !important; }
  .gallery2 .card { margin-bottom: 20px !important; }
  .btn { padding: 12px 24px !important; font-size: 12px !important; }
  .content10 { padding: 40px 20px !important; }
  .footer2, .footer3 { padding: 40px 20px 20px 20px !important; }
  .cid-se3COAocFy h1, .header10 h1, .header9 h1 { font-size: 2rem !important; }
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--brand-light); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }
::selection { background: var(--brand); color: #FFFFFF; }

.header9 h1 { color: #FFFFFF !important; }
.btn-black-outline { color: #FFFFFF !important; }

a[href*="wasap"].btn:hover, a[href*="whatsapp"].btn:hover {
  background: rgba(37, 211, 102, 0.2) !important;
  border-color: #25D366 !important;
}