*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
scroll-behavior:smooth;
}

/* Announcement */

.announcement{
background:#0b5ed7;
color:white;
padding:8px;
text-align:center;
}


/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 40px;
background:white;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
position:sticky;
top:0;
z-index:1000;
}

.logo img{
width:50px;
height:50px;
}

/* NAV LINKS */

.nav-links{
display:flex;
list-style:none;
gap:30px;
}

.nav-links a{
text-decoration:none;
color:#333;
font-weight:500;
}

.nav-links a:hover{
color:#0b5ed7;
}

/* EASTER MESSAGE */

.easter-message{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%) scale(3);
color:white;
font-size:60px;
font-weight:bold;
opacity:0;
pointer-events:none;
text-align:center;
animation:zoomSparkle 2s ease-in-out;
z-index:10;
}

/* Sparkle effect using text shadow */

.easter-message h1{
text-shadow:
0 0 10px #fff,
0 0 20px #ffd700,
0 0 30px #ffd700,
0 0 40px #fff;
}


/* ANIMATION */

@keyframes zoomSparkle{

0%{
transform:translate(-50%, -50%) scale(3);
opacity:0;
}

30%{
opacity:1;
}

100%{
transform:translate(-50%, -50%) scale(1);
opacity:0;
}

}
/* USER BUTTON */

.user-menu{
position:relative;
}

.user-btn{
background:#0b5ed7;
color:white;
border:none;
padding:8px 15px;
border-radius:5px;
cursor:pointer;
}

/* DROPDOWN */

.dropdown{
display:none;
position:absolute;
right:0;
top:40px;
background:white;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
border-radius:5px;
overflow:hidden;
}

.dropdown a{
display:block;
padding:10px 15px;
text-decoration:none;
color:#333;
}

.dropdown a:hover{
background:#f2f2f2;
}

.show{
display:block;
}


/* HAMBURGER */

.hamburger{
display:none;
flex-direction:column;
cursor:pointer;
gap:5px;
}

.hamburger span{
width:25px;
height:3px;
background:#333;
}


/* HERO */

.hero{
height:100vh;

display:flex;background:url("images/Parish/hero.jpeg") center/cover no-repeat;
align-items:center;
padding:0 8%;
color:white;
}

.hero-container{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
width:100%;
}

.hero-left h1{
font-size:50px;
margin-bottom:10px;
}

.hero-left p{
font-size:20px;
margin-bottom:20px;
}

.hero-btn{
padding:12px 25px;
background:#0b5ed7;
color:white;
border:none;
border-radius:5px;
cursor:pointer;
}

.hero-right img{
width:400px;
max-width:100%;
border-radius:10px;
}


/* SERVICES */

.services{
padding:70px 10%;
background:#f5f7fa;
text-align:center;
}

.services h2{
font-size:36px;
margin-bottom:40px;
}

.service-boxes{
display:flex;
gap:30px;
justify-content:center;
flex-wrap:wrap;
}

.service{
background:white;
padding:30px;
width:250px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}


/* MOBILE */

@media(max-width:900px){

.nav-links{
position:absolute;
top:70px;
left:0;
width:100%;
background:white;
flex-direction:column;
align-items:center;
display:none;
padding:20px 0;
}

.nav-links li{
margin:10px 0;
}

.nav-links.active{
display:flex;
}

.hamburger{
display:flex;
}

.hero-right img{
width:80px;
height:80px;
}

.hero-container{
flex-direction:column;
text-align:center;
gap:40px;
}

.hero-left h1{
font-size:35px;
}

}
@media(max-width:900px){

.nav-links{
position:absolute;
top:70px;
left:0;
width:100%;
background:white;
flex-direction:column;
align-items:center;
display:none;
padding:20px 0;
}

.nav-links li{
margin:10px 0;
}

.nav-links.active{
display:flex;
}

.hamburger{
display:flex;
}

.hero-container{
flex-direction:column;
text-align:center;
gap:40px;
}

.hero-left h1{
font-size:35px;
}

/* Responsive logo */

.logo img{
width:38px;
height:38px;
}

}
/* VILLAGES SECTION */

.villages{
padding:70px 10%;
background:#ffffff;
text-align:center;
}

.villages h2{
font-size:36px;
margin-bottom:40px;
color:#333;
}

/* GRID LAYOUT */

.village-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:30px;
}

/* EACH CARD */

.village{
background:#f9f9f9;
padding:15px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}

.village:hover{
transform:translateY(-8px);
}

.village img{
width:100%;
height:180px;
object-fit:cover;
border-radius:8px;
margin-bottom:10px;
}

.village p{
font-weight:600;
color:#333;
}


/* RESPONSIVE */

@media(max-width:900px){

.village-grid{
grid-template-columns:repeat(2, 1fr);
}

}

@media(max-width:500px){

.village-grid{
grid-template-columns:1fr;
}

}
.details-btn{
display:inline-block;
margin-top:10px;
padding:8px 15px;
background:#0b5ed7;
color:white;
border-radius:5px;
text-decoration:none;
font-size:14px;
transition:0.3s;
}

.details-btn:hover{
background:#084298;
}
/* FOOTER */

.footer{
background:#0b1d3a;
color:white;
padding-top:50px;
}

.footer-container{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
padding:0 10%;
gap:30px;
}

.footer-section{
flex:1;
min-width:220px;
}

.footer-section h3{
margin-bottom:15px;
color:#ffffff;
}

.footer-section p{
font-size:14px;
line-height:1.6;
}

.footer-section ul{
list-style:none;
}

.footer-section ul li{
margin-bottom:10px;
}

.footer-section ul li a{
color:#ccc;
text-decoration:none;
transition:0.3s;
}

.footer-section ul li a:hover{
color:white;
}


/* SOCIAL ICONS */

.social-icons{
display:flex;
gap:15px;
margin-top:10px;
}

.social{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:white;
text-decoration:none;
font-weight:bold;
transition:0.3s;
}

/* Individual colors */

.facebook{
background:#1877f2;
}

.instagram{
background:#e1306c;
}

.youtube{
background:#ff0000;
}

/* Hover effect */

.social:hover{
transform:scale(1.2);
opacity:0.8;
}

/* TEAM SECTION */

.team{
padding:70px 10%;
background:#f5f7fa;
text-align:center;
}

.team h2{
font-size:36px;
margin-bottom:40px;
color:#333;
}


/* GRID */

.team-container{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:30px;
}


/* CARD */

.team-card{
text-decoration:none;
color:#333;
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
display:block;
}

.team-card:hover{
transform:translateY(-8px);
}


/* IMAGE */

.team-card img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
margin-bottom:15px;
}


/* TEXT */

.team-card h3{
margin-bottom:5px;
color:#0b5ed7;
}

.team-card p{
font-size:14px;
margin:2px 0;
}


/* RESPONSIVE */

@media(max-width:900px){

.team-container{
grid-template-columns:repeat(2, 1fr);
}

}

@media(max-width:500px){

.team-container{
grid-template-columns:1fr;
}

}

/* FOOTER BOTTOM */

.footer-bottom{
text-align:center;
padding:15px;
margin-top:30px;
background:#08142b;
font-size:14px;
}


/* RESPONSIVE */

@media(max-width:900px){

.footer-container{
flex-direction:column;
text-align:center;
}

.social-icons{
justify-content:center;
}

}