:root {
  --warm-yellow: rgb(255, 187, 0);
}

.container-hero {
  position: relative;
  width: 100%;
  background-image: url("../images/giga-fitness-bg.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.container-hero-subscribe {
  position: relative;
  width: 100%;
  background-image: url("../images/bbg-black_no_stripe.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.giga-hero {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.navbar-light .navbar-nav .nav-link {
  color: white;
}

.container-hero h1,
.container-hero h2,
.container-hero h3,
.container-hero h4,
.container-hero small,
.container-hero p {
  color: white;
}

p,
a {
  font-family: "Nunito", sans-serif;
}

h1,
h2,
h3,
h4 {
  font-family: "Ubuntu Mono" !important;
}

.h1-bold {
  font-family: "Ubuntu Mono";
  font-weight: 1000;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}

.navbar-light .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.253);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.bg-yellow {
  background-color: var(--warm-yellow);
}

.bg-white-to-yellow {
  background: linear-gradient(to right, white 20%, var(--warm-yellow) 20%);
}

.bg-black-yellow-stripe {
  background: linear-gradient(
    140deg,
    rgb(27, 27, 27) 50%,
    var(--warm-yellow) 50%,
    var(--warm-yellow) 90%,
    rgb(27, 27, 27) 90%
  );
}

.mega {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 700;
  font-style: italic;
  font-size: 5vw;
}

@media (min-width: 320px) {
  .mega {
    font-size: 4rem;
  }
}

@media (min-width: 576px) {
  .mega {
    font-size: 6.5rem;
  }
}

@media (min-width: 768px) {
  .mega {
    font-size: 5rem;
  }
}

@media (min-width: 992px) {
  .mega {
    font-size: 7rem;
  }
}

@media (min-width: 1200px) {
  .mega {
    font-size: 8rem;
  }
}

.mini-mega {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 700;
  font-style: italic;
  font-size: 2.5vw;
}

.text-yellow {
  color: var(--warm-yellow) !important;
}

@media (min-width: 320px) {
  .mini-mega {
    font-size: 2.75rem;
  }
}

@media (min-width: 576px) {
  .mini-mega {
    font-size: 3rem;
  }
}

@media (min-width: 768px) {
  .mini-mega {
    font-size: 3rem;
  }
}

@media (min-width: 992px) {
  .mini-mega {
    font-size: 3.75rem;
  }
}

@media (min-width: 1200px) {
  .mini-mega {
    font-size: 4rem;
  }
}
@keyframes brightness-animation {
  0% {
    filter: brightness(100%);
  }
  50% {
    filter: brightness(150%);
  }
  100% {
    filter: brightness(100%);
  }
}

.image-container img {
  animation: brightness-animation 3s infinite;
}

.med-slant-trap {
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}

.gallery-inactive {
  color: rgba(0, 0, 0, 0.29);
}

.octagon-clip {
  clip-path: polygon(
    20% 0,
    80% 0%,
    100% 20%,
    100% 80%,
    80% 100%,
    20% 100%,
    0% 80%,
    0% 20%
  );
}

.bg-dark-stripe {
  background: linear-gradient(
    -30deg,
    rgb(15, 15, 15) 40%,
    rgb(20, 20, 20) 40%,
    rgb(20, 20, 20) 60%,
    rgb(15, 15, 15) 60%
  );
}

.bg-yellow-stripe {
  background: linear-gradient(
    -30deg,
    var(--warm-yellow) 40%,
    white 40%,
    white 60%,
    var(--warm-yellow) 60%
  );
}

.yellowButton {
  background-color: var(--warm-yellow);
  border: 1px solid #241d13;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  padding: 13px 23px;
  text-decoration: none;
}
.yellowButton:hover {
  background-color: #bda238;
}
.yellowButton:active {
  position: relative;
  top: 1px;
}

#galleryImg {
  aspect-ratio: 1/ 1; /* Example aspect ratio */
  object-fit: cover; /* Ensure the image covers the entire area */
}

.subscription-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid var(--warm-yellow);
}

.subscription-card h1,
h2,
h3,
h4,
h5 {
  font-family: "Ubuntu Mono";
}