/* ============================= */
/* GLOBAL STYLE */
/* ============================= */


body {

font-family:
"Segoe UI",
Arial,
sans-serif;

background:#f4fff5;

color:#1b4332;

transition:.3s;

}




.navbar-brand {

font-size:1.4rem;

}





/* ============================= */
/* HERO SECTION */
/* ============================= */


.hero {

min-height:90vh;

display:flex;

align-items:center;

background:
linear-gradient(
135deg,
#2d6a4f,
#95d5b2
);

color:white;

position:relative;

overflow:hidden;

}





/* ============================= */
/* CARDS */
/* ============================= */


.card {

border:none;

border-radius:20px;

box-shadow:
0 10px 25px rgba(0,0,0,.08);

transition:.3s;

}




.card:hover {

transform:
translateY(-8px);

}





.stat-box {

padding:30px;

border-radius:20px;

background:white;

text-align:center;

}





/* ============================= */
/* DARK MODE */
/* ============================= */


.dark-mode {

background:#102a23;

color:#e9f5db;

}



.dark-mode .card,
.dark-mode .stat-box {


background:#1b4332;

color:white;


}





/* ============================= */
/* BUTTONS */
/* ============================= */


.btn-success {


background:#2d6a4f;

border:none;


}



.btn-success:hover {


background:#40916c;


}






/* ============================= */
/* ECOSYSTEM EXPLORER */
/* ============================= */


.ecosystem-map {

background:

linear-gradient(
#90e0ef,
#caf0f8
);


border-radius:30px;


padding:25px;


box-shadow:

0 15px 35px rgba(0,0,0,.18);


overflow:hidden;


}




.ecosystem-map svg {


width:100%;


height:auto;


}





.earth-globe {


width:100%;


max-width:600px;


display:block;


margin:auto;


animation:

earthFloat 6s ease-in-out infinite;


}





@keyframes earthFloat {


0%,100% {


transform:translateY(0);


}


50% {


transform:translateY(-15px);


}


}





.eco {


cursor:pointer;


stroke:white;


stroke-width:4;


transition:.3s;


transform-origin:center;


}




.hotspot {


animation:

ecoPulse 2s infinite;


}





.eco:hover {


filter:

drop-shadow(
0 0 15px yellow
);


transform:

scale(1.35);


}





@keyframes ecoPulse {


0% {


opacity:1;


}


50% {


opacity:.5;


}


100% {


opacity:1;


}


}







/* ============================= */
/* QUIZ GAME */
/* ============================= */


.drag-item {


background:#95d5b2;


padding:15px;


margin:10px;


border-radius:15px;


cursor:grab;


text-align:center;


font-size:20px;


transition:.3s;


}





.drag-item:hover {


transform:scale(1.05);


}




.drop-zone {


background:#caf0f8;


padding:25px;


margin:10px;


border-radius:15px;


text-align:center;


min-height:70px;


transition:.3s;


}




.drop-zone.correct {


background:#74c69d;


}





.drop-zone.wrong {


background:#ffb4a2;


}





/* ============================= */
/* FEATURE TOPIC CARDS */
/* ============================= */


.topic-card {


transition:
all .3s ease;


cursor:pointer;


border-radius:20px;


overflow:hidden;


position:relative;


}




.topic-card:hover {


transform:

translateY(-10px);


box-shadow:

0 15px 35px rgba(0,0,0,.2);


background-color:#f0fff4;


}





.topic-card:hover h3 {


color:#2d6a4f;


}





.topic-card .topic-icon {


transition:

transform .3s ease;


}




.topic-card:hover .topic-icon {


transform:

scale(1.2)
rotate(5deg);


}





.topic-card::before {


content:"";


position:absolute;


top:0;


left:0;


width:100%;


height:5px;


background:#52b788;


transform:scaleX(0);


transition:.3s;


}





.topic-card:hover::before {


transform:scaleX(1);


}






/* ============================= */
/* MODALS */
/* ============================= */


.modal-content {


border-radius:20px;


border:none;


}




.modal-header {


background:#2d6a4f;


color:white;


}







/* ============================= */
/* IMAGES */
/* ============================= */


img {


max-width:100%;


border-radius:15px;


}







/* ============================= */
/* MOBILE RESPONSIVE */
/* ============================= */


@media(max-width:768px){



.hero h1 {


font-size:2.2rem;


}



.card {


margin-bottom:15px;


}



.navbar-nav {


text-align:center;


}



.earth-globe {


max-width:350px;


}



.ecosystem-map {


padding:10px;


}



}