.custom-badge {
    display: inline-block;
    padding: 2px 5px;
    margin: 2px;
    border-radius: 5px;
    background-color: #007bff; /* Adjust color as needed */
    color: white;
    font-size: 14px;
    text-align: center;
}

.custom-badge:hover {
    background-color: #0056b3; /* Darker shade for hover effect */
    cursor: pointer;
}

/*============ job card start =============*/
/* Ensuring the card image covers the full space */
.card-img-top {
    height: 200px;          /* Fixed height for uniformity */
    width: 100%;            /* Ensures the image container fills the width */
    object-fit: contain;    /* Keeps the aspect ratio and shows the entire image */
    display: block;         /* Ensures image behaves as a block-level element */
    margin-left: auto;      /* Centers the image horizontally */
    margin-right: auto;     /* Centers the image horizontally */
}

.card-title{
    height: auto;
}
.card-title h2 {
    font-size: 16px; /* Default for desktop */
}

@media (max-width: 768px) {
    .card-title h2 {
        font-size: 13px; /* Font size for mobile devices */
    }
}

.capitalize {
    text-transform: capitalize; /* Capitalizes the first letter of each word */
}

/*============job card end ===============*/
.category-card {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}

.category-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.category-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
}

.category-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

.category-count {
    font-size: 1rem;
    color: #666;
    margin-top: 5px;
}

a {
    text-decoration: none;
}

a:hover .category-title {
    color: #007bff; 
}


/*====================== Job detail page*/

.side-bar-area .d-flex {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.icon-space {
    font-size: 20px;
    color: #007bff; /* Optional: Icon color */
    min-width: 30px; /* Ensures icons take the same space */
    margin-right: 10px;
}

.side-bar-area h6 {
    font-weight: 600;
    margin: 0 0 5px 0;
}

.side-bar-area p {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
    text-transform: capitalize;
}

ul.list-unstyled {
    padding-left: 0;
}

.side-bar-area {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
}

.side-bar-area li {
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

.side-bar-area li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.job-heading {
    padding: 20px;
    border-radius: 8px;
    color: #fff;
}

.job-pic img {
    width: 100%; 
}

.job-details {
    text-transform: capitalize;
}

.job-details h1, h3 {
    margin: 0;
    font-size: 24px;
    color: #fff;
}

.job-details p {
    margin: 5px 0;
    color: #fff;
}

.right-side p {
    margin: 0;
    font-size: 14px;
    color: #fff;
}

/* Updated Media queries for responsiveness */
@media (max-width: 768px) {
   .inner-banner2{
      padding-top: 100px;
  }
}
/* Updated Media queries for responsiveness */
@media (max-width: 768px) {
    .job-heading {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center items horizontally */
        text-align: center; /* Center text */
    }

    .left-side {
        display: flex;
        flex-direction: column; /* Stack image and details */
        width: 100%; /* Full width */
        align-items: center; /* Center content in left-side */
        margin-bottom: 15px; /* Spacing below the left section */
    }

    .job-pic {
        margin-bottom: 15px; /* Add space below the image */
        width: 100%; /* Ensure image takes full width */
        text-align: center; /* Center the image */

    }

    .job-pic img {
        max-width: 150px; /* Limit image size */
        width: auto; /* Ensure image auto-sizes while maintaining aspect ratio */
    }

    .job-details {
        text-align: center; /* Center-align job details */
    }

    .job-details h3 {
        font-size: 20px; /* Adjust heading size */
        margin-bottom: 10px;
    }

    .job-details p {
        font-size: 14px; /* Adjust paragraph size */
    }

    .right-side {
        width: 100%; /* Full width on mobile */
        text-align: center; /* Center text */
        margin-bottom: 15px; /* Add spacing below right-side */
    }

    .right-side a {
        width: 100%; /* Full width button */
        text-align: center; /* Center button text */
    }
}

@media (max-width: 576px) {
    .job-details h3 {
        font-size: 18px; /* Further reduce heading size for very small screens */
    }

    .right-side p {
        font-size: 12px; /* Smaller font for application end date */
    }
}

/*=============== job detail page end=====================*/