.main {
    text-align: center;
    font-family: 'Poppins', sans-serif; /* Ensure Poppins is used throughout */
}

.search-container {
    text-align: center;
    padding: 20px 0;
}

#pdfSearch {
    width: 300px;
    padding: 20px;
    margin-bottom: 20px;
    font-size: 16px;
    border-radius: 50px; /* Rounded borders for modern feel */
    font-family: 'Poppins', sans-serif;
    outline: none; /* Remove focus outline */
    box-shadow: 0 3px 6px rgba(0,30,60,0.1); /* Soft shadow for depth */
    transition: box-shadow .3s; /* Smooth transition for interactions */
}

#pdfSearch:focus {
    box-shadow: 0 6px 12px rgba(0,30,60,0.2); /* More prominent shadow on focus */
}

.attachments-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
    gap: 20px; /* Control spacing between manual items */
}

.manual-item {
    margin: 10px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,30,60,0.12); /* Soft border color */
    border-radius: 8px; /* Rounded corners */
    background-color: white;
    width: calc(100% / 3 - 40px); /* Adjust for gap */
    box-shadow: 0 12px 32px 0 rgba(0,30,60,0.12); /* Updated shadow for consistency */
    transition: transform .3s, box-shadow .5s; /* Smooth transitions for interactions */
}

.manual-item:hover, .manual-item.highlight {
    transform: translateY(-5px); /* subtle lift effect */
    box-shadow: 0 15px 36px rgba(0,30,60,0.2); /* More prominent shadow on hover */
    background-color: #015eae; /* Primary button color for consistency */
    color: white;
}
.manual-item:hover .pdf-icon::before, .manual-item.highlight .pdf-icon::before {
    color: white;
    background-color: white;
}
.manual-item:hover .pdf-icon, .manual-item.highlight .pdf-icon {
    color: white; /* Ensure text is readable on hover */
}

.attachments-container a:hover {
    text-decoration: none!important;
}
.pdf-icon::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1c1";
    font-size: 20px;
    padding-right: 10px;
    color: transparent!important; /* Keep the icon color consistent with primary button */
    transition: color .3s; /* Smooth transition for interactions */
}

.pdf-icon {
    color: #474a59; /* Primary text color for better contrast */
    text-decoration: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    padding: 15px;
flex: 1;
    transition: color .3s; /* Smooth transition for hover effect */
}

.pdf-icon:hover {
    color: #1b75bc; /* Hover color for consistency with button hover state */
}
.article {
    align-content: center;
    width: 90%;
    display: inline-block;
}
.article p {
    padding: 10px;
}
form.pg-ask-product-price-form {
    display: none;
}