/* Color Variables based on Mockup */
:root {
    --primary-blue: #0056b3;
    --zip-yellow: #FFC107; 
    --zip-yellow-hover: #e0a800;
    --light-bg: #f8f9fa;
}

body {
    background-image: none;
}

/* Navbar Tweaks */
.navbar {
    background-color: #1c2e3f;
    margin-bottom: 0;
}
.navbar-brand img {
    max-height: 65px; 
}

/* Button Overrides */
.btn-warning {
    background-color: var(--zip-yellow);
    border-color: var(--zip-yellow);
    color: #212529;
}
.btn-warning:hover {
    background-color: var(--zip-yellow-hover);
    border-color: var(--zip-yellow-hover);
}

/* Hero Section */
.hero-section {
    position: relative;
    /* You will place the generated hero image here */
    background: url('../img/hero-truck-sunset.png') no-repeat center center; 
    background-size: cover;
    min-height: 600px;
    color: white;
}

/* Dark Gradient Overlay for Hero Text Readability */
.hero-section .overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
    z-index: 0;
}
.hero-tag-2 {
    color: #e6af4a;
    font-size:2.5rem;
}

.z-1 {
    z-index: 1;
}

/* Features */
.feature-icon img {
    transition: transform 0.3s ease;
}
.feature-icon:hover img {
    transform: translateY(-5px);
}

/* Testimonials Section Background */
.bg-warning-light {
    background-color: #FFF8E1; /* Light yellow/orange tint */
}

/* Step Numbers */
.step-process-img {
  height: 250px; 
}

footer {
  background-color: #1c2e3f;
}

/* Responsive Styles */
@media (max-width: 992px) {
  .hero-section h1 {
    font-size: 3rem;
  }
}
@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 2.5rem;
  }
}

@media (max-width: 576px) {
  .navbar-brand img {
      max-height: 45px;
  }
  .hero-section h2 {
    font-size: 2rem;
  }
}