@font-face {
    font-family: "AboxFonts";
    src: url("assets/fonts/GothamRounded/GothamRounded-Medium.otf");
}

* {
    margin:auto;
    font-family: "AboxFonts";
    color: #dd0000;
}

.title {font-weight:900; text-align:center; font-size:2em; padding-top:40px; padding-bottom:40px;}
.logo {height: 360px; margin-top:-60px;}

.background-1 {
    background-image: url("assets/images/bg-home.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

.bg-text-1 {
    background-image: url("assets/images/bg-text.png");
    background-repeat: no-repeat;
    background-size: cover;/*100%;*/
    /* background-position: bottom; */
    padding:20px;
}
.background-2 {
    background-image: url("assets/images/BG-Reg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

.bg-text-2 {
    background-image: url("assets/images/BG-Text Form.png");
    background-repeat: no-repeat;
    background-size: 100%;
    /* background-position: bottom; */
    padding:20px;
}
.bg-package {background-color:#ffe600; border:1px solid #dd0000; border-radius:7px;}

.abox-btn {background-image:linear-gradient(to right, #ffbf00,#feffa7, #ffbf00);
    /*#ffe600*/; color:#dd0000; border:2px solid #dd0000; border-radius:20px; padding: 7px; font-weight:800;}
.section-title {font-weight:900; font-size: 1.2em;}
.section-title-package {font-weight:900; font-size: 1.2em;}
.icon-robot {margin-top:-60px;}
.abox-container {width:600px;}
.img-qris {width:80%;}
.img-step {width:60%;}

@media (max-width: 600px) {
    h1 {
        font-size: 1.2em;
    }
    .img-qris{
        width:100%;
    }
    
    .title {font-size:1.2rem;}
    .logo {width:60vw; height:auto;}
    p{font-size:x-small;}
    .section-title {font-size:x-small;}
    .section-title-package {font-size:0.75em;}
    .icon-robot {width:60vw; margin-top:-60px;}
    .abox-btn {font-size:x-small;}
    .abox-container {width:92%;}
    .bg-package {padding-left:0!important; padding-right:0!important;}
    .jumlah-label {font-size:x-small;}
    .package-info {font-size:x-small;}
    .bg-text-2 {background-repeat:repeat;}
    .img-step {width:100%;!important}
}