body.about-page { background: #fffaf7; color: #302724; }
.about-intro-shell, .about-page .abous-us-section > .container-fluid { max-width: 1380px; margin: auto; padding-inline: 32px; }
.about-breadcrumb { display: flex; align-items: center; gap: 12px; padding: 26px 0; color: #88766a; font-size: 12px; }
.about-breadcrumb a { color: inherit; text-decoration: none; }
.about-breadcrumb i { font-size: 9px; }
.about-intro { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 44px 48px; background: #c94b2b; color: #fff; border-radius: 22px; }
.about-intro span { font-size: 10px; letter-spacing: 2px; color: #ffdbc9; }
.about-intro h1 { font-size: clamp(34px, 4.5vw, 58px); line-height: 1.1; letter-spacing: -1.5px; margin: 16px 0; }
.about-intro p { font-size: 13px; line-height: 1.9; max-width: 420px; color: #ffdbc9; margin: 0; }
.about-intro > a { display: inline-flex; align-items: center; gap: 20px; padding: 14px 0; color: #fff; text-decoration: none; border-bottom: 1px solid #ffdbc9; flex-shrink: 0; font-size: 12px; }
.about-section-links { display: flex; gap: 12px; overflow-x: auto; padding: 24px 3px; }
.about-section-links a { flex-shrink: 0; background: #fff; border: 1px solid #efdfd4; border-radius: 9px; padding: 12px 20px; color: #79695f; text-decoration: none; font-size: 12px; }
.about-section-links a:hover { background: #fff0e8; color: #b94022; border-color: #e75d39; }
.about-page main :is(a, button):focus-visible { outline: 2px solid #b94022; outline-offset: 4px; }
.about-page .abous-us-section { padding: 16px 0 64px; }
.about-page .about-us [id] { scroll-margin-top: 120px; }
.about-page .about-us .title { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.3; letter-spacing: -.6px; color: #302724; text-align: left; margin-bottom: 24px; }
.about-page .about-us .title-border { border: 0; padding-bottom: 0; }
.about-page .about-us .title-border::after { display: none; }
.about-page .about-us .sub-title { font-size: 21px; line-height: 1.5; color: #b94022; margin-bottom: 16px; }
.about-page .about-us :is(.details, .details-sm) { font-size: 14px; line-height: 1.95; color: #79695f; text-align: left; }
.about-page .about-us .row { row-gap: 24px; }
.about-page .our-story { background: #fff; border: 1px solid #efdfd4; border-radius: 20px; padding: 36px; }
.about-page .our-story > .row { align-items: center; }
.about-page .owner-img { position: relative; border-radius: 16px; overflow: hidden; background: #f5eee8; }
.about-page .owner-img > img { width: 100%; max-height: 440px; object-fit: contain; }
.about-page .owner-img-overlay { position: static; background: #f5eee8; padding: 20px 24px; }
.about-page .owner-img-overlay .name { color: #302724; font-size: 20px; }
.about-page .owner-img-overlay .designation { color: #88766a; font-size: 12px; margin: 6px 0 0; }
.about-page .about-story-content > .all { width: 100%; border-bottom: 1px solid #efdfd4; margin-top: 0 !important; padding-block: 42px !important; }
.about-page .about-us .gray-box-div { padding: 24px; border-radius: 14px; border: 1px solid #efdfd4; background: #f5eee8; }
.about-page .gray-box-div p:last-child { margin-bottom: 0; }
.about-page .yearly-achievement-details { min-width: 0; flex: 1; }
.about-page .yearly-achievement-details > .title { color: #a64b30; font-size: 13px; letter-spacing: 1px; }
.about-page .bullet-line-design .bullet { background: #e75d39; }
.about-page .bullet-line-design .line { background: #efdfd4; }
.about-page .about-us .bg-box { background: #f5eee8; border: 1px solid #efdfd4; border-radius: 14px; padding: 20px; overflow: hidden; }
.about-page .about-us .bg-box img { width: 100%; height: auto; max-height: 340px; object-fit: contain; }
.about-page .about-story-content img { max-width: 100%; border-radius: 10px; }
.about-page .about-story-content .our-platform { align-items: center; margin-bottom: 24px; }
.about-page .about-us a { overflow-wrap: anywhere; }
@media (max-width: 850px) {
    .about-intro { padding: 32px; align-items: flex-start; flex-direction: column; }
    .about-page .our-story { padding: 26px; }
}
@media (max-width: 575.98px) {
    .about-intro-shell, .about-page .abous-us-section > .container-fluid { padding-inline: 16px; }
    .about-intro { padding: 28px 24px; border-radius: 16px; }
    .about-page .our-story { padding: 22px; }
    .about-page .about-us :is(.details, .details-sm) { font-size: 13px; }
    .about-page .about-us .gray-box-div { padding: 18px; }
    .about-page .about-us .sub-title { font-size: 19px; }
    .about-page .about-story-content > .all { padding-block: 30px !important; }
}
.about-page .about-us .owner-img img { height: auto; border-radius: 0; }
.about-page .about-us .owner-img .owner-img-overlay { position: static; border-radius: 0; background: #f5eee8; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 20px 24px; }
.about-page .about-us .owner-img .owner-img-overlay .name { color: #302724; font-size: 20px; padding: 0; }
.about-page .about-us .owner-img .owner-img-overlay .designation { color: #88766a; font-size: 12px; padding: 6px 0 0; }
/* About cover: large typography beside an orange graphic panel. */
.about-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0 40px; padding: 24px 0 36px; background: transparent; color: #302724; border-radius: 0; border-bottom: 1px solid #e6d8cf; align-items: center; }
.about-intro-copy { grid-column: 1; grid-row: 1; }
.about-intro-copy > span { color: #b94022; }
.about-intro h1 { font-size: clamp(42px, 5.5vw, 74px); letter-spacing: -2px; }
.about-intro p { color: #79695f; }
.about-intro > .about-intro-cta { grid-column: 1; grid-row: 2; justify-self: start; color: #b94022; border-color: #b94022; margin-top: 20px; }
.about-intro-art { grid-column: 2; grid-row: 1 / 3; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 12px; background: #c94b2b; padding: 38px; min-height: 340px; position: relative; overflow: hidden; }
.about-intro-art span { font-size: clamp(20px, 2.6vw, 36px); letter-spacing: -1px; line-height: 1.2; color: #fff; }
.about-intro-art span:nth-child(2) { padding-left: 28px; color: #ffdbc9; }
.about-intro-art > i { align-self: flex-end; font-size: 76px; color: #ffdbc9; line-height: 1; }
@media (max-width: 767.98px) {
    .about-intro { grid-template-columns: 1fr; gap: 20px; }
    .about-intro-copy { grid-column: 1; grid-row: 1; }
    .about-intro > .about-intro-cta { grid-row: 2; margin-top: 0; }
    .about-intro-art { grid-column: 1; grid-row: 3; min-height: 240px; padding: 28px; }
    .about-intro-art span { font-size: 30px; }
    .about-intro-art > i { position: absolute; right: 24px; bottom: 24px; font-size: 56px; }
}
/* Brand onboarding image showcases. */
.about-page .onboard-showcase { margin: 28px 0 24px; padding: 12px; background: #fff; border: 1px solid #e6d8cf; border-radius: 18px; }
.about-page .onboard-image { background: #f5eee8; border-radius: 10px; overflow: hidden; }
.about-page .about-story-content .onboard-image img { display: block; width: 100%; height: auto; border-radius: 0; }
.about-page .onboard-caption { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 20px 12px; }
.about-page .onboard-caption > div:first-child { border-left: 3px solid #e75d39; padding-left: 16px; }
.about-page .onboard-caption span { display: block; font-size: 9px; letter-spacing: 2px; color: #a64b30; margin-bottom: 6px; }
.about-page .onboard-caption strong { font-size: 26px; line-height: 1.2; letter-spacing: -.5px; color: #302724; }
.about-page .onboard-logo { display: grid; place-items: center; padding: 14px 22px; border: 1px solid #efdfd4; border-radius: 10px; background: #f5eee8; }
.about-page .about-story-content .onboard-logo img { display: block; width: 110px; max-height: 46px; height: auto; object-fit: contain; border-radius: 0; }
.about-page .brand-onboard-item + .brand-onboard-item { margin-top: 24px; }
@media (max-width: 575.98px) {
    .about-page .onboard-showcase { padding: 8px; border-radius: 12px; margin-top: 20px; }
    .about-page .onboard-caption { padding: 18px 6px 10px; gap: 12px; }
    .about-page .onboard-caption strong { font-size: 22px; }
    .about-page .onboard-caption span { font-size: 8px; letter-spacing: 1px; }
    .about-page .onboard-logo { padding: 10px; }
    .about-page .about-story-content .onboard-logo img { width: 76px; max-height: 36px; }
}
