@font-face {
  font-family: interstate-bold;
  src: url(interstate-bold.woff);
}

@font-face {
  font-family: interstate-light;
  src: url(interstate-light.woff);
}

@font-face {
  font-family: interstate-thin;
  src: url(interstate-thin.woff);
}

@font-face {
  font-family: interstate-regular;
  src: url(interstate-regular.woff);
}


html {
  scroll-padding-top: 70px; /* Adjust based on your navbar height */
}


body {
  font-family: interstate-light, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
.hero-image {
  background: url("../img/GPP_header_photo.jpg") center/cover no-repeat;
  background-color: #001689;
  height: 300px;
  display: flex;
  align-items: center;
  /* padding: 20px; */
}
.hero-image h1 {
  font-family: interstate-bold,"Helvetica Neue",Helvetica,Arial,sans-serif;
  color: #ffffff;
  font-size: 4.2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  /* margin-left: 40px; */
  margin-top: 30px;
}

h3 {
  font-size: 1.5rem;
}


.navbar {
  background-color: #ffffff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* soft downward shadow */
}

.gradient-line {
      height: 10px; /* Thickness of the line */
      width: 50%;  /* Full width or adjust as needed */
      background: linear-gradient(to right, white, transparent);
    }


.hero-image h1 span {
  font-family: interstate-thin,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 6rem;
  letter-spacing: 7px;
}

h2 {
  font-family: interstate-light,"Helvetica Neue",Helvetica,Arial,sans-serif;
  color: #001689;
  padding-bottom: 20px;
}

.accordion-button {
  font-weight: bold;
  font-size: 1.2rem;
  background-color: #f2f2f2;
  border-radius: 10px !important;
}

.accordion-button:not(.collapsed) {
  background-color: #ffffff;
}

.accordion-item {
  background-color: #f2f2f2;
  margin-bottom: 10px;
  border-radius: 10px !important;
  border:0px;
}

.nav-item a {
  color: #001689;
}

.bg-primary {
  background-color: #00178a !important;
}

.bg-light {
  background-color: #f3f3f3 !important;
}

.accordion-button:focus {
  outline: 3px solid #005ea2;
}
footer {
  background-color: #001689;
  color: #ffffff;
  padding: 30px 0;
}
footer a {
  color: #ffffff;
  text-decoration: underline;
}
a:focus,
button:focus {
  outline: 2px dashed #005ea2;
  outline-offset: 2px;
}

ul.menu--social {
    height: 30px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    display: table;
    margin-bottom: 20px;
}

.figure {
    max-width: 90% !important;
    height: auto;
}


ul.menu--social li a {
    color: white;
    width: 30px;
    height: 30px;
    text-align: left;
    text-indent: -99999px;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: center center;
    padding: 0;
    display: table;
}

ul.menu--social li {
  margin-left: 10px;
  float: left;
  position: relative;
  display: block;
}

a.icon-fb {
  background-image: url(https://www.sdge.com/themes/custom/sdge/images/topnav/icon-fb.png);
}
a.icon-ig {
  background-image: url(https://www.sdge.com/themes/custom/sdge/images/topnav/icon-ig.png);
}
a.icon-li {
  background-image: url(https://www.sdge.com/themes/custom/sdge/images/topnav/icon-li.png);
}
a.icon-yt {
  background-image: url(https://www.sdge.com/themes/custom/sdge/images/topnav/icon-yt.png);
}
a.icon-x {
  background-image: url(https://www.sdge.com/themes/custom/sdge/images/topnav/icon-x@2x.png);
}

.animate__animated.animate__fadeInLeft {
  --animate-duration: 0.6s;
}

@media (max-width: 635px) {
  .hero-image h1 {
    font-size: 2rem;
    margin-left: 0px;
  }
  .hero-image h1 span {
    font-size: 1.4em;
  }
  html {
  scroll-padding-top: 280px; /* Adjust based on your navbar height */
}
}