/*Gov AI Page Styles */
#gov-ai-page{
  margin-top: 10em;
  position: relative;
}

@media screen and (max-width: 850px) {
  #gov-ai-page{
      margin-top: 12em;
  }
}

.ai-item-header{
  font-size: 1.3rem !important;
}

#gov-content-container h2{
  font-size: 1.9rem !important;
}

#gov-content-container {
margin:auto;
}

#gov-ai-bg{
  width: 100%;
  height: 100%;
  background-image: url("/media/home/homeAIBanner.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #f0b41095;
  position: absolute;
  opacity: 0.08;
}

.gov-ai-header{
  background-color: #4a0082cc;
  color: #f0b310 !important;
  margin: 0 auto;
  width: 100%;
  padding:1em 0;
  text-align: center;
  border-radius: 0.5em;
  margin-top: 2em;
  margin-bottom: 1.7em;
  position: relative;
}

.gov-ai-header-bg{
background-image: url(/media/home/homeAIBanner.jpg);
background-position-x: center;
background-position-y: 30em;
background-size: cover;
width: 100%;
height: 100%;
border-radius: 0.5em;
top: 0;
position: absolute;
z-index: -1;
}

.gov-ai-header h2{
  color: #f0b310 !important;
}

.seperator {
  height:5px;
  border-width:0;
  color:rgba(9,40,97,0.25);
  background-color:rgba(9,40,97,0.25);
}


/* Anniversary Banner */
.gov-ai-banner {
  font-size: 1vw;
  position: relative;
  margin: 0;
  width: 100%;
  height: 33vw;
  margin-bottom: 1em;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

#gov-ai-overview {
  margin-top: 2em;
  padding-top: 2em;
  border-top: 1px solid #46166b;
  font-size: 1em;
}

@media screen and (min-width: 1920px) {
      .gov-ai-banner {
          /* scale:0.8; */
          max-width: 1949px;
          max-height: 700px;
          font-size: 1.3em;
          margin: auto;
      }
      #gov-content-container {
        max-width: 1400px;
      }
  }


#ai-banner-purp-square {
  rotate: 45deg;
  width: 87em;
  height: 87em;
  position: absolute;
  left: -46em;
  top: -24em;
  border-radius: 1.5em;
  background-color: #46166b;
}

#ai-banner-yellow-square {
  rotate: 45deg;
  width: 87em;
  height: 87em;
  position: absolute;
  left: -50em;
  top: -33em;
  border-radius: 1.5em;
  background-color: #f0b310;
}

#ai-banner-title {
  left: 0.7em;
  top: 2.1em;
  font-size: 4.5em;
  color: #f0b310;
  position: absolute;
  z-index: 3;
}

#ai-banner-logos-container {
  position: absolute;
  top: 18.5em;
  left: 1.8em;
  display: flex;
  flex-direction: column;
  z-index: 3;
  align-items: left;
  justify-content: center;
}

#ai-logo-text {
  font-size: 1.5em;
  color: #ffffff;
  font-weight: bold;
  padding-top: 0.8em;
  line-height: 1em;
}

.ai-banner-logo {
  width: 46em;
  height: fit-content;
}

.background-image {
  opacity: 0.1;
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-image: url("/media/home/homeAIBanner.jpg");
}

.anniversary-image {
  position: absolute;
  top: 0;
  bottom: 35%;
  width: 80%;
  height: auto;
  margin: auto;
}

#ai-banner-content {
  font-family: Arial, sans-serif;
  color: #200030;
  position: absolute;
  margin: auto;
  font-size: 1.4em;
  width: 40%;
  font-weight: bold;
  top: 4em;
  text-align: center;
  right: 1.5em;
  z-index: 4;
}

#ai-banner-buttons {
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1em;
  font-family: Arial, sans-serif;
  color: #200030;
  position: absolute;
  margin: auto;
  width: 37em;
  font-weight: bold;
  bottom: 1em;
  right: 2em;
  z-index: 4;
}

.ai-banner-button {
  font-size: 1.1em;
  padding: 0.5em 1.5em;
  color: #f0b310;
  background-color: #46166b;
  /* color: #46166b;
    background-color: #f0b310; */
  border-radius: 0.5em;
  margin-bottom: 1em;
  /* turn off a tag highlights */
  text-decoration: none;

}

.ai-banner-button:hover {
  color: #46166b;
  text-decoration: none;
  background-color: #f0b310;
}

.category-header{
  font-size: 1.7rem;
  font-weight: bolder;
  margin-bottom: 0.5em;
}

.ai-section{
  scroll-margin-top: 9em;
}

@media only screen and (max-width: 700px) {
#ai-banner-buttons{
display: none;
}
#ai-banner-content{
top:9em;
}

}