*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
html{
    scroll-behavior:smooth;
}
body{
    background: lightgray;
    /* background: linear-gradient(90deg, rgba(12,36,97,1) 1%, rgba(250,152,58,1) 100%); */
}

/* custom scroll bar */
::-webkit-scrollbar{
    width: 15px;
}
::-webkit-scrollbar-track{
    border: 7px solid linear-gradient(45deg,#0c2461,#e58e26);
    box-shadow: 0 0 2.5px 2px rgb(0, 0,0,0.5);
    background : linear-gradient(45deg,#0c2461,#e58e26);
}
::-webkit-scrollbar-thumb{
    /* background : linear-gradient(45deg,#fff,#e58e26); */
    background-color: rgb(0, 225, 255);
    border-radius : 3px solid lightgray;
}
/*  */
#anchorOrder{
    text-decoration: none;
    letter-spacing:2px;
    color : lightgray;
    font-size:16px;
}
img#hacktivlogo:hover{
    width:50px;
}
a#navAnchor:hover{
    color : #82ccdd;
}

a#navAnchor:active{
    font-size: 14px;
    transition-property: font-size;
    transition-duration: 4s;
    transition-delay: 2s;
}

.sticky{
    position: sticky;
    display: flex;
    flex-direction:column;
    width: 400px;
    left: 84.5%;
    top:50%;
    margin-left: 20px;
    z-index: 100;
    font-style: italic;
    background-color:rgba(255,255,255,0.5);
    border: 1px solid #fa983a;
    padding: 30px;
    border-radius: 75px;
}

/* #logoOverFlow{
    position: relative;
 
    top: 0%;
    left: -0%;
    width: 15%;
  
    opacity: 75%;
} */

#preOrderBtn {
	/* margin: 0 auto; */
	top: 80px;
	position: absolute;
	right: 4px;
	opacity: 93.1%;
}
.header,.footer{
    background-color:#0c2461;
    height: 50px;
    text-align: center;
    display : flex;   
    justify-content: center;
    align-items: center;
}

.footer{
    display: flex;
    flex-direction: column;
    padding-bottom: 40px;
    padding-top: 40px;
}

.footer p{
    font-size: 16px;
    color: white;
    margin: 5px; 
}

.footer nav a{
    font-size: 13px;
}

.header img{
    width:40px;
    margin-right: 15px;
}
.header nav a, footer nav a{
    text-decoration: none;
    margin-right: 25px;
    color: white;
    font-size:18px;
}

.hero{
    min-height: 95vh;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom: 35px;
    /* box-shadow: black 3px 7px; */
    /* background-image: url("../assets/images/background-hero.jpg"); */
    /* background-image: linear-gradient(25turn,rgba(0,0,0,0.8),rgba(255,255,255,0.7),) */
}

.headline, .bg-orange{
    background-color: #fa983a;
}

.headline,.hp-info{
    color: white;
    text-shadow: #0c2461 1px 0 10px;
    text-align: center;
    height: 800px;
    width: 46%;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
}

.hp-info, .bg-red{
    background-color: #eb2f06;
}

.headline h2{
    width:80%;
}

.headline p{
    margin-top: 20px;
}

.hp-info{
    color : white;
    /* border : 1px solid blue; */
    text-align: center;
    height: 800px;
    width: 46%
    
}
.hp-info img{
    width:35%;
    transform: rotate(20deg);
}
.hp-info img:hover{
    width:40%;
    transform: rotateY(-20deg)
}

.headline button{
    color: #e58e26;
    border-radius: 10px;
    padding : 10px;
    font-size : 16px;
    width :200px;
    margin : 0 auto;
    margin-top:25px;
    background-color: #0c2461;
    box-shadow: inset 0 0 0 0 #e58e26;
    transition: ease-out 1s;
    outline: none
}

.headline button:hover{
    box-shadow: inset 300px 0 0 0 #e58e26;
    color: #0c2461;
}

.headline:hover, .hp-info:hover{
    background-color: #82ccdd;
    opacity: 85%
}

.headline{
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    box-shadow: rgba(0,0,0,0.9) 3px 7px;
}
.hp-info{
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    box-shadow: rgba(0,0,0,0.9) 3px 7px;
}
.box hr{
    width: 35%;
    border : 2px solid #0c2461;
    margin-bottom: 20px;
}
hr#invoice, #faqHr{
    width: 15%;
    border : 2px solid #0c2461;
    margin-bottom: 20px;
}
hr#tertarikHr{
    width:24%;
    border : 2px solid #0c2461;
    margin-bottom: 40px;
}
#listPreOrder{
    display:flex;
    justify-content: center;
    flex-direction:column;
    align-items:center;
}
.list-details{
    display:flex;
    justify-content:center;
    align-items:center
}
.spec{
    text-align: left;
}
.feature{
    min-height: 100vh;
    width :100%;
    display : flex;
    flex-wrap: wrap;
    justify-content: center;
    /* border : 4px dotted red; */
}

.list-details p{
   
    display: flex;
    width: 70%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
button#remove{
    color: #e58e26;
    border-radius: 10px;
    font-size: 16px;
    margin: 0 auto;
    background-color: #0c2461;
    box-shadow: inset 0 0 0 0 #e58e26;
    transition: ease-out 1s;
    outline: none;
    padding : 5px 10px;
}

.box{
    /* display : block; */
    width : 45%;
    /* min-height : 50px; */
    border : 2px solid gray;
    margin: 20px;
    border-radius: 25px;
    box-shadow: 15px 15px #0c2461;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content:center;
    flex-direction:column;
    font-size:20px;
}

.box:hover{
    background-color: #82ccdd;
    opacity: 85%
}



.pre-order, #details-purchased{
    display :flex;
    flex-direction: column;
    height : 500px;
    align-items : center;
    justify-content : center;
    /* border: 2px solid pink; */
}

#details-purchased{
    display :flex;
    flex-direction: column;
}
.user-info,.customer-details{
    display :flex;
    flex-direction:column;
    border : 3px solid lightblue;
    padding : 25px;
    border-radius : 25px;
    box-shadow: black 3px 7px;
}

#details-purchased{
    height:300px;
    display:none;
}

.customer-details{
    width:35%;
    background: rgb(229,142,38);
    background: radial-gradient(circle, rgba(229,142,38,1) 1%, rgba(235,47,6,1) 100%);
    opacity: 95%;
    width: 35%;
    
}

.inline-block{
    display : inline-block;
    margin-bottom: 5px;
    text-align: left;
}
.inline-block label{
    width :100px;
}
.user-info{
    background: rgb(229,142,38);
    background: radial-gradient(circle, rgba(229,142,38,1) 1%, rgba(235,47,6,1) 100%);
    opacity: 95%;
    width:35%;
    
}
.inline-block{
    display: flex;
    justify-content: center;
    align-items: center;
}
.user-info input[type="text"]{
    padding : 5px;
    border-radius: 25px;
    width: 350px;
    font-weight: bold;
    text-align: left;
    padding-left: 15px;
}
#jumlah{
    padding : 5px;
    border-radius: 25px;
    width: 350px;
    font-weight: bold;
    text-align: center;
}

.user-info label{
    display : inline-block;
    width :30%;
    margin-right: 10px;
}
.inline-block label{
    font-size: 16px;
    font-weight: bold;
}

.user-info button{
    padding : 10px;
    border-radius: 25px;
    background-color:lightgray;
    font-size:16px;
    width:50%;
    margin: 0 auto;
}

form{
    display:flex;
    flex-direction: column;
}
.user-info input[type="submit"], #preOrderBtn{
    color: #e58e26;
    border-radius: 10px;
    padding : 10px;
    font-size : 16px;
    width :200px;
    margin : 0 auto;
    margin-top:15px;
    width:50%;
    margin-left: 32%;;
    background-color: #0c2461;
    box-shadow: inset 0 0 0 0 #e58e26;
    transition: ease-out 1s;
    outline: none
}

.user-info input[type="submit"]:hover , #preOrderBtn:hover{
    box-shadow: inset 300px 0 0 0 #e58e26;
    color: #0c2461;
}

/* Accordion style */
 /* Style the buttons that are used to open and close the accordion panel */
 .faq{
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    /* border: 3px dotted lightgray; */
}
#faq-header-text{
    margin-top:25px;
    font-size :35px;
    font-style: bold;
}
.faq-list{
width: 70%;
margin: 25px 0;
/* padding : 10px; */
border-radius: 25px;
box-shadow: 2px 5px #0c2461;
overflow: hidden;
}
.faq-list button{
    font-size: 22px;
    border-radius: 5px;
    margin: 1px;
    background-color: #e58e26;
}

.faq-list .panel{
    background-color: #e58e26;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #0c2461;

}
.accordion:hover{
color:white;
}
.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 20px;
    font-style: bold;
    color:#0c2461;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
    color:#0c2461;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
padding : 20px;
background-color: white;
display: none;
overflow: hidden;
color: #444;
} 
.panel p {
    padding-left: 15px;
}