
    /* Custom styles for Swiper navigation buttons */
    .swiper-button-next, .swiper-button-prev {
      color: white; /* Ensure navigation arrows are visible on dark backgrounds */
    }

    /* Basic styling for grid cells in the Welcome section */
    .welcome-cell {
      background-color: white; /* White background for cells */
      padding: 0 0 1.5rem; /* No top/left/right padding, only bottom */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
      border-radius: 0.5rem; /* Rounded corners for a modern look */
      transition: transform 0.2s ease-in-out; /* Smooth transition for hover effects */
      cursor: pointer; /* Indicate interactivity */
      display: flex; /* Use flexbox for vertical alignment of content */
      flex-direction: column; /* Stack content vertically */
      justify-content: flex-start; /* Align content to the top */
      min-height: 120px; /* Ensure a minimum height for consistent look */
      overflow: hidden; /* Important for images to go to edges */
    }

    .welcome-cell:hover {
      transform: translateY(-5px); /* Lift effect on hover */
    }

    .welcome-cell h4 {
      font-weight: bold; /* Bold titles for cells */
      margin-top: 1rem; /* Space below icon, adjusted from 0.5rem */
      margin-bottom: 0.5rem; /* Space below title */
      color: #333; /* Darker color for headings */
      padding-left: 1.5rem;   /* Medium left padding */
      padding-right: 1.5rem;  /* Medium right padding */
    }

    .welcome-cell p {
      font-size: 0.9rem; /* Slightly smaller text for descriptions */
      color: #555; /* Medium gray for body text */
      line-height: 1.4; /* Improved readability */
      flex-grow: 1; /* Allow paragraph to take up available space */
      margin-bottom: 0.5rem; /* Reduced space under paragraph */
      padding-left: 1.5rem;   /* Medium left padding */
      padding-right: 1.5rem;  /* Medium right padding */
    }

    .welcome-cell a { /* Changed from small to a for clickable link */
      color: #ef4444; /* Red color for 'Read more' */
      font-weight: 600; /* Semi-bold for 'Read more' */
      margin-top: 0.5rem; /* Adjusted space above 'Read more' */
      display: block; /* Ensure 'Read more' is on its own line */
      text-decoration: none; /* Remove underline by default */
    }
    .welcome-cell a:hover {
        text-decoration: underline; /* Add underline on hover */
    }

    /* Styling for the right column cells */
    .right-column-cell {
      background-color: #e5e7eb; /* Lighter background for distinction */
      padding: 1.5rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      border-radius: 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center; /* Center content vertically */
      text-align: center; /* Center text horizontally */
      min-height: 100px; /* Consistent height for cells */
    }

    .right-column-cell h4 {
      font-weight: bold;
      margin-bottom: 0.5rem;
      color: #1f2937; /* Darker gray for headings */
    }

    .right-column-cell p {
      font-size: 0.875rem; /* Small font size for descriptions */
      color: #4b5563; /* Dark gray for text */
    }

    /* Styles for the new interactive tabs/accordion */
    .tab-button.active {
      background-color: #ef4444; /* Red for active tab button */
      color: white; /* White text for active tab button */
    }

    /* Mobile: Stack buttons vertically */
    .tab-buttons-container {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem; /* Reduced gap for stacking */
      justify-content: center; /* Center on mobile */
    }

    @media (max-width: 767px) { /* Adjust breakpoint as needed for mobile */
      .tab-buttons-container {
        flex-direction: column; /* Stack buttons vertically */
        align-items: stretch; /* Make buttons fill width */
      }
      .tab-button {
        width: 100%; /* Full width for stacked buttons */
      }
    }


    .tab-content {
      border: 1px solid #e2e8f0; /* Light gray border for content */
      border-top: none; /* No top border to blend with tabs */
      border-radius: 0 0 0.5rem 0.5rem; /* Rounded corners only at bottom */
      overflow: hidden; /* Hide overflowing content during collapse */
      transition: all 0.3s ease-in-out; /* Smooth transition for height */
      max-height: 0; /* Hidden by default for collapsible */
      opacity: 0; /* Also hide opacity for smooth fade */
      visibility: hidden; /* Hide from screen readers when collapsed */
    }

    .tab-content.active {
      max-height: 500px; /* Max height to allow expansion (adjust as needed) */
      opacity: 1; /* Make visible */
      visibility: visible; /* Make visible to screen readers */
      padding: 1.5rem; /* Add padding when active */
    }

    .collapse-header {
      background-color: #f3f4f6; /* Lighter background for collapsible header */
      padding: 1rem 1.5rem; /* Padding for header */
      cursor: pointer; /* Indicate it's clickable */
      display: flex; /* Flex for content and arrow */
      justify-content: space-between; /* Space between title and arrow */
      align-items: center; /* Center vertically */
      border-bottom: 1px solid #e2e8f0; /* Separator from content */
      border-radius: 0.5rem; /* Rounded corners */
      margin-top: 0.5rem; /* Space between accordion items */
    }

    .collapse-header.active {
      border-radius: 0.5rem 0.5rem 0 0; /* Rounded top, flat bottom when active */
    }

    .collapse-content {
      background-color: white; /* White background for collapsible content */
      overflow: hidden;
      transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
      max-height: 0; /* Collapsed by default */
      padding: 0 1.5rem; /* No padding when collapsed */
    }

    .collapse-content.active {
      max-height: 200px; /* Max height for content expansion */
      padding: 1rem 1.5rem; /* Padding when active */
    }

    .arrow {
      transition: transform 0.3s ease-in-out; /* Smooth arrow rotation */
    }

    .arrow.rotate {
      transform: rotate(90deg); /* Rotate arrow when active */
    }

    /* Custom style for icon in welcome cell */
    .welcome-icon {
        width: 100%; /* Fill the top of the cell horizontally */
        height: 120px; /* Fixed height for consistent look */
        object-fit: cover; /* Ensure the image covers the area, cropping if necessary */
        object-position: center; /* Center the image within its box */
        border-radius: 0.5rem 0.5rem 0 0; /* Apply rounded corners only to the top */
        margin-bottom: 0; /* No space below icon as text has its own top margin */
    }

    /* Styles for the "Top Six Products" carousel within a cell */
    .products-swiper-container {
        width: 100%;
        height: 150px; /* Set a fixed height for the carousel */
        margin-top: 1rem; /* Space above the carousel */
    }
    .products-swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #d1d5db; /* Placeholder background */
        color: #4b5563;
        font-size: 0.9rem;
        border-radius: 0.25rem;
    }
