/* General styles for a modern look */
      body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.6;
        background-color: #f4f7f6; /* Light background */
        color: #333; /* Darker text for readability */
        margin: 0;
        padding: 0;
      }

      .mt-10 {
        margin-top: 2.5rem; /* Equivalent to 10 in Tailwind */
      }

      .text-center {
        text-align: center;
      }

      .btnFilter {
        display: inline-block;
        font-weight: 100; /* Slightly bolder font */
        padding: 0.25rem 0.75rem; /* Adjust padding for better touch targets */
        margin: 0.25rem; /* Adjust vertical margin */
        border-radius: 1.5rem; /* More rounded buttons */
        border: 2px solid transparent; /* Initially transparent border */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Softer shadow */
        color: #000000;
        background-image: linear-gradient(
          to bottom,
          #ceead6,
          #ceead6
        ); /* Lighter blue/teal gradient */
        cursor: pointer;
        -webkit-appearance: button;
        transition:
          background-image 0.1s ease,
          border-color 0.1s ease,
          box-shadow 0.1s ease;
        outline: none; /* Remove default focus outline */
      }

      .btnFilter:hover {
        background-image: linear-gradient(to bottom, #34a853, #34a853); /* Darker hover gradient */
        border-color: #0d652d; /* Border on hover */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Stronger hover shadow */
      }

      .btnFilter.selected {
        border-color: #0d652d; /* Border on hover */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Stronger hover shadow */
      }

      .filter-label {
        display: inline-block; /* Allows labels to sit side-by-side with buttons */
        margin-right: 0.5rem; /* Adds space to the right of the label */
        margin-top: 1px;
        margin-bottom: 1px;
      }

      .md\:my-0 {
        /* Medium breakpoint and above: reset vertical margin */
      }

      .md\:mx-2 {
        /* Medium breakpoint and above: add horizontal margin */
        margin-left: 0.5rem;
        margin-right: 0.5rem;
      }

      #resourcesContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Center items on smaller screens */
        padding: 1rem;
      }

      #resource {
        background-color: #fff; /* White card background */
        border-radius: 0.5rem; /* Rounded corners for cards */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* Subtle card shadow */
        overflow: hidden;
        width: calc(100% - 2rem); /* Adjust width with margin */
        margin: 1rem;
        transition:
          transform 0.2s ease-in-out,
          box-shadow 0.2s ease-in-out;
        display: flex; /* Use flexbox for card content layout */
        flex-direction: column; /* Stack content vertically */
      }

      #resource:hover {
        transform: translateY(-4px); /* Slight lift on hover */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      }

      .rounded-md {
        border-radius: 0.375rem; /* Tailwind default */
      }

      .bg-blue-100 {
        background-color: #d2e3fc; /* Light blue background for header */
      }

      .text-blue-600 {
        color: #4285f4; /* Blue text for header */
      }

      .m-4 {
        margin: 1rem;
      }

      .p-2 {
        padding: 0.5rem;
      }

      .flex-grow {
        flex-grow: 1;
      }

      .flex {
        display: flex;
      }

      .flex-col {
        flex-direction: column;
      }

      .justify-between {
        justify-content: space-between;
      }

      /* Modified Title Styles */
      #resource .card-title {
        font-weight: bold;
        font-size: 0.8rem;
        color: #174ea6; /* Changed color */
        text-decoration: none; /* Remove default underline */
        text-align: center; /* Centered text */
        display: block; /* Make it a block element for centering */
        padding: 0.25rem; /* Add some padding */
      }

      #resource .card-title:hover {
        text-decoration: underline; /* Add underline on hover */
      }

      .card-img-top {
        max-height: 24px;
        margin: 0 auto 10px;
        display: block;
      }

      #description {
        padding: 0 0.25rem 0.25rem; /* Adjusted padding */
        color: #555; /* Slightly lighter description text */
        flex-grow: 1; /* Allow description to take available space */
        font-size: 0.75rem;
      }

      #tagsContainer {
        padding: 0.25rem 0.25rem 0.25rem; /* Adjusted padding */
        display: flex;
        justify-content: center; /* Center tags below description */
        flex-wrap: wrap;
        gap: 0.1rem; /* Reduced gap between tags */
      }

      /* Modified Tag Styles */
      #tagsContainer span {
        display: inline-block;
        background-color: #ceead6; /* Muted teal for tags */
        color: #000; /* Changed font color to black */
        border-radius: 1rem; /* Slightly less rounded */
        padding: 0.1rem 0.1rem 0.1rem; /* Reduced padding */
        font-size: 0.2rem; /* Reduced font size */
        font-weight: 500;
      }

      /* Media query for 6 columns on larger screens */
      @media (min-width: 1200px) {
        #resource {
          width: calc(16.666% - 2rem); /* Approximately 6 columns with margin */
          margin: 0.5rem;
        }

        #resourcesContainer {
          justify-content: flex-start; /* Align items to the start on larger screens */
        }
      }

      /* Add a class to visually indicate selected buttons */
      .btnFilter.selected {
        @apply ring-2 ring-offset-2 ring-teal-400; /* Example: Add a ring */
        /* You can adjust the styling as needed */
      }

      /* Media query for 4 columns on medium-large screens */
      @media (min-width: 992px) and (max-width: 1199px) {
        #resource {
          width: calc(20% - 1rem); /* 4 columns with margin */
          margin: 0.5rem;
        }
        #resourcesContainer {
          justify-content: flex-start;
        }
      }

      /* Media query for 3 columns on medium screens */
      @media (min-width: 768px) and (max-width: 991px) {
        #resource {
          width: calc(33.333% - 2rem); /* 3 columns with margin */
          margin: 0.5rem;
        }
        #resourcesContainer {
          justify-content: flex-start;
        }
      }

      /* Media query for 2 columns on small-medium screens */
      @media (min-width: 576px) and (max-width: 767px) {
        #resource {
          width: calc(50% - 2rem); /* 2 columns with margin */
          margin: 0.5rem;
        }
      }