body{
    position: relative;
width: 1500px;
height: 2521px;
background: #FFFFFF;
}

*{
    margin: 0;
    padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

.logo-nav{
    position: absolute;
    left: 2.87%;
    right: 73.53%;
    top: -29.33%;
    bottom: -37.33%;
    max-width: 100%;
    height: auto;
    width: auto\9;
}

nav{
    position: relative;
    width: 1500px;
    height: 150px;
    background-color: #FFFFFF;

}

.nav-link{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 50px;
    gap: 120px;

    position: absolute;
    left: 29.47%;
    right: 3%;
    top: 30%;
    bottom: 30%;
}

li{
    width: 65px;
    height: 28px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 450;
    font-size: 24px;
    line-height: 28px;

    color: #024391;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
    list-style-type:none;
}

a{
    text-decoration: none;
}

.judul{
    position: absolute;
    width: 1298px;
    height: 1196px;
    left: 199px;
    top: 250px;
    
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400px;
    font-size: 20px;
    line-height: 150%;
    
    color: #0d0d0d;
}

.foot{
    position: absolute;
    left: 0%;
    right: 0%;
    bottom: 0%;
    height: 402px;
    width: 1500px;
    left: 0px;
    top: 2119px;

    background: #FFB000;
}

.logo-foot{
    position: absolute;
    left: 1.8%;
    right: 68.93%;
    top: 11.44%;
    bottom: 11.19%;
}

.catatankaki{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;

    position: absolute;
    width: 196px;
    height: 251px;
    left: calc(50% - 196px/2 - 75px);
    top: calc(50% - 251px/2 + 0.5px);
}

.footer{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 160%;
    /* or 32px */

    color: #024391;

    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
    font-weight: bold;
}

.oke1{
    width: 145px;
    height: 43px;
}

.oke2{
    width: 166px;
    height: 37px;
}

.oke3{
    width: 196px;
    height: 36px;
}

.oke4{
    width: 99px;
    height: 37px;
}

.teks-form{
    position: absolute;
    left: 58.93%;
    right: 2.53%;
    top: 24.13%;
    bottom: 24.13%;
}

.teks-form1{
    top: 24.13%;
    bottom: 48.01%;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 140%;
    /* or 56px */


    color: #024391;
}

.form1{
    box-sizing: border-box;

    position: absolute;
    left: 0%;
    right: 10.67%;
    top: 59.95%;
    bottom: 24.13%;

    border: 1px solid #024391;
    border-radius: 4px;
    background-color: #FFB000;
}

.tombolsub{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 32px;
    gap: 10px;

    position: absolute;
    left: 70%;
    right: 4.8%;
    top: 59.95%;
    bottom: 24.13%;

    background: #024391;
    backdrop-filter: blur(40px);
    /* Note: backdrop-filter has minimal browser support */

    border-radius: 4px;
}

.hak{
    position: absolute;
    width: 248px;
    height: 24px;
    left: 48px;
    top: 357px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 160%;
    /* identical to box height, or 24px */


    color: #024391;
}