/* Hero section headline */
h2 {
    font-size: 38px;
    font-weight: bold;
    margin-top: 20px;
}

/* Blockquote Styling */
blockquote {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    margin-top: 20px;
}

blockquote p {
    margin-bottom: 10px;
}

/* ******* Custom Design for SN-BREADCRUMBS ******* */
/* Default (Desktop) - Ensures proper alignment */
/* Ensure the breadcrumb container aligns dynamically */
.sn-breadcrumb-container {
    position: absolute;
    top: 100px; /* Keep the top position */
    left: auto; /* Remove fixed left value */
    right: 0; /* Align to the left automatically */
    z-index: 3;
    margin-left: 2px;
}

/* Make it follow the logo's left padding */
@media (min-width: 769px) { 
    .sn-breadcrumb-container {
        left: clamp(15px, 10%, 113px); /* Dynamically adjust between 15px and 113px */
    }
}

/* Mobile View */
@media (max-width: 768px) {
    .sn-breadcrumb-container {
        top: 100px !important;
        left: 14px; /* Keep it aligned for smaller screens */
        font-size: 14px;
    }
}


/* Default Light Version (White Text) */
.sn-breadcrumbs-lite {
    font-size: 13px;
    color: white;
    font-weight: bold;
}

.sn-breadcrumbs-lite a {
    color: white;
    text-decoration: none;
}

.sn-breadcrumbs-lite span.separator {
    color: #ccc;
    /* Light grey separator */
    font-weight: bold;
    margin: 0 8px;
    /* Ensure spacing between breadcrumbs */
}

/* Current Page (No <a>, Reduced Color & Underline) */
.sn-breadcrumbs-lite span.current {
    color: rgba(255, 255, 255, 0.7);
    /* Slightly faded */
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    /* Tiny underline */
    padding-bottom: 2px;
}

/* Dark Version (Black/Grey Text for White Backgrounds) */
.sn-breadcrumbs-dark {
    font-size: 13px;
    color: #333;
    /* Dark text */
    font-weight: bold;
}

.sn-breadcrumbs-dark a {
    color: #333;
    text-decoration: none;
}

.sn-breadcrumbs-dark span.separator {
    color: #888;
    /* Grey separator */
    font-weight: bold;
    margin: 0 8px;
    /* Ensure spacing between breadcrumbs */
}

/* Current Page (No <a>, Reduced Color & Underline) */
.sn-breadcrumbs-dark span.current {
    color: rgba(51, 51, 51, 0.7);
    /* Slightly faded */
    border-bottom: 1px solid rgba(51, 51, 51, 0.5);
    /* Tiny underline */
    padding-bottom: 2px;
}
/* ******* End Custom Design for SN-BREADCRUMBS ******* */

/* Hero section content positioning */
.hero {
    position: relative;
    padding-top: 60px;
    /* Adjust for breadcrumbs height */
}

#hero-footer {
    min-height: auto;
    /* Adjust height automatically */
    padding: 100px 0;
    /* Adds spacing above and below */
    display: flex;
    /* Helps align content properly */
    align-items: center;
    /* Centers content vertically */
    justify-content: center;
    /* Centers content horizontally */
    text-align: left;
    /* Ensures text is centered */
}

/* ******* Custome Design in product page ******* */
.card {
    border: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Ensures all cards have the same height */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
}

.card img {
    width: 100%;
    height: auto;
    /* Keeps original aspect ratio */
    max-height: 300px;
    /* Prevents images from getting too large */
    object-fit: contain;
    /* Ensures the full image is visible without cropping */
    background-color: #f8f9fa;
    /* Optional: Light gray background for consistency */
    padding: 10px;
    /* Adds spacing inside the image area */
}

.card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Keeps text aligned */
}

.card-title {
    font-size: 1.0rem;
    font-weight: 600;
}

.card-text {
    font-size: 0.9rem;
    color: #666;
    text-align: left;
    flex-grow: 1;
    /* Ensures all text sections take equal space */
    display: flex;
    align-items: flex-start;
    /* Forces text to stick to the top */
}

/* ******* Custom Table Design in tender & career page ******* */
/* Ensures the table structure behaves properly */
.table {
    table-layout: fixed;
    width: 100%;
}

/* Properly handles text wrapping inside the table */
td,
th {
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* Specifically target the Tender Name column */
.tender-name {
    font-size: 12px;
    max-width: 300px;
    /* Prevents it from becoming too wide */
    min-width: 250px;
    /* Ensures minimum width */
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-word;
}

/* Specifically target the Tender Name column */
.tender-id, .career-id {
    font-size: 11px;
    text-align: center !important;
}

/* Adjustments for Mobile View */
@media (max-width: 768px) {
    .tender-name {
        max-width: 100%;
        /* Allows the column to take full width */
        min-width: unset;
        /* Resets min-width to avoid restriction */
    }

    /* Ensure all table columns adapt on small screens */
    .table-responsive {
        overflow-x: auto;
    }
}