/* About page */
body { background: #fbf7ef; }
.a-hero { position: relative; height: 608px; overflow: hidden; background: #fbf7ef; }
.a-hero .bg { position: absolute; left: 50%; top: -138px; width: 1440px; height: 746px; margin-left: -720px; max-width: none; object-fit: cover; }
.a-hero .fade { position: absolute; left: 0; top: 0; width: 557px; height: 608px; background: linear-gradient(to left, rgba(253, 215, 148, 0), #fdd794); }
.a-hero .wrap { height: 608px; }
.a-title { position: absolute; left: 80px; top: 198px; width: 580px; }
.a-title h1 { display: flex; gap: 12px; font: 800 72px/73.8px 'Epilogue', sans-serif; color: #1c1917; }
.a-title h1 em { font-style: normal; color: #db6a00; }
.a-title p { margin-top: 16px; width: 477px; font: 600 32px/41.6px 'Epilogue', sans-serif; color: #1c1917; }
.a-title i { display: block; width: 80px; height: 4px; margin-top: 12px; border-radius: 2px; background: #fff; }
.a-story { position: relative; }
.a-story .wrap { padding: 60px 92px 51px 93px; display: flex; gap: 195px; align-items: flex-start; }
.a-left { width: 813px; display: flex; flex-direction: column; gap: 64px; padding-top: 30px; }
.a-block { display: flex; flex-direction: column; gap: 24px; }
.a-block h2 { font: 800 40px/41px 'Epilogue', sans-serif; color: #1c1917; }
.a-block h2::after { content: ""; display: block; width: 48px; height: 4px; margin-top: 8px; border-radius: 2px; background: #e89c1c; }
.a-block .b { display: flex; flex-direction: column; gap: 20px; }
.a-block p { font: 400 20px/32px 'Epilogue', sans-serif; color: #1c1917; }
.a-side { width: 298px; display: flex; flex-direction: column; gap: 24px; flex: none; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; background: #fff; border: 1px solid #e6dfd5; border-radius: 16px; box-shadow: 0 4px 12px rgba(28, 25, 23, .03); text-align: center; transition: transform .35s var(--ease), box-shadow .35s ease; }
.stat:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(28, 25, 23, .09); }
.stat img { width: 56px; height: 56px; }
.stat b { display: block; font: 800 36px/36.9px 'Epilogue', sans-serif; color: #1c1917; }
.stat span { display: block; margin-top: 4px; font: 500 20px/28px 'Epilogue', sans-serif; color: #57534e; }
.a-quote { position: relative; height: 540px; overflow: hidden; background: #fff; }
.a-quote .bg { position: absolute; left: 50%; top: 0; width: 1440px; height: 540px; margin-left: -720px; max-width: none; object-fit: cover; }
.a-quote .wrap { height: 540px; }
.a-quote i { position: absolute; left: 102px; top: 74px; font: 700 83px/83px 'Lora', serif; color: #a66a17; font-style: normal; }
.a-quote h2 { position: absolute; left: 150px; top: 84px; width: 470px; font: 800 56px/56px 'Inter', sans-serif; color: #3e3a37; }
.a-quote h2 em { font-style: normal; color: #a66a17; }
@media (max-width: 899.98px) {
  .a-hero { height: 420px; }
  .a-hero .wrap { height: 420px; }
  .a-hero .bg { top: 0; height: 420px; width: auto; min-width: 100%; margin-left: 0; left: 0; object-position: 70% 50%; }
  .a-hero .fade { width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(253, 215, 148, .85), rgba(253, 215, 148, 0) 70%); }
  .a-title { left: 24px; top: 124px; width: auto; right: 24px; }
  .a-title h1 { font-size: 44px; line-height: 48px; }
  .a-title p { width: auto; font-size: 20px; line-height: 27px; }
  .a-story .wrap { flex-direction: column; gap: 32px; padding: 40px 24px; }
  .a-left { width: 100%; padding-top: 0; gap: 40px; }
  .a-block h2 { font-size: 30px; line-height: 34px; }
  .a-block p { font-size: 16px; line-height: 26px; }
  .a-side { width: 100%; }
  .a-quote { height: 360px; }
  .a-quote .wrap { height: 360px; }
  .a-quote .bg { width: auto; min-width: 100%; height: 360px; left: 0; margin-left: 0; object-position: 75% 50%; }
  .a-quote i { left: 20px; top: 40px; font-size: 50px; }
  .a-quote h2 { left: 54px; top: 50px; width: 240px; font-size: 30px; line-height: 34px; }
}