/* General Styles */
body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #333;
}

.semitrans {
    border-radius: 10px;
    background-color:rgba(0, 0, 0, 0.4);
}

.greentext {
    color:#037249;
}

.ambertext {
    color:#bdc824;
}

.redtext {
    color:#AA0404;
}

* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #222222;
  text-align: center;
  
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #c00;
  color: white;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

.topnav a {
    vertical-align: bottom;
    padding-right: 16px;
}

.topnav span a {
    vertical-align: bottom;
    padding: 14px 16px;
}

.topnav span {
    float: right;
}

table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    text-align: left;
    padding: 8px;
  }

  .propwarning table th, td {
    text-align: center;
    padding: 0px;
  }
  
  /* tr:nth-child(even) {background-color: #f2f2f2;} */

.container {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Header & Footer */
header {
    background-color: #f4f4f4;
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #ddd; /* Header bottom border */
    top: 0;
    z-index: 1000;
    position: sticky;
}

footer {
    background-color: #f4f4f4;
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #ddd; /* Header bottom border */
}

header h2 {
    margin: 0 0 1rem 0;
    color: #cc0000; /* Cummins Red */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline-block;
    margin: 0 10px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    padding: 5px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

nav ul li a:hover,
nav ul li a.active /* Add class for active page later if needed */
{
    color: #cc0000;
    border-bottom-color: #cc0000;
}

footer {
    margin-top: 3rem;
    padding: 1.5rem 1rem;
    border-top: 1px solid #ddd;
    font-size: 0.9rem;
    color: #666;
}

footer p {
    margin: 0.5rem 0;
}

footer a {
    color: #555;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Buttons */
.cta-button {
    background-color: #cc0000;
    color: white !important; /* Ensure text is white */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom:5px;
}

.cta-button:hover {
    background-color: #a30000;
    color: white;
    text-decoration: none;
}

.cta-button2 {
    background-color: #660000;
    color: white !important; /* Ensure text is white */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom:5px;
}

.cta-button2:hover {
    background-color: #a30000;
    color: white;
    text-decoration: none;
}

/* Page Headers */
.page-header {
    text-align: center;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1.5rem;
}

.page-header h1 {
    color: #cc0000;
    margin-bottom: 0.5rem;
}

.page-header p {
    color: #555;
    font-size: 1.1rem;
}

/* Content Sections */
.content-section {
    margin-bottom: 2.5rem;
}

.content-section h2 {
    color: #cc0000;
    margin-bottom: 1rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
}

.content-section h3 {
    color: #333;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}

.propwarning {
    width:60%; 
    margin:auto; 
    font-size:smaller;
}

/* --- Index Page Specific --- */
.hero {
    /* Image path relative to CSS file location */
    /* background-image: url("images/cummins_recon_engine_hero.webp"); */
    background-image: url("images/feature_edit.png");
    background-size: cover;
    background-position: right;
    color: white;
    /* color: red; */
    text-align: center;
    padding: 5rem 1rem;
    margin-bottom: 3rem;
}

.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px #000;
    /* text-shadow: 2px 2px 4px #fff; */
}

.hero h2 {
    font-size: 2.0rem;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px #000;
    /* text-shadow: 2px 2px 4px #fff; */
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 3px #000;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.benefits-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    text-align: center;
    margin-bottom: 3rem;
}

.benefit-item {
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.benefit-item h3 {
    margin-top: 0;
    color: #333;
}

.featured-engines {
    text-align: center;
    margin-bottom: 3rem;
}

.featured-engines h2 {
    color: #cc0000;
    margin-bottom: 2rem;
}

.engine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.centeredgrid {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.engine-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.engine-card img {
    max-width: 100%;
    height: 150px; /* Fixed height */
    object-fit: contain; /* Scale image while preserving aspect ratio */
    margin-bottom: 1rem;
}

.engine-card h4 {
    color: #cc0000;
    margin-bottom: 0.5rem;
}

.engine-card p {
    font-size: 0.9rem;
    color: #555;
    margin: 0.3rem 0;
    flex-grow: 1; /* Push button to bottom */
}

.engine-card .cta-button {
    margin-top: 1rem;
}

.why-choose-us {
    background-color: #e9e9e9;
    padding: 2.5rem 1.5rem;
    text-align: center;
    margin-bottom: 3rem;
    border-radius: 8px;
}

.why-choose-us h2 {
    border-bottom: none;
    margin-bottom: 1rem;
}

.testimonials {
    text-align: center;
    margin-bottom: 3rem;
}

.testimonials h2 {
    color: #cc0000;
    margin-bottom: 1.5rem;
}

.testimonials p {
    font-style: italic;
    color: #555;
    max-width: 700px;
    margin: 1rem auto;
}

.secondary-cta {
    text-align: center;
    padding: 2.5rem 1rem;
    background-color: #f0f4f8;
    border-radius: 8px;
}

.secondary-cta h2 {
    color: #cc0000;
    margin-bottom: 1rem;
}

/* --- About Page Specific --- */
.content-section img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.content-section ul {
    list-style: disc;
    padding-left: 25px;
}

.content-section ul li {
    margin-bottom: 0.8rem;
}

/* --- Engines Page Specific --- */
.engine-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.engine-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    /* background-color: #fff; */
    background-color: #efefef;
}

.engine-item img {
    max-width: 100%;
    height: 200px; /* Fixed height */
    object-fit: contain;
    margin-bottom: 1rem;
    align-self: center;
}

.engine-item h3 {
    margin-top: 0;
    color: #cc0000;
    font-size: 1.2rem;
}

.engine-item h3 a {
    margin-top: 0;
    color: #cc0000;
    font-size: 1.2rem;
    text-decoration: none;
}

.engine-item ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: #555;
}

.engine-item ul li {
    margin-bottom: 0.3rem;
}

.engine-item p {
    flex-grow: 1;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.engine-item .cta-button {
    margin-top: auto; /* Push button to bottom */
}

/* --- Engine Detail Page Specific --- */
.engine-detail-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.engine-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 5px;
    background-color: #fff;
}

.engine-info h1 {
    margin-top: 0;
    color: #cc0000;
}

.engine-tabs {
    margin-top: 2rem;
    border-bottom: 1px solid #ddd;
}

.tab-links {
    margin-bottom: 0;
    padding-left: 0;
}

.tab-links button {
    background: none;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px; /* Overlap border */
    transition: border-color 0.3s ease, color 0.3s ease;
}

.tab-links button.active {
    border-bottom-color: #cc0000;
    font-weight: bold;
    color: #cc0000;
}

.tab-content {
    padding: 1.5rem 0.5rem; /* Add slight horizontal padding */
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-content h3 {
    margin-top: 0;
    color: #333;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.spec-table th, .spec-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    font-size: 0.95rem;
}

.spec-table th {
    background-color: #f9f9f9;
    width: 35%; /* Adjust width */
    font-weight: bold;
}

.feature-list {
    list-style: disc;
    padding-left: 25px;
}

.feature-list li {
    margin-bottom: 0.5rem;
}

.cta-section {
    margin-top: 2rem;
    text-align: center;
    background-color: #f9f9f9;
    padding: 2rem;
    border-radius: 8px;
}

.cta-section h2 {
    border-bottom: none;
}

@media (min-width: 768px) {
    .engine-detail-layout {
        grid-template-columns: 1fr 2fr; /* Image on left, info on right */
    }
    .engine-image {
        align-self: start; /* Align image to top */
    }
}

/* --- Why Reman Page Specific --- */
.process-steps {
    list-style: none;
    padding-left: 0;
    counter-reset: step-counter;
    margin-top: 2rem;
}

.process-steps li {
    counter-increment: step-counter;
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 45px; /* Space for the number */
    border-left: 3px solid #cc0000;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #fdfdfd;
    padding-right: 15px;
    border-radius: 0 5px 5px 0;
}

.process-steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: -18px; /* Position number over the border */
    top: 15px; /* Adjust vertical position */
    /* transform: translateY(-50%); */
    background-color: #cc0000;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.process-steps li strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
    color: #333;
}

.process-steps li p {
    margin: 0;
    font-size: 0.95rem;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.benefit-card {
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.benefit-card h3 {
    margin-top: 0;
    color: #333;
}

/* .comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.comparison-table th, .comparison-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

.comparison-table th {
    background-color: #f2f2f2;
}

.comparison-table td:first-child {
    font-weight: bold;
    width: 20%;
} */

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.comparison-table th, .comparison-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

.comparison-table .grey {
    background-color: #d0d0d0;
}

.comparison-table td:first-child {
    font-weight: bold;
    width: 20%;
}

/* --- Warranty Page Specific --- */
.warranty-highlight {
    background-color: #fff8e1;
    border-left: 5px solid #ffc107;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 4px;
}

.warranty-highlight strong {
    color: #bf360c;
}

.warranty-details ul {
    list-style: disc;
    padding-left: 25px;
}

.warranty-details ul li {
    margin-bottom: 0.5rem;
}

/* --- Contact & Quote Page Specific --- */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.quote-form {
    background-color: #fdfdfd;
    padding: 2rem;
    border: 1px solid #eee;
    border-radius: 8px;
}

.contact-form h2, .contact-info h2, .quote-form h2 {
    color: #cc0000;
    margin-bottom: 1.5rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 0.95rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Prevents padding from adding to width */
    font-size: 1rem;
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.submit-button {
    background-color: #cc0000;
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #a30000;
}

.contact-info ul {
    list-style: none;
    padding: 0;
}

.contact-info li {
    margin-bottom: 1rem;
    padding-left: 35px; /* Increased padding */
    position: relative;
    font-size: 1rem;
}

.contact-info li::before { /* Placeholder for icons - Use FontAwesome or SVGs later */
    content: "\27A4"; /* Example icon */
    position: absolute;
    left: 0;
    top: 2px;
    color: #cc0000;
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
}

.map-placeholder {
    background-color: #e0e0e0;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    border-radius: 8px;
    margin-top: 1.5rem;
    border: 1px solid #ccc;
}

.form-message {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.required-note {
    font-size: 0.9rem;
    color: #555;
    margin-top: 1.5rem;
    text-align: center;
}

/* Form Grid Layout for Quote/Contact */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.slider-container {
  padding: 10px 0;
  max-height: 100vh;
  max-width: 60vw;
  margin: auto;
}

.slides-wrapper {
  margin: auto;
  overflow: hidden;
}

.slides-container {
  padding: 0 10px;
}

.slider-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  overflow: hidden;
  transition: 1s;
  max-height: calc(100vh - 80px);
}

.slider-item {
  /* background-color: #bdbdbd; */
  margin: 0 16px -4px 0;
  /* min-height: 150px; */
}

.slider-item img {
  width: 100%;
}

.slider-arrows {
  display: flex;
  justify-content: space-between;
  /* height: 30px; */
  padding: 0 10px;
  /* margin-top: 10px; */
}

.slider-arrow-prev,
.slider-arrow-next {
  border: none;
  background-color: #ffffff;
  color: #212121;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

.slider-arrow-prev:hover,
.slider-arrow-next:hover {
  background-color: #eeeeee;
}

.slider-arrow-prev-dark,
.slider-arrow-next-dark {
  border: none;
  background-color: #888;
  color: #212121;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
}

.slider-arrow-prev-dark:hover,
.slider-arrow-next-dark:hover {
  background-color: #555;
}

@media (min-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem 1.5rem;
    }
    .form-group.full-width {
        grid-column: 1 / -1; /* Span full width */
    }
}

@media (min-width: 768px) {
    .contact-layout {
        grid-template-columns: 2fr 1fr; /* Form takes 2/3, info takes 1/3 */
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1.1rem; }
    nav ul li { margin: 0 5px; }
}

@media (max-width: 600px) {
    .container { padding: 0 0.5rem; }
    .hero { padding: 3rem 1rem; }
    nav ul li { display: block; margin: 10px 0; text-align: center; }
    header nav { margin-top: 1rem; }
    .engine-detail-layout, .contact-layout {
        grid-template-columns: 1fr;
    }
}



/* Logo Styling */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; /* Adjust padding as needed */
}

.logo-container {
    flex-shrink: 0; /* Prevent logo container from shrinking */
}

.logo {
    max-height: 80px; /* Adjust max height as needed */
    width: auto;
}

nav {
    flex-grow: 1; /* Allow nav to take remaining space */
    text-align: right; /* Align nav links to the right */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline-block;
    margin-left: 15px; /* Adjust spacing between nav items */
}

/* Adjustments for smaller screens if needed */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }
    nav {
        text-align: left;
        margin-top: 10px;
    }
    nav ul li {
        display: block;
        margin-left: 0;
        margin-bottom: 5px;
    }
    .centeredgrid {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 768px) {
    /* .topnav a:not(:first-child) {display: none;} */
    .topnav a:not(.logo) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 768px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }