/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/stories-of-impact/style.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
.category-nav {
  position: relative;
  padding-bottom: 10px;
  gap: 1.5rem;
  /* opacity: .6; */
}

.category-link {
  font-family: 'Work Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 21.11px;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
  position: relative;
  padding-bottom: 10px;
  transition: color 0.3s ease;
  opacity: 1;
  color: #0070f3ad;

}

.category-link.active-tab {
  font-weight: bold;
  color: #0070f3;
}

/* .underline {
    position: absolute;
    bottom: 15px;
    height: 2px;
    background-color: #0070f3;
    transition: all .6s ease-in-out;
} */

/* .card {
  width: 372.65px;
  height: 372.65px;
  gap: '0px';
} */

.btnStyle {
  width: '175px';
  height: '48px';
  top: '1352px';
  left: '702px';
  gap: '0px';

}

/* style.css */

/* Ensure buttons are flexible */

/* Responsive adjustments */
@media (max-width: 768px) {
  .category-nav {
    padding: 0 1rem;
    /* flex-wrap: wrap; */
  }

  .category-nav a {
    font-size: 0.875rem;
    /* Smaller font size on smaller screens */
    padding: 0.25rem 0.5rem;
  }

}

@media (max-width: 480px) {
  .category-nav {
    padding: 0 0.5rem;
    flex-direction: column;
    /* Stack the categories vertically */
    align-items: center;
  }

  .category-nav a {
    font-size: 0.75rem;
    /* Even smaller font size for mobile */
    padding: 0.5rem 0;
  }

 

  .card {
    width: 346.65px;
  }
}

.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 only screen and (max-width: 1024px) and (min-width: 786px) {
  .story-photos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@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: .8rem;
  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;
  }
}