:root {
  --black: black;
  --white: white;
  --green: #1A5F16;
  --gold: #E8A317;
  --bg-body: #020325;
  --bg-blue-transparent: #141668;
  --blue-transparent: #287ea3da;
}

a{
  text-decoration: none;
  
}


body {
  font-family: var(--font-stack-body), sans-serif;
  font-weight: var(--font-weight-body);
  /* Default: 400 */
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-stack-header), sans-serif;
  font-weight: var(--font-weight-header);
  /* Default: 400 */
}

/* Example usage with different weights */
.button {
  font-family: var(--font-stack-body);
  font-weight: 600;
  /* Uses Jost-SemiBold */
}

header a {
  font-family: var(--font-stack-header);
  font-weight: var(--font-weight-body);
}


.bg-hero {
  background: linear-gradient(rgba(0, 0, 0, 0.438), rgba(0, 0, 0, 0.336)), url('../img/a1.jpg') no-repeat center center;
  background-size: cover;
  color: white;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.nav-link {
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: larger;
}

.nav-link:hover {
  color: var(--gold) !important;
  border-bottom: 1px solid var(--black);

}

.btn-gold {
  background-color: var(--gold);
  color: var(--white);
  border: none;
  transition: all .3s ease-in-out;
}

.btn-gold:hover {
  background-color: #d19415;
  color: var(--white);
}

/* PRODUCT*/
.product-image-container:hover .main-img {
  opacity: 0 !important;
}

.product-image-container:hover .alt-img {
  opacity: 1 !important;
  transform: scale(1.2) !important;
  /* 20% zoom */
}

.product-image-container:hover .flash-overlay {
  animation: flash 0.4s ease;
}

@keyframes flash {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}

/* ABOUT PAGE */
.bg-about-hero {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url('../img/a1.jpg') no-repeat center center;
  background-size: cover;
  color: white;
  min-height: 50vh;
  display: flex;
  align-items: center;
}


.feature-icon {
  background-color: rgba(232, 163, 23, 0.1);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.btn-gold {
  background-color: var(--gold);
  color: white;
  border: none;
}

.btn-gold:hover {
  background-color: #d19415;
  color: white;
}

.text-green {
  color: var(--green);
}

.timeline {
  position: relative;
  padding-left: 50px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--gold);
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
}

.timeline-dot {
  position: absolute;
  left: -38px;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--green);
  border: 3px solid var(--gold);
}

.team-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--gold);
}

.values-icon {
  font-size: 2.5rem;
  color: var(--gold);
}

.pattern-bg {
  background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png');
  background-color: rgba(232, 163, 23, 0.05);
}

/*CONTACT*/
.bg-contact-hero {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), 
              url('https://images.unsplash.com/photo-1556740738-b6a63e27c4df?w=1200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8Y29udGFjdHxlbnwwfHwwfHx8MA%3D%3D') no-repeat center center;
  background-size: cover;
  color: white;
  min-height: 40vh;
  display: flex;
  align-items: center;
}

/* ===== REUSABLE SCROLL ANIMATIONS ===== */
/* Base animation class (hidden state) */
/* ===== REUSABLE SCROLL TRANSFORMS ===== */
.scroll-y-top-el, .scroll-y-down-el, .scroll-x-top-el, .scroll-x-down-el{
    transition: transform 2s ease;
}