@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@600&family=Poppins:wght@400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
}

:root {
    --primary-color: #140850;

}

.navbar-dark {
    background-color: #181d33 !important;

    .navbar-nav {
        font-weight: 400;

        .nav-link {
            color: #fff;
        }
    }

    .btn-search {
        background-color: #ffa805;
        color: #fff;
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        padding: 6px 16px 6px;
        margin-left: 10px;


    }
}

.navbar-light {


    img {
        max-height: 50px;
    }

    .navbar-nav {
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        font-weight: 600;

        .nav-link {
            color: var(--primary-color);

            &.active {
                font-weight: bold;
                color: var(--primary-color) !important;
            }
        }

    }

    .btn-daftar {
        background-color: var(--primary-color);
        color: #fff;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        padding: 6px 16px 6px;
        margin-left: 10px;
    }

    .btn-login {
        background-color: var(--primary-color);
        color: #fff;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        padding: 6px 16px 6px;
        margin-left: 10px;
    }

}

// header {
//     h1 {
//         position: absolute;
//         bottom: 350px;
//         left: 415px;
//         color: #FBFBFF;
//         text-align: center;
//         font-family: 'Fira Sans', sans-serif;
//         font-weight: 600px;
//         font-size: 48px;
//         text-shadow: 10px 10px 4px rgba(0, 0, 0, 0.25);
//     }

//     .btn-daftar {
//         background-color: var(--primary-color);
//         color: #fff;
//         font-family: 'Poppins', sans-serif;
//         font-weight: 700;
//         padding: 10px 64px 10px;
//         position: absolute;
//         bottom: 250px;
//         left: 635px;

//         &:hover {
//             color: #fff;
//         }
//     }
// }


// Header
header {
    margin-top: -68px;
    padding: 180px 0 165px;
    background-image: url('../img/head2.png');
    background-size: cover;


    h1 {
        color: #FBFBFF;
        text-align: center;
        font-family: 'Fira Sans', sans-serif;
        font-weight: 600px;
        font-size: 48px;
        text-shadow: 10px 10px 4px rgba(0, 0, 0, 0.25);
    }

    .btn-daftar {
        background-color: var(--primary-color);
        color: #fff;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        padding: 10px 64px 10px;

        &:hover {
            color: #fff;
        }
    }

}

// Section 2 LSP
.section-lsp {
    h2 {
        font-size: 38px;
        font-weight: 600;
        font-family: 'Fira Sans', sans-serif;
        color: var(--primary-color);
    }

    p {
        font-size: 14px;
        font-weight: 500;
        color: #000;
    }

    .card {
        margin-top: 30px;
        height: 470px;
        box-shadow: 0px -2px 80px rgba(0, 0, 0, 0.07), 0px -0.835552px 33.4221px rgba(0, 0, 0, 0.0503198), 0px -0.446726px 17.869px rgba(0, 0, 0, 0.0417275), 0px -0.250431px 10.0172px rgba(0, 0, 0, 0.035), 0px -0.133002px 5.32008px rgba(0, 0, 0, 0.0282725), 0px -0.0553451px 2.21381px rgba(0, 0, 0, 0.0196802);

        .card-body {
            h3 {
                font-size: 24px;
                font-weight: 700;
                color: #000;
            }

            p {
                color: #000;
                font-size: 14px;
            }
        }

        .btn-lsp {
            background-color: var(--primary-color);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            padding: 10px 64px 10px;
            border-radius: 10px;


            &:hover {
                color: #fff;
            }
        }
    }


}

.section-skema {
    h2 {
        font-size: 38px;
        font-weight: 600;
        font-family: 'Fira Sans', sans-serif;
        color: var(--primary-color);
    }

    .btn-label {
        border: 3px solid;
        background-color: #fff;
        color: var(--primary-color);
        font-size: 14px;
        font-weight: 700;
        padding: 7px 28px 7px;
        border-radius: 7px;

        &:hover {
            border: 3px solid;
            background-color: var(--primary-color);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            padding: 9px 28px 9px;
            border-radius: 7px;

        }
    }

    .btn-active {
        border: 3px solid;
        background-color: var(--primary-color);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        padding: 9px 28px 9px;
        border-radius: 7px;

        &:hover {
            border: 3px solid;
            background-color: #fff;
            color: var(--primary-color);
            font-size: 14px;
            font-weight: 700;
            padding: 7px 28px 7px;
            border-radius: 7px;
        }
    }

    .card {
        height: 320px;
        width: 240px;
        margin-top: 20px;
        box-shadow: 0px -2px 80px rgba(0, 0, 0, 0.07), 0px -0.835552px 33.4221px rgba(0, 0, 0, 0.0503198), 0px -0.446726px 17.869px rgba(0, 0, 0, 0.0417275), 0px -0.250431px 10.0172px rgba(0, 0, 0, 0.035), 0px -0.133002px 5.32008px rgba(0, 0, 0, 0.0282725), 0px -0.0553451px 2.21381px rgba(0, 0, 0, 0.0196802);

        img {
            border-radius: 0 0 10px 10px;
        }

        .card-body {
            h3 {
                font-size: 24px;
                font-weight: 700;
                color: #000;
            }

            p {
                color: #000;
                font-size: 14px;
            }
        }

        .btn-lihat {
            background-color: var(--primary-color);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            padding: 10px 64px 10px;
            border-radius: 0 0 10px 10px;


            &:hover {
                color: #fff;
            }
        }


    }


}

.section-gabung {
    h2 {
        font-size: 38px;
        font-weight: 600;
        font-family: 'Fira Sans', sans-serif;
        color: var(--primary-color);
    }

    .card {
        border-radius: 10px;
        box-shadow: 0px -2px 80px rgba(0, 0, 0, 0.07), 0px -0.835552px 33.4221px rgba(0, 0, 0, 0.0503198), 0px -0.446726px 17.869px rgba(0, 0, 0, 0.0417275), 0px -0.250431px 10.0172px rgba(0, 0, 0, 0.035), 0px -0.133002px 5.32008px rgba(0, 0, 0, 0.0282725), 0px -0.0553451px 2.21381px rgba(0, 0, 0, 0.0196802);

        h5 {
            font-size: 18px;
            font-weight: 600;
            color: var(--primary-color);
        }

        p {
            color: #000;
            font-size: 14px;
            font-size: 400;
        }

        .btn-info {
            border: 3px solid;
            background-color: var(--primary-color);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            padding: 9px 28px 9px;
            border-radius: 7px;

            &:hover {
                border: 3px solid;
                background-color: #fff;
                color: var(--primary-color);
                font-size: 14px;
                font-weight: 700;
                padding: 7px 28px 7px;
                border-radius: 7px;

            }
        }

        .btn-info2 {
            border: 3px solid;
            background-color: #fff;
            color: var(--primary-color);
            font-size: 14px;
            font-weight: 700;
            padding: 7px 28px 7px;
            border-radius: 7px;

            &:hover {


                border: 3px solid;
                background-color: var(--primary-color);
                color: #fff;
                font-size: 14px;
                font-weight: 700;
                padding: 9px 28px 9px;
                border-radius: 7px;

            }
        }

    }



}

.section-testi {

    h2 {
        font-size: 38px;
        font-weight: 600;
        font-family: 'Fira Sans', sans-serif;
        color: var(--primary-color);
    }

    .card {
        margin-top: 20px;
        padding: 5px;
        border-radius: 10px;
        box-shadow: 0px -2px 80px rgba(0, 0, 0, 0.07), 0px -0.835552px 33.4221px rgba(0, 0, 0, 0.0503198), 0px -0.446726px 17.869px rgba(0, 0, 0, 0.0417275), 0px -0.250431px 10.0172px rgba(0, 0, 0, 0.035), 0px -0.133002px 5.32008px rgba(0, 0, 0, 0.0282725), 0px -0.0553451px 2.21381px rgba(0, 0, 0, 0.0196802);

        img {
            padding: 9px;
        }

        h3 {
            font-size: 24px;
            font-weight: 600;
            color: #000;
        }

        h5 {
            font-size: 18px;
            font-weight: 500;
            color: var(--primary-color);


        }

        p {
            color: #000;
            font-size: 12px;
            font-size: 400;
            padding: 20px;
        }
    }
}

.section-footer {
    background-color: var(--primary-color);
    padding: 50px;

    h5 {
        font-size: 24px;
        color: #fff;
        font-weight: 600;
    }

    a {
        color: #fff;
        font-size: 14px;
        font-weight: 500;
    }

    span {
        color: #fff;
    }

    iframe {
        max-height: 300px;
        max-width: 300px;
    }


    p {
        color: #fff;
    }
}