/* =========================================================
   NULIFE.ID
   OFFICE LANDING PAGE
   ========================================================= */


/* =========================================================
   NULIFE COLORS
   ========================================================= */

:root {

    --nulife-maroon: #8b1e2d;
    --nulife-red: #b22234;
    --nulife-red-dark: #761724;

    --nulife-green: #198754;
    --nulife-green-dark: #12663f;

    --nulife-light-green: #eef8f2;

    --nulife-light-red: #fff3f4;

    --nulife-white: #ffffff;

    --nulife-background: #fafafa;

    --nulife-text: #343434;

    --nulife-muted: #777777;

}


/* =========================================================
   BODY
   ========================================================= */

html,
body {

    min-height: 100%;

}


body {

    margin: 0;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    color: var(--nulife-text);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafafa 55%,
            #f5faf7 100%
        );

}


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

body {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

}


.main-content {

    flex: 1;

}


/* =========================================================
   TOP BAR
   ========================================================= */

.top-bar {

    background:
        linear-gradient(
            90deg,
            var(--nulife-maroon),
            var(--nulife-red)
        );

    color: white;

    font-size: 0.78rem;

    font-weight: 600;

    letter-spacing: 1.5px;

    padding: 7px 0;

}


/* =========================================================
   HEADER
   ========================================================= */

.main-header {

    background: white;

    padding:
        25px
        20px
        22px;

    border-bottom:
        1px solid
        rgba(0,0,0,0.07);

}


.nulife-logo {

    max-width: 280px;

    max-height: 115px;

    width: auto;

    height: auto;

    object-fit: contain;

}


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

.main-content {

    padding:
        55px
        20px
        75px;

}


/* =========================================================
   WELCOME
   ========================================================= */

.welcome {

    margin-bottom: 45px;

}


.welcome-small {

    color:
        var(--nulife-maroon);

    font-size: 0.9rem;

    font-weight: 700;

    letter-spacing: 3px;

}


.welcome h1 {

    margin:
        5px
        0
        2px;

    font-size: 3rem;

    font-weight: 800;

    color:
        var(--nulife-maroon);

    letter-spacing: 1px;

}


.welcome-title {

    color:
        var(--nulife-green);

    font-size: 1.15rem;

    font-weight: 700;

    letter-spacing: 3px;

}


.welcome p {

    margin-top: 18px;

    margin-bottom: 0;

    color:
        var(--nulife-muted);

    font-size: 1rem;

}


.welcome::after {

    content: "";

    display: block;

    width: 75px;

    height: 4px;

    margin:
        20px
        auto
        0;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--nulife-maroon) 50%,
            var(--nulife-green) 50%
        );

}


/* =========================================================
   SERVICE CARD
   ========================================================= */

.service-card {

    position: relative;

    height: 100%;

    padding:
        40px
        30px
        35px;

    background: white;

    border-radius: 18px;

    border:
        1px solid
        #e7e7e7;

    text-align: center;

    box-shadow:
        0 8px 28px
        rgba(0,0,0,0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.service-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,0.11);

}


/* =========================================================
   CARD TOP LINE
   ========================================================= */

.admin-card {

    border-top:
        6px solid
        var(--nulife-maroon);

}


.reseller-card {

    border-top:
        6px solid
        var(--nulife-green);

}


/* =========================================================
   ICON
   ========================================================= */

.service-icon {

    width: 76px;

    height: 76px;

    margin:
        0
        auto
        20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 32px;

}


.admin-icon {

    background:
        var(--nulife-light-red);

}


.reseller-icon {

    background:
        var(--nulife-light-green);

}


/* =========================================================
   LABEL
   ========================================================= */

.service-label {

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 7px;

}


.admin-card .service-label {

    color:
        var(--nulife-maroon);

}


.reseller-card .service-label {

    color:
        var(--nulife-green);

}


/* =========================================================
   CARD TITLE
   ========================================================= */

.service-card h2 {

    margin:
        0
        0
        14px;

    font-size: 1.5rem;

    font-weight: 800;

}


/* =========================================================
   CARD DESCRIPTION
   ========================================================= */

.service-card p {

    max-width: 390px;

    min-height: 50px;

    margin:
        0
        auto
        30px;

    color:
        var(--nulife-muted);

    line-height: 1.65;

}


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

.btn-nulife {

    width: 100%;

    max-width: 360px;

    padding:
        13px
        18px;

    border-radius: 8px;

    color: white;

    font-size: 0.84rem;

    font-weight: 800;

    letter-spacing: 0.3px;

    border: none;

    transition:
        all 0.2s ease;

}


.btn-admin {

    background:
        var(--nulife-maroon);

}


.btn-admin:hover {

    color: white;

    background:
        var(--nulife-red-dark);

}


.btn-reseller {

    background:
        var(--nulife-green);

}


.btn-reseller:hover {

    color: white;

    background:
        var(--nulife-green-dark);

}


.arrow {

    margin-left: 8px;

    font-size: 1.1rem;

}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {

    padding:
        25px
        20px
        28px;

    background:
        white;

    border-top:
        1px solid
        #e7e7e7;

}


.footer-brand {

    color:
        var(--nulife-maroon);

    font-size: 1.15rem;

    font-weight: 800;

    letter-spacing: 1px;

}


.footer-slogan {

    color:
        var(--nulife-green);

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 3px;

}


.footer-line {

    width: 45px;

    height: 2px;

    margin:
        10px
        auto;

    background:
        var(--nulife-maroon);

}


.footer-copy {

    color:
        #999;

    font-size: 0.73rem;

}


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

@media (max-width: 576px) {


    .top-bar {

        font-size: 0.68rem;

        letter-spacing: 1px;

    }


    .main-header {

        padding:
            20px
            15px;

    }


    .nulife-logo {

        max-width: 220px;

        max-height: 90px;

    }


    .main-content {

        padding:
            40px
            15px
            55px;

    }


    .welcome {

        margin-bottom: 32px;

    }


    .welcome h1 {

        font-size: 2.25rem;

    }


    .welcome-title {

        font-size: 0.95rem;

        letter-spacing: 2px;

    }


    .service-card {

        padding:
            32px
            22px
            28px;

    }


    .service-card h2 {

        font-size: 1.3rem;

    }


    .service-card p {

        min-height: auto;

    }


}