*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
line-height:1.6;
}
/*main-title*/
.main-title {
	font-size: 22px;
	font-weight: 600;
	text-align: center;
	
}

/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 8%;
background:#0E5A2F;  /*0a3d62;*/
color:white;
position:fixed;
width:100%;
top:0;
z-index:1000;
}

.logo{
font-size:22px;
font-weight:bold;
}

.nav-links{
list-style:none;
display:flex;
}

.nav-links li{
margin-left:20px;
}

.nav-links a{
color:white;
text-decoration:none;
font-weight:500;
}

.nav-links a:hover{
color:#fbc531;
}

.menu-icon{
display:none;
font-size:28px;
cursor:pointer;
}

#menu-toggle{
display:none;
}

/* SLIDER */

.slider{
margin-top:70px;
overflow:hidden;
height:100vh;
}

.slides{
display:flex;
width:500%;
animation:slide 20s infinite;
}

.slide{
width:100%;
height:400vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:white;
text-align:center;
padding:40px;
}

.slide h1{
font-size:40px;
margin-bottom:15px;
}

.slide p{
font-size:18px;
}
@keyframes slide{
0%{margin-left:0;}
20%{margin-left:0;}
25%{margin-left:-100%;}
45%{margin-left:-100%;}
50%{margin-left:-200%;}
70%{margin-left:-200%;}
75%{margin-left:-300%;}
95%{margin-left:-300%;}
100%{margin-left:-400%;}
}  

/* ABOUT */

.about{
padding:80px 10%;
text-align:center;
}

.about h2{
margin-bottom:20px;
font-size:28px;
color:#0a3d62;
}

/* CTA */

.cta{
background:#0a3d62;
color:white;
text-align:center;
padding:60px 20px;
}

.btn{
display:inline-block;
background:#fbc531;
color:black;
padding:12px 25px;
text-decoration:none;
font-weight:bold;
border-radius:5px;
margin-top:15px;
}

.btn:hover{
background:white;
}

/* FOOTER */

footer{
background:#222;
color:white;
text-align:center;
padding:20px;
}

/* MOBILE RESPONSIVE */

@media(max-width:768px){

.nav-links{
position:absolute;
top:70px;
left:0;
width:100%;
background:#0a3d62;
flex-direction:column;
display:none;
}

.nav-links li{
margin:15px 0;
text-align:center;
}

#menu-toggle:checked + .menu-icon + .nav-links{
display:flex;
}

.menu-icon{
display:block;
}

.slide h1{
font-size:26px;
}

}

/* WHATSAPP FLOAT BUTTON */

.whatsapp-float{
position:fixed;
bottom:20px;
right:20px;
background:#0d6efd;
color:white;
width:70px;
height:70px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:12px;
font-weight:bold;
text-decoration:none;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
z-index:1000;
transition:0.3s;
}

.whatsapp-float:hover{
background:#084298;
transform:scale(1.1);
}
/* SOCIAL ICONS IN NAVBAR */
.navbar .social-icons{
display:flex;
align-items:center;
margin-left:20px;
}

.navbar .social-icons a{
display:inline-block;
margin-left:10px;
transition:0.3s;
}

.navbar .social-icons img{
width:30px;
height:30px;
border-radius:50%;
transition:0.3s;
}

.navbar .social-icons a:hover img{
transform:scale(1.2);
border:2px solid #fbc531;
}

/* MOTIVATION SECTION */

.motivation-section{
padding:80px 8%;
background:#f8f9fa;
text-align:center;
}

.motivation-section h2{
font-size:30px;
margin-bottom:40px;
color:#0a3d62;
}

.motivation-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.motivation-box{
background:white;
padding:30px 20px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
transition:0.3s;
}

.motivation-box:hover{
transform:translateY(-8px);
box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.motivation-box img{
margin-bottom:15px;
}

.motivation-box h3{
font-size:20px;
margin-bottom:10px;
color:#1e3799;
}

.motivation-box p{
font-size:14px;
color:#555;
}

/* Responsive */

@media(max-width:992px){
.motivation-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:600px){
.motivation-grid{
grid-template-columns:1fr;
}
}
/* INSPIRATION SECTION */

.inspiration-section{
padding:80px 8%;
background:#ffffff;
text-align:center;
}

.inspiration-section h2{
font-size:28px;
margin-bottom:40px;
color:#0a3d62;
}

.inspiration-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.quote-style{
padding:20px;
border-radius:12px;
font-size:18px;
font-weight:500;
transition:0.0s;
}

.quote-style:hover{
transform:scale(1.05);
}

/* Different Styles */

.one{
background:#f1f2f6;
font-style:italic;
}

.two{
background:#dff9fb;
font-weight:bold;
}

.three{
background:#f6e58d;
font-family:cursive;
}

.four{
background:#c7ecee;
letter-spacing:1px;
}

.five{
background:#ffbe76;
font-style:italic;
}

.six{
background:#badc58;
font-weight:bold;
}

/* Responsive */

@media(max-width:992px){
.inspiration-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:600px){
.inspiration-grid{
grid-template-columns:1fr;
}
}

/* ISLAMIC SLIDE CONTENT */

.islamic-content{
margin-top:25px;
background:rgba(255,255,255,0.85);
padding:25px;
border-radius:12px;
max-width:700px;


}

.arabic{
font-size:24px;
font-weight:bold;
direction:rtl;
color:#0a3d62;
margin-bottom:8px;
}

.arabic-hadith{
font-size:22px;
direction:rtl;
color:#1e3799;
margin-top:15px;
margin-bottom:8px;
}

.translation{
font-size:14px;
font-style:italic;
color:#333;
margin-bottom:10px;
}

/* Mobile */

@media(max-width:768px){
.arabic{
font-size:18px;
}
.arabic-hadith{
font-size:17px;
}
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
line-height:1.6;
}

/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 8%;
background:#0E5A2F; /*0a3d62;*/
color:white;
position:fixed;
width:100%;
top:0;
z-index:1000;
}

.logo{
font-size:22px;
font-weight:bold;
}

.nav-links{
list-style:none;
display:flex;
}

.nav-links li{
margin-left:20px;
}

.nav-links a{
color:white;
text-decoration:none;
font-weight:500;
}

.nav-links a:hover{
color:#fbc531;
}

.menu-icon{
display:none;
font-size:28px;
cursor:pointer;
}

#menu-toggle{
display:none;
}
     

.slider{
margin-top:30px;
overflow:hidden;
height:70vh;

}
	

.slides{
display:flex;
width:500%;
animation:slide 10s infinite;
}:hover{
	animation-play-state: paused;
}
/* --- YAHAN PASTE KAREIN --- */

.slider:hover {
    transform: scale(1.01); /* Thoda sa zoom hoga */
    box-shadow: 0px 10px 25px rgba(0,0,0,0.2); /* Ubhra hua nazar aayega */
}

.slides:hover {
    animation-play-state: paused; /* Ruk jayega */
}

/* -------------------------- */

.slide{
    width:100%;
    height:80vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:white;
    text-align:center;
    padding:20px;
}

.slide{
width:100%;
height:80vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:#F4C21F;
text-align:center;
padding:10px;
}

.slide h1{
font-size:40px;
margin-bottom:15px;
}

.slide p{
font-size:22px;
}
/*Background images*/
.slide1{
	background-image:
	url("online-quran-teachers-images/piccs5.jpeg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}
	
	.slide2{
	background-image:
	url("online-quran-teachers-images/piccs6.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}
	
	.slide3{
	background-image:
	url("online-quran-teachers-images/piccs7.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}
	
	.slide4{
	background-image:
	url("online-quran-teachers-images/piccs8.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}
	
	.slide5{
	background-image:
	url("online-quran-teachers-images/piccs9.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}

@keyframes slide{
0%{margin-left:0%;}
20%{margin-left:0%;}
25%{margin-left:-100%;}
45%{margin-left:-100%;}
50%{margin-left:-200%;}
70%{margin-left:-200%;}
75%{margin-left:-300%;}
95%{margin-left:-300%;}
100%{margin-left:-400%;}
} 

/* ABOUT */

.about{
padding:80px 10%;
text-align:center;
}

.about h2{
margin-bottom:20px;
font-size:28px;
color:#0a3d62;
}

/* CTA */

.cta{
background:#0a3d62;
color:white;
text-align:center;
padding:60px 20px;
}

.btn{
display:inline-block;
background:#fbc531;
color:black;
padding:12px 25px;
text-decoration:none;
font-weight:bold;
border-radius:5px;
margin-top:15px;
}

.btn:hover{
background:white;
}

/* FOOTER */

footer{
background:#222;
color:white;
text-align:center;
padding:20px;
}

/* MOBILE RESPONSIVE */

@media(max-width:768px){

.nav-links{
position:absolute;
top:70px;
left:0;
width:100%;
background:#0a3d62;
flex-direction:column;
display:none;
}

.nav-links li{
margin:15px 0;
text-align:center;
}

#menu-toggle:checked + .menu-icon + .nav-links{
display:flex;
}

.menu-icon{
display:block;
}

.slide h1{
font-size:26px;
}
}