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

.directory-heading {
    text-align: left;
    color: #007bff; /* Blue heading color */
    font-size: 14px;
    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: orange; /* 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: 10px; /* 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 */
}