/* =========================================================
   OUR PARTNERS
   ========================================================= */

.our-partners {
    position: relative;
    width: 100%;
    min-height: 344px;

    background: #050609;

    /* border-top: 3px solid #3b3b3d; */
    padding:45px 0 15px;

    overflow: hidden;

    font-family: "Manrope", sans-serif;

    box-sizing: border-box;
    border-top: 5px solid #07080b;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.our-partners-inner {
    width: calc(100% - 60px);
    max-width: 1000px;

    margin: 0 auto;

    box-sizing: border-box;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.our-partners-heading {
    width: 100%;

    padding-top: 17px;

    text-align: center;

    box-sizing: border-box;
}


.our-partners-heading h2 {
    margin: 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: 35px;
    font-weight: 500;

    /* FIX: "auto" is not a valid line-height value — browsers were
       silently discarding it and falling back to "normal" anyway.
       Made that explicit so the rule actually does something. */
    line-height: normal;

    letter-spacing: 0;
}


.our-partners-heading h2 span {
    color: #F6B21A;

    font-weight: 500;
}


/* Yellow underline */

.our-partners-heading-line {
    width: 75px;
    height: 2px;

    margin: 7px auto 0;

    background: #F6B21A;
}


/* =========================================================
   CONTENT
   ========================================================= */

.our-partners-content {
    width: 100%;
    display: grid;

    /* FIX: left column was a hard 500px, which only fits once the
       viewport is wide enough that .our-partners-inner is >= 896px
       (~956px viewport). Anywhere from 901px–955px viewport the old
       fixed columns overflowed the container. minmax(0, 1fr) lets
       the left column flex down instead of forcing an overflow,
       while the right (logo) column stays a fixed 368px, same as
       before — visual result at your normal breakpoints is unchanged. */
    grid-template-columns: minmax(0, 1fr) 368px;

    column-gap: 28px;

    align-items: start;

    padding-top: 26px;

    box-sizing: border-box;
}






/* =========================================================
   LEFT SIDE
   ========================================================= */

.our-partners-left {
    width: 100%;

    box-sizing: border-box;
}


.our-partners-left h3 {
    margin: 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: 42px;

    font-weight: 900;

    line-height: 1.35;

    letter-spacing: -0.3px;
}


.our-partners-left h3 span {
    color: #F6B21A;
}


/* Description */

.our-partners-left p {
    width: 470px;
    max-width: 100%;

    margin: 28px 0 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: 19px;

    font-weight: 500;

    line-height: 1.4;

    letter-spacing: 0;

    box-sizing: border-box;
}


/* =========================================================
   VIEW PARTNERS BUTTON
   ========================================================= */

.our-partners-button {
    width: 210px;
    height: 45px;

    margin-top: 12px;

    padding: 0 13px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    box-sizing: border-box;

    border-radius: 7px;

    background: #F6B21A;

    color: #000000;

    text-decoration: none;

    font-family: "Manrope", sans-serif;

    font-size: 16px;

    font-weight: 500;

    line-height: 1;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.our-partners-button:hover {
    color: #000000;

    transform: translateY(-2px);

    background: #ffbd2e;
}


.our-partners-arrow {
    font-size: 18px;

    line-height: 1;

    margin-top: -1px;
}


/* =========================================================
   LOGO AREA
   ========================================================= */

.our-partners-logos {
    position: relative;

    width: 290px;
    height: 226px;

    min-height: 226px;

    box-sizing: border-box;

    /* FIX: this box is narrower than the 368px grid column it sits
       in. With no alignment set it defaulted to the LEFT edge of
       that column, leaving ~100px of dead space on the right that
       your screenshot doesn't show — the logos sit flush with the
       right edge of the container. margin-left: auto pushes it
       there deterministically (grid resolves an auto margin as
       "align to end"), instead of relying on the desktop columns
       happening to add up exactly. */
    margin-left: auto;
}


/* =========================================================
   LOGO CARD
   ========================================================= */

.partner-logo {
    position: absolute;

    width: 120px;
    height: 100px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #171A1F;

    border-radius: 5px;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   LOGO IMAGE
   ========================================================= */

.partner-logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}


/* =========================================================
   WTL
   ========================================================= */

.partner-logo-wtl {
    width: 160px !important;
    height: 120px !important;

    top: 0 !important;
    left: 0 !important;

    right: auto !important;

    transform: none !important;
}

.partner-logo-wtl img {
    /* width: 88px; */
    height: auto;
}


/* =========================================================
   EY
   ========================================================= */

.partner-logo-ey {
    width: 160px !important;
    height: 120px !important;

    top: 0 !important;

    /* 120px card + 28px gap */
    left: 178px !important;

    right: auto !important;

    transform: none !important;
}

.partner-logo-ey img {
    /* width: 72px; */
    height: auto;
}


/* =========================================================
   WEBEL
   ========================================================= */

.partner-logo-webel {
    width: 160px !important;
    height: 120px !important;

    top: 156px !important;

    /* Center of 268px container:
       (268 - 120) / 2 = 74px */
    left: 74px !important;

    right: auto !important;

    transform: none !important;
}

.partner-logo-webel img {
    /* width: 94px; */
    height: auto;
}
/* =========================================================
   TABLET
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .our-partners {
        min-height: auto;
        padding: 35px 0 30px;
    }


    /* =====================================================
       MAIN CONTAINER
       ===================================================== */

    .our-partners-inner {
        width: calc(100% - 50px);
        max-width: 700px;
        margin: 0 auto;
    }


    /* =====================================================
       SECTION HEADING
       ===================================================== */

    .our-partners-heading {
        width: 100%;
        padding-top: 10px;
    }

    .our-partners-heading h2 {
        font-size: 28px;
        line-height: 1.25;
    }

    .our-partners-heading-line {
        width: 70px;
        margin-top: 6px;
    }


    /* =====================================================
       MAIN CONTENT
       ===================================================== */

    .our-partners-content {

        width: 100%;

        display: grid;

        /*
         * Keep two-column layout on tablet.
         * Left side gets remaining space.
         * Right side gets fixed logo area.
         */

        grid-template-columns:
            minmax(0, 1fr)
            300px;

        column-gap: 25px;

        align-items: start;

        padding-top: 25px;

        padding-bottom: 35px;

        box-sizing: border-box;
    }


    /* =====================================================
       LEFT SIDE
       ===================================================== */

    .our-partners-left {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    .our-partners-left h3 {

        margin: 0;

        font-size: 23px;

        line-height: 1.35;

        letter-spacing: -0.2px;
    }


    .our-partners-left p {

        width: 270px;

        max-width: 100%;

        margin: 20px 0 0;

        font-size: 11px;

        line-height: 1.45;
    }


    /* =====================================================
       BUTTON
       ===================================================== */

    .our-partners-button {

        width: 190px;

        height: 42px;

        margin-top: 15px;

        padding-left: 22px;

        padding-right: 12px;

        font-size: 17px;
    }

    .our-partners-arrow {
        font-size: 17px;
    }


    /* =====================================================
       LOGO AREA
       ===================================================== */

    .our-partners-logos {

        position: relative;

        width: 268px;

        height: 220px;

        min-height: 220px;

        margin-left: auto;

        box-sizing: border-box;
    }


    /* =====================================================
       IMPORTANT:
       RESET DESKTOP !IMPORTANT VALUES
       ===================================================== */

    .partner-logo-wtl,
    .partner-logo-ey,
    .partner-logo-webel {

        width: 120px !important;

        height: 100px !important;

        box-sizing: border-box;
    }


    /* =====================================================
       WTL
       ===================================================== */

    .partner-logo-wtl {

        top: 0 !important;

        left: 0 !important;

        right: auto !important;

        transform: none !important;
    }


    /* =====================================================
       EY
       ===================================================== */

    .partner-logo-ey {

        top: 0 !important;

        left: auto !important;

        right: 0 !important;

        transform: none !important;
    }


    /* =====================================================
       WEBEL
       ===================================================== */

    .partner-logo-webel {

        top: 120px !important;

        left: 50% !important;

        right: auto !important;

        transform: translateX(-50%) !important;
    }


    /* =====================================================
       LOGO IMAGES
       ===================================================== */

    .partner-logo-wtl img {

        width: 88px;

        height: auto;

        max-width: 100%;

        max-height: 100%;

        object-fit: contain;
    }


    .partner-logo-ey img {

        width: 72px;

        height: auto;

        max-width: 100%;

        max-height: 100%;

        object-fit: contain;
    }


    .partner-logo-webel img {

        width: 94px;

        height: auto;

        max-width: 100%;

        max-height: 100%;

        object-fit: contain;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .our-partners {

        min-height: auto;

        padding: 25px 0 35px;

        border-top-width: 2px;
    }


    /* =====================================================
       CONTAINER
       ===================================================== */

    .our-partners-inner {

        width: calc(100% - 30px);

        max-width: none;

        margin: 0 auto;
    }


    /* =====================================================
       SECTION TITLE
       ===================================================== */

    .our-partners-heading {

        padding-top: 10px;

        text-align: center;
    }


    .our-partners-heading h2 {

        font-size: 18px;

        line-height: 23px;

        font-weight: 500;
    }


    .our-partners-heading-line {

        width: 65px;

        height: 2px;

        margin-top: 6px;
    }


    /* =====================================================
       MAIN CONTENT
       ===================================================== */

    .our-partners-content {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 30px;

        padding-top: 25px;

        padding-bottom: 10px;
    }


    /* =====================================================
       LEFT CONTENT
       ===================================================== */

    .our-partners-left {

        width: 100%;

        min-width: 0;

        text-align: center;
    }


    .our-partners-left h3 {

        margin: 0;

        font-size: 24px;

        line-height: 1.25;

        letter-spacing: 0;
    }


    .our-partners-left p {

        width: 300px;

        max-width: 100%;

        margin: 20px auto 0;

        font-size: 11px;

        line-height: 1.5;
    }


    /* =====================================================
       BUTTON
       ===================================================== */

    .our-partners-button {

        width: 190px;

        height: 42px;

        margin: 20px auto 0;

        padding-left: 22px;

        padding-right: 12px;

        font-size: 17px;
    }


    .our-partners-arrow {

        font-size: 17px;
    }


    /* =====================================================
       LOGO AREA
       ===================================================== */

    .our-partners-logos {

        position: relative;

        width: 300px;

        max-width: 100%;

        height: 225px;

        min-height: 225px;

        margin-left: 0;

        box-sizing: border-box;
    }


    /* =====================================================
       LOGO CARDS
       ===================================================== */

    .partner-logo {

        width: 125px !important;

        height: 100px !important;

        box-sizing: border-box;
    }


    /* =====================================================
       WTL
       ===================================================== */

    .partner-logo-wtl {

        top: 0 !important;

        left: 0 !important;

        right: auto !important;

        transform: none !important;
    }


    /* =====================================================
       EY
       ===================================================== */

    .partner-logo-ey {

        top: 0 !important;

        left: auto !important;

        right: 0 !important;

        transform: none !important;
    }


    /* =====================================================
       WEBEL
       ===================================================== */

    .partner-logo-webel {

        top: 125px !important;

        left: 50% !important;

        right: auto !important;

        transform: translateX(-50%) !important;
    }


    /* =====================================================
       LOGO IMAGES
       ===================================================== */

    .partner-logo-wtl img {

        width: 88px;

        height: auto;
    }


    .partner-logo-ey img {

        width: 72px;

        height: auto;
    }


    .partner-logo-webel img {

        width: 94px;

        height: auto;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .our-partners {

        padding: 22px 0 30px;
    }


    .our-partners-inner {

        width: calc(100% - 24px);
    }


    /* =====================================================
       HEADING
       ===================================================== */

    .our-partners-heading h2 {

        font-size: 18px;

        line-height: 22px;
    }


    .our-partners-heading-line {

        width: 60px;

        margin-top: 5px;
    }


    /* =====================================================
       LEFT CONTENT
       ===================================================== */

    .our-partners-left h3 {

        font-size: 22px;

        line-height: 1.25;
    }


    .our-partners-left p {

        width: 100%;

        max-width: 290px;

        margin-top: 18px;

        font-size: 10px;

        line-height: 1.5;
    }


    /* =====================================================
       BUTTON
       ===================================================== */

    .our-partners-button {

        width: 180px;

        height: 40px;

        margin-top: 18px;

        font-size: 15px;
    }


    /* =====================================================
       LOGO AREA
       ===================================================== */

    .our-partners-logos {

        width: 280px;

        max-width: 100%;

        height: 208px;

        min-height: 208px;
    }


    /* =====================================================
       LOGO CARDS
       ===================================================== */

    .partner-logo {

        width: 115px !important;

        height: 92px !important;
    }


    /* =====================================================
       WTL
       ===================================================== */

    .partner-logo-wtl {

        top: 0 !important;

        left: 0 !important;

        right: auto !important;

        transform: none !important;
    }


    /* =====================================================
       EY
       ===================================================== */

    .partner-logo-ey {

        top: 0 !important;

        left: auto !important;

        right: 0 !important;

        transform: none !important;
    }


    /* =====================================================
       WEBEL
       ===================================================== */

    .partner-logo-webel {

        top: 116px !important;

        left: 50% !important;

        right: auto !important;

        transform: translateX(-50%) !important;
    }


    /* =====================================================
       IMAGES
       ===================================================== */

    .partner-logo-wtl img {

        width: 82px;
    }


    .partner-logo-ey img {

        width: 68px;
    }


    .partner-logo-webel img {

        width: 88px;
    }

}