body {
      font-family: 'Arvo', sans-serif;
      background-color: #012319;
      font-style: italic;
      /* Dark green background */
    }

    /* Custom styles for the card hover effect */
    .card-item .caption-stats,
    .card-item .caption-description {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.55s ease, opacity 0.55s ease, margin 0.55s ease, padding 0.55s ease;
    }

    .card-item:hover .caption-stats,
    .card-item:hover .caption-description {
      opacity: 1;
      visibility: visible;
    }

    .card-item:hover .caption-stats {
      max-height: 5rem;
      /* Adjust as needed */
      margin-top: 0.25rem;
      margin-bottom: 0.25rem;
    }

    .card-item:hover .caption-description {
      max-height: 10rem;
      /* Adjust as needed */
      margin-top: 0.5rem;
      padding-bottom: 1rem;
    }

    .swiper-button-next,
    .swiper-button-prev {
      color: #ffde9e !important;
      /* Light yellow for slider arrows */
    }

    .swiper-pagination-bullet-active {
      background: #ffde9e !important;
    }

    .card-item .overlay-bg {
      transition: background-color 0.65s ease, opacity 0.65s ease;
    }

    .card-item:hover .overlay-bg {
      background-color: rgba(1, 35, 25, 0.6);
      /* Slightly transparent dark green/black */
      opacity: 1;
    }

    .card-item .arrow-icon {
      transition: all 0.35s ease-in-out;
      opacity: 0;
    }

    .card-item:hover .arrow-icon {
      opacity: 1;
      border-color: #ffde9e;
      /* Light yellow border on hover */
    }

    .font-pt-serif {
      font-family: 'PT Serif', serif;
    }

    /* Ensure cards in slider don't overstretch if container is too wide for their aspect ratio */
    .swiper-slide .card-item {
      width: 100%;
      /* Card will fill the slide's allocated width */
    }

    /* Toggle Switch Styles */
    #toggleViewBtn {
      /* background-color: #4A5568; /* gray-600 */
      /* Adjusted to match user image more closely if needed */
      background-color: #374151;
      /* Equivalent to Tailwind's gray-700, closer to image */
    }

    #thumbIcon {
      filter: brightness(0.3);
      /* Dark icon on white thumb */
    }

    #gridIconTrack,
    #sliderIconTrack {
      filter: invert(80%) sepia(10%) saturate(200%) hue-rotate(320deg) brightness(100%) contrast(85%);
      /* Light gray/off-white icon on dark track */
      /* Adjust the filter above to get the desired light color for track icons */
    }
.container {
            margin-left: auto;
            margin-right: auto;
            max-width: 72rem !important;
            padding-left: 1rem;
            padding-right: 1rem;
            width: 100%
        }


        @media(min-width: 640px) {
            .container {
                padding-left: 1rem;
                padding-right: 1rem
            }
        }

        .marquee img {
            width: 100%;
            height: auto;
            aspect-ratio: 3/4;
            -o-object-fit: cover;
            object-fit: cover;
        }

        .marquee::-webkit-scrollbar {
            width: 0;
            height: 0;
        }