@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600&family=Dancing+Script:wght@400;600;700&display=swap');

/* Custom Color Definitions */
:root {
  --sage-green: #8A9B87;
  --ivory: #F5F5EC;
  --warm-clay: #C2A583;
  --soft-charcoal: #3D3D3D;
  --sage-green-light: #a8b8a5;
  --sage-green-dark: #6b7c68;
  --warm-clay-light: #d4bfa0;
  --warm-clay-dark: #a08866;
}

/* Browser Compatibility Fallbacks */
/* Fallback colors for browsers that don't support CSS variables */
.no-css-vars {
  --sage-green: #8A9B87;
  --ivory: #F5F5EC;
  --warm-clay: #C2A583;
  --soft-charcoal: #3D3D3D;
  --sage-green-light: #a8b8a5;
  --sage-green-dark: #6b7c68;
  --warm-clay-light: #d4bfa0;
  --warm-clay-dark: #a08866;
}

/* Flexbox fallbacks */
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex-wrap {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.justify-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.justify-between {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.items-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/* Transform fallbacks */
.transform {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

/* Transition fallbacks */
.transition-all {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Box shadow fallbacks */
.shadow-lg {
  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Border radius fallbacks */
.rounded-full {
  -webkit-border-radius: 9999px;
  -moz-border-radius: 9999px;
  border-radius: 9999px;
}

.rounded-xl {
  -webkit-border-radius: 0.75rem;
  -moz-border-radius: 0.75rem;
  border-radius: 0.75rem;
}

/* Backdrop filter fallbacks */
.backdrop-blur-sm {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Fallback for browsers that don't support backdrop-filter */
.no-backdrop-filter .backdrop-blur-sm {
  background-color: rgba(255, 255, 255, 0.8);
}

/* Aspect ratio fallbacks */
.aspect-ratio-4-3 {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 4:3 aspect ratio */
  overflow: hidden;
}

.aspect-ratio-4-3 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Object-fit fallbacks */
.no-object-fit .object-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.no-object-fit .object-contain {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Grid fallbacks for older browsers */
.no-css-grid .grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.no-css-grid .grid-cols-1 > * {
  width: 100%;
}

.no-css-grid .grid-cols-2 > * {
  width: 50%;
}

.no-css-grid .grid-cols-3 > * {
  width: 33.333333%;
}

@media (min-width: 768px) {
  .no-css-grid .md\\:grid-cols-2 > * {
    width: 50%;
  }
  
  .no-css-grid .md\\:grid-cols-3 > * {
    width: 33.333333%;
  }
}

@media (min-width: 1024px) {
  .no-css-grid .lg\\:grid-cols-2 > * {
    width: 50%;
  }
  
  .no-css-grid .lg\\:grid-cols-3 > * {
    width: 33.333333%;
  }
  
  .no-css-grid .lg\\:grid-cols-4 > * {
    width: 25%;
  }
}

/* Smooth scrolling fallback */
html {
  scroll-behavior: smooth;
}

/* User-select fallbacks */
.select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Font Awesome Icon Fixes */
.fas, .fab, .far, .fal {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.fab {
  font-weight: 400 !important;
}

/* Mobile Navigation Icon Fixes */
.mobile-nav-social i {
  display: inline-block !important;
  font-size: 1.125rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Force icon display and prevent font loading issues */
.fas, .fab {
  display: inline-block !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
}

/* Icon fallback for when Font Awesome doesn't load */
.fab.fa-facebook-f::before {
  content: "f" !important;
}

.fab.fa-instagram::before {
  content: "ig" !important;
}

.fab.fa-whatsapp::before {
  content: "wa" !important;
}

/* Override any conflicting styles */
.mobile-nav-social a i,
.btn-primary i,
.btn-secondary i {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

@layer base {
  body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--ivory);
    color: var(--soft-charcoal);
    @apply leading-relaxed;
  }
  
  h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    color: var(--sage-green-dark);
  }
  
  h1 {
    @apply text-4xl md:text-6xl font-bold tracking-wide;
  }
  
  h2 {
    @apply text-3xl md:text-4xl font-semibold;
  }
  
  h3 {
    @apply text-xl md:text-2xl font-medium;
  }
}

@layer components {
  /* Primary Button - Modern Rounded Rectangle */
  .btn-primary {
    @apply px-10 py-5 font-bold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl relative overflow-hidden;
    background: linear-gradient(135deg, var(--sage-green) 0%, var(--sage-green-dark) 100%);
    color: var(--ivory);
    border-radius: 16px;
    border: 3px solid var(--sage-green-dark);
    position: relative;
  }
  
  .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--sage-green-light) 0%, var(--sage-green) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
  }
  
  .btn-primary:hover::before {
    opacity: 1;
  }
  
  .btn-primary:hover {
    box-shadow: 0 12px 30px rgba(138, 155, 135, 0.4);
    transform: translateY(-3px) scale(1.03);
    border-color: var(--sage-green-light);
  }
  
  .btn-primary:active {
    transform: translateY(0) scale(0.98);
  }
  
  /* Text and Icon Layering */
  .btn-primary i,
  .btn-primary span,
  .btn-secondary i,
  .btn-secondary span,
  .btn-luxury i,
  .btn-luxury span,
  .btn-new-primary i,
  .btn-new-primary span,
  .btn-new-secondary i,
  .btn-new-secondary span,
  .btn-modern-square i,
  .btn-modern-square span,
  .btn-capsule i,
  .btn-capsule span {
    position: relative;
    z-index: 3;
  }
  
  /* Button Content (text nodes) */
  .btn-primary,
  .btn-secondary,
  .btn-luxury,
  .btn-new-primary,
  .btn-new-secondary,
  .btn-modern-square,
  .btn-capsule {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  
  /* Secondary Button - Warm Clay Solid */
  .btn-secondary {
    @apply px-10 py-5 font-bold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl relative overflow-hidden;
    background: linear-gradient(135deg, var(--warm-clay) 0%, var(--warm-clay-dark) 100%);
    color: var(--ivory);
    border-radius: 20px;
    border: 3px solid var(--warm-clay-dark);
    position: relative;
  }
  
  .btn-secondary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(245, 245, 236, 0.3), transparent);
    transition: all 0.4s ease;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  
  .btn-secondary:hover::after {
    width: 200%;
    height: 200%;
  }
  
  .btn-secondary:hover {
    background: linear-gradient(135deg, var(--warm-clay-light) 0%, var(--warm-clay) 100%);
    border-color: var(--warm-clay-light);
    box-shadow: 0 12px 30px rgba(194, 165, 131, 0.4);
    transform: translateY(-3px) scale(1.03);
  }
  
  .btn-secondary:active {
    transform: translateY(0) scale(0.98);
  }
  
  /* Luxury Button - Premium Angular */
  .btn-luxury {
    @apply px-12 py-5 font-black text-lg transition-all duration-300 transform hover:scale-105 shadow-xl hover:shadow-2xl relative overflow-hidden;
    background: linear-gradient(135deg, var(--sage-green-dark) 0%, var(--warm-clay-dark) 50%, var(--sage-green) 100%);
    color: var(--ivory);
    border-radius: 0px 20px 0px 20px;
    border: 4px solid var(--sage-green-dark);
    position: relative;
  }
  
  .btn-luxury::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245, 245, 236, 0.4), transparent);
    transition: left 0.6s ease;
  }
  
  .btn-luxury:hover::before {
    left: 100%;
  }
  
  .btn-luxury:hover {
    background: linear-gradient(135deg, var(--warm-clay-dark) 0%, var(--sage-green-dark) 50%, var(--warm-clay) 100%);
    border-color: var(--warm-clay-dark);
    box-shadow: 0 16px 40px rgba(138, 155, 135, 0.5);
    transform: translateY(-4px) scale(1.05);
  }
  
  .btn-luxury:active {
    transform: translateY(0) scale(0.98);
  }
  
  /* New Primary Button - Modern Pill */
  .btn-new-primary {
    @apply px-10 py-5 font-bold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl relative overflow-hidden;
    background: linear-gradient(45deg, var(--sage-green) 0%, var(--sage-green-light) 25%, var(--sage-green-dark) 50%, var(--sage-green) 75%, var(--sage-green-light) 100%);
    background-size: 300% 300%;
    color: var(--ivory);
    animation: gradientMove 4s ease infinite;
    border-radius: 50px;
    border: 3px solid var(--sage-green-dark);
    position: relative;
  }
  
  .btn-new-primary::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: inherit;
    pointer-events: none;
  }
  
  .btn-new-primary:hover {
    animation-duration: 1s;
    box-shadow: 0 12px 30px rgba(138, 155, 135, 0.5);
    transform: translateY(-3px) scale(1.03);
    border-color: var(--sage-green-light);
  }
  
  .btn-new-primary:active {
    transform: translateY(0) scale(0.98);
  }
  
  /* New Secondary Button - Solid Warm Clay */
  .btn-new-secondary {
    @apply px-10 py-5 font-bold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl relative overflow-hidden;
    background: linear-gradient(45deg, var(--warm-clay-light) 0%, var(--warm-clay) 50%, var(--warm-clay-dark) 100%);
    background-size: 200% 200%;
    color: var(--soft-charcoal);
    border: 3px solid var(--warm-clay-dark);
    animation: gradientMove 6s ease infinite;
    border-radius: 25px;
    position: relative;
  }
  
  .btn-new-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, var(--sage-green-light) 0%, var(--sage-green) 50%, var(--sage-green-dark) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
  }
  
  .btn-new-secondary:hover::before {
    opacity: 1;
  }
  
  .btn-new-secondary:hover {
    color: var(--ivory);
    border-color: var(--sage-green-dark);
    box-shadow: 0 12px 30px rgba(138, 155, 135, 0.4);
    transform: translateY(-3px) scale(1.03);
    animation-duration: 2s;
  }
  
  .btn-new-secondary:active {
    transform: translateY(0) scale(0.98);
  }
  
  /* Button Ripple Effect */
  .btn-ripple {
    position: relative;
    overflow: hidden;
  }
  
  .btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(245, 245, 236, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
  }
  
  .btn-ripple:active::after {
    width: 300px;
    height: 300px;
  }
  
  /* Additional Modern Button Styles */
  .btn-modern-square {
    @apply px-10 py-5 font-bold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl relative overflow-hidden;
    background: linear-gradient(135deg, var(--sage-green-dark) 0%, var(--sage-green) 100%);
    color: var(--ivory);
    border-radius: 8px;
    border: 3px solid var(--sage-green-dark);
    position: relative;
  }
  
  .btn-modern-square::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--warm-clay), var(--warm-clay-light));
    transition: height 0.3s ease;
  }
  
  .btn-modern-square:hover::before {
    height: 100%;
  }
  
  .btn-modern-square:hover {
    border-color: var(--warm-clay);
    box-shadow: 0 12px 30px rgba(138, 155, 135, 0.4);
    transform: translateY(-3px) scale(1.03);
  }
  
  .btn-capsule {
    @apply px-12 py-6 font-bold text-xl transition-all duration-300 transform hover:scale-105 shadow-xl hover:shadow-2xl relative overflow-hidden;
    background: linear-gradient(135deg, var(--warm-clay-dark) 0%, var(--sage-green-dark) 100%);
    color: var(--ivory);
    border-radius: 60px;
    border: 4px solid var(--warm-clay-dark);
    position: relative;
  }
  
  .btn-capsule::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(245, 245, 236, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
  }
  
  .btn-capsule:hover::after {
    opacity: 1;
  }
  
  .btn-capsule:hover {
    background: linear-gradient(135deg, var(--sage-green-dark) 0%, var(--warm-clay-dark) 100%);
    border-color: var(--sage-green-dark);
    box-shadow: 0 16px 40px rgba(194, 165, 131, 0.5);
    transform: translateY(-4px) scale(1.05);
  }
  
  /* Focus styles for accessibility */
  .btn-primary:focus,
  .btn-secondary:focus,
  .btn-luxury:focus,
  .btn-new-primary:focus,
  .btn-new-secondary:focus,
  .btn-modern-square:focus,
  .btn-capsule:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(138, 155, 135, 0.4);
  }
  
  /* Hamburger Menu Styles */
  .hamburger {
    position: relative;
    cursor: pointer;
  }
  
  .hamburger-line {
    transition: all 0.3s ease-in-out;
  }
  
  /* Active state - Transform hamburger to X */
  .hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  
  .hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  
  .hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  
  /* Mobile Navigation States */
  .mobile-nav-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .mobile-nav-menu.active {
    transform: translateX(0) !important;
  }
  
  /* Mobile Navigation Link Hover Effects */
  .mobile-nav-link {
    position: relative;
    overflow: hidden;
  }
  
  .mobile-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--sage-green), var(--sage-green-light));
    transition: width 0.3s ease;
    z-index: -1;
  }
  
  .mobile-nav-link:hover::before {
    width: 100%;
  }
  
  /* Mobile Navigation Animations */
  @keyframes slideInFromRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slideOutToRight {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  
  /* Mobile Navigation Responsive */
  @media (max-width: 480px) {
    .mobile-nav-menu {
      width: 100%;
      max-width: none;
    }
    
    .mobile-nav-link {
      padding: 12px 16px;
      font-size: 16px;
    }
    
    .hamburger {
      width: 48px;
      height: 48px;
    }
  }
  
  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .hamburger-line,
    .mobile-nav-menu,
    .mobile-nav-overlay,
    .mobile-nav-link {
      transition: none !important;
      animation: none !important;
    }
  }
  
  .card {
    background-color: var(--ivory);
    border: 1px solid rgba(194, 165, 131, 0.3);
    @apply rounded-2xl shadow-xl p-8 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2;
  }
  
  .section-padding {
    @apply py-24 px-6;
  }
  
  .container-custom {
    @apply max-w-7xl mx-auto px-6;
  }
  
  .reveal {
    @apply opacity-0 translate-y-8 transition-all duration-700;
  }
  
  .reveal.active {
    @apply opacity-100 translate-y-0;
  }
  
  .service-card {
    background: linear-gradient(135deg, var(--ivory) 0%, rgba(194, 165, 131, 0.1) 100%);
    border: 1px solid rgba(194, 165, 131, 0.3);
    @apply p-8 rounded-2xl text-center transition-all duration-500 hover:shadow-2xl hover:-translate-y-3 group;
  }
  
  .service-card:hover {
    background: linear-gradient(135deg, var(--ivory) 0%, rgba(194, 165, 131, 0.2) 100%);
    border-color: rgba(138, 155, 135, 0.4);
  }
  
  .faq-item {
    @apply mb-6;
  }
  
  .faq-question {
    background: linear-gradient(135deg, var(--warm-clay-light) 0%, var(--warm-clay) 100%);
    color: var(--soft-charcoal);
    @apply p-6 rounded-2xl cursor-pointer text-lg font-medium transition-all duration-500 shadow-md hover:shadow-lg;
  }
  
  .faq-question:hover {
    background: linear-gradient(135deg, var(--warm-clay) 0%, var(--warm-clay-dark) 100%);
  }
  
  .faq-answer {
    background-color: var(--ivory);
    border: 1px solid rgba(194, 165, 131, 0.3);
    @apply hidden p-6 rounded-b-2xl border-t-0 shadow-inner;
  }
  
  .testimonial {
    background-color: var(--ivory);
    border: 1px solid rgba(194, 165, 131, 0.3);
    @apply p-8 rounded-2xl text-center shadow-xl transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 relative overflow-hidden;
  }
  
  .testimonial::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--sage-green), var(--warm-clay), var(--sage-green-dark));
  }
  
  .social-icon {
    color: var(--sage-green);
    @apply text-2xl transition-all duration-300 hover:scale-125;
  }
  
  .social-icon:hover {
    color: var(--warm-clay-dark);
  }
  
  .nav-link {
    color: var(--sage-green-dark);
    @apply text-sm font-medium transition-colors duration-300 relative;
  }
  
  .nav-link:hover {
    color: var(--warm-clay-dark);
  }
  
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--sage-green), var(--warm-clay));
    transition: width 0.3s ease;
  }
  
  .nav-link:hover::after {
    width: 100%;
  }
  
  .hero-gradient {
    background: linear-gradient(135deg, rgba(245, 245, 236, 0.95), rgba(194, 165, 131, 0.3), rgba(138, 155, 135, 0.2));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(194, 165, 131, 0.3);
  }
  
  .footer-gradient {
    background: linear-gradient(135deg, var(--soft-charcoal), var(--sage-green-dark), var(--sage-green));
  }
  
  /* New Interactive Elements */
  .interactive-gradient {
    background: linear-gradient(45deg, var(--sage-green) 0%, var(--warm-clay) 25%, var(--ivory) 50%, var(--warm-clay) 75%, var(--sage-green) 100%);
    background-size: 300% 300%;
    animation: gradientMove 8s ease infinite;
  }
  
  .interactive-gradient:hover {
    animation-duration: 2s;
  }
  
  /* Floating Animation */
  .float-animation {
    animation: float 6s ease-in-out infinite;
  }
  
  .float-animation:nth-child(2) {
    animation-delay: 2s;
  }
  
  .float-animation:nth-child(3) {
    animation-delay: 4s;
  }
  
  /* Pulse Glow Effect */
  .pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
  }
  
  /* Morphing Background */
  .morphing-bg {
    background: linear-gradient(45deg, var(--ivory), var(--warm-clay-light), var(--sage-green-light), var(--warm-clay), var(--sage-green), var(--ivory));
    background-size: 400% 400%;
    animation: morphing 10s ease infinite;
  }
}

/* Custom animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

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

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes pulseGlow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(194, 165, 131, 0.3), 0 0 40px rgba(138, 155, 135, 0.2); 
  }
  50% { 
    box-shadow: 0 0 30px rgba(194, 165, 131, 0.5), 0 0 60px rgba(138, 155, 135, 0.3); 
  }
}

@keyframes morphing {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

.animate-fadeIn {
  animation: fadeIn 1s ease-in;
}

.animate-scroll {
  animation: scroll 15s linear infinite;
}



/* Logo Styling */
.header-logo img {
  transition: all 0.3s ease;
}

.header-logo img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Responsive logo adjustments */
@media (max-width: 640px) {
  .header-logo img {
    @apply h-12 max-w-36 px-3 py-1;
  }
}

@media (max-width: 480px) {
  .header-logo img {
    @apply h-10 max-w-32 px-2 py-1;
  }
}

/* New Mobile Navigation Styles */
.nav-trigger-button {
  -webkit-tap-highlight-color: transparent;
  transition: all 0.3s ease;
}

.nav-trigger-button:hover {
  background-color: rgba(138, 155, 135, 0.1);
}

.nav-trigger-button:active {
  @apply scale-95;
}

.nav-trigger-line {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Nav Trigger Active State - Transform to X */
.nav-trigger-button.nav-trigger-active .nav-trigger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-trigger-button.nav-trigger-active .nav-trigger-line:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.nav-trigger-button.nav-trigger-active .nav-trigger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Navigation Backdrop */
.mobile-nav-backdrop.nav-backdrop-active {
  @apply opacity-100 visible;
}

/* Mobile Navigation Panel */
.mobile-nav-panel.nav-panel-active {
  @apply translate-x-0;
}

.mobile-nav-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(194, 165, 131, 0.3) transparent;
}

.mobile-nav-panel::-webkit-scrollbar {
  width: 6px;
}

.mobile-nav-panel::-webkit-scrollbar-track {
  background: transparent;
}

.mobile-nav-panel::-webkit-scrollbar-thumb {
  background: rgba(194, 165, 131, 0.3);
  border-radius: 3px;
}

.mobile-nav-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(194, 165, 131, 0.5);
}

/* Mobile Navigation Items */
.mobile-nav-item {
  @apply block px-4 py-3 text-base font-medium transition-all duration-300 rounded-lg;
  color: var(--soft-charcoal);
  position: relative;
  overflow: hidden;
}

.mobile-nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(194, 165, 131, 0.2) 0%, rgba(138, 155, 135, 0.3) 100%);
  transition: width 0.3s ease;
  z-index: -1;
}

.mobile-nav-item:hover::before {
  width: 100%;
}

.mobile-nav-item:hover {
  color: var(--sage-green-dark);
  @apply transform translate-x-1;
}

.mobile-nav-item:active {
  @apply scale-95;
}

/* Mobile Navigation Social Links */
.mobile-nav-social-link {
  @apply w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300;
  background: linear-gradient(135deg, rgba(194, 165, 131, 0.3) 0%, rgba(138, 155, 135, 0.3) 100%);
  color: var(--sage-green);
}

.mobile-nav-social-link:hover {
  @apply scale-110 shadow-lg;
  background: linear-gradient(135deg, rgba(194, 165, 131, 0.5) 0%, rgba(138, 155, 135, 0.5) 100%);
  color: var(--soft-charcoal);
}

.mobile-nav-social-link:active {
  @apply scale-95;
}

/* Mobile Navigation Close Button */
.mobile-nav-close-btn {
  color: var(--soft-charcoal);
}

.mobile-nav-close-btn:hover {
  background-color: rgba(138, 155, 135, 0.2);
  @apply scale-105;
}

.mobile-nav-close-btn:active {
  @apply scale-95;
}

/* Mobile Navigation Animations */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutToRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Responsive Mobile Menu Adjustments */
@media (max-width: 480px) {
  .mobile-nav-panel {
    @apply w-full max-w-none;
  }
  
  .mobile-nav-item {
    @apply text-sm px-3 py-2;
  }
  
  .nav-trigger-button {
    @apply w-8 h-8;
  }
  
  .nav-trigger-line {
    @apply w-5;
  }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
  .nav-trigger-button,
  .nav-trigger-line,
  .mobile-nav-panel,
  .mobile-nav-backdrop,
  .mobile-nav-item,
  .mobile-nav-social-link,
  .mobile-nav-close-btn {
    transition: none !important;
    animation: none !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .mobile-nav-panel {
    border: 2px solid var(--soft-charcoal);
  }
  
  .mobile-nav-item {
    border: 1px solid rgba(138, 155, 135, 0.5);
  }
  
  .nav-trigger-line {
    background-color: var(--soft-charcoal);
  }
}

/* Focus States for Accessibility */
.nav-trigger-button:focus,
.mobile-nav-item:focus,
.mobile-nav-close-btn:focus,
.mobile-nav-social-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--sage-green), 0 0 0 4px rgba(138, 155, 135, 0.3);
}

/* Dark Mode Support (if needed) */
@media (prefers-color-scheme: dark) {
  .mobile-nav-panel {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    color: var(--ivory);
  }
  
  .mobile-nav-item {
    color: var(--ivory);
  }
  
  .mobile-nav-item:hover {
    color: var(--sage-green-light);
  }
  
  .nav-trigger-line {
    background-color: var(--ivory);
  }
}