/* HERO */

.home-hero {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 40%,
            rgba(40, 95, 175, .55),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            #062b67 0%,
            #0a377a 48%,
            #183f78 100%
        );

    color: #fff;
}

.home-hero::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: 10%;
    top: -220px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.035);
}

.home-hero::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: 25%;
    bottom: -300px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.04);
}

.hero-inner {
    position: relative;
    z-index: 2;

    min-height: 310px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(300px, .65fr);

    align-items: center;

    gap: 70px;

    padding-top: 40px;
    padding-bottom: 40px;
}

.hero-content {
    max-width: 720px;
}

.hero-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #ffb91f;

    font-size: 18px;
    font-weight: 750;
}

.hero-content h1 {
    margin:
        0 0 16px;

    font-size:
        clamp(
            38px,
            4.3vw,
            58px
        );

    line-height: 1.08;

    letter-spacing: -.9px;
}

.hero-content p {
    max-width: 620px;

    margin: 0;

    color: #edf3fc;

    font-size: 16px;
    line-height: 1.75;
}

.hero-info {
    background: #fff;

    border-radius: 14px;

    padding: 23px;

    color: #0e2e64;

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.16);
}

.hero-info-item {
    display: flex;

    gap: 14px;
}

.hero-info-icon {
    width: 25px;

    flex: 0 0 25px;

    padding-top: 2px;

    color: #1050b3;

    font-size: 18px;
}

.hero-info-item strong,
.hero-info-item span,
.hero-info-item b {
    display: block;
}

.hero-info-item strong {
    margin-bottom: 9px;

    font-size: 14px;
}

.hero-info-item span {
    margin-bottom: 5px;

    color: #50617e;

    font-size: 13px;
    line-height: 1.55;
}

.hero-info-item b {
    font-size: 17px;
}

.hero-info-item a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 5px;

    color: #d88900;

    font-size: 13px;
    font-weight: 750;
}

.hero-info-divider {
    height: 1px;

    margin: 20px 0;

    background: #e4e8ef;
}


/* SERVICES */

.services-section {
    padding:
        48px 0 56px;

    background: #f8f9fc;
}

.section-heading {
    max-width: 650px;

    margin:
        0 auto 32px;

    text-align: center;
}

.section-heading h2 {
    margin: 0;

    color: #0c2d63;

    font-size: 29px;
}

.section-heading span {
    display: block;

    width: 58px;
    height: 3px;

    margin:
        9px auto 13px;

    border-radius: 20px;

    background: #e4a416;
}

.section-heading p {
    margin: 0;

    color: #60708a;

    font-size: 14px;
    line-height: 1.65;
}

.services-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}

.service-card {
    display: flex;
    flex-direction: column;

    min-height: 300px;

    padding: 27px;

    border:
        1px solid #e5e9f0;

    border-radius: 13px;

    background: #fff;

    box-shadow:
        0 9px 28px
        rgba(8, 38, 79, .065);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.service-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 17px 35px
        rgba(8, 38, 79, .1);
}

.service-title {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;
}

.service-icon {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #fff;

    font-size: 24px;
}

.service-title h3 {
    margin:
        0 0 4px;

    font-size: 20px;
}

.service-title span {
    font-size: 13px;
}

.service-card > p {
    min-height: 68px;

    margin:
        0 0 20px;

    color: #53637b;

    font-size: 14px;
    line-height: 1.6;
}

.service-button {
    min-height: 44px;

    display: flex;

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

    gap: 12px;

    padding: 11px 16px;

    border-radius: 6px;

    color: #fff;

    font-size: 14px;
    font-weight: 700;

    transition: .2s ease;
}

.service-button:hover {
    opacity: .92;
}

.service-check {
    display: flex;

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

    gap: 7px;

    margin-top: 17px;

    font-size: 13px;
    font-weight: 650;
}

.service-check:hover {
    text-decoration: underline;
}


/* ULT */

.service-ult .service-icon,
.service-ult .service-button {
    background:
        linear-gradient(
            135deg,
            #1b62c4,
            #073f9a
        );
}

.service-ult h3,
.service-ult .service-title span,
.service-ult .service-check {
    color: #0b4cab;
}


/* WBS */

.service-wbs .service-icon,
.service-wbs .service-button {
    background:
        linear-gradient(
            135deg,
            #ff7b20,
            #ee5c00
        );
}

.service-wbs h3,
.service-wbs .service-title span,
.service-wbs .service-check {
    color: #ef5d00;
}


/* PANTAU GTK */

.service-pantau .service-icon,
.service-pantau .service-button {
    background:
        linear-gradient(
            135deg,
            #8651cf,
            #6328a9
        );
}

.service-pantau h3,
.service-pantau .service-title span,
.service-pantau .service-check {
    color: #682baa;
}


/* TABLET */

@media (max-width: 950px) {

    .hero-inner {
        grid-template-columns: 1fr;

        gap: 28px;

        padding-top: 45px;
        padding-bottom: 45px;
    }

    .hero-info {
        max-width: 540px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: auto;
    }

    .service-card > p {
        min-height: auto;
    }
}


/* MOBILE */

@media (max-width: 650px) {

    .hero-inner {
        min-height: auto;

        padding-top: 38px;
        padding-bottom: 38px;
    }

    .hero-eyebrow {
        font-size: 15px;
    }

    .hero-content h1 {
        font-size: 36px;
    }

    .hero-content p {
        font-size: 14px;
    }

    .hero-info {
        padding: 20px;
    }

    .services-section {
        padding:
            38px 0 42px;
    }

    .section-heading {
        margin-bottom: 25px;
    }

    .section-heading h2 {
        font-size: 25px;
    }

    .service-card {
        padding: 22px;
    }

    .service-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;

        font-size: 21px;
    }
}