body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
color:white;
overflow-x:hidden;
}

/* smooth scrolling for event page */

html{
scroll-behavior:smooth;
}

/* main homepage background */

.main-bg{

background:
linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
url("../img/background_2.png");

background-size:cover;
background-position:center;
background-attachment:fixed;

}

/* christian page background */

.cloud-bg{

background:
linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
url("../img/background_3.png");

background-size:cover;
background-position:center;
background-attachment:fixed;

}

/* particles background */

#particles{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:0;
}

/* navigation */

nav{
display:flex;
justify-content:space-between;
padding:20px 40px;
background:rgba(0,0,0,0.4);
position:relative;
z-index:2;
}

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

nav ul{
display:flex;
list-style:none;
gap:25px;
}

nav a{
color:white;
text-decoration:none;
font-weight:bold;
}

/* hero */

.hero{

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

text-align:center;

padding:80px 20px 40px 20px;

position:relative;
z-index:2;

}

/* glowing light behind DIBAT */

.hero::before{

content:"";

position:absolute;

top:40%;
left:50%;

transform:translate(-50%,-50%);

width:600px;
height:600px;

background:radial-gradient(
circle,
rgba(255,255,255,0.35) 0%,
rgba(255,255,255,0.15) 30%,
rgba(255,255,255,0.05) 60%,
transparent 80%
);

filter:blur(20px);

z-index:-1;

}

/* DIBAT letters */

.dibat-word span{

font-size:130px;
font-weight:bold;
margin:0 12px;
position:relative;
cursor:pointer;
transition:0.4s;
animation:fadeIn 1s ease forwards;

}

.dibat-word span:nth-child(1){animation-delay:0.2s}
.dibat-word span:nth-child(2){animation-delay:0.4s}
.dibat-word span:nth-child(3){animation-delay:0.6s}
.dibat-word span:nth-child(4){animation-delay:0.8s}
.dibat-word span:nth-child(5){animation-delay:1s}

.dibat-word span:hover{

color:#60a5fa;
transform:translateY(-12px);
text-shadow:0 0 20px #3b82f6;

}

.dibat-word span::after{

content:attr(data-text);
position:absolute;
bottom:-60px;
left:50%;
transform:translateX(-50%);
opacity:0;
font-size:20px;
font-weight:600;
letter-spacing:1px;
transition:0.3s;
z-index:5;

}

.dibat-word span:hover::after{
opacity:1;
}

/* subtitle */

.subtitle{
margin-top:45px;
font-size:22px;
letter-spacing:2px;
}

/* buttons */

.buttons{
margin-top:50px;
display:flex;
gap:20px;
}

.btn{
padding:14px 30px;
background:#2563eb;
border-radius:6px;
text-decoration:none;
color:white;
font-weight:bold;
transition:0.3s;
display:inline-block;
}

.btn:hover{
background:#1d4ed8;
transform:translateY(-3px);
}

.secondary{
background:#475569;
}

.secondary:hover{
background:#334155;
}

/* resources section */

.resources{

padding:0 40px 40px 40px;
margin-top:10px;
text-align:center;

}

.resources h1{

margin-bottom:60px;
font-size:36px;

}

/* resource blocks */

.resource-block{

max-width:900px;
margin:80px auto;
border-radius:12px;

background:rgba(0,0,0,0.45);

padding:40px;

box-shadow:0 10px 30px rgba(0,0,0,0.4);

text-align:center;

}

/* resource logos */

.resource-block img{

max-width:100%;
height:auto;
display:block;
margin:auto;

}

/* button below image */

.resource-btn{

display:inline-block;

margin-top:30px;

padding:14px 30px;

background:#2563eb;

color:white;

font-weight:bold;

border-radius:8px;

text-decoration:none;

transition:0.3s;

}

.resource-btn:hover{

background:#1d4ed8;

transform:translateY(-3px);

}

/* event page background */

.event-bg{

background:
linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
url("../img/golf.png");

background-size:cover;
background-position:center;
background-attachment:fixed;

}

/* event header (countdown section) */

.event-header{

text-align:center;
padding:40px 20px;

}

/* countdown layout */

#countdown{

display:flex;
justify-content:center;
gap:40px;

margin-top:20px;

}

/* countdown boxes */

.time{

background:rgba(0,0,0,0.55);
padding:20px 30px;
border-radius:10px;

}

/* countdown numbers */

.time span{

font-size:48px;
font-weight:bold;

}

/* countdown labels */

.time p{

margin:5px 0 0 0;

}

/* event message */

.event-message{

margin-top:30px;

font-size:28px;

font-weight:600;

letter-spacing:1px;

text-shadow:0 0 10px rgba(255,255,255,0.4);

}

/* accommodation carousel */

.carousel{

position:relative;
max-width:700px;
margin:30px auto;

}

.carousel-track{

position:relative;
overflow:hidden;

}

.carousel-image{

width:100%;
display:none;

border-radius:10px;

box-shadow:0 8px 25px rgba(0,0,0,0.5);

}

.carousel-image.active{
display:block;
}

/* arrows */

.carousel-btn{

position:absolute;
top:50%;

transform:translateY(-50%);

background:rgba(0,0,0,0.6);
border:none;

color:white;

font-size:30px;

padding:10px 15px;

cursor:pointer;

border-radius:6px;

}

.carousel-btn:hover{
background:#2563eb;
}

.prev{
left:-50px;
}

.next{
right:-50px;
}

/* event navigation (Accommodation / Agenda / Trip) */

.event-nav{

display:flex;
justify-content:center;
gap:40px;

margin:40px 0;

}

.event-nav a{

background:rgba(0,0,0,0.55);
padding:12px 24px;
border-radius:8px;

text-decoration:none;
color:white;
font-weight:bold;

transition:0.3s;

}

.event-nav a:hover{

background:#2563eb;

}

/* event sections */

.event-section{

max-width:900px;
margin:80px auto;
padding:40px;

background:rgba(0,0,0,0.45);
border-radius:12px;

text-align:center;

}

/* mobile adjustments */

@media (max-width: 768px){

.carousel{

max-width:95%;

}

.carousel-btn{

font-size:22px;
padding:6px 10px;

}

.prev{
left:5px;
}

.next{
right:5px;
}

.time span{
font-size:32px;
}

.event-message{
font-size:20px;
}

}

/* trip details image */

.trip-image{

width:100%;

max-width:700px;

height:auto;

display:block;

margin:20px auto;

border-radius:10px;

box-shadow:0 8px 25px rgba(0,0,0,0.5);

object-fit:cover;

}

/* budget sliders */

.budget-person{

margin:35px 0;

}

.budget-person input{

width:100%;
margin-top:10px;

}

/* individual progress */

.progress-bar{

width:100%;
height:10px;

background:#ddd;

border-radius:6px;

margin-top:10px;

overflow:hidden;

}

.progress-bar div{

height:100%;

background:#22c55e;

width:0%;

}

/* total event progress */

.total-progress{

width:100%;
height:18px;

background:#ddd;

border-radius:10px;

margin:20px 0;

overflow:hidden;

}

#total-progress-bar{

height:100%;

width:0%;

background:linear-gradient(90deg,#22c55e,#16a34a);

}

}