/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/components/molecules/banner/style.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/app/newsroom/style.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
.bg-wrapper {
  background: url(/_next/static/media/bg-pattern.0c317edf.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 56%;
  background-color: #00264e;
}

@media screen and (max-width: 1536px) {
  .bg-wrapper {
    background-size: 60%;
  }
}

@media screen and (max-width: 1024px) {
  .bg-wrapper {
    background-size: 100%;
  }
}

.form-container {
  box-shadow: 0px 0px 15px 0px rgba(32, 103, 202, 0.3);
}

.active-category {
  text-decoration: underline;
  /* Underline for active tab */
}

.inactive-category {
  text-decoration: none;
  /* No underline for inactive tabs */
}

.category-button {
  /* font-family: 'Work Sans', sans-serif; */
  font-size: 20px;
  font-weight: 600;
  line-height: 23.46px;
  letter-spacing: -0.02em;
  text-align: center;
  border: none;
  /* Remove button borders */
  background: none;
  /* Remove button background */
  cursor: pointer;
  /* Add pointer on hover */
}

.active-category {
  text-decoration: underline;
  /* Underline for active tab */
  text-underline-offset: 15px;
  /* Add space between text and underline */
}

.inactive-category {
  text-decoration: none;
  /* No underline for inactive tabs */
}

.imgCard img {
  height: 100%;
}

/* Default button styles
.category-button {
  padding: 0.5rem 1rem;
  white-space: nowrap;
} */

/* Media query for tablets and smaller screens */
@media (max-width: 768px) {
 

  .category-button {
    font-size: 0.875rem;
    /* Smaller font size for better fit */
    padding: 0.4rem 0.75rem;
  }

  .active-category {
    text-underline-offset: 2px;
    /* Adjust underline distance on smaller screens */
  }
}

/* Media query for mobile devices */
@media (max-width: 480px) {
 

  .category-button {
    font-size: 0.75rem;
    /* Smaller font size for mobile */
    padding: 0.3rem 0.5rem;
  }
}