/* General Body Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f4f4;
    padding: 0;
}

/* Header Styles */
.header {
    background-color: #8B0000; /* Dark red color */
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
}

.portal-info h1 {
    margin: 0;
    font-size: 1.5em; /* Increase font size for better readability */
}

/* Navbar Styles */
.navbar {
    background-color: #8B0000; /* Dark red color */
    color: white;
    padding: 10px 20px;
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.navbar li {
    margin-right: 20px;
}

.navbar a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center; /* Center icons and text vertically */
}

.navbar i {
    margin-right: 8px;
}

/* Quotation Page Styles */
.quote-header {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
}

.quote-details, .contact-details, .vehicle-info, .work-details, .bill-to {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.quote-details {
    max-width: 100%; /* Full width on smaller screens */
}

.quote-details h2 {
    margin-top: 0;
}

.quote-details label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.quote-details input, .quote-details textarea {
    width: 100%; /* Full width inputs and textareas */
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.quote-details input:focus, .quote-details textarea:focus {
    border-color: #8B0000; /* Dark red color */
    outline: none;
}

.contact-details {
    max-width: 100%; /* Full width on smaller screens */
}

.contact-details h3 {
    margin-top: 0;
}

.contact-details p {
    margin: 5px 0;
}

.vehicle-info {
    width: 100%; /* Full width */
    margin: 0 auto;
}

.vehicle-info h3 {
    margin-top: 0;
}

.field-group {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    justify-content: space-between;
    margin-bottom: 15px;
}

.field-item {
    flex: 1;
    margin-right: 10px;
}

.field-item:last-child {
    margin-right: 0;
}

.field-item label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.field-item input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.field-item input:focus {
    border-color: #8B0000; /* Dark red color */
    outline: none;
}

.work-details {
    width: 100%; /* Full width */
    margin: 0 auto;
}

.work-details h3 {
    margin-top: 0;
}

.work-details table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.work-details th, .work-details td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.work-details th {
    background-color: #f4f4f4;
}

.work-details input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

button {
    background-color: #8B0000; /* Dark red color */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #a52a2a; /* Slightly lighter red */
}

textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    resize: vertical;
    transition: border-color 0.3s;
}

textarea:focus {
    border-color: #8B0000; /* Dark red color */
    outline: none;
}

/* Specific Styles for BILL TO */
.bill-to {
    width: 50%; /* 50% screen width */
    margin:left; /* Center align */
    margin-bottom: 20px;
}

.bill-to h3 {
    margin-top: 0;
}

.bill-to textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    resize: vertical;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .quote-header {
        justify-content: center;
    }

    .quote-details, .contact-details, .vehicle-info, .work-details, .bill-to {
        max-width: 100%; /* Full width on smaller screens */
        margin: 10px;
    }

    .vehicle-info, .work-details {
        margin: 10px 0;
    }

    .bill-to {
        width: 100%; /* Full width on smaller screens */
        float: none; /* No float for mobile */
    }

    .field-group {
        flex-direction: column; /* Stack fields vertically on smaller screens */
    }

    .field-item {
        margin-bottom: 10px;
        margin-right: 0;
    }

    .navbar ul {
        flex-direction: column; /* Stack navbar items vertically on smaller screens */
    }

    .navbar li {
        margin-bottom: 10px;
    }

    .navbar li:last-child {
        margin-bottom: 0;
    }
}
.hide {
    display: none !important; /* Forces the button to stay hidden */
}