/*=========================================
        VOICES OF HUMANITY
        DESIGN SYSTEM v1.0
==========================================*/


:root{

/*==================================
Primary Colours
===================================*/

--primary:#0F4C3A;

--gold:#D4AF37;

--dark:#1B1B1B;

--light:#FAFAF7;

--text:#555;


/*==================================
Spacing
===================================*/

--section-space:120px;

--card-radius:22px;

--shadow:

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

}


/*==================================
Universal
===================================*/

*{

box-sizing:border-box;

}

body{

background:var(--light);

color:var(--text);

font-family:

"Segoe UI",

Arial,

sans-serif;

line-height:1.7;

}


/*==================================
Section
===================================*/

.section{

padding:

var(--section-space)

40px;

}


/*==================================
Titles
===================================*/

.section-title{

font-size:3rem;

font-weight:700;

color:var(--primary);

margin-bottom:20px;

text-align:center;

}

.section-subtitle{

font-size:1.2rem;

max-width:850px;

margin:auto;

text-align:center;

margin-bottom:70px;

}


/*==================================
Buttons
===================================*/

.btn-primary{

display:inline-block;

padding:18px 42px;

border-radius:50px;

background:var(--primary);

color:white;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-4px);

}


.btn-secondary{

display:inline-block;

padding:18px 42px;

border-radius:50px;

border:2px solid var(--gold);

color:var(--gold);

text-decoration:none;

font-weight:600;

transition:.35s;

}

.btn-secondary:hover{

background:var(--gold);

color:white;

}


/*==================================
Cards
===================================*/

.voh-card{

background:white;

border-radius:var(--card-radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

}

.voh-card:hover{

transform:translateY(-10px);

}

.voh-card img{

width:100%;

display:block;

}

.voh-card-content{

padding:30px;

}

.voh-card h3{

color:var(--primary);

margin-bottom:15px;

}


/*==================================
Status Badges
===================================*/

.badge{

display:inline-block;

padding:8px 16px;

border-radius:50px;

font-size:.85rem;

font-weight:bold;

color:white;

}

.safe{

background:#1E8E3E;

}

.vulnerable{

background:#F4B400;

}

.endangered{

background:#FB8C00;

}

.critical{

background:#D93025;

}

.extinct{

background:#555;

}


/*==================================
Museum Panel
===================================*/

.info-panel{

background:white;

padding:35px;

border-left:6px solid var(--gold);

box-shadow:var(--shadow);

border-radius:12px;

}


/*==================================
Institution Divider
===================================*/

.divider{

width:120px;

height:4px;

background:var(--gold);

margin:

25px auto

50px;

border-radius:50px;

}


/*==================================
Fade Animation
===================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:1s;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}