@extends('layouts.master')
@section('main_content')
<style>
	.form-one textarea{
		height: 65px;
		padding: 14px 30px 0;
	}
	.ramadan_category{
		color: #2E1104;
		font-weight: 700;
		font-size: 20px;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.disabled-btn {
				background-color: #cccccc;
				color: #666666;
				cursor: not-allowed;
				pointer-events: auto; /* Enable clicking for disabled-looking buttons */
			}

			.badge {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.badge-gold {
    background-color: gold;
    color: black;
}

.badge-category {
    background-color: silver;
    color: black;
}

.gold-sponsor img {
    border: 3px solid gold;
    padding: 5px;
}

	</style>

	
	<script>
		function showPopup(event) {
			event.preventDefault();
			alert("Please donate first from the form above!");
		}
	</script>

<section class="page-header">
	<div class="page-header__bg" style="background-image: url('{{ asset('frontend/assets/images/about.png') }}');"></div>
	<div class="container">
		<div class="page-header__content">
			<h2 class="page-header__title"> </h2>
			<ul class="cherito-breadcrumb list-unstyled">
				<li><a href="/">Home</a></li>
				<li><span>Program</span></li>
				<li><span>Ramadan 2025 </span></li>
			</ul><!-- /.cherito-breadcrumb list-unstyled -->
		</div><!-- /.page-header__content -->
	</div><!-- /.container -->
</section><!-- /.page-header -->

<div class="container flash-message mt-2">
    @foreach (['danger', 'warning', 'success', 'info'] as $msg)
        @if(Session::has('alert-' . $msg))
            <p class="alert alert-{{ $msg }} text-center">{{ Session::get('alert-' . $msg) }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>
        @endif
    @endforeach
</div> 

<section class="event-details section-space1">
	<div class="container">
		<div class="row gutter-y-50">
			<div class="col-xl-12 col-lg-12">
				<div class="product-details__description-wrapper">
					<div class="container">
						
						
						<div class="product-details__description">
							<div class="product-details__description__box wow fadeInUp " data-wow-duration="1500ms">

							<!--<a href="/participation-form">-->
							    <img src="https://markhamcc.org/frontend/assets/images/ramadan-2025.jpg" class="sponsor" alt="" width="100%">
							    <!--</a>	-->
							{{-- <h3 class="product-details__description__title text-center mt-5">Ramadan Connect 2025</h3> --}}

<!-- Registration Steps Section -->
<h3 class="ramadan_category">How to Register Ramadan Connect 2025</h3>
<ul class="product-details__description__text">
    <li><strong>Step 1:</strong> Parent/Guardian registers an account.</li>
    <li><strong>Step 2:</strong> Register Child(ren) or Register as a Family for the Ramadan/Eid Home Decoration Challenge.</li>
    <li><strong>Step 3:</strong> Upload a recorded video/audio.</li>
    <li><strong>Step 4:</strong> <a href="/ramadan-connect-2025-rules" target="_blank">Click here for more details about the Ramadan Connect Challenge and Judges' Rules.</a></li>
    <li><strong>Step 5:</strong> For registration-related questions, email us at <a href="mailto:info@markhamcc.org">info@markhamcc.org</a>.</li>
    <li><strong>Step 6:</strong> <a href="/registration-process" target="_blank"> Watch This Video</a></li>
</ul>

					</div>

					<div class="text-center">
						<a href="/participation-form" type="submit" class="mt-5 cherito-btn btn btn-primary cherito-btn1">
							<span class="cherito-btn__text">Register for Ramadan Connect 2025</span>
						</a>
					</div>

							
						</div>

						

					
			
						
					</div><!-- /.container -->
				</div><!-- /.product-details__description__wrapper -->
				
			</div><!-- /.col-xl-8 col-lg-7 -->
			
		</div><!-- /.row gutter-y-50 -->
	</div><!-- /.container -->
</section><!-- /.event-details section-space -->	

<section class="faq-one">
    <div class="container">
        <div class="sec-title sec-title--center wow fadeInUp" data-wow-duration="1500ms">          
            {{-- <h3 class="sec-title__title">Ramandan 2025 Sponsors</h3> --}}
			<img src="https://markhamcc.org/frontend/assets/images/ramadan-sponsor.jpg" class="sponsor" alt="" width="100%">          
        </div><!-- /.sec-title -->  		
    </div><!-- /.container -->
</section>





	<section class="mt-5" style="background-color: #fff">
		
		
	</section>

 @endsection