/* Theme Background Colors - All backgrounds set to #DCDCDC */

/* Main Background Colors */
body {
  background-color: #FFFFFF !important;
  background-image: none !important;
}

/* Section Backgrounds */
#welcome {
  background-color: #FFFFFF !important;
  background-image: none !important;
}

#about {
  background-color: #FFFFFF !important;
  background-image: none !important;
}

#insights {
  background-color: #FFFFFF !important;
  background-image: none !important;
}

#services {
  background-color: #FFFFFF !important;
  background-image: none !important;
}

#contact {
  background-color: #FFFFFF !important;
  background-image: none !important;
}

/* Stats Panel Background */
.relative.mt-28 {
  background-color: #FFFFFF !important;
  background-image: none !important;
}

/* Header Backgrounds - เปลี่ยนเป็นสีขาวล้วน */
header {
  background-color: #ffffff !important;
  background-image: none !important;
  border: 2.5px solid #DCDCDC !important;
  box-sizing: border-box !important;
}

header:hover {
  background: #ffffff !important;
  background-image: none !important;
}

/* Mobile Menu */
#mobileMenu {
  background-color: rgba(255, 255, 255, 0.95) !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E") !important;
}

/* Footer Background - เปลี่ยนเป็นสีเทาอ่อน */
footer {
  background: #DCDCDC !important;
  background-image: none !important;
}

/* Footer Text Colors - เปลี่ยนเป็นสีดำ */
footer,
footer *,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer p, footer span, footer li, footer div, footer a,
footer .text-white,
footer .text-2xl,
footer .text-gray-300,
footer .text-gray-400,
footer .text-gray-500,
footer .text-gray-600,
footer .text-gray-700 {
  color: #000000 !important;
}

/* Remove hover effects from footer links but keep them black */
footer a:hover,
footer .hover\:text-white:hover,
footer .hover\:text-indigo-300:hover,
footer .hover\:text-green-300:hover,
footer .hover\:text-purple-300:hover,
footer .group-hover\:text-indigo-300:hover,
footer .group-hover\:text-green-300:hover,
footer .group-hover\:text-purple-300:hover {
  color: #000000 !important;
}

/* Footer social icons background */
footer .bg-gray-800,
footer .bg-indigo-600\/20,
footer .bg-green-600\/20,
footer .bg-purple-600\/20 {
  background-color: #C6E2FF !important;
}

/* Footer social icons color */
footer .text-indigo-400,
footer .text-green-400,
footer .text-purple-400 {
  color: #000000 !important;
}

/* เพิ่ม hover effects สำหรับไอคอนโซเชียล */
footer .bg-gray-800:hover,
footer .bg-indigo-600\/20:hover,
footer .bg-green-600\/20:hover,
footer .bg-purple-600\/20:hover {

}

footer .text-indigo-400:hover,
footer .text-green-400:hover,
footer .text-purple-400:hover {
  color: #cbe4ff !important;
}

/* Card Backgrounds */
.bg-white {
  background-color: #FFFFFF !important;
}

/* Service Cards */
.rounded-2xl.bg-white,
.service-card,
.bg-service-card,
#services .rounded-2xl.bg-white,
#services .relative.rounded-2xl.bg-white,
#services .group .relative.rounded-2xl.bg-white {
  background-color: #FFFFFF !important;
  background-image: none !important;
}

/* Hero Card Backgrounds */
#heroCard.hero-card-brown {
  background-image: linear-gradient(135deg, var(--brown-dark), var(--brown)) !important;
}

#heroCard.hero-card-blue {
  background-image: linear-gradient(135deg, var(--blue-dark), var(--blue)) !important;
}

#heroCard.hero-card-beige {
  background-image: linear-gradient(135deg, var(--brown-light), var(--beige-dark)) !important;
}

/* Hero Card Colors */
#heroCard[data-card="1"],
#heroCard.card-1 {
  background: #d7eaff !important;
  background-image: none !important;
}

#heroCard[data-card="2"],
#heroCard.card-2 {
  background: #dcedff !important;
  background-image: none !important;
}

#heroCard[data-card="3"],
#heroCard.card-3 {
  background: #e2f0ff !important;
  background-image: none !important;
}

/* Stats Card Backgrounds */
.stat-card,
#statsGrid .stat-item,
#statsGrid > div {
  background: linear-gradient(135deg, var(--white), var(--beige-light)) !important;
}

/* Modal Backgrounds */
.modal-backdrop,
.bg-modal-backdrop {
  background: rgba(30, 41, 59, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}



/* Print Mode - keep white for printing */
@media print {
  body,
  * {
    background: white !important;
    background-color: white !important;
    background-image: none !important;
  }
}

/* Form Input Backgrounds */
.bg-gray-50 {
  background-color: var(--beige-light) !important;
}

input.bg-gray-50, textarea.bg-gray-50, select.bg-gray-50 {
  background-color: var(--beige-light) !important;
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
  .modal-content {
    background-color: #1f2937 !important;
  }
  
  .form-input-dark {
    background-color: #374151 !important;
  }
  
  .form-input-dark:focus {
    background-color: #374151 !important;
  }
}

/* Print Mode Backgrounds */
@media print {
  body {
    background-color: white !important;
  }
  
  * {
    background: white !important;
  }
}

/* Service Card Icon and Strip Color Changes */
#services .bg-gradient-to-br.from-blue-600.to-cyan-500,
#services .bg-gradient-to-br.from-purple-600.to-pink-500,
#services .bg-gradient-to-br.from-emerald-600.to-teal-500,
#services .bg-gradient-to-br.from-amber-600.to-orange-500 {
  background-color: #C6E2FF !important;
  background-image: none !important;
}

#services .h-1\.5.w-full.bg-gradient-to-r.from-blue-600.to-cyan-500,
#services .h-1\.5.w-full.bg-gradient-to-r.from-purple-600.to-pink-500,
#services .h-1\.5.w-full.bg-gradient-to-r.from-emerald-600.to-teal-500,
#services .h-1\.5.w-full.bg-gradient-to-r.from-amber-600.to-orange-500 {
  background-color: #C6E2FF !important;
  background-image: none !important;

  -webkit-backdrop-filter: blur(12px) !important;
}

/* Send Message button styling */
#contact button[type="submit"],
#contact .group.relative.w-full {
  background: #C6E2FF !important;
  background-image: none !important;
  color: #000000 !important;
  transition: none !important;
  transform: none !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Remove hover effects from Send Message button */
#contact button[type="submit"]:hover,
#contact .group.relative.w-full:hover {
  background: #C6E2FF !important;
  background-image: none !important;
  color: #000000 !important;
  transform: none !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Send Message button text color */
#contact button[type="submit"] span,
#contact button[type="submit"] *,
#contact .group.relative.w-full span,
#contact .group.relative.w-full * {
  color: #000000 !important;
}

/* Custom scrollbar - updated to #C6E2FF */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f0f0f0 !important;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #C6E2FF !important;
  border-radius: 10px;
  border: 1px solid #b3d9ff !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #C6E2FF !important;
}

/* Firefox scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: #C6E2FF #f0f0f0;

  color: #475569 !important;
}



/* Print Mode - keep white for printing */
@media print {
  body,
  * {
    background: white !important;
    background-color: white !important;
    background-image: none !important;
  }
}

/* Form Input Backgrounds */
.bg-gray-50 {
  background-color: var(--beige-light) !important;
}

input.bg-gray-50, textarea.bg-gray-50, select.bg-gray-50 {
  background-color: var(--beige-light) !important;
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
  .modal-content {
    background-color: #1f2937 !important;
  }
  
  .form-input-dark {
    background-color: #374151 !important;
  }
  
  .form-input-dark:focus {
    background-color: #374151 !important;
  }
}

/* Print Mode Backgrounds */
@media print {
  body {
    background-color: white !important;
  }
  
  * {
    background: white !important;
  }
}

/* Service Card Icon and Strip Color Changes */
#services .bg-gradient-to-br.from-blue-600.to-cyan-500,
#services .bg-gradient-to-br.from-purple-600.to-pink-500,
#services .bg-gradient-to-br.from-emerald-600.to-teal-500,
#services .bg-gradient-to-br.from-amber-600.to-orange-500 {
  background-color: #C6E2FF !important;
  background-image: none !important;
}

#services .h-1\.5.w-full.bg-gradient-to-r.from-blue-600.to-cyan-500,
#services .h-1\.5.w-full.bg-gradient-to-r.from-purple-600.to-pink-500,
#services .h-1\.5.w-full.bg-gradient-to-r.from-emerald-600.to-teal-500,
#services .h-1\.5.w-full.bg-gradient-to-r.from-amber-600.to-orange-500 {
  background-color: #C6E2FF !important;
  background-image: none !important;
}
#services .h-1\.5.w-full.bg-gradient-to-r.from-purple-600.to-pink-500,
#services .h-1\.5.w-full.bg-gradient-to-r.from-emerald-600.to-teal-500,
#services .h-1\.5.w-full.bg-gradient-to-r.from-amber-600.to-orange-500 {
  background-color: #C6E2FF !important;
  background-image: none !important;
}

/* Navigation link hover effects */
header nav a:hover,
#mobileMenu a:hover {
  background-color: #C6E2FF !important; /* สีฟ้าอ่อน */
  color: #000000 !important; /* เปลี่ยนสี font เป็นดำ */
}

/* Desktop navigation specific */
header nav .hidden.lg\:flex a:hover {
  background-color: #C6E2FF !important;
  color: #000000 !important; /* เปลี่ยนสี font เป็นดำ */
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 6px rgba(6, 95, 70, 0.1) !important;
}

/* Mobile menu links hover */
#mobileMenu .flex.flex-col a:hover {
  background-color: #C6E2FF !important;
  color: #000000 !important; /* เปลี่ยนสี font เป็นดำ */
  padding-left: 1.5rem !important;
}

/* Navigation text colors - Desktop & Mobile */
header nav a,
header nav .hidden.lg\:flex a,
header nav .text-gray-700,
header nav span,
#mobileMenu a,
#mobileMenu .text-gray-700 {
  color: #000000 !important;
}

/* Logo text color */
header .flex.items-center span,
header .text-xl.font-bold {
  color: #000000 !important;
}

/* Mobile menu button color */
#mobileMenuBtn,
#mobileMenuBtn i {
  color: #000000 !important;
}

/* Menu hover states */
header nav a:hover,
#mobileMenu a:hover {
  color: #000000 !important;
  background-color: #2cb31f !important;
}

/* Button Styles - Welcome Section */
#welcome a[href="#contact"] {
  background-color: #cbe4ff !important;
  border: none !important;
  color: #000000 !important;
}

#welcome a[href="#insights"] {
  background-color: #C6E2FF !important;
  border-color: #C6E2FF !important;
  color: #000000 !important;
}

/* Mobile Button Styles - Explore Services */
#welcome button:nth-child(2),
.touch-area.border.border-gray-300 {
  background-color: #C6E2FF !important;
  border-color: #C6E2FF !important;
  color: #000000 !important;
}

/* Explore Services Hover Effects */
#welcome a[href="#insights"]:hover,
#welcome button:nth-child(2):hover,
{
  background-color: #C6E2FF !important;
  border-color: #C6E2FF !important;
  color: #000000 !important;
  opacity: 0.9 !important;
}

/* Override default gray-50 hover for Explore Services specifically */
#welcome a.hover\:bg-gray-50:hover {
  background-color: #C6E2FF !important;
}