/*HEAD*/
* {box-sizing: border-box;}

body { font-family: Arial, Helvetica, sans-serif; padding: 0px; margin: 0px auto;}
    @media (max-width: 768px) {body 
        {flex-direction: column; align-items: stretch;}
    }


/*SCROLL*/
html{scroll-behavior:smooth;}



/*HEADER*/
.header{position: fixed; top: 0; left: 0; width: 100%;
        display: flex; justify-content: space-between; align-items: center;
        background: #001442; padding: 15px 30px; box-sizing: border-box;}

.logo{color: white; font-size: 24px; font-weight: bold;}
.menu{display: flex; gap: 20px;}
.menu a{color: white; text-decoration: none;}
.header a{color:white; text-decoration:none; margin-right:40px;}
    .header a:hover {color:rgb(157, 168, 252); text-decoration:none; margin-right:40px; transform: scale(1.1);}

.section{min-height:100vh; padding-top: 100px;}
    @media (max-width: 768px) {
            .header a{color:white; text-decoration:none; margin-right:15px;}
            .section{padding-top: 30px;}
    }


/*CONTAINER*/
.container {width: 100%; background: white;}
.container-30 {width: 32%; background: #001442;}
.container-30-tengah {display: flex; width: 32%; background: #001442; justify-content: center; align-items: center;}
.container-16 {width: 100%; background: #001442; padding-left: 15px;}
.container-60 {width: 60%; background: white; padding: 60px; padding-top: 20px;}
.container1 {width: 100%; display: flex; background: #001442; justify-content: center; padding-bottom: 0px; padding-left: 25px; padding-right: 25px;}
.container11 {width: 100%; display: flex; background: #001442; justify-content: center; padding-bottom: 0px; padding-left: 25px; padding-right: 25px;}
.container12 {width: 50%; display: flex; background: #001442; justify-content: center; align-items: center; margin: 0px auto;}
.container-atas {width: 100%; height: 350px; background: white; color: black; text-align: center; padding: 40px; display: block;}
.container-bawah {width: 100%; height: 350px; background: #001442; color: white; text-align: center; padding: 40px; display: flex;}
     @media (max-width: 768px) {
        .container {width: 100%;}
        .container-30 {width: 100%;}
        .container-30-tengah {width: 100%;}
        .container-60 {width: 100%; padding: 35px; padding-top: 80px;}
        .container1 {width: 100%; padding: 0px; flex-direction: column; align-items: stretch;}
        .container1 {width: 100%;}
    }




/*FORM*/
.form-grup {display: flex; width: 100%; margin-bottom: 20px; font-size: 16px;}
    .form-grup label {width: 100%;}
 


/*CARD*/
.card1 {display: inline-block; background: #001442; color: white; font-size: 14px; padding: 5px 20px; margin-bottom: 5px; border-radius: 8px; box-shadow: #001442;}
.card2 {display: inline-block; background: white; color: #001442; font-size: 14px; padding: 5px 20px; margin-bottom: 5px; border-radius: 8px; box-shadow: #001442;}


/*GRID*/
.grid-2 {column-count: 2; column-gap: 20px; width:100%; margin:auto;}
.grid-3 {column-count: 3; column-gap: 50px; width:100%; margin:auto;}
.grid-6 {column-count: 6; column-gap: 20px; width:100%; margin:auto;}
    @media (max-width: 768px) {
            .grid-2 {column-count: 1; column-gap: 2px; width:100%; margin:auto;}
    }


/*IMAGE*/
img {width: 100%;}
.img-foto {width: 100%; background: #001442; margin: 0px auto; padding-top: 40px; padding-bottom: 5PX; padding-right: 120px;}
.img-logo {width: 30%; display: flex;}
.img-icon {width: 20%; display: flex;}
.img-card {width: 100%; margin: 0px auto; padding-top: 10px; padding-bottom: 10PX;}
    @media (max-width: 768px) {
            .img-foto {width: 100%; background: #001442; margin: 0px auto; padding-top: 40px; padding-left: 120px;}
            .img-card {width: 20%;}
    }


/*HURUF*/
h1 {font-size: 35px; margin: 0px auto;}
h2 {font-size: 25px; margin: 0px auto; font-weight: bold;}
h3 {font-size: 18px; margin: 0px auto;}
h4 {font-size: 16px; margin: 0px auto;}
h5 {font-size: 12px; margin: 0px auto;}
h6 {font-size: 60px; margin: 0px auto;}
    @media (max-width: 768px) {
            h1 {font-size: 30px; margin: 0px auto;}
            h2 {font-size: 25px; margin: 0px auto; font-weight: bold;}
            h3 {font-size: 18px; margin: 0px auto;}
            h4 {font-size: 16px; margin: 0px auto;}
            h5 {font-size: 12px; margin: 0px auto;}
            h6 {font-size: 50px; margin: 0px auto;}
        }