/* Add Gilroy Font */
@font-face {
    font-family: 'Gilroy-Bold';
    src: url('/mnt/data/Gilroy_Font_Family/Gilroy-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy-Regular';
    src: url('/mnt/data/Gilroy_Font_Family/Gilroy-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* General Body Styling */
body {
    font-family: 'Gilroy-Regular', sans-serif;
    background: #fbfbfc;
}

/* "Ribbon Help Center" Styling */
#docsSearch h1 {
    font-family: 'Gilroy-Bold', sans-serif; /* Apply Gilroy-Bold */
    font-size: 32px;
    color: #000; /* Keep text black */
    text-align: center;
    margin-top: 0.4em;
}

/* Add Background Image to Search Bar Section */
#docsSearch {
    border: 2px solid #db2955; /* Ribbon pink border */
    border-radius: 0; /* Straight borders */
    background: url('/path-to-image/Frame-13.jpg') no-repeat center center; /* Add background image */
    background-size: cover; /* Ensure the image covers the section */
    padding: 40px 20px; /* Add padding for spacing */
    color: #000; /* Set default text color to black for readability over image */
}

/* Search Bar Input Box Placeholder */
input.search-query {
    font-family: 'Gilroy-Regular', sans-serif;
    font-size: 16px;
    color: #7e8287;
    letter-spacing: 1px;
    font-weight: 400;
}

input.search-query::placeholder {
    font-family: 'Gilroy-Regular', sans-serif;
    font-size: 16px;
    color: #7e8287;
    font-style: italic;
    content: "Know what you're looking for?";
}

/* Search Button Styling */
#searchBar button {
    color: #fff;
    text-shadow: 0 0px 0px rgba(255, 255, 255, 0);
    background: #000000; /* Default black background */
    border: 2px solid #000000; /* Black border */
    font-family: 'Gilroy-Bold', sans-serif;
    font-size: 18px;
    padding: 0 1.5em;
    height: 50px;
    position: absolute;
    cursor: pointer;
}

#searchBar button:hover {
    background: #db2955; /* Pink background on hover */
    border-color: #db2955; /* Matching pink border on hover */
    color: #fff; /* Keep text white */
}

/* "Setup Guide" Collection/Box Styling */
.category-list .category {
    border: 2px solid #000; /* Default black border */
    border-radius: 12px; /* Rounded corners */
    background-color: #ffffff; /* White background */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    transition: all 0.3s ease-in-out; /* Smooth transition */
    padding: 20px;
    text-align: center; /* Center content */
    font-family: 'Gilroy-Bold', sans-serif; /* Bold font for text */
    color: #000; /* Default black text */
}

.category-list .category:hover {
    border-color: #db2955; /* Pink border on hover */
    color: #db2955; /* Pink text on hover */
    box-shadow: 0px 6px 12px rgba(219, 41, 85, 0.2); /* Slightly deeper shadow */
}

/* "Setup Guide" Subtext Styling */
.category-list .category p {
    font-family: 'Gilroy-Regular', sans-serif;
    font-size: 14px;
    color: #7e8287; /* Subtle gray color for subtext */
}

/* Footer */
footer p a {
    font-family: 'Gilroy-Regular', sans-serif;
    color: #7e8287;
    font-weight: 300;
}