/* ╔══════════════════════════════════════════════════════════════╗
   ║  about.css — Styles specific to the ABOUT US page          ║
   ╚══════════════════════════════════════════════════════════════╝ */
/* about.css — About Us page */
.about-snap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.img-ph { width: 100%; padding-bottom: 72%; background: linear-gradient(135deg, var(--green), var(--green2)); border-radius: 20px; position: relative; overflow: hidden; }
.img-ph::after { content: '🌍'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 76px; opacity: .45; }
.img-block { position: relative; }
.img-badge { position: absolute; bottom: -18px; right: -18px; background: var(--gold); border-radius: 14px; padding: 14px 18px; text-align: center; box-shadow: var(--shadow); }
.img-badge b { font-size: 1.4rem; font-weight: 800; display: block; color: var(--dark); }
.img-badge small { font-size: .7rem; font-weight: 700; color: var(--dark); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }
.val { background: #fff; border-radius: 10px; padding: 16px 18px; display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.val i { color: var(--green); }
.transp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.t-item { background: #fff; border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.t-item i { color: var(--green); font-size: 1.2rem; flex-shrink: 0; }
.t-item span { font-size: .85rem; font-weight: 500; }
@media (max-width: 1024px) { .values-grid, .transp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .about-snap, .values-grid, .transp-grid { grid-template-columns: 1fr; } .img-badge { bottom: -10px; right: 10px; } }