@charset "utf-8";
/* CSS Document */
body { 
            font-family: Arial, sans-serif; 
            margin: 0; 
            padding: 0; 
            color: #333; 
            line-height: 1.6;
        }
        .hero { 
            background: linear-gradient(135deg, #0396FE, #8e44ad); 
            padding: 60px 20px; 
            text-align: left; 
			background-image:url(02banner.jpg);
			background-size: 100% 100%;
			position: relative;
			height: 350px;
        }
		.hero_content{
			position: absolute;
			left: 10%;
			top: 30px;
		}
		#logo{
			width: 120px;
		}
        .hero h1 { 
            color: white; 
            font-size: 36px; 
            margin-bottom: 15px; 
        }
        .sub_title { 
            color: white; 
            font-size: 18px; 
            margin-bottom: 10px; 
			height: 25px;
			line-height: 25px;
        }
		.sub_txt{
			width: 500px;
			line-height: 20px;
			color:#FFF;
			font-size: 14px;
			margin-top: 30px;
			margin-bottom: 30px;
		}
		section{
			padding: 50px 20px; 
            text-align: center; 
		}
        .section h2 { 
            font-size: 30px; 
            margin-bottom: 30px;
            color: #0396FE;
			text-align:center;
        }
        .content { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            max-width: 1000px; 
            margin: 0 auto;
            flex-wrap: wrap;
        }
        .text { 
            flex: 1; 
            padding: 0 25px; 
            text-align: left;
            min-width: 370px;
        }
        .text h3 {
            font-size: 22px;
            color: #0396FE;
            margin-bottom: 20px;
        }
        .text p {
            margin-bottom: 15px;
            font-size: 16px;
        }
        .image { 
            flex: 1; 
            padding: 0 40px; 
            min-width: 300px;
			display: inline-block;
			vertical-align: middle;
        }
        .button { 
            background-color: #0396FE; 
            color: white; 
            padding: 12px 30px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        .button:hover {
            background-color: #357ab8;
        }
        .circle-img { 
            width: 400px; 
            height: 400px; 
            margin: 0 auto 20px; 
            display: flex; 
            justify-content: center; 
            align-items: center;
        }
        .circle-img img {
            max-width: 100%;
            max-height: 100%;
        }
        .footer { 
            background-color: #0396FE; 
            color: white; 
            padding: 0px 20px; 
            text-align: center; 
        }
		.footer_txt{
			display: inline-block;
			vertical-align: bottom;
			width: 400px;
			height: auto;
			height: 200px;
		}
		#footer_img{
			width: 300px;
			display: inline-block;
			vertical-align: bottom;
		}
        .footer h2 {
            font-size: 28px;
            margin-bottom: 30px;
        }
        .challenge-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }
        .challenge-item {
            background-color: #f5f7fa;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
		.challenge-item:hover{
			-webkit-transform:scale(1.1,1.1);
			background-color: #F3FAFE;
		}
        .challenge-item h3 {
            color: #0396FE;
            font-size: 18px;
            margin-bottom: 15px;
        }
        .challenge-item p {
            font-size: 14px;
        }
		.content_img{
			width: 350px;
		}
.white_btn{
	background-color: #FFF;
	color: #0396FE;
}