@charset "utf-8";
/* CSS Document */

body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
	border-bottom:none;
    background-color: #666;
	display:block;
    border-radius: 5px 5px 0px 0px;
	width: 100%;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: #666;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 20px 15px 20px;
    transition: 0.3s;
    font-size: 17px;
	color:#F4F4F4;
}
.tab label {
    background-color: #666;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 5px;
    transition: 0.3s;
    font-size: 17px;
	color:#F4F4F4;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #333;
}

/* Style the tab content */
.tabcontent {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0px 5px 5px 5px;
    background-color: #333;
	color: #FFF;
}
#searchSize{
	display:block;
    font-size: 16px;
}
#searchVeh{
	display:block;
    font-size: 16px;
}
#searchFit{
	display:block;
    font-size: 16px;
}
#fieldVeh{
	display: inline-block;
    font-size: 16px;
	color:#000;
}
#fieldSize{
	display: inline-block;
    font-size: 16px;
	color:#000;
}
#fieldFit{
	display: inline-block;
    font-size: 16px;
	color:#000;
}
#fieldSelect{
	display: inline-block;
    font-size: 16px;
	color:#000;
}
.container {
	width:33%;
	height:20%;
}
.container_tab {
	width:95%;
	height:20%;
	font-size: 12px; 
	font-family: Arial;
}
.container1 {
	width:99%;
}
@media screen and (max-width: 680px) {
.container1 {
	width:96%;
	float:left;
}
}

.container2 {
	width:100%;
}
.container4 {
   border:none;
	padding:0 7px 0 0;
}
.container5 {
	width:60%;
	margin:auto;
}
div.menu_search{
	overflow:hidden;
	width:1022px;
}
div.menu_search div.search{
	float:left;
	padding:2px 0 0 17px;
}
.header-search1 {
   position: absolute;
   border:none;
   left: 6%; /* adjust as needed */
   top: 8px; /* Adjust as needed to get the number that will keep it above the menu */
   height: 22px;
   display:inline;
   padding: 5px 0px 3px 5px;
   margin-bottom: 4px;
   z-index: 999; /* Whatever number that keeps it above the menu */	
	color:#000;
}
div.header-search1 .form{
    background:url('images/website_graphics/form6.png') no-repeat 0 0;
	position:relative;
	width:190px;
	height:22px;
	color:#000
	}
div.header-search1 input.field{
	float:left;
	background:none;
	border:none;
	height:22px;
	width:155px;
	padding:0 0 0 0;
	font:14px Arial,Tahoma,sans-serif;
	color:#0a7285;
	position:relative;
	border-radius: 5px;
	color:#FFF
}
div.header-search1 input.submit{
	float:right;
	background:url(images/go.gif) no-repeat 0 0;
	border:none;
	display:inline;
	width:22px;
	height:20px;
	padding:0;
	margin:0 0 0 3px;
	cursor:pointer;
	border-radius: 7px;
}
.image-row {
  display: flex; /* Use Flexbox for horizontal alignment */
  justify-content: space-evenly; /* Evenly distribute space between items */
  align-items: center; /* Vertically center items within the row */
  gap: 5px; /* Optional: Add consistent spacing between the containers */
  margin: 5px auto; /* Center the row horizontally on the page */
  max-width: 100%; /* Ensure the row stays within the viewport width */
  overflow: hidden; /* Prevent content overflow */
}

.image-container {
  flex: 1; /* Ensures containers have equal width */
  max-width: 500px; /* Restrict container size for consistency */
  text-align: center; /* Center-align content inside the container */
}

.image-container img {
  width: 100%; /* Scale the image to fit the container */
  max-width: 450px; /* Limit the maximum size of the images */
  height: auto; /* Maintain the image's aspect ratio */
  object-fit: cover; /* Ensure images look uniform */
  border-radius: 5px; /* Optional: Rounded corners for a modern look */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}
.image-wrapper {
  display: flex; /* Ensures images are side by side */
  width: 100%; /* Ensures full-width responsiveness */
  justify-content: center; /* Aligns images evenly */
  align-items: center; /* Keeps images vertically aligned */
  overflow: hidden; /* Prevents layout breaking */
}

.image-wrapper img {
  width: 50%; /* Each image takes up exactly half of the space */
  height: auto; /* Maintains aspect ratio */
  object-fit: cover; /* Ensures images maintain proper dimensions */
  display: block; /* Prevents unwanted spacing issues */
}
.section-container {
  text-align: center; /* Centers all content */
  max-width: 1000px; /* Limits the width for better readability */
  margin: 40px auto; /* Centers the section on the page */
  padding: 20px;
}

.section-title {
  font-size: 28px; /* Increases title size */
  font-weight: bold; /* Makes title bold */
  color: #000; /* Keeps black text */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* Adds spacing between icon and text */
}

.section-title img {
  display: inline-block;
  width: 20px; /* Adjust size of bullet arrow */
  height: auto;
}

.section-content p {
  font-size: 18px; /* Keeps font size consistent */
  text-align: center; /* Centers all text */
  line-height: 1.6; /* Improves readability */
}

.section-content a {
  color: #000;
  font-weight: bold;
  text-decoration: none; /* Removes underline */
}

.section-content a:hover {
  text-decoration: underline; /* Adds underline on hover */
}
/* Feature Box Wrapper */
.feature-box-wrapper {
  display: flex; /* Aligns boxes side by side */
  justify-content: space-between; /* Ensures even spacing */
  gap: 20px; /* Creates space between boxes */
  margin: 40px auto; /* Centers the section */
  max-width: 1000px; /* Limits width for balanced layout */
  padding: 20px;
}

/* Individual Feature Box */
.feature-box {
  flex: 1; /* Ensures equal width for both boxes */
  background-color: #f4f4f4; /* Light grey background */
  padding: 20px;
  border-radius: 8px; /* Rounded corners for a modern look */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
  text-align: left; /* Align text for readability */
  min-width: 300px; /* Prevents boxes from becoming too small */
}

/* List Styling */
.feature-box ul {
  list-style: none; /* Removes default bullet points */
  padding: 0;
}

/* Bullet Point Styling */
.feature-box li {
  font-size: 18px;
  font-weight: bold; /* Makes text bold */
  display: flex;
  align-items: center; /* Aligns shield icons with text */
  gap: 10px; /* Space between icon and text */
  margin-bottom: 10px;
}

/* Shield Icon Styling */
.feature-box img {
  width: 20px; /* Small icon */
  height: auto;
}
/* Make Images Stack on Smaller Screens */
@media (max-width: 768px) {
  .image-wrapper {
    flex-direction: column; /* Stack images vertically */
  }

  .image-wrapper img {
    width: 100%; /* Full width */
  }
}

/* Ensure Feature Boxes Stack on Smaller Screens */
@media (max-width: 768px) {
  .feature-box-wrapper {
    flex-direction: column; /* Stack boxes vertically */
    align-items: center; /* Center them */
  }

  .feature-box {
    width: 90%; /* Adjust width for better fit */
    margin-bottom: 20px; /* Add spacing between stacked boxes */
  }
}

/* Adjust Text for Better Readability on Mobile */
@media (max-width: 480px) {
  .section-title {
    font-size: 22px; /* Reduce font size for small screens */
  }

  .feature-box li {
    font-size: 16px; /* Slightly smaller text */
  }
}

/* Ensure No Horizontal Scrolling Issues */
body {
  max-width: 100%;
  overflow-x: hidden; /* Prevent side-scrolling */
}

/* Adjust Padding and Spacing for Mobile */
@media (max-width: 768px) {
  .section-container {
    padding: 10px; /* Reduce padding for smaller screens */
  }

  .image-wrapper {
    gap: 5px; /* Reduce spacing between images */
  }
}