/* =========================================================
   MITRA SAHABAT
========================================================= */

:root {

    --mitra-primary: #1341a2;
    --mitra-secondary: #1b55c5;
    --mitra-green: #1fa94b;
    --mitra-dark: #10234a;
    --mitra-light: #f5f8ff;
    --mitra-text: #6b7280;

}

/* =========================================================
   PAGE BADGE
========================================================= */

.mitra-page-badge {

    display: inline-flex;

    align-items: center;

    padding: 8px 18px;

    margin-bottom: 15px;

    border-radius: 50px;

    background: rgba(255, 255, 255, .15);

    border: 1px solid rgba(255, 255, 255, .25);

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

}


/* =========================================================
   INTRO
========================================================= */

.mitra-intro {

    padding-bottom: 70px;

}


.mitra-section-label {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

    color: var(--mitra-green);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.mitra-section-label span {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: rgba(31, 169, 75, .12);

    color: var(--mitra-green);

}


.mitra-main-title {

    margin-bottom: 25px;

    color: var(--mitra-dark);

    font-size: 44px;

    line-height: 1.2;

    font-weight: 800;

}


.mitra-main-title span {

    color: var(--mitra-primary);

}


.mitra-main-description {

    max-width: 700px;

    margin-bottom: 25px;

    color: var(--mitra-primary);

    font-size: 22px;

    line-height: 1.6;

    font-weight: 600;

}


.mitra-intro__cta {

    margin-top: 30px;

}


/* =========================================================
   SIDEBAR
========================================================= */

.mitra-sidebar-contact {

    position: relative;

    overflow: hidden;

    min-height: 370px;

    margin-top: 25px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #1341a2 0%,
            #0c255d 100%
        );

}


.mitra-sidebar-contact::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    right: -100px;

    bottom: -100px;

    border-radius: 50%;

    background: rgba(255,255,255,.06);

}


.mitra-sidebar-contact::after {

    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    top: -70px;

    left: -70px;

    border-radius: 50%;

    border: 35px solid rgba(31,169,75,.15);

}


.mitra-sidebar-contact__content {

    position: relative;

    z-index: 2;

    padding: 45px 35px;

}


.mitra-sidebar-contact__label {

    display: inline-block;

    margin-bottom: 20px;

    color: #65d88a;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.mitra-sidebar-contact h3 {

    margin-bottom: 18px;

    color: #ffffff;

    font-size: 31px;

    line-height: 1.3;

}


.mitra-sidebar-contact p {

    margin-bottom: 30px;

    color: rgba(255,255,255,.75);

    line-height: 1.7;

}


.mitra-sidebar-contact__btn {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 15px 20px;

    border-radius: 8px;

    background: var(--mitra-green);

    color: #ffffff;

    font-weight: 700;

    transition: .3s ease;

}


.mitra-sidebar-contact__btn:hover {

    background: #ffffff;

    color: var(--mitra-primary);

}


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

.mitra-section {

    padding-top: 70px;

    padding-bottom: 20px;

}


.mitra-section-title {

    margin-bottom: 20px;

    color: var(--mitra-dark);

    font-size: 38px;

    line-height: 1.25;

    font-weight: 800;

}


.mitra-section-title span {

    color: var(--mitra-primary);

}


.mitra-section-description {

    max-width: 700px;

    margin-bottom: 35px;

    color: var(--mitra-text);

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   FEATURE CARD
========================================================= */

.mitra-feature-card {

    position: relative;

    height: 100%;

    padding: 35px;

    overflow: hidden;

    border: 1px solid #edf0f6;

    border-radius: 12px;

    background: #ffffff;

    transition: .35s ease;

}


.mitra-feature-card:hover {

    transform: translateY(-8px);

    border-color: transparent;

    box-shadow: 0 20px 45px rgba(19,65,162,.12);

}


.mitra-feature-card__number {

    position: absolute;

    top: 25px;

    right: 25px;

    color: #e8edf7;

    font-size: 35px;

    font-weight: 800;

}


.mitra-feature-card__icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 65px;

    height: 65px;

    margin-bottom: 25px;

    border-radius: 15px;

    background: rgba(19,65,162,.08);

    color: var(--mitra-primary);

    font-size: 25px;

}


.mitra-feature-card h3 {

    margin-bottom: 15px;

    color: var(--mitra-dark);

    font-size: 21px;

    font-weight: 700;

}


.mitra-feature-card p {

    margin: 0;

    color: var(--mitra-text);

    line-height: 1.7;

}


/* =========================================================
   HIGHLIGHT
========================================================= */

.mitra-highlight {

    position: relative;

    /* margin-top: 80px; */

    padding: 60px;

    overflow: hidden;

    border-radius: 15px;

    background:

        linear-gradient(
            135deg,
            #10234a,
            #1341a2
        );

}


.mitra-highlight::before {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    top: -200px;

    right: -100px;

    border-radius: 50%;

    background: rgba(31,169,75,.2);

}


.mitra-highlight__content {

    position: relative;

    z-index: 2;

}


.mitra-highlight__tag {

    display: inline-block;

    margin-bottom: 20px;

    color: #62dc8c;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.mitra-highlight h2 {

    max-width: 600px;

    margin-bottom: 20px;

    color: #ffffff;

    font-size: 38px;

    line-height: 1.3;

}


.mitra-highlight h2 span {

    color: #63db8b;

}


.mitra-highlight__content p {

    max-width: 650px;

    color: rgba(255,255,255,.75);

    line-height: 1.8;

}


.mitra-highlight__steps {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    margin-top: 40px;

}


.mitra-highlight-step {

    display: flex;

    gap: 15px;

    padding: 22px;

    border: 1px solid rgba(255,255,255,.1);

    border-radius: 10px;

    background: rgba(255,255,255,.06);

}


.mitra-highlight-step span {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 42px;

    height: 42px;

    border-radius: 50%;

    background: var(--mitra-green);

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

}


.mitra-highlight-step h4 {

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 17px;

}


.mitra-highlight-step p {

    margin: 0;

    color: rgba(255,255,255,.65);

    font-size: 13px;

    line-height: 1.6;

}


/* =========================================================
   ACTIVATION
========================================================= */

.mitra-activation-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}


.mitra-activation-card {

    padding: 40px;

    border-radius: 15px;

    background: #f6f8fc;

}


.mitra-activation-card--primary {

    background:

        linear-gradient(
            135deg,
            var(--mitra-primary),
            #0c2e78
        );

}


.mitra-activation-card__icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 60px;

    height: 60px;

    margin-bottom: 25px;

    border-radius: 15px;

    background: #ffffff;

    color: var(--mitra-primary);

    font-size: 23px;

}


.mitra-activation-card > span {

    color: var(--mitra-green);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.mitra-activation-card h3 {

    margin-top: 12px;

    margin-bottom: 25px;

    color: var(--mitra-dark);

    font-size: 25px;

}


.mitra-activation-card--primary h3 {

    color: #ffffff;

}


.mitra-activation-card ul {
    padding: 0;
    margin: 35px 0 0;
    list-style: none;
}

.mitra-activation-card ul li {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 18px 0;

    border-bottom: 1px solid rgba(19, 65, 162, 0.12);

    font-size: 20px;
    font-weight: 500;
}

.mitra-activation-card ul li i {
    width: 46px;
    height: 46px;

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

    border-radius: 12px;

    font-size: 22px;

    background: rgba(75, 164, 95, 0.12);
    color: #4ba45f;

    flex-shrink: 0;
}


/* ONLINE */

.mitra-activation-card--primary ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mitra-activation-card--primary ul li i {
    background: rgba(255, 255, 255, 0.08);
    color: #75c96b;
}



.mitra-activation-card li::before {



    position: absolute;

    left: 0;

    color: var(--mitra-green);

    font-weight: 800;

}


/* =========================================================
   PACKAGE
========================================================= */

.mitra-package-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}


.mitra-package-card {

    position: relative;

    display: flex;

    gap: 30px;

    padding: 35px;

    overflow: hidden;

    border: 1px solid #edf0f5;

    border-radius: 14px;

    background: #ffffff;

    transition: .3s ease;

}


.mitra-package-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 20px 50px rgba(19,65,162,.1);

}


.mitra-package-card--active {

    border: 2px solid var(--mitra-primary);

}


.mitra-package-card__badge {

    position: absolute;

    top: 0;

    right: 0;

    padding: 8px 20px;

    border-radius: 0 0 0 10px;

    background: var(--mitra-primary);

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


.mitra-package-card__number {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 70px;

    height: 70px;

    border-radius: 50%;

    background: var(--mitra-light);

    color: var(--mitra-primary);

    font-size: 22px;

    font-weight: 800;

}


.mitra-package-card__content {

    flex: 1;

}


.mitra-package-card__content > span {

    color: var(--mitra-green);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.mitra-package-card h3 {

    margin-top: 8px;

    margin-bottom: 12px;

    color: var(--mitra-dark);

    font-size: 26px;

}


.mitra-package-card p {

    color: var(--mitra-text);

    line-height: 1.7;

}


.mitra-package-card__features {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 20px;

}


.mitra-package-card__features span {

    padding: 7px 13px;

    border-radius: 50px;

    background: #f1f5fb;

    color: var(--mitra-primary);

    font-size: 12px;

    font-weight: 600;

}


.mitra-package-note {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 25px;

    padding: 20px 25px;

    border-radius: 10px;

    background: rgba(31,169,75,.08);

}


.mitra-package-note__icon {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 45px;

    height: 45px;

    border-radius: 50%;

    background: var(--mitra-green);

    color: #ffffff;

}


.mitra-package-note p {

    margin: 0;

    color: #46604e;

    line-height: 1.7;

}


/* =========================================================
   DISCUSSION
========================================================= */

.mitra-discussion {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 70px;

    padding: 55px;

    border-radius: 15px;

    background: #f5f8ff;

}


.mitra-discussion__content {

    max-width: 650px;

}


.mitra-discussion__content > span {

    color: var(--mitra-green);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.mitra-discussion h2 {

    margin-top: 15px;

    color: var(--mitra-dark);

    font-size: 35px;

    line-height: 1.3;

}


.mitra-discussion h2 strong {

    display: block;

    color: var(--mitra-primary);

}


.mitra-discussion p {

    color: var(--mitra-text);

    line-height: 1.8;

}


.mitra-discussion__items {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    margin-top: 25px;

}


.mitra-discussion__items div {

    color: var(--mitra-dark);

    font-weight: 600;

}


.mitra-discussion__items i {

    margin-right: 7px;

    color: var(--mitra-green);

}


.mitra-discussion__button {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-width: 220px;

    padding: 18px 25px;

    border-radius: 8px;

    background: var(--mitra-primary);

    color: #ffffff;

    font-weight: 700;

    white-space: nowrap;

}


/* =========================================================
   PROCESS
========================================================= */

.mitra-process {

    position: relative;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}


.mitra-process__item {

    display: flex;

    gap: 20px;

    padding: 30px;

    border-left: 3px solid var(--mitra-green);

    border-radius: 8px;

    background: #f7f9fc;

}


.mitra-process__number {

    color: var(--mitra-primary);

    font-size: 27px;

    font-weight: 800;

}


.mitra-process h3 {

    margin-bottom: 10px;

    color: var(--mitra-dark);

    font-size: 19px;

}


.mitra-process p {

    margin: 0;

    color: var(--mitra-text);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   FINAL CTA
========================================================= */

.mitra-final-cta {

    padding: 100px 0;

    background:

        linear-gradient(
            135deg,
            #10234a,
            #1341a2
        );

}


.mitra-final-cta__inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

}


.mitra-final-cta__content {

    max-width: 750px;

}


.mitra-final-cta__content > span {

    color: #63db8b;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.mitra-final-cta h2 {

    margin-top: 20px;

    margin-bottom: 20px;

    color: #ffffff;

    font-size: 45px;

    line-height: 1.25;

}


.mitra-final-cta h2 strong {

    display: block;

    color: #6ee095;

}


.mitra-final-cta p {

    margin: 0;

    color: rgba(255,255,255,.75);

    font-size: 17px;

}


.mitra-final-cta__button {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    min-width: 260px;

    padding: 20px 25px;

    border-radius: 8px;

    background: var(--mitra-green);

    color: #ffffff;

    font-weight: 700;

    transition: .3s ease;

}


.mitra-final-cta__button:hover {

    background: #ffffff;

    color: var(--mitra-primary);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {


    .mitra-main-title {

        font-size: 38px;

    }


    .mitra-highlight__steps {

        grid-template-columns: 1fr;

    }


    .mitra-discussion {

        flex-direction: column;

        align-items: flex-start;

    }


    .mitra-final-cta__inner {

        flex-direction: column;

        align-items: flex-start;

    }


}


@media (max-width: 767px) {


    .mitra-main-title {

        font-size: 32px;

    }


    .mitra-section-title {

        font-size: 30px;

    }


    .mitra-highlight {

        padding: 35px 25px;

    }


    .mitra-highlight h2 {

        font-size: 30px;

    }


    .mitra-activation-grid {

        grid-template-columns: 1fr;

    }


    .mitra-package-card {

        flex-direction: column;

        gap: 20px;

    }


    .mitra-discussion {

        padding: 35px 25px;

    }


    .mitra-discussion h2 {

        font-size: 29px;

    }


    .mitra-discussion__items {

        grid-template-columns: 1fr;

    }


    .mitra-process {

        grid-template-columns: 1fr;

    }


    .mitra-final-cta {

        padding: 70px 0;

    }


    .mitra-final-cta h2 {

        font-size: 32px;

    }


}