.hero-section {
min-height: 500px;
position: relative;
background-image: url('hero.png'); 
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.hero-text {
font-size: 2.5vw;
line-height: 1.5;
text-align: center;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--primary);
}

@media (max-width: 768px) {}

@media (min-width: 1000px) {
.hero-text {
font-size: 1.5rem;
}
}



#cta{
text-align:center;
}

#stats h6 {color:#666;text-align:center;font-size:1rem;}

#stats table{margin:5px auto;width:90%;text-align:center;border:1px solid var(--secondary);}
#stats table th{background-color:var(--middle);color:var(--light);padding:5px;width:24%;}
#stats table td{background-color:#eee;padding:5px;color:var(--secondary);font-weight: bold;}
#stats table caption{background-color:var(--light);color:var(--middle);font-size: 1.3em;font-weight:bold;padding:5px;border:1px solid var(--secondary);}



#way{background-color:var(--light);color:var(--secondary);}

#way table {margin:auto;text-align:center;width:95%;}
#way table th {background-color:var(--middle);color:var(--light);padding:3px 0;width:15%;}
#way table th.dark {background-color:var(--secondary);}
#way table td {background-color:#eee;color:var(--secondary);width:25%;vertical-align:top;}


#cta2{
background-color: var(--light);
text-align:center;
}







.svg-item {width: 80%;margin: 0 auto;animation: donutfade 1s;}

@keyframes donutfade {
0% {opacity: .2;}
100% {opacity: 1;}
}

@media (min-width: 992px) {
.svg-item {width: 80%;}
}

.donut-ring {stroke: #EBEBEB;}

.donut-segment {transform-origin: center;stroke: #FF6200;}
.donut-segment-2 {stroke: var(--middle);animation: donut1 3s;}
.donut-segment-3 {stroke: var(--pink);
animation: donut2 3s;}
.donut-segment-4 {stroke: var(--gold);animation: donut3 3s;}

.segment-1{fill:#ccc;}
.segment-2{fill:var(--middle);}
.segment-3{fill:var(--pink);}
.segment-4{fill:var(--gold);}

.donut-percent {animation: donutfadelong 1s;}

@keyframes donutfadelong {
0% {opacity: 0;}
100% {opacity: 1;}
}

@keyframes donut1 {
0% {stroke-dasharray: 0, 100;}
100% {stroke-dasharray: 72, 28;}
}

@keyframes donut2 {
0% {stroke-dasharray: 0, 100;}
100% {stroke-dasharray: 97.5, 2.5;}
}

@keyframes donut3{
0% {stroke-dasharray: 0, 100;}
100% {stroke-dasharray: 1, 99;}
}

.donut-text {font-family: Arial, Helvetica, sans-serif;fill: #FF6200;}
.donut-text-1 {fill:var(--middle);}
.donut-text-2 {fill: var(--pink);}

.donut-label {
font-size: 0.15em;
font-weight: 700;
line-height: 1;
fill: #666;
transform: translateY(0.25em);
}

.donut-percent {
font-size: 0.3em;
line-height: 1;
transform: translateY(0.5em);
font-weight: bold;
}

.donut-data {
font-size: 0.2em;
line-height: 1;
transform: translateY(0.5em);
text-align: center;
text-anchor: middle;
color:#333;
fill: #333;
animation: donutfadelong 1s;
}