#careers_section {
    background: url(../img/careers/header_img.png) no-repeat;
    background-size: cover;
    background-position: top;
    min-height: 638px;
    display: flex;
    align-items: end;

}

#careers_section img {
    margin-bottom: -5px;
    width: 86% !important;
    margin-left: auto;
    margin-right: auto;
}

.opportunities-section {
    margin-top: 7rem;

}

.grow_with {
    text-align: center;
}

.oppertunities_card {
    min-height: 642px;
    min-width: 400px;
    background-color: #fff;
    margin-right: 20px;
}

.rectangle4 {
    width: 93.5%;
    height: 79.96%;
    margin: 4.8px;
}

.opp-image-potion {
    min-height: 390px;
    text-align: center;
    display: flex;
    align-items: center;
    /* transition: filter 0.6s ease-in-out; */
}

.opp-image-potion img {
    margin: auto;
    width: 66%;
    filter: brightness(0) invert(1);
    transition: filter 0.4s ease;
}

.cd1:hover img {
    filter: none;
}
.grow_with {
      margin: 10px auto 40px;  
}
.cd2:hover img {
    filter: none;
}
.cd1:hover .opp-image-potion{
     background: url("../img/careers/Rectangle_blur2.png") no-repeat center;
     background-size: cover;
}
.cd2:hover .opp-image-potion{
     background: url("../img/careers/Rectangle_blur1.png") no-repeat center;
     background-size: cover;
}

.cd1 .opp-image-potion {
    background: url("../img/careers/Rectangle1.png") no-repeat center;
    background-size: cover;
}

.cd2 .opp-image-potion {
    background: url("../img/careers/Rectangle.png") no-repeat center;
    background-size: cover;
}

.opp-card_box_section {
    padding: 35rem 0px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.opp-card_box {
    width: 100%;
    z-index: 3;
}

/* BACKGROUND (hidden initially) */
#opp_card_section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/careers/carrer-bg.png") no-repeat center;
    background-size: cover;

    transform: scale(0);
    opacity: 0;
    transform-origin: center;
    z-index: 0;
}

/* TRIGGER ON SCROLL */
#opp_card_section.bg-active::before {
    opacity: 1;
    animation:
        firstZoom 5s ease-in-out forwards,
        loopZoom 18s ease-in-out infinite 5s;
}

.opp-card-content {
    margin-top: 16%;
    text-align: center;
    font-size: 1.4rem;
    color: #000;
    font-weight: 500;
    letter-spacing: -0.01em !important;
    font-family: "Creato Display", "Helvetica Neue", Arial, sans-serif;
    line-height: 94%;
}

.opp_card_btn {
    text-align: center;
}

/* FIRST: scale 0 → zoom in → zoom out */
@keyframes firstZoom {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* CONTINUOUS: slow zoom in → zoom out */
@keyframes loopZoom {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

@media(min-width:1900px) {
    #careers_section {
        background-size: cover;
        min-height: 800px;
    }
}

@media(max-width:1400px) {
    #careers_section {
        min-height: 538px;
    }

}

@media(max-width:1000px) {
    .oppertunities_card {
        min-height: 550px;
        min-width: 300px;
    }
}

@media(max-width:800px) {
    #careers_section {
        min-height: 290px;
    }

        .oppertunities_card {
        min-height: 240px;
        margin: auto;
        min-width: 185px;
        margin-bottom: 24px;
        padding-bottom: 20px;
        width: 94%;
    }

    .opp-card_box {
        display: grid !important;
    }

}