@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
color: #fff;
background: url('../PICTURES/Background_01.jpg') no-repeat center center fixed;
background-size: cover;
position: relative;
}

body::after {
content: '';
position: fixed; /* Use fixed positioning */
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit; /* Inherit background image */
filter: blur(8px); /* Apply blur effect */
z-index: -1; /* Ensure the blur effect is behind the content */
}


header {
background: rgb(4, 42, 67);
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
animation: slideIn 1s ease-out;
width: 100%; /* Ensure the header spans the full width */
box-sizing: border-box; /* Include padding in the width calculation */
}

header .logo {
    display: flex;
    align-items: center;
}

header .logo img {
    height: 60px;
    margin-right: 15px;
    animation: bounceIn 1.5s ease-in-out;
}

header .logo span {
    font-size: 60px;
    font-weight: bold;
    color: #fff;
}

nav {
    display: flex;
    gap: 20px;
}

nav a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #333;
}

nav a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width 0.3s;
    position: absolute;
    bottom: -5px;
    left: 0;
}

nav a:hover::after {
    width: 100%;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes bounceIn {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

main {
    border-radius: 10px;
padding: 20px;
max-width: 800px;
width: 100%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.779);
margin: 0 auto; /* Centers the container horizontally */
background: rgba(4, 42, 67, 0.525);
margin-top: 2%;
margin-bottom: 2%;
}

main .description {
background: rgba(4, 42, 67, 0.84);
color: #fff;
padding: 20px;
border-radius: 5px;
margin-bottom: 30px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
overflow: hidden; /* Ensures content stays inside the container */
max-width: 100%; /* Resize the logo */
}

main .description img {
max-width: 500px; /* Resize the logo */
height: auto; /* Maintain aspect ratio */
margin-bottom: 10px;
}

main .description h1 {
font-size: 24px; /* Smaller font size for mobile */
margin-bottom: 10px;
line-height: 1.4; /* Add line height for better readability */
}

main .description p {
font-size: 16px; /* Adjust paragraph font size */
line-height: 1.6; /* Improve readability */
}


footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
}

footer p {
    margin: 0;
    font-size: 14px;
}
/* Center the Search Button */
#toggleSearchButton {
background-color: #6fc5ff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
margin: 20px auto; /* Centering horizontally */
display: block; /* Make it a block element */
width: auto; /* Allow natural width */
text-align: center;
}

/* Styles for Search Section */
#searchSection {
display: none;
background-color: #fff;
border: 2px solid #6fc5ff;
border-radius: 10px;
padding: 20px;
margin: 20px auto; /* Centering the form */
width: 90%; /* Limit the width */
max-width: 500px; /* Set a maximum width to make it smaller */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s ease-in-out;
}

#searchSection.visible {
display: block;
}

#searchSection h2 {
color: #333;
font-size: 24px;
margin-bottom: 15px;
font-weight: bold;
text-align: center;
}

#searchSection label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}

#searchSection select,
#searchSection input {
width: 90%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s ease;
}

#searchSection select:focus,
#searchSection input:focus {
border-color: #6fc5ff;
outline: none;
}

#searchSection button[type="submit"] {
background-color: #6fc5ff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
margin-top: 10px;
display: block;
width: 100%;
}

#searchSection button[type="submit"]:hover {
background-color: #5bb0e6;
transform: scale(1.05);
}

#searchSection button[type="submit"]:active {
background-color: #4a9bcc;
}
/* Primary Container */
.main-container {
    background: rgb(4, 42, 67);
    border-radius: 10px;
    padding: 20px;
    max-width: 900px;
    width: 100%;
    box-shadow: 0 4px 6px rgb(0, 0, 0);
    margin: 0 auto;
  }
  
  /* Ads Section */
  .ads-section {
    background: rgb(4, 42, 67);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
  
  .ads-section .subheading {
    color: #ffffff;
    font-size: 2em;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 2px solid #66aaff;
    padding-bottom: 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    text-shadow: 0 0 5px #66aaff, 0 0 10px #66aaff, 0 0 15px #004d99;
  }
  
  /* Vehicle Title */
  .vehicle-title {
    margin-top: 30px;
    font-size: 25px;
    background-color: #0077b6;
    color: #ffffff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.69);
    border: 1px solid #003366;
    font-weight: 700;
  }
  
  /* Ad Container */
  .ad-container {
    background: #e6f4ff;
    border: 1px solid #aac9e4;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
  
  .ad-container img.cover-photo {
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
  }
  
  /* Headings */
  .ad-container h3 {
    font-size: 1.5em;
    color: #042a43;
    font-weight: 800;
    letter-spacing: 0.5px;
    background-color: #b3d9ff;
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  }
  
  /* Other Photos */
  .other-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 10px;
  }
  
  .other-photos img {
    max-width: 80px;
    cursor: pointer;
    transition: transform 0.3s ease;
    border: 1px solid #aac9e4;
    border-radius: 5px;
    flex: 1 1 calc(25% - 10px);
    box-sizing: border-box;
  }
  
  .other-photos img:hover {
    transform: scale(1.1);
  }
  
  /* Vehicle Price */
  .vehicle-price {
    margin-top: 2px;
    font-size: 25px;
    background-color: #ff4d4d;
    color: #0a0101;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.69);
    border: 1px solid #b30000;
    font-weight: 700;
  }
  
  .vehicle-price p {
    margin: 5px 0;
    line-height: 1.2;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
  }
  
  .vehicle-price p span.label {
    flex: 0 0 120px;
    text-align: left;
    font-weight: 800;
  }
  
  .vehicle-price p span.value {
    flex: 1;
    text-align: justify;
    font-weight: 700;
  }
  
  /* Vehicle Details */
  .vehicle-details {
    margin-top: 30px;
    font-size: 20px;
    background-color: #003366;
    color: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid #001f3f;
  }
  
  .vehicle-details p {
    margin: 5px 0;
    line-height: 1.2;
    display: flex;
    justify-content: space-between;
  }
  
  .vehicle-details p span.label {
    flex: 0 0 120px;
    text-align: left;
    font-weight: bold;
  }
  
  .vehicle-details p span.value {
    flex: 1;
    text-align: justify;
  }
  
  /* Publisher Details */
  .publisher-details {
    background-color: rgba(0, 117, 182, 0.15);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
  }
  
  .publisher-details h3 {
    font-size: 1.6em;
    color: #042a43;
    margin-bottom: 15px;
  }
  
  .publisher-details p {
    font-size: 1.1em;
    color: #222;
    margin: 10px 0;
  }
  
  /* Specifications */
  .specifications-section {
    background-color: #001b33;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-top: 30px;
    max-height: 200px;
    overflow-y: auto;
  }
  
  .specifications-section h4 {
    font-size: 1.4em;
    color: #ffffff;
    margin-bottom: 15px;
  }
  
  .specifications-section ul {
    list-style-type: none;
    padding: 0;
  }
  
  .specifications-section li {
    font-size: 1.1em;
    margin-bottom: 10px;
    color: #ffffff;
  }
  
  .specifications-section li strong {
    color: #a5d8ff;
  }
  

.pagination a {
margin: 0 5px;
padding: 5px 10px;
background: #f1f1f1;
text-decoration: none;
border: 1px solid #ccc;
border-radius: 5px;
}

.pagination a.active {
background: #007bff;
color: white;
}
.vehicle-title {
color: darkblue;
font-size: 1.8em; /* Adjust font size as necessary */
font-weight: bold;
margin-bottom: 10px;
}

/* General button styling */
.toggle-button {
background-color:rgb(0, 21, 128); /* Dark blue background */
color: white; /* White text color */
font-size: 1em; /* Standard font size */
font-weight: bold; /* Bold text */
padding: 10px 20px; /* Padding for the button */
border: none; /* No border */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
margin: 10px 0; /* Space between buttons */
transition: background-color 0.3s, transform 0.3s; /* Smooth hover effects */
max-width: 350px; /* Maximum width for buttons */
width: 100%; /* Default width to occupy the container up to max-width */
text-align: center; /* Center the text */
box-sizing: border-box; /* Include padding in width calculations */
}

/* Hover effect for buttons */
.toggle-button:hover {
background-color:rgb(11, 44, 178); /* Slightly lighter blue on hover */
transform: scale(1.05); /* Slightly enlarge the button */
}

/* Active state for buttons */
.toggle-button:active {
background-color: #003366; /* Darker blue when clicked */
transform: scale(0.95); /* Slightly shrink on click */
}
.pagination {
text-align: center;
margin: 20px 0;
}
.pagination a {
margin: 0 5px;
padding: 5px 10px;
background: #f2f2f2;
text-decoration: none;
border-radius: 5px;
display: inline-block;
}
.pagination a.active {
background: #007bff;
color: white;
font-weight: bold;
}
.pagination a:hover {
background: #0056b3;
color: white;
}

@media (max-width: 768px) {
header {
flex-direction: column; /* Stack header elements vertically */
text-align: center;
gap: 15px; /* Add spacing between elements in the header */
padding: 15px 10px; /* Adjust padding for smaller screens */
width: 105%; /* Make header span the full width of the screen */
}
.responses-container {
max-width: 100%; /* Fit container to smaller screens */
}
.logo img {
max-width: 150px; /* Increase logo size for large screens */
}
nav {
flex-direction: column; /* Stack menu items vertically */
align-items: center;
gap: 20px; /* Add more space between menu items */
}

#searchSection {
width: 95%;
margin-left: 10px;
}

.main-container {
width: 95%;
}

.ads-section .subheading {
font-size: 1.5em;
}

.vehicle-details p {
font-size: 1.1em;
}

.other-photos img {
flex: 1 1 calc(33.33% - 10px); /* 3 images per row */
}

main .description img {
max-width: 60px; /* Reduce logo size for tablets */
}

main .description h1 {
font-size: 20px; /* Reduce font size for smaller screens */
line-height: 1.3; /* Ensure proper spacing between lines */
}

main .description p {
font-size: 14px; /* Smaller text for better fit */
}
}

@media (max-width: 480px) {
#searchSection {
display: none; /* Initially hidden */
background-color: #fff;
border: 2px solid #6fc5ff;
border-radius: 10px;
padding: 20px;
margin: 20px auto; /* Center the search section */
width: 100%; /* Restrict width to fit the screen */
max-width: 300px; /* Set a maximum width */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s ease-in-out;
box-sizing: border-box; /* Include padding and borders in width calculation */
}

#searchSection.visible {
display: block; /* Show the search section when it has the `visible` class */
}

#searchSection h2 {
color: #333;
font-size: 20px; /* Adjust font size for smaller screens */
margin-bottom: 15px;
font-weight: bold;
text-align: center; /* Center-align the heading */
}

#searchSection label {
display: block;
margin-bottom: 8px; /* Consistent spacing between label and input */
font-weight: bold;
color: #333;
text-align: left; /* Align labels to the left */
}

#searchSection select,
#searchSection input {
width: 100%; /* Full width for inputs */
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s ease;
box-sizing: border-box; /* Include padding and borders in width calculation */
}

#searchSection select:focus,
#searchSection input:focus {
border-color: #6fc5ff;
outline: none;
}

#searchSection button[type="submit"] {
background-color: #6fc5ff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
width: 100%; /* Full-width button */
box-sizing: border-box; /* Include padding and borders in width calculation */
}

#searchSection button[type="submit"]:hover {
background-color: #5bb0e6;
transform: scale(1.05);
}

#searchSection button[type="submit"]:active {
background-color: #4a9bcc;
}

header {
background: rgb(4, 42, 67);
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
animation: slideIn 1s ease-out;
width: 100%; /* Ensure the header spans the full width */
box-sizing: border-box; /* Include padding in the width calculation */
}

header .logo {
margin-bottom: 10px; /* Add space between the logo section and the menu */
}

header .logo img {
height: 30px; /* Smaller logo for mobile view */
margin-right: 10px;
}

header .logo span {
font-size: 20px; /* Smaller font size to fit in one line */
white-space: nowrap; /* Prevent text wrapping */
}

nav {
flex-direction: column;
align-items: center;
gap: 10px; /* Space between menu items */
}

nav a {
display: inline-block; /* Ensure the links behave like buttons */
font-size: 14px; /* Adjust font size for mobile view */
color: #fff; /* Text color */
text-decoration: none; /* Remove underline */
background-color: rgba(111, 197, 255, 0.35); /* Button background color */
padding: 10px 0; /* Add vertical padding for a consistent appearance */
width: 150px; /* Set a fixed width for all buttons */
text-align: center; /* Center-align the text */
border: 2px solid #6fc5ff; /* Add a border matching the background color */
border-radius: 5px; /* Rounded corners for buttons */
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

nav a:hover {
background-color: rgb(91, 177, 230); /* Slightly darker shade on hover */
border-color: #5bb0e6; /* Match border color with hover background */
transform: scale(1.05); /* Slight scaling effect */
}

nav a:active {
background-color: #4a9bcc; /* Even darker shade when clicked */
border-color: #4a9bcc;
}

.main-container {
background: rgb(230, 247, 255);
border-radius: 10px;
padding: 20px;
max-width: 900px;
width: 90%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 0 auto; /* Centers the container horizontally */
}

.ads-section {
background: rgb(202, 207, 226);
border-radius: 10px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ads-section .subheading {
color: rgb(11, 55, 99);
font-size: 1.8em;
margin-bottom: 10px;
text-align: left;
border-bottom: 2px solid #004d99;
padding-bottom: 5px;
}

.ad-container {
background: rgba(39, 68, 200, 0.38);
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ad-container img.cover-photo {
width: 100%;
height: auto;
border-radius: 5px;
}

.ad-container h3 {
font-size: 15px;
color: #004d99;
margin-bottom: 10px;
}

.other-photos img {
flex: 1 1 calc(50% - 10px); /* 2 images per row */
}

main .description img {
max-width: 180px; /* Slightly larger logo for mobile screens */
}

main .description h1 {
font-size: 20px; /* Adjust heading size */
}

main .description p {
font-size: 14px; /* Maintain readability on smaller screens */
}
.vehicle-price {
    margin-top: 2px;
    font-size: 15px;
    background-color: #ff4d4d;
    color: #0a0101;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.69);
    border: 1px solid #b30000;
    font-weight: 700;
  }
  
  .vehicle-price p {
    margin: 5px 0;
    line-height: 1.2;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
  }
  
  .vehicle-price p span.label {
    flex: 0 0 120px;
    text-align: left;
    font-weight: 800;
  }
  
  .vehicle-price p span.value {
    flex: 1;
    text-align: justify;
    font-weight: 700;
  }
  
.vehicle-details {
margin-top: 30px;
font-size: 12px; /* Slightly larger font for readability */
background-color: #004d99; /* Keep the color for consistency */
color: white;
padding: 15px; /* Adjusted padding for better fit */
border-radius: 12px; /* Slightly rounded corners for a softer look */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Added shadow for a subtle depth effect */
border: 1px solid #003366; /* Subtle border for definition */
width: auto; /* Ensures the width adjusts dynamically to content */
box-sizing: border-box; /* Includes padding and border in the box size */
}

.vehicle-details p {
margin: 5px 0; /* Reduced margin for less space between sentences */
line-height: 1.2; /* Adjusted line-height for compact spacing */
display: flex; /* Use flexbox for alignment */
justify-content: space-between; /* Space between label and value */
}

.vehicle-details p span.label {
flex: 0 0 120px; /* Fixed width for labels, ensuring vertical alignment */
text-align: left; /* Align labels to the left */
font-weight: bold; /* Emphasize the labels */
}

.vehicle-details p span.value {
flex: 1; /* Take remaining space */
text-align: justify; /* Justify the values */
}
.publisher-details {
background-color:rgb(176, 197, 214); /* Light blue background for a professional and clean look */
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
margin-top: 20px;
}

.publisher-details h3 {
font-size: 1.6em;
color:rgb(0, 0, 0); /* Consistent with other sections' color scheme */
margin-bottom: 15px;
}

.publisher-details p {
font-size: 1.1em;
color: #000000;
margin: 10px 0;
}

.publisher-details {
font-size: 1.2em;
color:black; /* Setting the font color to black */
}
.publisher-details {
background-color: rgb(189, 207, 223); /* Light blue background for a professional and clean look */
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
margin-top: 20px;
font-size: 1em; /* Reduced font size */
color: black; /* Setting the font color to black */
}

.publisher-details h3 {
font-size: 1.4em; /* Reduced font size */
color: rgb(0, 0, 0); /* Consistent with other sections' color scheme */
margin-bottom: 15px;
}

.publisher-details p {
font-size: 0.9em; /* Reduced font size */
color: #333;
margin: 10px 0;
}

.specifications-section {
background-color:rgb(15, 35, 100); /* Light gray background for a clean, modern look */
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Added subtle shadow for depth */
margin-top: 30px;
max-height: 200px;
overflow-y: auto;
}
.specifications-section li {
font-size: 1em; /* Reduced content font size */
color: #333;
margin-bottom: 10px;
}.specifications-section h4 {
font-size: 1.1em; /* Reduced font size */
color: #004d99;
margin-bottom: 15px;
}

.specifications-section ul {
list-style-type: none; /* Remove default bullets */
padding: 0;
}
.vehicle-title {
color: darkblue;
font-size: 1.2em; /* Adjust font size as necessary */
font-weight: bold;
margin-bottom: 10px;
}


}