*{
	margin: 0;
	padding: 0;
}

/*home start*/

#frontpage-wrapper{
	background-color: white;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 999;
}
/*image slider*/
#inedx_section1{
	background-image: url('../Images/Contact-bg-img.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 130vh;
}
#hello_title_container{
	background-color: rgba(0, 0, 0, 0.6);
	width: 100%;
	height: 130vh;
	padding: 0 4%;
}
#hello_title{
	font-size: 50px; 
	text-transform: uppercase;
	color: white;
	width: 60%;
	padding-top: 23.5%;
}

#hello_title_text{
	text-transform: uppercase;
	color: white;
	width: 60%;
	margin-top: 2rem;
	font-size: 20px;
}

#Join_Button{
	border: 1px solid black;
	background-color: white;
	text-decoration: none;
	display: flex;
	margin: 2.5rem;
	padding:1rem 1.5rem;
	font-weight: bold;
	font-size: 20px;
	z-index: 0;
	width: 11rem;
}




#index_section2{
	padding: 3rem 10%;
}

#index_section2 h2{
	font-size: 50px;
	color:#edb634;
}

#About_line{
	border: 2px solid #e18b2a;
	width: 40%;
	margin:0 0 0 3%;
}

#about_title{
	font-size: 40px;
	text-align: center;
	margin: 1rem 0;
	text-transform: uppercase;
}
#about_title_text{
	margin: 5.5rem 0 4.5rem 3rem ;
    text-align: justify;
}

#index_section2_list_container{
	float: right;
	margin-top: 1rem;
}

#index_section2_list_container li{
	border: 4px double #e18b2a;
	border-radius: 30px;
	display: flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.2rem;
	font-weight: bold;
	
}

#index_section2_list_container li:hover{
    border: 1px solid #e18b2a;
    background-color:  #e18b2a;
    color: white;
    cursor: pointer;
}

#index_section2_list_container li a{
	text-decoration: none;
	color: #583a18;
	text-transform: uppercase;
}

#Cloth_Distribution_container{
	width: 260px;
	margin-left:-1rem;
}

#Health_Distribution_container{
	width: 150px;
	margin-left:1.5rem;
	margin-top: 0.5rem;
}

#Study_Distribution_container{
	width: 300px;
	margin-left:1.5rem;
	margin-top: 0.5rem;
}

#Workshop_Distribution_container{
	width: 300px;
	margin-left:0.5rem;
	margin-top: 0.5rem;

}

.index_section2_List_Icon{
	border: 1px solid #edb634;
	border-radius: 50%;
	width: 2.5rem;
	padding: 0.1rem;
}

#index_section2_About_Donate_Button{
	border: 1px solid #e18b2a;
	border-radius: 35px;
	background-color: white;
	text-decoration: none;
	padding:0.8rem 1rem;
	margin:2rem;
	font-weight: bold;
	font-size: 20px;
	color: #e18b2a;
}

#index_section2_About_Donate_Button:hover{
    border: 1px solid #e18b2a;
    background-color:  #e18b2a;
    color: white;
}




#index_section3{
	padding: 5rem 10%;
}
#index_section3 p{
	text-align: center;
	margin: 1rem 0;
	font-size: 35px;
	text-transform: uppercase;
}

#index_section3_list_container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 10%;
}

#index_section3_list_container li{
	text-align: center;
	list-style: none;
}

#index_section3_list_container li img{
	width: 5rem;
	padding: 0.5rem;
	margin-bottom: 1rem;
}

#index_section3_5{
	display: flex;
	justify-content:center;
	align-items: center;
	padding: 0 10%;
}
.Home_image1{
	width: 80%;
}

/*need your help*/

#index_section4{
	padding: 2rem 10%;
}

#index_section4 h3{
	font-size: 50px;
	text-transform: uppercase;
	color:#edb634;
}

#index_section4_line1{
	border: 2px solid #e18b2a;
	width: 45%;
	margin:0 0 0.2rem 3%;
}
#index_section4_line2{
	border: 2px solid #e18b2a;
	width: 45%;
	margin:0 0 0 6%;
}

#index_section4_text{
	text-align: justify;
}

#index_section4_Iamge_container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin: 2rem 0;
}

.index_section4_image{
	width: 250px;
	height: 300px;
	border-radius: 20px;
}


/*Queens Teams*/


#index_section6{
	padding: 0 10%;
}

#index_section6 h5{
	font-size: 50px;
	color:#edb634;
	text-transform: uppercase;
}

#index_section6_line1{
	border: 2px solid #e18b2a;
	width: 30%;
	margin:0 0 0.2rem 3%;
}

#index_section6_line2{
	border: 2px solid #e18b2a;
	width: 30%;
	margin:0 0 0.2rem 6%;
}

#index_section6_image_container{
	width: 100%;
	height: 380px;
	display: flex;
	align-items: center;
	margin-top: 3rem;
}

.index_section6_slider_wrapper {
	width: 75%;
	height: 375px;
	padding: 20px 0;
	display: flex;
	align-items: center;
	position: absolute;
	overflow: hidden;
}

.index_section6_slider_inner {
	position: absolute;
	top: 0;
	left: -10px;
	display: flex;
	pointer-events: none;
	transition: .4s ease-out;
}

.index_section6_slider_item{
	margin: 0 15px;
	width: 250px;
	height: 375px;
}

.index_section6_slider_item img {
	width: 100%;
	height: 100%;
	border-radius: 12px;
}

#index_section6_image_container .index_section6_prev,
#index_section6_image_container .index_section6_next {
	position: absolute;
	z-index: 1;
	width: 50px;
	height: 50px;
	line-height: 58px;
	border: none;
	background-color: white;
	border-radius: 50%;
	color: #e18b2a;
	font-size: 35px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

#index_section6_image_container .index_section6_prev:hover,
#index_section6_image_container .index_section6_next:hover{
	background-color: #e18b2a;
	color: white;
}

#index_section6_image_container .index_section6_prev {
	left: 5%;
}

#index_section6_image_container .index_section6_next {
	right: 5%;
}

@media only screen and (max-width: 992px){
	#hello_title{
		font-size: 40px;
		width: 100%;
	}
	#hello_title_text{
		width: 100%;
		font-size: 20px;
	}


	#index_section2{
		padding: 3rem 2%;
	}
	#index_section2 h2{
		font-size: 32px;
	}
	#About_line{
		width: 80%;
	}

	#about_title{
		font-size: 24px;
	}

	#index_section2_list_container{
		float: none;
	}

	#Cloth_Distribution_container{
		width: 85%;
		margin-left:0;
	}
	
	#Health_Distribution_container{
		width: 85%;
		margin-left:0;
		margin-top: 0.5rem;
	}
	
	#Study_Distribution_container{
		width:85%;
		margin-left:0;
		margin-top: 0.5rem;
	}
	
	#Workshop_Distribution_container{
		width:85%;
		margin-left:0;
		margin-top: 0.5rem;
	}

	#about_title_text{
		margin: 0 0 2.5rem 0;
	}
	#index_section2_About_Donate_Button{
		padding:0.8rem 1rem;
		margin:0 6%;
	}

	#index_section3{
		padding: 5rem 2%;
	}
	#index_section3 p{
		font-size: 24px;
	}
	
	#index_section3_list_container{
		display: block;
		
	}

	#index_section3_list_container li{
		margin: 1rem 0;
	}

	#index_section3_list_container li img{
		width: 10rem;
	}

	#index_section3_5{
		padding: 0 0;
	}
	.Home_image1{
		width: 100%;
	}

	#index_section4 h3{
		font-size: 30px;
	}

	#index_section4_line1{
		width: 80%;
	}

	#index_section4_line2{
		width: 80%;
	}

	.index_section4_image{
		width: 100%;
		height: 300px;
		border-radius: 20px;
		margin: 1rem;
	}

	#index_section6 h5{
		font-size: 24px;
	}

	#index_section6_line1{
		width: 80%;
	}
	#index_section6_line2{
		width: 80%;
	}
}



/* This section creates a full-page loading spinner with a logo in the center. 
The container (#sping_container) uses flexbox to center the spinner and logo both horizontally and vertically on the screen. 
The spinner (.sping) is a circular element with a rotating animation using @keyframes to simulate a loading indicator.
An image (Logo) is overlaid in the center of the spinner with absolute positioning, while its size is set to 150px wide.*/


#sping_container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: ;
}
.sping {
    width: 300px;
    height: 300px;
    border: 9px solid #0000001a;
    border-radius: 50%;
    border-right-color:#e18b2a;
    animation: spinner 0.6s ease infinite;
}
@keyframes spinner {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}


/* Styling for the WhatsApp button */
#whatsapp {
    border-radius: 50%; /* Makes the button round */
    text-decoration: none; /* Removes underline from the link */
    background-color: rgb(37, 211, 102); /* WhatsApp green background color */
    position: fixed; /* Fixes the button's position on the screen */
    right: 5%; /* Positions the button 5% from the right edge */
    bottom: 10%; /* Positions the button 10% from the bottom edge */
    z-index: 777; /* Ensures the button is on top of other elements */
    display: none; /* Initially hides the button */
}

/* Styling for the WhatsApp icon within the button */
#whatsapp i {
    color: white; /* Sets the icon color to white */
    font-size: 30px; /* Sets the icon size */
    padding: 0.3rem; /* Adds padding around the icon */
    width: 2.5rem; /* Sets the width of the icon */
    height: 2.5rem; /* Sets the height of the icon */
}