/* =========================================================
   GHANIA GAWAI
   About Responsive
   /tentang/
   ========================================================= */


/* =========================================================
   01. SMALL DESKTOP
   <= 1100px
   ========================================================= */

@media (max-width: 1100px) {

  .about-hero__layout {
    gap: 48px;
  }

  .about-positioning__layout {
    gap: 48px;
  }

  .about-story__layout {
    gap: 48px;
  }

  .about-review__box {
    grid-template-columns:
      minmax(0, 1fr)
      300px;

    gap: 36px;
  }

}


/* =========================================================
   02. TABLET
   <= 980px
   ========================================================= */

@media (max-width: 980px) {

  /* Hero */

  .about-hero {
    padding:
      56px
      0
      58px;
  }

  .about-hero__layout {
    grid-template-columns: 1fr;

    gap: 38px;
  }

  .about-hero__content {
    max-width: 680px;
  }

  .about-hero__visual {
    min-height: auto;

    justify-content: start;
  }

  .about-hero__visual-card {
    width: min(100%, 440px);
  }


  /* Positioning */

  .about-positioning {
    padding:
      70px
      0;
  }

  .about-positioning__layout {
    grid-template-columns: 1fr;

    gap: 34px;
  }

  .about-positioning__intro {
    max-width: 620px;
  }


  /* Story */

  .about-story {
    padding:
      72px
      0;
  }

  .about-story__layout {
    grid-template-columns: 1fr;

    gap: 34px;
  }

  .about-story__content {
    max-width: 680px;
  }

  .about-story__panel {
    max-width: 680px;
  }


  /* Values */

  .about-values {
    padding:
      70px
      0;
  }

  .about-values__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  /* Review */

  .about-review {
    padding:
      70px
      0;
  }

  .about-review__box {
    grid-template-columns: 1fr;

    gap: 28px;
  }

  .about-review__steps {
    max-width: 640px;
  }


  /* Trust */

  .about-trust {
    padding:
      68px
      0;
  }


  /* Final */

  .about-final-cta {
    padding:
      68px
      0
      76px;
  }

}


/* =========================================================
   03. SMALL TABLET
   <= 768px
   ========================================================= */

@media (max-width: 768px) {

  /* Hero */

  .about-hero {
    padding:
      48px
      0
      50px;
  }

  .about-hero__title {
    max-width: 620px;

    font-size: 42px;
  }

  .about-hero__description {
    max-width: 580px;

    font-size: 13px;
  }

  .about-hero__visual-card {
    padding: 26px;

    border-radius: 24px;
  }


  /* Positioning */

  .about-positioning {
    padding:
      62px
      0;
  }

  .about-positioning__cards {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  /* Story */

  .about-story {
    padding:
      64px
      0;
  }


  /* Values */

  .about-values {
    padding:
      62px
      0;
  }


  /* Review */

  .about-review {
    padding:
      62px
      0;
  }

  .about-review__box {
    padding: 36px;
  }


  /* Trust */

  .about-trust {
    padding:
      60px
      0;
  }

  .about-trust__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  /* Final CTA */

  .about-final-cta {
    padding:
      60px
      0
      72px;
  }

  .about-final-cta__box {
    padding: 40px 30px;
  }

  .about-final-cta__title {
    font-size: 31px;
  }

}


/* =========================================================
   04. MOBILE
   <= 640px
   ========================================================= */

@media (max-width: 640px) {

  /* =======================================================
     PAGE
     ======================================================= */

  .about-page {
    background:
      linear-gradient(
        180deg,
        #f7fbfe 0%,
        #ffffff 250px
      );
  }


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

  .about-hero {
    padding:
      34px
      0
      42px;
  }

  .about-hero::before {
    top: -220px;
    right: -220px;

    width: 410px;
    height: 410px;
  }

  .about-hero::after {
    left: -210px;
    bottom: -250px;

    width: 360px;
    height: 360px;
  }

  .about-hero__layout {
    gap: 26px;
  }

  .about-hero__eyebrow {
    margin-bottom: 10px;

    font-size: 8px;
  }

  .about-hero__title {
    max-width: 350px;

    margin-bottom: 12px;

    font-size: 32px;

    line-height: 1.07;

    letter-spacing: -0.04em;
  }

  .about-hero__description {
    max-width: 330px;

    margin-bottom: 18px;

    font-size: 11px;

    line-height: 1.7;
  }

  .about-hero__actions {
    align-items: stretch;

    flex-direction: column;
  }

  .about-hero__actions .btn {
    width: 100%;
  }


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

  .about-hero__visual {
    width: 100%;
  }

  .about-hero__visual-card {
    width: 100%;

    padding: 21px;

    border-radius: 18px;

    box-shadow:
      0 18px 46px
      rgba(15, 23, 42, 0.12);
  }

  .about-hero__visual-logo {
    width: 120px;

    margin-bottom: 38px;
  }

  .about-hero__visual-label {
    font-size: 7px;
  }

  .about-hero__visual-title {
    max-width: 260px;

    margin-bottom: 8px;

    font-size: 22px;
  }

  .about-hero__visual-description {
    max-width: 280px;

    font-size: 9px;
  }


  /* =======================================================
     POSITIONING
     ======================================================= */

  .about-positioning {
    padding:
      52px
      0;
  }

  .about-positioning__layout {
    gap: 26px;
  }

  .about-positioning__cards {
    grid-template-columns: 1fr;

    gap: 9px;
  }

  .about-position-card {
    padding: 17px;

    border-radius: 13px;
  }

  .about-position-card__icon {
    width: 38px;
    height: 38px;

    margin-bottom: 11px;

    border-radius: 10px;
  }

  .about-position-card__title {
    font-size: 13px;
  }

  .about-position-card__description {
    font-size: 10px;
  }


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

  .about-story {
    padding:
      52px
      0;
  }

  .about-story__layout {
    gap: 24px;
  }

  .about-story__text {
    gap: 12px;
  }

  .about-story__text p {
    font-size: 11px;
  }

  .about-story__panel {
    padding: 18px;

    border-radius: 14px;
  }

  .about-story__panel-label {
    font-size: 7px;
  }

  .about-story__panel-title {
    margin-bottom: 12px;

    font-size: 20px;
  }

  .about-story__panel-list {
    gap: 9px;
  }

  .about-story__panel-list li {
    font-size: 10px;
  }


  /* =======================================================
     VALUES
     ======================================================= */

  .about-values {
    padding:
      52px
      0;
  }

  .about-values__header {
    margin-bottom: 24px;
  }

  .about-values__grid {
    grid-template-columns: 1fr;

    gap: 9px;
  }

  .about-value {
    padding: 17px;

    border-radius: 13px;
  }

  .about-value__number {
    margin-bottom: 18px;

    font-size: 8px;
  }

  .about-value__title {
    font-size: 13px;
  }

  .about-value__description {
    font-size: 9px;
  }


  /* =======================================================
     REVIEW
     ======================================================= */

  .about-review {
    padding:
      52px
      0;
  }

  .about-review__box {
    padding: 24px;

    grid-template-columns: 1fr;

    gap: 20px;

    border-radius: 18px;
  }

  .about-review__box::after {
    right: -180px;
    bottom: -240px;
  }

  .about-review__eyebrow {
    font-size: 8px;
  }

  .about-review__title {
    margin-bottom: 10px;

    font-size: 23px;
  }

  .about-review__description {
    margin-bottom: 17px;

    font-size: 10px;
  }

  .about-review__steps {
    gap: 8px;
  }

  .about-review-step {
    padding: 13px;

    grid-template-columns:
      31px
      minmax(0, 1fr);

    gap: 9px;

    border-radius: 11px;
  }

  .about-review-step__number {
    width: 31px;
    height: 31px;

    border-radius: 8px;

    font-size: 8px;
  }

  .about-review-step__title {
    font-size: 10px;
  }

  .about-review-step__description {
    font-size: 8px;
  }


  /* =======================================================
     TRUST
     ======================================================= */

  .about-trust {
    padding:
      52px
      0;
  }

  .about-trust__header {
    margin-bottom: 24px;
  }

  .about-trust__grid {
    grid-template-columns: 1fr;

    gap: 9px;
  }

  .about-trust-card {
    padding: 17px;

    border-radius: 13px;
  }

  .about-trust-card__icon {
    width: 38px;
    height: 38px;

    margin-bottom: 11px;

    border-radius: 10px;
  }

  .about-trust-card__title {
    font-size: 13px;
  }

  .about-trust-card__description {
    font-size: 9px;
  }


  /* =======================================================
     FINAL CTA
     ======================================================= */

  .about-final-cta {
    padding:
      52px
      0
      58px;
  }

  .about-final-cta__box {
    padding:
      30px
      18px;

    border-radius: 18px;
  }

  .about-final-cta__eyebrow {
    font-size: 7px;
  }

  .about-final-cta__title {
    max-width: 320px;

    margin:
      0
      auto
      9px;

    font-size: 25px;
  }

  .about-final-cta__description {
    max-width: 310px;

    margin-bottom: 18px;

    font-size: 10px;
  }

  .about-final-cta__actions {
    flex-direction: column;

    align-items: stretch;
  }

  .about-final-cta__actions .btn {
    width: 100%;
  }

}


/* =========================================================
   05. SMALL MOBILE
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

  .about-hero {
    padding:
      30px
      0
      38px;
  }

  .about-hero__title {
    max-width: 310px;

    font-size: 30px;
  }


  .about-hero__visual-card {
    padding: 19px;
  }


  .about-story__panel {
    padding: 16px;
  }


  .about-review__box {
    padding: 21px;
  }


  .about-final-cta__box {
    padding:
      27px
      16px;
  }

}


/* =========================================================
   06. EXTRA SMALL
   <= 380px
   ========================================================= */

@media (max-width: 380px) {

  .about-hero__title {
    max-width: 285px;

    font-size: 28px;
  }

  .about-hero__visual-title {
    font-size: 20px;
  }

  .about-story__panel-title {
    font-size: 19px;
  }

  .about-review__title {
    font-size: 21px;
  }

  .about-final-cta__title {
    font-size: 23px;
  }

}


/* =========================================================
   07. TOUCH DEVICES
   ========================================================= */

@media (hover: none) {

  .about-position-card:hover,
  .about-value:hover,
  .about-trust-card:hover {
    transform: none;

    box-shadow:
      var(--shadow-xs);
  }

}


/* =========================================================
   08. REDUCED MOTION
   ========================================================= */

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

  .about-position-card,
  .about-value,
  .about-trust-card {
    transition: none;
  }

}