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

    body {
        font-family: 'Open Sans', sans-serif;
    }

    h2 {
        font-family: 'Open Sans', sans-serif;
        font-size: 15px;
        font-weight: bold;
        color: #0086e0;
        letter-spacing: 1.2px;
        text-align: center;
        line-height: 2;
        border-radius: 5px;
    }

    h3 {
        font-family: 'Open Sans', sans-serif;
        font-size: 15px;
        font-weight: bold;
        color: #0086e0;
        letter-spacing: 1.5px;
        line-height: 1;
        border-radius: 5px;
    }

    h9 {
        font-family: 'Open Sans', sans-serif;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        color: #0086e0;
        letter-spacing: 1.5px;
        line-height: 1;
        border-radius: 5px;
    }

    h4 {
        font-family: 'Open Sans', sans-serif;
        font-size: 15px;
        font-weight: 900;
        color: #0086e0;
        letter-spacing: 1px;
        text-align: center;
        line-height: 1.5;
    }

    h5 {
        font-family: 'Open Sans', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: #0086e0;
        letter-spacing: 1px;
        text-align: center;
        line-height: 1;
    }

    h6 {
        font-family: 'Open Sans', sans-serif;
        font-size: 13px;
        font-weight: bold;
        color: #000;
        letter-spacing: 1px;
        text-align: center;
        line-height: 1;
        border-radius: 5px;
    }

    .btn-punya {
        display: block;
        margin: 0px auto 0 auto;
        padding: 0px;
        cursor: pointer;
        background: none rgb(0, 134, 224);
        border: none;
        text-align: center;
        height: 55px;
        width: 536px;
        max-width: 95%;
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        font-weight: bold;
        color: rgb(255, 255, 255);
        letter-spacing: 2px;
        line-height: 1;
        border-radius: 10px;
        box-shadow: rgb(170, 170, 170) 5px 5px 7px 0px;
        transition: background 200ms ease 0s;
    }

    .btn-belum {
        display: block;
        margin: 10px auto;
        padding: 0px;
        cursor: pointer;
        background: none transparent;
        border: none;
        text-align: center;
        height: 57px;
        width: 536px;
        max-width: 100%;
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        font-weight: bold;
        color: rgb(0, 134, 224);
        letter-spacing: 2px;
        line-height: 1;
        border-radius: 5px;
        transition: background 200ms ease 0s;
    }

    .form-log {
        box-sizing: border-box;
        height: 40px;
        width: 536px;
        max-width: 100%;
        border: 2px solid rgb(0, 134, 224);
        border-image: initial;
        background-color: rgb(255, 255, 255);
        border-radius: 8px;
        box-shadow: rgb(237, 237, 237) 2px 2px 2px 0px;
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: bold;
        font-size: 16px;
        color: rgb(28, 28, 28);
        word-spacing: 7px;
        padding: 0px 45px;
    }

    #ionIcons {
        color: rgb(22, 119, 199);
        font-size: 29px;
        position: absolute;
        display: block;
        margin-top: 1px;
        margin-left: 15px;
    }

    input {
        border: 3px solid rgb(0, 134, 224);
        border-radius: 8px;
        padding: 5px 10px;
    }

    h1 {
        display: table;
        background: #fff;
        /* #F8F8FF */
        color: #fff;
        padding: 2px;
        width: 100%;
    }

    h7 {
        display: table;
        background: #3081ce;
        color: #fff;
        padding: 15px;
        width: 100%;
        font-size: 12px;
        text-align: center;
        font-family: 'Roboto Condensed', sans-serif;
    }

    /* navbar */
    h1 {
      background-color: rgb(0, 138, 224);
    }

    .container {
        max-width: 900px;
        padding: 15px;
        background-color: #fff;
        margin-left: auto;
        margin-right: auto;
        border-radius: ;
    }

    .slider .slick-slide {
        border-radius: 15px;
    }

    .slider .slick-slide img {
        width: 100%;
        margin-top: 0px;
        border-radius: 15px;
    }

    /* make button larger and change their positions */
    .slick-prev,
    .slick-next {
        width: 0px;
        height: 0px;
        z-index: 1;
    }

    .slick-prev {
        left: 0px;
    }

    .slick-next {
        right: 0px;
    }

    .slick-prev:before,
    .slick-next:before {
        font-size: 0px;
        text-shadow: 0 0 0px rgba(0, 0, 0, 0.5);


    /* h7 {
        display: table;
        background: #3081ce;
        color: #fff;
        padding: 15px;
        width: 100%;
        font-size: 12px;
        text-align: center;
        font-family: 'Roboto Condensed', sans-serif;
    } */

    .container {
        max-width: 900px;
        padding: 15px;
        background-color: #fff;
        margin-left: auto;
        margin-right: auto;
    }

    .slider .slick-slide {
        border: solid 0px #000;
    }

    .slider .slick-slide img {
        width: 100%;
        margin-top: 0px;
    }

    /* make button larger and change their positions */
    .slick-prev,
    .slick-next {
        width: 0px;
        height: 0px;
        z-index: 1;
    }

    .slick-prev {
        left: 0px;
    }

    .slick-next {
        right: 0px;
    }

    .slick-prev:before,
    .slick-next:before {
        font-size: 0px;
        text-shadow: 0 0 0px rgba(0, 0, 0, 0.5);
    }

    /* move dotted nav position */
    .slick-dots {
        bottom: 0px;
    }

    /* enlarge dots and change their colors */
    .slick-dots li button:before {
        font-size: 12px;
        color: #000;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        opacity: 0;
    }

    .slick-dots li.slick-active button:before {
        color: #dedede;
    }

    /* transition effects for opacity */
    /* .slick-arrow,
        {
        transition: opacity 0.2s ease-out;
    }

    legend {
        padding: 2px;
        background: #transparent;
        color: #0086e0;
    } */