/* Fix 1: Container Constraints to fix "beyond pages" glitches */
.content-section {
    position: relative;
    overflow-x: hidden;
    width: 100%;
}

/* Recruitment Card Layout - default (image left, details right) */
.recruitment-card {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 3.75rem;
}

.recruitment-card__image {
    flex: 0 0 45%;
    max-width: 45%;
}

.recruitment-card__details {
    flex: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .content-section {
        overflow-x: auto;
        padding: 0 16px;
    }
    
    .content-section .row {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .content-section .col-12,
    .content-section [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    .recruitment-card {
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }
    
    .recruitment-card__image,
    .recruitment-card__details {
        width: 100%;
        max-width: 100%;
        flex: none;
    }
    
    .recruitment-card__image img {
        width: 100%;
        height: auto;
    }
    
    .content-wrapper,
    .container {
        width: 100%;
        max-width: 100%;
        padding: 0 16px;
    }
}

    .content-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: none; /* linear-gradient(#fff 0%, #f1f4f4 50%, #fff 100%); */
        opacity: 0.7;
        z-index: -1;
    }

.recruitment-card__title {
    line-height: 1.5;
    margin-bottom: 1.875rem;
    color: #161616;
}

.recruitment-card {
    display: flex;
    align-items: flex-start;
    margin-bottom: 3.75rem;
}

.btn-neutral-100 {
    align-items: center;
    background-color: #f3f4f6;
    border: 0 solid transparent;
    border-radius: .25rem;
    color: #161616;
    cursor: pointer;
    display: flex;
    font-weight: 500;
    gap: 4px;
    height: -moz-fit-content;
    height: fit-content;
    justify-content: center;
    outline: none;
    outline: unset;
    text-decoration: none;
    transition: .4s;
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
}

    .btn-neutral-100:hover {
        background-color: #e5e7eb;
        border-color: #e5e7eb;
        color: #161616;
        text-decoration: none;
    }

.btn-lg.btn-arrow:before,
.menu-display-block.menu-display-block--icons .navbar-nav .menu-item a.btn-arrow:before,
.menu-display-block.menu-display-block--icons .navbar-nav .menu-item span.btn-arrow:before {
    color: inherit;
    content: "\e904";
    font-family: saud-icons !important;
    font-size: .75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-transform: none;
    transition: .3s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn-lg.btn-arrow,
.menu-display-block.menu-display-block--icons .navbar-nav .menu-item a.btn-arrow,
.menu-display-block.menu-display-block--icons .navbar-nav .menu-item span.btn-arrow {
    align-items: baseline;
    display: flex;
    gap: 10px;
}

.btn-lg,
.menu-display-block.menu-display-block--icons .navbar-nav .menu-item a,
.menu-display-block.menu-display-block--icons .navbar-nav .menu-item span {
    font-size: 1rem;
    line-height: 1rem;
    padding: 14px 1rem;
}

[class*=" icon-"],
[class^=icon-] {
    font-family: saud-icons !important;
    speak: never;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[dir=rtl] [class*=" icon-"].reverse:after,
[dir=rtl] [class*=" icon-"].reverse:before,
[dir=rtl] [class^=icon-].reverse:after,
[dir=rtl] [class^=icon-].reverse:before {
    transform: scaleX(-1);
}

body .btn.btn-primary {
    background-color: #1b8354;
    border-color: #1b8354;
    max-width: max-content;
    color: #fff;
}

body .btn {
    border-radius: 4px;
    padding: .5rem 1rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 500;
    text-decoration: none !important;
}

    /* DGA code-platform button states — default #1b8354 (sa-flag-600) /
       hovered #166a45 (700) / pressed #104631 (900). */
    body .btn.btn-primary:hover {
        background-color: #166a45 !important;
        border-color: #166a45 !important;
    }

    body .btn.btn-primary:active {
        background-color: #104631 !important;
        border-color: #104631 !important;
    }

.no-jobs-message {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 22px;
    color: #1f2a37;
    padding-block: 3.75rem;
}

/* Fix 2: Modern Centering Wrapper (Replaces <center> tag) */
.btn-wrapper {
    display: flex;
    justify-content: center;
    padding-top: 30px;
}

/* Arabic */
.breadcrumb {
    direction: rtl;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: #333;
    padding: 8px 12px;
    background: #f3fcf6 !important;
    padding-right: 5%;
}

/* English */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: #333;
    padding: 8px 12px;
    background: #f3fcf6 !important;
    padding-right: 5%;
}

hr {
    margin: 0px !important;
    color: #f3fcf6 !important;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: .25;
    /* background: #f3fcf6; */
}