input[type="radio"]{display:none;}

#wrap01,
#wrap03{
	display:block;
	margin:0px 0px 0px 0px;
	width:100%;
	text-align:center;
	box-sizing:border-box;
	}

#wrap01{
	position: fixed;
	top:0px; left:0px; right:0px;
	height:70px;
	z-index:9909;
	background-color: rgba(0,5,84,1.00);
	background-image: -webkit-linear-gradient(270deg,rgba(0,17,101,1.00) 0%,rgba(6,3,50,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(0,17,101,1.00) 0%,rgba(6,3,50,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(0,17,101,1.00) 0%,rgba(6,3,50,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(0,17,101,1.00) 0%,rgba(6,3,50,1.00) 100%);
	}

#wrap01 img{
	display:block;
	width:auto;
	height:90%;
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	max-width:500px;
	margin:auto auto auto auto;
	}

#wrap_apps{
	display: flex;
	position: fixed;
	top:70px;
	bottom:0px;
	left:0px;
	right:0px;
	width:100%;
	height: calc( 100% - 70px );
	text-align: center;
	overflow: hidden;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#wrap_apps #wrap_apps_cnt {
	display: flex;
	width: 90%;
	height: auto;
	padding: 0% 0px;
    gap:0px 10px;
    flex-direction: row;
    white-space: nowrap;
	box-sizing: border-box;
	overflow: auto;
    border-radius: 25px;
	text-align: center;
	align-items: center;
	align-content: center;
	justify-content: center;
	background-color: rgba(36,36,36,0.25);
	}

#wrap_apps #wrap_apps_cnt div{
    position: relative;
    display: flex;
    width:min(365px, 95%);
    min-width:min(365px, 95%);
    height: auto;
    aspect-ratio:4/5;
    gap:20px 22px;
    margin:0;
	padding:  0px;
	box-sizing: border-box;
    align-items: center;
    justify-content: center;
	border-radius: 22px;
    overflow: hidden;
	transform: perspective(10px) translateZ(-0.20px);
	transition: all 0.3s;
	white-space: nowrap;
}

#wrap_apps #wrap_apps_cnt div img{
    position: absolute;
    width:100%;
    height: 100%;
	object-fit: cover;
    z-index: 11;
}


@media screen and ( max-width:650px ){
    
    #wrap_apps {
        position: inherit;
        height:auto;
        margin: 90px 0px 0px 0px;
        bottom: inherit;
    }
    
    #wrap_apps #wrap_apps_cnt {
        flex-direction: column;
    }
    
    #wrap_apps #wrap_apps_cnt div{
        width:98%;
    }

}

#wrap_apps #wrap_apps_cnt div div{
    position: absolute;
    display: flex;
    flex-direction: column;
    margin: auto 0px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding: 0px 5%;
    box-sizing: border-box;
    height: auto;
    z-index: 22;
    gap:5px 0px
}

#wrap_apps #wrap_apps_cnt div div h4 {
	line-height: 30px;
	color: rgba(232,232,232,1.00);	
	padding: 0;
	margin: 0;
	letter-spacing: 1px;
	font-size: 25px;
	font-weight: 800;
}

#wrap_apps #wrap_apps_cnt div div p {
	line-height: 29px;
	color: rgba(240,240,240,1.00);	
	padding: 0;
	margin: 0;
	letter-spacing: 0.5px;
	font-size: 16px;
    text-align: left;
    text-wrap:wrap;
	font-weight: 300;
}

#wrap_apps #wrap_apps_cnt div div .buybtn {
    display:flex;
    width:auto;
    height:40px;
    line-height: 40px;
    background-color:rgba(109,144,216,1.00);
    color:white;
    border-radius: 100px;
    padding: 0px 25px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight:400;
    margin:20px 0px 0px 0px;
    box-shadow: inset 0px -14px 4px rgba(92,114,183,1.00);
    transition: all 0.2s;
}

#wrap_apps #wrap_apps_cnt div div .buybtn:hover {
    box-shadow: inset 0px -22px 4px rgba(68,91,162,1.00);
}


#wrap02{
	display: flex;
	position: fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	margin: auto;
	width:100%;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--mainColor6);
	text-align:center;
	box-sizing:border-box;
}

#wrap02 .formcontent{ 
	width:80%;
	max-width:420px;
	height:auto;
}

#wrap02 .formcontent h3{ 
	font-size:2.6rem;
	font-weight:800;
	transform: scale(1.1, 1.0);
	text-transform: capitalize;
	text-align:center;
	color: white;
}

#wrap02 .formcontent input[type="text"],
#wrap02 .formcontent input[type="password"]{
	display:block;
	width:100%;
	padding:0px 0px 0px 0px;
	height:55px;
	line-height:55px;
	font-size:min(6vw, 16px);
	border-radius: 100px;
    box-shadow: inset 0px -20px 4px rgba(222,222,222,0.9);
	text-align:center;
    margin:25px auto;
	color: rgba(60,60,60,1.00);
	outline:none;
	background-color: rgba(238,238,238,0.70);
	box-sizing:border-box;
	border:0;
	-webkit-appearance:none;
	}
	
#wrap02 .formcontent input[type="text"]::placeholder,
#wrap02 .formcontent input[type="password"]::placeholder{
    color:rgba(137,137,137,1.00);
    letter-spacing: 1px;
}


#wrap02 .formcontent button {
    display:flex;
    width:auto;
    height:50px;
    line-height: 50px;
    background-color: rgba(74,74,74,0.4);
    letter-spacing: 1px;
    margin: 20px auto 0px auto;
    box-shadow: inset -1px 3px 4px rgba(222,222,222,0.2), inset 1px -3px 4px rgba(222,222,222,0.2);
    color:white;
    padding: 0px 25px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 500;
}