body{
scroll-behavior:smooth;
}

*,*:before,*:after{
padding:0px;
margin:0px;
outline:0px;
}

@font-face{
src:url('../fonts/poppins-SemiBold.ttf');
font-family: poppins_semibold;
}


@font-face{
src:url('../fonts/notosans.ttf');
font-family:notosans;
}

@font-face{
src:url('../fonts/Roboto-Regular.ttf');
font-family:roboto_regular;
}

div#body_wrapper{
position:relative;
/*border:1px solid red;*/
min-height:1000px;
}

div#body_wrapper header{
position:relative;
/*border:1px solid red;*/
min-height:40px;
background:rgb(255,255,255);
padding:5px;
box-shadow:0px 0px 7px rgba(150,150,150,.3);
}

div#body_wrapper header nav{
position:absolute;
top:0px;
right:0px;
box-sizing:border-box;
padding:10px 0px 0px 0px;
/*border:1px solid red;*/
height:100%;
}

div#body_wrapper header nav ul{
position:relative;
list-style:none;
height:100%;
}

div#body_wrapper header nav ul li{
float:left;
margin:0px 20px;
height:30px;
box-sizing:border-box;
width:120px;
}

div#body_wrapper header nav ul li a{
color:#0F67B1;
display:block;
height:100%;
text-decoration:none;
font:16px notosans;
padding:3px 0px 0px 0px;
text-align:center;
} 

body#index nav#menu ul li#tab1, div#body_wrapper header nav ul li:hover,
body#buy nav#menu ul li#tab2,
body#about nav#menu ul li#tab3,
body#support nav#menu ul li#tab4{
background:#0F67B1;
border-radius:25px;
}

body#index nav#menu ul li#tab1 a,
body#buy nav#menu ul li#tab2 a,
body#about nav#menu ul li#tab3 a,
body#support nav#menu ul li#tab4 a,
div#body_wrapper header nav ul li a:hover{
color:white;
}

div#content_wrapper{
position:relative;
/*border:1px solid red;*/
min-height:980px;
}

div#banner{
position:relative;
height:500px;
/*border:1px solid red;*/
display:flex;
flex-wrap:nowrap;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
background-image: linear-gradient(to bottom, #e4e9fd, #f7eaf8, #ffedf2, #fff3ef, #fffaf3);
box-shadow:0px 4px 5px rgba(200,200,200,.2);
}

div#banner > div{
position:relative;
/*border:1px solid red;*/
box-sizing:border-box;
width:50%;
}

div#banner > div:nth-child(1){
padding:30px 20px 0px 100px;
/*border:1px solid red;*/
}

div#banner > div:nth-child(1) figure{
/*border:1px solid red;*/
width:100px;
margin:auto auto 20px 0px;
}

div#banner > div:nth-child(1) figure img{
display:block;
margin:auto;
}

div#banner > div:nth-child(1) h5{
font-size:28px;
font-family:poppins_semibold;
}

div#banner > div:nth-child(1) p{
font-size:16px;
font-family:notosans;
line-height:1.6em;
color:rgb(90,90,90);
}

div#banner > div:nth-child(1) a{
display:block;
height:50px;
width:300px;
background:linear-gradient(90deg,#DC254F,#F6B323);
padding:13px 0px 0px 0px;
color:white;
border:0px;
margin:20px 0px 0px 0px;
font-family:roboto_regular;
font-size:16px;
border-radius:25px;
text-align:center;
text-decoration:none;
box-sizing:border-box;
}

div#banner > div:nth-child(2){
overflow:hidden;
}

div#banner > div:nth-child(2) svg{
/*border:1px solid red;*/
margin:0px 0px 0px 10px;
position:relative;
top:40px;
height:90%;
width:99%;
display:block;
transform:scale(1.5);
}

div#div_1{
position:relative;
padding:0px 0px 20px 0px;
min-height:400px;
/*border:1px solid red;*/
display:flex;
}

div#div_1 > div{
position:relative;
/*border:1px solid red;*/
box-sizing:border-box;
}

div#div_1 > div:nth-child(1){
position:relative;
/*border:1px solid blue;*/
width:30%;
}

div#div_1 > div:nth-child(1) figure{
/*border:1px solid red;*/
width:300px;
position:absolute;
top:-100px;
left:100px;
z-index:2;
}

div#div_1 > div:nth-child(1) figure img{
display:block;
margin:auto;
drop-shadow:0px 0px 5px rgba(50,50,50,.5);
}

div#div_1 > div:nth-child(2){
padding:100px 100px 0px 50px;
/*border:1px solid red;*/
width:70%;
}

div#div_1 > div:nth-child(2) h2{
text-align:left;
font:42px poppins_semibold;
margin:0px 0px 15px 0px;
background:linear-gradient(90deg,#87D3FF,#DC8CFC);
-webkit-text-fill-color: transparent; 
            -webkit-background-clip: text; 
}

div#div_1 > div:nth-child(2) p{
font:18px notosans;
color:rgb(50,50,50);
line-height:1.8em;
}

div#div_1 > div:nth-child(2) > div{
display:flex;
gap:30px;
flex-wrap:nowrap;
justify-content:center;
min-height:100px;
padding:50px 0px 10px 0px;
}

div#div_1 > div:nth-child(2) > div figure{
height:100px;
width:100px;
border-radius:50%;
/*box-shadow:0px 0px 5px rgba(90,90,90,.2),inset 0px 0px 5px rgba(100,100,100,.2);
border:5px solid rgba,(100,100,100,.2);*/
box-sizing:border-box;
padding:18px 0px 0px 0px;
}

div#div_1 > div:nth-child(2) > div figure img{
display:block;
margin:auto;
}

div#div_2{
position:relative;
min-height:200px;
padding:50px 150px 50px 150px;
background:#F3F3FB;
margin:50px 0px 0px 0px;

}

div#div_2 h2{
text-align:center;
font:28px poppins_semibold;
}

div#div_2 > div{
position:relative;
display:flex;
justify-content:center;
gap:20px;
margin:20px 0px 0px 0px;
}

div#div_2 > div div{
width:25%;
height:450px;
box-sizing:border-box;
padding:10px;
background:rgb(254,254,254);
border-radius:5px;
box-shadow:0px 0px 10px rgba(150,150,150,.5);
}

div#div_2 > div div figure{
width:100%;
height:80%;
box-sizing:border-box;
}

div#div_2 > div div figure img{
display:block;
width:95%;
height:100%;
object-fit:contain;
}

div#div_2 > div div h5{
text-align:center;
font:18px poppins_semibold;
}

div#div_2 > div div p{
font:14px notosans;
text-align:center;
color:rgb(100,100,100);
}

div#div_3{
position:relative;
padding:100px 0px 0px 0px;
margin:0px 0px 0px 0px;
/*border:1px solid red;*/
}

div#div_3 h3{
text-align:center;
font:48px poppins_semibold;
margin:0px 0px 15px 0px;
background:linear-gradient(90deg,#87D3FF,#DC8CFC);
-webkit-text-fill-color: transparent; 
            -webkit-background-clip: text; 
}

div#div_3 > div{
display:flex;
justify-content:center;
gap:20px;
}

div#div_3 > div > div{
width:20%;
}

div#div_3 > div > div h5{
text-align:center;
font:18px poppins_semibold;
}

div#div_3 > div > div p{
text-align:center;
font:14px notosans;
color:rgb(100,100,100);
}

div#div_3 a{
display:block;
height:50px;
width:300px;
background:linear-gradient(90deg,#DC254F,#F6B323);
padding:13px 0px 0px 0px;
color:white;
border:0px;
margin:50px auto 0px auto;
font-family:roboto_regular;
font-size:16px;
border-radius:25px;
text-align:center;
text-decoration:none;
box-sizing:border-box;
}

div#div_3 > div > div figure{
/*border:1px solid red;*/
width:250px;
margin:auto;
}

div#div_3 > div > div figure img{
display:block;
margin:auto;
}

div#div_3 > div > div:nth-child(1) figure, div#div_3 > div > div:nth-child(3) figure{
margin:20px auto 0px auto;
}

div#div_4{
position:relative;
min-height:100px;
padding:150px 150px 0px 150px;
}

div#div_4 h2{
text-align:center;
font:48px poppins_semibold;
margin:0px 0px 15px 0px;
background:linear-gradient(90deg,#87D3FF,#DC8CFC);
-webkit-text-fill-color: transparent; 
            -webkit-background-clip: text; 
}

div#div_4 p{
text-align:center;
font:22px notosans;
color:rgb(100,100,100);
line-height:1.8em;
}



/*support*/
div#support_div,div#about_div{
position:relative;
padding:10px;
width:80%;
margin:auto;
}

figure#page_header{
height:550px;
margin:0px 0px 30px 0px;
}

figure#page_header img{
height:100%;
width:100%;
display:block;
}

div#support_div > h1, div#about_div h1{
font:32px poppins_semibold;
}

div#support_div > p, div#about_div p{
font:18px notosans;
color:rgb(50,50,50);
line-height:1.8em;
margin:0px 0px 10px 0px;
}

div#faq_div{
position:relative;
/*border:1px solid red;*/
min-height:600px;
box-sizing:border-box;
margin:40px 0px 0px 0px;
}

div#sideBar{
position:absolute;
top:0px;
left:0px;
width:300px;
bottom:0px;

}

div#sideBar div{
background:#D0FE90;
padding:20px;
}

div#sideBar div h2{
font:22px poppins_semibold;
margin:10px 0px 0px 0px;
}

div#sideBar div p{
font:14px notosans;
line-height:1.5em;
}

div#sideBar div ul{
list-style:none;
margin:10px 0px 5px 0px;
}

div#sideBar div ul li{
font:14px notosans;
line-height:1.5em;
border-bottom:1px solid rgba(50,50,50,.5);
margin:0px 0px 5px 0px;
padding:2px;
}

div#support_main{
position:relative;
min-height:500px;
margin:0px 0px 0px 330px;
padding:0px 30px 20px 40px;
box-sizing:border-box;
}

div#support_main article{
position:relative;
}

div#support_main article h2{
font:22px poppins_semibold;
}

div#support_main article > h4{
font:bold 14px notosans;
color:rgb(100,100,100);
}

div#support_main article ul{
list-style:none;
margin:10px 0px 10px 0px;
}

div#support_main article li{
padding:5px;
margin:0px 0px 20px 0px;
}

div#support_main article ul li h5{
font:18px poppins_semibold;
}

div#support_main article ul li p{
font:16px notosans;
line-height:1.5em;
}

div#support_main article div h4{
font:20px poppins_semibold;
}

div#support_main article div h4 + p{
font:14px poppins_semibold;
color:rgb(100,100,100);
margin:5px 0px 5px 0px;
}

div#support_main article div ol li,div#about_div article div ul li{
font:16px notosans;
line-height:1.5em;
}

div#about_div article div ul li{
font:16px notosans;
line-height:1.5em;
list-style:disc;
}

div#support_main article div p{
font:16px notosans;
line-height:1.6em;
margin:0px 0px 10px 0px;
}

/*floating bar*/
div#floating_bar{
position:fixed;
z-index:5;
height:100px;
width:60px;
border-radius:5px;
right:20px;
top:200px;
background:rgba(255,255,255,.5);
box-shadow:0px 0px 5px rgba(200,200,200,.3);
}

div#floating_bar span{
display:block;
/*border:1px solid red;*/
height:50px;
box-sizing:border-box;
padding:8px;
}

div#floating_bar span a{
display:block;
height:100%;

}

div#floating_bar span a img{
display:block;
margin:auto;
}

div#response_cont{
position:absolute;
width:0px;
min-height:200px;
background:white;
top:0px;
right:70px;
border-radius:5px;
box-sizing:border-box;
padding:0px;
box-shadow:0px 0px 8px rgba(100,100,100,.3);
overflow:hidden;
transition:.8s all;
}

div#response_cont form{
position:relative;
margin:20px 0px 0px 0px;
}

div.form_fields{
border:1px solid rgb(200,200,200);
box-sizing:border-box;
margin:0px 0px 10px 0px;
padding:10px;
}

div.form_fields label{
display:block;
font:16px notosans;
padding:0px 0px 5px 0px;
color:rgb(100,100,100);
}

div.form_fields input{
display:block;
font:16px notosans;
width:100%;
box-sizing:border-box;
height:50px;
border:0px;
padding:0px 0px 0px 10px;
}

div.form_fields textarea{
display:block;
font:14px notosans;
width:100%;
box-sizing:border-box;
height:180px;
border:0px;
padding:0px 0px 0px 10px;
}

input#feedback_btn{
display:block;
height:60px;
width:100%;
cursor:pointer;
background:black;
border:1px solid rgb(100,100,100);
border-radius:5px;
color:white;
font:22px roboto_regular;
}

span#feedbackMain div.showFeedBack{
width:500px;
padding:10px 20px 10px 20px;
}

span#clsBtn{
display:block;
position:absolute;
right:10px;
top:10px;
font:bold 16px roboto_regular;
cursor:pointer;
}

div#response_cont > p{
font:16px poppins_semibold;
color:rgb(50,50,50);
text-align:center;
}

div#cover{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:10;
background:rgba(255,255,255,.5);
display:none;
}

div#cover img{
display:block;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

.return_err_msg{
font:14px notosans;
color:white;
color:#FF4B3A;
padding:10px;
border-radius:5px;
width:95%;
margin:2px auto auto 10px;
}

.addMsgSucc{
background:#D0FE90;
padding:10px;
text-align:center;
box-sizing:border-box;
width:80%;
margin:50px auto auto auto;
border-radius:5px;
font:14px notosans;
}

.addMsgSucc a{
text-decoration:none;
font:14px notosans;
color:rgb(10,10,10);
display:block;
margin:10px 0px 0px 0px;
text-align:center;
}

.retnBtn{
display:block;
text-align:center;
font:14px notosans;
color:red;
text-decoration:none;
}