/* update for benefit mobile*/
.gap-16px {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* Define columns for the grid */
    gap: 24px;
    /* Set gap for spacing */
}

.item1 {
    grid-column: span 2;
    /* Item 1 spans 2/3 of the row */
}

.hr-lg-mobile {
    margin: 0;
    width: 42px;
    border: 3px solid #45E8FF;
    display: block;
    opacity: 1;
    visibility: visible;
    transition: none;
}

.number-benefits-mobile {
    font-family: Noto Sans;
    font-size: 48.83px;
    font-weight: 700;
    line-height: 61.04px;
    text-align: left;
    color: #45E8FF;
}

.pd-benefit-custom {
    padding: 8px 32px 40px 32px !important;
}

.img-benefits {
    position: relative;
    width: 100%;
    height: 155px;
    overflow: hidden;
}

    .img-benefits img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .img-benefits .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(0deg, rgba(1, 5, 29, 0.8) 4.5%, rgba(1, 5, 29, 0.2) 35.75%, rgba(255, 255, 255, 0) 67%);
    }

.min-h-315 {
    min-height: 315px;
}

.bg-benefits-mobile {
    background-color: #050C34;
}

/**/




/* COMMON CLASS */
.overflow-clip {
    overflow: clip;
}

@media screen and (max-width: 1025px) {
    .color-blur {
        color: #FFF !important;
    }
}

p.content-lg span {
    font-weight: 600 !important;
}

.ag_about_us_details_our_culture-cus:hover h2,
.ag_about_us_details_our_culture-cus:hover p {
    color: #ffffff;
    transition: color 0.3s ease;
}

.color-blur {
    color: #FFFFFF4D;
}

.mobile-hide-breakpoint {
    display: none;
}

.zoom-hover {
    transition: transform 0.3s ease;
}

    .zoom-hover:hover {
        transform: scale(1.2);
    }

.white {
    color: white !important;
}

.m-60px {
    margin: 60px 0 !important;
}

.mt-40px {
    margin-top: 40px !important;
}

.bg-color-blue {
    background: linear-gradient(70.15deg, #043DA8 10.42%, #1E66D8 64.06%, #3286FD 100%);
}

.primary-button {
    background: none !important;
    border: 2px solid rgba(69, 232, 255, 1) !important;
}

.p-bt-100px {
    padding: 100px 0 !important;
}

.mt-80px {
    margin-top: 80px !important;
}

.pt-80px {
    padding-top: 80px !important;
}

.gray-800 {
    color: #646970 !important;
}

.blue {
    color: #066BFC !important;
}

.gray-900 {
    color: #21272D !important;
}

.slate-gray {
    color: #394049 !important;
}

.mb-28px {
    margin-bottom: 28px !important;
}

.mb-27px {
    margin-bottom: 27px !important;
}

.mb-24px {
    margin-bottom: 24px !important;
}

.mb-64px {
    margin-bottom: 64px !important;
}

.mb-8px {
    margin-bottom: 8px !important;
}

.pb-40px {
    padding-bottom: 40px !important;
}

.pt-40px {
    padding-top: 40px !important;
}

.p-40-20 {
    padding: 40px 20px !important;
}

.m-wh-100 {
    max-width: 100% !important;
    max-height: 100% !important;
}

.mw-946px {
    max-width: 946px !important;
}

.bg-color-light-blue {
    background-color: #F2F7FF !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

/* BANNER */
.header__breadcrumb {
    font-size: 14px;
    font-weight: 600;
    line-height: 19.6px;
    position: relative;
    z-index: 1;
    top: 149px;
    left: 80px;
    color: #fff;
}

.fw-title-bold {
    font-size: 61.04px !important;
    line-height: 76.3px !important;
    font-weight: 700 !important;
    margin-bottom: 32px !important;
    font-family: var(--font-family-primary);
}

.fw-sub-title {
    margin-bottom: 0;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    font-family: var(--font-family-primary);
}

.breadcrumb-parents {
    color: #FFFFFF;
}

    .breadcrumb-parents:hover {
        color: #FFFFFF;
        text-decoration: underline;
        cursor: none;
    }

.breadcrumb-link {
    color: #FFFFFF80;
}

    .breadcrumb-link:hover {
        color: #FFFFFF80;
        text-decoration: none;
        cursor: none;
    }

.breadcrumb-divider {
    color: #45E8FF;
}

.hero-section {
    margin: auto;
    background: linear-gradient(350.57deg, #043DA8 27.8%, #1E66D8 78.32%, #3286FD 116.77%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/files/Users/1/Resume/Career.png');
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-container {
    position: relative;
    z-index: 1;
}

.hero-content {
    font-size: 61.04px !important;
    line-height: 76.3px !important;
    font-weight: 700 !important;
    margin-bottom: 32px !important;
    font-family: var(--font-family-primary);
    color: #fff;
}

.hero-subtitle {
    margin-bottom: 0;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    font-family: var(--font-family-primary);
    color: #fff;
}

/* CORE VALUES */
.culture-breadcrumb {
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 22.4px !important;
}

.bg-value-banner {
    margin: auto;
    background-image: linear-gradient(rgba(70, 70, 74, 0.85), rgba(70, 70, 74, 0.85)), url('/Themes/Oqtane.Theme.Arsha/assets/img/passion-1.png');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.title-value-banner {
    font-weight: 700 !important;
    font-size: 39.06px !important;
    line-height: 43.75px !important;
}

.sub-title-value-banner {
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 28px !important;
}

.content-value-banner {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
}

.bordered-bottom {
    border-bottom: 1px solid #45E8FF;
}

.bordered-top {
    border-top: 1px solid #45E8FF;
}

.col-2 {
    width: 17.666667%;
}

/* BENEFITS */
/* Base Styles */
.bg-benefits {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    height: 400px;
    /* Ensures content does not overflow */
    transition: background-image 0.8s ease-in-out, background-size 0.8s ease-in-out;
}

    .bg-benefits::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(0deg, rgba(1, 5, 29, 0.8) 4.5%, rgba(1, 5, 29, 0.2) 35.75%, rgba(255, 255, 255, 0) 67%);
        z-index: 1; /* Ensure the overlay is above the image */
        transition: background 0.3s ease;
    }

.p-benefits {
    padding: 226px 28px 27px 29px !important;
    transition: none;
    /* Padding change should be instant */
}

.number-benefits {
    font-weight: 700 !important;
    font-size: 39.06px !important;
    line-height: 54.68px !important;
    color: #3DD9F3 !important;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.hr-lg {
    width: 42px;
    border: 3px solid #45E8FF;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    display: none;
}

.additional-info {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 21px !important;
}

.w-4 {
    width: 558px;
}

.w-2 {
    width: 267px;
}

/* RESPONSIVE */
@media screen and (max-width: 3000px) {

    /* COMMON CLASSES */
    .ml {
        margin-left: 10rem !important;
    }

    .mr {
        margin-right: 10rem !important;
    }

    .mb-40px {
        margin-bottom: 40px !important;
    }

    .mb-16px {
        margin-bottom: 16px !important;
    }

    .mb-100px {
        margin-bottom: 100px !important;
    }

    .mb-80px {
        margin-bottom: 80px !important;
    }

    .gap-80px {
        display: flex;
        gap: 80px;
    }

    .gap-56px {
        display: flex;
        gap: 56px;
    }

    .gap-24px {
        display: flex;
        gap: 24px;
    }

    .gap-8px {
        display: flex;
        gap: 8px;
    }

    .mt-387px {
        margin-top: 387px !important;
    }

    .title-lg {
        font-weight: 700 !important;
        font-size: 48.83px !important;
        line-height: 61.04px !important;
    }

    .content-lg {
        font-weight: 400 !important;
        font-size: 16px !important;
        line-height: 24px !important;
        color: #394049 !important;
    }

    .content-title-lg {
        font-weight: 700 !important;
        font-size: 25px !important;
        line-height: 35px !important;
        color: #066BFC !important;
    }

    /* OVERVIEW */
    .ov-title {
        color: #010E54 !important;
        padding-bottom: 40px !important;
    }

    .sticky-title {
        position: sticky;
        top: 86px;
        /* Adjust this value to set the sticky point */
        z-index: 3;
        /* Ensure it stays above other content */
        background-color: white;
    }

    .max-wh-career-ov-1 {
        width: 463px;
        height: 660px;
    }

    .max-wh-career-ov-2 {
        width: 460px;
        height: 493px;
    }

    .max-wh-career-ov-3 {
        width: 750px;
        height: 576px;
        max-width: none;
    }

    .gap-x-80px {
        column-gap: 80px !important;
    }
}

@media screen and (min-width: 992px) {
    .bg-benefits:hover {
        background-size: 120%;
        /* Adjust the scale as needed */
        padding: 82px 28px 93px 29px !important;
        /* Padding change happens instantly */
    }

    .bg-benefits:hover {
                background-size: 120%; /* Scale the image */
                padding: 82px 28px 93px 29px !important;
            }

            .bg-benefits:hover::after {
                background: linear-gradient(180deg, rgba(1, 5, 29, 0.8) 14%, #066BFC 100%);
            }

    .bg-benefits:hover .number-benefits {
        display: none;
        opacity: 0;
        visibility: hidden;
    }

    .sub-hover {
        margin: 0;
    }

    .bg-benefits:hover .additional-info {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .bg-benefits:hover .hr-lg {
        display: block;
        opacity: 1;
        visibility: visible;
        margin: 20px 0;
    }
}

@media screen and (max-width: 991px) {

    .hero-section {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/files/Users/1/Resume/Career-mobile.png');
        height: 100%;
    }

    /* COMMON CLASSES */
    .title-md {
        font-weight: 700 !important;
        font-size: 39.06px !important;
        line-height: 48.8px !important;
    }

    .mb-40px-md {
        margin-bottom: 40px !important;
    }

    .pb-24px-md {
        padding-bottom: 24px !important;
    }

    .pt-24px-md {
        padding-top: 24px !important;
    }

    .gap-40px-md {
        display: flex;
        gap: 40px;
    }

    .gap-16px-md {
        display: flex;
        gap: 16px;
    }

    .m-rl-15px {
        margin: 0 15px !important;
    }

    .mw-946px {
        max-width: 720px !important;
    }

    /* BANNER */
    .fw-sub-title {
        font-size: 14px !important;
        line-height: 19.6px !important;
    }

    .fw-title-bold {
        font-size: 48.83px !important;
        line-height: 61px !important;
    }

    /* OVERVIEW */
    .max-wh-career-ov-1-md {
        width: 280px;
        height: 400px;
    }

    .max-wh-career-ov-2-md {
        width: 261px;
        height: 280px;
    }

    .max-wh-career-ov-3-md {
        width: 364px;
        height: 260px;
    }

    /* CULTURE */
    .title-value-banner {
        font-size: 31.25px !important;
        line-height: 43.75px !important;
    }

    .col-md-3 {
        width: 25%;
    }

    /* BENEFITS */
    /* Base Styles */
    .bg-benefits {
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        height: 305px;
        width: 318px;
    }

    .p-benefits {
        padding: 24px !important;
    }

    .number-benefits {
        font-weight: 700 !important;
        font-size: 25px !important;
        line-height: 35px !important;
        color: #3DD9F3 !important;
    }

    .hr-lg {
        width: 42px;
        border: 3px solid #45E8FF;
        display: block;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .additional-info {
        display: block;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .bg-benefits-1 {
        background-image: linear-gradient(180deg, rgba(1, 5, 29, 0.8) 14%, #066BFC 100%), url('/Themes/Oqtane.Theme.Arsha/assets/img/benefit-1.png');
    }

    .bg-benefits-2 {
        background-image: linear-gradient(180deg, rgba(1, 5, 29, 0.8) 14%, #066BFC 100%), url('/Themes/Oqtane.Theme.Arsha/assets/img/benefit-2.png');
    }

    .bg-benefits-3 {
        background-image: linear-gradient(180deg, rgba(1, 5, 29, 0.8) 14%, #066BFC 100%), url('/Themes/Oqtane.Theme.Arsha/assets/img/benefit-3.png');
    }

    .bg-benefits-4 {
        background-image: linear-gradient(180deg, rgba(1, 5, 29, 0.8) 14%, #066BFC 100%), url('/Themes/Oqtane.Theme.Arsha/assets/img/benefit-4.png');
    }

    .bg-benefits-5 {
        background-image: linear-gradient(180deg, rgba(1, 5, 29, 0.8) 14%, #066BFC 100%), url('/Themes/Oqtane.Theme.Arsha/assets/img/benefit-5.png');
    }

    .bg-benefits-6 {
        background-image: linear-gradient(180deg, rgba(1, 5, 29, 0.8) 14%, #066BFC 100%), url('/Themes/Oqtane.Theme.Arsha/assets/img/benefit-6.png');
    }
}

@media screen and (max-width: 575px) {

    /* COMMON CLASSES */
    .pt-0-sm {
        padding-top: 0 !important;
    }

    .p-sm-0 {
        padding: 0 !important;
    }

    .p-15px-sm {
        padding: 0 15px !important;
    }

    .mb-16px-sm {
        margin-bottom: 16px !important;
    }

    .mb-24px-sm {
        margin-bottom: 24px !important;
    }

    .pb-0-sm {
        padding-bottom: 0 !important;
    }

    .gap-0-sm {
        gap: 0 !important;
    }

    .gap-16px-sm {
        display: flex;
        gap: 16px;
    }

    .gap-32px-sm {
        gap: 32px !important;
    }

    .pt-0-md {
        padding-top: 0 !important;
    }

    .mb-60px-sm {
        margin-bottom: 60px !important;
    }

    .mt-60px-sm {
        margin-top: 60px !important;
    }

    .p-bt-100px {
        padding: 60px 0 !important;
    }

    .mw-946px {
        max-width: 540px !important;
    }

    .col-sm-10 {
        width: 83.33%;
    }

    /* BANNER */
    .header__breadcrumb {
        width: 250px;
        top: 110px;
        left: 15px;
    }

    .fw-title-bold {
        font-size: 39.06px !important;
        line-height: 48.8px !important;
    }

    /* OVERVIEW */
    .title-sm {
        font-weight: 700 !important;
        font-size: 31.25px !important;
        line-height: 39px !important;
    }

    .content-sm {
        font-weight: 400 !important;
        font-size: 14px !important;
        left: 21px !important;
        order: 2;
    }

    .content-title-sm {
        font-weight: 600 !important;
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .max-wh-career-ov-sm {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .sticky-title {
        position: relative;
        top: 0;
    }

    .object-position-top {
        object-position: top;
    }

    /* CULTURE */
    .culture-breadcrumb-sm {
        font-size: 14px !important;
        line-height: 19.6px !important;
    }

    .culture-content-sm {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    .title-value-banner {
        font-size: 25px !important;
        line-height: 35px !important;
    }

    .sub-title-value-banner {
        font-size: 16px !important;
        line-height: 22.4px !important;
    }

    .content-value-banner {
        font-size: 14px !important;
        line-height: 21px !important;
    }

    .stack {
        position: sticky;
        top: 90px;
    }
}

@media screen and (max-width: 1025px) {

    /* COMMON CLASSES */
    .ag_about_us_details_our_culture-cus {
        pointer-events: none !important;
    }

    .desktop-hide-breakpoint {
        display: none !important;
    }

    .mobile-hide-breakpoint {
        overflow: hidden;
        display: block;
    }
}