/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

 .heroBanner {
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: #004277!important;
}

.heroBannerImg {
  padding: 1rem 0;
  text-align: left;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, 
  #004277 20%,
    #1172B0 60%,
    #8DC8E8 70%,
    #FFB3BB 80%,
    #FFB900 90%,
    #FFE399 100%
    /* Add more color stops or adjust percentages as needed */
  );

}

.heroAzure {
  padding: 8rem 0;
  text-align: left;
  position: relative;
  overflow: hidden;
  background-color: #004277 !important;
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
}

.featureImg {
  width: 100%;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: left;
}

.buttonsFFIA {
  display: flex;
  align-items: left!important;
  justify-content: left!important;
}

.features {
  display: flex;
  align-items: center;
  padding: 2rem 0;
  width: 100%;
}

/* Fills icon */
.featureSvg {
  height: 150px;
  width: 150px;
  /* fill: skyblue; /* #ffb900 #9747ff*/
}

.pageBg {
  background: linear-gradient(
    to bottom right,
    #e3f3ff,
    #f9f7ff,
    #f9fcfe
  );
}

[data-theme='dark'] .pageBg {
  background: linear-gradient(
    to bottom right,
    #152338,
    #1D2F4D,
    #253C61
  );
}

@media screen and (max-width: 996px) {
  .heroBanner {
    padding: 2rem;
  }

  .heroBannerImg {
    padding: 2rem 0;
    text-align: center;
    background-color: #004277 !important;
    background: #004277 !important;
  }

  .buttonsFFIA {
    display: flex;
    align-items: center!important;
    justify-content: left!important;
  }
}
