*{
margin:0;
padding:0;
box-sizing:border-box;
}



body{

width:100%;
height:100vh;

overflow:hidden;

font-family:
"Times New Roman",
serif;

}



/* =====================
BACKGROUND
===================== */


.container,
.page{

width:100%;
height:100vh;

position:relative;


background:

linear-gradient(
rgba(18,70,58,.45),
rgba(18,70,58,.60)
),

url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e");


background-size:cover;

background-position:center;


}




.container::after,
.page::after{


content:"";


position:absolute;


inset:0;



background:

radial-gradient(
circle at center,
transparent 25%,
rgba(0,0,0,.35)
);



pointer-events:none;


}






/* =====================
BACKGROUND TITLE
===================== */


.background-title,
.background-text{


position:absolute;


top:80px;


left:50%;


transform:translateX(-50%);



font-size:260px;



font-family:cursive;



font-style:italic;



color:

rgba(255,245,220,.22);



letter-spacing:-10px;



z-index:1;



pointer-events:none;


}







/* =====================
COUNTRY
===================== */


.country{


position:absolute;


top:35px;


left:55px;



background:

rgba(255,255,255,.95);



padding:14px 38px;



border-radius:50px;



font-size:16px;



color:#c96b28;



font-style:italic;



box-shadow:

0 10px 30px rgba(0,0,0,.15);



z-index:5;


}







/* =====================
CENTER CONTENT
===================== */


.content{


position:absolute;


top:50%;


left:50%;



transform:

translate(-50%,-50%);



text-align:center;



z-index:5;


}







/* =====================
SLIDER
===================== */


.slide{


width:420px;


height:65px;



background:white;



border-radius:50px;



display:flex;



align-items:center;



padding:5px;



box-shadow:


0 15px 35px rgba(0,0,0,.25);



position:relative;



cursor:pointer;



overflow:hidden;


}




.slide-icon{


width:55px;


height:55px;



background:#df6b1c;



border-radius:50%;



display:flex;



justify-content:center;



align-items:center;



color:white;



font-size:28px;



font-weight:bold;



z-index:2;



transition:.3s;


}




.slide-icon:hover{


transform:translateX(15px);


}





.slide-text{


flex:1;



color:#777;



font-style:italic;



font-size:16px;



text-align:center;


}







/* =====================
VOUCHER
===================== */


form{


margin-top:20px;


}




.voucher-box input,
form input{


width:420px;



height:65px;



border-radius:50px;



border:none;



background:white;



text-align:center;



font-size:17px;



font-style:italic;



box-shadow:


0 15px 30px rgba(0,0,0,.2);



outline:none;


}





form button{


margin-top:15px;



background:#df6b1c;



color:white;



border:none;



padding:13px 45px;



border-radius:40px;



font-family:serif;



box-shadow:


0 10px 20px rgba(0,0,0,.2);



cursor:pointer;


}







/* =====================
PAYMENT
===================== */


.payment{


margin-top:45px;



color:#e17825;



font-size:14px;



font-weight:bold;



}



.payment img{


margin-top:15px;



width:180px;



height:auto;



background:white;



padding:8px;



border-radius:15px;



box-shadow:


0 10px 20px rgba(0,0,0,.15);


}







/* =====================
QRIS POPUP
===================== */


#qrisPopup{


display:none;



position:absolute;



inset:0;



background:

rgba(0,0,0,.55);



z-index:20;



align-items:center;



justify-content:center;


}




.qris-box{


background:white;



width:360px;



padding:35px;



border-radius:30px;



text-align:center;



box-shadow:


0 20px 60px rgba(0,0,0,.35);



}



.qris-box h2{


color:#df721d;



margin-bottom:10px;


}



.qris-box img{


width:180px;



margin:20px;


}



.qris-box button{


background:#df721d;



color:white;



padding:14px 35px;



border:none;



border-radius:40px;



cursor:pointer;


}








/* =====================
TUTORIAL
===================== */


.tutorial{


position:absolute;



bottom:45px;



left:55px;



width:150px;



height:70px;



background:white;



border:none;



border-radius:50px;



color:#d86c20;



font-style:italic;



font-size:15px;



box-shadow:


0 10px 25px rgba(0,0,0,.2);



z-index:5;


}







/* =====================
QR
===================== */


.qr{


position:absolute;



right:55px;



bottom:45px;



color:#d86c20;



text-align:center;



z-index:5;


}




.qr img{


width:80px;



background:white;



padding:8px;


}








/* =====================
RESPONSIVE
===================== */


@media(max-width:1000px){



.slide,
form input{


width:350px;


}



.background-title,
.background-text{


font-size:170px;


}



}