.text-center{
    text-align:center;
}

.mt-lg{
    margin-top:var(--space-lg);
}

.hidden{
    display:none;
}


.read-more {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}
.job-card .read-more {
    margin-left: auto;
    margin-top: auto;
    margin-right: 2rem;
}
.read-more__text {
    color: lab(66.46% 44.3 73.68);
    transition: color 0.3s ease;
    font-size: 1.2rem;
}

.read-more__icon {
    width: 2.625rem;
    height: 2.625rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.read-more__circle {
    fill: #EEF0F3;
    transition: fill 0.3s ease;
}

.read-more__arrow {
    fill: #001E5A;
    transition: fill 0.3s ease;
}

.read-more:hover .read-more__text {
    color: #001E5A;
}

.read-more:hover .read-more__circle {
    fill: #FF7D00;
}

.read-more:hover .read-more__arrow {
    fill: #FFFFFF;
}

.read-more:hover .read-more__icon {
    transform: translateX(6px);
}

/* Visually hidden but available to screen readers (skip link, loader text).
   The theme used these classes without defining them, so "Skip to content"
   and "Loading..." rendered as visible text at the top of the page. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #fff;
    clip: auto !important;
    clip-path: none;
    color: #001E5A;
    display: block;
    font-size: 1rem;
    font-weight: 600;
    height: auto;
    left: 8px;
    padding: 12px 20px;
    text-decoration: none;
    top: 8px;
    width: auto;
    z-index: 100000;
}