100 lines
2.3 KiB
PHP
100 lines
2.3 KiB
PHP
<div class="stats-bar">
|
|
<div class="stats-inner1">
|
|
<div class="stat-item reveal reveal-d1">
|
|
<div class="stat-num">99.2 <span>%</span></div>
|
|
<div class="stat-lbl">On-Time Delivery</div>
|
|
</div>
|
|
<div class="stat-item reveal reveal-d2">
|
|
<div class="stat-num">3<span>x</span></div>
|
|
<div class="stat-lbl">Faster Response</div>
|
|
</div>
|
|
<div class="stat-item reveal reveal-d3">
|
|
<div class="stat-num">40<span>%</span></div>
|
|
<div class="stat-lbl">Cost Reduction</div>
|
|
</div>
|
|
<!-- <div class="stat-item reveal reveal-d4">
|
|
<div class="stat-num">15 </div>
|
|
<div class="stat-lbl">Cities Covered</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.stats-bar {
|
|
width: 100%;
|
|
padding: 50px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.stats-inner1 {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 30px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.stat-num {
|
|
font-size: clamp(40px, 6vw, 70px);
|
|
font-weight: 900;
|
|
color: #111;
|
|
line-height: 1;
|
|
margin-bottom: 8px;
|
|
font-family: "Manrope", sans-serif;
|
|
letter-spacing: -2px;
|
|
}
|
|
|
|
.stat-num span {
|
|
font-size: 0.5em;
|
|
color: #E31E24;
|
|
margin-left: 5px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.stat-lbl {
|
|
font-size: clamp(13px, 1.5vw, 16px);
|
|
font-weight: 700;
|
|
color: #64748B;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.5px;
|
|
}
|
|
|
|
/* Tablet Scale (1024px) */
|
|
@media (max-width: 1024px) {
|
|
.stats-inner1 {
|
|
max-width: 90%;
|
|
gap: 20px;
|
|
}
|
|
}
|
|
|
|
/* Mobile Stack (767px) */
|
|
@media (max-width: 767px) {
|
|
.stats-bar {
|
|
padding: 40px 0;
|
|
}
|
|
.stats-inner1 {
|
|
grid-template-columns: 1fr;
|
|
gap: 45px;
|
|
}
|
|
.stat-num {
|
|
font-size: 56px; /* Explicit size for mobile for clarity */
|
|
}
|
|
}
|
|
|
|
/* Small Phone Scaling (480px) */
|
|
@media (max-width: 480px) {
|
|
.stat-num {
|
|
font-size: 44px;
|
|
}
|
|
.stat-lbl {
|
|
font-size: 11px;
|
|
letter-spacing: 1px;
|
|
}
|
|
}
|
|
</style> |