/* Styling for the new company benefits section */
.company-benefits-section {
    color: #333; /* Default text color for readability */
}

.benefits-grid {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center items in the grid */
    gap: 3rem; /* Space between individual benefit items */
    max-width: 1300px; /* Maximum width for the grid content */
    margin: 0 auto; /* Center the entire grid container */
}

.benefit-item {
    flex: 1 1 calc(33% - 3rem); /* Distribute items into three columns on desktop, accounting for gap */
    align-items: flex-start; /* Align icon and content at the top */
    text-align: left; /* Align text content to the left */
    min-width: 280px; /* Minimum width for the cards */
}

.benefit-icon {
    flex-shrink: 0; /* Prevent the icon from shrinking */
    margin-right: 1.5rem; /* Space between the icon and the text content */
    width: 40px; /* Fixed width for the icon container */
    height: 40px; /* Fixed height for the icon container */
    display: flex; /* Use flexbox to center the image within its container */
    align-items: center;
    justify-content: center;
}

.benefit-icon img {
    width: 100%; /* Make the image fill its container */
    height: 100%; /* Make the image fill its container */
    object-fit: contain; /* Ensure the image scales properly without cropping */
}

.benefit-content {
    flex-grow: 1; /* Allow the content to take up the remaining space */
}

.benefit-title {
    font-size: 2.4rem; /* Prominent heading for each benefit */
    color: #fd7800; /* Your primary orange color for these titles */
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.2;
    font-weight: 700; /* Bold font for emphasis */
}

.benefit-item p {
    font-size: 1.6rem; /* Standard readable font size for paragraphs */
    color: #555; /* Slightly muted text color for body text */
    margin: 0; /* Remove default paragraph margins */
    line-height: 1.6; /* Good line height for readability */
}

.experience-list {
    list-style: none; /* Remove default list bullets */
}

.experience-list li {
    font-size: 1.7rem;
    color: #555;
    margin-bottom: 0.8rem;
    position: relative;
}

.experience-list li::before {
    content: '\2022'; /* Unicode for a solid circle (bullet) */
    color: #fd7800; /* Orange color for the bullet */
    font-weight: bold;
    display: inline-block;
    width: 20px; /* Width of the custom bullet area */
    margin-left: -25px; /* Pull bullet to the left */
    position: absolute;
    left: 0;
    top: 0;
}

/* Responsive adjustments for tablets */
@media screen and (max-width: 1024px) {
    .benefits-grid {
        gap: 2.5rem;
    }
    .benefit-item {
        flex: 1 1 calc(50% - 2.5rem); /* Two columns on tablets */
    }
    .benefit-title {
        font-size: 2.2rem; /* Adjust benefit title size for tablets */
    }
}

/* Responsive adjustments for small mobile devices */
@media screen and (max-width: 768px) {
    .company-benefits-section {
        padding: 6vh 3vw; /* Adjust padding for smaller screens */
    }

    .benefits-grid {
        gap: 2rem;
    }
    .benefit-item {
        flex: 1 1 100%; /* Single column layout on small mobiles */
        padding: 2rem;
        flex-direction: column; /* Stack icon and text vertically */
        align-items: center; /* Center content when stacked */
        text-align: center; /* Center text when stacked */
    }
    .benefit-icon {
        margin-right: 0; /* Remove horizontal margin for stacked layout */
        margin-bottom: 1.5rem; /* Add vertical margin for spacing */
    }
    .benefit-title {
        font-size: 2rem; /* Adjust benefit title size */
    }
    .benefit-item p {
        font-size: 1.5rem; /* Adjust paragraph size */
    }
}

/*****************************/
/* Styling Contact Section   */
/*****************************/

.contact-section {
    margin: 5vh 0;
    display: flex;
    justify-content: center;
    gap: 2vw;
    border-radius: 5rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    font-size: 2rem;
}

.contact-section h2 {
    color: #fd7800;
}

.contact-section a {
    display: flex;
    align-items: center;
    background: url("texture/grain.png") rgb(253, 120, 0);
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0 2rem;
    border-radius: 5rem;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.contact-section a:hover {
    transform: translateY(-5px); /* Subtle lift on hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

@media screen and (max-width: 480px) {
    .contact-section {
        flex-direction: column;
        margin-top: 0;
    }

    .contact-section h2 {
        text-align: center;
    }

    .contact-section a {
        padding: 2rem 0;
        justify-content: center;
    }
}