:root { 
  /* --ah-primary: #f5a623;  */
  --ah-primary: #fab916; 
  --ah-primary-dark: #d98f11; 
  --ah-primary-red: #E31937; 
  --ah-dark: #1d2129;
  --ah-light-gray: #f8f9fa;
  --ah-text: #343a40;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Roboto', Arial, sans-serif !important;
  color: var(--ah-text);
  background-color: #fff;
}

/* --- Typography --- */
.display-4 { font-weight: 900; }
.lead { font-weight: 400 !important; font-size: 1.15rem !important; }
.section-title {
  font-weight: 700;
  position: relative;
  margin-bottom: 1rem;
  display: inline-block;
  color: var(--ah-dark);
}
.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: hsl(38 92% 50%);
  margin-top: .75rem;
  border-radius: 2px;
}

/* --- Navbar --- */
.navbar { transition: all .3s ease; }
.navbar .navbar-brand { font-weight: 700; font-size: 1.4rem; }
.navbar .brand-accent { color: var(--ah-primary); }
.navbar .nav-link { font-weight: 500; transition: color .2s ease; }
.navbar .nav-link:hover { color: var(--ah-primary); }
.navbar.scrolled { box-shadow: 0 5px 20px rgba(0,0,0,.07) !important; }

/* --- Sections & Cards --- */
.section-alt { background-color: var(--ah-light-gray); }

/* Why Us Section */
.advantage-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 1rem;
  padding: 2rem;
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
  text-align: center;
}
.advantage-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,.08);
}
.advantage-card .icon {
  font-size: 3rem;
  color: var(--ah-primary);
  margin-bottom: 1rem;
  display: block;
}
.advantage-card h5 {
  font-weight: 700;
  color: var(--ah-dark);
}

/* Range Section */
.range-list li {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}
.range-list .bi {
  color: var(--ah-primary);
  font-size: 1.5rem;
  margin-right: 0.75rem;
}
.range-image-wrapper {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.15);
}

/* Category Cards */
.category-card {
  border-radius: .75rem !important;
  border: none !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  background-color: transparent !important;
}
.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
.category-card .card-img {
  transition: transform .3s ease;
}
.category-card:hover .card-img {
  transform: scale(1.05);
}

/* Contact Section */
#contact {
  background: linear-gradient(180deg, #fff 50%, var(--ah-light-gray) 50%);
}
.contact-wrapper {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 15px 40px rgba(0,0,0,.1);
    overflow: hidden;
}
.contact-info {
    background: var(--ah-dark);
    color: #fff;
}
.contact-info h3 { color: #fff; }
.contact-info .text-highlight { color: var(--ah-primary); }
.contact-info p { color: rgba(255,255,255,.8); }
.contact-info a { color: #fff; text-decoration: none; }
.contact-info a:hover { color: var(--ah-primary); }
.contact-info .info-item { display:flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.contact-info .info-item .bi { font-size: 1.5rem; color: var(--ah-primary); }

/* --- Buttons --- */

.page-template-page-yellow-equipment-php .btn {
  font-weight: 500 !important;
  padding: .75rem 1.5rem !important;
  border-radius: .5rem !important;
  transition: all .2s ease !important;
}
.page-template-page-yellow-equipment-php .btn-lg { padding: .9rem 2rem; }
.page-template-page-yellow-equipment-php .btn-primary.btn:not(:disabled):not(.disabled) {
  background: var(--ah-primary) !important;
  border-color: var(--ah-primary) !important;
  color: var(--ah-dark) !important;
  font-weight: 700 !important;
}
.page-template-page-yellow-equipment-php .btn-primary.btn:not(:disabled):not(.disabled):hover, .page-template-page-yellow-equipment-php .btn-primary.btn:not(:disabled):not(.disabled):focus {
  background: var(--ah-primary-dark) !important;
  border-color: var(--ah-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 15px rgba(245,166,35,.25) !important;
}
.btn-outline-light {
    border-width: 2px;
    font-weight: 500;
}
.btn-outline-light:hover {
    background-color: #fff;
    color: var(--ah-dark);
}

/* --- Footer & Back to Top --- */
footer { background-color: var(--ah-dark); }
.back-to-top {
  position: fixed; right: 20px; bottom: 20px;
  width: 44px; height: 44px;
  border-radius: 50%; border: none;
  background: var(--ah-primary); color: var(--ah-dark);
  font-size: 24px; font-weight: 700;
  box-shadow: 0 10px 30px rgba(245,166,35,.45);
  display: none; align-items: center; justify-content: center;
  z-index: 999;
  transition: all .3s ease;
}
.back-to-top:hover { transform: translateY(-3px); box-shadow: 0 14px 35px rgba(245,166,35,.5); }
.back-to-top:focus { outline: none; }

/* Introduction Section Logos */
.brand-logos-box {
  background: #fff;
  padding: 2rem 1.5rem;
  border-radius: .75rem;
  border: 1px solid #e9ecef;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.07);
}
.brand-logos-box h6 {
  font-weight: 500;
  color: var(--ah-text);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: .8rem;
}
.brand-logos-box img {
  /* max-height: 30px; */
  width: auto;
  margin: 0 .75rem;
  opacity: 0.7;
  filter: grayscale(100%);
}
    
.banner-container {
    width: 100%;
    margin: 0 auto;
}

.responsive-picture {
    width: 100%;
    height: auto;
    display: block;
}

/* Add a smooth transition to the textarea for all properties */
#contactMessage {
  transition: all 0.5s ease-in-out;
}

/* This is the class we will add and remove with JavaScript */
#contactMessage.field-highlighted {
  background-color: #fff8e1; /* A light yellow */
  border-color: #fab916;     /* Your theme's primary yellow color */
  box-shadow: 0 0 8px rgba(250, 185, 22, 0.5); /* A soft glow effect */
}