.buy-section {
    display: flex;
    padding: 150px;
    background: url(https://img2.tradewheel.com/template1/images/buyer-page-top-banner.png.webp);
    background-size: cover;
    background-position: top right;
    color: #fff;
    
}

/* Section Container */
.top-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-bottom: 40px;
}

/* Buyers Box */
.buyers-box {
    background-color: #fff; /* White background */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%; /* Adjust size */
    height: 50px; /* Fixed height */
    font-size: 16px; /* Font size */
    color: #ff6701; /* Dark gray text */
    text-align: center; /* Center text */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Search Bar */
.search-box {
    width: 50%; /* Adjust width */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.search-form {
    display: flex;
    width: 100%; /* Full width */
}

.search-input {
    flex-grow: 1; /* Input takes full width */
    padding: 10px;
    border: 1px solid #ccc; /* Border */
    border-right: none; /* Remove right border */
    border-radius: 0; /* No border radius */
    font-size: 16px; /* Adjust font size */
}

.search-btn {
    background-color: #ff6701; /* Orange background */
    color: white; /* White text */
    border: none; /* Remove border */
    padding: 10px 20px; /* Adjust padding */
    font-size: 16px; /* Adjust font size */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s ease; /* Smooth hover */
}

.search-btn:hover {
    background-color: #ff6701; /* Darker orange hover effect */
}

/* RFQs Total Count */
.rfq-box {
    width: 20%; /* Adjust size */
    text-align: center; /* Center-align text */
    color: #333; /* Dark gray text */
    
}

.rfq-box p {
    margin: 0 0 10px; /* Margin for the title */
    font-size: 16px; /* Font size for title */
    font-weight: bold; /* Bold font */
}

.rfq-count {
    display: flex;
    justify-content: center; /* Center-align the digits */
    gap: 5px; /* Space between boxes */
    
}

.rfq-count span {
    background-color: #ff6701; /* Orange background */
    color: white; /* White text */
    font-size: 20px; /* Font size for digits */
    font-weight: bold; /* Bold font */
    width: 30px; /* Fixed width for each digit */
    height: 40px; /* Fixed height for each digit */
    display: flex; /* Flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    border: 1px solid #ddd; /* Subtle border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}


.row {
    display: flex;
    margin-top: 20px;
}

.md3 {
    flex: 0 0 25%;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    max-height: fit-content;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.md9 {
    flex: 0 0 75%;
    padding: 20px;
}

.orange-text {
    color: #ff6701;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    font-weight: bold;
}

.black-text {
    color: black;
    font-weight: bold;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.form-section .form-input {
    width: 90%;
    height: 35px;
    margin-bottom: 15px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 0; /* No border radius */
}

.form-submit-btn {
    width: 100%;
    height: 40px;
    background-color: #ff6701;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.form-submit-btn:hover {
    background-color: #ff6701;
}

.product-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

.product-info {
    flex: 3;
    margin-right: 20px;
}

.product-title {
    font-size: 18px;
    color: black;
    font-weight: bold;
    margin-bottom: 10px;
}


.product-det {
    font-size: 12px;
    color: #8b8989;
    margin-bottom: 10px;
}

.product-desc {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.buyer-name {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.buyer-initial {
    width: 35px;
    height: 35px;
    background-color: #ff6701;
    color: white;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.date-posted {
    font-size: 12px;
    color: #777;
}

.product-action {
    flex: 1;
    display: flex;
    margin-top: 70px;
    flex-direction: column;
    align-items: center;
}

.contact-buyer-btn {
    background-color: #ff6701;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 10px;
}

.contact-buyer-btn:hover {
    background-color: #ff6701;
}

.quotes-received {
    font-size: 12px;
    color: #555;
}

.main-title-section {
    text-align: left;
    margin: 40px 0;
}

.main-title-section h1 {
    font-size: 32px;
    font-weight: bold;
    color: #333;
}

.directory-section {
    padding: 20px;
    background-color: #f9f9f9;
    margin-bottom: 40px;
}

.directory-heading {
    text-align: left;
    color: #007bff; /* Blue heading color */
    font-size: 20px;
    margin-bottom: 20px;
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 20px;
    padding: 10px;
}

.directory-item {
    display: flex;
    align-items: center;
    background-color: #fff; /* White background */
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.directory-icon {
    padding: 2px;
    margin-right: 10px;
}

.directory-link {
    text-decoration: none; /* Remove underline */
    color: #000; /* Black text color */
    font-size: 1em;
    font-weight: 500; /* Medium weight */
}

.directory-link:hover {
    color: #007bff; /* Blue hover effect */
}

.background-image-section {
    width: 100%; /* Full width */
    height: 200px; /* Fixed height */
    background: url(https://img2.tradewheel.com/images/page-banner-new.jpg);
    background-size: cover; /* Ensure the image covers the entire area */
    background-position: center; /* Center the image */
    display: flex; /* Use Flexbox to center content */
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
    position: relative; /* Ensure the content stays in place */
}

.background-content {
    text-align: center; /* Center text alignment */
    color: white; /* White text color */
}

.background-content h2 {
    font-size: 24px; /* Adjust size for visibility */
    margin-bottom: 15px; /* Add space below the heading */
    font-weight: bold; /* Make the heading bold */
}

.register-now-btn {
    background-color: #ff6701; /* Orange background */
    color: white; /* White text */
    border: none; /* Remove border */
    padding: 10px 20px; /* Adjust padding for the button */
    font-size: 16px; /* Button font size */
    border-radius: 5px; /* Add rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.register-now-btn:hover {
    background-color: darkorange; /* Darker orange on hover */
}

.products-section {
    background-color: white; /* White background */
    padding: 20px; /* Spacing around the content */
    margin-top: 20px; /* Spacing from other sections */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    margin-bottom: 40px;
}

.products-title {
    font-size: 20px; /* Title font size */
    font-weight: bold; /* Bold font */
    color: blue; /* Blue color for title */
    margin-bottom: 15px; /* Spacing below the title */
}

.products-links {
    display: grid; /* Grid layout for links */
    grid-template-columns: repeat(4, 1fr); /* Four columns */
    gap: 30px; /* Spacing between items */
}

.product-item a {
    font-size: 16px; /* Font size for links */
    color: black; /* Black text for links */
    text-decoration: none; /* Remove underline from links */
    transition: color 0.3s ease; /* Smooth color change on hover */
}

.product-item a:hover {
    color: orange; /* Orange color on hover */
}

.wholesale-section {
    background-color: #fff; /* White background */
    padding: 20px; /* Add padding around content */
    margin-top: 20px; /* Add spacing from previous section */
    margin-bottom: 40px; /* Add spacing below this section */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border-radius: 5px; /* Rounded corners */
}

.wholesale-title {
    font-size: 22px; /* Title font size */
    font-weight: bold; /* Bold title */
    color: orange; /* Orange color for the title */
    margin-bottom: 15px; /* Space below the title */
    text-align: left; /* Align text to the left */
}

.wholesale-info {
    font-size: 16px; /* Info font size */
    line-height: 1.6; /* Line height for better readability */
    color: #333; /* Dark gray text color */
    margin-bottom: 15px; /* Add spacing between paragraphs */
    text-align: justify; /* Justify text for a clean look */
}