.job-inner-heading {
    padding-block:4rem;
    background-color: #E2F6FF;
}
.job-inner-heading h1 {
    height: 300px;
    font-size: 40px;
    width: 300px;
    border: 18px solid #18AACA;
    outline: 20px solid #a5dfeb;
    text-align: center;
    border-radius: 50%;
    margin: auto;
    align-content: center;
    color: #333333;
    padding: 25px;
}
progress {
    width: 60%;
    height: 25px;
    border-radius: 10px;
    background-color: #D9D9D9;
    border: 0;
}

progress::-webkit-progress-bar {
    background-color: #eee9e9; 
    border-radius: 5px;
}

progress::-webkit-progress-value {
    background-color: #A5DFEF;
    border-radius: 5px;
}
.job-inner-content {
    padding: 2rem;
}
.job-title,.job-roles,.job-requirements,.job-skills {
    font-size: 18px;
    line-height: 24px;
}
.job-title p,.job-roles p,.job-requirements p,.job-skills p,.job-roles ul,.job-requirements ul,.job-skills ul {
    font-size: 14px;
    line-height: 24px;
}
.job-skills {
    max-width: 767px;
}
.job-details-progress {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr; 
    padding: 10px;
    align-items: center;
  }
  
ul {
    padding-inline-start: 12px;
}
.css-clock{
        width:24px;
        height: 24px;
        border-radius: 50%;
        background-color: #fff ;
        position: relative;
        display:block;
        border: 2px solid #000;
    }
        .css-clock::before {
        content: "";
        content: "";
        height: 9px;
        width: 2px;
        background-color: #000;
        display: block;
        position: absolute;
        left: 11px;
        top: 4px;
        opacity: 1;
        }
        .css-clock::after{
        content: "";
        height: 6px;
        width: 2px;
        background-color: #000;
        display: block;
        position: absolute;
        top: 11px;
        left: 13px;
        transform: rotate(125deg);
        opacity: 1;
        }
    .wrapper, .location-container {
        display: flex;
        gap:16px;
        align-items:center;
    }
.location {
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 20px 20px 20px 0;
    transform: rotate(315deg);
    position: relative;
}
.location span {
    position: absolute;
    border: 2px solid #000;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    left: 5px;
    top: 6px;
}
.location-container {
    padding:1.5rem 0 0 2rem;
}
.loc-display {
    font-size: 20px;
}
.loc-display span {
    font-weight: 600;
}
.loc-display-based {
    border-right: 1px solid #000;
    padding-right: 16px;
}
.job-apply {
    width: fit-content;
    margin: auto !important;
}
@media screen and (min-width: 767px) and (max-width: 992px) { 
    .job-inner-heading h1 {
        height: 200px;
        width: 200px;
        font-size: 32px;
    }
    .job-inner-heading {
        padding-block: 8rem 4rem;
    } 
}
@media screen and (max-width: 767px) {
    .job-details-progress {
        grid-template-columns: 1fr; 
        padding-inline-start: 0;
    }
    .job-inner-heading h1 {
        height: 150px;
        width: 150px;
        font-size: 28px;
    }
    .job-inner-heading {
        padding-block: 8rem 4rem;
    } 
    progress {
        width: 90%;
    }
    .location-container {
        flex-wrap:wrap;
        gap: 8px;
    }
    .wrapper {
        gap: 8px;
    }
    .loc-display {
        font-size: 16px;
    }
    .loc-display-based { 
        border: 0;
    }
}