#footer ul li a,
#footer ul li p,
#footer h5 {
    color: #FFFFFF !important;
}

#footer ul li a:hover {
    color: #FFFFFF !important;
}

.bg-video {
    position: fixed;
    right: 0;
    bottom: 0;
}

.footer-copyright p {
    color: #FFFFFF !important;
}

.bg-page {
    background-image: linear-gradient(180deg, rgb(255 255 255 / 85%) 0%, rgb(255 255 255) 85%), url(../../../storage/image/webp/background-batik.webp); 
}

.bg-home-page {
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
}

.bg-home-article {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

.bg-home-career {
    background-size: contain; 
    background-position: top center; 
    background-repeat: no-repeat;
}

.bg-home-contact {
    background-image: linear-gradient(180deg, rgb(255 255 255 / 91%) 0%, rgb(255 255 255) 100%), url(../../../storage/image/webp/background-batik.webp); 
    background-size: cover; 
    background-position: top center;
    background-repeat: no-repeat;
}

#footer {
    background-image: linear-gradient(0deg, rgba(0, 48, 79, 0.80) 0%, rgba(0, 48, 79, 0.80) 100%), url("/storage/image/webp/bg-footer.webp");
    background-size: cover;
    background-position: center;
    max-width: 100%;
}

#footer > .footer-copyright {
    background: unset !important;
}

.btn-call-action {
    /* Button */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 34px;
    gap: 10px;

    width: 187px;
    height: 45px;

    background: #006FB4;
    border-radius: 4px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;


    /* See job vacant */

    width: 119px;
    height: 20px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    /* identical to box height */

    color: #FFFFFF;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

/* width */
::-webkit-scrollbar {
    width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: none; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #0088CC; 
    border-radius: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #0088CC; 
    border-radius: 4px;
}

.article-sub-string {
    width: 25rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.what-do-image {
    width: 27rem; 
    height: 18rem; 
    object-fit: cover; 
}

.gradient-image-right {
    background-image: 
        linear-gradient(90deg, #FAFAFA 40%, rgba(250, 250, 250, 0) 100%), 
        url('/storage/image/life-at-2.JPG'); 
    background-size: cover; 
    background-position: center;
}

.bg-header {
    background-color: #EEEEEE !important;
}

.bg-grey-section {
    background: #F5F5F5 !important;
}

.banner-box {
    position: relative;
    height: 100%;
    padding: 0;
    overflow: hidden !important;
}

.banner-content-box {
    margin-left: -5rem;
    z-index: 1;
}

.banner-image {
    width: 100%;
    height: max(25rem, 24.5vw);
    -o-object-fit: cover;
    object-fit: cover;
    border: 2px solid white;
}

.banner-gradient {
    height: 101%;
    width: 100%;
    position: absolute;
    /* right: -5px; */
    bottom: 0;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.banner-text {
    margin: 1.75rem 0;
}

.img-bg-home {
    object-fit: cover;
    border-radius: 8px;
    width: 20rem;
    max-width: unset !important;
}

.line-height-1 {
    line-height: 1.2;
}

.bg-blue-sky {
    background: #DDF2FF !important;
}

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

.bg-blue-light-sky {
    background: #F3FBFF !important;
}

.text-light {
    color: var(--text-light) !important;
}

.text-light-dark {
    color: var(--text-light-dark) !important;
}

.card-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-img-top {
    max-height: 14rem;
    object-fit: cover;
}

.img-galery {
    border-radius: 0px !important;
    width: auto;
    height: 315px;
    object-fit: cover;
}

.card-body-life-at {
    height: 35rem !important;
}

.card-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-absolute {
    position: absolute;
    top: 6.5rem;
}

.fs-title-home {
    font-size: 5.25rem !important;
}

.fs-desc-home {
    font-size: 1.75rem !important;
    line-height: 2.133rem !important;
}

.navbar-background {
    background-color: #000000CC !important;
    backdrop-filter: blur(2px);
}

.custom-hero-font-1 {
    font-size: clamp(28px, 0px + 0.0583333333* 100vw, 70px);
    line-height: 1.1;
}

.custom-hero-heading {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0) 100%);
}

.custom-hero-bg {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.custom-grid-1 {
    margin-top: -130px;
    position: relative;
}

.grid-geo-life {
    margin-top: -290px;
    position: relative;
}

.text-primary {
    color: var(--text-primary);
}

.bg-color-none {
    background-color: unset !important;
}

.float-end {
    float: inline-end;
}

.img-certified {
    width: 27% !important;
}

.card-news {
    position: relative;
    border: 1.5px #DEE2E6 solid;
    height: 25rem;
}

.card-news:hover{
    border: 1.5px var(--primary) solid;
}

/* .card-news:hover .card-title{
    font-weight: 500 !important;
    transition: font-weight 0.3s ease !important;
} */

.text-language {
    font-size: 14px;
}

.background-page-height {
    /* min-height: 58vh !important; */
    padding-top: 9.25rem;
    padding-bottom: 4.25rem;
}

.fs-title-page {
    font-size: 3rem !important;
}

.fs-desc-page {
    font-size: 1.5rem !important;
}

.align-item-end {
    align-items: end;
}

.search-form-wrapper > input {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

.search-form-wrapper > .search-form-select-wrapper {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.text-right-description {
    text-align: right !important;
}

.text-right-center {
    text-align: right !important;
}

.text-left-center {
    text-align: left !important;
}

.custom-grid-1 .container .row {
    margin: 0;
}

.container-padding {
    padding-top: 3.375rem !important;
    padding-bottom: 3.375rem !important;
}

.image-logo {
    width: 180px !important;
}

.form-control-search {
    border-radius: 0 !important;
    border: 1px solid #BABABA !important;
    border-right: none !important;
}

.btn-search {
    border-radius: 0 !important;
    border: 1px solid #BABABA !important;
    border-left: none !important;
}

.pt-auto-10 {
    padding-top: 10rem !important;
}

.pt-timeline {
    padding-top: 10rem !important;
}

.section-life-geo {
    padding: 10rem !important;
}

.section-life-geo > .custom-hero-bg {
    background-size: cover; 
    background-position: center; 
    padding: 100px 0 0 0 !important;
}

.section-opportunities > .custom-hero-bg {
    background-size: cover; 
    background-position: center; 
    padding: 100px 0 0 0 !important;
}

.section-opportunities > .custom-hero-bg {
    top: -10.5rem;
}

.hover-footer-nav {
    position: relative;
    text-decoration: none; /* Remove default underline */
}

.hover-footer-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px; /* Thickness of the underline */
    background-color: #000; /* Color of the underline */
    transition: width 0.3s ease; /* Transition effect */
}

.hover-footer-nav:hover::after {
    width: 100%; /* Full width on hover */
    left: 3px;
}

.border-radius-quarter {
    border-radius: .25rem !important;
}

.border-radius-top-quarter {
    border-top-left-radius: .25rem !important;
    border-top-right-radius: .5rem !important;
}

.border-radius-bottom-quarter {
    border-bottom-left-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

.border-radius-half {
    border-radius: .5rem !important;
}

.border-radius-top-half {
    border-top-left-radius: .5rem !important;
    border-top-right-radius: .5rem !important;
}

.border-radius-bottom-half {
    border-bottom-left-radius: .5rem !important;
    border-bottom-right-radius: .5rem !important;
}

.logo-mobile-footer {
    display: none;
}

.logo-footer {
    display: block;
}

.benefit-item-desc { 
    height: 29.6rem !important;
    font-size: 1.5rem !important;
}

.title-news-home {
    font-size: 4rem !important;
}

.title-news-home span {
    display: block;
}

.parallax-background {
    top: -170px !important;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: black;
    background-color: var(--bs-btn-active-bg);
    border-color: #FFFFFF;
}

.dropdown-menu.dropdown-menu-arrow-centered a:focus, .dropdown-menu.dropdown-menu-arrow-centered a:active {
    color: var(--light) !important;
    background-color: var(--primary);
}

.title-benefit {
    font-size: 2.3rem;
}

.about-home-desc br {
    content: "";
    display: block;
    height: 1rem;
}

.flag-id {
    margin-bottom: 2px; 
    transform: rotate(180deg);
}

.flag-en {
    margin-bottom: 2px;
}

.top-bg-contact {
    top: -15rem !important;
}

.aspect-ratio-1x1 {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.grid-benefit-company {
    margin-top: -250px;
    position: relative;
}

.bg-benefit-compensation {
    background-size: cover; 
    background-position: bottom; 
    aspect-ratio: 21 / 9; 
    background-position: center; 
    width: unset; 
    height: unset;
}

.mfp-close {
    right: 25px !important;
    top: 25px !important;
    opacity: unset;
}

.mfp-close:hover {
    opacity: .65 !important;
}

.ajax-container > .row {
    --bs-gutter-x: unset;
}

.ql-editor ul li,
.ql-editor p {
    color: var(--dark);
}

.text-modal-vacancy {
    font-size: 1.5rem !important;
}

@media only screen and (max-width: 575px) {
    .what-do-image {
        width: 20rem;
    }

    .my-sm-5 {
        margin-top: 3rem!important;
        margin-bottom: 3rem!important;
    }

    .gradient-image-right {
        background-image: 
            linear-gradient(0deg, #FAFAFA 40%, rgba(250, 250, 250, 0) 100%), 
            url('/storage/image/life-at-2.JPG'); 
        background-size: cover; 
        background-position: center;
        padding-top: 15rem;
    }

    .column-reverse {
        flex-direction: column-reverse;
    }

    .banner-gradient {
        transform: rotate(270deg);
        width: 100vw;
        height: 100vw;
        right: 0;
        bottom: -5px;
    }

    .banner-text {
        font-size: 1rem;
        margin: 0;
    }

    .owl-carousel {
        height: 700px !important;
    }

    #header .header-nav-features .header-nav-features-dropdown.show {
        top: 0;
        box-shadow: none;
    }

    .owl-carousel {
        height: unset !important;
    }

    .text-13 {
        font-size: 3em !important;
    }

    .text-absolute {
        position: static;
        top: 0;
    }

    .img-galery {
        border-radius: 0px !important;
        width: auto;
        height: 95px;
        object-fit: cover;
    }

    .text-absolute {
        position: absolute;
        top: 6.5rem;
    }

    .fs-title-home {
        font-size: 2.5rem !important;
    }

    .fs-desc-home {
        font-size: 1rem !important;
        line-height: 1.5rem !important;
        font-weight: 300 !important;
    }

    .text-right-description {
        text-align: left !important;
    }

    .text-title {
        font-size: 1.5rem !important;
    }

    .text-description {
        font-size: 1rem !important;
    }

    .container-padding {
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }

    .order-sm-2 {
        order: 2 !important;
    }

    .text-right-center {
        text-align: center !important;
    }

    .text-left-center {
        text-align: center !important;
    }

    .img-galery {
        border-radius: 0px !important;
        width: auto;
        height: 200px;
        object-fit: cover;
    }

    .image-logo {
        width: 165px !important;
    }

    .input-group {
        height: 3rem !important;
    }

    .px-sm-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }
    .w-sm-100 {
        width: 100% !important;
    }

    .mb-sm-4 {
        margin-bottom: 1.5rem !important;
    }

    .image-list-benefit {
        max-width: 100% !important;
        height: 290px !important;
        object-fit: cover !important;
    }

    .pt-auto-10 {
        padding-top: 5rem !important;
    }

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

    .section-life-geo {
        padding-bottom: 27rem !important;
        padding-right: calc(1.5rem * .5) !important;
        padding-left: calc(1.5rem * .5) !important;
    }

    .section-life-geo > .container {
        top: 24rem !important;
    }

    .section-life-geo > .custom-hero-bg {
        background-size: contain; 
        background-position: center; 
        background-repeat: no-repeat;
        padding: 100px 0 0 0 !important;

        width: 180vw;
        height: 100vh;
        top: -35px;
        left: -138px;
    }

    .section-opportunities {
        padding-bottom: 11rem !important;
        padding-right: calc(1.5rem * .5) !important;
        padding-left: calc(1.5rem * .5) !important;
    }

    .section-opportunities > .container {
        top: 10rem !important;
    }

    .section-opportunities > .custom-hero-bg {
        background-size: contain; 
        background-position: center; 
        background-repeat: no-repeat;
        padding: 100px 0 0 0 !important;

        width: 100vw;
        height: 100vh;
        top: -10rem;
        left: 0;
    }

    #footer .footer-nav nav {
        justify-content: start !important;
    }

    footer .footer-nav nav > ul {
        flex-wrap: nowrap !important;
        width: auto !important;
    }

    #footer .footer-nav nav > ul > li {
        padding: 1rem;
    }

    .logo-mobile-footer {
        display: block;
    }

    .logo-footer {
        display: none;
    }

    .thumb-info.thumb-info-bottom-info-show-more:hover .thumb-info-show-more-content {
        max-height: 26vh !important;
    }

    .benefit-item-desc { 
        height: 13.5rem !important;
        font-size: .8rem !important;
    }

    .title-news-home {
        font-size: 1.5rem !important;
    }

    .title-news-home span {
        display: unset;
    }

    .thumb-info .thumb-info-inner {
        height: 1.2rem;
    }

    .title-benefit {
        font-size: 1.3rem;
    }

    .text-see-more {
        font-size: 0.6rem !important;
    }

    .top-bg-contact {
        top: -9rem !important;
    }

    .bg-benefit-compensation {
        background-size: cover;
        aspect-ratio: auto;
        background-position: top left;
        width: unset;
        height: unset;
        animation-delay: 400ms;
        padding: 0 1rem 0 1rem;
    }

    .text-modal-vacancy {
        font-size: 1rem !important;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .banner-gradient {
        transform: rotate(270deg);
        width: 100vw;
        height: 100vw;
        right: 0;
        bottom: -5px;
    }

    .card-body-life-at {
        height: auto !important;
    }

    .text-absolute {
        position: static;
        top: 0;
    }

    .img-galery {
        border-radius: 0px !important;
        width: auto;
        height: 95px;
        object-fit: cover;
    }

    .image-logo {
        width: 165px !important;
    }

    .fs-title-home {
        font-size: 2.5rem !important;
    }

    .fs-desc-home {
        font-size: 1rem !important;
        line-height: 1.5rem !important;
        font-weight: 300 !important;
    }

    .order-sm-2 {
        order: 2 !important;
    }

    .text-right-center {
        text-align: center !important;
    }

    .text-left-center {
        text-align: center !important;
    }

    .text-right-description {
        text-align: start !important;
    }

    .text-right-center {
        text-align: center !important;
    }

    .text-left-center {
        text-align: center !important;
    }

    .container-padding {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .img-galery {
        border-radius: 0px !important;
        width: auto;
        height: 200px;
        object-fit: cover;
    }

    .px-sm-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .pt-auto-10 {
        padding-top: 5rem !important;
    }

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

@media only screen and (min-width: 768px) and (max-width: 995px) {
    .banner-gradient {
        transform: rotate(270deg);
        width: 100vw;
        height: 100vw;
        right: 0;
        bottom: -5px;
    }

    .card-body-life-at {
        height: auto !important;
    }

    .text-absolute {
        position: static;
        top: 0;
    }

    .img-galery {
        border-radius: 0px !important;
        width: auto;
        height: 150px;
        object-fit: cover;
    }

    .text-right-description {
        text-align: start !important;
    }

    .text-right-center {
        text-align: center !important;
    }

    .text-left-center {
        text-align: center !important;
    }

    .image-logo {
        width: 165px !important;
    }

    .w-sm-100 {
        width: 100% !important;
    }

    .px-sm-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .scale-md-6 {
        transform: scale(1.4) !important;
    }

    .pt-auto-10 {
        padding-top: 5rem !important;
    }

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

    .section-life-geo {
        padding-bottom: 27rem !important;
        padding-right: calc(1.5rem * .5) !important;
        padding-left: calc(1.5rem * .5) !important;
    }

    .section-life-geo > .container {
        top: 24rem !important;
    }

    .section-life-geo > .custom-hero-bg {
        background-size: contain; 
        background-position: center; 
        background-repeat: no-repeat;
        padding: 100px 0 0 0 !important;

        width: 140vw;
        height: 75vh;
        top: -104px;
        left: -158px;
    }

    .section-opportunities {
        padding-bottom: 14rem !important;
        padding-right: calc(1.5rem * .5) !important;
        padding-left: calc(1.5rem * .5) !important;
    }

    .section-opportunities > .container {
        top: 13rem !important;
    }

    .section-opportunities > .custom-hero-bg {
        background-size: contain; 
        background-position: center; 
        background-repeat: no-repeat;
        padding: 100px 0 0 0 !important;

        width: 100vw;
        height: 60vh;
        top: -6rem;
        left: 0;
    }

    #footer .footer-nav nav {
        justify-content: center !important;
    }

    footer .footer-nav nav > ul {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    #footer .footer-nav nav > ul > li {
        padding: unset;
    }

    .logo-footer {
        display: block;
        align-self: center;
    }

    /* .thumb-info.thumb-info-bottom-info-show-more:hover .thumb-info-show-more-content {
        max-height: 36vh !important;
    } */

    .benefit-item-desc { 
        height: 34rem !important;
        font-size: 1.5rem !important;
    }

    .title-news-home {
        font-size: 3rem !important;
    }

    .title-news-home span {
        display: unset;
    }

    .top-bg-contact {
        top: -20rem !important;
    }

    .grid-benefit-company {
        margin-top: -450px;
        position: relative;
    }

    .fs-title-home {
        font-size: 5.5rem !important;
    }

    .about-home-desc {
        font-size: .9rem;
        line-height: 1.5rem;
    }

    .about-home-desc br {
        content: "";
        display: block;
        height: .5rem;
    }
}

@media only screen and (min-width: 600px) and (max-height: 412px) {
    .fs-title-home {
        font-size: 2.5rem !important;
    }

    .custom-grid-1 {
        margin-top: -70px;
    }

    .header-body {
        margin-top: -20px;
    }

    /* .header-logo img {
        background-color: ;
    } */

    .header-body{
        backdrop-filter: none;
    }

    .hero-quote{
        margin-top: 40px
    }
}

@media only screen and (min-width: 765px) and (max-height: 1024px) {
    .fs-title-home {
        font-size: 3rem !important;
    }
}

@media only screen and (min-width: 1200px) and (max-height: 1200px) {
    .fs-title-home {
        font-size: 5rem !important;
    }
}

@media only screen and (min-width: 996px) and (max-width: 1199px) {
    
    .what-do-image {
        width: 20rem;
    }

    .my-sm-5 {
        margin-top: 3rem!important;
        margin-bottom: 3rem!important;
    }

    .gradient-image-right {
        background-image: 
            linear-gradient(0deg, #FAFAFA 40%, rgba(250, 250, 250, 0) 100%), 
            url('/storage/image/life-at-2.JPG'); 
        background-size: cover; 
        background-position: center;
        padding-top: 15rem;
    }

    .banner-gradient {
        transform: rotate(0deg);
        width: 100vw;
        height: 100vw;
        left: 0;
        bottom: -5px;
    }

    .banner-text {
        font-size: 1rem;
        margin: 0;
    }

    .owl-carousel {
        height: auto !important;
    }

    .my-md-5 {
        margin-top: 3rem!important;
        margin-bottom: 3rem!important;
    }

    #header .header-nav-features .header-nav-features-dropdown.show {
        top: 0;
        box-shadow: none;
    }

    .container, .container-lg, .container-md, .container-sm {
        max-width: 1020px !important;
    }

    /* .owl-carousel {
        height: unset !important;
    } */

    .owl-carousel-light .owl-item {
        height: 90% !important;
    }

    .card-body {
        height: 37rem !important;
    }

    .text-absolute {
        position: absolute;
        top: 6.5rem;
    }

    .img-galery {
        border-radius: 0px !important;
        width: auto;
        height: 200px;
        object-fit: cover;
    }

    .image-logo {
        width: 165px !important;
    }

    .section-life-geo {
        padding-bottom: 27rem !important;
        padding-right: calc(1.5rem * .5) !important;
        padding-left: calc(1.5rem * .5) !important;
    }

    .section-life-geo > .container {
        top: 24rem !important;
    }

    .section-life-geo > .custom-hero-bg {
        background-size: contain; 
        background-position: center; 
        background-repeat: no-repeat;
        padding: 100px 0 0 0 !important;

        width: 136vw;
        height: 80vh;
        top: -35px;
        left: -173px;
    }

    .col-certified {
        flex: 0 0 auto;
        width: 100%;
        text-align: center !important;
    }

    .text-certified {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
}

@media only screen and (min-width: 996px) and (max-width: 1010px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 1020px !important;
    }

    #header .header-nav nav > ul > li > a,
    #header .header-nav > .header-nav-features > .header-nav-feature > a {
        font-size: 12px !important;
    }

    .column-reverse {
        flex-direction: column-reverse;
    }

    .owl-carousel-light .owl-item {
        height: 90% !important;
    }

    .banner-gradient {
        transform: rotate(0deg);
        width: 50vw;
        height: 100vw;
        left: 0px;
        bottom: -5px;
    }

    .card-body {
        height: 37rem !important;
    }

    .card-body-life-at {
        height: auto !important;
    }

    .text-absolute {
        position: absolute;
        top: 6.5rem;
    }

    .img-galery {
        border-radius: 0px !important;
        width: auto;
        height: 100%;
        object-fit: cover;
    }

    .image-logo {
        width: 165px !important;
    }

    .section-life-geo {
        padding-bottom: 27rem !important;
        padding-right: calc(1.5rem * .5) !important;
        padding-left: calc(1.5rem * .5) !important;
    }

    .section-life-geo > .container {
        top: 24rem !important;
    }

    .section-life-geo > .custom-hero-bg {
        background-size: contain; 
        background-position: center; 
        background-repeat: no-repeat;
        padding: 100px 0 0 0 !important;

        width: 136vw;
        height: 80vh;
        top: -35px;
        left: -173px;
    }
}

/* vertical timeline  */
/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 0;
    --bottom-value: 180px;

    &::after {
        content: '';
        position: absolute;
        width: 1px;
        background-color: #000000;
        top: 15px;
        bottom: var(--bottom-value);
        left: 50%;
        margin-left: -5px;
    }
}
  
  /* Container around content */
.container-timeline {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}
  
  /* The circles on the timeline */
.container-timeline::after {
    content: '';
    position: absolute;
    width: 27px;
    height: 27px;
    right: -10px;
    background-color: #2274A9;
    border: 4px solid #2274A9;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}
  
  /* Place the container to the left */
.container-timeline:nth-child(even) {
    left: 0;
    padding: 0;
}

.container-timeline:nth-child(even) > .content {
    padding-left: 0;
}

.container-timeline:nth-child(even) > .content > h2,
.container-timeline:nth-child(even) > .content > p {
    text-align: end;
}
  
  /* Place the container to the right */
.container-timeline:nth-child(odd) {
    left: 50%;
    padding: 0;
}

.container-timeline:nth-child(odd) > .content {
    padding-right: 0;
}
  
  /* Add arrows to the left container (pointing right) */
.container-timeline:nth-child(even)::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 0;
    right: 30px;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}
  
  /* Add arrows to the right container (pointing left) */
.container-timeline:nth-child(odd)::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 0;
    left: 30px;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}
  
  /* Fix the circle for containers on the right side */
.container-timeline:nth-child(odd)::after {
    left: -17px;
}
  
  /* The actual content */
.content {
    padding: 0px 30px;
    padding-top: 0.8rem;
    position: relative;
    border-radius: 6px;
}

.timeline-title {
    font-size: 2rem;
    line-height: 39.01px;
}

.timeline-description {
    font-size: 1.75rem;
    line-height: 34.13px;
}
  
  /* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .timeline::after {
        left: 10px;
    }
    
    /* Full-width containers */
    .container-timeline {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    
    /* Make sure that all arrows are pointing leftwards */
    .container-timeline::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }
  
    /* Make sure all circles are at the same spot */
    .container-timeline:nth-child(even)::after, .container-timeline:nth-child(odd)::after {
        left: -7px;
    }
    
    /* Make all right containers behave like the left ones */
    .container-timeline:nth-child(odd) {
        left: 0%;
    }

    .container-timeline:nth-child(even) > .content > h2,
    .container-timeline:nth-child(even) > .content > p {
        text-align: start;
    }

    .container-timeline:nth-child(odd) > .content > h2,
    .container-timeline:nth-child(even) > .content > h2 {
        font-size: 1.5rem !important;
        font-weight: 500;
    }

    /* .container-timeline:nth-child(odd) > .content > p,
    .container-timeline:nth-child(even) > .content > p {
        font-size: 1.5rem !important;
    } */

    .container-timeline:nth-child(even) > .content {
        padding-left: 30px;
    }    

    .image-logo {
        width: 165px !important;
    }

    /* .timeline::after {
        bottom: 175px !important;
    } */
}