/* css/hsse_style.css - Custom Styles for the HSSE Page */
main{
    width:80vw; 
    margin:0 auto; 
    background-color: #eeedf2;
}

/* HSSE Hero Section - Consistent with other hero sections */
.hsse-hero-section {
    position: relative;
    width: 100%;
    height: 225px;
    background-image: url('../images/with text 2.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden;
    margin: -31px 0 0 0 !important;
    padding: 0;
}

.hsse-hero-section .hero-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333; /* Dark text on light background */
    /* text-shadow: 1px 1px 3px rgba(0,0,0,0.1); */
    padding-left: 15px; /* Adjust as needed for alignment */
}

/* Main HSSE Content Section */
.hsse-content-section {
    padding-top: 50px; /* Added padding top for better spacing */
    padding-bottom: 50px;
    color: #333;
   

}

.hsse-section-title {
    width:100%;
    font-size: 2rem;
    font-weight: 500;
    color: #333; /* Red accent for main sections */
    margin-bottom: 30px; /* Increased margin for better separation */
    display: flex; /* Allow icon and text to align */
    align-items: center;
    padding-left: 15px; /* Consistent padding */
    background-color: #ffcc00 !important;
    padding: 15px;
}

.hsse-section-title i {
    font-size: 2.2rem; /* Slightly larger icon for main titles */
    color: #333; /* Icon color matches section title */
    margin-right: 15px; /* Space between icon and text */
}

.hsse-card {
    border: 1px solid #eee;
    border-radius: 8px; /* Max border-radius 10px, keeping 8px */
    padding: 25px; /* Slightly increased padding for better look */
    margin-bottom: 25px; /* Increased margin for better separation */
    /* background-color: #fff;  */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; */
}

/* .hsse-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); 
} */

.hsse-sub-section-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
    display: flex; /* Align icon with text */
    align-items: center;
}

.hsse-sub-section-title i {
    font-size: 1.3rem; /* Icon size for sub-titles */
    color: #f51128; /* Icon color */
    margin-right: 10px; /* Space between icon and text */
}

.hsse-content-section p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.hsse-link {
    color: #007bff; /* Standard link color */
    text-decoration: underline;
}

.hsse-link:hover {
    color: #0056b3;
}

.hsse-list {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
}

.hsse-list li {
    font-size: 1.1rem;
    margin-bottom: 10px; /* Increased margin for list items */
    line-height: 1.5;
    padding: 8px 15px; /* Added padding to list items */
    background-color: #f9f9f9; /* Light background for list items */
    border-left: 4px solid #f51128; /* Accent border on the left */
    border-radius: 5px; /* Small border-radius for list items */
    display: flex;
    align-items: flex-start;
}

.hsse-list li .fas {
    color: #f51128; /* Red icons for list items */
    margin-right: 12px; /* Increased margin for icon */
    flex-shrink: 0; /* Prevent icon from shrinking */
    margin-top: 3px; /* Adjust icon vertical alignment */
}

.no-badge-entry {
    font-size: 1.2rem;
    font-weight: bold;
    color: #f51128 !important; /* Red for emphasis */
    margin-top: 25px; /* Increased margin */
    padding: 15px; /* Increased padding */
    border: 2px solid #f51128;
    border-radius: 8px; /* Max border-radius 10px, keeping 8px */
    display: inline-block; /* To apply padding and border correctly */
    background-color: #fff0f0; /* Very light red background for emphasis */
    box-shadow: 0 2px 8px rgba(245, 17, 40, 0.1); /* Subtle red shadow */
}
.section-divider {
    border-top: 4px solid #f51128; /* Red line */
    margin: 30px 0; /* Increased spacing above and below the line */
    border-radius: 2px; /* Small border-radius for the divider */
}

@media (max-width: 1287px){
    .hsse-hero-section {
        height: 190px;
    }
}

/* Responsive Adjustments */
@media (max-width: 767.98px) { /* Small devices (phones) */
main{
    width:100vw; 
    margin:0 auto; 
    background-color: #eeedf2;
}
    .hsse-hero-section {
        background-image: url('../images/shell-product-2.png');
        text-align: center;
        padding-left: 0;    
        padding-right: 0;
        margin: 0px !important;
    }

    .hsse-hero-section .hero-title {
        font-size: 1.8rem;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }

    .hsse-content-section {
        padding-left: 15px;
        padding-right: 15px;
       

    }

    .hsse-section-title {
        font-size: 1.7rem;
        /* text-align: center; */
    }

    .hsse-sub-section-title {
        font-size: 1.3rem;
    }

    .hsse-content-section p,
    .hsse-list li {
        font-size: 1rem;
    }

    .no-badge-entry {
        font-size: 1rem;
        padding: 10px; /* Adjusted padding for mobile */
    }
    .hsse-section-title i {
        font-size: 1.8rem; /* Adjusted icon size for mobile */
    }
    .hsse-sub-section-title i {
        font-size: 1.1rem; /* Adjusted icon size for mobile */
    }
}