.custom-section {
    background: var(--Dark-Gray, #161A1B);
    padding: 20px;
    display: flex;
    justify-content: center;
  }

 

  .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px; /* Gap between cards */
    max-width: 1017px; /* Ensures three cards per row */
    width: 100%; /* Ensures responsiveness */
  }

  .fl-card {
    background: #1D2324;
    width: calc(33.33% - 10px); /* Adjusted width to fit 3 cards in a row with gap */
    height: auto;
    padding: 5px; /* Adjusted padding to create a 5px gap around the card */
    align-items: flex-start;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 0px;
    color: #F5F5F5;
    text-align: left;
    box-sizing: border-box; /* Ensures padding is included in width calculation */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
  }

  .fl-card:not(:first-child):hover {
    background-color: #2C3334; /* New color for hover effect */
  }

  .fl-card svg {
    width: 34px;
  }

  .fl-card h1 {
    font-size: 39.81px !important; /* Font size for the first card */
    letter-spacing: -1.791px !important;
    margin-bottom: 0 !important; /* Remove margin bottom for consistency */
  }

  .fl-card h2 {
    font-size: 20px !important;
    letter-spacing: -0.4px !important;
    margin-bottom: 5px ;
  }

  .fl-card p { 
    font-size: 16px !important;
    margin-bottom: 0;
  }


  .fl-card img {
    max-width: 100%; /* Ensure images are responsive */
    height: auto; /* Maintain aspect ratio */
  }


  
/* For screens smaller than 768px (tablets and smartphones) */
@media (max-width: 768px) {
    .fl-card {
        width: calc(50% - 10px); /* Adjusted width for two cards per row */
        padding: 5% 3% !important; /* Adjusted padding for smaller screens */
      }

      .img-mbbt{
        margin-bottom: 10px !important;
      }
    

      .fl-card img {
        max-width: 10% !important; /* Adjusted max-width for smaller devices */
        height: auto; /* Maintain aspect ratio */
      }
    
  
    .fl-card h1 {
      font-size: 5vw !important; /* Font size relative to viewport width */
      letter-spacing: -0.5vw !important; /* Adjusted letter-spacing */
    }
  
    .fl-card h2 {
      font-size: 3vw !important; /* Font size relative to viewport width */
      letter-spacing: -0.1vw !important; /* Adjusted letter-spacing */
    }
  
    .fl-card p { 
      font-size: 2.5vw !important; /* Font size relative to viewport width */
    }
  }
  
  /* For screens smaller than 480px (smartphones) */
  @media (max-width: 480px) {
    .fl-card {
        width: calc(100% - 10px); /* Adjusted width for one card per row */
        padding: 5% 2% !important; /* Adjusted padding for smaller screens */
      }

      .img-mbbt{
        margin-bottom: 10px !important;
      }
    

      .fl-card img {
        max-width: 10% !important; /* Adjusted max-width for smaller devices */
        height: auto; /* Maintain aspect ratio */
      }
  
    .fl-card h1 {
      font-size: 6vw !important; /* Font size relative to viewport width */
      letter-spacing: -0.6vw !important; /* Adjusted letter-spacing */
    }
  
    .fl-card h2 {
      font-size: 4vw !important; /* Font size relative to viewport width */
      letter-spacing: -0.2vw !important; /* Adjusted letter-spacing */
    }
  
    .fl-card p { 
      font-size: 3vw !important; /* Font size relative to viewport width */
    }
  }
  


  .jf-header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F8FFF4;
    padding: 1rem;
  }
  
  .jf-header-content {
    text-align: center;
  }
  
  .jf-header-title {
    font-family: Manrope;
    font-size: 1.5rem !important;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.691px;
    color: var(--Medium-Gray, #292C2F) !important;
    margin-bottom: 1rem;
  }
  
  .jf-header-btn {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
  
  @media (min-width: 768px) {
    .jf-header-content {
      display: flex;
      align-items: center;
    }
  
    .jf-header-title {
      margin-bottom: 0;
      margin-right: 1rem;
    }
  }
  
  @media (max-width: 768px) {
    .jf-header-title {
      font-size: 1.2rem;
    }
  
    .jf-header-btn {
      font-size: 0.9rem;
    }
  }
  
  @media (max-width: 480px) {
    .jf-header-title {
      font-size: 1rem;
    }
  
    .jf-header-btn {
      font-size: 0.8rem;
    }
  }