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

*{
    margin: 0;
    padding: 0;
}

.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: 500;
    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;
}

#Home{
    height: 5655px;
    width: 1500px;
    left: -3382px;
    top: -3306px;
    border-radius: 0px;
}

.bg-home{
    position: absolute;
    width: 1500px;
    height: 735px;
    left: 0px;
    top: 171px;
}

.text1{
    position: absolute;
    width: 762px;
    height: 432px;

    left: 110px;
    top: 322px;
    border-radius: nullpx;


    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 150%;
    /* or 48px */
    color: #FFFFFF;
}

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

    position: absolute;
    width: 299px;
    height: 89px;
    left: 1038px;
    top: 240px;

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

    border-radius: 4px;
}

.text-button1{
    width: 254px;
    height: 38px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    /* identical to box height */

    text-align: right;

    color: #002B5F;


    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
}

.garis1{
    position: absolute;
    left: 110px;
    top: 1029.5px;
}

.visi{
    position: absolute;
    width: 48px;
    height: 23px;
    left: 197px;
    top: 1020px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 23px;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #002B5F;
}

.isi-visi{
    position: absolute;
    width: 552px;
    height: 280px;
    left: 110px;
    top: 1081px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 200%;
    /* or 56px */
    color: #002B5F;
}

.garis2{
    position: absolute;
    left: 783px;
    top: 1029.5px;
}

.misi{
    position: absolute;
    width: 48px;
    height: 23px;
    left: 879px;
    top: 1020px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 23px;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #002B5F;
}

.isi-misi{
    position: absolute;
    width: 607px;
    height: 450px;
    left: 783px;
    top: 1081px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 160%;
    /* or 45px */


    color: #002B5F;
}

.bg2{
    position: absolute;
    width: 1500px;
    height: 752px;
    left: 0px;
    top: 1645px;
    border-radius: 0px;
}

.judul-home3{
    position: absolute;
    width: 591px;
    height: 154px;
    left: 145px;
    top: 1692px;
    
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 64px;
    line-height: 120%;
    /* or 77px */
    
    
    color: #002B5F;
}

.dot1{
    position: absolute;
    width: 15px;
    height: 15px;
    left: 176px;
    top: 1921px;
}

.dot2{
    position: absolute;
    width: 18px;
    height: 16.96px;
    left: 176px;
    top: 1991.021px;
}

.dot3{
    position: absolute;
    width: 18px;
    height: 16.96px;
    left: 176px;
    top: 2061.42px;
}

.dot4{
    position: absolute;
    width: 18px;
    height: 16.96px;
    left: 176px;
    top: 2129px;
}

.dot5{
    position: absolute;
    width: 18px;
    height: 16.96px;
    left: 176px;
    top: 2199px;
}

.dot6{
    position: absolute;
    width: 18px;
    height: 16.96px;
    left: 176px;
    top: 2269px;
}


.home3{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;

    color: #002B5F;
}

.ke1{
    position: absolute;
    width: 124px;
    height: 28px;
    left: 221px;
    top: 1914px;
}

.ke2{
    position: absolute;
    width: 90px;
    height: 28px;
    left: 221px;
    top: 1984px;
}

.ke3{
    position: absolute;
    width: 123px;
    height: 28px;
    left: 221px;
    top: 2054px;
}

.ke4{
    position: absolute;
    width: 84px;
    height: 28px;
    left: 221px;
    top: 2124px;
}

.ke5{
    position: absolute;
    width: 148px;
    height: 28px;
    left: 221px;
    top: 2194px;
}

.ke6{
    position: absolute;
    width: 176px;
    height: 28px;
    left: 221px;
    top: 2264px;
}

.img-home3{
    position: absolute;
    width: 628px;
    height: 618px;
    left: 762px;
    top: 1712px;
    border-radius: 45px;
}

.garis3{
    top: 2547px;
}

.judul-home4{
    position: absolute;
width: 546px;
height: 33px;
left: 205px;
top: 2530px;

font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-size: 28px;
line-height: 33px;
/* identical to box height */

letter-spacing: 2px;
text-transform: uppercase;

color: #002B5F;
}

.teks-home4{
    position: absolute;
    width: 296px;
    height: 424px;
    left: 229px;
    top: 2643px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 42px;
    line-height: 49px;

    color: #024391;
}

.isi-teks-h4{
    position: absolute;
    width: 296px;
    height: 424px;
    left: 229px;
    top: 2713px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 200%;
    /* or 56px */


    color: #002B5F;
}

.home4kanan{
    position: absolute;
    width: 305px;
    height: 235px;
    left: 839px;
    top: 2643px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 42px;
    line-height: 49px;

    color: #024391;
}

.isi-teks-kanan4{
    position: absolute;
    width: 320px;
    height: 424px;
    left: 839px;
    top: 2713px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 200%;
    /* or 56px */


    color: #002B5F;
}

.bg-oren{
    position: absolute;
    width: 1500px;
    height: 757px;
    left: 0px;
    top: 3187px;
}

.judul-home5{
    position: absolute;
    width: 611px;
    height: 154.87px;
    right: 780px;
    top: 3270px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 120%;
    /* or 58px */


    color: #002B5F;
}

.mobile{
    position: absolute;
    width: 447px;
    height: 447px;
    top: 3389px;
}

.satu{
    left: 104px;
}

.dua{
    left: 551px;
}

.tiga{
    left: 997px;
}

.tint{
    position: absolute;
    width: 1280px;
    height: 384px;
    left: 104px;
    top: 4059px;
    
    border-radius: 12px;
}

.tint1{
    position: absolute;
    width: 1280px;
    height: 384px;
    left: 104px;
    top: 4059px;
    
    /* Black */
    background: #0B0706;
    mix-blend-mode: normal;
    opacity: 0.5;
    border-radius: 12px;
}

.isi-home6{
    position: absolute;
    width: 847px;
    height: 67px;
    right: 333px;
    top: 4150px;

    /* H1 */

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

    text-align: center;

    color: #FFFFFF;
}

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

    position: absolute;
    width: 308px;
    height: 82px;
    left: 589px;
    top: 4270px;

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

    border-radius: 4px;
}

.teks-tombol2{
    width: 268px;
    height: 33px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 33px;
    /* identical to box height */

    text-align: right;

    color: #024391;


    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
}

.judul-home6{
    position: absolute;
    width: 106px;
    height: 56px;
    left: 104px;
    top: 4558px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 40px;
    line-height: 140%;
    /* identical to box height, or 56px */
    color: #002B5F;
}

.thum{
    position: absolute;
    width: 302px;
    height: 221px;
    top: 4664px;
}

.nail1{
    left: 104px;
}

.nail2{
    left: 431px;
}

.nail3{
    left: 758px;
}

.nail4{
    left: 1085px;
}

.teks{
    position: absolute;
    width: 290px;
    height: 69.33px;
    top: 4901.85px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 150%;
    /* or 30px */
    color: #002B5F;
}

.desk{
    position: absolute;
    width: 290px;
    height: 60.09px;
    top: 4987.18px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    color: #525560;
}

.judul-home7{
    position: absolute;
    width: 300px;
    height: 38px;
    left: 104px;
    top: 4500px;

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    /* identical to box height */

    letter-spacing: 2px;
    text-transform: uppercase;

    color: #002B5F;
    font-weight: bold;
}

.sponsor{
    position: absolute;
    width: 1309px;
    height: 195px;
    left: 81px;
    top: 4550px;
}

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

    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;
}