/* Maryam Umar About page theme.
   The downloaded Webflow stylesheet still owns the reference layout and motion. */

html,
body.about-page,
.about-page .layout,
.about-page .section-7,
.about-page .content-section,
.about-page .section-10,
.about-page .section-9,
.about-page .hero-2-section,
.about-page .hero-2-scrolling-section,
.about-page .gallery-1-section,
.about-page .section-14,
.about-page .section-13,
.about-page .section-13.overflow,
.about-page .section-16,
.about-page .section-17,
.about-page .section-19,
.about-page .fotter,
.about-page .footer-1 {
  background-color: var(--background) !important;
}

body.about-page {
  color: var(--grey-101);
}

.about-page .ivy-xl,
.about-page .clash-xl,
.about-page .ivy-xl-3,
.about-page .clash-xl-3,
.about-page .text-medium,
.about-page .p1,
.about-page .text-large,
.about-page .hero-2-scrolling-text,
.about-page .text-block-40,
.about-page .text-block-42,
.about-page .text-block-43,
.about-page .text-block-pill,
.about-page .ivy-xl-6,
.about-page .clash-xl-6,
.about-page .text-block-13,
.about-page .text-block-33 {
  color: var(--grey-101);
}

.about-page .text-span-15,
.about-page .text-span-20,
.about-page .italic-text-4,
.about-page .italic-text-5,
.about-page .italic-text-6,
.about-page .italic-text-9,
.about-page .asterisk-xl,
.about-page .asterisk-xl._01,
.about-page .asterisk-xl._01a {
  color: var(--light-background);
}

.about-page .image-10,
.about-page .vid-container,
.about-page .cover-image,
.about-page .image-wrapper-certifications,
.about-page .image-wrapper-certifications .image-cover {
  border-radius: 18px;
}

.about-page .image-wrapper-certifications {
  background-color: rgba(216, 180, 254, 0.12);
  overflow: hidden;
}

.about-page .image-wrapper-certifications .image-cover {
  object-fit: contain;
}

/* A horizontal certificate row, pinned while vertical scrolling moves it. */
.about-page .hero-2-section {
  height: auto;
  min-height: 0;
  overflow: clip;
}

.about-page .hero-2-scrolling-section {
  height: 100vh;
  padding-top: 20vh;
  position: sticky;
  top: 0;
}

.about-page .gallery-1-section {
  width: 100%;
  height: var(--certificate-scroll-height, 100svh);
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
  perspective: none;
  overflow: visible;
}

.about-page .certificate-roll-viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.about-page .certificate-roll-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  width: max-content;
  flex: none;
  padding: 0 7vw;
  will-change: transform;
}

.about-page .certificate-roll-slot {
  aspect-ratio: 1600 / 1190;
  width: min(62vw, 900px, 96svh);
  flex: none;
}

.about-page .certificate-roll-card {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 24px;
  background-color: transparent;
  box-shadow: none;
  overflow: hidden;
  transform-origin: 50% 50%;
}

.about-page .certificate-roll-card img {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.about-page .text-block-pill {
  border-color: rgba(216, 180, 254, 0.45);
}

.about-page .btn-parent.ab-btm.bg-yellow {
  color: var(--black);
  background-color: var(--light-background);
}

.about-page .card-whipe.bg-yellow-shade {
  background-color: var(--link);
}

.about-page .footer-1 {
  border-top-color: rgba(216, 180, 254, 0.35);
}

@media (pointer: coarse), (max-width: 767px) {
  html,
  body.about-page,
  .about-page .layout,
  .about-page .layout > *,
  .about-page .section-7,
  .about-page .content-section,
  .about-page .section-10,
  .about-page .section-9,
  .about-page .hero-2-section,
  .about-page .hero-2-scrolling-section,
  .about-page .gallery-1-section,
  .about-page .section-14,
  .about-page .section-13,
  .about-page .section-13.overflow,
  .about-page .section-16,
  .about-page .section-17,
  .about-page .section-19,
  .about-page .fotter,
  .about-page .footer-1 {
    background-color: var(--background) !important;
    background-image: none !important;
  }

  .about-page .certificate-roll-slot {
    width: min(82vw, 96svh);
  }

  .about-page .certificate-roll-card {
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .certificate-roll-list {
    transform: none !important;
  }

  .about-page .certificate-roll-viewport {
    position: relative;
    overflow-x: auto;
  }
}

/* Let text determine section height. The reference's negative margins and
   viewport-height containers were sized for different copy and imagery. */
.about-page .layout > .content-section {
  margin: 0;
  padding: 48px 7vw 80px;
}

.about-page .about-grid-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 5vw;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
}

.about-page .section-7.is-about-hero {
  height: auto;
  padding: 0;
}

.about-page .container-6.is-about-hero {
  width: 100%;
  height: auto;
}

.about-page .image-10 {
  width: 80%;
  height: auto;
  transform: none !important;
}

.about-page .div-block-22 {
  width: 100%;
  margin: 0;
  padding: 0;
}

.about-page .text-medium,
.about-page .text-medium._01 {
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-size: clamp(20px, 1.6vw, 28px);
  line-height: 1.45;
}

.about-page .text-medium,
.about-page .text-block-40,
.about-page .text-block-42,
.about-page .hero-2-text,
.about-page .section-17 [data-w-id] {
  opacity: 1 !important;
  transform: none !important;
}

/* Keep the reference heading movement, but never fade readable text away. */
.about-page .txt-row,
.about-page .txt-row-2,
.about-page .ivy-xl,
.about-page .clash-xl,
.about-page .ivy-xl-3,
.about-page .clash-xl-3,
.about-page .ivy-xl-6,
.about-page .clash-xl-6,
.about-page .section-17,
.about-page .hero-2-scrolling-text {
  opacity: 1 !important;
}

.about-page .section-14 {
  margin: 0;
  padding: 80px 7vw;
}

.about-page .paragraph-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 6vw;
  width: 100%;
}

.about-page .text-block-40 {
  width: 100%;
  margin: 0;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.3;
}

.about-page .text-block-40 span,
.about-page .text-block-40 em {
  font-size: inherit;
}

.about-page .section-16 {
  height: auto;
  margin: 0;
  padding: 60px 7vw 80px;
}

.about-page .div-block-23 {
  width: 100%;
}

.about-page .text-block-42 {
  width: 44%;
  max-width: none;
  font-size: clamp(20px, 1.6vw, 28px);
  line-height: 1.45;
}

.about-page .section-17,
.about-page .section-17._01,
.about-page .section-17._02,
.about-page .section-17._03 {
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 36px 7vw;
  gap: 48px;
  align-items: flex-start;
  justify-content: center;
}

.about-page .section-17._03 {
  padding-top: 64px;
  padding-bottom: 16px;
}

/* Keep the opaque footer below the complete skills list. */
.about-page .section-19 {
  margin-top: 0;
}

.about-page .section-17 .div-block-24 {
  flex-direction: column;
  margin: 0;
}

.about-page .section-17 .text-container {
  width: 100%;
  margin: 0 0 20px;
}

.about-page .section-17 .text-block-43 {
  font-size: 24px;
  line-height: 1.3;
}

.about-page .section-17 .text-block-43._01 {
  font-size: 18px;
}

.about-page .section-17 .text-block-pill {
  font-size: 16px;
  line-height: 1.4;
}

/* Put the certificate introduction before the reel: its old negative overlap
   allowed the opaque gallery background to cover the entire heading/copy. */
.about-page .hero-2-scrolling-section {
  position: relative;
  height: auto;
  min-height: 0;
  padding: 60px 0 48px;
  gap: 32px;
}

.about-page .hero-2-scrolling-section .scrolling-loop-item {
  min-height: 0;
}

.about-page .hero-2-text {
  max-width: 100%;
  padding: 0 7vw;
}

.about-page .hero-2-text .text-large {
  max-width: 680px;
  margin: 0;
  font-size: clamp(24px, 2.5vw, 40px);
  line-height: 1.35;
}

.about-page .section-7.noverflow.is-flip.is-t-less {
  margin-top: 0;
}

.about-page .container-4 .txt-row._01,
.about-page .container-4 .txt-row.is-25._03,
.about-page .container-4 .txt-row.is-25._01 {
  margin-top: 16px;
}

.about-page .container-4 .txt-row.is-25._01 {
  justify-content: flex-end;
  padding-left: 0;
  padding-right: 5vw;
}

.about-page .container-4 .ivy-xl-3._03 {
  margin: 0;
}

.about-page .section-10 {
  margin-top: 0;
}

.about-page .section-17 .flex-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 991px) {
  .about-page .about-grid-column,
  .about-page .paragraph-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .about-page .about-grid-column .image-10 {
    width: min(80%, 420px);
  }

  .about-page .text-block-42 {
    width: 100%;
  }

  .about-page .section-17._02 {
    flex-direction: column;
  }

  .about-page .section-17 .div-block-24 {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .about-page .section-7.is-b-less .clash-xl._5ln {
    margin-top: 0;
  }

  .about-page .section-10 {
    padding: 24px 7vw;
  }

  .about-page .section-10 .txt-row-2,
  .about-page .section-10 .mbm-ex-div-2,
  .about-page .section-10 .note {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .about-page .layout > .content-section,
  .about-page .section-14,
  .about-page .section-16 {
    padding-top: 40px;
    padding-bottom: 56px;
  }

  .about-page .section-17 .flex-wrap {
    width: 100%;
  }

  .about-page .section-17 .text-block-pill {
    margin: 6px;
    padding: 9px 18px;
  }
}