/*am25 css file 
*version 1.2.0
*author Myxo victor
*/
@media screen and (min-width:900px){
	*{
		margin:0;
		padding:0;
		box-sizing:box-sizing;
	}
	
		
			/*####################################################################################
			#####################################################################################*/
			/*complete preloader code for aximon*/
			.preloader{
				width:100%;
				height:106vh;
				position:fixed;
				background:#00000057;
				display:block;
				z-index:100;
			}
			#loader{
				border-bottom:6px solid #FF0849;
				border-top:6px solid #FF0849;
				border-left:6px solid #111381;
				border-right:6px solid #111381;
				border-radius:50px;
				width:70px;
				height:70px;
				animation: spin 1s linear infinite;
				z-index:10;
				background:transparent;
			}
			.center{
				position:absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				margin: auto;
				display:block;
			}
			
			@keyframes spin{
				100%{
					transform: rotate(360deg);
				}


			}
			
			/*###############################################################################
			##########################################################################3##3333*/
	  

	
.top{
	width:100%;
	height:80px;
	position:relative;
	
    background-image:linear-gradient(45deg, #111381,#FF0849);
	display:flex;
	line-height:80px;
	z-index:4;
}

.mobile{
	display:none;
}

.brand_show{
	width:auto;
	height:auto;
}

.logo_brand{
	width:200px;
	height:auto;
	display:block;
	padding:8px;
}

.navi{
	width:50%;
	padding-left:10px;
	height:auto;
	display:flex;
	justify-content:space-evenly;
}

.navi a{
	color:white;
	width:50px;
}

.navi a:hover{
	color:pink;
}


.font{
	font-size:15px;
}

.active{
	border-bottom:4px solid #FF0849;
}


	  
.fredoka-h1 {
  font-family: "Fredoka", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}



.karla-p {
  font-family: "Karla", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.android_show{
	float:right;
	height:60px;
	width:250px;
	line-height:60px;
	padding-top:10px;
    margin-left:15%;
	display:flex;
	justify-content: space-between;
	
}
	

.bIv{
	width:100px;
	height:45px;
	border-radius:5px;
	border:2px solid #FF0849;
	background:transparent;
	line-height:45px;
	color:white;
}

.main{
	width:800px;
	height:auto;
	display:block;
	margin:0 auto;
}


.video-container {
  width: 90%; /* Match the video width */
  height: 550px; /* Match the video height */
  position: relative; /* Needed if you want to add overlays later */
  overflow: hidden; /* Important for border-radius */
  margin:40px auto;
  background-color: black;
  border-radius:10px;
}

.video-container video {
  width: 100%; /* Make video fill the container */
  height: 100%; /* Make video fill the container */
  border-radius: 10px; /* Adjust border radius as needed */
 /* border: 5px solid #007bff;  Example border color and width */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Example box shadow */
}

/* Optional: Styles for controls */
.video-container video::-webkit-media-controls {
  /* Style the controls (webkit browsers) - limited styling possible */
}

.video-container video::-moz-media-controls {
  /* Style the controls (Firefox) - limited styling possible */
}

.video-logo {
  max-width: 150px; /* Adjust logo size */
  height: auto;
  margin-bottom: 10px; /* Space between logo and title */
}

.video-logo{
	width:50px;
	height:50px;
	border-radius:100px;
	border:1px solid #EDEDED;
	padding:5px;
}

.video-overlay{display:flex;
}

.logo_only{
	width:90px;
	height:90px;
	padding:5px;
	display:block;
	border-radius:180px;
	margin:20px auto;
	border:2px solid #EDEDED;
}



.banner_i{width:300px;margin:10px auto;display:block;height:auto;border-radius:12px}



.features{
	width:100%;
	height:auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-evenly;
	flex-direction:row;
}

.content{
	width:32%;
	height:auto;
	border-radius:10px;
	background:white;
	box-shadow:0 2px 4px 4px #EDEDED, 0 4px 4px 4px #EDEDED;
	display:block;
	margin-top:30px;
}
.tob{
	width:90%;
	height:200px;
	margin:0 auto;
    text-align:center;
	font-size:65px;
	color: #111381;
	padding-top:20px;
}
	
	
	.cBut{
		width:150px;
		height:40px;
		padding:10px;
		background:Blue;
		color:white;
		border:none;
		border-radius:10px/20px;
		margin:30px auto;
	}
	
 .bottom{
		width:90%;
		height:auto;
		font-weight:700;
	}
	
	.text{
		padding:2em;
	}
	
	
	.card{
		width:100%;
		height:200px;
		border-radius:10px;
	}
	
	.gta{
		width:150px;
		height:45px;
		display:block;
		justify-content:space-between;
		flex-direction:row;
		background-image:linear-gradient(145deg, #111381,#FF0849);
		line-height:45px;
		border:none;
		out-line:none;
		color:white;
		border-radius:8px;
		
	}


	.input{
		width:400px;
		height:50px;
		padding:1em;
		outline:none;
		border:2px solid #d8d7d7;
		border-radius:10px;
		margin:10px auto;
		display:block;
		color:black;
	}

	.footer{
		background-image:linear-gradient(145deg,  #111381,#FF0849);
		padding:1em;
		color:white;

	}

	.flex{
		display:flex;
		justify-content:space-evenly;
		flex-wrap:wrap;
		flex-flow:wrap;
		height: auto;
		width:100%;
		padding: 1em;
          

	}


	 .lft{
		width:30%;
         padding: 1em;
		 

	}

	.cnt{
		width:30%;
		padding: 1em;
        
	}

.rgt{
		width: 30%;
		padding: 1em;

		
	}

	.flex a{
		color:white;
	
	}

	.profile{
		width:50px;
		height: 50px;
		border-radius: 100px;
		border: 2px solid #EDEDED;
		padding: 5px;
	}



	.pre{
		width:100%;
		height:106vh;
		position:fixed;
		background:#00000057;
		display:none;
		z-index:100;
	}

	.acc{
		width:400px;
		height:300px;
		border-radius: 10px;
		background-color: white;
		padding: 1em;
		margin: 30vh auto;
		display:block;

	}


	.profileX{
		width:100px;
		height: 100px;
		border-radius: 200px;
		border: 2px solid #FF0849;
		margin: 5px auto;
		display: block;
	}

	.btn-g1{
		width:100%;
		height: 35px;
		border-radius: 20px;
		border: none;
		background-image:linear-gradient(145deg, #111381,#FF0849);
		outline: none;
		line-height: 35px;
		color: white;
		text-align: center;
		margin: 10px auto;

	}


	.btn-g2{
		width:100%;
		height: 35px;
		border-radius: 20px;
		border: none;
		background:blue;
		outline: none;
		line-height: 35px;
		color: white;
		text-align: center;
		margin: 10px auto;

	}

 .ads{
	 width:100%;
	 height:70px;
	 line-height:70px;
	 line-height:70px;
	 background:/**/black;
	 position:fixed;
	 z-index:6;
	 display:flex;
	 justify-content:center;
	 padding-top:5px;
 }
 
 .ad_content{
	 width:500px;
	 background:#FF0849;
	 height:auto;
	 border-radius:40px;
	line-height:50px;
	padding-left:10px;
	padding-right:5px;
	color:#ffff;
	display:flex;
	justify-content:space-around;
	 
 }

.ad_img{
	width:80px;
	height :auto;
	display:block;
	height:40px;
	padding:5px;
}

.ad_btn{
	width:80px;
	height:40px;
	border-radius:30px;
	border:none;
	color:white;
	background: #111381;
	line-height:40px;
	text-align:center;
	margin-top:7px;
}
	

.ads_flier{
	width:700px;
	height:auto;
	background-color: /*rgb(238, 236, 250)*/ rgb(248, 238, 243);
	margin:12px auto;
	border-radius:15px;
	padding: 1em;
}

.flier_top{
	display: flex;
	justify-content:center;
	width:100%;
	height:100px;
	padding-top: 10px;
	

}


.flier_img{
	width:120px;
	padding: 5px;
	height:auto;
	display:block;

}

.ads_flier .text{
	padding-top: 30px;
	font-size: 25px;
	font-weight: bold;
}

.flier_btn{
	width:120px;
	height:45px;
	line-height: 45px;
	text-align: center;
	background-color: #111381;
	border:none;
	border-radius: 30px;
	color:white;
	margin:10px auto;
	display:block;
}



/* --- CSS for Message Classes --- */
.success-message {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid transparent;
	border-radius: 4px;
}
.danger-message {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid transparent;
	border-radius: 4px;
}
.warning-message {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid transparent;
	border-radius: 4px;
}
.info-message {
	color: #0c4085;
	background-color: #e2eafc;
	border-color: #b8daff;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid transparent;
	border-radius: 4px;
}




}





/*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/


/*mobile version*/



/*am25 css file 
*version 1.2.0
*author Myxo victor
*/
@media screen and (max-width:899px){
	*{
		margin:0;
		padding:0;
		box-sizing:box-sizing;
	}
	

		
			/*####################################################################################
			#####################################################################################*/
			/*complete preloader code for aximon*/
			.preloader{
				width:100%;
				height:106vh;
				position:fixed;
				background:#00000057;
				display:block;
				z-index:100;
			}
			#loader{
				border-bottom:6px solid #FF0849;
				border-top:6px solid  #FF0849;
				border-left:6px solid #111381 ;
				border-right:6px solid #111381;
				border-radius:50px;
				width:70px;
				height:70px;
				animation: spin 1s linear infinite;
				z-index:10;
				background:transparent;
			}
			.center{
				position:absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				margin: auto;
				display:block;
			}
			
			@keyframes spin{
				100%{
					transform: rotate(360deg);
				}


			}
			
			/*###############################################################################
			##########################################################################3##3333*/
	  


	
.top{
	width:100%;
	height:80px;
	position:relative;
    background-image:linear-gradient(145deg, #111381, #FF0849);
	display:flex;
	line-height:80px;
	z-index:5;
	color:white;
	padding-left: 6px;
	
}

.mobile{
	display:block;
	font-size: 18px;
}

.brand_show{
	width:auto;
	height:auto;
}

.logo_brand{
	width:200px;
	height:auto;
	display:block;
	padding:8px;
}

.navi{
	width:96%;
	padding:1em;
	height:100vh;
	display:block;
	background:white;
	position: fixed;
	left: -1000px;
	transition: all 2s;
	text-align: center;
}

.navi a{
	color:black;
	width:50px;
	font-size: 16px;
}


.navi a p{
	font-size: 16px;
}

.navi a:hover{
	color:pink;
}


.font{
	font-size:15px;
}

.active{
	border-bottom:4px solid fuchsia;
}


	  
.fredoka-h1 {
  font-family: "Fredoka", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}



.karla-p {
  font-family: "Karla", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.android_show{
	float:right;
	height:50px;
	width:140px;	
	line-height:50px;
	margin-top:10px;
 margin-left: 3%;
	display:flex;
	justify-content: space-between;
	padding-right: 10px;
}
	

.bIv{
	width:80px;
	height:35px;
	border-radius:5px;
	border:2px solid #FF0849;
	background:transparent;
	line-height:30px;
	color:white;
}

.main{
	width:96%;
	height:auto;
	display:block;
	margin:0 auto;
}


.video-container {
  width: 95%; /* Match the video width */
  height: 350px; /* Match the video height */
  position: relative; /* Needed if you want to add overlays later */
  overflow: hidden; /* Important for border-radius */
  margin:40px auto;
  background-color: black;
  border-radius:10px;
}

.video-container video {
  width: 100%; /* Make video fill the container */
  height: 100%; /* Make video fill the container */
  border-radius: 10px; /* Adjust border radius as needed */
 /* border: 5px solid #007bff;  Example border color and width */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Example box shadow */
}

/* Optional: Styles for controls */
.video-container video::-webkit-media-controls {
  /* Style the controls (webkit browsers) - limited styling possible */
}

.video-container video::-moz-media-controls {
  /* Style the controls (Firefox) - limited styling possible */
}

.video-logo {
  max-width: 150px; /* Adjust logo size */
  height: auto;
  margin-bottom: 10px; /* Space between logo and title */
}

.video-logo{
	width:50px;
	height:50px;
	border-radius:100px;
	border:1px solid #EDEDED;
	padding:5px;
}

.video-overlay{display:flex;
}

.logo_only{
	width:90px;
	height:90px;
	padding:5px;
	display:block;
	border-radius:180px;
	margin:20px auto;
	border:2px solid #EDEDED;
}



.banner_i{width:300px;margin:10px auto;display:block;height:auto;border-radius:12px}



.features{
	width:100%;
	height:auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-evenly;
	flex-direction:row;
}

.content{
	width:100%;
	height:auto;
	border-radius:10px;
	background:white;
	box-shadow:0 2px 4px 4px #EDEDED, 0 4px 4px 4px #EDEDED;
	display:block;
	margin-top:30px;
}
.tob{
	width:90%;
	height:200px;
	margin:0 auto;
    text-align:center;
	font-size:65px;
	color:navy;
	padding-top:20px;
}
	
	
	.cBut{
		width:150px;
		height:40px;
		padding:10px;
		background:Blue;
		color:white;
		border:none;
		border-radius:10px/20px;
		margin:30px auto;
	}
	
 .bottom{
		width:90%;
		height:auto;
		font-weight:700;
	}
	
	.text{
		padding:2em;
	}
	
	
	.card{
		width:100%;
		height:200px;
		border-radius:10px;
	}
	
	.gta{
		width:150px;
		height:45px;
		display:block;
		justify-content:space-between;
		flex-direction:row;
		background-image:linear-gradient(145deg, #111381 , #FF0849);
		line-height:45px;
		border:none;
		out-line:none;
		color:white;
		border-radius:8px;
		
	}


	.input{
		width:95%;
		height:45px;
		padding:1em;
		outline:none;
		border:2px solid #d8d7d7;
		border-radius:10px;
		margin:10px auto;
		display:block;
		color:black;
	}

	.footer{
		background-image:linear-gradient(145deg, #111381, #FF0849);
		padding:1em;
		color:white;

	}

	.flex{
		display:flex;
		justify-content:space-evenly;
		flex-wrap:wrap;
		flex-flow:wrap;
		height: auto;
		width:100%;
		padding: 1em;
          

	}


	 .lft{
		width:99%;
         padding: 1em;
		 

	}

	.cnt{
		width:99%;
		padding: 1em;
        
	}

.rgt{
		width: 99%;
		padding: 1em;

		
	}

	.flex a{
		color:white;
	
	}

	.profile{
		width:35px;
		height: 35px;
		border-radius: 70px;
		border: 2px solid #EDEDED;
		padding: 5px;
		margin-top: 8px;
	}



	.pre{
		width:100%;
		height:106vh;
		position:fixed;
		background:#00000057;
		display:none;
		z-index:100;
	}

	.acc{
		width:90%;
		height:auto;
		border-radius: 10px;
		background-color: white;
		padding: 1em;
		margin: 30vh auto;
		display:block;

	}


	.profileX{
		width:90px;
		height: 90px;
		border-radius: 200px;
		border: 2px solid fuchsia;
		margin: 5px auto;
		display: block;
	}

	.btn-g1{
		width:100%;
		height: 35px;
		border-radius: 20px;
		border: none;
		background-image:linear-gradient(145deg, darkblue, fuchsia);
		outline: none;
		line-height: 35px;
		color: white;
		text-align: center;
		margin: 10px auto;

	}


	.btn-g2{
		width:100%;
		height: 35px;
		border-radius: 20px;
		border: none;
		background:blue;
		outline: none;
		line-height: 35px;
		color: white;
		text-align: center;
		margin: 10px auto;

	}




 .ads{
	 width:100%;
	 height:70px;
	 line-height:70px;
	 line-height:70px;
	 background:/**/black;
	 position:fixed;
	 z-index:6;
	 display:flex;
	 justify-content:center;
	 padding-top:5px;
 }
 
 .ad_content{
	 width:100%;
	 background:#FF0849;
	 height:55px;
	 max-height:60px;
	 border-radius:40px;
	line-height:50px;
	padding-left:10px;
	padding-right:5px;
	color:#ffff;
	display:flex;
	justify-content:space-around;
	 
 }

.ad_img{
	width:40px;
	height :auto;
	display:block;
	height:30px;
	padding:5px;
	margin-top:7px;
}

.ad_btn{
	width:80px;
	height:40px;
	border-radius:30px;
	border:none;
	color:white;
	background: #111381;
	line-height:40px;
	text-align:center;
	margin-top:7px;
}
	


.ads_flier{
	width:100%;
	height:auto;
	background-color: /*rgb(238, 236, 250)*/ rgb(248, 238, 243);
	margin:12px auto;
	border-radius:15px;
	padding: 1em;
}

.flier_top{
	display: flex;
	justify-content:center;
	width:100%;
	height:100px;
	padding-top: 10px;
	

}


.flier_img{
	width:100px;
	padding: 5px;
	height:auto;
	display:block;

}

 .ads_flier .text{
	padding-top: 30px;
	font-size: 20px;
	font-weight: bold;
}

.flier_btn{
	width:120px;
	height:45px;
	line-height: 45px;
	text-align: center;
	background-color: #111381;
	border:none;
	border-radius: 30px;
	color:white;
	margin:10px auto;
	display:block;
}



/* --- CSS for Message Classes --- */
.success-message {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid transparent;
	border-radius: 4px;
}
.danger-message {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid transparent;
	border-radius: 4px;
}
.warning-message {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid transparent;
	border-radius: 4px;
}
.info-message {
	color: #0c4085;
	background-color: #e2eafc;
	border-color: #b8daff;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid transparent;
	border-radius: 4px;
}









}