@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=Tiro+Tamil:ital@0;1&display=swap");


/* =====================================================
   ROOT
===================================================== */

:root {

  --aaam-yellow: #ffd000;

  --aaam-yellow-soft: #ffe36c;

  --aaam-dark: #04070b;

  --aaam-navy: #061a3a;

  --aaam-blue: #08275a;

  --aaam-white: #ffffff;

  --aaam-text: #101828;

  --aaam-muted: #667085;

  --aaam-light: #f6f7fa;

  --aaam-line: rgba(10, 20, 40, 0.12);

  --aaam-radius: 28px;

  --aaam-shadow:
    0 30px 80px
    rgba(0, 0, 0, 0.14);

}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body.about-page-root {

  margin: 0;

  overflow-x: hidden;

  background: #ffffff;

  color: var(--aaam-text);

  font-family:
    Manrope,
    Arial,
    sans-serif;

  -webkit-text-size-adjust: 100%;

}


body.about-page-root img {

  display: block;

  max-width: 100%;

}


body.about-page-root a {

  text-decoration: none;

  color: inherit;

}


.about-container {

  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin-inline: auto;

}


/* =====================================================
   HEADER OVER HERO
===================================================== */

.page-about .site-header {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  z-index: 100;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.78),
      rgba(0, 0, 0, 0.30),
      transparent
    );

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);

}


.page-about .site-header .nav {

  min-height: 108px;

}


.page-about .brand-logo img {

  filter:
    drop-shadow(
      0 6px 15px
      rgba(0, 0, 0, 0.35)
    );

}


.page-about .nav-links > a,

.page-about .drop-toggle {

  color: #ffffff;

}


.page-about .nav-links > a {

  text-shadow:
    0 2px 8px
    rgba(0, 0, 0, 0.5);

}


.page-about .nav-links > a.active {

  color: var(--aaam-yellow);

}


.page-about .nav-cta {

  background: var(--aaam-yellow);

  color: #07224f;

  border-color: var(--aaam-yellow);

}


/* =====================================================
   HERO
===================================================== */

.about-hero {

  position: relative;

  min-height: 100svh;

  height: 920px;

  max-height: 1000px;

  overflow: hidden;

  display: flex;

  align-items: center;

  color: #ffffff;

  background: #030914;

}


/* SLIDER */

.about-hero-slider {

  position: absolute;

  inset: 0;

  z-index: 0;

}


.about-hero-slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  transform: scale(1.08);

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  transition:
    opacity 1.1s ease,
    transform 7s ease;

}


.about-hero-slide.active {

  opacity: 1;

  transform: scale(1);

}


/* ==========================================
   YOUR NEW 3 HERO IMAGES
========================================== */

.about-slide-1 {

  background-image:
    url("../generated/about-hero-1.png");

}


.about-slide-2 {

  background-image:
    url("../generated/about-hero-2.png");

}


.about-slide-3 {

  background-image:
    url("../generated/about-hero-3.png");

}


/* HERO OVERLAY */

.about-hero-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  background:

    linear-gradient(
      90deg,
      rgba(1, 8, 20, 0.90) 0%,
      rgba(1, 8, 20, 0.72) 30%,
      rgba(1, 8, 20, 0.32) 62%,
      rgba(1, 8, 20, 0.10) 100%
    ),

    linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.48),
      transparent 48%
    );

}


/* HERO CONTENT */

.about-hero-content {

  position: relative;

  z-index: 3;

  padding-top: 115px;

  padding-bottom: 145px;

}


.about-hero-kicker {

  display: inline-block;

  margin-bottom: 24px;

  color: var(--aaam-yellow);

  font-size: 0.8rem;

  font-weight: 800;

  letter-spacing: 0.20em;

  text-transform: uppercase;

}


.about-hero h1 {

  max-width: 900px;

  margin: 0;

  color: #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      3.5rem,
      6.2vw,
      6.8rem
    );

  font-weight: 700;

  line-height: 0.98;

  letter-spacing: -0.045em;

  text-shadow:
    0 5px 30px
    rgba(0, 0, 0, 0.45);

}


.about-hero h1 em {

  display: block;

  margin-top: 12px;

  color: var(--aaam-yellow);

  font-family:
    "Tiro Tamil",
    Georgia,
    serif;

  font-weight: 400;

  font-style: italic;

  letter-spacing: -0.035em;

}


.about-hero-content > p {

  max-width: 700px;

  margin:
    28px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      0.94
    );

  font-size: 1.05rem;

  font-weight: 600;

  line-height: 1.85;

  text-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.65);

}


/* HERO BUTTONS */

.about-hero-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 15px;

  margin-top: 30px;

}


.about-main-btn,

.about-outline-btn {

  min-height: 58px;

  padding: 0 28px;

  border-radius: 999px;

  display: inline-flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  font-weight: 800;

  transition:
    transform 0.3s ease,
    background 0.3s ease;

}


.about-main-btn {

  background: var(--aaam-yellow);

  color: #071b3d;

  border:
    1px solid
    var(--aaam-yellow);

}


.about-outline-btn {

  color: #ffffff;

  background:
    rgba(
      0,
      0,
      0,
      0.18
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.72
    );

  backdrop-filter:
    blur(10px);

}


.about-main-btn:hover,

.about-outline-btn:hover {

  transform:
    translateY(-4px);

}


/* SLIDER CONTROL */

.about-slider-control {

  position: absolute;

  z-index: 6;

  left: 50%;

  bottom: 102px;

  transform:
    translateX(-50%);

  display: flex;

  align-items: center;

  gap: 10px;

}


.about-slider-dot {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.55
    );

  background:
    rgba(
      0,
      0,
      0,
      0.25
    );

  color: #ffffff;

  font-size: 0.96rem;

  font-weight: 700;

  cursor: pointer;

  backdrop-filter:
    blur(7px);

  transition:
    0.3s ease;

}


.about-slider-dot.active {

  background:
    var(--aaam-yellow);

  color:
    #071d45;

  border-color:
    var(--aaam-yellow);

  transform:
    scale(1.08);

}


/* HERO BOTTOM STRIP */

.about-hero-strip {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 5;

  background:
    var(--aaam-yellow);

  color:
    #08162f;

}


.about-strip-inner {

  width:
    min(
      1200px,
      calc(100% - 40px)
    );

  min-height: 72px;

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

}


.about-strip-inner > div {

  position: relative;

  display: flex;

  justify-content: center;

  flex-direction: column;

  align-items: center;

  padding: 12px 20px;

  text-align: center;

}


.about-strip-inner > div:not(:last-child)::after {

  content: "";

  position: absolute;

  right: 0;

  top: 23%;

  width: 1px;

  height: 54%;

  background:
    rgba(
      0,
      0,
      0,
      0.16
    );

}


.about-strip-inner strong {

  font-size: 0.9rem;

  font-weight: 900;

}


.about-strip-inner span {

  margin-top: 2px;

  font-size: 0.72rem;

  opacity: 0.75;

}


/* =====================================================
   COMMON SECTION
===================================================== */

.about-section {

  padding: 110px 0;

}


.section-label {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 16px;

  color: #d5a900;

  font-size: 0.76rem;

  font-weight: 900;

  letter-spacing: 0.16em;

  text-transform: uppercase;

}


.section-label::before {

  content: "";

  width: 34px;

  height: 2px;

  background:
    var(--aaam-yellow);

}


.section-label.light {

  color:
    var(--aaam-yellow);

}


.about-section h2 {

  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      2.3rem,
      4.8vw,
      4.8rem
    );

  line-height: 1.06;

  letter-spacing: -0.035em;

}


.about-section h2 em {

  color: #d3a700;

  font-weight: 400;

  font-style: italic;

}


.about-section p {

  line-height: 1.82;

}


/* =====================================================
   OUR STORY
===================================================== */

.about-story {

  background: #ffffff;

}


.about-story-grid {

  display: grid;

  grid-template-columns:
    0.9fr 1.1fr;

  align-items: center;

  gap: 70px;

}


.about-story-content h2 {

  color:
    #0a162b;

}


.about-story-content > p {

  color: #586577;

  font-size: 1rem;

}


.about-story-content strong {

  color:
    #111827;

}


.story-signature {

  margin-top: 30px;

  padding-left: 20px;

  border-left:
    4px solid
    var(--aaam-yellow);

}


.story-signature span {

  display: block;

  color:
    #8b6d00;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}


.story-signature strong {

  display: block;

  margin-top: 5px;

  font-family:
    Georgia,
    serif;

  font-size: 1.25rem;

}


/* STORY IMAGE */

.about-story-visual {

  position: relative;

  min-height: 560px;

  overflow: hidden;

  border-radius:
    180px 28px 28px 28px;

  box-shadow:
    var(--aaam-shadow);

}


.about-story-visual img {

  width: 100%;

  height: 560px;

  object-fit: cover;

}


.story-year-card {

  position: absolute;

  left: 24px;

  bottom: 24px;

  min-width: 160px;

  padding: 18px 24px;

  border-radius: 18px;

  background:
    rgba(
      0,
      0,
      0,
      0.75
    );

  color:
    #ffffff;

  backdrop-filter:
    blur(12px);

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );

}


.story-year-card strong {

  display: block;

  color:
    var(--aaam-yellow);

  font-family:
    Georgia,
    serif;

  font-size: 2rem;

}


.story-year-card span {

  font-size: 0.8rem;

}


/* =====================================================
   PURPOSE
===================================================== */

.about-purpose {

  position: relative;

  overflow: hidden;

  color: #ffffff;

  background:

    linear-gradient(
      90deg,
      rgba(3, 12, 28, 0.92),
      rgba(3, 12, 28, 0.72)
    ),

    url("../generated/about-hero-2.jpg")
    center / cover
    no-repeat;

}


.about-section-heading {

  display: grid;

  grid-template-columns:
    1.1fr 0.9fr;

  align-items: end;

  gap: 70px;

  margin-bottom: 50px;

}


.about-section-heading p {

  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.82
    );

}


.purpose-grid {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 18px;

}


.purpose-grid article {

  position: relative;

  min-height: 265px;

  padding: 32px;

  border-radius: 24px;

  background:
    rgba(
      4,
      18,
      42,
      0.70
    );

  border:
    1px solid
    rgba(
      255,
      208,
      0,
      0.30
    );

  backdrop-filter:
    blur(13px);

  transition:
    0.3s ease;

}


.purpose-grid article:hover {

  transform:
    translateY(-8px);

  border-color:
    rgba(
      255,
      208,
      0,
      0.8
    );

}


.purpose-number {

  position: absolute;

  right: 25px;

  top: 22px;

  color:
    rgba(
      255,
      255,
      255,
      0.10
    );

  font-family:
    Georgia,
    serif;

  font-size: 3rem;

}


.purpose-grid h3 {

  margin:
    36px 0 14px;

  color:
    var(--aaam-yellow);

  font-family:
    Georgia,
    serif;

  font-size: 1.45rem;

}


.purpose-grid p {

  color:
    #e6ecf5;

}


/* =====================================================
   JOURNEY
===================================================== */

.about-journey {

  background:
    #f7f7f5;

}


.journey-heading {

  max-width:
    880px;

  margin-bottom:
    50px;

}


.journey-heading h2 {

  color:
    #0a162b;

}


.journey-heading h2 em {

  display: block;

}


.journey-grid {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 18px;

}


.journey-card {

  position: relative;

  min-height: 430px;

  display: flex;

  flex-direction: column;

  padding: 34px;

  overflow: hidden;

  border-radius: 26px;

  background:
    #ffffff;

  border:
    1px solid
    rgba(
      4,
      23,
      50,
      0.08
    );

  box-shadow:
    0 15px 45px
    rgba(
      4,
      23,
      50,
      0.07
    );

  transition:
    transform 0.35s ease;

}


.journey-card:hover {

  transform:
    translateY(-8px);

}


.journey-card.featured {

  color: #ffffff;

  background:

    linear-gradient(
      rgba(3, 17, 42, 0.88),
      rgba(3, 17, 42, 0.90)
    ),

    url("../generated/about-hero-1.jpg")
    center / cover
    no-repeat;

}


.journey-tag {

  color:
    #c49a00;

  font-size:
    0.7rem;

  font-weight:
    900;

  letter-spacing:
    0.13em;

}


.journey-card.featured .journey-tag {

  color:
    var(--aaam-yellow);

}


.journey-card h3 {

  margin:
    20px 0 15px;

  color:
    #09162d;

  font-family:
    Georgia,
    serif;

  font-size:
    2.5rem;

}


.journey-card.featured h3 {

  color:
    var(--aaam-yellow);

}


.journey-card p {

  margin: 0;

  color:
    #667085;

}


.journey-card.featured p {

  color:
    rgba(
      255,
      255,
      255,
      0.87
    );

}


.journey-card.featured strong {

  color:
    #ffffff;

}


.journey-bottom {

  margin-top: auto;

  padding-top: 25px;

  font-size:
    0.76rem;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  color:
    #a27d00;

}


.journey-card.featured .journey-bottom {

  color:
    var(--aaam-yellow);

}


/* =====================================================
   STRENGTH
===================================================== */

.about-strength {

  background:
    #ffffff;

}


.strength-grid {

  display: grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap: 70px;

  align-items: center;

}


.strength-copy h2 {

  color:
    #0a162b;

}


.strength-copy p {

  color:
    #667085;

}


.strength-list {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 12px;

}


.strength-list div {

  min-height: 90px;

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 18px;

  border-radius: 18px;

  border:
    1px solid
    #e5e8ed;

  background:
    #fbfbfc;

  transition:
    0.25s ease;

}


.strength-list div:hover {

  transform:
    translateX(5px);

  border-color:
    var(--aaam-yellow);

}


.strength-list span {

  color:
    #c49a00;

  font-family:
    Georgia,
    serif;

  font-size:
    1.4rem;

}


.strength-list strong {

  color:
    #18253b;

  font-size:
    0.92rem;

}


/* =====================================================
   TEAM
===================================================== */

.about-team-section {

  background:
    #f4f5f7;

}


.team-heading {

  display: grid;

  grid-template-columns:
    1fr 0.8fr;

  gap: 60px;

  align-items: end;

  margin-bottom:
    38px;

}


.team-heading h2 {

  color:
    #0b162b;

}


.team-heading p {

  margin: 0;

  color:
    #667085;

}


.team-photo-grid {

  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap: 16px;

}


.team-photo-grid figure {

  margin: 0;

  overflow: hidden;

  border-radius: 20px;

  background:
    #ffffff;

  box-shadow:
    0 12px 35px
    rgba(
      4,
      23,
      50,
      0.08
    );

}


.team-photo-grid img {

  width:
    100%;

  aspect-ratio:
    4 / 5;

  object-fit:
    cover;

  transition:
    transform
    0.5s ease;

}


.team-photo-grid figure:hover img {

  transform:
    scale(1.05);

}


.team-photo-grid figcaption {

  padding:
    15px;

  text-align:
    center;

  color:
    #182338;

  font-size:
    0.82rem;

  font-weight:
    800;

}


/* =====================================================
   STAFF
===================================================== */

.about-staff-section {

  background:
    #ffffff;

}


.staff-photo-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      1fr
    );

  gap:
    14px;

}


.staff-photo-grid figure {

  margin:
    0;

  overflow:
    hidden;

  border-radius:
    18px;

  background:
    #e7e9ee;

}


.staff-photo-grid img {

  width:
    100%;

  aspect-ratio:
    4 / 5;

  object-fit:
    cover;

  transition:
    transform
    0.45s ease;

}


.staff-photo-grid figure:hover img {

  transform:
    scale(1.05);

}


/* =====================================================
   PROPRIETOR
===================================================== */

.about-proprietor-section {

  background:
    #f6f6f3;

}


.proprietor-grid {

  display:
    grid;

  grid-template-columns:
    1fr 0.72fr;

  align-items:
    center;

  gap:
    80px;

}


.proprietor-content h2 {

  color:
    #0a162b;

}


.proprietor-content p {

  color:
    #667085;

}


.proprietor-content blockquote {

  margin:
    28px 0 0;

  padding:
    18px 0 18px 22px;

  border-left:
    4px solid
    var(--aaam-yellow);

  color:
    #17233a;

  font-family:
    Georgia,
    serif;

  font-size:
    1.35rem;

  font-style:
    italic;

}


.proprietor-photo-wrap {

  position:
    relative;

  max-width:
    470px;

  margin-left:
    auto;

  overflow:
    hidden;

  border-radius:
    30px;

  box-shadow:
    var(--aaam-shadow);

}


.proprietor-photo-wrap img {

  width:
    100%;

  aspect-ratio:
    4 / 5;

  object-fit:
    cover;

}


.proprietor-label {

  position:
    absolute;

  left:
    20px;

  right:
    20px;

  bottom:
    20px;

  padding:
    16px 20px;

  border-radius:
    16px;

  color:
    #ffffff;

  background:
    rgba(
      0,
      0,
      0,
      0.70
    );

  backdrop-filter:
    blur(12px);

}


.proprietor-label strong {

  display:
    block;

  color:
    var(--aaam-yellow);

}


.proprietor-label span {

  font-size:
    0.78rem;

}


/* =====================================================
   CONTACT
===================================================== */

.about-contact-cta {

  position:
    relative;

  padding:
    100px 0;

  color:
    #ffffff;

  background:

    linear-gradient(
      90deg,
      rgba(2, 10, 25, 0.93),
      rgba(2, 10, 25, 0.64)
    ),

    url("../generated/about-hero-3.jpg")
    center / cover
    no-repeat;

}


.contact-top {

  display:
    grid;

  grid-template-columns:
    1fr auto;

  gap:
    40px;

  align-items:
    end;

}


.contact-top h2 {

  margin:
    0;

  max-width:
    700px;

  color:
    #ffffff;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      2.5rem,
      5vw,
      5rem
    );

  line-height:
    1;

}


.contact-top p {

  color:
    rgba(
      255,
      255,
      255,
      0.80
    );

}


.contact-main-btn {

  min-height:
    58px;

  padding:
    0 28px;

  border-radius:
    999px;

  display:
    inline-flex;

  justify-content:
    center;

  align-items:
    center;

  background:
    var(--aaam-yellow);

  color:
    #071a3a;

  font-weight:
    900;

}


.contact-numbers {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    12px;

  margin-top:
    42px;

}


.contact-numbers a {

  padding:
    20px 24px;

  border-radius:
    18px;

  background:
    rgba(
      0,
      0,
      0,
      0.40
    );

  border:
    1px solid
    rgba(
      255,
      208,
      0,
      0.50
    );

  backdrop-filter:
    blur(10px);

  transition:
    0.3s ease;

}


.contact-numbers a:hover {

  transform:
    translateY(-4px);

  background:
    var(--aaam-yellow);

  color:
    #071a3a;

}


.contact-numbers span {

  display:
    block;

  margin-bottom:
    4px;

  font-size:
    0.65rem;

  font-weight:
    900;

  letter-spacing:
    0.12em;

  color:
    var(--aaam-yellow);

}


.contact-numbers a:hover span {

  color:
    #071a3a;

}


.contact-numbers strong {

  font-size:
    1.1rem;

}


/* =====================================================
   WHATSAPP
   KEEP SAME AS YOUR OLD ABOUT PAGE
===================================================== */

.about-wa-float {

  position:
    fixed;

  right:
    max(
      16px,
      env(safe-area-inset-right)
    );

  bottom:
    max(
      16px,
      env(safe-area-inset-bottom)
    );

  left:
    auto;

  z-index:
    45;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  min-height:
    52px;

  padding:
    12px 18px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.35
    );

  border-radius:
    999px;

  background:
    #087e45;

  color:
    #ffffff;

  box-shadow:
    0 8px 28px
    rgba(
      0,
      0,
      0,
      0.25
    );

  font:
    700 14px
    Manrope,
    sans-serif;

}


.about-wa-float svg {

  flex:
    none;

  width:
    26px;

  height:
    26px;

}


.about-wa-float span {

  color:
    inherit;

}


.about-wa-float:focus-visible {

  outline:
    3px solid
    #ffd600;

  outline-offset:
    4px;

}


/*
IMPORTANT:
SOCIAL RAIL CSS IS ALREADY IN
assets/css/social-links.css

DO NOT ADD ANY
.social-rail,
.social-instagram,
.social-facebook,
.social-youtube
CSS HERE.

SO YOUR ORIGINAL DESIGN WILL REMAIN EXACTLY SAME.
*/


/* =====================================================
   TABLET
===================================================== */

@media
(max-width: 980px) {


  .about-hero {

    height:
      850px;

  }


  .about-story-grid,

  .strength-grid,

  .proprietor-grid {

    grid-template-columns:
      1fr;

  }


  .about-section-heading,

  .team-heading {

    grid-template-columns:
      1fr;

    gap:
      20px;

  }


  .purpose-grid,

  .journey-grid {

    grid-template-columns:
      1fr;

  }


  .team-photo-grid {

    grid-template-columns:
      repeat(
        2,
        1fr
      );

  }


  .staff-photo-grid {

    grid-template-columns:
      repeat(
        3,
        1fr
      );

  }


  .about-story-visual {

    min-height:
      480px;

  }


  .about-story-visual img {

    height:
      480px;

  }


  .proprietor-photo-wrap {

    margin-left:
      0;

  }


}



/* =====================================================
   MOBILE
===================================================== */

@media
(max-width: 620px) {


  .about-container {

    width:
      calc(
        100% - 28px
      );

  }


  .about-section {

    padding:
      72px 0;

  }


  /* HERO */

  .about-hero {

    min-height:
      760px;

    height:
      100svh;

  }


  .about-hero-content {

    padding-top:
      125px;

    padding-bottom:
      160px;

  }


  .about-hero-kicker {

    font-size:
      0.62rem;

    letter-spacing:
      0.14em;

  }


  .about-hero h1 {

    max-width:
      100%;

    font-size:
      clamp(
        2.55rem,
        12vw,
        4.1rem
      );

    line-height:
      1.02;

  }


  .about-hero-content > p {

    margin-top:
      20px;

    font-size:
      0.92rem;

    line-height:
      1.7;

  }


  .about-hero-buttons {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .about-main-btn,

  .about-outline-btn {

    min-height:
      52px;

    padding:
      0 22px;

  }


  .about-slider-control {

    bottom:
      105px;

  }


  .about-slider-dot {

    width:
      42px;

    height:
      42px;

  }


  /* MOBILE HERO IMAGE */

  .about-hero-slide {

    background-position:
      center center;

  }


  /* BOTTOM STRIP */

  .about-hero-strip {

    overflow:
      hidden;

  }


  .about-strip-inner {

    width:
      100%;

    min-height:
      70px;

    grid-template-columns:
      repeat(
        2,
        1fr
      );

  }


  .about-strip-inner > div:nth-child(3),

  .about-strip-inner > div:nth-child(4) {

    display:
      none;

  }


  .about-strip-inner > div {

    padding:
      10px;

  }


  .about-strip-inner strong {

    font-size:
      0.78rem;

  }


  .about-strip-inner span {

    font-size:
      0.62rem;

  }


  /* TYPOGRAPHY */

  .about-section h2 {

    font-size:
      clamp(
        2rem,
        9vw,
        3.1rem
      );

  }


  /* STORY */

  .about-story-grid {

    gap:
      38px;

  }


  .about-story-visual {

    min-height:
      390px;

    border-radius:
      90px 22px 22px 22px;

  }


  .about-story-visual img {

    height:
      390px;

  }


  /* STRENGTH */

  .strength-list {

    grid-template-columns:
      1fr;

  }


  /* TEAM */

  .team-photo-grid {

    grid-template-columns:
      repeat(
        2,
        1fr
      );

    gap:
      10px;

  }


  /* STAFF */

  .staff-photo-grid {

    grid-template-columns:
      repeat(
        2,
        1fr
      );

    gap:
      10px;

  }


  /* CONTACT */

  .contact-top {

    grid-template-columns:
      1fr;

  }


  .contact-numbers {

    grid-template-columns:
      1fr;

  }


  .contact-main-btn {

    width:
      max-content;

  }


  /* WHATSAPP */

  .about-wa-float {

    right:
      12px;

    bottom:
      14px;

  }


}



/* =====================================================
   REDUCED MOTION
===================================================== */

@media
(prefers-reduced-motion: reduce) {


  html {

    scroll-behavior:
      auto;

  }


  .about-hero-slide {

    transition:
      opacity
      0.3s ease;

    transform:
      none;

  }


}