/* Reset some default styles */  
* {  
   margin: 0;  
   padding: 0;  
   box-sizing: border-box;  
}  
  
body {  
   font-family: Arial, sans-serif;  
   line-height: 1.6;  
}  
  
/* Header styles */  
.header {  
  position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  background-color: #888;  
  color: #fff;  
  padding: 1rem;  
  text-align: center;  
  z-index: 1000;  
}  
  
.header-logo img {  
   max-width: 100%;  
   height: auto;  
}  
  
.header-nav ul {  
   list-style: none;  
   padding: 0;  
}  
  
.header-nav li {  
   display: inline;  
   margin: 0 1rem;  
}  
  
.header-nav a {  
   text-decoration: none;  
   color: darkred;  
    font-weight: bold;  
  text-transform: uppercase; 
}  
  
/* Hero section styles */  
.hero {  
   background-image: linear-gradient(to bottom, rgba(139, 120, 100, 0.8), rgba(1, 1, 1, 0.75)), url('Resources/Pictures/pumproom.png'); /* Dark red gradient overlay */  
   background-size: cover;  
   height: 100vh;  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   color: #fff;  
   text-align: center;  
    
} 
  
.hero img {  
   max-width: 80%;  
   height: auto;  
}  
  
.btn {  
   background-color: #311;  
   color: lightgray;  
   border: none;  
   padding: 0.5rem 1rem;  
   border-radius: 5px;  
   cursor: pointer;  
}  
  
.prlink {  
  color: black; /* blue color */  
}  
  
.prlink:hover {  
  color: darkred; /* lighter blue color on hover */  
}
/* Content styles */  
.content {  
   padding: 1rem;  
}  
  
.about-us-container {  
   display: flex;  
   flex-direction: column;  
   gap: 1rem;  
}  
  
.about-us-video video {  
   width: 100%;  
   height: auto;  
}  
  
/* Vendor grid styles */  
.vendor-grid {  
   display: grid;  
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));  
   gap: 1rem;  
   margin-top: 1rem;  
}  
  
.vendor img {  
   width: 100%;  
   height: auto;  
}  
  
/* Footer styles */  
.footer {  
   background-color: #333;  
   color: white;  
   text-align: center;  
   padding: 1rem;  
}  
  
.footer-contact a {  
   color: #007bff;  
}  
  
/* Responsive styles */  
@media (min-width: 600px) {  
   .about-us-container {  
      flex-direction: row;  
      justify-content: space-between;  
   }  
  
   .about-us-text {  
      flex: 1;  
      padding-right: 1rem;  
   }  
  
   .about-us-video {  
      flex: 1;  
   }  
}

#prinfo {  
  width: 50%;  
  padding: 1rem;  
}  
  
#prfire {  
  width: 50%;  
  padding: 1rem;  
  text-align: center;  
}  
  
.prblock {  
  display: flex;  
  flex-wrap: wrap;  
  justify-content: center;  
  margin-top: 2rem;  
}  
  
.prproduct {  
  width: 33.33%;  
  padding: 1rem;  
  text-align: center;  
}  
  
.prproduct img {  
  max-width: 100%;  
  height: auto;  
  margin-bottom: 1rem;  
}  
  
/* Responsive Styles */  
  
@media (max-width: 768px) {  
  .about-container {  
   flex-direction: column;  
  }  
   
  #prinfo {  
   width: 100%;  
   padding: 0.5rem;  
  }  
   
  #prfire {  
   width: 100%;  
   padding: 0.5rem;  
  }  
   
  .prblock {  
   flex-direction: column;  
  }  
   
  .prproduct {  
   width: 100%;  
   padding: 0.5rem;  
  }  
}
.container {  
  max-width: 800px;  
  margin: 0 auto;  
  padding: 2rem;  
}  
  
.title {  
    padding-top: 200px;
  text-align: center;  
}  
  
.about-container {  
  display: flex;  
  flex-wrap: wrap;  
  justify-content: center;  
} 

        .form-container {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h2 {
            color: #d9230f; /* Red color matching ALLI Pumps logo */
            margin-bottom: 20px;
            text-align: center;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
        }
        textarea {
            height: 150px;
            resize: vertical;
        }
        .required {
            color: darkred;
        }
        button {
            background-color: #d9230f;
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: darkred;
        }
        .form-footer {
            margin-top: 15px;
            font-size: 14px;
            color: #666;
        }