/* ================= GLOBAL RESET ================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Inter',sans-serif;
color:#333;
line-height:1.6;
background:#fff;
}

h1,h2,h3,h4,h5{
font-family:'Poppins',sans-serif;
}

/* ================= SECTION UTILS ================= */

.section-padding{
padding:90px 0;
}

.section-header h2{
font-size:2.5rem;
font-weight:700;
}

.section-header p{
max-width:720px;
margin:12px auto 0;
color:#666;
}

/* ================= HERO SECTION ================= */

.hero-section{
min-height:100vh;
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;
}

/* animated gradient background */

.hero-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(-45deg,#0D47A1,#1B5E20,#0D47A1,#2E7D32);
background-size:400% 400%;
animation:gradientMove 14s ease infinite;
z-index:0;
}

/* floating bubble */

.hero-bg::after{
content:"";
position:absolute;
width:350px;
height:350px;
background:rgba(255,255,255,0.08);
border-radius:50%;
top:12%;
left:8%;
animation:float 6s ease-in-out infinite;
}

/* hero content above background */

.hero-content{
position:relative;
z-index:2;
max-width:900px;
}

/* hero title */

.hero-title{
font-size:4rem;
font-weight:800;
margin-bottom:15px;
}

.hero-tagline{
font-size:1.5rem;
font-weight:500;
}

.hero-desc{
margin-top:18px;
font-size:1.05rem;
opacity:0.95;
}

.hero-actions{
margin-top:35px;
}

.hero-date{
margin-top:12px;
font-size:1rem;
background:rgba(0,0,0,0.25);
display:inline-block;
padding:8px 16px;
border-radius:20px;
}

/* ================= PRIZE SECTION ================= */

.prize-section{
background:linear-gradient(135deg,#0D47A1,#1B5E20);
}

.prize-card{
background:rgba(255,255,255,0.1);
padding:35px 25px;
border-radius:18px;
height:100%;
box-shadow:0 20px 50px rgba(0,0,0,0.25);
transition:transform .3s;
}

.prize-card:hover{
transform:translateY(-10px);
}

.prize-card h3{
font-size:3rem;
font-weight:800;
margin-top:10px;
color:#FBC02D;
}

.prize-card h4{
font-weight:700;
margin-bottom:10px;
}

.prize-card p{
opacity:.9;
}

.main-prize{
background:rgba(0,0,0,0.25);
border:2px solid rgba(255,255,255,.3);
}

.prize-label{
background:#FBC02D;
color:#000;
padding:6px 14px;
font-weight:700;
border-radius:20px;
font-size:.9rem;
}

/* ================= FEATURE CARDS ================= */

.feature-card{
background:#fff;
padding:35px 25px;
border-radius:16px;
box-shadow:0 12px 30px rgba(0,0,0,.08);
transition:.3s;
height:100%;
}

.feature-card:hover{
transform:translateY(-10px);
box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.feature-card h5{
margin-top:12px;
font-weight:600;
}

/* ================= PROCESS CARDS ================= */

.process-card{
background:#fff;
padding:40px 30px;
border-radius:18px;
box-shadow:0 15px 40px rgba(0,0,0,.1);
position:relative;
height:100%;
}

.process-card .step{
position:absolute;
top:-20px;
right:20px;
background:#FBC02D;
color:#000;
padding:10px 16px;
font-weight:700;
border-radius:50px;
}

/* ================= DOMAIN BOX ================= */

.domain-box{
background:linear-gradient(135deg,#0D47A1,#1B5E20);
padding:30px;
border-radius:18px;
text-align:center;
font-size:1.1rem;
font-weight:600;
box-shadow:0 16px 40px rgba(0,0,0,.2);
transition:.3s;
}

.domain-box:hover{
transform:translateY(-8px);
}

/* ================= BENEFITS ================= */

.benefit-box{
background:#fff;
padding:35px 20px;
border-radius:16px;
font-size:1.1rem;
font-weight:600;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* ================= FINAL CTA ================= */

.final-cta{
padding:100px 0;
background:linear-gradient(135deg,#1B5E20,#0D47A1);
}

/* ================= ANIMATIONS ================= */

@keyframes gradientMove{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-25px)}
}

/* ================= SCROLL ANIMATION ================= */

.reveal{
opacity:0;
transform:translateY(40px);
transition:.9s;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* ================= RESPONSIVE ================= */

@media(max-width:768px){

.hero-title{
font-size:2.8rem;
}

.hero-tagline{
font-size:1.2rem;
}

.section-padding{
padding:70px 0;
}

}


/* ================= CATEGORY PAGE ================= */

.page-header{
padding:80px 0;
background:linear-gradient(
rgba(13,71,161,0.9),
rgba(27,94,32,0.9)
);
color:white;
}

.page-header h1{
font-size:3rem;
font-weight:700;
}

.page-header p{
font-size:1.1rem;
opacity:0.9;
}


/* Category Cards */

.category-card{
background:#ffffff;
padding:30px 25px;
height:100%;
border-radius:14px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
transition:all .3s ease;
text-align:left;
}

.category-card:hover{
transform:translateY(-8px);
box-shadow:0 12px 35px rgba(0,0,0,0.15);
}

.category-card h5{
font-family:'Poppins',sans-serif;
font-size:1.2rem;
color:#0D47A1;
margin-bottom:10px;
font-weight:600;
}

.category-card p{
font-size:.95rem;
color:#555;
line-height:1.6;
}

/* ================= RULES PAGE ================= */

.rules-box{

background:#ffffff;
padding:25px;
margin-bottom:25px;
border-left:5px solid #1B5E20;
border-radius:8px;
box-shadow:0 6px 16px rgba(0,0,0,0.06);

}

.rules-box h5{

font-family:'Poppins',sans-serif;
color:#1B5E20;
margin-bottom:12px;

}

.rules-box ul{

margin:0;
padding-left:18px;

}

.rules-box ul li{

margin-bottom:8px;
color:#444;

}

/* ================= TIMELINE ================= */

.timeline{

position:relative;

margin-left:20px;

border-left:3px solid #0D47A1;

padding-left:30px;

}


.timeline-item{

position:relative;

margin-bottom:40px;

}


.timeline-dot{

position:absolute;

left:-42px;

top:5px;

width:14px;

height:14px;

background:#FBC02D;

border-radius:50%;

border:3px solid #0D47A1;

}


.timeline-content h5{

font-family:'Poppins',sans-serif;

color:#0D47A1;

margin-bottom:5px;

}


.timeline-content p{

margin:0;

color:#555;

}

/* ================= COMMITTEE PAGE ================= */

.committee-section{

background:#ffffff;

padding:25px;

margin-bottom:25px;

border-radius:8px;

box-shadow:0 6px 16px rgba(0,0,0,0.06);

}

.committee-section h4{

font-family:'Poppins',sans-serif;

color:#0D47A1;

margin-bottom:15px;

border-left:4px solid #1B5E20;

padding-left:10px;

}

.committee-section ul{

padding-left:20px;

margin:0;

}

.committee-section ul li{

margin-bottom:8px;

color:#444;

}

/* ================= CONTACT PAGE ================= */

.contact-box{

background:#ffffff;

padding:30px;

border-radius:10px;

box-shadow:0 6px 16px rgba(0,0,0,0.08);

}

.contact-box h5{

font-family:'Poppins',sans-serif;

color:#1B5E20;

margin-bottom:15px;

}

.contact-box p{

margin-bottom:10px;

color:#444;

}


/* ================= PPT PAGE ================= */

.ppt-section{
padding:60px 20px;
background:#f4f7f6;
}

.title{
text-align:center;
font-size:2.2rem;
font-weight:700;
margin-bottom:40px;
color:#14532d;
}

.ppt-card{
background:#ffffff;
border-radius:12px;
padding:25px;
margin-bottom:25px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
transition:0.3s ease;
}

.ppt-card:hover{
transform:translateY(-5px);
}

.ppt-card h3{
color:#166534;
margin-bottom:12px;
}

.ppt-card ul{
padding-left:18px;
}

.ppt-card li{
margin-bottom:6px;
color:#374151;
}


/* ================= ABOUT PAGE ================= */

/* Header section */

.page-header{
padding:80px 0;
background:linear-gradient(
rgba(13,71,161,0.9),
rgba(27,94,32,0.9)
);
position:relative;
overflow:hidden;
}

.page-header h1{
font-size:3rem;
font-weight:700;
}

.page-header p{
font-size:1.1rem;
opacity:0.9;
}


/* Vision mission section */

.section-padding h3{
font-family:'Poppins',sans-serif;
font-weight:600;
color:#1B5E20;
}


/* Feature cards */

.feature-card{
background:#ffffff;
padding:35px 25px;
border-radius:16px;
box-shadow:0 12px 30px rgba(0,0,0,0.08);
transition:all .3s ease;
height:100%;
text-align:center;
}

.feature-card:hover{
transform:translateY(-10px);
box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

.feature-card h5{
margin-top:12px;
font-weight:600;
color:#0D47A1;
}


/* Gallery section */

.gallery-item{
position:relative;
overflow:hidden;
border-radius:18px;
box-shadow:0 14px 35px rgba(0,0,0,0.15);
}

.gallery-item img{
width:100%;
height:260px;
object-fit:cover;
transition:transform .6s ease;
}

.gallery-item:hover img{
transform:scale(1.1);
}


/* Why ecothon list */

.list-group-item{
border:none;
padding:12px 0;
font-size:0.95rem;
color:#444;
}


/* Organizer image */

img{
max-width:100%;
height:auto;
}


/* Final CTA */

.final-cta{
padding:100px 0;
background:linear-gradient(135deg,#1B5E20,#0D47A1);
}

.final-cta h2{
font-size:2.2rem;
font-weight:700;
}

.final-cta p{
max-width:600px;
margin:auto;
margin-top:10px;
opacity:0.9;
}