*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body{
    min-height:100vh;
    padding-top:90px;

    background: linear-gradient(
        135deg,
        #2e5aa7 0%,
        #86c5ff 50%,
        #f8e6a0 100%
    );
}

/* bagian navbar */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}
.nav-link {
    display: flex;
    list-style: none;
    gap: 25px;
    margin-left: auto;
    padding: 0;
    margin: 0;
}
.nav-link li a {
    color: #2e5aa7;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
} 

.nav-link li a:hover {
    color: #ffa628;
}

.logo img{

    height:70px;

    width:auto;

    display:block;

    transition:0.3s;

}

.logo img:hover{

    transform:scale(1.05);

}

.contact{
    padding:100px 8%;
}

.contact-container{

    display:flex;

    gap:40px;

    align-items:stretch;
}

/*kiri*/
.contact-info{

    width:320px;

    background:rgba(255,255,255,0.2);

    backdrop-filter:blur(10px);

    border-radius:25px;

    padding:35px;
}

.contact-info h2{

    color:white;

    margin-bottom:30px;

    font-size:32px;
}

.info-box{

    background:rgba(255,255,255,0.15);

    padding:18px;

    border-radius:15px;

    margin-bottom:20px;

    transition:0.3s;
}

.info-box:hover{

    transform:translateY(-2px);

    background:rgba(255,255,255,0.3);
}

.info-box h3{

    color:white;

    margin-bottom:5px;
}

.info-box p{

    color:#f8e6a0;
}

/*kanan*/
.contact-form{

    flex:1;

    background:rgba(255,255,255,0.15);

    backdrop-filter:blur(10px);

    border-radius:25px;

    padding:40px;
}

.contact-form h1{

    color:white;

    text-align:center;

    margin-bottom:5px;
}

.contact-form h2{

    color:#f8e6a0;

    text-align:center;

    margin-bottom:30px;

    font-size:22px;
}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.contact-form label{

    color:white;

    font-weight:bold;
}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    background:rgba(255,255,255,0.2);

    color:white;

    font-size:15px;

    outline:none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{

    color:rgba(255,255,255,0.7);
}

.contact-form textarea{

    height:150px;

    resize:none;
}

.contact-form button{

    margin-top:15px;

    padding:15px;

    border:none;

    border-radius:12px;

    background:#f8e6a0;

    color:#2e5aa7;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;
}

.contact-form button:hover{

    background:#ffa628;

    transform:translateY(-3px);
}

@media(max-width:768px){

    .contact-container{

        flex-direction:column;
    }

    .contact-info{

        width:100%;
    }
}