/* font */
@font-face {
    font-family: "Nunito";
    src: url(font/Nunito-VariableFont_wght.ttf);
}

/* end font */
body{
    background-color: #E7F0FF;
    font-family: "Nunito";
    color: #100F64;
}
.head{
    background-image: url(image/background1.png);
    background-size:cover;
    color: #01286f;
    height: 710px;
    margin: 10px 15px 10px 15px;
    text-align: center;
    border-radius: 50px 50px 0 0;
}
.isi{
    margin-top: 10%;
}
.isi2{
    margin-top: 18%;
}
.isi2 h1{
    font-weight: 800;
}
.isi2 p{
    font-size: 18px;
}
.logo{
    width: 100%;
}
button, .bt{
    font-weight: 500;
    background-color: #7d9fc0;
    box-shadow: 5px 6px #00000062 ;
    color: white;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    width: 35%;
    height: 14%;
    font-size: 15px;
    padding: 12px;
}
#munculKenali{
    margin-right: 50px;
}
.bt:hover{
    background-color: #001a33;
    box-shadow: 3px 5px #00000062;
    width: 37%;
    height: 16%;
    transition: width 2s, height 4s;
    animation-name: bt_atas;
    animation-duration: 4s;
}
@keyframes bt_atas {
    0%   {background-color: #7d9fc0;}
    25%  {background-color: #577ea4;}
    50%  {background-color: #436180;}
    100% {background-color: #1f2e3c;}
}
.isi_konten{
    padding: 20px 80px 20px 80px;
    display: none;
}
.isi_konten p{
    color: #042F5A;
    font-size: 20px;
    padding: 0 100px 0 100px;
}
.jdl{
    text-align: center;
    word-spacing: 3px;
    font-weight: bolder;
}
.jdl_form{
    background-color: #ffffff;
    padding: 25px;
    text-align: center;
    word-spacing: 3px;
    font-weight: bolder;
}
.smpl{
    background-color: #A7C3DF;
    padding: 30px 0 30px 0;
    display: none;
}
.smpl img{
    width: 90%;
    margin: 25px 0 15px 0;
    border-radius: 40px;
}
.contoh{
    background-color: #ffffff;
    padding: 1%;
    text-align: center;
    margin-top: 35px;
    border: 5px double #71afff;
    border-radius: 50px;
}
.isi_pdn{
    padding: 25px 0 25px 0;
}
.pdn{
    margin: 40px 0 40px 0;
}
.isi_pdn,ul,ol{
    font-size:18px ;
    line-height: 1.8;
}
h3{
    font-weight: bolder;
}
.gmbr1{
    width: 100%;
    margin-top: 20px;
}
.gmbr2{
    width: 80%;
    margin-left: 10%;
    margin-bottom: 40px;
}

/* FORM PESANNNNN */
.butt{
    font-weight: 500;
    background-color: #7d9fc0;
    box-shadow: 5px 6px #00000062 ;
    color: white;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    width: 15%;
    font-size: 16px;
    padding: 15px;
}
.butt:hover{
    background-color: #001a33;
    box-shadow: 3px 5px #00000062;
    width: 18%;
    transition: width 2s;
    animation-name: bt_atas;
    animation-duration: 4s;
}
.formnya{
    background-image: url(image/background2.jpg);
    background-size: cover;
    display: none;
    height: 750px;
}
.row{
    --bs-gutter-x: 0.2rem;
}
form{
    margin-top: 6%;
}
.gmb{
    margin-top: 10%;
    width: 100%;
}
.datainput{
    position:relative;
    margin:5px 0 20px;
}
.datainput select{
    padding:18px;
    color:#555;
    font-size:14px;
    width:100%;
    border:0;
    border-bottom:1px solid #ddd;
    outline:none;
    background:#fff;
    border-radius: 20px;
}
.datainput input,.datainput textarea{
    font-size:15px;
    padding:15px 0;
    display:block;
    width:100%;
    border:none;
    border-bottom:1px solid #ddd;
    border-radius: 20px;
    padding-left: 5%;
}
.datainput label{
    color:#999;
    font-size:15px;
    font-weight:400;
    position:absolute;
    pointer-events:none;
    left:0;
    top:18px;
    transition:.2s ease all;
}
.datainput input:focus,.datainput textarea:focus{
    outline:none
}
.bar{
    position:relative;
    display:block;
    width:94%;
    margin: 0 0 0 3%;
}
.bar:before,.bar:after{
    content:'';
    height:2px;
    width:0;
    position:absolute;
    background:#5b5b5b;
    transition:.2s ease all;
}
.bar:before{
    left:50%;
}
.bar:after{
    right:50%;
}
.datainput input:focus~.bar:before,.datainput input:focus~.bar:after,.datainput textarea:focus~.bar:before,.datainput textarea:focus~.bar:after{
    width:50%;
}
.whatsapp-form a.send_form {
    color: #fff;
    background: #2B3467;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 50px;
    letter-spacing: .5px;
    font-size: 15px;
    width: 100%;
}
#text-info span {
    display: block;
    padding: 10px 15px;
    text-align: center;
    font-weight: 400;
    margin: 15px 0;
    border-radius: .5rem;
}
#text-info span.yes {
    background: #4CAF50;
    color: #f3f6f4;
}
#text-info span.no {
    background: #F44336;
    color: #f3f6f4;
}
.footer{
    font-size: 15px;
}

/* Untuk perangkat kecil */
@media (max-width: 576px) {
    .head{
        background-image: url(image/background_hp.jpg);
    }
    .isi2{
        margin-top: 0;
    }
    .isi2 h1{
        font-size: 30px;
    }
    .isi2 p{
        padding: 5%;
        font-size: 15px;
    }
    .logo{
        width: 80%;
    }
    #munculKenali{
        margin-right: 0;
        margin-bottom: 20px;
    }
    .bt{
        width: 50%;
        height: 20%;
    }
    .bt:hover{
        width: 55%;
        height: 25%;
    }
    .isi_konten{
        padding: 5px 10px 5px 10px;
    }
    .isi_konten p{
        font-size: 13px;
        padding: 0 40px 0 5px;
    }
    .jdl{
        font-size:25px;
        padding: 10px 0 0 0;
    }
    .jdl_form{
        font-size:25px;
        padding: 20px 0 30px 0;
    }
    .smpl{
        padding: 20px 10px 20px 10px;
        font-size: 12px;
    }
    .smpl img{
        width: 100%;
        margin: 10px 0 10px 0;
        border-radius: 20px;
    }
    .contoh{
        padding: 5px 10px 5px 10px;
        margin-top: 15px;
        border-radius: 35px;
    }
    .isi_pdn{
        padding: 15px 10px 15px 10px;
    }
    .pdn{
        margin: 0;
    }
    .isi_pdn,ul,ol{
        font-size:14px ;
    }
    h3{
        font-size: 20px;
    }
    .gmbr1{
        margin-top: 6%;
        margin-bottom: 20px;
    }
    .gmbr2{
        width: 90%;
        margin-left:5%;
        margin-bottom: 20px;
    }
    /* FORM PESANNNNN */
    .butt{
        width: 48%;
        padding: 13px;
    }
    .butt:hover{
        width: 70%;
    }
    .formnya{
        background-image: url(image/background2_hp.jpg);
        height: 1020px;
        padding: 0 30px 0 30px;
    }
    .gmb{
        margin-left: 20%;
        margin-top: 0;
        width: 75%;
    }
    form p, form h5{
        color: #fff;
        font-size: 13px;
    }
    form h5{
        font-size: 15px;
    }
    .datainput input,.datainput textarea{
        font-size:14px;
    }
    .bar{
        width:92%;
    }
    #text-info span {
        font-size: 14px;
    }
    .footer{
        font-size: 12px;
    }
}