/* Performance optimizations */
      :where([class^="ri-"])::before { content: "\f3c2"; }

      /* Image optimization */
      img {
          image-rendering: -webkit-optimize-contrast;
          image-rendering: crisp-edges;
      }

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

      /* Focus styles for accessibility */
      a:focus, button:focus, input:focus, select:focus, textarea:focus {
          outline: 2px solid #FAB445;
          outline-offset: 2px;
      }

      /* High contrast mode support */
      @media (prefers-contrast: high) {
          .text-gray-600 { color: #374151 !important; }
          .text-gray-400 { color: #4B5563 !important; }
          .bg-gray-50 { background-color: #F9FAFB !important; }
      }

      /* Reduced motion support */
      @media (prefers-reduced-motion: reduce) {
          *, *::before, *::after {
              animation-duration: 0.01ms !important;
              animation-iteration-count: 1 !important;
              transition-duration: 0.01ms !important;
          }
      }

      /* Responsive Design Fixes for Laptop and Medium Screens */
      /* Medium screens (tablets and small laptops) */
      @media screen and (min-width: 769px) and (max-width: 1024px) {
          /* Header adjustments */
          header .max-w-4xl {
              max-width: 95%;
              margin-left: auto;
              margin-right: auto;
          }
          
          /* Navigation spacing */
          nav.items-center.space-x-8 {
              gap: 1.5rem;
          }
          
          /* Hero section adjustments */
          .relative.h-\[500px\].md\:h-\[600px\] {
              height: 500px;
          }
          
          .relative.h-\[500px\].md\:h-\[600px\] .max-w-2xl {
              max-width: 90%;
          }
          
          .relative.h-\[500px\].md\:h-\[600px\] h1 {
              font-size: 2.5rem;
              line-height: 1.2;
          }
          
          .relative.h-\[500px\].md\:h-\[600px\] p {
              font-size: 1rem;
              line-height: 1.5;
          }
          
          /* Carousel content positioning for medium screens */
          .carousel .list .item .content {
              width: 90%;
              max-width: 600px;
              left: 5%;
              transform: none;
              padding-right: 0;
              top: 15%;
          }
          
          .carousel .list .item .title,
          .carousel .list .item .topic {
              font-size: 3.5rem;
              line-height: 1.2;
          }
          
          .carousel .list .item .des {
              font-size: 1rem;
              line-height: 1.4;
          }
          
          /* Thumbnail positioning for medium screens */
          .thumbnail {
              right: 30px;
              bottom: 30px;
              gap: 15px;
          }
          
          .thumbnail .item {
              width: 130px;
              height: 190px;
          }
          
          /* Arrows positioning for medium screens */
          .arrows {
              left: 30px;
          }
          
          /* Grid adjustments for medium screens */
          .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
              grid-template-columns: repeat(2, 1fr);
              gap: 1.5rem;
          }
          
          .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
              grid-template-columns: repeat(2, 1fr);
              gap: 1.5rem;
          }
          
          /* Container adjustments */
          .container.mx-auto.px-4 {
              padding-left: 1.5rem;
              padding-right: 1.5rem;
          }
          
          .container.mx-auto.px-4.max-w-6xl {
              max-width: 95%;
          }
      }

      /* Small laptop screens (13-15 inch) */
      @media screen and (min-width: 1025px) and (max-width: 1366px) {
          /* Header adjustments */
          header .max-w-4xl {
              max-width: 90%;
          }
          
          /* Carousel content positioning for small laptops */
          .carousel .list .item .content {
              width: 85%;
              max-width: 800px;
              left: 7.5%;
              transform: none;
              padding-right: 0;
              top: 20%;
          }
          
          .carousel .list .item .title,
          .carousel .list .item .topic {
              font-size: 4rem;
              line-height: 1.3;
          }
          
          .carousel .list .item .des {
              font-size: 1.1rem;
              line-height: 1.5;
          }
          
          /* Thumbnail positioning for small laptops */
          .thumbnail {
              right: 50px;
              bottom: 40px;
          }
          
          .thumbnail .item {
              width: 140px;
              height: 200px;
          }
          
          /* Arrows positioning for small laptops */
          .arrows {
              left: 40px;
          }
          
          /* Grid adjustments for small laptops */
          .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
              gap: 2rem;
          }
          
          .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
              gap: 2rem;
          }
          
          /* Container adjustments */
          .container.mx-auto.px-4.max-w-6xl {
              max-width: 90%;
          }
      }

      /* Medium laptop screens (15-17 inch) */
      @media screen and (min-width: 1367px) and (max-width: 1600px) {
          /* Carousel content positioning for medium laptops */
          .carousel .list .item .content {
              width: 80%;
              max-width: 900px;
              left: 10%;
              transform: none;
              padding-right: 0;
              top: 20%;
          }
          
          .carousel .list .item .title,
          .carousel .list .item .topic {
              font-size: 4.5rem;
              line-height: 1.3;
          }
          
          .carousel .list .item .des {
              font-size: 1.2rem;
              line-height: 1.5;
          }
          
          /* Thumbnail positioning for medium laptops */
          .thumbnail {
              right: 80px;
              bottom: 50px;
          }
          
          .thumbnail .item {
              width: 150px;
              height: 220px;
          }
          
          /* Arrows positioning for medium laptops */
          .arrows {
              left: 60px;
          }
      }

      /* Large screens (17+ inch) - preserve existing design */
      @media screen and (min-width: 1601px) {
          .carousel .list .item .content {
              width: 1140px;
              max-width: 80%;
              left: 50%;
              transform: translateX(-50%);
              padding-right: 30%;
          }
      }

      /* Additional responsive fixes for content sections */
      @media screen and (max-width: 1200px) {
          /* Ensure content doesn't overflow on medium screens */
          .max-w-2xl {
              max-width: 100%;
          }
          
          .max-w-3xl {
              max-width: 100%;
          }
          
          /* Adjust button spacing on medium screens */
          .flex.flex-col.sm\:flex-row.gap-4 {
              gap: 1rem;
          }
          
          /* Adjust section padding for medium screens */
          .py-16 {
              padding-top: 3rem;
              padding-bottom: 3rem;
          }
          
          .py-10 {
              padding-top: 2.5rem;
              padding-bottom: 2.5rem;
          }
      }

      /* Fix for overlapping content on medium screens */
      @media screen and (min-width: 769px) and (max-width: 1400px) {
          /* Ensure proper spacing between sections */
          section {
              position: relative;
              z-index: 1;
          }
          
          /* Fix carousel section height */
          .relative.h-screen.bg-black.overflow-hidden {
              height: 100vh;
              min-height: 600px;
          }
          
          /* Ensure thumbnails don't overlap with content */
          .thumbnail {
              z-index: 10;
          }
          
          /* Ensure arrows don't overlap with content */
          .arrows {
              z-index: 10;
          }
          
          /* Fix content positioning to prevent overlap */
          .carousel .list .item .content {
              z-index: 5;
          }
      }

      /* Fix for navigation on medium screens */
      @media screen and (min-width: 769px) and (max-width: 1200px) {
          /* Adjust navigation spacing */
          nav.hidden.md\:flex.items-center.space-x-8 {
              gap: 1.5rem;
          }
          
          /* Ensure header doesn't overlap content */
          header {
              z-index: 50;
          }
          
          /* Adjust header padding for medium screens */
          header .px-6 {
              padding-left: 1.5rem;
              padding-right: 1.5rem;
          }
      }

      /* Ensure proper text sizing on all screen sizes */
      @media screen and (min-width: 769px) {
          /* Responsive text sizing */
          .text-4xl.md\:text-5xl {
              font-size: clamp(2.5rem, 4vw, 3rem);
          }
          
          .text-lg.md\:text-xl {
              font-size: clamp(1rem, 2vw, 1.125rem);
          }
          
          .text-3xl {
              font-size: clamp(2rem, 3vw, 1.875rem);
          }
          
          .text-2xl {
              font-size: clamp(1.5rem, 2.5vw, 1.5rem);
          }
      }

      /* Fix for content cards on medium screens */
      @media screen and (min-width: 769px) and (max-width: 1400px) {
          /* Ensure proper spacing between content cards */
          .grid.gap-8 {
              gap: 1.5rem;
          }
          
          .grid.gap-6 {
              gap: 1.25rem;
          }
          
          /* Adjust card padding for medium screens */
          .p-6 {
              padding: 1.25rem;
          }
          
          /* Ensure proper image sizing */
          .h-48 {
              height: 10rem;
          }
      }

      /* Fix for overlapping elements in carousel */
      @media screen and (min-width: 769px) and (max-width: 1400px) {
          .carousel .list .item {
              position: relative;
          }
          
          .carousel .list .item img {
              width: 100%;
              height: 100%;
              object-fit: cover;
          }
          
          /* Ensure content is properly positioned */
          .carousel .list .item .content {
              position: absolute;
              top: 20%;
              left: 5%;
              width: 90%;
              max-width: 600px;
              transform: none;
              padding-right: 0;
          }
      }

      /* Additional responsive utilities */
      @media screen and (min-width: 769px) and (max-width: 1400px) {
          /* Responsive margins */
          .mb-12 {
              margin-bottom: 2.5rem;
          }
          
          .mb-8 {
              margin-bottom: 2rem;
          }
          
          .mb-6 {
              margin-bottom: 1.5rem;
          }
          
          .mb-4 {
              margin-bottom: 1rem;
          }
          
          /* Responsive padding */
          .px-4 {
              padding-left: 1.5rem;
              padding-right: 1.5rem;
          }
          
          /* Ensure proper container sizing */
          .container {
              width: 100%;
              max-width: 95%;
              margin-left: auto;
              margin-right: auto;
          }
      }

      /* Header and Navigation Responsive Fixes */
      @media screen and (min-width: 769px) and (max-width: 1400px) {
          /* Header container adjustments */
          header .mx-auto.mt-6.w-full.max-w-4xl {
              margin-top: 1rem;
              margin-left: auto;
              margin-right: auto;
          }
          
          /* Logo sizing for medium screens */
          header .h-8.md\:h-10 {
              height: 2rem;
          }
          
          /* Navigation link spacing */
          header nav a {
              font-size: 0.9rem;
              padding: 0.5rem 0.75rem;
          }
          
          /* Book Now button adjustments */
          header .bg-primary.text-white.px-4.py-2 {
              padding: 0.5rem 1rem;
              font-size: 0.9rem;
          }
          
          /* Ensure header doesn't interfere with content */
          header {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              z-index: 50;
          }
          
          /* Add some top margin to main content to account for fixed header */
          body {
              padding-top: 0;
          }
          
          /* Hero section adjustments for header */
          .relative.h-\[500px\].md\:h-\[600px\] {
              margin-top: 0;
              padding-top: 0;
          }
      }

      /* Specific fixes for MacBook Pro and similar screens */
      @media screen and (min-width: 1024px) and (max-width: 1280px) {
          /* Adjust header width for MacBook Pro screens */
          header .max-w-4xl {
              max-width: 92%;
          }
          
          /* Carousel content positioning for MacBook Pro */
          .carousel .list .item .content {
              width: 88%;
              max-width: 700px;
              left: 6%;
              top: 18%;
          }
          
          .carousel .list .item .title,
          .carousel .list .item .topic {
              font-size: 3.8rem;
              line-height: 1.25;
          }
          
          .carousel .list .item .des {
              font-size: 1.05rem;
              line-height: 1.45;
          }
          
          /* Thumbnail positioning for MacBook Pro */
          .thumbnail {
              right: 40px;
              bottom: 35px;
          }
          
          .thumbnail .item {
              width: 135px;
              height: 195px;
          }
          
          /* Arrows positioning for MacBook Pro */
          .arrows {
              left: 35px;
          }
          
          /* Grid adjustments for MacBook Pro */
          .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
              gap: 1.75rem;
          }
          
          .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
              gap: 1.75rem;
          }
      }

      /* Ultra-wide screen fixes */
      @media screen and (min-width: 1601px) and (max-width: 1920px) {
          /* Ensure content doesn't stretch too wide on ultra-wide screens */
          .container.mx-auto.px-4.max-w-6xl {
              max-width: 1400px;
          }
          
          .carousel .list .item .content {
              max-width: 1000px;
          }
      }

      /* Laptop Screen Fixes for 150% Scaling (1920x1080) */
      @media screen and (min-width: 1024px) and (max-width: 1366px) and (max-height: 1080px) {
          /* Fix navbar width for laptop screens */
          header .max-w-4xl {
              max-width: 85%;
              margin-left: auto;
              margin-right: auto;
          }
          
          /* Adjust navigation spacing for laptop screens */
          nav.items-center.space-x-8 {
              gap: 1.25rem;
          }
          
          /* Fix carousel content overlapping on laptop screens */
          .carousel .list .item .content {
              width: 80%;
              max-width: 500px;
              left: 8%;
              top: 18%;
              padding-right: 2rem;
          }
          
          .carousel .list .item .title,
          .carousel .list .item .topic {
              font-size: 3.2rem;
              line-height: 1.1;
              margin-bottom: 0.75rem;
          }
          
          .carousel .list .item .des {
              font-size: 0.95rem;
              line-height: 1.4;
              margin-bottom: 1.25rem;
          }
          
          /* Fix thumbnail positioning for laptop screens */
          .carousel .thumbnail {
              right: 25px;
              bottom: 25px;
              gap: 12px;
          }
          
          .carousel .thumbnail .item {
              width: 120px;
              height: 175px;
          }
          
          /* Ensure footer is visible on laptop screens */
          footer {
              margin-top: 2rem;
              position: relative;
              z-index: 10;
          }
          
          /* Fix section spacing for laptop screens */
          section {
              margin-bottom: 2rem;
          }
          
          /* Ensure proper container sizing for laptop screens */
          .container.mx-auto.px-4.max-w-6xl {
              max-width: 88%;
              padding-left: 1.5rem;
              padding-right: 1.5rem;
          }
      }

      /* Additional fixes for laptop screens with high DPI */
      @media screen and (min-width: 1024px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
          /* Further reduce navbar width for high DPI laptop screens */
          header .max-w-4xl {
              max-width: 80%;
          }
          
          /* Adjust carousel content for high DPI */
          .carousel .list .item .content {
              width: 75%;
              max-width: 450px;
              left: 10%;
          }
          
          /* Ensure proper text scaling */
          .carousel .list .item .title,
          .carousel .list .item .topic {
              font-size: 2.8rem;
          }
          
          .carousel .list .item .des {
              font-size: 0.9rem;
          }
      }

      /* Footer visibility fixes for laptop screens */
      @media screen and (min-width: 1024px) and (max-width: 1366px) {
          /* Ensure footer is properly positioned and visible */
          footer.bg-gray-800 {
              position: relative;
              z-index: 10;
              margin-top: 3rem;
              clear: both;
          }
          
          /* Fix any potential overflow issues */
          body {
              overflow-x: hidden;
          }
          
          /* Ensure proper spacing between sections */
          section:last-of-type {
              margin-bottom: 3rem;
          }
          
          /* Fix carousel section height for laptop screens */
          section.relative.h-screen.bg-black.overflow-hidden {
              height: 100vh;
              min-height: 600px;
              max-height: 800px;
          }
      }

      /* Fix for content overflow on medium screens */
      @media screen and (min-width: 769px) and (max-width: 1400px) {
          /* Ensure text doesn't overflow containers */
          .text-ellipsis {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
          }
          
          /* Responsive text wrapping */
          .break-words {
              word-wrap: break-word;
              overflow-wrap: break-word;
          }
          
          /* Ensure proper line heights */
          .leading-relaxed {
              line-height: 1.6;
          }
          
          .leading-normal {
              line-height: 1.5;
          }
          
          /* Fix for button text overflow */
          button {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
          }
      }

      /* Fix for image responsiveness */
      @media screen and (min-width: 769px) and (max-width: 1400px) {
          /* Ensure images scale properly */
          img {
              max-width: 100%;
              height: auto;
          }
          
          /* Fix for tent card images */
          .tent-card img {
              width: 100%;
              height: 100%;
              object-fit: cover;
          }
          
          /* Fix for gallery images */
          .gallery img {
              width: 100%;
              height: auto;
              object-fit: cover;
          }
      }

      /* Fix for spacing consistency across screen sizes */
      @media screen and (min-width: 769px) and (max-width: 1400px) {
          /* Consistent section spacing */
          section + section {
              margin-top: 0;
          }
          
          /* Consistent card spacing */
          .card + .card {
              margin-top: 0;
          }
          
          /* Fix for overlapping margins */
          .mb-8 + .mt-8 {
              margin-top: 2rem;
          }
          
          .mb-6 + .mt-6 {
              margin-top: 1.5rem;
          }
      }

      /* Ensure proper z-index layering */
      @media screen and (min-width: 769px) {
          /* Header z-index */
          header {
              z-index: 50;
          }
          
          /* Carousel elements z-index */
          .carousel .list .item {
              z-index: 1;
          }
          
          .carousel .list .item:first-child {
              z-index: 10;
          }
          
          .carousel .thumbnail {
              z-index: 20;
          }
          
          .carousel .arrows {
              z-index: 20;
          }
          
          /* Content z-index */
          .carousel .list .item .content {
              z-index: 5;
          }
          
          /* Modal and popup z-index */
          .modal, .popup, [id*="popup"] {
              z-index: 1000;
          }
      }

      /* Final Carousel Responsive Fixes */
      @media screen and (min-width: 769px) and (max-width: 1400px) {
          /* Ensure carousel container is properly sized */
          .carousel {
              height: 100vh;
              min-height: 600px;
              max-height: 800px;
              overflow: hidden;
              position: relative;
          }
          
          /* Fix carousel item positioning */
          .carousel .list .item {
              width: 100%;
              height: 100%;
              position: absolute;
              inset: 0;
              z-index: 1;
          }
          
          /* Ensure carousel images cover properly */
          .carousel .list .item img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
          }
          
          /* Fix content positioning for all screen sizes */
          .carousel .list .item .content {
              position: absolute;
              top: 20%;
              left: 5%;
              width: 90%;
              max-width: 600px;
              transform: none;
              padding-right: 0;
              box-sizing: border-box;
              color: #fff;
              text-shadow: 0 5px 10px #0004;
              z-index: 5;
          }
          
          /* Responsive text sizing for carousel */
          .carousel .list .item .author {
              font-size: 1rem;
              letter-spacing: 0.5rem;
              margin-bottom: 1rem;
              font-weight: bold;
          }
          
          .carousel .list .item .title,
          .carousel .list .item .topic {
              font-size: clamp(2.5rem, 6vw, 4rem);
              font-weight: bold;
              line-height: 1.2;
              margin-bottom: 1rem;
          }
          
          .carousel .list .item .des {
              font-size: clamp(0.9rem, 2vw, 1.1rem);
              line-height: 1.5;
              margin-bottom: 1.5rem;
              max-width: 100%;
          }
          
          /* Fix thumbnail positioning */
          .carousel .thumbnail {
              position: absolute;
              bottom: 30px;
              right: 30px;
              width: max-content;
              z-index: 20;
              display: flex;
              gap: 15px;
          }
          
          .carousel .thumbnail .item {
              width: 130px;
              height: 190px;
              flex-shrink: 0;
              position: relative;
              cursor: pointer;
              transition: transform 0.3s ease;
              touch-action: manipulation;
          }
          
          .carousel .thumbnail .item img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 20px;
          }
          
          .carousel .thumbnail .item .content {
              color: #fff;
              position: absolute;
              bottom: 10px;
              left: 10px;
              right: 10px;
              z-index: 1;
          }
          
          .carousel .thumbnail .item .content .title {
              font-weight: 500;
              font-size: 0.9rem;
          }
          
          .carousel .thumbnail .item .content .description {
              font-weight: 300;
              font-size: 0.8rem;
          }
          
          /* Fix arrows positioning */
          .carousel .arrows {
              position: absolute;
              top: 50%;
              left: 30px;
              z-index: 20;
              width: auto;
              display: flex;
              gap: 10px;
              align-items: center;
              transform: translateY(-50%);
          }
          
          .carousel .arrows button {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              background-color: #eee4;
              border: none;
              color: #fff;
              font-family: monospace;
              font-weight: bold;
              transition: .5s;
              cursor: pointer;
          }
          
          .carousel .arrows button:hover {
              background-color: #fff;
              color: #000;
              transform: scale(1.1);
          }
          
          /* Fix time bar positioning */
          .carousel .time {
              position: absolute;
              z-index: 2000;
              width: 0%;
              height: 3px;
              background-color: #f1683a;
              left: 0;
              top: 0;
          }
      }

      /* Specific fixes for different laptop screen sizes */
      @media screen and (min-width: 769px) and (max-width: 1024px) {
          .carousel .list .item .content {
              top: 15%;
              left: 3%;
              width: 94%;
              max-width: 550px;
          }
          
          .carousel .thumbnail {
              right: 20px;
              bottom: 20px;
              gap: 12px;
          }
          
          .carousel .thumbnail .item {
              width: 120px;
              height: 170px;
          }
          
          .carousel .arrows {
              left: 20px;
          }
      }

      @media screen and (min-width: 1025px) and (max-width: 1366px) {
          .carousel .list .item .content {
              top: 18%;
              left: 4%;
              width: 92%;
              max-width: 650px;
          }
          
          .carousel .thumbnail {
              right: 35px;
              bottom: 35px;
              gap: 15px;
          }
          
          .carousel .thumbnail .item {
              width: 135px;
              height: 195px;
          }
          
          .carousel .arrows {
              left: 35px;
          }
      }

      @media screen and (min-width: 1367px) and (max-width: 1600px) {
          .carousel .list .item .content {
              top: 20%;
              left: 5%;
              width: 90%;
              max-width: 750px;
          }
          
          .carousel .thumbnail {
              right: 50px;
              bottom: 40px;
              gap: 18px;
          }
          
          .carousel .thumbnail .item {
              width: 145px;
              height: 210px;
          }
          
          .carousel .arrows {
              left: 45px;
          }
      }

      /* Ensure smooth transitions on all screen sizes */
      @media screen and (min-width: 769px) {
          .carousel .list .item .content,
          .carousel .thumbnail .item,
          .carousel .arrows button {
              transition: all 0.3s ease;
          }
          
          /* Smooth hover effects */
          .carousel .thumbnail .item:hover {
              transform: scale(1.05);
          }
          
          .carousel .arrows button:hover {
              transform: scale(1.1);
          }
      }

      /* Fix for content readability on all screen sizes */
      @media screen and (min-width: 769px) and (max-width: 1400px) {
          .carousel .list .item .content {
              /* Ensure text is readable */
              text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);
              
              /* Add subtle background for better readability */
              background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
              padding: 2rem;
              border-radius: 15px;
              backdrop-filter: blur(5px);
          }
          
          /* Ensure buttons are properly sized */
          .carousel .list .item .buttons {
              display: grid;
              grid-template-columns: repeat(2, 120px);
              grid-template-rows: 40px;
              gap: 10px;
              margin-top: 20px;
          }
          
          .carousel .list .item .buttons button {
              border: none;
              background-color: #eee;
              letter-spacing: 2px;
              font-family: Poppins;
              font-weight: 500;
              cursor: pointer;
              transition: all 0.3s ease;
              font-size: 0.9rem;
          }
      }

      .calendar-day {
          width: 40px;
          height: 40px;
      }

      .calendar-day.available {
          background-color: rgba(16, 185, 129, 0.1);
          color: #10b981;
      }

      .calendar-day.booked,
      .calendar-day.bg-red-100 {
          background-color: #fecaca !important; /* Tailwind's red-200 for more visibility */
          color: #b91c1c !important; /* Tailwind's red-800 for strong text */
          border: 2px solid #ef4444 !important; /* Tailwind's red-500 border */
      }

      .calendar-day:hover:not(.disabled) {
          background-color: rgba(59, 130, 246, 0.1);
          color: #3b82f6;
      }

      .tent-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }

      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
      }

      .custom-checkbox {
          position: relative;
          padding-left: 30px;
          cursor: pointer;
      }

      .custom-checkbox input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
      }

      .checkmark {
          position: absolute;
          top: 0;
          left: 0;
          height: 20px;
          width: 20px;
          background-color: #fff;
          border: 2px solid #e5e7eb;
          border-radius: 4px;
      }

      .custom-checkbox:hover input ~ .checkmark {
          border-color: #3b82f6;
      }

      .custom-checkbox input:checked ~ .checkmark {
          background-color: #3b82f6;
          border-color: #3b82f6;
      }

      .checkmark:after {
          content: "";
          position: absolute;
          display: none;
      }

      .custom-checkbox input:checked ~ .checkmark:after {
          display: block;
      }

      .custom-checkbox .checkmark:after {
          left: 6px;
          top: 2px;
          width: 6px;
          height: 12px;
          border: solid white;
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
      }

      .switch {
          position: relative;
          display: inline-block;
          width: 48px;
          height: 24px;
      }

      .switch input {
          opacity: 0;
          width: 0;
          height: 0;
      }

      .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #e5e7eb;
          transition: .4s;
          border-radius: 24px;
      }

      .slider:before {
          position: absolute;
          content: "";
          height: 18px;
          width: 18px;
          left: 3px;
          bottom: 3px;
          background-color: white;
          transition: .4s;
          border-radius: 50%;
      }

      input:checked + .slider {
          background-color: #3b82f6;
      }

      input:checked + .slider:before {
          transform: translateX(24px);
      }

      @media (max-width: 768px) {
          .calendar-day {
              width: 35px;
              height: 35px;
              font-size: 0.875rem;
          }
      }

      /* Tent Selection Styles */
      .tent-option {
          transition: all 0.2s ease-in-out;
      }

      .tent-option:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      }

      /* Available tent styling (green) */
      .tent-option.border-green-200.bg-green-50 {
          border-color: #bbf7d0;
          background-color: #f0fdf4;
      }

      .tent-option.border-green-200.bg-green-50:hover {
          border-color: #4ade80;
          background-color: #ecfdf5;
      }

      /* Selected tent styling (blue) - should override green */
      .tent-option.border-primary.bg-blue-50 {
          border-color: #3b82f6 !important;
          background-color: #eff6ff !important;
          box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
      }

      .tent-option.border-primary.bg-blue-50:hover {
          border-color: #2563eb !important;
          background-color: #dbeafe !important;
      }

      /* Unavailable tent styling (red) */
      .tent-option-unavailable {
          opacity: 0.6;
          cursor: not-allowed;
      }

      .tent-option-unavailable:hover {
          transform: none;
          box-shadow: none;
      }

      /* Animation for tent selection */
      .tent-option.border-primary.bg-blue-50 {
          animation: tentSelected 0.3s ease-in-out;
      }

      @keyframes tentSelected {
          0% {
              transform: scale(1);
          }
          50% {
              transform: scale(1.02);
          }
          100% {
              transform: scale(1);
          }
      }

      /* Multiple Tent Selection Styles */
      .tent-checkbox {
          accent-color: #3b82f6;
      }

      .tent-checkbox:checked {
          background-color: #3b82f6;
          border-color: #3b82f6;
      }

      .selected-tents-summary {
          background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          padding: 12px;
      }

      .selected-tents-list > div {
          background: white;
          border: 1px solid #e2e8f0;
          border-radius: 6px;
          transition: all 0.2s ease;
      }

      .selected-tents-list > div:hover {
          border-color: #3b82f6;
          box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
      }

      /* Guest count indicator */
      .guest-count-info {
          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
          border: 1px solid #f59e0b;
          border-radius: 6px;
          padding: 8px 12px;
          margin-top: 8px;
      }

      .guest-count-info p {
          margin: 2px 0;
          font-size: 0.875rem;
          color: #92400e;
      }

      /* Extra bed popup styling */
      #extra-bed-popup {
          z-index: 9999 !important;
          backdrop-filter: blur(4px);
      }

      #extra-bed-popup .bg-white {
          animation: slideIn 0.3s ease-out;
      }

      @keyframes slideIn {
          from {
              opacity: 0;
              transform: translateY(-20px) scale(0.95);
          }
          to {
              opacity: 1;
              transform: translateY(0) scale(1);
          }
      }

      /* Error popup modal - ensure it's above everything */
      #error-popup {
          z-index: 99999 !important;
          animation: fadeIn 0.3s ease-out;
      }

      #error-popup > div {
          animation: slideInUp 0.3s ease-out;
          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      }

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

      @keyframes slideInUp {
          from {
              opacity: 0;
              transform: translateY(20px) scale(0.95);
          }
          to {
              opacity: 1;
              transform: translateY(0) scale(1);
          }
      }

      /* Error popup styling */
      #error-popup .bg-red-100 {
          background-color: #fee2e2;
      }

      #error-popup .text-red-600 {
          color: #dc2626;
      }

      #close-error-popup {
          background-color: #dc2626;
          transition: background-color 0.2s ease;
          min-width: 80px;
      }

      #close-error-popup:hover {
          background-color: #b91c1c;
      }

      /* Ensure popup is always on top */
      #error-popup {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
      }

      .tent-card {
        position: relative;
        overflow: visible;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .tent-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        z-index: 10;
      }
      .tent-card .h-48 {
        overflow: visible;
        position: relative;
        height: 12rem; /* 48 * 0.25rem = 12rem */
      }
      .tent-card img {
        width: 100%;
        height: 12rem;
        object-fit: cover;
        transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: block;
        position: relative;
        z-index: 1;
      }
      .tent-card:hover .h-48 img {
        height: 20rem;
        z-index: 20;
      }
      .loader {
        border: 6px solid #f3f3f3;
        border-top: 6px solid #FAB445;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        0% { transform: rotate(0deg);}
        100% { transform: rotate(360deg);}
      }

      /* Route card hover effects */
      .route-card {
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }
      
      .route-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
      }
      
      .route-card:hover::before {
        left: 100%;
      }
      
      .route-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
      }
      
      .route-card:active {
        transform: translateY(-2px) scale(1.01);
      }

      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
            .animate-fade-in-up {
        animation: fadeInUp 0.6s ease-out;
      }

      /* Carousel Styles */
      .carousel {
        height: 100vh;
        width: 100%;
        overflow: hidden;
        position: relative;
        margin: 0;
        padding: 0;
      }
      
      .carousel .list .item {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0 0 0 0;
        z-index: 1;
      }
      
      .carousel .list .item:first-child {
        z-index: 10;
      }
      
      .carousel .list .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
             .carousel .list .item .content {
         position: absolute;
         top: 20%;
         width: 1140px;
         max-width: 80%;
         left: 50%;
         transform: translateX(-50%);
         padding-right: 30%;
         box-sizing: border-box;
         color: #fff;
         text-shadow: 0 5px 10px #0004;
         transition: all 0.3s ease;
       }
      
      .carousel .list .item .author {
        font-weight: bold;
        letter-spacing: 10px;
      }
      
      .carousel .list .item .title,
      .carousel .list .item .topic {
        font-size: 5em;
        font-weight: bold;
        line-height: 1.3em;
      }
      
      .carousel .list .item .topic {
        color: #f1683a;
      }
      
      .carousel .list .item .buttons {
        display: grid;
        grid-template-columns: repeat(2, 130px);
        grid-template-rows: 40px;
        gap: 5px;
        margin-top: 20px;
      }
      
      .carousel .list .item .buttons button {
        border: none;
        background-color: #eee;
        letter-spacing: 3px;
        font-family: Poppins;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
      }
      
      .carousel .list .item .buttons button:nth-child(2) {
        background-color: transparent;
        border: 1px solid #fff;
        color: #eee;
      }
      
      .carousel .list .item .buttons button:hover {
        background-color: #fff;
        color: #000;
      }
      
             /* Thumbnail */
       .thumbnail {
         position: absolute;
         bottom: 50px;
         right: 120px;
         width: max-content;
         z-index: 1000;
         display: flex;
         gap: 20px;
       }
      
             .thumbnail .item {
         width: 150px;
         height: 220px;
         flex-shrink: 0;
         position: relative;
         cursor: pointer;
         transition: transform 0.3s ease;
         touch-action: manipulation;
       }
      
      .thumbnail .item:hover {
        transform: scale(1.05);
      }
      
      .thumbnail .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
      }
      
      .thumbnail .item .content {
        color: #fff;
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
      }
      
      .thumbnail .item .content .title {
        font-weight: 500;
      }
      
      .thumbnail .item .content .description {
        font-weight: 300;
      }
      
             /* Arrows */
       .arrows {
         position: absolute;
         top: 50%;
         left: 20px;
         z-index: 1000;
         width: auto;
         display: flex;
         gap: 10px;
         align-items: center;
         transform: translateY(-50%);
       }
      
      .arrows button {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #eee4;
        border: none;
        color: #fff;
        font-family: monospace;
        font-weight: bold;
        transition: .5s;
        cursor: pointer;
      }
      
      .arrows button:hover {
        background-color: #fff;
        color: #000;
        transform: scale(1.1);
      }
      
      /* Animation */
      .carousel .list .item:nth-child(1) .content .author,
      .carousel .list .item:nth-child(1) .content .title,
      .carousel .list .item:nth-child(1) .content .topic,
      .carousel .list .item:nth-child(1) .content .des,
      .carousel .list .item:nth-child(1) .content .buttons {
        transform: translateY(50px);
        filter: blur(20px);
        opacity: 0;
        animation: showContent .5s 1s linear 1 forwards;
      }
      
      @keyframes showContent {
        to {
          transform: translateY(0px);
          filter: blur(0px);
          opacity: 1;
        }
      }
      
      .carousel .list .item:nth-child(1) .content .title {
        animation-delay: 1.2s !important;
      }
      
      .carousel .list .item:nth-child(1) .content .topic {
        animation-delay: 1.4s !important;
      }
      
      .carousel .list .item:nth-child(1) .content .des {
        animation-delay: 1.6s !important;
      }
      
      .carousel .list .item:nth-child(1) .content .buttons {
        animation-delay: 1.8s !important;
      }
      
      .carousel.next .list .item:nth-child(1) img {
        width: 150px;
        height: 220px;
        position: absolute;
        bottom: 50px;
        left: 50%;
        border-radius: 30px;
        animation: showImage .5s linear 1 forwards;
      }
      
      @keyframes showImage {
        to {
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 0;
        }
      }
      
      .carousel.next .thumbnail .item:nth-last-child(1) {
        overflow: hidden;
        animation: showThumbnail .5s linear 1 forwards;
      }
      
      @keyframes showThumbnail {
        from {
          width: 0;
          opacity: 0;
        }
      }
      
      .carousel.next .thumbnail {
        animation: effectNext .5s linear 1 forwards;
      }
      
      @keyframes effectNext {
        from {
          transform: translateX(150px);
        }
      }
      
       .carousel .time {
         position: absolute;
         z-index: 2000;
         width: 0%;
         height: 3px;
         background-color: #f1683a;
         left: 0;
         top: 0;
       }
      
      .carousel.next .time,
      .carousel.prev .time {
        animation: runningTime 3s linear 1 forwards;
      }
      
      @keyframes runningTime {
        from { width: 100% }
        to { width: 0 }
      }
      
      .carousel.prev .list .item:nth-child(2) {
        z-index: 2;
      }
      
      .carousel.prev .list .item:nth-child(2) img {
        animation: outFrame 0.5s linear 1 forwards;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      
      @keyframes outFrame {
        to {
          width: 150px;
          height: 220px;
          bottom: 50px;
          left: 50%;
          border-radius: 20px;
        }
      }
      
      .carousel.prev .thumbnail .item:nth-child(1) {
        overflow: hidden;
        opacity: 0;
        animation: showThumbnail .5s linear 1 forwards;
      }
      
      .carousel.next .arrows button,
      .carousel.prev .arrows button {
        pointer-events: none;
      }
      
      .carousel.prev .list .item:nth-child(2) .content .author,
      .carousel.prev .list .item:nth-child(2) .content .title,
      .carousel.prev .list .item:nth-child(2) .content .topic,
      .carousel.prev .list .item:nth-child(2) .content .des,
      .carousel.prev .list .item:nth-child(2) .content .buttons {
        animation: contentOut 1.5s linear 1 forwards !important;
      }
      
      @keyframes contentOut {
        to {
          transform: translateY(-150px);
          filter: blur(20px);
          opacity: 0;
        }
      }
      
       @media screen and (max-width: 768px) {
         .carousel .list .item .content {
           padding-right: 0;
           left: 20px;
           transform: none;
           width: calc(100% - 40px);
           max-width: none;
           top: 15%;
         }
         
         .carousel .list .item .author {
           font-size: 14px;
           letter-spacing: 5px;
           margin-bottom: 10px;
         }
         
         .carousel .list .item .title {
           font-size: 2.5rem !important;
           line-height: 1.1;
           margin-bottom: 10px;
         }
         
         .carousel .list .item .topic {
           font-size: 2.5rem !important;
           line-height: 1.1;
           margin-bottom: 15px;
         }
         
         .carousel .list .item .des {
           font-size: 16px;
           line-height: 1.4;
           margin-bottom: 20px;
         }
         
         .thumbnail {
           right: 20px;
           bottom: 20px;
           gap: 15px;
         }
         
         .thumbnail .item {
           width: 120px;
           height: 180px;
         }
         
         .thumbnail .item .content .title {
           font-size: 14px;
         }
         
         .thumbnail .item .content .description {
           font-size: 12px;
         }
         
         .arrows {
           left: 15px;
           top: 50%;
         }
         
         .arrows button {
           width: 35px;
           height: 35px;
           font-size: 14px;
         }
       }
       
       @media screen and (max-width: 480px) {
         .carousel .list .item .content {
           top: 10%;
           left: 15px;
           width: calc(100% - 30px);
         }
         
         .carousel .list .item .author {
           font-size: 12px;
           letter-spacing: 3px;
           margin-bottom: 8px;
         }
         
         .carousel .list .item .title {
           font-size: 2rem !important;
           line-height: 1.1;
           margin-bottom: 8px;
         }
         
         .carousel .list .item .topic {
           font-size: 2rem !important;
           line-height: 1.1;
           margin-bottom: 12px;
         }
         
         .carousel .list .item .des {
           font-size: 14px;
           line-height: 1.3;
           margin-bottom: 15px;
         }
         
         .thumbnail {
           right: 15px;
           bottom: 15px;
           gap: 12px;
         }
         
         .thumbnail .item {
           width: 100px;
           height: 150px;
         }
         
         .thumbnail .item .content .title {
           font-size: 12px;
         }
         
         .thumbnail .item .content .description {
           font-size: 10px;
         }
         
         .arrows {
           left: 10px;
         }
         
         .arrows button {
           width: 30px;
           height: 30px;
           font-size: 12px;
         }
       }
       
       @media screen and (max-width: 768px) {
         .carousel .list .item .content .author,
         .carousel .list .item .content .title,
         .carousel .list .item .content .topic,
         .carousel .list .item .content .des {
           animation: none !important;
           opacity: 1 !important;
           transform: none !important;
           filter: none !important;
         }
         
         .carousel .list .item .content .title {
           animation-delay: 0s !important;
         }
         
         .carousel .list .item .content .topic {
           animation-delay: 0s !important;
         }
         
         .carousel .list .item .content .des {
           animation-delay: 0s !important;
         }
       }
       
       @media (hover: none) and (pointer: coarse) {
         .carousel {
           -webkit-overflow-scrolling: touch;
         }
         
         .thumbnail .item:hover {
           transform: none;
         }
         
         .arrows button:hover {
           transform: none;
         }
       }
       
       .bottom-navigation,
       nav[class*="bottom"],
       footer nav,
       .mobile-nav {
         z-index: 9999 !important;
         position: relative;
       }
       
       .carousel {
         z-index: 1;
       }
       
       .carousel .list .item {
         z-index: 1;
       }
       
       .carousel .list .item:first-child {
         z-index: 10;
       }

.testimonial-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(241, 245, 249, 0.8);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0.5rem 0;
}

#testimonial-carousel-viewport {
  padding: 0.5rem 0;
  margin: 0.5rem 0;
}

.testimonial-card {
  transform-origin: center center;
  will-change: transform;
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FAB445, #F59E0B);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.testimonial-card:hover::before {
  transform: scaleX(1);
}

.testimonial-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: rgba(241, 245, 249, 1);
}

.testimonial-card .line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#testimonial-row {
  will-change: transform;
  padding: 0.25rem 0;
}

/* Enhanced navigation buttons */
#testimonial-prev,
#testimonial-next {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(241, 245, 249, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 20;
}

#testimonial-prev:hover,
#testimonial-next:hover {
  background: #FAB445;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 10px 25px -5px rgba(250, 180, 69, 0.4);
}


.testimonial-stats {
  background: linear-gradient(135deg, rgba(250, 180, 69, 0.05) 0%, rgba(245, 158, 11, 0.05) 100%);
  border-radius: 16px;
  padding: 2rem;
  margin-top: 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .testimonial-card {
    min-height: 240px;
    padding: 1rem;
    margin: 0.5rem 0;
    max-width: 300px;
    width: 100%;
    transform: scale(0.9);
  }
  
  #testimonial-carousel-viewport {
    padding: 0 4rem;
  }
  
  .testimonial-card h3,
  .testimonial-card h4 {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .testimonial-card p {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .testimonial-card .text-yellow-400 {
    font-size: 0.875rem !important;
  }
  
  .testimonial-card img {
    width: 3rem !important;
    height: 3rem !important;
  }
  
  #testimonial-prev,
  #testimonial-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0.5rem !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(241, 245, 249, 0.8) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    z-index: 20 !important;
  }
  
  #testimonial-prev {
    left: 1rem !important;
  }
  
  #testimonial-next {
    right: 1rem !important;
  }
  
  #testimonial-prev i,
  #testimonial-next i {
    font-size: 1rem !important;
  }
  
  .md\\:hidden.fixed.bottom-0,
  div[class*="md:hidden fixed bottom-0"],
  .bottom-navigation,
  nav[class*="bottom"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  .fixed.bottom-6.right-6.z-50 a,
  div[class*="fixed bottom-6 right-6 z-50"] a {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
    transform: scale(0.9) !important;
  }
  
  .fixed.bottom-6.right-6.z-50 i,
  div[class*="fixed bottom-6 right-6 z-50"] i {
    font-size: 1rem !important;
  }
  
  .flex.justify-center.items-center.relative[style*="min-height: 320px"] {
    min-height: 250px !important;
  }
  
  [class*="md:hidden"][class*="fixed"][class*="bottom-0"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
  }
  
  [class*="fixed"][class*="bottom-6"][class*="right-6"][class*="z-50"] a {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
    transform: scale(0.9) !important;
  }
  
  [class*="fixed"][class*="bottom-6"][class*="right-6"][class*="z-50"] i {
    font-size: 1rem !important;
  }
}

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

.testimonial-card {
  animation: fadeInUp 0.6s ease-out;
}

.testimonial-card:nth-child(1) { animation-delay: 0.1s; }
.testimonial-card:nth-child(2) { animation-delay: 0.2s; }
.testimonial-card:nth-child(3) { animation-delay: 0.3s; }

.testimonial-card svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.testimonial-card .text-yellow-400 {
  filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.3));
}

.testimonial-card img {
  transition: transform 0.3s ease;
}

.testimonial-card:hover img {
  transform: scale(1.05);
}

/* Responsive spacing for different screen sizes */
@media screen and (max-width: 768px) {
  section + section {
    margin-top: 2rem !important;
  }
  
  .bg-white.py-8 + .bg-gray-50.py-12 {
    margin-top: 2rem !important;
  }
  
  .bg-white.py-8 {
    margin-bottom: 1rem !important;
    padding-bottom: 2rem !important;
  }
  
  .bg-gray-50.py-12 {
    margin-top: 1rem !important;
    padding-top: 3rem !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  section + section {
    margin-top: 1.5rem !important;
  }
  
  .bg-white.py-8 + .bg-gray-50.py-12 {
    margin-top: 1.5rem !important;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1365px) {
  section + section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .bg-white.py-8 + .bg-gray-50.py-12 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .bg-white.py-8 {
    margin-bottom: 0 !important;
  }
  
  .bg-gray-50.py-12 {
    margin-top: 0 !important;
  }
  
  body {
    overflow-x: hidden;
  }
}