/* =========================================================
   MINUVIA QUALIFICATIONS PAGE

   IMPORTANT:
   THIS FILE DOES NOT STYLE THE MAIN NAVIGATION.

   Navigation comes directly from styles.css,
   exactly as it does on index.html.
========================================================= */


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

:root {

  --subjects-navy: #0B1F3C;

  --subjects-blue: #2F6FF4;

  --subjects-blue-dark: #1D5AE0;

  --subjects-text: #102344;

  --subjects-muted: #6C7B94;

  --subjects-line: #D8E3F2;

  --subjects-bg: #F4F7FC;

  --subjects-white: #FFFFFF;

}


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

.qualification-page {

  margin: 0;

  padding: 0;

  background: var(--subjects-bg);

}


.qualification-offer {

  position: relative;

  min-height:
    calc(100vh - 76px);

  overflow: hidden;

  padding:
    30px 0 55px;

  background:

    linear-gradient(
      135deg,
      #FAFCFF 0%,
      #F4F7FC 55%,
      #EFF5FD 100%
    );

}


/* =========================================================
   QUALIFICATION PAGE CONTAINER
========================================================= */

.qualification-page-container {

  position: relative;

  z-index: 3;

  width:
    min(
      1320px,
      calc(100% - 42px)
    );

  margin:
    0 auto;

}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.subjects-circle {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

}


.subjects-circle-left {

  width: 540px;

  height: 540px;

  left: -310px;

  bottom: -340px;

  background:
    rgba(
      190,
      216,
      250,
      0.23
    );

}


.subjects-circle-right {

  width: 600px;

  height: 600px;

  right: -350px;

  bottom: -380px;

  background:
    rgba(
      190,
      216,
      250,
      0.25
    );

}


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

.qualification-heading {

  max-width: 850px;

  margin:
    0 auto;

  text-align: center;

}


.qualification-heading-pill {

  min-height: 31px;

  padding:
    0 15px;

  border:
    1px solid
    #C7D8F5;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--subjects-blue);

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

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.2px;

}


.qualification-heading h1 {

  margin:
    17px 0 10px;

  color:
    var(--subjects-navy);

  font-size:
    clamp(
      42px,
      4.4vw,
      61px
    );

  font-weight:
    800;

  line-height:
    1.04;

  letter-spacing:
    -2.7px;

}


.qualification-heading p {

  margin:
    0 auto;

  color:
    var(--subjects-muted);

  font-size:
    16px;

  line-height:
    1.65;

}


/* =========================================================
   TIMELINE
========================================================= */

.qualification-timeline {

  position:
    relative;

  width:
    calc(100% - 80px);

  max-width:
    1125px;

  height:
    82px;

  margin:
    18px auto -2px;

}


.qualification-timeline-line {

  position:
    absolute;

  top:
    41px;

  left:
    5%;

  right:
    5%;

  height:
    2px;

  background:
    #CDDCFA;

}


.qualification-timeline-node {

  position:
    absolute;

  top:
    18px;

  z-index:
    3;

}


.phase-one-node {

  left:
    4.5%;

}


.phase-two-node {

  left:
    50%;

  transform:
    translateX(-50%);

}


.phase-three-node {

  right:
    4.5%;

}


.timeline-node-circle {

  width:
    48px;

  height:
    48px;

  border:
    1px solid
    #93B5FD;

  border-radius:
    50%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--subjects-blue);

  background:
    #F5F8FF;

  box-shadow:
    0 8px 20px
    rgba(
      30,
      82,
      190,
      0.08
    );

}


.timeline-node-circle svg {

  width:
    23px;

  height:
    23px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


.timeline-node-active {

  color:
    #FFFFFF;

  border-color:
    var(--subjects-blue);

  background:
    var(--subjects-blue);

}


.future-circle {

  width:
    21px;

  height:
    21px;

  border:
    2px dotted
    var(--subjects-blue);

  border-radius:
    50%;

}


/* =========================================================
   PHASE GRID
========================================================= */

.qualification-phase-grid {

  display:
    grid;

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

  gap:
    28px;

  align-items:
    stretch;

}


/* =========================================================
   PHASE BASE
========================================================= */

.qualification-phase {

  position:
    relative;

  min-height:
    455px;

  padding:
    25px 23px 22px;

  border-radius:
    19px;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

}


.phase-pill {

  width:
    fit-content;

  min-height:
    28px;

  margin:
    0 auto;

  padding:
    0 14px;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1;

}


.qualification-phase h2 {

  margin:
    10px 0 7px;

  text-align:
    center;

  font-size:
    clamp(
      26px,
      2vw,
      32px
    );

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    -1.1px;

}


.phase-summary {

  max-width:
    310px;

  min-height:
    48px;

  margin:
    0 auto 21px;

  text-align:
    center;

  font-size:
    13px;

  line-height:
    1.5;

}


/* =========================================================
   PHASE ONE
========================================================= */

.phase-one {

  color:
    #FFFFFF;

  background:

    linear-gradient(
      145deg,
      #347BFF 0%,
      #2B68EF 100%
    );

  box-shadow:

    0 22px 45px
    rgba(
      41,
      104,
      239,
      0.17
    );

}


.phase-one .phase-pill {

  color:
    #FFFFFF;

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

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

}


.phase-one .phase-summary {

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

}


/* =========================================================
   PHASE TWO
========================================================= */

.phase-two {

  color:
    var(--subjects-navy);

  border:
    1px solid
    #D9E4F4;

  background:

    linear-gradient(
      145deg,
      #EEF3FF 0%,
      #E4ECFA 100%
    );

}


.phase-two .phase-pill {

  color:
    var(--subjects-blue);

  border:
    1px solid
    #ABC4FA;

  background:
    rgba(
      255,
      255,
      255,
      0.55
    );

}


.phase-two .phase-summary {

  color:
    #536984;

}


/* =========================================================
   PHASE THREE
========================================================= */

.phase-three {

  color:
    var(--subjects-navy);

  border:
    2px dashed
    #82A9FF;

  background:
    rgba(
      255,
      255,
      255,
      0.38
    );

}


.phase-three .phase-pill {

  color:
    var(--subjects-blue);

  border:
    1px solid
    #B3C9FA;

  background:
    rgba(
      255,
      255,
      255,
      0.72
    );

}


.phase-three .phase-summary {

  color:
    #536984;

}


/* =========================================================
   QUALIFICATION GRIDS
========================================================= */

.phase-qualification-grid {

  margin-top:
    auto;

  display:
    grid;

  gap:
    12px;

}


.phase-one-qualifications {

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

}


.phase-two-qualifications {

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

}


.phase-three-qualifications {

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

}


/* =========================================================
   INDIVIDUAL QUALIFICATION SQUARE
========================================================= */

.qualification-square {

  min-width:
    0;

  min-height:
    128px;

  padding:
    13px 9px;

  border:
    1px solid
    #DEE7F2;

  border-radius:
    13px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  color:
    var(--subjects-navy);

  background:
    #FFFFFF;

  box-shadow:
    0 8px 18px
    rgba(
      11,
      31,
      60,
      0.045
    );

  transition:

    transform
    0.2s
    ease,

    box-shadow
    0.2s
    ease;

}


.qualification-square:hover {

  transform:
    translateY(
      -4px
    );

  box-shadow:
    0 14px 26px
    rgba(
      11,
      31,
      60,
      0.09
    );

}


.qualification-square-icon {

  width:
    42px;

  height:
    42px;

  margin-bottom:
    8px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--subjects-blue);

}


.qualification-square-icon svg {

  width:
    31px;

  height:
    31px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


.qualification-square strong {

  color:
    var(--subjects-navy);

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.35;

}


/* =========================================================
   PHASE THREE CARDS
========================================================= */

.phase-three .qualification-square {

  min-height:
    135px;

  padding:
    12px 5px;

}


.phase-three .qualification-square strong {

  font-size:
    12px;

}


/* =========================================================
   RELEASE NOTE
========================================================= */

.qualification-release-note {

  margin-top:
    24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    #7A899F;

  font-size:
    12px;

}


.qualification-release-note svg {

  width:
    18px;

  height:
    18px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


/* =========================================================
   SUBJECT PAGE FOOTER
========================================================= */

.subjects-page-footer {

  padding:
    45px 0;

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

  background:
    #08182F;

}


.subjects-footer-inner {

  display:
    grid;

  grid-template-columns:
    1fr auto auto;

  align-items:
    center;

  gap:
    45px;

}


.subjects-footer-brand img {

  width:
    135px;

  height:
    auto;

  display:
    block;

  filter:
    none;

  transform:
    translateY(
      9px
    );

}


.subjects-footer-brand p {

  max-width:
    330px;

  margin:
    16px 0 0;

  font-size:
    12px;

}


.subjects-footer-links {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    20px;

  font-size:
    12px;

}


.subjects-footer-links a {

  color:
    inherit;

  text-decoration:
    none;

}


.subjects-footer-links a:hover {

  color:
    #FFFFFF;

}


.subjects-footer-copyright {

  font-size:
    12px;

}


/* =========================================================
   SMALLER DESKTOP
========================================================= */

@media (
  max-width: 1180px
) {

  .qualification-page-container {

    width:
      min(
        1060px,
        calc(
          100% - 36px
        )
      );

  }


  .qualification-phase-grid {

    gap:
      18px;

  }


  .qualification-phase {

    padding:
      23px 17px 18px;

  }


  .qualification-square {

    min-height:
      120px;

  }

}


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

@media (
  max-width: 920px
) {

  .qualification-offer {

    padding:
      52px 0 65px;

  }


  .qualification-timeline {

    display:
      none;

  }


  .qualification-phase-grid {

    max-width:
      720px;

    margin:
      40px auto 0;

    grid-template-columns:
      1fr;

    gap:
      22px;

  }


  .qualification-phase {

    min-height:
      auto;

    padding:
      28px;

  }


  .phase-one-qualifications,
  .phase-two-qualifications {

    width:
      100%;

    max-width:
      520px;

    margin:
      auto auto 0;

  }


  .phase-three-qualifications {

    width:
      100%;

    max-width:
      650px;

    margin:
      auto auto 0;

  }


  .subjects-footer-inner {

    grid-template-columns:
      1fr;

  }

}


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

@media (
  max-width: 620px
) {

  .qualification-page-container {

    width:
      calc(
        100% - 26px
      );

  }


  .qualification-offer {

    padding:
      43px 0 55px;

  }


  .qualification-heading h1 {

    font-size:
      39px;

    letter-spacing:
      -1.8px;

  }


  .qualification-heading p {

    font-size:
      14px;

  }


  .qualification-phase-grid {

    margin-top:
      32px;

  }


  .qualification-phase {

    padding:
      24px 17px 18px;

  }


  .qualification-phase h2 {

    font-size:
      27px;

  }


  .phase-one-qualifications,
  .phase-two-qualifications {

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

  }


  .phase-three-qualifications {

    grid-template-columns:
      1fr;

  }


  .qualification-square {

    min-height:
      118px;

  }


  .qualification-square strong {

    font-size:
      12px;

  }


  .qualification-release-note {

    padding:
      0 15px;

    text-align:
      center;

  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
  max-width: 420px
) {

  .phase-one-qualifications,
  .phase-two-qualifications {

    grid-template-columns:
      1fr;

  }


  .qualification-square {

    min-height:
      108px;

  }

}

.qualification-heading h1 span {
  color: #246CF5;
}




/* =========================================================
   QUALIFICATIONS PAGE - HEADING POSITION
========================================================= */

.qualification-offer {
  padding-top: 55px;
}

.qualification-heading {
  margin-top: 0;
}

.qualification-heading h1 {
  margin-top: 0;
}


/* MOBILE */

@media (max-width: 650px) {

  .qualification-offer {
    padding-top: 38px;
  }

}