@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "iCielNeuePlak";
  src: url("../../fonts/iCielNeuePlak-BlackWide.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "iCielNeuePlak";
  src: url("../../fonts/iCielNeuePlak-BoldWide.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "iCielNeuePlak";
  src: url("../../fonts/iCielNeuePlak-ExtraLightWide.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "iCielNeuePlak";
  src: url("../../fonts/iCielNeuePlak-LightWide.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "iCielNeuePlak";
  src: url("../../fonts/iCielNeuePlak-SemiboldWide.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "iCielNeuePlak";
  src: url("../../fonts/iCielNeuePlak-ThinWide.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "iCielNeuePlak";
  src: url("../../fonts/iCielNeuePlak-Wide.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "SVN-Whimsy";
  src: url("../../fonts/SVN-Whimsy/SVN-Whimsy.woff2") format("woff2"), url("../../fonts/SVN-Whimsy/SVN-Whimsy.woff") format("woff"), url("../../fonts/SVN-Whimsy/SVN-Whimsy.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* gurmukhi */
@font-face {
  font-family: "Braah One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/braahone/v6/KFOlCnWUpt6LsxxxiylfJxc4EsA.woff2) format("woff2");
  unicode-range: U+0951-0952, U+0964-0965, U+0A01-0A76, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839;
}
/* vietnamese */
@font-face {
  font-family: "Braah One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/braahone/v6/KFOlCnWUpt6LsxxxiylfCxc4EsA.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Braah One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/braahone/v6/KFOlCnWUpt6LsxxxiylfChc4EsA.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Braah One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/braahone/v6/KFOlCnWUpt6LsxxxiylfBBc4.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --font-primary: "Unbounded";
  --font-secondary: "iCielNeuePlak";
  --font-third: "SVN-Whimsy";
  --color-primary: #2a2933;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-blue: #2226f7;
  --color-orange: #ff4b33;
  --color-yellow: #ffd628;
}

.font-unbounded {
  font-family: var(--font-primary);
}

.font-icelneueplak {
  font-family: var(--font-secondary);
}

.font-whimsy {
  font-family: var(--font-third);
}

body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.625;
  color: var(--color-primary);
  background-color: #f8f9fa;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

a,
a:hover {
  text-decoration: none;
}

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.align-items-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.justify-content-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.flex-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.gap-3 {
  gap: 16px;
}

.w-full {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.position-relative {
  position: relative;
}

.text-center {
  text-align: center;
}

.mb-3 {
  margin-bottom: 16px;
}

.mt-0 {
  margin-top: 0 !important;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.mb-60 {
  margin-bottom: 30px;
}
@media screen and (min-width: 1200px) {
  .mb-60 {
    margin-bottom: 45px;
  }
}
@media screen and (min-width: 1680px) {
  .mb-60 {
    margin-bottom: 60px;
  }
}

#floating-cta {
  position: fixed;
  right: 6px;
  bottom: 16px;
  z-index: 100;
}

#floating-back-top {
  position: fixed;
  right: 6px;
  bottom: 86px;
  z-index: 100;
  cursor: pointer;
}

.d-none {
  display: none !important;
}

@media screen and (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button;
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}


#header {
  background: transparent;
  height: 90px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 90;
  -webkit-transition: background 0.3s linear;
  transition: background 0.3s linear;
}
#header .header-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px 16px;
  background-color: #fff;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
@media (min-width: 992px) {
  #header .header-main {
    background: transparent;
  }
}
#header .header-main-news-detail .header-nav {
  background: rgba(231, 69, 18, 0.2);
}
#header .header-main-news-detail .header-nav a {
  color: #e74512;
}
#header .header-main-news-detail .header-nav a:hover {
  background: #e74512;
  color: #fff;
}
#header .header-main-news-detail-has-image .header-nav {
  background: rgba(231, 69, 18, 0.2);
}
#header .header-main-news-detail-has-image .header-nav a {
  color: #fff;
  border-radius: 35px;
}
#header .header-main-news-detail-has-image .header-nav a:hover {
  background: #e74512;
  color: #fff;
}
#header .logo {
  position: relative;
  z-index: 2;
  margin: 0;
}
@media (min-width: 1200px) {
  #header .logo {
    margin: 0 auto;
  }
}
#header .mb-overlay {
  color: #f2f2f2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  background-color: #ffd421;
}
#header .mb-overlay.mb-show {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
#header .btns-header {
  width: 100%;
}
@media screen and (min-width: 1200px) {
  #header .btns-header {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}
#header .header-inner {
  position: fixed;
  top: 0;
  left: 0;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  opacity: 0;
  width: 100%;
  gap: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0 20px;
}
#header .header-inner.mb-show {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  pointer-events: all !important;
  opacity: 1;
}
@media screen and (min-width: 1200px) {
  #header .header-inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    position: static;
    -webkit-transform: unset;
            transform: unset;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    opacity: 1;
  }
}
@media screen and (min-width: 1440px) {
  #header .header-inner {
    gap: 40px;
  }
}
#header .header-nav {
  color: #f2f2f2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  pointer-events: none;
  border-radius: 15px;
  border: 1px solid #fff;
  background: rgba(231, 69, 18, 0.2);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  margin: 100px 20px 0 20px;
  padding: 7px 6px;
  width: 100%;
}
#header .header-nav a {
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1111111111;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  padding: 8px 16px;
  color: #fff;
  width: 100%;
  text-align: center;
}
#header .header-nav a:hover {
  color: #f7432b;
}
#header .header-nav a.active {
  border-radius: 40px;
  background: var(--PD-EU-Main-1-10, #e74512);
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
}
#header .btn-header {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 40px;
  border: 1px solid #fff;
  background: #e74512;
  color: #fff;
  font-family: var(--font-secondary);
  font-weight: 400;
  line-height: 1.1111111111;
  font-size: 14px;
  padding: 12px 32px;
  width: 100%;
}
@media screen and (min-width: 576px) {
  #header .btn-header {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (min-width: 992px) {
  #header .btn-header {
    margin: 0;
    padding: 12px 14px;
  }
}
#header .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
#header .hamburger-lines {
  margin-left: auto;
  display: block;
  height: 34px;
  width: 44px;
  z-index: 2;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  border-radius: 35px;
  border: 1px solid #fff;
  background: rgba(231, 69, 18, 0.2);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  position: relative;
}
#header .hamburger-lines::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1H23.5' stroke='black'/%3E%3Cpath d='M0 8H23.5' stroke='black'/%3E%3Cpath d='M0 15H23.5' stroke='black'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 12px;
  -webkit-transition: background-image 0.1s linear;
  transition: background-image 0.1s linear;
}
#header .hamburger-lines.active::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M16.9917 1.00092L0.999957 17' stroke='black'/%3E%3Cpath d='M17 16.999L1.00826 0.999907' stroke='black'/%3E%3C/svg%3E");
}
@media (min-width: 768px) {
  #header .header-main {
    padding: 8px 50px;
  }
  #header .btn-header {
    font-size: 16px;
  }
}
@media (min-width: 1200px) {
  #header .header-nav {
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-clip-path: unset;
            clip-path: unset;
    width: auto;
    height: auto;
    top: auto;
    left: auto;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    max-width: 100%;
    border-radius: 35px;
    border: 1px solid #fff;
    background: rgba(231, 69, 18, 0.2);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    padding: 6px;
    gap: 16px;
    opacity: 1;
    pointer-events: auto;
  }
  #header .header-nav a {
    font-size: 16px;
    padding: 6px 10px;
    width: auto;
    border-radius: 35px;
  }
  #header .checkbox,
  #header .hamburger-lines {
    display: none;
  }
  #header .logo {
    margin: 0;
  }
}
@media (min-width: 1440px) {
  #header .header-nav a {
    padding: 6px 24px;
    font-size: 18px;
  }
  #header .header-main {
    padding: 8px 100px;
  }
  #header .btn-header {
    padding: 12px 32px;
  }
}

#page-home #header {
  background: rgb(241, 160, 9);
  opacity: 0;
  -webkit-transform: translatey(-100%);
          transform: translatey(-100%);
}

#page-quiz #header.header-scroll {
  background: rgb(241, 160, 9);
}

.opened-menu #header .header-main {
  background-color: #ffd421;
}

.list-stack {
  position: relative;
  overflow: hidden;
  min-height: 157px;
}

.footer {
  background-color: #2226f7;
}

.stacked-item {
  padding: 10px 0;
  background: #2226f7;
}

.genz-view {
  position: relative;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffd628), to(#fff8d8));
  background: linear-gradient(180deg, #ffd628 0%, #fff8d8 100%);
  padding: 100px 5vw 0;
  min-height: 900px;
}
.genz-view .mobile {
  z-index: 2;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100vh;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 220px 0 130px;
  max-width: 45vw;
}
.genz-view .svg-cloud {
  position: absolute;
  bottom: -2px;
  left: 0;
  pointer-events: none;
}
.genz-view .svg-cloud svg {
  width: 100%;
  height: 100%;
}
.genz-view .text-onscreen {
  -webkit-transform: rotate(1.568deg) translate(-35%, 30%);
          transform: rotate(1.568deg) translate(-35%, 30%);
}
.genz-view .box-shape {
  position: absolute;
  z-index: 4;
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.genz-view .box-shape::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.genz-view .box-shape .time {
  position: absolute;
  color: #fff;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.genz-view .box-shape .flower {
  position: absolute;
  z-index: 5;
}
.genz-view .box-shape-1 {
  left: 46%;
  top: 25%;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.genz-view .box-shape-1::before {
  background-image: url('data:image/svg+xml,<svg width="560" height="160" viewBox="0 0 560 160" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 25.5576C0 11.7099 11.6868 0.735374 25.5072 1.605L502.166 31.598C510.992 32.1534 518.798 37.5179 522.48 45.5589L545.385 95.5824C552.415 110.936 541.812 128.556 524.954 129.534L25.3905 158.526C11.6122 159.326 0 148.368 0 134.567V25.5576Z" fill="%230154A3"/><path d="M505.5 115.5L485.5 149.5L448.5 122L505.5 115.5Z" fill="%230154A3"/></svg>');
  width: 100%;
  height: 100%;
}
.genz-view .box-shape-1 .text {
  position: relative;
  max-width: 560px;
  padding: 45px 80px 40px 40px;
}
.genz-view .box-shape-1 .flower {
  top: 50%;
  -webkit-transform: translate(-75%, -50%);
          transform: translate(-75%, -50%);
  left: 0;
}
.genz-view .box-shape-2 {
  left: 34%;
  top: 43%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.genz-view .box-shape-2::before {
  background-image: url('data:image/svg+xml,<svg width="483" height="161" viewBox="0 0 483 161" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.9092 35.1564C7.4381 18.8003 20.1783 1.26969 37.7332 2.37431L415.98 26.1749C424.533 26.7131 432.151 31.772 435.965 39.4473L466.918 101.736C474.555 117.105 464.061 135.291 446.933 136.369L80.9076 159.405C70.5283 160.058 60.9092 153.952 57.0832 144.282L13.9092 35.1564Z" fill="%2328B963"/><path d="M437.649 124.111L421.006 152.404L390.217 129.52L437.649 124.111Z" fill="%2328B963"/></svg>');
  width: 100%;
  height: 100%;
}
.genz-view .box-shape-2 .time {
  right: 65px;
  top: 0px;
}
.genz-view .box-shape-2 .text {
  position: relative;
  max-width: 480px;
  padding: 37px 54px 25px 93px;
}
.genz-view .box-shape-2 .flower {
  top: 50%;
  -webkit-transform: translate(-25%, -50%);
          transform: translate(-25%, -50%);
  left: 0;
}
.genz-view .box-shape-3 {
  left: 45%;
  bottom: 19%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  min-width: 917px;
}
.genz-view .box-shape-3::before {
  background-image: url("data:image/svg+xml,%3Csvg width='917' height='261' viewBox='0 0 917 261' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9933 34.1745C6.30322 17.9608 18.9972 1.19537 36.1464 2.27446L831.434 52.3168C840.261 52.8722 848.066 58.2367 851.748 66.2776L902.461 177.03C909.471 192.338 898.951 209.917 882.148 210.975L109.639 259.594C98.9124 260.269 89.0448 253.73 85.4857 243.588L11.9933 34.1745Z' fill='%23F17509'/%3E%3Cpath d='M698.5 208.5L681.895 257L641 211.706L698.5 208.5Z' fill='%23F17509'/%3E%3C/svg%3E%0A");
  width: 100%;
  height: 100%;
}
.genz-view .box-shape-3 .time {
  left: 50%;
  top: 0px;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.genz-view .box-shape-3 .text {
  position: relative;
  max-width: 917px;
  padding: 70px 105px;
  font-size: 32px;
}
.genz-view .box-shape-3 .flower {
  top: 50%;
  -webkit-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  left: 0;
}
.genz-view .box-shape-4 {
  right: 50%;
  top: 29%;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.genz-view .box-shape-4::before {
  background-image: url("data:image/svg+xml,%3Csvg width='491' height='185' viewBox='0 0 491 185' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M447.926 17.7598C444.731 7.30238 434.871 0.326405 423.947 0.793837L29.1905 17.6844C14.2103 18.3254 3.47906 32.3926 6.8197 47.0097L28.4315 141.573C30.9399 152.548 40.7402 160.305 51.9983 160.225L458.313 157.347C474.369 157.233 485.787 141.691 481.096 126.335L447.926 17.7598Z' fill='%23E9AF11'/%3E%3Cpath d='M79.7445 159.281L101.363 180.9L113.254 159.28L79.7445 159.281Z' fill='%23E9AF11'/%3E%3C/svg%3E%0A");
  width: 100%;
  height: 100%;
}
.genz-view .box-shape-4 .time {
  left: 30px;
  top: -10px;
}
.genz-view .box-shape-4 .text {
  position: relative;
  max-width: 490px;
  padding: 45px 65px 65px 32px;
}
.genz-view .box-shape-4 .flower {
  top: 50%;
  -webkit-transform: translate(25%, -65%);
          transform: translate(25%, -65%);
  right: 0;
}
.genz-view .box-shape-utils {
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(20%);
          transform: translateX(20%);
}
.genz-view .box-shape-utils .time {
  top: -25px;
  right: 30px;
}
.genz-view .text-onscreen {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  position: absolute;
  top: 20%;
  z-index: 3;
}
@media (max-width: 1600px) {
  .genz-view .mobile {
    padding-bottom: 0;
  }
}
@media (max-width: 1440px) {
  .genz-view .text-onscreen {
    -webkit-transform: rotate(1.568deg) translate(-35%, 90%);
            transform: rotate(1.568deg) translate(-35%, 90%);
  }
  .genz-view .box-shape {
    font-size: 16px;
    top: 60%;
  }
  .genz-view .box-shape-1 {
    top: 30%;
  }
  .genz-view .box-shape-1 .text {
    padding: 25px 40px 25px 40px;
  }
  .genz-view .box-shape-1 .flower {
    top: 50%;
    -webkit-transform: translate(-75%, -50%);
            transform: translate(-75%, -50%);
    left: 0;
  }
  .genz-view .box-shape-2 {
    left: 34%;
    top: 47%;
  }
  .genz-view .box-shape-2 .time {
    top: -20px;
  }
  .genz-view .box-shape-2 .text {
    padding: 25px 40px 25px 65px;
  }
  .genz-view .box-shape-2 .flower {
    top: 50%;
    -webkit-transform: translate(-30%, -50%);
            transform: translate(-30%, -50%);
    left: 0;
  }
  .genz-view .box-shape-3 {
    max-width: 560px;
    left: 34%;
    top: 70%;
    bottom: auto;
    min-width: unset;
  }
  .genz-view .box-shape-3 .time {
    top: -20px;
    right: 65px;
    left: auto;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  .genz-view .box-shape-3 .text {
    padding: 25px 40px 25px 80px;
    font-size: 16px;
  }
  .genz-view .box-shape-3 .flower {
    top: 50%;
    -webkit-transform: translate(-25%, -50%);
            transform: translate(-25%, -50%);
    left: 0;
  }
  .genz-view .box-shape-4 {
    right: 50%;
    top: 35%;
  }
  .genz-view .box-shape-4 .time {
    left: 30px;
    top: -20px;
  }
  .genz-view .box-shape-4 .text {
    position: relative;
    max-width: 490px;
    padding: 25px 40px;
  }
  .genz-view .box-shape-4 .flower {
    -webkit-transform: translate(25%, -50%);
            transform: translate(25%, -50%);
  }
}
@media (max-width: 1200px) {
  .genz-view .box-shape {
    font-size: 14px;
    top: 70%;
  }
  .genz-view .box-shape .time {
    right: auto;
    left: 0;
    font-size: 12px;
  }
  .genz-view .mobile {
    max-width: unset;
    width: 625px;
    padding: 0;
    margin-right: auto;
    height: 850px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .genz-view .mobile img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
  .genz-view .text-onscreen {
    -webkit-transform: rotate(1.568deg) translate(0, 90%);
            transform: rotate(1.568deg) translate(0, 90%);
    left: 100px;
    top: 0%;
  }
  .genz-view .box-shape-1 {
    top: 15%;
    left: 55%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  .genz-view .box-shape-1 .text {
    padding: 15px 25px;
  }
  .genz-view .box-shape-1 .flower svg {
    width: 50px;
    height: 50px;
  }
  .genz-view .box-shape-2 {
    top: 35%;
  }
  .genz-view .box-shape-2 .time {
    right: auto;
    left: 0;
  }
  .genz-view .box-shape-2 .text {
    padding: 15px 65px;
  }
  .genz-view .box-shape-2 .flower {
    -webkit-transform: translate(15%, -50%);
            transform: translate(15%, -50%);
  }
  .genz-view .box-shape-2 .flower svg {
    width: 50px;
    height: 50px;
  }
  .genz-view .box-shape-3 {
    top: 80%;
    left: 50%;
  }
  .genz-view .box-shape-3 .time {
    right: auto;
    left: 100px;
  }
  .genz-view .box-shape-3 .text {
    padding: 15px 25px 15px 65px;
  }
  .genz-view .box-shape-3 .flower {
    -webkit-transform: translate(15%, -50%);
            transform: translate(15%, -50%);
  }
  .genz-view .box-shape-3 .flower svg {
    width: 50px;
    height: 50px;
  }
  .genz-view .box-shape-4 {
    top: 55%;
    left: -20%;
    right: auto;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
  .genz-view .box-shape-4 .time {
    right: auto;
    left: 100px;
  }
  .genz-view .box-shape-4 .text {
    padding: 15px 25px 15px 65px;
  }
  .genz-view .box-shape-4 .flower {
    -webkit-transform: translate(15%, -50%);
            transform: translate(15%, -50%);
    right: auto;
  }
  .genz-view .box-shape-4 .flower svg {
    width: 50px;
    height: 50px;
  }
  .genz-view .box-shape-utils {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    left: 35%;
  }
}
@media (max-width: 992px) {
  .genz-view {
    padding: 60px 20px;
    min-height: auto;
  }
  .genz-view .text-onscreen,
  .genz-view .mobile {
    display: none;
  }
  .genz-view .box-shape {
    min-height: 120px;
    max-width: 335px;
    position: relative;
    -webkit-transform: none;
            transform: none;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }
  .genz-view .box-shape-4, .genz-view .box-shape-3, .genz-view .box-shape-2, .genz-view .box-shape-1 {
    position: relative;
    -webkit-transform: none;
            transform: none;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }
  .genz-view .box-shape-utils {
    display: none;
  }
  .genz-view .box-shape::before {
    background-size: cover !important;
    top: 10px;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    max-height: 110px;
  }
  .genz-view .box-shape-1::before {
    background-image: url("data:image/svg+xml,%3Csvg width='335' height='111' viewBox='0 0 335 111' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 24C0 10.7451 10.7452 0 24 0H311C324.255 0 335 10.7452 335 24V71.7143C335 84.9691 324.255 95.7143 311 95.7143H24C10.7452 95.7143 0 84.9691 0 71.7143V24Z' fill='%230154A3'/%3E%3Cpath d='M299.5 93.8884L290.435 110.339L280.5 93.8882L299.5 93.8884Z' fill='%230154A3'/%3E%3C/svg%3E%0A");
  }
  .genz-view .box-shape-2::before {
    background-image: url("data:image/svg+xml,%3Csvg width='335' height='111' viewBox='0 0 335 111' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M335 24.3393C335 11.0845 324.255 0.339355 311 0.339355H24C10.7452 0.339355 0 11.0845 0 24.3394V72.0537C0 85.3085 10.7452 96.0536 24 96.0536H311C324.255 96.0536 335 85.3085 335 72.0536V24.3393Z' fill='%23E9AF11'/%3E%3Cpath d='M35.5 94.2277L44.5653 110.678L54.5 94.2275L35.5 94.2277Z' fill='%23E9AF11'/%3E%3C/svg%3E%0A");
  }
  .genz-view .box-shape-3 {
    min-height: 125px;
  }
  .genz-view .box-shape-3::before {
    background-image: url("data:image/svg+xml,%3Csvg width='335' height='126' viewBox='0 0 335 126' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 24.6787C0 11.4239 10.7452 0.678711 24 0.678711H311C324.255 0.678711 335 11.4239 335 24.6787V86.6787C335 99.9336 324.255 110.679 311 110.679L24 110.679C10.7452 110.679 0 99.9335 0 86.6787V24.6787Z' fill='%2328B963'/%3E%3Cpath d='M299.5 109.246L290.435 125.696L280.5 109.246L299.5 109.246Z' fill='%2328B963'/%3E%3C/svg%3E%0A");
    max-height: 125px;
  }
  .genz-view .box-shape-4 {
    min-height: 130px;
  }
  .genz-view .box-shape-4::before {
    background-image: url("data:image/svg+xml,%3Csvg width='335' height='130' viewBox='0 0 335 130' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M335 24.6787C335 11.4239 324.255 0.678711 311 0.678711H24C10.7452 0.678711 0 11.4239 0 24.6787V90.6787C0 103.934 10.7452 114.679 24 114.679L311 114.679C324.255 114.679 335 103.934 335 90.6787V24.6787Z' fill='%23F17509'/%3E%3Cpath d='M35.5 113.246L44.5653 129.696L54.5 113.246L35.5 113.246Z' fill='%23F17509'/%3E%3C/svg%3E%0A");
    max-height: 130px;
  }
  .genz-view .box-shape {
    margin: 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .genz-view .box-shape:not(:last-child) {
    margin-bottom: 17px;
  }
  .genz-view .box-shape-utils {
    display: none;
  }
  .genz-view .box-shape .time {
    display: none;
  }
  .genz-view .box-shape .flower {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    position: relative;
    padding-left: 15px;
  }
  .genz-view .box-shape .flower svg {
    width: 40px;
    height: 40px;
  }
  .genz-view .box-shape .text {
    font-size: 14px;
    padding: 0 16px;
  }
  .genz-view .text-onscreen {
    color: #000;
  }
}

.list-stack {
  min-height: auto;
}

.svg-text-footer {
  position: absolute;
  top: 0;
  left: 0;
  background: #2226f7;
  width: 100%;
}
.svg-text-footer img {
  width: 100%;
}

.ro-exp .textbox {
  text-align: center;
  padding: 100px 0 0;
}
.ro-exp .textbox .fill-text {
  color: #4100f5;
  font-size: 188px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -5.663px;
}
.ro-exp .textbox .stroke-text {
  text-align: center;
}
.ro-exp .top-rectangle svg {
  min-width: 100vw;
  height: 100%;
}
@media (max-width: 992px) {
  .ro-exp .top-rectangle svg {
    min-width: 1920px;
    height: 65px;
  }
}
.ro-exp .svg-ro {
  position: absolute;
  z-index: 7;
}
.ro-exp .svg-ro img {
  max-width: 150px;
}
@media (min-width: 768px) {
  .ro-exp .svg-ro img {
    max-width: 30vw;
  }
}
.ro-exp .cloud-entry-rectangle {
  padding-bottom: 250px;
  position: relative;
}
.ro-exp [class*=stack-ic-] {
  position: absolute;
  z-index: 5;
  max-width: 30vw;
  pointer-events: none;
}
.ro-exp .stack-ic-pen {
  -webkit-transform: rotate(-6.761deg);
          transform: rotate(-6.761deg);
  max-width: 80px;
}
@media (min-width: 768px) {
  .ro-exp .stack-ic-pen {
    max-width: 30vw;
  }
}
.ro-exp .stack-ic-pen2 {
  max-width: 60px;
}
@media (min-width: 768px) {
  .ro-exp .stack-ic-pen2 {
    max-width: 30vw;
  }
}
.ro-exp .stack-ic-lap {
  z-index: 4;
  max-width: 100px;
}
@media (min-width: 768px) {
  .ro-exp .stack-ic-lap {
    max-width: 30vw;
  }
}
.ro-exp .stack-ic-note {
  max-width: 80px;
}
@media (min-width: 768px) {
  .ro-exp .stack-ic-note {
    max-width: 30vw;
  }
}
.ro-exp .stack-ic-pen3 {
  z-index: 7;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.ro-exp .stack-ic-nk {
  z-index: 8;
  max-width: 60px;
}
@media (min-width: 768px) {
  .ro-exp .stack-ic-nk {
    max-width: 30vw;
  }
}
.ro-exp .stack-ic-rolg {
  z-index: 8;
}
.ro-exp .cloud-bottom-rectangle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 1440px) {
  .ro-exp .textbox .fill-text {
    font-size: 130px;
  }
  .ro-exp .textbox .stroke-text img {
    max-width: 85vw;
  }
}
@media (max-width: 1200px) {
  .ro-exp .textbox .fill-text {
    font-size: 100px;
  }
  .ro-exp .textbox .stroke-text img {
    max-width: 75vw;
  }
}
@media (max-width: 992px) {
  .ro-exp .textbox .fill-text {
    font-size: 60px;
  }
  .ro-exp .textbox .stroke-text img {
    max-width: 55vw;
  }
  .ro-exp .stack-ic-rolg {
    max-width: 100px;
  }
}
@media (max-width: 768px) {
  .ro-exp .textbox .fill-text {
    font-size: 40px;
  }
  .ro-exp .textbox .stroke-text img {
    max-width: 300px;
  }
}

.list-stack-object {
  position: relative;
  z-index: 10;
}
.list-stack-object [class*=stack-ic-] {
  position: absolute;
  z-index: 5;
  max-width: 30vw;
}
.list-stack-object .stack-ic-pen {
  -webkit-transform: rotate(-6.761deg);
          transform: rotate(-6.761deg);
}
.list-stack-object .stack-ic-pen2 {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.list-stack-object .stack-ic-lap {
  z-index: 4;
}
.list-stack-object .stack-ic-pen3 {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.list-stack-object .stack-ic-nk {
  z-index: 7;
}
.list-stack-object .stack-ic-rolg {
  z-index: 6;
}

.footer-main {
  padding: 30px 5vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  min-height: 600px;
}
.footer-main .footer-infos {
  width: 100%;
  font-size: 14px;
  font-family: var(--font-secondary);
  font-style: normal;
  color: #fff;
}
.footer-main .university-text {
  text-align: center;
  color: #ffd628;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 32px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (min-width: 1440px) {
  .footer-main {
    padding: 60px 100px;
    gap: 40px;
  }
  .footer-main .footer-infos {
    width: calc((100% - 60px) / 4);
  }
  .footer-main .university-text {
    font-size: 50px;
    letter-spacing: -1.5px;
  }
}
@media (min-width: 1024px) {
  .footer-main {
    min-height: 100vh;
  }
}

#modal-quiz .checkbox__group input {
  display: none;
}
#modal-quiz .checkbox__group input:checked ~ span svg ellipse {
  display: block;
}
#modal-quiz .checkbox__group svg ellipse {
  display: none;
}

.who-areyou {
  position: relative;
  background: -webkit-gradient(linear, left bottom, left top, from(#ffa033), color-stop(79.81%, #f85d1b));
  background: linear-gradient(0deg, #ffa033 0%, #f85d1b 79.81%);
  margin-top: -2px;
}
.who-areyou::before {
  content: "";
  background-color: linear-gradient(0deg, #ffa033 0%, #f85d1b 79.81%);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.who-areyou .ersatz-shape {
  height: 30vw;
}
.who-areyou .shape-top {
  position: absolute;
  width: 120%;
  margin-left: -10%;
  top: 3px;
  z-index: 9;
}
.who-areyou .shape-top svg {
  max-width: 100%;
  width: 100%;
  height: auto;
  -webkit-transform-origin: center;
          transform-origin: center;
  top: 0;
}
.who-areyou .line {
  position: absolute;
  top: 32%;
  width: 100%;
}
@media screen and (max-width: 767.98px) {
  .who-areyou .line {
    display: none;
  }
}
.who-areyou .logo-birdsm02 {
  position: absolute;
}
@media screen and (max-width: 767.98px) {
  .who-areyou .logo-birdsm02 {
    display: none;
  }
}
.who-areyou .image {
  position: relative;
  z-index: 9;
}
@media screen and (min-width: 1200px) and (max-width: 1439.98px) {
  .who-areyou .image img.mx-auto {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
}
.who-areyou .wrapper {
  background: #2226f7;
  padding-bottom: 60px;
}
@media screen and (min-width: 1200px) {
  .who-areyou .wrapper {
    padding-bottom: 100px;
  }
}
@media screen and (min-width: 1680px) {
  .who-areyou .wrapper {
    padding-bottom: 176px;
  }
}
.who-areyou .slogan {
  text-align: center;
  text-transform: uppercase;
  position: relative;
  z-index: 9;
}
.who-areyou .slogan h2 {
  color: #c9fb6e;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -4px;
  margin: 0;
  font-size: 30px;
}
@media screen and (min-width: 768px) {
  .who-areyou .slogan h2 {
    font-size: 40px;
  }
}
@media screen and (min-width: 1200px) {
  .who-areyou .slogan h2 {
    font-size: 60px;
  }
}
@media screen and (min-width: 1680px) {
  .who-areyou .slogan h2 {
    font-size: 80px;
  }
}
.who-areyou .slogan h3 {
  color: #c9fb6e;
  line-height: normal;
  font-weight: 500;
  letter-spacing: -3px;
  margin: 10px 0 6px;
  font-size: 25px;
}
@media screen and (min-width: 768px) {
  .who-areyou .slogan h3 {
    font-size: 30px;
  }
}
@media screen and (min-width: 1200px) {
  .who-areyou .slogan h3 {
    font-size: 40px;
  }
}
@media screen and (min-width: 1680px) {
  .who-areyou .slogan h3 {
    margin: 26px 0 6px;
    font-size: 60px;
  }
}
.who-areyou .slogan p {
  color: #46ceb6;
  font-size: 18px;
  line-height: normal;
  font-weight: 500;
  letter-spacing: -1.5px;
  margin: 0;
  position: relative;
  z-index: 9;
}
@media screen and (min-width: 768px) {
  .who-areyou .slogan p {
    font-size: 22px;
  }
}
@media screen and (min-width: 1200px) {
  .who-areyou .slogan p {
    font-size: 30px;
  }
}
@media (min-width: 992px) {
  .who-areyou {
    min-height: 100vh;
  }
}

.cards-section {
  width: 100%;
  z-index: 1;
  background-color: #ff6333;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 768px) {
  .cards-section {
    padding: 80px 0;
  }
}
.cards-section .logo-birdsm {
  display: none;
}
@media screen and (min-width: 768px) {
  .cards-section .logo-birdsm {
    position: absolute;
    display: block;
  }
}
.cards-section .line {
  display: none;
}
@media screen and (min-width: 768px) {
  .cards-section .line {
    position: absolute;
    top: 28%;
    width: 100%;
    display: block;
  }
}
.cards-section .cards {
  width: 100%;
  padding: 0 15px;
}
.cards-section .cards .card__overflow {
  max-width: 1418px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .cards-section .cards .card__overflow {
    width: calc(100% + 20px);
  }
}
.cards-section .cards .card__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 20px;
  padding: 40px 0;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .cards-section .cards .card__wrapper {
    display: grid;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    grid-auto-columns: 246px;
    grid-auto-flow: column;
    overflow: auto;
    overflow-y: hidden;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 1rem;
    grid-template-columns: unset;
  }
  .cards-section .cards .card__wrapper::-webkit-scrollbar {
    display: none;
    width: 0;
  }
  .cards-section .cards .card__wrapper > * {
    scroll-snap-align: start;
  }
}
@media screen and (min-width: 768px) {
  .cards-section .cards .card__wrapper {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    padding: 0 0 80px;
  }
}
@media screen and (min-width: 1440px) {
  .cards-section .cards .card__wrapper {
    padding: 120px 0;
  }
}
@media screen and (min-width: 1680px) {
  .cards-section .cards .card__wrapper {
    padding: 251px 0;
  }
}
.cards-section .cards .card__item {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 16px;
  background: #fff1eb;
  position: relative;
  cursor: pointer;
  -webkit-transition: 1s all ease-in-out;
  transition: 1s all ease-in-out;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  height: 359px;
  padding: 10px;
}
@media screen and (min-width: 768px) {
  .cards-section .cards .card__item {
    width: calc(50% - 20px);
    height: auto;
    padding: 28px;
  }
}
@media screen and (min-width: 992px) {
  .cards-section .cards .card__item {
    width: calc(33.3333333333% - 20px);
  }
}
@media screen and (min-width: 768px) {
  .cards-section .cards .card__item:nth-of-type(even) {
    -webkit-transform: translateY(80px);
            transform: translateY(80px);
  }
}
.cards-section .cards .card__item:hover .card__back {
  opacity: 1;
  visibility: visible;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
.cards-section .cards .card__item:hover .card__front {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.cards-section .cards .card__image {
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDA0IiBoZWlnaHQ9IjYwNSIgdmlld0JveD0iMCAwIDQwNCA2MDUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zNjMuOTcxIDBINDAuOTEzNkMzNy41OTk5IDAgMzQuOTU3OSAyLjcwMzc0IDM0LjYwMzUgNS45OTg0M0MzMi4yOTY3IDI3LjQzOTIgMTcuNTk0IDM0Ljc1MjggNi40MzMyOCAzNi4yMDZDMi45Nzc5OSAzNi42NTU5IDAgMzkuMzg3MyAwIDQyLjg3MThWNTYyLjU3OUMwIDU2NS44OTIgMi43MDk3NiA1NjguNTI3IDUuOTk3NjQgNTY4Ljk0QzI2LjMyNzcgNTcxLjQ5MyAzMy4yOTMzIDU4Ny4wNDggMzQuNjgzNiA1OTguNjc2QzM1LjA5MjMgNjAyLjA5NCAzNy44MDg2IDYwNSA0MS4yNTEyIDYwNUgzNjQuMDg0QzM2Ny4zOTggNjA1IDM3MC4wNCA2MDIuMjk1IDM3MC4zOTMgNTk5LjAwMUMzNzIuNjUzIDU3Ny45MjcgMzg2LjgzNyA1NzAuNTA2IDM5Ny42NTQgNTY4Ljg5M0M0MDEuMDcgNTY4LjM4MyA0MDQgNTY1LjY2NCA0MDQgNTYyLjIxVjQxLjkxNTZDNDA0IDM4LjYwMTggNDAxLjI5IDM1Ljk2NzggMzk4LjAwMSAzNS41NTczQzM3OC4wMDIgMzMuMDYwMiAzNzEuNiAxOC4wMjE0IDM3MC41ODQgNi41OTk3QzM3MC4yNyAzLjA3MDUyIDM2Ny41MTQgMCAzNjMuOTcxIDBaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K");
          mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDA0IiBoZWlnaHQ9IjYwNSIgdmlld0JveD0iMCAwIDQwNCA2MDUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zNjMuOTcxIDBINDAuOTEzNkMzNy41OTk5IDAgMzQuOTU3OSAyLjcwMzc0IDM0LjYwMzUgNS45OTg0M0MzMi4yOTY3IDI3LjQzOTIgMTcuNTk0IDM0Ljc1MjggNi40MzMyOCAzNi4yMDZDMi45Nzc5OSAzNi42NTU5IDAgMzkuMzg3MyAwIDQyLjg3MThWNTYyLjU3OUMwIDU2NS44OTIgMi43MDk3NiA1NjguNTI3IDUuOTk3NjQgNTY4Ljk0QzI2LjMyNzcgNTcxLjQ5MyAzMy4yOTMzIDU4Ny4wNDggMzQuNjgzNiA1OTguNjc2QzM1LjA5MjMgNjAyLjA5NCAzNy44MDg2IDYwNSA0MS4yNTEyIDYwNUgzNjQuMDg0QzM2Ny4zOTggNjA1IDM3MC4wNCA2MDIuMjk1IDM3MC4zOTMgNTk5LjAwMUMzNzIuNjUzIDU3Ny45MjcgMzg2LjgzNyA1NzAuNTA2IDM5Ny42NTQgNTY4Ljg5M0M0MDEuMDcgNTY4LjM4MyA0MDQgNTY1LjY2NCA0MDQgNTYyLjIxVjQxLjkxNTZDNDA0IDM4LjYwMTggNDAxLjI5IDM1Ljk2NzggMzk4LjAwMSAzNS41NTczQzM3OC4wMDIgMzMuMDYwMiAzNzEuNiAxOC4wMjE0IDM3MC41ODQgNi41OTk3QzM3MC4yNyAzLjA3MDUyIDM2Ny41MTQgMCAzNjMuOTcxIDBaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  position: relative;
  height: 100%;
}
.cards-section .cards .card__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.cards-section .cards .card__icon {
  position: absolute;
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (min-width: 768px) {
  .cards-section .cards .card__icon {
    width: 40px;
    height: 40px;
  }
}
.cards-section .cards .card__icon:nth-of-type(1) {
  top: 0px;
  left: 0px;
  /* @media screen and (max-width: 1679px) {
  	top: -10px;
  	left: -10px;
  } */
}
.cards-section .cards .card__icon:nth-of-type(2) {
  top: 0;
  right: 0;
  /* 	@media screen and (max-width: 1679px) {
  	top: -10px;
  	right: -10px;
  } */
}
.cards-section .cards .card__icon:nth-of-type(3) {
  bottom: 0;
  left: 0;
  /* 	@media screen and (max-width: 1679px) {
  	bottom: -10px;
  	left: -10px;
  } */
}
.cards-section .cards .card__icon:nth-of-type(4) {
  bottom: 0;
  right: 0;
  /* @media screen and (max-width: 1679px) {
  	bottom: -10px;
  	right: -10px;
  } */
}
.cards-section .cards .card__btn {
  color: #ff3898;
  text-align: center;
  font-family: "iCielNeuePlak";
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='207' height='55' viewBox='0 0 207 55' fill='none'%3E%3Cpath d='M78.3302 13.8123C56.5346 13.6264 12.9434 17.2699 12.9434 33.3306C12.9434 53.4066 205 62.8868 205 38.3496C205 13.8123 83.2547 -12.3979 2 11.3028' stroke='%232227F7' stroke-opacity='0.6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 203px;
  min-height: 51px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 767px) {
  .cards-section .cards .card__btn {
    width: 138px;
    min-height: 35px;
    -o-object-fit: contain;
       object-fit: contain;
    margin: 0 auto;
    font-size: 14px;
  }
}
.cards-section .cards .card__back, .cards-section .cards .card__front {
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: 1s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.cards-section .cards .card__inner {
  position: relative;
  height: 100%;
}
.cards-section .cards .card__front {
  position: relative;
}
.cards-section .cards .card__back {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  position: absolute;
  inset: 0;
}
.cards-section .cards .card__back--image {
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDA2IiBoZWlnaHQ9IjYwNyIgdmlld0JveD0iMCAwIDQwNiA2MDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zNjQuOTY0IDFINDEuOTEzNkMzOC41OTk5IDEgMzUuOTU5MSAzLjcwNTA4IDM1LjU5NTggNi45OTg4MkMzMy4yNjQxIDI4LjE0MDggMTguNTc3NCAzNS4zNTQ0IDcuNDI4MzEgMzYuNzg3N0MzLjk3NDI2IDM3LjIzMTcgMSAzOS45NjI1IDEgNDMuNDQ1VjU2NEMxIDU2Ny4zMTQgMy43MDk1NCA1NjkuOTQ5IDYuOTk4MDEgNTcwLjM1N0MyNy4yODIgNTcyLjg3NSAzNC4yNjE5IDU4OC4xODYgMzUuNjc0MSA1OTkuNjcxQzM2LjA5NDQgNjAzLjA5IDM4LjgxMTEgNjA2IDQyLjI1NTMgNjA2SDM2NS4wODRDMzY4LjM5OCA2MDYgMzcxLjAzOSA2MDMuMjk0IDM3MS40MDEgNjAwQzM3My42ODUgNTc5LjIyMSAzODcuODUyIDU3MS45MDIgMzk4LjY1OCA1NzAuMzFDNDAyLjA3NCA1NjkuODA3IDQwNSA1NjcuMDg4IDQwNSA1NjMuNjM2VjQyLjVDNDA1IDM5LjE4NjMgNDAyLjI5IDM2LjU1MTcgMzk5LjAwMSAzNi4xNDU4QzM3OS4wNSAzMy42ODM2IDM3Mi42MzEgMTguODg1NCAzNzEuNTkxIDcuNjA2MDlDMzcxLjI2NSA0LjA3NTI2IDM2OC41MDkgMSAzNjQuOTY0IDFaIiBzdHJva2U9IiNEQThGQzgiLz4KPC9zdmc+Cg==");
          mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDA2IiBoZWlnaHQ9IjYwNyIgdmlld0JveD0iMCAwIDQwNiA2MDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zNjQuOTY0IDFINDEuOTEzNkMzOC41OTk5IDEgMzUuOTU5MSAzLjcwNTA4IDM1LjU5NTggNi45OTg4MkMzMy4yNjQxIDI4LjE0MDggMTguNTc3NCAzNS4zNTQ0IDcuNDI4MzEgMzYuNzg3N0MzLjk3NDI2IDM3LjIzMTcgMSAzOS45NjI1IDEgNDMuNDQ1VjU2NEMxIDU2Ny4zMTQgMy43MDk1NCA1NjkuOTQ5IDYuOTk4MDEgNTcwLjM1N0MyNy4yODIgNTcyLjg3NSAzNC4yNjE5IDU4OC4xODYgMzUuNjc0MSA1OTkuNjcxQzM2LjA5NDQgNjAzLjA5IDM4LjgxMTEgNjA2IDQyLjI1NTMgNjA2SDM2NS4wODRDMzY4LjM5OCA2MDYgMzcxLjAzOSA2MDMuMjk0IDM3MS40MDEgNjAwQzM3My42ODUgNTc5LjIyMSAzODcuODUyIDU3MS45MDIgMzk4LjY1OCA1NzAuMzFDNDAyLjA3NCA1NjkuODA3IDQwNSA1NjcuMDg4IDQwNSA1NjMuNjM2VjQyLjVDNDA1IDM5LjE4NjMgNDAyLjI5IDM2LjU1MTcgMzk5LjAwMSAzNi4xNDU4QzM3OS4wNSAzMy42ODM2IDM3Mi42MzEgMTguODg1NCAzNzEuNTkxIDcuNjA2MDlDMzcxLjI2NSA0LjA3NTI2IDM2OC41MDkgMSAzNjQuOTY0IDFaIiBzdHJva2U9IiNEQThGQzgiLz4KPC9zdmc+Cg==");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
}
.cards-section .cards .card__back--image img {
  height: 100%;
  width: 100%;
}
.cards-section .cards .card__back--content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
  padding: 20px 10px;
}
@media screen and (min-width: 768px) {
  .cards-section .cards .card__back--content {
    padding: 46px 20px;
  }
}
.cards-section .cards .card__back--content h3 {
  color: #4100f5;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: normal;
  letter-spacing: -0.72px;
  margin: 0 0 5px;
}
@media screen and (min-width: 768px) {
  .cards-section .cards .card__back--content h3 {
    font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  .cards-section .cards .card__back--content h3 {
    font-size: 18px;
  }
}
@media screen and (min-width: 1680px) {
  .cards-section .cards .card__back--content h3 {
    font-size: 24px;
  }
}
.cards-section .cards .card__back--content h4 {
  color: #ff3898;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.6px;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .cards-section .cards .card__back--content h4 {
    font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  .cards-section .cards .card__back--content h4 {
    font-size: 18px;
  }
}
@media screen and (min-width: 1680px) {
  .cards-section .cards .card__back--content h4 {
    font-size: 20px;
  }
}
.cards-section .cards .card__back--content-item {
  padding: 46px 10px 62px;
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (max-width: 767px) {
  .cards-section .cards .card__back--content-item {
    padding: 15px 20px;
  }
  .cards-section .cards .card__back--content-item div:nth-of-type(2) {
    aspect-ratio: 1/1;
  }
  .cards-section .cards .card__back--content-item div:nth-of-type(2) img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
@media screen and (max-width: 767px) {
  .cards-section .cards .card__back--bird {
    height: 180px;
    width: 180px;
  }
}

.knowledge-section {
  background: #f1a009;
  padding: 40px 0;
  width: 100%;
  z-index: 9;
  display: none;
}
@media screen and (min-width: 992px) {
  .knowledge-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 100px 0;
    position: absolute;
    top: 61%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}
@media screen and (min-width: 1200px) {
  .knowledge-section {
    display: block;
    padding: 140px 0 100px;
  }
}
.knowledge-section .box {
  background: #fff;
  position: relative;
  border: 1px solid #cef564;
  background: #fff;
  -webkit-box-shadow: 9px 9px 0px 0px rgba(0, 0, 0, 0.25);
          box-shadow: 9px 9px 0px 0px rgba(0, 0, 0, 0.25);
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 20px;
}
@media screen and (min-width: 768px) {
  .knowledge-section .box {
    padding: 28px;
  }
}
@media screen and (min-width: 1680px) {
  .knowledge-section .box {
    padding: 40px;
  }
}
.knowledge-section .box::before, .knowledge-section .box::after,
.knowledge-section .box span::before,
.knowledge-section .box span::after,
.knowledge-section .box blockquote::before,
.knowledge-section .box blockquote::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid #cef564;
  background: #fff;
}
.knowledge-section .box::before {
  top: -10px;
  left: -10px;
}
.knowledge-section .box::after {
  top: -10px;
  right: -10px;
}
.knowledge-section .box span {
  display: inline-block;
}
.knowledge-section .box span::before {
  bottom: -10px;
  left: -10px;
}
.knowledge-section .box span::after {
  bottom: -10px;
  right: -10px;
}
.knowledge-section .knowledge__container {
  max-width: 1750px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 15px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .knowledge-section .knowledge__container {
    background-image: url("./../images/knowledge-bg2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
  }
}
.knowledge-section .knowledge__image {
  z-index: 1;
  display: none;
}
@media screen and (min-width: 768px) {
  .knowledge-section .knowledge__image {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    right: 0;
    display: block;
  }
}
@media screen and (max-width: 1679px) {
  .knowledge-section .knowledge__image {
    width: 45%;
  }
}
.knowledge-section .knowledge__title {
  color: #ff832e;
  font-size: 32px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -2.5px;
  margin-bottom: 43px;
}
@media screen and (min-width: 1200px) {
  .knowledge-section .knowledge__title {
    font-size: 40px;
  }
}
@media screen and (min-width: 1680px) {
  .knowledge-section .knowledge__title {
    font-size: 50px;
  }
}
@media screen and (min-width: 768px) {
  .knowledge-section .knowledge__content--wrapper {
    padding-left: 45px;
  }
}
@media screen and (min-width: 1680px) {
  .knowledge-section .knowledge__content--wrapper {
    padding-left: 67px;
  }
}
.knowledge-section .knowledge__content {
  color: var(--color-blue);
  text-align: justify;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4285714286;
  max-width: 690px;
}
@media screen and (min-width: 768px) {
  .knowledge-section .knowledge__content {
    font-size: 18px;
    line-height: 1.7272727273;
  }
}
@media screen and (min-width: 1680px) {
  .knowledge-section .knowledge__content {
    max-width: 890px;
    font-size: 22px;
  }
}
.knowledge-section .knowledge__content strong {
  color: #ff962d;
}
.knowledge-section .knowledge__content span {
  display: grid;
  gap: 16px;
}
@media screen and (min-width: 1680px) {
  .knowledge-section .knowledge__content span {
    gap: 25px;
  }
}

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #000;
  overflow: hidden;
  z-index: 9999;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.loading-screen-img {
  display: inline-block;
  width: 93.228px;
  height: 93.128px;
}
.loading-screen-txt {
  color: #000;
  text-align: center;
  font-family: "iCielNeuePlak";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .loading-screen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.overflow-hidden {
  overflow: hidden;
}

.main-sections {
  position: relative;
  z-index: 92;
  overflow: clip;
  left: 0;
  -webkit-transition: left 0.3s;
  transition: left 0.3s;
}

.lightScroller {
  overflow: clip;
  position: relative;
}
.lightScroller .scroller {
  height: 200vh;
  position: relative;
}
.lightScroller .main-scroller {
  min-height: 200vh;
  position: relative;
  background: #ffd628;
}
.lightScroller .scroller-content {
  padding: 0 5vw;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100vh;
}

.bg-hero-dark {
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(255, 214, 40)), color-stop(21.5%, rgb(255, 214, 40)), color-stop(50%, #ffd628), color-stop(82.5%, #ffd628), to(rgba(255, 214, 40, 0)));
  background: linear-gradient(0deg, rgb(255, 214, 40) 0%, rgb(255, 214, 40) 21.5%, #ffd628 50%, #ffd628 82.5%, rgba(255, 214, 40, 0) 100%);
  will-change: background opacity;
  width: 100%;
  height: 100vh;
  z-index: 2;
  position: relative;
}

.logo-inside-door {
  position: absolute;
  top: -10%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  opacity: 0;
  z-index: 35;
}
@media (max-width: 1024px) {
  .logo-inside-door {
    top: 30%;
    width: 33vw;
  }
}

.door-open {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 30;
}
@media (min-width: 1024px) {
  .door-open {
    background: url("../images/bg-cloud-door.png") no-repeat bottom center;
  }
}

.cloud-stacks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.cloud-stacks .cloud-left {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 35vw;
}
.cloud-stacks .cloud-left-first {
  z-index: 3;
}
.cloud-stacks .cloud-left-second {
  z-index: 2;
  bottom: 85px;
}
.cloud-stacks .cloud-left-third {
  z-index: 1;
  bottom: 185px;
  left: 11%;
}
.cloud-stacks .cloud-right {
  position: absolute;
  right: 0;
  max-width: 35vw;
}
.cloud-stacks .cloud-right-first {
  z-index: 3;
  bottom: 90px;
}
.cloud-stacks .cloud-right-second {
  z-index: 4;
  bottom: 0;
}
.cloud-stacks .cloud-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}

.line-lightImages {
  position: absolute;
  top: 45%;
  left: 0;
  z-index: 30;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: -465px;
}
@media (max-width: 1024px) {
  .line-lightImages {
    display: none;
  }
}

.first-section {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 60px 0 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: linear-gradient(182deg, rgb(255, 214, 40) 0%, rgba(255, 214, 40, 0.6) 70%, rgb(255, 75, 51) 100%);
  min-height: 600px;
}
@media (min-width: 768px) {
  .first-section {
    min-height: 100vh;
  }
}

#second {
  font-family: Unbounded;
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: -1.2px;
  color: white;
  padding: 0 5vw;
}
@media (min-width: 1024px) {
  #second {
    font-size: 30px;
  }
}

.second-section {
  background-color: #ff4b33;
  min-height: 100vh;
}
.second-section .second-section-title {
  padding-top: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 200px;
}
.second-section .second-section-title > div:first-child {
  color: #fff;
  text-align: center;
  text-shadow: 13px 11px 0px #780505;
  font-family: Unbounded;
  font-size: 110px;
  font-style: normal;
  font-weight: 700;
  line-height: 145.455%;
  letter-spacing: -5.5px;
  text-transform: uppercase;
}
.second-section .second-section-title > div:nth-child(2) {
  margin: -20px 0 -20px -200px;
}
.second-section .second-section-title > div:nth-child(3) {
  color: #ffd628;
  text-align: center;
  text-shadow: 14px 12px 0px #780505;
  font-family: Unbounded;
  font-size: 140px;
  font-style: normal;
  font-weight: 700;
  line-height: 114.286%;
  letter-spacing: -7px;
  text-transform: uppercase;
}
@media (max-width: 1440px) {
  .second-section .second-section-title {
    padding-top: 100px;
    margin-bottom: 100px;
    font-size: 70px;
    line-height: 1.4545454545;
  }
  .second-section .second-section-title > div:first-child {
    font-size: 70px;
  }
  .second-section .second-section-title > div:nth-child(2) {
    margin: -15px 0 -15px -50px;
  }
  .second-section .second-section-title > div:nth-child(2) img {
    max-width: 200px;
  }
  .second-section .second-section-title > div:nth-child(3) {
    font-size: 90px;
  }
}
@media (max-width: 992px) {
  .second-section .second-section-title {
    padding-top: 70px;
    margin-bottom: 70px;
  }
  .second-section .second-section-title br {
    display: none;
  }
  .second-section .second-section-title > div:first-child {
    font-size: 50px;
  }
  .second-section .second-section-title > div:nth-child(2) img {
    max-width: 150px;
  }
  .second-section .second-section-title > div:nth-child(3) {
    font-size: 60px;
  }
}
@media (max-width: 768px) {
  .second-section .second-section-title {
    padding-top: 40px;
    margin-bottom: 0;
  }
  .second-section .second-section-title > div:first-child {
    font-size: 22px;
    letter-spacing: -1.1px;
    text-shadow: 2px 3px 0px #780505;
  }
  .second-section .second-section-title > div:nth-child(2) {
    margin: -10px 0 -10px 0;
  }
  .second-section .second-section-title > div:nth-child(2) img {
    max-width: 110px;
  }
  .second-section .second-section-title > div:nth-child(3) {
    font-size: 26px;
    letter-spacing: -1.3px;
    text-shadow: 2px 3px 0px #780505;
  }
}

.road-to-pd {
  display: grid;
  grid-template-areas: "roadStack";
}
.road-to-pd img {
  grid-area: roadStack;
  width: 100%;
}
.road-to-pd .road-to-img {
  display: none;
}
.road-to-pd .road-to-img.road-to-img-mb {
  display: block;
}
@media (min-width: 768px) {
  .road-to-pd .road-to-img {
    display: block;
  }
  .road-to-pd .road-to-img.road-to-img-mb {
    display: none;
  }
}

.third-section {
  background: -webkit-gradient(linear, left top, left bottom, from(#ffa033), color-stop(79.81%, #f85d1b));
  background: linear-gradient(180deg, #ffa033 0%, #f85d1b 79.81%);
  min-height: 100vh;
  position: relative;
  z-index: 1;
  padding-bottom: 70px;
}
.third-section .wavy-transparent {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}
.third-section .wavy-transparent img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.third-section-content {
  padding: 0 20px;
}
.third-section .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 45px;
  color: white;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.72px;
  text-transform: uppercase;
  margin: 0;
}
.third-section .title .main {
  text-shadow: 7.386px 6.331px 0px #780505;
  font-size: 50px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -2.5px;
  margin-top: 20px;
}
.third-section .list-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 1719px;
  margin: 0 auto;
  padding-top: 24px;
  gap: 100px;
}
.third-section .list-steps .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 270px;
}
.third-section .list-steps .item:nth-child(even) {
  padding-top: 150px;
}
.third-section .list-steps .item:nth-child(even) .line {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: -30px;
  margin-top: 45px;
}
.third-section .list-steps .item:nth-child(odd) .line {
  position: absolute;
  left: 100%;
  top: 100%;
  margin-left: -35px;
  margin-top: -25px;
}
.third-section .list-steps .item .title {
  color: var(--PD-EU-Main-3-10, #ffd628);
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.54px;
  padding-top: 28px;
  margin: 0 0 14px 0;
}
.third-section .list-steps .item .txt {
  display: block;
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px; /* 162.5% */
}
.third-section .list-steps .item .img {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.third-section .list-steps .item .img .svg {
  position: relative;
  z-index: 2;
}
.third-section .list-steps .item .img .svg svg {
  opacity: 0.4;
  width: 100%;
  height: auto;
}
.third-section .list-steps .item .img .icon-bird {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  opacity: 0;
  visibility: hidden;
}
.third-section .list-steps .item .img img {
  position: relative;
  margin-top: -90px;
}
@media (max-width: 1719px) {
  .third-section .list-steps {
    max-width: 1440px;
  }
  .third-section .list-steps .line {
    max-width: 210px;
    overflow: hidden;
  }
}
@media (max-width: 1440px) {
  .third-section .list-steps {
    max-width: 1200px;
  }
  .third-section .list-steps .line {
    max-width: 210px;
    overflow: hidden;
  }
  .third-section .list-steps .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: 270px;
  }
  .third-section .list-steps .item:nth-child(even) {
    padding-top: 150px;
  }
  .third-section .list-steps .item:nth-child(even) .line {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: -30px;
    margin-top: 45px;
  }
  .third-section .list-steps .item:nth-child(odd) .line {
    position: absolute;
    left: 100%;
    top: 100%;
    margin-left: -35px;
    margin-top: -25px;
  }
  .third-section .list-steps .item .img {
    width: 70px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 70px;
            flex: 0 0 70px;
    max-width: 70px;
  }
  .third-section .list-steps .item .item-content {
    margin-left: 16px;
  }
  .third-section .list-steps .item .title {
    color: var(--PD-EU-Main-3-10, #ffd628);
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.54px;
    padding-top: 28px;
    margin: 0 0 14px 0;
    text-align: left;
  }
  .third-section .list-steps .item .title br {
    display: none;
  }
  .third-section .list-steps .item .txt {
    display: block;
    color: var(--PD-EDU-Main-4-FFFFFF, #fff);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
  }
}
@media (max-width: 1440px) {
  .third-section .title {
    font-size: 16px;
  }
  .third-section .title .main {
    text-shadow: 2px 2px 0px #780505;
    font-size: 26px;
    line-height: 1.1428436045;
  }
  .third-section .list-steps .item:nth-child(even) .line {
    margin-top: 20px;
    max-width: 185px;
  }
  .third-section .list-steps .item:nth-child(odd) .line {
    margin-top: -15px;
    margin-left: -40px;
  }
}
@media (max-width: 1366px) {
  .third-section {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 181, 43, 0)), color-stop(24.7%, #f85d1b));
    background: linear-gradient(180deg, rgba(255, 181, 43, 0) 0%, #f85d1b 24.7%);
  }
  .third-section .third-section-content {
    margin-top: 24px;
  }
  .third-section .list-steps {
    position: relative;
    height: 1050px;
    max-width: 375px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 60px;
    padding: 0;
  }
  .third-section .list-steps .item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333%;
            flex: 0 0 33.333%;
    max-width: 33.333%;
  }
  .third-section .list-steps .item:nth-child(even) {
    padding-top: 0;
  }
  .third-section .list-steps .item .line {
    display: none;
  }
  .third-section .list-steps::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='329' height='1003' viewBox='0 0 329 1003' fill='none'%3E%3Cpath d='M18 0V0C18 67.3221 72.5753 121.897 139.897 121.897H188.603C256.201 121.897 311 176.696 311 244.294V244.294C311 311.892 256.201 366.691 188.603 366.691H131.654C68.8848 366.691 18 417.576 18 480.346V480.346C18 543.115 68.8848 594 131.654 594H206.5C264.214 594 311 640.786 311 698.5V698.5C311 756.214 264.214 803 206.5 803H149C76.6507 803 18 861.651 18 934V1002.5' stroke='url(%23paint0_linear_2161_3392)' stroke-width='35'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2161_3392' x1='164.5' y1='0' x2='173.5' y2='990.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFD521' stop-opacity='0'/%3E%3Cstop offset='0.139423' stop-color='%23FFD521'/%3E%3Cstop offset='0.5' stop-color='%23FFD521'/%3E%3Cstop offset='0.870192' stop-color='%23FFD521'/%3E%3Cstop offset='1' stop-color='%23FFD521' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .third-section .list-steps .item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    max-width: 100%;
    position: relative;
    z-index: 2;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .third-section .list-steps .item:nth-child(odd) {
    margin-left: 85px;
  }
  .third-section .list-steps .item:nth-child(even) {
    margin-right: 65px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
@media (max-width: 768px) {
  .third-section .title {
    font-size: 16px;
    letter-spacing: -0.48px;
  }
  .third-section .title .main {
    font-size: 26px;
    letter-spacing: -1.3px;
    text-shadow: 2px 2px 0px #780505;
  }
}

.lightImage {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 3;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 450px;
  height: 450px;
  pointer-events: none;
}
@media (max-width: 992px) {
  .lightImage img {
    width: 100px;
  }
}

.lightImage-bg {
  position: absolute;
  left: 0;
  top: 0px;
  right: 0;
  bottom: 0;
  z-index: 3;
  -webkit-transform: scale(0);
          transform: scale(0);
  background: url("../images/bg-logo-bird.png") no-repeat no-repeat center center;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
}

#origins {
  position: relative;
}
#origins .hiddenlink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.position-relative {
  position: relative;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.flex-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.realistic-section {
  background-color: #2226f7;
  min-height: 100vh;
  position: relative;
  padding-bottom: 200px;
}
.realistic-section .realistic-wrap {
  padding: 200px 0;
  position: relative;
}
.realistic-section .realistic-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 100px;
}
.realistic-section .realistic-content .navigator {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #000000;
  z-index: 2;
  position: relative;
  top: -2px;
}
.realistic-section .realistic-content .navigator .prev,
.realistic-section .realistic-content .navigator .next {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px;
  border-radius: 6px;
  opacity: 0.6;
  background: #22ecb0;
}
.realistic-section .realistic-content .navigator button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 12px 14px;
  border-radius: 6px;
  background: #cef564;
  color: #1d3369;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.48px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0 8px;
}
.realistic-section .realistic-content-title {
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
  font-size: 60px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1.8px;
  position: absolute;
  top: 12vw;
  left: 5vw;
}
.realistic-section .realistic-content-title.realistic-title-vi {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  top: auto;
  bottom: 12vw;
  left: auto;
  right: 5vw;
  text-align: right;
}
.realistic-section .realistic-image-btm {
  position: relative;
  margin-top: -200px;
}
.realistic-section .desktop {
  display: block;
}
.realistic-section .mobile {
  display: none;
}
.realistic-section .realistic-btm-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.realistic-section .realistic-btm-btn .btn {
  margin-top: 60px;
}
.realistic-section .realistic-bg-star {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}
.realistic-section .realistic-bg-star svg {
  max-height: 85vh;
}
.realistic-section .realistic-bg-txt {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
}
.realistic-section .realistic-bg-txt img {
  width: 100%;
}
.realistic-section .content-name {
  color: #cef564;
  text-align: center;
  font-family: SVN-Whimsy;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.9px;
  margin-bottom: 14px;
}
.realistic-section .carousel-img {
  height: 165px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.realistic-section .img {
  position: relative;
  overflow: hidden;
  max-width: 320px;
  margin: 0 auto;
  background: url("../images/phone.png") no-repeat center center;
  background-size: contain;
  padding: 140px 40px 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  z-index: 2;
}
.realistic-section .img .circle-wrapper {
  height: 210px;
  overflow: visible;
  width: 210px;
  position: absolute;
  top: calc(100% - 125px);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.realistic-section .img .circle-wrapper svg {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}
.realistic-section .img .item {
  width: 66px;
  height: 66px;
  color: white;
  text-align: center;
  line-height: 66px;
  font-size: 16px;
  padding: 4px 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1;
  border-radius: 10px;
  background: #737373;
  position: relative;
}
.realistic-section .img .item::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 26px;
  border: 2px solid #000;
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23787BEB'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.7002 7.28606C19.0945 7.67278 19.1007 8.30591 18.7139 8.70021L10.1538 17.4281L5.28606 12.4649C4.89935 12.0706 4.90549 11.4375 5.29979 11.0508C5.69409 10.6641 6.32722 10.6702 6.71394 11.0645L10.1538 14.5719L17.2861 7.29979C17.6728 6.90549 18.3059 6.89935 18.7002 7.28606Z' fill='%23F9F9FB'/%3E%3C/svg%3E") #787beb;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  will-change: opacity visibility;
}
.realistic-section .img .item img {
  -webkit-filter: grayscale(50);
          filter: grayscale(50);
}
.realistic-section .img .item.active {
  background: #787beb;
}
.realistic-section .img .item.active img {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
.realistic-section .img .item.active::after {
  opacity: 1;
  visibility: visible;
}
.realistic-section .img .hidden-link {
  position: absolute;
  top: 140px;
  left: 0;
  width: 100%;
  height: 45%;
  z-index: 2;
}
.realistic-section .realistic-btn {
  display: none;
}
@media (min-width: 1200px) {
  .realistic-section .realistic-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    width: 184px;
    height: 184px;
    padding: 45px;
    border-radius: 100%;
    overflow: hidden;
    background: #b7b7b7;
    border: 5px solid #b7b7b7;
    -webkit-filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.25));
            filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.25));
    z-index: 2;
  }
  .realistic-section .realistic-btn img {
    -webkit-filter: grayscale(50);
            filter: grayscale(50);
    pointer-events: none;
  }
  .realistic-section .realistic-btn.realistic-btn-active {
    background-color: #bfc1ff;
    border: 5px solid #575be7;
    -webkit-filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.25));
            filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.25));
  }
  .realistic-section .realistic-btn.realistic-btn-active img {
    -webkit-filter: grayscale(0);
            filter: grayscale(0);
  }
  .realistic-section .realistic-btn:nth-child(1) {
    position: absolute;
    top: 60%;
    left: 30%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .realistic-section .realistic-btn:nth-child(2) {
    position: absolute;
    top: 45%;
    left: 18%;
    -webkit-transform: translateX(-50%) scale(0.6);
            transform: translateX(-50%) scale(0.6);
  }
  .realistic-section .realistic-btn:nth-child(3) {
    position: absolute;
    top: 34%;
    left: 29%;
    -webkit-transform: translateX(-50%) scale(0.8);
            transform: translateX(-50%) scale(0.8);
  }
  .realistic-section .realistic-btn:nth-child(4) {
    position: absolute;
    top: 22%;
    left: 70%;
    -webkit-transform: translateX(-50%) scale(0.6);
            transform: translateX(-50%) scale(0.6);
  }
  .realistic-section .realistic-btn:nth-child(5) {
    position: absolute;
    top: 35%;
    left: 82%;
    -webkit-transform: translateX(-50%) scale(0.8);
            transform: translateX(-50%) scale(0.8);
  }
  .realistic-section .realistic-btn:nth-child(6) {
    position: absolute;
    top: 55%;
    left: 76%;
    -webkit-transform: translateX(-50%) scale(0.6);
            transform: translateX(-50%) scale(0.6);
  }
}
@media (max-width: 1440px) {
  .realistic-section .realistic-content-title {
    font-size: 40px;
    margin-top: 80px;
  }
  .realistic-section .realistic-btn {
    width: 150px;
    height: 150px;
  }
  .realistic-section .realistic-content {
    padding: 0 5vw;
  }
}
@media (max-width: 1200px) {
  .realistic-section {
    padding-bottom: 100px;
  }
  .realistic-section .realistic-wrap {
    padding: 100px 0;
  }
  .realistic-section .realistic-content-title {
    font-size: 32px;
    margin-top: 40px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20vw;
            flex: 0 0 20vw;
    max-width: 20vw;
  }
  .realistic-section .realistic-btn {
    width: 150px;
    height: 150px;
  }
  .realistic-section .realistic-bg-star svg {
    max-height: 1000px;
  }
  .realistic-section .realistic-image-btm {
    margin-top: -100px;
  }
  .realistic-section .realistic-btm-btn > img {
    width: 100px;
  }
  .realistic-section .realistic-btm-btn .btn {
    margin-top: 40px;
    width: 350px;
  }
}
@media (max-width: 992px) {
  .realistic-section .realistic-wrap {
    padding: 50px 0;
  }
  .realistic-section .img {
    padding: 80px 40px 80px;
  }
  .realistic-section .img .hidden-link {
    position: absolute;
    top: 80px;
  }
  .realistic-section .realistic-content-title {
    top: 4vw;
  }
  .realistic-section .realistic-content-title.realistic-title-vi {
    bottom: auto;
    top: 4vw;
  }
  .realistic-section .realistic-image-btm {
    margin-top: 0;
  }
}
@media (max-width: 768px) {
  .realistic-section .realistic-content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .realistic-section .realistic-content-title {
    display: none;
  }
  .realistic-section .realistic-content-title.realistic-title-vi {
    display: none;
  }
  .realistic-section .realistic-bg-star svg {
    max-height: 800px;
  }
  .realistic-section .realistic-btm-btn .btn {
    margin-top: 20px;
  }
  .realistic-section .realistic-btm-btn > img {
    width: 60px;
  }
  .realistic-section .desktop {
    display: none;
  }
  .realistic-section .mobile {
    display: block;
  }
}

.forth-section {
  background-color: #fff0e6;
  padding: 200px 0;
  position: relative;
}
.forth-section .forth-section-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.forth-section .content-main {
  padding: 0 64px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 540px;
}
.forth-section .forth-section-title {
  color: #ff6333;
  font-size: 132.713px;
  font-style: normal;
  font-weight: 800;
  line-height: 190.775px; /* 143.75% */
  letter-spacing: -6.636px;
}
.forth-section .sub-title {
  color: var(--PD-EU-Main-3-10, #ffd628);
  text-align: center;
  font-size: 36.703px;
  font-style: normal;
  font-weight: 800;
  line-height: 52.852px; /* 144% */
  letter-spacing: -1.835px;
  -webkit-transform: rotate(-1.998deg);
          transform: rotate(-1.998deg);
}
.forth-section .star-left,
.forth-section .star-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 64px;
}
@media (max-width: 1440px) {
  .forth-section {
    padding: 100px 0;
  }
}
@media (max-width: 1200px) {
  .forth-section .star-left,
  .forth-section .star-right,
  .forth-section .content-main {
    padding: 0 1rem;
  }
}
@media (max-width: 992px) {
  .forth-section .content-main {
    min-width: unset;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50vw;
            flex: 0 0 50vw;
    max-width: 50vw;
  }
  .forth-section .star-left svg,
  .forth-section .star-right svg {
    width: 40px;
  }
}

.startButton {
  position: absolute;
  bottom: 10%;
  width: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0;
  visibility: hidden;
}
.startButton .startButtonText {
  color: white;
  font-family: Unbounded;
  font-size: 30px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: -1.2px;
}
@media (max-width: 992px) {
  .startButton .startButtonText {
    font-size: 20px;
  }
}

.absolute {
  position: absolute;
}

.left-0 {
  left: 0;
}

.top-0 {
  top: 0;
}

.h-full {
  height: 100%;
}

.w-full {
  width: 100%;
}

.sticky {
  position: sticky;
}

.h-screen {
  height: 100vh;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.mix-blend-plus-lighter {
  mix-blend-mode: plus-lighter;
}

.bg-hero-dark {
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(255, 214, 40)), color-stop(21.5%, rgb(255, 214, 40)), color-stop(50%, #ffd628), color-stop(82.5%, #ffd628), to(rgba(255, 214, 40, 0)));
  background: linear-gradient(0deg, rgb(255, 214, 40) 0%, rgb(255, 214, 40) 21.5%, #ffd628 50%, #ffd628 82.5%, rgba(255, 214, 40, 0) 100%);
  will-change: background opacity;
  width: 100%;
  height: 100vh;
  z-index: 2;
  position: relative;
}

#first {
  font-family: Unbounded;
  font-size: 30px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: -1.2px;
  color: rgb(241, 160, 9);
  padding-top: 24px;
}
@media (max-width: 992px) {
  #first {
    font-size: 20px;
  }
}

#light {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-height: 85vh;
}
#light .line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#light .line img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.nested-pin {
  position: relative;
  background-color: #fff0e6;
}
.nested-pin #svg_mask {
  display: none;
}
@media (min-width: 992px) {
  .nested-pin .forth-section {
    height: 100vh;
    width: 100%;
    position: absolute;
    margin-top: 0;
    z-index: 1;
  }
  .nested-pin #svg_mask {
    width: 100vw;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    pointer-events: none;
  }
  .nested-pin .cards-section {
    position: relative;
    -webkit-clip-path: url(#myMask);
            clip-path: url(#myMask);
  }
}

.quiz-page {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  /* Quiz Container Styles */
  /* Progress Indicators */
  /* Questions Styling */
  /* Navigation Buttons */
  /* Results Section */
  /* Quiz Results Styles */
  /* Animations */
}
.quiz-page-bg {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: 100%;
  height: 100%;
}
.quiz-page-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.quiz-page-content {
  padding: 145px 20px;
  width: 100%;
  position: relative;
  z-index: 2;
  background: url(../images/tracnghiem/bg-global.png) no-repeat center center;
  background-size: cover;
  margin-bottom: 70px;
}
@media (min-width: 992px) {
  .quiz-page-content {
    background-size: 100% 930px;
  }
}
.quiz-page-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 2;
}
.quiz-page-title img {
  max-width: 80px;
  margin: 0 12px;
}
@media (min-width: 992px) {
  .quiz-page-title img {
    max-width: 120px;
  }
}
.quiz-page-title-txt {
  color: #fff;
  text-align: center;
  text-shadow: 4.786px 4.05px 0px #2226f7;
  font-size: 50px;
  font-weight: 700;
  line-height: 117.806%;
  letter-spacing: -2.5px;
  text-transform: uppercase;
}
.quiz-page .quiz-main-sections {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  max-width: 1470px;
  margin: 0 auto;
}
.quiz-page .quiz-main-content {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  margin-top: -100px;
  padding-top: 135px;
  width: 100%;
}
@media (max-width: 768px) {
  .quiz-page .quiz-main-content {
    padding: 30px 0;
    min-height: 500px;
    background-size: cover;
  }
}
.quiz-page .quiz-container {
  position: relative;
  -webkit-filter: drop-shadow(0px 0px 100px #FFEA00);
          filter: drop-shadow(0px 0px 100px #FFEA00);
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  border-radius: 50%;
  background: #FCFDFF;
  padding: 90px 20px;
  min-height: 316px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.quiz-page .quiz-container-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.quiz-page .quiz-nav {
  width: 76px;
  height: 76px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='77' height='76' viewBox='0 0 77 76' fill='none'%3E%3Cpath d='M21.7429 44.8533C16.6833 42.0255 9.8767 40.0799 0.289062 38C9.8767 35.92 16.6833 33.9745 21.7429 31.1467C20.1655 25.567 16.73 19.3798 11.4191 11.1301C19.6688 16.441 25.8619 19.8764 31.4357 21.4539C34.2635 16.3942 36.2091 9.58764 38.2891 0C40.369 9.58764 42.3146 16.3942 45.1424 21.4539C50.722 19.8764 56.9093 16.441 65.159 11.1301C59.8481 19.3798 56.4127 25.567 54.8352 31.1467C59.8948 33.9745 66.7014 35.92 76.2891 38C66.7014 40.0799 59.8948 42.0255 54.8352 44.8533C56.4127 50.433 59.8481 56.6202 65.159 64.8699C56.9093 59.559 50.722 56.1236 45.1424 54.5461C42.3146 59.6058 40.369 66.4124 38.2891 76C36.2091 66.4124 34.2635 59.6058 31.4357 54.5461C25.8561 56.1236 19.6688 59.559 11.4191 64.8699C16.73 56.6202 20.1655 50.433 21.7429 44.8533Z' fill='%23FF4B33'/%3E%3C/svg%3E");
  background-size: cover;
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
}
.quiz-page .quiz-nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.quiz-page .quiz-bg-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: none;
}
.quiz-page .quiz-bg-svg svg {
  fill: #fcfdff;
  -webkit-transition: -webkit-filter 0.3s linear;
  transition: -webkit-filter 0.3s linear;
  transition: filter 0.3s linear;
  transition: filter 0.3s linear, -webkit-filter 0.3s linear;
  -webkit-filter: drop-shadow(0px 0px 180px #ffea00);
          filter: drop-shadow(0px 0px 180px #ffea00);
  max-width: 100%;
}
.quiz-page .quiz-progress {
  margin: 60px auto 0 auto;
  overflow-x: auto;
  max-width: 940px;
  position: relative;
  display: none;
}
.quiz-page .quiz-progress-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 13px;
}
.quiz-page .quiz-progress .question-indicator {
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  color: #666;
  font-weight: 700;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.quiz-page .quiz-progress .question-indicator .number {
  position: relative;
  z-index: 2;
  color: #2226f7;
  text-align: center;
  font-size: 13.913px;
  font-weight: 700;
  letter-spacing: -0.696px;
  text-transform: uppercase;
}
.quiz-page .quiz-progress .question-indicator::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='45' viewBox='0 0 44 45' fill='none'%3E%3Cg filter='url(%23filter0_d_1729_1408)'%3E%3Ccircle cx='20.0625' cy='20.8148' r='20' fill='white'/%3E%3Ccircle cx='20.0625' cy='20.8148' r='19.5652' stroke='%232226F7' stroke-width='0.869565'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_1729_1408' x='0.0625' y='0.814819' width='43.4783' height='43.4783' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='3.47826' dy='3.47826'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.294118 0 0 0 0 0.2 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_1729_1408'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_1729_1408' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
  background-size: cover;
}
.quiz-page .quiz-progress .question-indicator.active {
  opacity: 1;
  cursor: pointer;
  pointer-events: all;
}
.quiz-page .quiz-progress .question-indicator.active::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='45' viewBox='0 0 44 45' fill='none'%3E%3Cg filter='url(%23filter0_d_1729_1466)'%3E%3Ccircle cx='20.0625' cy='20.8148' r='20' fill='%23F1A009'/%3E%3Ccircle cx='20.0625' cy='20.8148' r='19.5652' stroke='%232226F7' stroke-width='0.869565'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_1729_1466' x='0.0625' y='0.814819' width='43.4783' height='43.4783' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='3.47826' dy='3.47826'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.294118 0 0 0 0 0.2 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_1729_1466'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_1729_1466' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
  background-size: cover;
}
.quiz-page .quiz-progress .question-indicator.answered {
  opacity: 1;
  cursor: pointer;
  pointer-events: all;
}
.quiz-page .quiz-progress .current-score-indicator {
  position: absolute;
  top: -40px;
  right: 0;
  background-color: #fff;
  padding: 10px 15px;
  border-radius: 8px;
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #2226f7;
}
.quiz-page .quiz-progress .current-score-indicator .current-score-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 700;
  margin-bottom: 5px;
}
.quiz-page .quiz-progress .current-score-indicator .current-score-text .score-value {
  font-size: 20px;
  color: #2226f7;
}
.quiz-page .quiz-progress .current-score-indicator .current-score-text .score-separator {
  margin: 0 3px;
  color: #666;
}
.quiz-page .quiz-progress .current-score-indicator .current-score-text .max-score {
  color: #666;
  font-size: 18px;
}
.quiz-page .quiz-progress .current-score-indicator .progress-info {
  font-size: 14px;
  color: #666;
}
@media (min-width: 768px) {
  .quiz-page .quiz-progress {
    display: block;
  }
}
.quiz-page .quiz-btm {
  max-width: 1438px;
  margin: 0 auto;
}
.quiz-page .static-txt {
  color: #ff4b33;
  text-align: center;
  font-family: Unbounded;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.9px;
  margin: 45px 0;
}
.quiz-page .quiz-questions {
  position: relative;
  z-index: 2;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.quiz-page .quiz-questions .question-container {
  display: none;
}
.quiz-page .quiz-questions .question-container.active {
  display: block;
  -webkit-animation: fadeIn 0.5s ease;
          animation: fadeIn 0.5s ease;
}
.quiz-page .quiz-questions .question-index {
  color: var(--PD-EDU-Main-4-151419, #151419);
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -1.3px;
  text-transform: uppercase;
  margin: 0 0 40px 0;
}
.quiz-page .quiz-questions .question-title {
  color: var(--PD-EDU-Main-4-151419, #151419);
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.78px;
}
.quiz-page .quiz-questions .rating-text {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  padding: 10px 15px;
  background-color: rgba(34, 38, 247, 0.05);
  border-left: 4px solid #2226f7;
  border-radius: 0 8px 8px 0;
  color: #333;
}
.quiz-page .answers-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.quiz-page .answer-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 100%;
  border-radius: 7px;
  background: var(--PD-EU-Main-2-10, #2227f7);
  padding: 10px 20px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.quiz-page .answer-option input[type=radio] {
  display: none;
}
.quiz-page .answer-option .answer-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--PD-EU-Main-3-10, #ffd628);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.quiz-page .answer-option .answer-text:before {
  content: "";
  width: 26px;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #ffd628;
  margin-right: 15px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: #fff;
}
.quiz-page .answer-option.selected .answer-text:before {
  background-color: #e74512;
  -webkit-box-shadow: inset 0 0 0 4px #fff;
          box-shadow: inset 0 0 0 4px #fff;
}
.quiz-page .answer-option:not(:last-child) {
  margin-right: 40px;
  position: relative;
}
.quiz-page .answer-option:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -30px;
  height: 104px;
  width: 20px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='104' viewBox='0 0 20 104' fill='none'%3E%3Cpath d='M9.93055 50.57C9.84055 39.07 7.36055 27.72 2.83055 17.15C1.52055 14.09 0.560547 11.27 0.560547 9.6C0.560547 4.3 4.86055 0 10.1605 0C15.4605 0 19.7605 4.3 19.7605 9.6C19.7605 11.25 18.8305 14 17.5505 17C13.0805 27.5 10.6605 38.77 10.6205 50.18C10.6205 51.06 10.6205 51.93 10.6305 52.81C10.7205 64.31 13.2005 75.66 17.7305 86.23C19.0405 89.3 20.0005 92.11 20.0005 93.78C20.0005 99.08 15.7005 103.38 10.4005 103.38C5.10055 103.38 0.800547 99.08 0.800547 93.78C0.800547 92.13 1.73055 89.38 3.01055 86.38C7.48055 75.88 9.90055 64.61 9.94055 53.2C9.94055 52.33 9.94055 51.45 9.93055 50.57Z' fill='white'/%3E%3C/svg%3E");
  background-size: cover;
}
.quiz-page .quiz-navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 30px;
}
.quiz-page .quiz-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px 25px;
  border-radius: 50px;
  border: none;
  background-color: #2226f7;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.quiz-page .quiz-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.quiz-page .quiz-btn:not(:disabled):hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 5px 15px rgba(34, 38, 247, 0.3);
          box-shadow: 0 5px 15px rgba(34, 38, 247, 0.3);
}
.quiz-page .quiz-btn .quiz-btn-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 24px;
  height: 24px;
}
.quiz-page .quiz-btn .quiz-btn-text {
  margin: 0 10px;
}
.quiz-page .submit-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.quiz-page .quiz-submit-btn {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 11px 32px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  border-radius: 40px;
  border: 1px solid var(--PD-EDU-Main-4-FFFFFF, #fff);
  background: var(--PD-EU-Main-1-10, #e74512);
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
  /* PD EDU/3/Body 2 */
  font-family: "iCielNeuePlak";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.quiz-page .quiz-prev-btn {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 11px 32px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  border-radius: 40px;
  border: 1px solid var(--PD-EDU-Main-4-FFFFFF, #fff);
  opacity: 0.6;
  background: var(--PD-EU-Main-1-10, #e74512);
  color: #fff;
  /* PD EDU/3/Body 2 */
  font-family: "iCielNeuePlak";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.quiz-page .quiz-results {
  padding: 20px;
}
.quiz-page .quiz-results .quiz-results-title {
  font-size: 28px;
  font-weight: 700;
  color: #2226f7;
  margin-bottom: 20px;
  text-align: center;
}
.quiz-page .quiz-results .quiz-results-content {
  background-color: #fff;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.quiz-page .total-score-container {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 25px;
  border-bottom: 1px solid #e9ecef;
}
.quiz-page .total-score-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}
.quiz-page .total-score {
  font-size: 38px;
  font-weight: 700;
  color: #2226f7;
  margin-bottom: 5px;
}
.quiz-page .score-percentage {
  font-size: 20px;
  font-weight: 600;
  color: #28a745;
  margin-bottom: 10px;
}
.quiz-page .score-bar {
  height: 12px;
  background-color: #e9ecef;
  border-radius: 6px;
  margin: 0 auto;
  max-width: 300px;
  overflow: hidden;
}
.quiz-page .score-progress {
  height: 100%;
  background-color: #28a745;
  border-radius: 6px;
  -webkit-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}
.quiz-page .results-categories {
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 25px;
}
.quiz-page .result-category {
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 15px;
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
          box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}
.quiz-page .category-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px;
}
.quiz-page .category-name {
  font-size: 18px;
  font-weight: 700;
  color: #2226f7;
}
.quiz-page .category-percentage {
  font-size: 18px;
  font-weight: 700;
  color: #28a745;
}
.quiz-page .category-progress {
  height: 10px;
  background-color: #e9ecef;
  border-radius: 5px;
  margin-bottom: 15px;
  overflow: hidden;
}
.quiz-page .progress-bar {
  height: 100%;
  background-color: #2226f7;
  border-radius: 5px;
}
.quiz-page .category-description,
.quiz-page .category-strengths {
  margin: 12px 0;
  font-size: 15px;
  line-height: 1.5;
  color: #444;
}
.quiz-page .category-strengths {
  background-color: rgba(34, 38, 247, 0.05);
  padding: 10px;
  border-radius: 8px;
}
.quiz-page .category-strengths strong {
  color: #2226f7;
}
.quiz-page .category-careers {
  margin-top: 15px;
}
.quiz-page .category-careers h4 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}
.quiz-page .category-careers ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  padding-left: 20px;
}
.quiz-page .category-careers li {
  margin-bottom: 5px;
}
.quiz-page .results-note {
  margin-top: 30px;
  font-style: italic;
  color: #666;
  text-align: center;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@media (max-width: 1440px) {
  .quiz-page-content {
    padding: 95px 20px;
  }
}
@media (max-width: 1440px) {
  .quiz-page .quiz-questions .question-index {
    font-size: 18px;
    margin: 0 0 10px 0;
  }
  .quiz-page .quiz-questions .question-title {
    font-size: 18px;
  }
  .quiz-page .quiz-container {
    padding: 45px 40px;
    min-height: 200px;
  }
  .quiz-page .answer-option {
    padding: 10px;
  }
  .quiz-page .answer-option .answer-text {
    font-size: 14px;
  }
  .quiz-page .answer-option .answer-text::before {
    width: 20px;
    min-width: 20px;
    height: 20px;
  }
  .quiz-page .answer-option:not(:last-child)::after {
    height: 80px;
    width: 15px;
  }
  .quiz-page .quiz-nav {
    width: 60px;
    height: 60px;
  }
  .quiz-page .quiz-main-content {
    padding-top: 40px;
    margin-top: 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  .quiz-page .quiz-main-content > svg {
    max-width: 100px;
  }
  .quiz-page .quiz-btm {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  .quiz-page-title-txt {
    font-size: 32px;
  }
  .quiz-page .static-txt {
    margin: 24px 0;
    font-size: 16px;
  }
  .quiz-page .quiz-progress {
    margin: 32px auto;
  }
}
@media (max-width: 1200px) {
  .quiz-page .quiz-questions .question-index {
    font-size: 20px;
  }
  .quiz-page .quiz-questions .question-title {
    font-size: 16px;
  }
  .quiz-page .static-txt {
    margin: 25px 0;
  }
  .quiz-page .quiz-container {
    padding: 45px 20px;
  }
  .quiz-page .quiz-page-title-txt {
    font-size: 32px;
  }
}
@media (max-width: 992px) {
  .quiz-page .quiz-page-content {
    padding: 100px 5vw;
  }
  .quiz-page .quiz-container {
    background-color: #fff;
    min-height: 226px;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='335' height='226' viewBox='0 0 335 226' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M335 113C335 175.407 260.008 226 167.499 226C74.9923 226 0 175.407 0 113C0 50.5931 74.9923 0 167.501 0C260.008 0 335 50.5931 335 113Z' fill='%23FCFDFF'/%3E%3C/svg%3E%0A");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    fill: #fcfdff;
    -webkit-filter: drop-shadow(0px 0px 180px #ffea00);
            filter: drop-shadow(0px 0px 180px #ffea00);
  }
  .quiz-page .quiz-bg-svg {
    display: none;
  }
  .quiz-page .answers-container {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .quiz-page .answers-container .answer-option {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
  .quiz-page .answers-container .answer-option:not(:last-child) {
    margin-bottom: 16px;
    margin-right: 0;
  }
  .quiz-page .answers-container .answer-option:not(:last-child)::after {
    content: none;
  }
  .quiz-page .quiz-page-title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .quiz-page .quiz-nav {
    width: 40px;
    height: 40px;
  }
  .quiz-page .quiz-nav svg {
    width: 15px;
    height: 15px;
  }
  .quiz-page .quiz-main-content {
    min-height: auto;
  }
  .quiz-page .quiz-main-content > svg {
    display: none;
  }
  .quiz-page .quiz-page-title-txt {
    font-size: 26px;
  }
}
@media (max-width: 768px) {
  .quiz-page .quiz-container {
    padding: 20px 15px;
  }
  .quiz-page .quiz-navigation {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 15px;
  }
  .quiz-page .quiz-btn {
    margin-top: 25px;
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 14px;
    padding: 6px 15px;
  }
  .quiz-page .quiz-progress .question-indicator {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
  .quiz-page .quiz-progress .current-score-indicator {
    position: static;
    margin-bottom: 15px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .quiz-page .quiz-progress .current-score-indicator .current-score-text {
    margin-bottom: 0;
  }
  .quiz-page .quiz-questions .question-title {
    font-size: 14px;
  }
  .quiz-page .quiz-questions .question-index {
    padding: 4px 10px;
  }
  .quiz-page .quiz-questions .rating-text {
    font-size: 16px;
    padding: 8px 12px;
    margin-bottom: 15px;
  }
  .quiz-page .category-careers ul {
    grid-template-columns: 1fr;
  }
  .quiz-page .quiz-page-title-txt {
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 0px #2226f7;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.9px;
    text-transform: uppercase;
  }
}

/* Styles for Exit Confirmation Modal */
.exit-confirm-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  /* Increased z-index to ensure it's on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.exit-confirm-modal .modals-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--PD-EDU-Main-4-707072, #707072);
  gap: 30px;
  /* PD EDU/3/Body 2 */
  font-family: "iCielNeuePlak";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 30px;
}
.exit-confirm-modal .modals-head h2 {
  color: #2226f7;
  /* PD EDU/1/Heading 9 */
  font-family: Unbounded;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.78px;
  margin: 0 0 16px 0;
}
.exit-confirm-modal .modals-head p {
  margin: 0;
}
.exit-confirm-modal form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.exit-confirm-modal form .modal-btn {
  grid-column: span 2;
}
.exit-confirm-modal .form-group {
  font-size: 14px;
  font-family: "iCielNeuePlak";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.exit-confirm-modal .form-group label {
  color: var(--PD-EDU-Main-4-2A2933, #2a2933);
  margin-bottom: 6px;
}
.exit-confirm-modal .form-group input {
  border-radius: 6px;
  background: #f5f5f5;
  padding: 16px 20px;
  line-height: 20px;
}
.exit-confirm-modal .form-group input::-webkit-input-placeholder {
  opacity: 1;
  color: #707072;
  font-family: "iCielNeuePlak";
  -webkit-transition: 0.1s all linear;
  transition: 0.1s all linear;
}
.exit-confirm-modal .form-group input::-moz-placeholder {
  opacity: 1;
  color: #707072;
  font-family: "iCielNeuePlak";
  -moz-transition: 0.1s all linear;
  transition: 0.1s all linear;
}
.exit-confirm-modal .form-group input:-ms-input-placeholder {
  opacity: 1;
  color: #707072;
  font-family: "iCielNeuePlak";
  -ms-transition: 0.1s all linear;
  transition: 0.1s all linear;
}
.exit-confirm-modal .form-group input::-ms-input-placeholder {
  opacity: 1;
  color: #707072;
  font-family: "iCielNeuePlak";
  -ms-transition: 0.1s all linear;
  transition: 0.1s all linear;
}
.exit-confirm-modal .form-group input::placeholder {
  opacity: 1;
  color: #707072;
  font-family: "iCielNeuePlak";
  -webkit-transition: 0.1s all linear;
  transition: 0.1s all linear;
}
.exit-confirm-modal .form-group input:focus {
  outline: none;
}
.exit-confirm-modal .form-group input:focus::-webkit-input-placeholder {
  color: transparent;
}
.exit-confirm-modal .form-group input:focus::-moz-placeholder {
  color: transparent;
}
.exit-confirm-modal .form-group input:focus:-ms-input-placeholder {
  color: transparent;
}
.exit-confirm-modal .form-group input:focus::-ms-input-placeholder {
  color: transparent;
}
.exit-confirm-modal .form-group input:focus::placeholder {
  color: transparent;
}
.exit-confirm-modal .close-modal {
  font-size: 28px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
  position: absolute;
  top: 16px;
  right: 12px;
}
.exit-confirm-modal .close-modal:hover {
  color: #333;
}
.exit-confirm-modal .modal-body {
  padding: 60px;
  font-size: 16px;
  line-height: 1.5;
  color: #444;
}
.exit-confirm-modal .modal-btn {
  margin: 0 auto;
  border-radius: 40px;
  border: 1px solid var(--PD-EDU-Main-4-FFFFFF, #fff);
  background: var(--PD-EU-Main-1-10, #e74512);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 11px 32px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
  /* PD EDU/3/Body 2 */
  font-family: "iCielNeuePlak";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.exit-confirm-modal .modal-content {
  background-color: white;
  border-radius: 12px;
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  max-width: 686px;
  width: 90%;
  -webkit-animation: modalAppear 0.3s ease-out;
          animation: modalAppear 0.3s ease-out;
  position: relative;
  max-height: 85vh;
  overflow-y: scroll;
  overflow-x: hidden;
  overflow-y: scroll; /* Add the ability to scroll */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.exit-confirm-modal .modal-content::-webkit-scrollbar {
  display: none;
}
.exit-confirm-modal .error {
  color: var(--PD-EU-Main-1-10, #e74512);
  font-size: 12px;
}
.exit-confirm-modal.apply-modal .modal-content {
  border-radius: 30px;
  background: var(--PD-EU-Main-2-10, #2227f7);
}
@media (max-width: 768px) {
  .exit-confirm-modal .modal-body {
    padding: 20px;
  }
  .exit-confirm-modal form {
    grid-template-columns: 1fr;
  }
  .exit-confirm-modal form .modal-btn {
    grid-column: span 1;
  }
  .exit-confirm-modal .close-modal {
    top: 24px;
    right: 20px;
  }
  .exit-confirm-modal .close-modal img {
    width: 30px;
    height: 30px;
  }
  .exit-confirm-modal .modals-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    font-size: 14px;
  }
  .exit-confirm-modal .modals-head > img {
    width: 40px;
    height: 40px;
  }
  .exit-confirm-modal .modals-head h2 {
    font-size: 18px;
  }
}

.apply-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.apply-modal .modals-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: var(--PD-EDU-Main-4-707072, #ffd628);
  /* PD EDU/3/Body 2 */
  font-family: "iCielNeuePlak";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 30px 0;
}
.apply-modal .modals-head h2 {
  color: #cef564;
  letter-spacing: -0.78px;
  /* PD EDU/1/Heading 9 */
  font-family: Unbounded;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.78px;
  margin: 0 0 6px 0;
}
.apply-modal .modals-head p {
  margin: 0;
}
.apply-modal .form-group {
  margin-bottom: 22px;
  font-size: 14px;
  font-family: "iCielNeuePlak";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.apply-modal .form-group label {
  color: var(--PD-EDU-Main-4-2A2933, #ffd628);
  margin-bottom: 6px;
}
.apply-modal .form-group input {
  line-height: 20px;
}
.apply-modal .form-group input,
.apply-modal .form-group select {
  border-radius: 6px;
  background: #f5f5f5;
  padding: 16px 20px;
  line-height: 20px;
  width: 100%;
}
.apply-modal .form-group input::-webkit-input-placeholder, .apply-modal .form-group select::-webkit-input-placeholder {
  opacity: 1;
  color: #707072;
  font-family: "iCielNeuePlak";
  -webkit-transition: 0.1s all linear;
  transition: 0.1s all linear;
}
.apply-modal .form-group input::-moz-placeholder, .apply-modal .form-group select::-moz-placeholder {
  opacity: 1;
  color: #707072;
  font-family: "iCielNeuePlak";
  -moz-transition: 0.1s all linear;
  transition: 0.1s all linear;
}
.apply-modal .form-group input:-ms-input-placeholder, .apply-modal .form-group select:-ms-input-placeholder {
  opacity: 1;
  color: #707072;
  font-family: "iCielNeuePlak";
  -ms-transition: 0.1s all linear;
  transition: 0.1s all linear;
}
.apply-modal .form-group input::-ms-input-placeholder, .apply-modal .form-group select::-ms-input-placeholder {
  opacity: 1;
  color: #707072;
  font-family: "iCielNeuePlak";
  -ms-transition: 0.1s all linear;
  transition: 0.1s all linear;
}
.apply-modal .form-group input::placeholder,
.apply-modal .form-group select::placeholder {
  opacity: 1;
  color: #707072;
  font-family: "iCielNeuePlak";
  -webkit-transition: 0.1s all linear;
  transition: 0.1s all linear;
}
.apply-modal .form-group input:focus,
.apply-modal .form-group select:focus {
  outline: none;
}
.apply-modal .form-group input:focus::-webkit-input-placeholder, .apply-modal .form-group select:focus::-webkit-input-placeholder {
  color: transparent;
}
.apply-modal .form-group input:focus::-moz-placeholder, .apply-modal .form-group select:focus::-moz-placeholder {
  color: transparent;
}
.apply-modal .form-group input:focus:-ms-input-placeholder, .apply-modal .form-group select:focus:-ms-input-placeholder {
  color: transparent;
}
.apply-modal .form-group input:focus::-ms-input-placeholder, .apply-modal .form-group select:focus::-ms-input-placeholder {
  color: transparent;
}
.apply-modal .form-group input:focus::placeholder,
.apply-modal .form-group select:focus::placeholder {
  color: transparent;
}
.apply-modal .custom-select {
  display: block;
  position: relative;
}
.apply-modal .custom-select::before {
  content: "";
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6' fill='none'%3E%3Cpath d='M12 0H0L6 6L12 0Z' fill='%232227F7'/%3E%3C/svg%3E");
  width: 12px;
  height: 6px;
  right: 10px;
  top: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.apply-modal .custom-select select {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.apply-modal-close {
  font-size: 28px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
  position: absolute;
  top: 16px;
  right: 12px;
}
.apply-modal .close-modal:hover {
  color: #333;
}
.apply-modal .modal-body {
  padding: 30px 60px;
  font-size: 16px;
  line-height: 1.5;
  color: #444;
}
.apply-modal .modal-btn {
  margin: 0 auto;
  border-radius: 40px;
  border: 1px solid var(--PD-EDU-Main-4-FFFFFF, #fff);
  background: var(--PD-EU-Main-1-10, #e74512);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 11px 32px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
  /* PD EDU/3/Body 2 */
  font-family: "iCielNeuePlak";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.apply-modal .modal-content {
  border-radius: 30px;
  background: var(--PD-EU-Main-2-10, #2227f7);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  max-width: 864px;
  width: 90%;
  -webkit-animation: modalAppear 0.3s ease-out;
          animation: modalAppear 0.3s ease-out;
  position: relative;
  max-height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.apply-modal .modal-content::-webkit-scrollbar {
  display: none;
}
.apply-modal .error {
  color: var(--PD-EU-Main-1-10, #e74512);
  font-size: 12px;
}
.apply-modal .modals-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.apply-modal .modals-form-grid-three {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1440px) {
  .apply-modal .modal-body {
    padding: 32px;
  }
  .apply-modal .form-group input, .apply-modal .form-group select {
    padding: 12px 16px;
  }
  .apply-modal .modals-head {
    margin-bottom: 16px;
  }
}
@media (max-width: 768px) {
  .apply-modal .modal-body {
    padding: 20px;
  }
  .apply-modal .apply-modal-close {
    top: 24px;
    right: 20px;
  }
  .apply-modal .apply-modal-close img {
    width: 30px;
    height: 30px;
  }
  .apply-modal .modals-form-grid {
    grid-template-columns: 1fr;
  }
  .apply-modal .modals-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    font-size: 14px;
  }
  .apply-modal .modals-head > img {
    width: 40px;
    height: 40px;
  }
  .apply-modal .modals-head h2 {
    font-size: 18px;
  }
  .apply-modal .modal-content {
    width: 100%;
    border-radius: 6px;
  }
}

.exit-confirm-modal.visible,
.apply-modal.visible {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
}

@-webkit-keyframes modalAppear {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes modalAppear {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
#page-result-realistic {
  background-color: #2227f7;
  --header-bg-color: var(--PD-EU-Main-1-2, rgba(231, 69, 18, 0.2));
  --color-btn: #cef564;
  --color-btn-txt: #5552fa;
  --color-heading: #fff;
  --color-susheading: #cef564;
  --bg-field: url("../images/tracnghiem/bg-field-result-realistic.png") no-repeat center center;
  --bg-wavy: url("../images/tracnghiem/bg-wavy-realistic.png") no-repeat center center;
  --bg-result: url("../images/tracnghiem/bg-result-realistic.png") no-repeat center center;
}
#page-result-artistic {
  background-color: #e63b25;
  --header-bg-color: var(--PD-EU-Main-1-2, rgba(231, 69, 18, 0.2));
  --color-btn: #fca4e0;
  --color-btn-txt: #ffffff;
  --color-heading: #ffff51;
  --color-susheading: #fca4e0;
  --bg-field: url("../images/tracnghiem/bg-field-result.png") no-repeat center center;
  --bg-wavy: url("../images/tracnghiem/bg-wavy-artistic.png") no-repeat center center;
  --bg-result: url("../images/tracnghiem/bg-result-artistic.png") no-repeat center center;
}
#page-result-social {
  background-color: #ffff51;
  --header-bg-color: var(--PD-EU-Main-1-2, rgba(231, 69, 18, 0.2));
  --color-btn: #f1a009;
  --color-btn-txt: #ffffff;
  --color-heading: #2a2933;
  --color-susheading: #f96526;
  --bg-field: url("../images/tracnghiem/bg-field-result.png") no-repeat center center;
  --bg-wavy: url("../images/tracnghiem/bg-wavy-social.png") no-repeat center center;
  --bg-result: url("../images/tracnghiem/bg-result-social.png") no-repeat center center;
}
#page-result-social .result-page-fields .scrollable-fields a {
  color: #f96526;
}
#page-result-social .result-page-content {
  background: url("../images/bg-content-result-black.png") no-repeat top center;
}
#page-result-social .result-page-content .nd-content {
  color: var(--color-heading);
}
#page-result-social .result-page-content .title {
  color: #f1a009;
}
#page-result-social .result-page-static {
  color: #f96526;
}
#page-result-enterprising {
  background-color: #f96526;
  --header-bg-color: var(--PD-EU-Main-1-2, rgba(231, 69, 18, 0.2));
  --color-btn: #11c08c;
  --color-btn-txt: #ffffff;
  --color-heading: #ffff51;
  --color-susheading: #ffd628;
  --bg-field: url("../images/tracnghiem/bg-field-result.png") no-repeat center center;
  --bg-wavy: url("../images/tracnghiem/bg-wavy-enterprising.png") no-repeat center center;
  --bg-result: url("../images/tracnghiem/bg-result-enterprising.png") no-repeat center center;
}
#page-result-conventional {
  background-color: #155fca;
  --header-bg-color: var(--PD-EU-Main-1-2, rgba(231, 69, 18, 0.2));
  --color-btn: #f96526;
  --color-btn-txt: #ffffff;
  --color-heading: #ffff51;
  --color-susheading: #11c08c;
  --bg-field: url("../images/tracnghiem/bg-field-result.png") no-repeat center center;
  --bg-wavy: url("../images/tracnghiem/bg-wavy-conventional.png") no-repeat center center;
  --bg-result: url("../images/tracnghiem/bg-result-conventional.png") no-repeat center center;
}
#page-result-investigative {
  background-color: #28b963;
  --header-bg-color: var(--PD-EU-Main-1-2, rgba(231, 69, 18, 0.2));
  --color-btn: #f3b122;
  --color-btn-txt: #5317ff;
  --color-heading: #fff;
  --color-susheading: #cef564;
  --bg-field: url("../images/tracnghiem/bg-field-result.png") no-repeat center center;
  --bg-wavy: url("../images/tracnghiem/bg-wavy-investigative.png") no-repeat center center;
  --bg-result: url("../images/tracnghiem/bg-result-investigative.png") no-repeat center center;
}

.result-page {
  position: relative;
  min-height: 100vh;
  background: var(--bg-result);
  background-size: cover;
}
.result-page-main {
  padding: 145px 5vw;
  position: relative;
}
.result-page-main .icon {
  position: relative;
  margin-top: -115px;
}
.result-page h1 {
  color: var(--color-heading);
  text-align: center;
  font-family: SVN-Whimsy;
  font-size: 140px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -4.2px;
  margin: 0 0 10px 0;
}
.result-page h2 {
  color: var(--color-susheading);
  text-align: center;
  font-family: "Braah One";
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -1.8px;
}
.result-page-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 30px;
}
.result-page-heading .title {
  text-align: center;
}
.result-page .bg-logo-floating {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  margin-top: -100px;
}
.result-page-fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  margin-top: -200px;
  z-index: 2;
}
.result-page-fields::before {
  content: "";
  position: absolute;
  top: 15%;
  left: 50%;
  width: 100vw;
  height: 100vw;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: var(--bg-field);
  background-size: cover;
  z-index: 1;
  pointer-events: none;
  opacity: 0.3;
}
.result-page-fields .sharing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
}
.result-page-fields .sharing-sku {
  padding: 18px 60px;
  border-radius: 60px;
  background: var(--color-btn);
  color: var(--color-btn-txt);
  text-align: center;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.84px;
}
.result-page-fields .btn-share {
  width: 71px;
  height: 71px;
  border-radius: 50%;
  background-color: var(--color-btn);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.result-page-fields .btn-share svg path {
  fill: var(--color-btn-txt);
}
.result-page-fields .scrollable-fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 30px;
  max-width: 950px;
  padding: 30px 0;
}
.result-page-fields .scrollable-fields a {
  color: #fff;
  font-family: "Braah One";
  font-size: 26px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.78px;
  white-space: nowrap;
}
.result-page-fields .scrollable-fields a:hover {
  color: var(--color-btn-txt);
}
.result-page-content {
  background: url("../images/bg-content-result.png") no-repeat top center;
  background-size: contain;
  max-width: 1424px;
  margin: 0 auto;
  padding: 40px 142px;
  margin-top: 45px;
}
.result-page-content .title {
  color: var(--PD-EU-Main-3-10, #ffd628);
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -1.02px;
  margin: 0 0 1rem 0;
}
.result-page-content .nd-content {
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
  font-family: "iCielNeuePlak";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px; /* 144.444% */
}
.result-page-content .nd-content p {
  margin: 0 0 1rem 0;
}
.result-page-qr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  margin: 40px 0;
}
.result-page-qr .name {
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
  font-family: "iCielNeuePlak";
  font-size: 12px;
  font-weight: 400;
  line-height: 20px; /* 166.667% */
}
.result-page-qr .qr-code {
  background: url("../images/bg-qr-code.png") no-repeat center center;
  background-size: cover;
  padding: 45px;
}
.result-page-static {
  color: var(--PD-EU-Main-3-10, #ffd628);
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.72px;
}
.result-page .wavy-transparent {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}
.result-page .wavy-transparent img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.result-page-celeb {
  background: var(--bg-wavy);
  background-size: cover;
  padding: 166px 0 116px;
}
.result-page-celeb-wrap {
  padding: 0 5vw;
}
.result-page-celeb .title {
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -1.02px;
  margin: 0 0 1rem 0;
}
.result-page-celeb .sub-title {
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
  font-family: "iCielNeuePlak";
  font-size: 18px;
  font-weight: 400;
  line-height: 26px; /* 144.444% */
}
.result-page-celeb .list-celeb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-top: 2rem;
}
.result-page-celeb .list-celeb .item {
  padding: 16px;
  border-radius: 16px;
  background: #fff1eb;
  height: 100%;
  text-align: center;
  width: calc(16.6666666667% - 16.6666666667px);
  max-width: calc(16.6666666667% - 16.6666666667px);
  margin-bottom: 20px;
  position: relative;
}
.result-page-celeb .list-celeb .item:not(:nth-child(6n)) {
  margin-right: 20px;
}
.result-page-celeb .list-celeb .item .img {
  position: relative;
  padding-bottom: 150%;
}
.result-page-celeb .list-celeb .item .img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  max-height: 354px;
}
.result-page-celeb .list-celeb .item .name {
  color: var(--PD-EU-Main-2-10, #2227f7);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.54px;
  margin: 10px 0 0;
}
.result-page-celeb .list-celeb .item > button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
}
.result-page-celeb .celeb-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: none;
  opacity: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2.5rem;
}
.result-page-celeb .celeb-modal-wrapper {
  margin: 2.5rem auto;
  border-radius: 16px;
  background: #fff1eb;
  padding: 40px;
  max-width: 704px;
  width: 100%;
  display: grid;
  grid-template-columns: 142px 1fr;
  gap: 30px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.result-page-celeb .celeb-modal-wrapper .close-celeb-modal {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  color: #000;
  font-size: 24px;
  cursor: pointer;
}
.result-page-celeb .celeb-modal-wrapper .img {
  margin-bottom: 20px;
}
.result-page-celeb .celeb-modal-wrapper .img img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.result-page-celeb .celeb-modal-wrapper .celeb-modal-name {
  text-align: left;
}
.result-page-celeb .celeb-modal-wrapper .celeb-modal-name h5 {
  color: var(--PD-EU-Main-2-10, #2227f7);
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.54px;
  margin-bottom: 10px;
}
.result-page-celeb .celeb-modal-wrapper .celeb-modal-name .celeb-modal-desc {
  color: var(--PD-EU-Main-4-FFFFFF, #fff);
  font-family: "iCielNeuePlak";
  font-size: 16px;
  line-height: 1.5;
  color: #2a2933;
}
.result-page-celeb .celeb-modal.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
}
.result-page .bg-logo-floating-mb {
  display: none;
}
@media (max-width: 1440px) {
  .result-page h1 {
    font-size: 100px;
  }
  .result-page h2 {
    font-size: 40px;
  }
  .result-page-fields {
    margin-top: -100px;
    position: relative;
  }
  .result-page-fields .sharing-sku {
    font-size: 20px;
    padding: 10px 40px;
  }
  .result-page-fields .btn-share {
    width: 45px;
    height: 45px;
  }
  .result-page-fields .btn-share svg {
    max-width: 26px;
  }
  .result-page-fields .scrollable-fields {
    gap: 20px;
    max-width: 50vw;
  }
  .result-page-fields .scrollable-fields a {
    font-size: 20px;
  }
  .result-page-content {
    padding: 40px 80px;
  }
  .result-page-celeb {
    padding: 100px 0;
  }
  .result-page .list-celeb .item {
    width: calc(25% - 26.6666666667px);
    max-width: calc(25% - 26.6666666667px);
  }
  .result-page .list-celeb .item:nth-child(4n) {
    margin-right: 0 !important;
  }
  .result-page .list-celeb .item:not(:nth-child(4n)) {
    margin-right: 20px !important;
  }
}
@media (max-width: 992px) {
  .result-page-main {
    padding: 110px 20px 40px;
  }
  .result-page h1 {
    font-size: 80px;
  }
  .result-page h2 {
    font-size: 32px;
  }
  .result-page-heading img {
    max-width: 100px;
  }
  .result-page-fields {
    margin-top: -100px;
  }
  .result-page-fields .sharing-sku {
    font-size: 16px;
    padding: 10px 40px;
  }
  .result-page-fields .btn-share {
    width: 45px;
    height: 45px;
  }
  .result-page-fields .btn-share svg {
    max-width: 26px;
  }
  .result-page-fields .scrollable-fields {
    gap: 16px;
    max-width: 50vw;
  }
  .result-page-fields .scrollable-fields a {
    font-size: 18px;
  }
  .result-page-content {
    padding: 40px;
  }
  .result-page-content .nd-content {
    font-size: 14px;
  }
  .result-page .list-celeb .item {
    width: calc(33.3333333333% - 13.3333333333px);
    max-width: calc(33.3333333333% - 13.3333333333px);
  }
  .result-page .list-celeb .item:nth-child(3n) {
    margin-right: 0 !important;
  }
  .result-page .list-celeb .item:not(:nth-child(3n)) {
    margin-right: 20px !important;
  }
}
@media (max-width: 768px) {
  .result-page h1 {
    font-size: 36px;
  }
  .result-page h2 {
    font-size: 18px;
  }
  .result-page-heading {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 20px;
  }
  .result-page-heading img {
    max-width: 70px;
  }
  .result-page-heading .title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
  }
  .result-page .bg-logo-floating-mb {
    display: block;
    margin: 0 -20px;
    width: calc(100% + 40px);
  }
  .result-page .bg-logo-floating-mb img {
    width: 100%;
  }
  .result-page .bg-logo-floating {
    display: none;
  }
  .result-page .scrollable-fields {
    max-width: 100%;
  }
  .result-page .result-page-fields {
    margin-top: -60px;
  }
  .result-page .result-page-fields .sharing-sku {
    font-size: 20px;
    padding: 10px 20px;
  }
  .result-page .result-page-fields .btn-share {
    width: 45px;
    height: 45px;
  }
  .result-page .result-page-fields .btn-share svg {
    max-width: 20px;
  }
  .result-page .result-page-content {
    padding: 0;
    margin-top: 30px;
    background: transparent;
  }
  .result-page .result-page-content .title {
    font-size: 26px;
  }
  .result-page .result-page-content .nd-content {
    font-size: 12px;
  }
  .result-page .result-page-qr {
    gap: 20px;
    margin: 40px 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .result-page .result-page-qr .icon-arrow {
    display: none;
  }
  .result-page .result-page-qr .qr-code {
    padding: 1rem;
  }
  .result-page .result-page-static {
    font-size: 12px;
    letter-spacing: -0.36px;
  }
  .result-page .result-page-celeb .title {
    font-size: 20px;
  }
  .result-page .result-page-celeb .sub-title {
    font-size: 14px;
  }
  .result-page .result-page-celeb .list-celeb .item {
    width: calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
  .result-page .result-page-celeb .list-celeb .item:nth-child(2n) {
    margin-right: 0 !important;
  }
  .result-page .result-page-celeb .list-celeb .item:not(:nth-child(2n)) {
    margin-right: 20px !important;
  }
}

#page-scores {
  background: #fff3e9 url("../../images/kiemtradiem/bg-kiemtradiem.png") no-repeat center center;
  background-size: cover;
}
#page-scores #header .header-main {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.page-scores-main {
  padding: 165px 0 0;
}
.page-scores-main .error {
  color: var(--PD-EU-Main-1-10, #e74512);
  text-overflow: ellipsis;
  font-family: "iCielNeuePlak";
  font-size: 12px;
  font-weight: 400;
  line-height: 20px; /* 166.667% */
}
.page-scores-title {
  margin-bottom: 60px;
}
.page-scores-title h1 {
  margin: 0;
  text-align: center;
  font-size: 50px;
  line-height: normal;
  letter-spacing: -2.5px;
  text-transform: uppercase;
  font-family: Unbounded;
  font-weight: 700;
}
.page-scores-title h1 span {
  display: block;
}
.page-scores-title h1 .first-text {
  color: var(--PD-EDU-Main-4-2A2933, #2a2933);
  text-shadow: 3px 3px 0px #f1a009;
}
.page-scores-title h1 .second-text {
  color: var(--PD-EU-Main-1-10, #e74512);
  text-shadow: 3px 3px 0px #f1a009;
}
.page-scores-title h1 .small-text {
  color: var(--PD-EDU-Main-4-2A2933, #2a2933);
  text-shadow: none;
  font-family: Unbounded;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.page-scores-userform {
  padding-bottom: 85px;
}
.page-scores-userform-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.page-scores-userform-grid .form-group {
  grid-column: span 2;
}
.page-scores-userform-grid .form-group.form-group-double {
  grid-column: span 3;
}
.page-scores-userform label {
  display: block;
  margin: 0 0 6px 0;
  color: var(--PD-EDU-Main-4-2A2933, #2a2933);
  text-overflow: ellipsis;
  font-family: "iCielNeuePlak";
  font-size: 14px;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}
.page-scores-userform input,
.page-scores-userform select {
  width: 100%;
  border-radius: 6px;
  background: #fff;
  padding: 16px 20px;
}
.page-scores-container {
  max-width: 1470px;
  margin: 0 auto;
  padding: 0 20px;
}
.page-scores-subtitle {
  color: var(--PD-EU-Main-2-10, #2227f7);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.6px;
  margin: 0 0 36px 0;
}
.page-scores-subtitle-white {
  color: white;
}
.page-scores-subject {
  background: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='929' viewBox='0 0 1920 929' fill='none'%3E%3Cpath d='M83.5658 22.611C46.5149 6.24953 12.4174 1.49411 0 1.16156V929H1920L1920 22.6117C1855.56 54.0376 1806.23 35.0823 1749.85 12.6352C1693.47 -9.81183 1631.55 4.65407 1602.35 17.6235C1573.15 30.5929 1506.7 50.047 1451.33 27.6C1395.95 5.15289 1345.11 -13.3036 1270.1 15.6282C1195.09 44.56 1155.83 45.5576 1079.31 15.6282C1002.79 -14.3012 945.905 7.14819 918.721 18.6211C891.536 30.0941 842.706 54.0372 758.637 22.1124C674.567 -9.81228 636.812 -4.82404 570.865 22.1124C504.919 49.0489 457.598 38.0745 426.89 24.6062C354.903 -5.82201 310.603 -6.81966 239.119 19.618C167.635 46.0557 129.879 43.0627 83.5658 22.611Z' fill='%23F1A009' /%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 90px 0;
}
.page-scores-list-subject {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 20px;
}
.page-scores-list-selected {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  overflow: auto;
}
.page-scores-list-selected > div {
  position: relative;
  margin-right: 20px;
  position: relative;
}
.page-scores-list-selected > div::after {
  content: "";
  position: absolute;
  right: -20px;
  width: 6px;
  height: 33px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='34' viewBox='0 0 6 34' fill='none'%3E%3Cpath d='M2.89198 16.6425C2.8642 12.9716 2.09877 9.34852 0.700617 5.97446C0.296296 4.99768 0 4.0975 0 3.56442C0 1.87261 1.32716 0.5 2.96296 0.5C4.59877 0.5 5.92593 1.87261 5.92593 3.56442C5.92593 4.09112 5.63889 4.96895 5.24383 5.92658C3.8642 9.27829 3.11728 12.8758 3.10494 16.518C3.10494 16.7989 3.10494 17.0766 3.10802 17.3575C3.1358 21.0284 3.90123 24.6515 5.29938 28.0255C5.7037 29.0055 6 29.9025 6 30.4356C6 32.1274 4.67284 33.5 3.03704 33.5C1.40123 33.5 0.0740741 32.1274 0.0740741 30.4356C0.0740741 29.9089 0.361111 29.031 0.756173 28.0734C2.1358 24.7217 2.88272 21.1242 2.89506 17.482C2.89506 17.2043 2.89506 16.9234 2.89198 16.6425Z' fill='%23FFD628'/%3E%3C/svg%3E");
  background-size: cover;
}
@media (max-width: 768px) {
  .page-scores-list-selected > div:last-child::after {
    display: none;
  }
}
.page-scores-subject-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  border-radius: 7px;
  background: var(--PD-EU-Main-2-10, #2227f7);
  color: var(--PD-EU-Main-3-10, #ffd628);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  cursor: pointer;
}
.page-scores-subject-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.page-scores-calculate {
  margin: 80px 0;
}
.page-scores-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.page-scores-row:not(:last-child) {
  margin-bottom: 32px;
}
.page-scores-row > div:not(:first-child) {
  position: relative;
  margin-right: 70px;
  position: relative;
}
.page-scores-row > div:not(:first-child)::after {
  content: "";
  position: absolute;
  right: -35px;
  width: 6px;
  height: 33px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='34' viewBox='0 0 6 34' fill='none'%3E%3Cpath d='M2.89198 16.6425C2.8642 12.9716 2.09877 9.34852 0.700617 5.97446C0.296296 4.99768 0 4.0975 0 3.56442C0 1.87261 1.32716 0.5 2.96296 0.5C4.59877 0.5 5.92593 1.87261 5.92593 3.56442C5.92593 4.09112 5.63889 4.96895 5.24383 5.92658C3.8642 9.27829 3.11728 12.8758 3.10494 16.518C3.10494 16.7989 3.10494 17.0766 3.10802 17.3575C3.1358 21.0284 3.90123 24.6515 5.29938 28.0255C5.7037 29.0055 6 29.9025 6 30.4356C6 32.1274 4.67284 33.5 3.03704 33.5C1.40123 33.5 0.0740741 32.1274 0.0740741 30.4356C0.0740741 29.9089 0.361111 29.031 0.756173 28.0734C2.1358 24.7217 2.88272 21.1242 2.89506 17.482C2.89506 17.2043 2.89506 16.9234 2.89198 16.6425Z' fill='%23FFD628'/%3E%3C/svg%3E");
  background-size: cover;
}
.page-scores-row > div:last-child {
  margin-right: 0;
}
.page-scores-row > div:last-child::after {
  display: none;
}
.page-scores-label-name {
  color: #000;
  font-family: Unbounded;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px; /* 137.5% */
  width: 270px;
  min-width: 270px;
}
.page-scores-label-subject {
  border-radius: 6px;
  padding: 8px 20px;
  background: var(--PD-EU-Main-3-10, #ffd628);
  color: var(--PD-EDU-Main-4-151419, #151419);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px; /* 137.5% */
  text-align: center;
}
.page-scores-label-input, .page-scores-label-subject {
  width: 172px;
  min-width: 172px;
}
.page-scores-label-input input {
  width: 100%;
  border: 1px solid var(--PD-EU-Main-2-10, #2227f7);
  background: #fff;
  color: var(--PD-EDU-Main-4-707072, #707072);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
  padding: 8px 20px;
  border-radius: 6px;
  text-align: center;
  -webkit-box-shadow: 3px 3px 0px 0px rgba(211, 32, 8, 0.4);
          box-shadow: 3px 3px 0px 0px rgba(211, 32, 8, 0.4);
}
.page-scores-label-input input:hover, .page-scores-label-input input:focus {
  outline: none;
}
.page-scores-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow-x: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  padding: 0 0 20px 0;
}
.page-scores-special-subject {
  margin-top: 36px;
}
.page-scores-submit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.page-scores-submit button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 11px 32px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  border-radius: 40px;
  border: 1px solid var(--PD-EDU-Main-4-FFFFFF, #fff);
  background: #ffd628;
  color: var(--PD-EDU-Main-4-2A2933, #2a2933);
  font-family: "iCielNeuePlak";
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out all;
  transition: 0.3s ease-in-out all;
}
.page-scores-submit button:hover {
  background: var(--PD-EU-Main-1-10, #e74512);
  color: #fff;
}
.page-scores-highest-op {
  padding-bottom: 45px;
}
.page-scores-highest-op h3 {
  color: var(--PD-EU-Main-2-10, #2227f7);
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.6px;
}
.page-scores-highest-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 36px 0;
}
.page-scores-highest-list input {
  display: none;
  text-indent: -9999px;
}
.page-scores-highest-list input:checked ~ .highest-card {
  background: var(--PD-EU-Main-2-10, #2227f7);
  color: #fff;
}
.page-scores-highest-list input:checked ~ .highest-card .abs-star svg {
  fill: var(--PD-EU-Main-3-10, #ffd628);
  -webkit-filter: drop-shadow(0px 0px 38px #fff);
          filter: drop-shadow(0px 0px 38px #fff);
}
.page-scores-highest-item .highest-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: #e74512;
  border-radius: 6px;
  padding: 30px;
  -webkit-transition: background 0.3s ease-in-out, color 0.1s ease-in-out;
  transition: background 0.3s ease-in-out, color 0.1s ease-in-out;
  background: var(--PD-EDU-Main-4-FFFFFF, #fff);
  cursor: pointer;
  height: 100%;
}
.page-scores-highest-item .highest-card .name {
  font-family: "iCielNeuePlak";
  font-size: 18px;
  font-weight: 400;
  line-height: 26px; /* 144.444% */
}
.page-scores-highest-item .highest-card .score {
  font-family: Unbounded;
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.9px;
}
.page-scores-highest-note {
  grid-column: span 3;
  text-align: center;
  font-family: "iCielNeuePlak";
  font-size: 14px;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  color: var(--PD-EDU-Main-4-2A2933, #2a2933);
}
.page-scores-resubmit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.page-scores-resubmit button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 11px 32px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  border-radius: 40px;
  background: var(--PD-EU-Main-1-10, #e74512);
  color: #fff;
  font-family: "iCielNeuePlak";
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out all;
  transition: 0.3s ease-in-out all;
}
.page-scores-resubmit button:hover {
  background: var(--PD-EU-Main-1-10, #fff);
  color: #e74512;
}
.page-scores-result-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.page-scores-result-list .scores-result-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.page-scores-result-list .scores-result-row {
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-template-columns: 270px repeat(3, 1fr);
  gap: 20px;
}
.page-scores-result-list .scores-result-row-season .scores-result-label-name {
  grid-column: span 1;
  color: var(--PD-EDU-Main-4-2A2933, #2a2933);
  font-family: Unbounded;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px; /* 122.222% */
}
.page-scores-result-list .scores-result-row-season .score-result-detail {
  grid-column: span 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 6px;
  background: #fff;
}
.page-scores-result-list .scores-result-row-season .score-result-detail .item {
  padding: 8px 20px;
  color: var(--PD-EDU-Main-4-707072, #707072);
  text-align: center;
  font-family: Unbounded;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
  white-space: nowrap;
}
.page-scores-result-list .scores-result-row-season .score-result-detail .item.see-more {
  color: var(--PD-EU-Main-2-10, #2227f7);
  text-align: center;
  font-family: Unbounded;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.page-scores-result-list .scores-result-row-season .score-result-total {
  grid-column: span 3;
  padding: 8px 20px;
  text-align: center;
  border-radius: 6px;
  background: var(--PD-EU-Main-2-10, #2227f7);
  color: var(--PD-EU-Main-3-10, #ffd628);
  font-family: Unbounded;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
}
.page-scores-result-list .scores-result-row-type2 {
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  grid-template-columns: repeat(5, 1fr);
}
.page-scores-result-list .scores-result-row-type2 .score-result-detail {
  grid-column: span 4;
  grid-template-columns: repeat(4, 1fr);
}
.page-scores-result-list .scores-result-head {
  margin-bottom: 12px;
}
.page-scores-result-list .scores-result-label {
  position: relative;
  border-radius: 6px;
  padding: 8px 20px;
  background: var(--PD-EU-Main-3-10, #ffd628);
  color: var(--PD-EDU-Main-4-151419, #151419);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px; /* 137.5% */
  text-align: center;
  -webkit-box-shadow: 3px 3px 0px 0px rgba(211, 32, 8, 0.4);
          box-shadow: 3px 3px 0px 0px rgba(211, 32, 8, 0.4);
}
.page-scores-result-list .scores-result-label-name {
  text-align: left;
}
.page-scores-result-list .sort-score-label {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
}
.page-scores-result-list .sort-score-label.asc .asc svg path {
  fill: #fff;
}
.page-scores-result-list .sort-score-label.desc .desc svg path {
  fill: #fff;
}
.page-scores-result-banner {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 20px;
}
.page-scores-result-banner a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.page-scores-result-banner .banner-desktop {
  display: block;
}
.page-scores-result-banner .banner-mobile {
  display: none;
}
@media (max-width: 1440px) {
  .page-scores-main {
    padding: 125px 0 0;
  }
  .page-scores-title h1 {
    font-size: 32px;
  }
  .page-scores-subtitle {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .page-scores-container {
    max-width: 1024px;
  }
  .page-scores-userform {
    padding-bottom: 55px;
  }
  .page-scores-userform input,
  .page-scores-userform select {
    padding: 12px 20px;
    font-size: 12px;
  }
  .page-scores-subject-item {
    padding: 8px 20px;
    font-size: 14px;
  }
  .page-scores-subject-item svg {
    width: 16px;
    height: 16px;
  }
  .page-scores-calculate {
    margin: 40px 0;
  }
  .page-scores-label-name {
    font-size: 12px;
    width: 126px;
    min-width: 126px;
  }
  .page-scores-label-subject {
    font-size: 14px;
    padding: 8px 10px;
  }
  .page-scores-label-subject, .page-scores-label-input {
    width: 126px;
    min-width: 126px;
  }
  .page-scores-label-input input {
    font-size: 12px;
    padding: 8px 10px;
  }
  .page-scores-subject {
    padding: 60px 0;
  }
  .page-scores-row > div:not(:first-child) {
    position: relative;
    margin-right: 40px;
  }
  .page-scores-row > div:not(:first-child)::after {
    right: -20px;
  }
  .page-scores-result-list .scores-result-label {
    font-size: 12px;
  }
  .page-scores-result-list .sort-score-label {
    right: 8px;
  }
  .page-scores-result-list .sort-score-label svg {
    width: 10px;
    height: auto;
  }
  .page-scores-result-list .scores-result-row {
    grid-template-columns: 180px repeat(3, 1fr);
  }
  .page-scores-result-list .scores-result-row-season .scores-result-label-name,
  .page-scores-result-list .scores-result-row-season .score-result-detail .item,
  .page-scores-result-list .scores-result-row-season .score-result-detail .item.see-more,
  .page-scores-result-list .scores-result-row-season .score-result-total {
    font-size: 12px;
  }
}
@media (max-width: 992px) {
  .page-scores-title {
    margin-bottom: 30px;
  }
  .page-scores-title h1 {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
  .page-scores-title h1 .small-text {
    font-size: 14px;
    letter-spacing: -0.7px;
  }
  .page-scores-highest-list {
    grid-template-columns: 1fr;
  }
  .page-scores-highest-note {
    grid-column: span 1;
  }
  .page-scores-highest-op h3 {
    font-size: 18px;
    letter-spacing: -0.54px;
  }
  .page-scores-row > div:not(:first-child) {
    margin-right: 20px;
  }
  .page-scores-row > div:not(:first-child)::after {
    display: none;
  }
  .page-scores-highest-item .highest-card {
    padding: 20px;
  }
  .page-scores-highest-item .highest-card .name {
    font-size: 14px;
  }
  .page-scores-highest-item .highest-card .score {
    font-size: 24px;
  }
  .page-scores-userform-grid {
    grid-template-columns: 1fr;
  }
  .page-scores-result-banner .banner-desktop {
    display: none;
  }
  .page-scores-result-banner .banner-mobile {
    display: block;
  }
}
@media (max-width: 600px) {
  .page-scores-result-list .scores-result-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
    overflow: auto;
  }
  .page-scores-result-list .scores-result-row-season .score-result-detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
  .page-scores-result-list .scores-result-row-season .score-result-detail .item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 150px;
            flex: 0 0 150px;
    max-width: 150px;
    width: 150px;
    background: #fff;
    white-space: nowrap;
  }
  .page-scores-result-list .scores-result-row-season .score-result-detail .item:not(:last-child) {
    margin-right: 20px;
  }
  .page-scores-result-list .scores-result-row-season .score-result-total {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .page-scores-result-list .scores-result-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    width: auto;
  }
  .page-scores-result-list .scores-result-row .scores-result-label-name {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100px;
            flex: 0 0 100px;
    max-width: 100px;
  }
  .page-scores-result-list .scores-result-row .scores-result-label-subject {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 150px;
            flex: 0 0 150px;
    max-width: 150px;
  }
  .page-scores-result-list .scores-result-row-type2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    width: auto;
  }
  .page-scores-result-list .scores-result-row-type2 .scores-result-label-name {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100px;
            flex: 0 0 100px;
    max-width: 100px;
  }
  .page-scores-result-list .scores-result-row-type2 .scores-result-label-subject {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 150px;
            flex: 0 0 150px;
    max-width: 150px;
  }
}

#add-subject {
  background: var(--PD-EU-Main-1-10, #e74512);
}

#clear-subject {
  background: var(--PD-EU-Main-1-10, #ffffff);
}

.pick-subject-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.pick-subject-modal .modals-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--PD-EDU-Main-4-707072, #ffd628);
  font-family: "iCielNeuePlak";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 30px 0;
}
.pick-subject-modal .modals-head h2 {
  color: #2226f7;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.78px;
  margin: 0 0 0 40px;
}
.pick-subject-modal .modal-subject-table {
  margin: 22px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 262px;
}
.pick-subject-modal .modal-subject-table table {
  caption-side: bottom;
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
  color: var(--PD-EDU-Main-4-707072, #707072);
}
.pick-subject-modal .modal-subject-table table > thead {
  vertical-align: bottom;
}
.pick-subject-modal .modal-subject-table table > thead td:first-child {
  border-radius: 6px 0px 0px 0px;
}
.pick-subject-modal .modal-subject-table table > thead td:last-child {
  border-radius: 0px 6px 0px 0px;
}
.pick-subject-modal .modal-subject-table table tbody,
.pick-subject-modal .modal-subject-table table td,
.pick-subject-modal .modal-subject-table table tfoot,
.pick-subject-modal .modal-subject-table table th,
.pick-subject-modal .modal-subject-table table thead,
.pick-subject-modal .modal-subject-table table tr {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
.pick-subject-modal .modal-subject-table table thead {
  border-radius: 6px 0px 0px 0px;
  background: var(--PD-EU-Main-2-10, #2227f7);
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
}
.pick-subject-modal .modal-subject-table table thead td:last-child {
  text-align: center;
}
.pick-subject-modal .modal-subject-table table > :not(caption) > * > * {
  padding: 10px;
}
.pick-subject-modal .modal-subject-table table tbody tr:nth-child(even) {
  background: #f2f2f2;
}
.pick-subject-modal .modal-subject-table table tbody td:last-child {
  text-align: center;
}
.pick-subject-modal .modal-subject-table .modal-btn-subject {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1px 16px;
  border-radius: 6px;
  border: 1px solid var(--PD-EU-Main-1-10, #e74512);
  background: #fff;
  color: var(--PD-EU-Main-1-10, #e74512);
  font-family: "iCielNeuePlak";
  font-size: 11px;
  font-weight: 400;
  line-height: 20px; /* 181.818% */
  cursor: pointer;
}
.pick-subject-modal .modal-subject-table .modal-btn-subject.selected {
  background: var(--PD-EU-Main-1-10, #e74512);
  color: #fff;
}
.pick-subject-modal .modal-subject-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.pick-subject-modal .modal-subject-action button {
  padding: 11px 32px;
  border-radius: 40px;
  border: 1px solid var(--PD-EDU-Main-4-FFFFFF, #fff);
  background: var(--PD-EU-Main-1-10, #e74512);
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
  font-family: "iCielNeuePlak";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.1111111111;
  cursor: pointer;
}
.pick-subject-modal .modal-subject-select {
  position: relative;
  color: var(--PD-EDU-Main-4-2A2933, #2a2933);
  font-family: Unbounded;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px; /* 157.143% */
}
.pick-subject-modal .modal-subject-select select {
  text-align: center;
  width: 100%;
  padding: 8px 20px;
  border-radius: 6px;
  background: var(--PD-EU-Main-3-10, #ffd628);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-box-shadow: 3px 3px 0px 0px rgba(255, 75, 51, 0.5);
          box-shadow: 3px 3px 0px 0px rgba(255, 75, 51, 0.5);
}
.pick-subject-modal .modal-subject-select::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 12px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6' fill='none'%3E%3Cpath d='M12 0H0L6 6L12 0Z' fill='%232A2933'/%3E%3C/svg%3E");
  background-size: cover;
}
.pick-subject-modal .close-modal {
  font-size: 28px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
  position: absolute;
  top: 16px;
  right: 12px;
}
.pick-subject-modal .close-modal:hover {
  color: #333;
}
.pick-subject-modal .modal-body {
  padding: 40px 60px;
  font-size: 16px;
  line-height: 1.5;
  color: #444;
}
.pick-subject-modal .modal-btn {
  margin: 0 auto;
  border-radius: 40px;
  border: 1px solid var(--PD-EDU-Main-4-FFFFFF, #fff);
  background: var(--PD-EU-Main-1-10, #e74512);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 11px 32px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
  /* PD EDU/3/Body 2 */
  font-family: "iCielNeuePlak";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.pick-subject-modal .modal-content {
  border-radius: 30px;
  background: var(--PD-EDU-Main-4-FFFFFF, #fff);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  max-width: 860px;
  width: 90%;
  -webkit-animation: modalAppear 0.3s ease-out;
          animation: modalAppear 0.3s ease-out;
  position: relative;
  max-height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.pick-subject-modal .modal-content::-webkit-scrollbar {
  display: none;
}
.pick-subject-modal .error {
  color: var(--PD-EU-Main-1-10, #e74512);
  font-size: 12px;
}
@media (max-width: 1440px) {
  .pick-subject-modal .modal-body {
    padding: 32px;
  }
  .pick-subject-modal .form-group input,
  .pick-subject-modal .form-group select {
    padding: 12px 16px;
  }
  .pick-subject-modal .modals-head {
    margin-bottom: 16px;
  }
}
@media (max-width: 768px) {
  .pick-subject-modal .modal-subject-table table {
    font-size: 12px;
  }
  .pick-subject-modal .modal-subject-table table tr td:first-child {
    width: 60px;
  }
  .pick-subject-modal .modal-body {
    padding: 20px;
  }
  .pick-subject-modal .modals-head {
    font-size: 14px;
  }
  .pick-subject-modal .modals-head > img {
    width: 40px;
    height: 40px;
  }
  .pick-subject-modal .modals-head h2 {
    font-size: 18px;
  }
  .pick-subject-modal .close-modal {
    width: 32px;
    height: 32px;
    top: 24px;
  }
  .pick-subject-modal .modal-content {
    width: 100%;
    border-radius: 6px;
  }
}

.alert-subject-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.alert-subject-modal .modals-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: var(--PD-EDU-Main-4-707072, #707072);
  text-align: center;
  font-family: "iCielNeuePlak";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  gap: 30px;
}
.alert-subject-modal .modals-head h2 {
  color: #2226f7;
  font-family: Unbounded;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.78px;
  margin: 0 0 16px 0;
}
.alert-subject-modal .close-modal {
  font-size: 28px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
  position: absolute;
  top: 16px;
  right: 12px;
}
.alert-subject-modal .close-modal:hover {
  color: #333;
}
.alert-subject-modal .modal-body {
  padding: 40px 60px;
  font-size: 16px;
  line-height: 1.5;
  color: #444;
}
.alert-subject-modal .modal-btn {
  margin: 0 auto;
  border-radius: 40px;
  border: 1px solid var(--PD-EDU-Main-4-FFFFFF, #fff);
  background: var(--PD-EU-Main-1-10, #e74512);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 11px 32px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
  /* PD EDU/3/Body 2 */
  font-family: "iCielNeuePlak";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.alert-subject-modal .modal-content {
  border-radius: 30px;
  background: var(--PD-EDU-Main-4-FFFFFF, #fff);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  max-width: 560px;
  width: 90%;
  -webkit-animation: modalAppear 0.3s ease-out;
          animation: modalAppear 0.3s ease-out;
  position: relative;
  max-height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.alert-subject-modal .modal-content::-webkit-scrollbar {
  display: none;
}
@media (max-width: 1440px) {
  .alert-subject-modal .modal-body {
    padding: 32px;
  }
  .alert-subject-modal .modals-head {
    margin-bottom: 16px;
  }
}
@media (max-width: 768px) {
  .alert-subject-modal .modal-body {
    padding: 20px;
  }
  .alert-subject-modal .modals-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    font-size: 14px;
  }
  .alert-subject-modal .modals-head > img {
    width: 40px;
    height: 40px;
  }
  .alert-subject-modal .modals-head h2 {
    font-size: 18px;
  }
  .alert-subject-modal .modal-content {
    width: 100%;
    border-radius: 6px;
  }
}

.pick-subject-modal.visible,
.alert-subject-modal.visible {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
}

.error-page__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  min-height: 100vh;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: url("../images/bg-error-page.png") no-repeat center center;
  background-attachment: fixed;
  background-size: cover;
}
.error-page__content .error-page__title {
  text-align: center;
  padding: 0 20px;
}
.error-page__content h1 {
  color: var(--PD-EU-Main-2-10, #2227f7);
  text-align: center;
  font-size: 60px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: -3.3px;
  margin: 0 0 9px 0;
}
.error-page__content h2 {
  color: var(--PD-EU-Main-2-6, rgba(34, 39, 247, 0.6));
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.54px;
}
.error-page__content .btn-back-home {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-top: 30px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 11px 32px;
  border-radius: 40px;
  border: 1px solid var(--PD-EDU-Main-4-FFFFFF, #fff);
  background: var(--PD-EU-Main-1-10, #e74512);
  color: var(--PD-EDU-Main-4-FFFFFF, #fff);
  font-family: "iCielNeuePlak";
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}
@media (min-width: 768px) {
  .error-page__content h1 {
    font-size: 80px;
  }
  .error-page__content h2 {
    font-size: 16px;
  }
}
@media (min-width: 1440px) {
  .error-page__content h1 {
    font-size: 110px;
  }
  .error-page__content h2 {
    font-size: 18px;
  }
}

.wrapper-container, .news-detail-v2 .wrapper .content {
  margin: 0 auto;
  max-width: 922px;
}

.images-grid-layout .grid-item, .image-grid-v2 .grid-item, .image-grid .grid-item {
  height: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.images-grid-layout .grid-item img, .image-grid-v2 .grid-item img, .image-grid .grid-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  position: absolute;
  inset: 0;
  object-fit: cover;
}

/*
 * Main News Detail Components
 */
.news-detail-v2 .container {
  max-width: 1552px;
  margin: 0 auto;
}
.news-detail-v2 .wrapper {
  padding: 100px 0 82px;
}
.news-detail-v2 .wrapper .content {
  max-width: 1349px;
  color: #fff;
}
.news-detail-v2 .wrapper .content .short-description {
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  margin: 0 auto 47px;
  text-align: center;
  max-width: 1242px;
}

.news-detail-v2-content {
  padding: 100px 0;
}
@media screen and (min-width: 1680px) {
  .news-detail-v2-content {
    padding: 207px 0 120px;
  }
}
.news-detail-v2-content .paragraph {
  color: #2a2933;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4444444444;
}
@media screen and (min-width: 1680px) {
  .news-detail-v2-content .paragraph {
    font-size: 18px;
  }
}

/*
 * Numbered Articles Section
 */
.articles {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 30px;
}
@media screen and (min-width: 992px) {
  .articles {
    gap: 40px;
  }
}
@media screen and (min-width: 1680px) {
  .articles {
    gap: 60px;
  }
}
@media screen and (min-width: 768px) {
  .articles-header {
    display: grid;
    grid-template-columns: 113px 1fr;
    grid-template-rows: auto;
    gap: 24px;
  }
}
.articles-header-number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: var(--font-secondary);
  color: #707072;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  .articles-header-number {
    margin-bottom: 30px;
  }
  .articles-header-number > div {
    max-width: 115px;
    margin-left: 100px;
  }
}
.articles-header-number span {
  color: #e74512;
  font-size: 30px;
  font-weight: 400;
  line-height: 47px;
}
@media screen and (min-width: 768px) {
  .articles-header-number {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.articles-header-title {
  color: #e74512;
  text-shadow: 8px 4px 0px #f3b122;
  -webkit-text-stroke: 1px #151419;
  font-family: var(--font-primary);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.78px;
  text-transform: uppercase;
  line-height: normal;
}
@media screen and (min-width: 768px) {
  .articles-header-title {
    line-height: 1.4285714286;
    font-size: 32px;
    letter-spacing: -1.26px;
  }
}
@media screen and (min-width: 992px) {
  .articles-header-title {
    font-size: 42px;
  }
}
.articles-content {
  background: #e74512;
  color: #fff;
  padding-bottom: 30px;
}
.articles-content .desc {
  max-width: 85.7303370787%;
  margin: 0 auto;
  padding: 30px 0 16px;
  text-align: center;
  font-size: 14px;
}
@media screen and (min-width: 1200px) {
  .articles-content .desc {
    padding-top: 150px;
    font-size: 16px;
  }
}

.image-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 4px;
}
.image-grid .grid-item {
  height: 40vh;
}
.image-grid .grid-item:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
@media screen and (min-width: 576px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .image-grid .grid-item:nth-child(1), .image-grid .grid-item:nth-child(2), .image-grid .grid-item:nth-child(7) {
    grid-column: span 2;
    height: 46vh;
  }
}
@media screen and (min-width: 768px) {
  .image-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 330px 260px 330px;
    gap: 4px;
  }
  .image-grid .grid-item {
    height: 100% !important;
  }
  .image-grid .grid-item:nth-child(1) {
    grid-column: span 3;
    grid-row: 1;
  }
  .image-grid .grid-item:nth-child(2) {
    grid-column: span 3;
    grid-row: 1;
  }
  .image-grid .grid-item:nth-child(3) {
    grid-column: span 2;
    grid-row: 2;
  }
  .image-grid .grid-item:nth-child(4) {
    grid-column: span 2;
    grid-row: 2;
  }
  .image-grid .grid-item:nth-child(5) {
    grid-column: span 2;
    grid-row: 2;
  }
  .image-grid .grid-item:nth-child(6) {
    grid-column: span 3;
    grid-row: 3;
  }
  .image-grid .grid-item:nth-child(7) {
    grid-column: span 3;
    grid-row: 3;
  }
}
@media screen and (min-width: 1680px) {
  .image-grid {
    grid-template-rows: 618px 490px 618px;
  }
}

/*
 * Two-Column Image Grid
 */
.image-grid-v2 {
  display: grid;
  gap: 4px;
  margin: 30px 0;
}
@media screen and (min-width: 768px) {
  .image-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 330px;
    gap: 4px;
  }
}
.image-grid-v2 .grid-item:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
@media screen and (min-width: 1200px) {
  .image-grid-v2 {
    margin: 60px 0;
  }
}
@media screen and (min-width: 1680px) {
  .image-grid-v2 {
    grid-template-rows: 618px;
  }
}

/*
 * Multi-Row Image Grid
 */
.images-grid-layout {
  gap: 4px;
  margin: 30px 0;
  display: grid;
}
.images-grid-layout .grid-item:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
@media screen and (min-width: 768px) {
  .images-grid-layout.image-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .images-grid-layout.image-grid-v2 .grid-item:nth-child(1) {
    grid-column: span 1;
  }
  .images-grid-layout.image-grid-v2 .grid-item:nth-child(2) {
    grid-column: span 1;
  }
  .images-grid-layout.image-grid-v2 .grid-item:nth-child(3) {
    grid-column: span 1;
  }
  .images-grid-layout.image-grid-v2 .grid-item:nth-child(4) {
    grid-column: span 1;
  }
  .images-grid-layout.image-grid-v2 .grid-item:nth-child(5) {
    grid-column: span 1;
  }
  .images-grid-layout.image-grid-v2 .grid-item:nth-child(6) {
    grid-column: span 1;
  }
  .images-grid-layout.image-grid-v2 .grid-item:nth-child(7) {
    grid-column: span 1;
  }
  .images-grid-layout.image-grid-v3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .images-grid-layout.image-grid-v3 .grid-item:nth-child(1) {
    grid-column: span 1;
  }
  .images-grid-layout.image-grid-v3 .grid-item:nth-child(2) {
    grid-column: span 1;
  }
  .images-grid-layout.image-grid-v3 .grid-item:nth-child(3) {
    grid-column: span 1;
  }
  .images-grid-layout.image-grid-v3 .grid-item:nth-child(4) {
    grid-column: span 1;
  }
  .images-grid-layout.image-grid-v3 .grid-item:nth-child(5) {
    grid-column: span 1;
  }
  .images-grid-layout.image-grid-v3 .grid-item:nth-child(6) {
    grid-column: span 1;
  }
  .images-grid-layout.image-grid-v3 .grid-item:nth-child(7) {
    grid-column: span 1;
  }
  .images-grid-layout.image-grid-v4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .images-grid-layout.image-grid-v4 .grid-item:nth-child(1) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v4 .grid-item:nth-child(2) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v4 .grid-item:nth-child(3) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v4 .grid-item:nth-child(4) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v4 .grid-item:nth-child(5) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v4 .grid-item:nth-child(6) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v4 .grid-item:nth-child(7) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v5 {
    grid-template-columns: repeat(6, 1fr);
  }
  .images-grid-layout.image-grid-v5 .grid-item:nth-child(1) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v5 .grid-item:nth-child(2) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v5 .grid-item:nth-child(3) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v5 .grid-item:nth-child(4) {
    grid-column: span 3;
  }
  .images-grid-layout.image-grid-v5 .grid-item:nth-child(5) {
    grid-column: span 3;
  }
  .images-grid-layout.image-grid-v6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .images-grid-layout.image-grid-v6 .grid-item:nth-child(1) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v6 .grid-item:nth-child(2) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v6 .grid-item:nth-child(3) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v6 .grid-item:nth-child(4) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v6 .grid-item:nth-child(5) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v6 .grid-item:nth-child(6) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v6 .grid-item:nth-child(7) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v7 {
    grid-template-columns: repeat(6, 1fr);
  }
  .images-grid-layout.image-grid-v7 .grid-item:nth-child(1) {
    grid-column: span 3;
  }
  .images-grid-layout.image-grid-v7 .grid-item:nth-child(2) {
    grid-column: span 3;
  }
  .images-grid-layout.image-grid-v7 .grid-item:nth-child(3) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v7 .grid-item:nth-child(4) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v7 .grid-item:nth-child(5) {
    grid-column: span 2;
  }
  .images-grid-layout.image-grid-v7 .grid-item:nth-child(6) {
    grid-column: span 3;
  }
  .images-grid-layout.image-grid-v7 .grid-item:nth-child(7) {
    grid-column: span 3;
  }
}
@media screen and (min-width: 1200px) {
  .images-grid-layout {
    margin: 60px 0;
  }
}

.wrapper-container {
  padding: 0 16px;
}

.grid-60 {
  display: grid;
  gap: 30px;
}
@media screen and (min-width: 1200px) {
  .grid-60 {
    gap: 60px;
  }
}

.articles-content-wrapper .articles-content {
  position: relative;
}
@media screen and (min-width: 1200px) {
  .articles-content-wrapper .articles-content {
    margin-top: 414px;
  }
  .articles-content-wrapper .articles-content .img-top {
    text-align: right;
    position: absolute;
    top: -414px;
    right: 0;
  }
}

.full-screen {
  position: relative;
  width: 100vw;
}

.custom__wrapper {
  max-width: 922px;
  margin: 0 auto;
  padding: 0 16px;
}
.custom__wrapper .main-title {
  color: #191d34;
  font-weight: 500;
  font-size: 28px;
  line-height: normal;
  margin: 0 0 16px;
}
@media screen and (min-width: 992px) {
  .custom__wrapper .main-title {
    font-size: 24px;
  }
}
@media screen and (min-width: 1680px) {
  .custom__wrapper .main-title {
    font-size: 36px;
  }
}
.custom__wrapper p,
.custom__wrapper span {
  color: #2a2933 !important;
  font-family: var(--font-secondary) !important;
  font-weight: 400 !important;
  background: transparent !important;
}
.custom__wrapper p *,
.custom__wrapper span * {
  font-family: var(--font-secondary) !important;
}
.custom__wrapper .container {
  padding-left: 0;
  padding-right: 0;
}

.news-related {
  padding: 61px 0 40px;
  background-color: #f1a009;
  position: relative;
  /* Swiper customization */
}
@media screen and (min-width: 1200px) {
  .news-related {
    padding: 65px 0 65px;
  }
}
.news-related::before {
  content: "";
  position: absolute;
  top: -40px;
  width: 100%;
  height: 64px;
  background-image: url(../images/bg-w.png);
  background-repeat: repeat-x;
  background-size: auto;
  background-position: top center;
  pointer-events: none;
  z-index: 1;
}
.news-related .swiper-button-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.news-related .container {
  max-width: 1752px;
  margin: 0 auto;
  padding: 0 16px;
}
.news-related .news-related-header {
  margin-bottom: 30px;
}
.news-related .news-related-header .title {
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
  color: #fff;
  margin: 0;
}
@media screen and (min-width: 1200px) {
  .news-related .news-related-header .title {
    font-size: 34px;
    padding-right: 130px;
    padding-top: 10px;
  }
}
.news-related .news-button-prev,
.news-related .news-button-next {
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.news-related .news-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: transparent;
  border-radius: 20px;
  height: 100%;
  width: 100%;
}
.news-related .news-card:hover .news-card-title {
  color: #e74512;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.news-related .news-card-image {
  height: 234px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #fff1eb;
  padding: 5px;
}
@media screen and (min-width: 992px) {
  .news-related .news-card-image {
    border: 3px solid rgba(231, 69, 18, 0.4);
  }
}
@media screen and (min-width: 1200px) {
  .news-related .news-card-image {
    border-radius: 20px;
    height: 290px;
    border: 6px solid rgba(231, 69, 18, 0.4);
  }
}
.news-related .news-card-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
}
@media screen and (min-width: 1200px) {
  .news-related .news-card-image img {
    border-radius: 10px;
  }
}
.news-related .news-card-content {
  padding-top: 20px;
  background-color: transparent;
}
@media screen and (min-width: 1200px) {
  .news-related .news-card-content {
    padding-top: 16px;
  }
}
.news-related .news-card a {
  text-decoration: none;
  display: block;
  color: inherit;
}
.news-related .news-card-title {
  font-weight: 500;
  font-size: 18px;
  line-height: normal;
  color: #191d34;
  margin: 0;
}
@media screen and (min-width: 1200px) {
  .news-related .news-card-title {
    font-size: 22px;
  }
}
.news-related .news-swiper {
  width: 100%;
}
.news-related .swiper-slide {
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 1200px) {
  .news-related .swiper,
  .news-related .swiper-wrapper {
    position: static;
    overflow: unset;
  }
}
@media screen and (min-width: 1200px) {
  .news-related .news-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 10px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
  }
}
.news-related [class*=swiper-button] {
  position: absolute;
  z-index: 1;
  height: 40px;
  width: 40px;
  margin: 0;
  top: 110px;
}
@media screen and (min-width: 1200px) {
  .news-related [class*=swiper-button] {
    height: 56px;
    width: 56px;
    position: static;
  }
}
.news-related [class*=swiper-button]::after {
  display: none;
}
.news-related [class*=swiper-button].swiper-button-prev {
  left: 0;
}
.news-related [class*=swiper-button].swiper-button-next {
  right: 0;
}

.share-social {
  margin-bottom: 30px;
  font-size: 14px;
  line-height: 1.4285714286;
}
.share-social a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 20px;
  border: 1px solid #151419;
  color: #151419;
  background: rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
          box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  font-family: var(--font-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
.share-social a:not(.copylink) {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.share-social a.copylink {
  padding: 9px 16px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 8px;
}

.date-cc {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  font-family: var(--font-secondary);
}
@media screen and (min-width: 768px) {
  .date-cc {
    font-size: 18px;
  }
}

.main-news-page .container {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 20px;
}
.main-news-page a {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (max-width: 1199px) {
  .main-news-page .banner {
    padding-top: 90px;
  }
}

.articles-section {
  padding-top: 30px;
  gap: 20px;
}
@media screen and (min-width: 1200px) {
  .articles-section {
    padding-top: 60px;
  }
}

.news-columns-container {
  display: grid;
  gap: 20px;
  border-radius: 16px;
  padding: 10px;
  border: 2px solid #f2994a;
}
@media screen and (min-width: 768px) {
  .news-columns-container {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1200px) {
  .news-columns-container {
    border: 4px solid #f2994a;
    padding: 26px;
    grid-template-columns: 1fr 1fr;
    border-radius: 30px;
  }
}

.featured-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  height: 100%;
}
.featured-column:hover .featured-title {
  color: #2226f7;
}

.featured-image-container {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.featured-image-wrapper {
  background-color: #fff1eb;
  border: 1px solid rgba(231, 69, 18, 0.4);
  border-radius: 10px;
  padding: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}
@media screen and (min-width: 1200px) {
  .featured-image-wrapper {
    border: 3px solid rgba(231, 69, 18, 0.4);
    padding: 10px;
  }
}
@media screen and (min-width: 1680px) {
  .featured-image-wrapper {
    border: 6px solid rgba(231, 69, 18, 0.4);
  }
}
.featured-image-wrapper .image {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
}
.featured-image-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (min-width: 1200px) {
  .featured-image-wrapper img {
    border-radius: 10px;
  }
}

.featured-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
@media screen and (min-width: 1200px) {
  .featured-content {
    gap: 16px;
  }
}

.featured-title {
  font-weight: 500;
  font-size: 18px;
  line-height: normal;
  color: #191d34;
  margin: 0;
}
@media screen and (min-width: 1200px) {
  .featured-title {
    font-size: 24px;
  }
}

.featured-description {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  color: #191d34;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
@media screen and (min-width: 1200px) {
  .featured-description {
    font-size: 16px;
  }
}

.thumbnails-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 20px;
}
@media screen and (min-width: 1680px) {
  .thumbnails-column {
    gap: 48px;
  }
}

.thumbnail-article {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 20px;
}
.thumbnail-article:hover .thumbnail-title {
  color: #2226f7;
}
@media screen and (min-width: 1200px) {
  .thumbnail-article {
    gap: 20px;
    grid-template-columns: 32.7669902913% 1fr;
  }
}
.thumbnail-image-container {
  background-color: #fff1eb;
  border: 1px solid rgba(231, 69, 18, 0.4);
  border-radius: 10px;
  padding: 6px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  overflow: hidden;
  height: 103px;
}
@media screen and (min-width: 768px) {
  .thumbnail-image-container {
    height: 120px;
  }
}
@media screen and (min-width: 1200px) {
  .thumbnail-image-container {
    padding: 10px;
    height: 158px;
    border: 3px solid rgba(231, 69, 18, 0.4);
    border-radius: 20px;
  }
}
@media screen and (min-width: 1680px) {
  .thumbnail-image-container {
    border: 6px solid rgba(231, 69, 18, 0.4);
    height: 188px;
  }
}
.thumbnail-image-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
}
@media screen and (min-width: 1200px) {
  .thumbnail-image-container img {
    border-radius: 10px;
  }
}
.thumbnail-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.thumbnail-title {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.24;
  color: #191d34;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
@media screen and (min-width: 1200px) {
  .thumbnail-title {
    font-size: 18px;
  }
}
@media screen and (min-width: 1680px) {
  .thumbnail-title {
    font-size: 22px;
  }
}

.grid-articles-section {
  padding: 40px 0;
}
@media screen and (min-width: 1200px) {
  .grid-articles-section {
    padding: 60px 0 67px;
  }
}

.seperate-line-articles {
  padding: 40px 0 0;
}
.seperate-line-articles svg {
  max-width: 100%;
}
@media screen and (min-width: 1200px) {
  .seperate-line-articles {
    padding: 67px 0 0;
  }
}

.grid-articles-container {
  margin-bottom: 30px;
  display: grid;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .grid-articles-container {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1200px) {
  .grid-articles-container {
    gap: 24px 20px;
  }
}

.grid-article {
  display: grid;
  gap: 20px;
  grid-template-columns: 148px 1fr;
}
.grid-article:hover .grid-title {
  color: #2226f7;
}
@media screen and (min-width: 992px) {
  .grid-article {
    grid-template-columns: 40% 1fr;
  }
}
@media screen and (min-width: 1200px) {
  .grid-article {
    grid-template-columns: 1fr 1fr;
  }
}
.grid-image-container {
  background-color: #fff1eb;
  border: 1px solid rgba(231, 69, 18, 0.4);
  border-radius: 10px;
  padding: 6px;
  width: 100%;
  overflow: hidden;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 103px;
}
@media screen and (min-width: 768px) {
  .grid-image-container {
    height: 120px;
  }
}
@media screen and (min-width: 1200px) {
  .grid-image-container {
    border-width: 3px;
    padding: 10px;
    height: 190px;
  }
}
@media screen and (min-width: 1680px) {
  .grid-image-container {
    border-width: 6px;
    height: 290px;
  }
}
.grid-image-container .image {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
}
.grid-image-container .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
}
@media screen and (min-width: 768px) {
  .grid-image-container .image img {
    border-radius: 10px;
  }
}
.grid-title {
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  color: #191d34;
  margin: 0;
}
@media screen and (min-width: 1200px) {
  .grid-title {
    font-size: 18px;
  }
}
@media screen and (min-width: 1680px) {
  .grid-title {
    font-size: 22px;
  }
}

.see-more-btn {
  background-color: #2226f7;
  font-family: var(--font-secondary);
  color: #ffffff;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  padding: 7px 32px;
  border-radius: 40px;
  border: 1px solid #ffffff;
  -webkit-box-shadow: 10px 11px 0px 0px rgb(255, 255, 255);
          box-shadow: 10px 11px 0px 0px rgb(255, 255, 255);
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.see-more-btn-container {
  margin-top: 30px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.see-more-btn:hover {
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
  -webkit-box-shadow: 7px 8px 0px 0px rgb(255, 255, 255);
          box-shadow: 7px 8px 0px 0px rgb(255, 255, 255);
}

.breadcrumb {
  margin-bottom: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 28px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 767px) {
  .breadcrumb {
    display: grid;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    grid-auto-columns: -webkit-max-content;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    grid-gap: 12px;
    overflow: auto;
    overflow-y: hidden;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 1rem;
    grid-template-columns: unset;
    padding-left: 10px;
  }
  .breadcrumb::-webkit-scrollbar {
    display: none;
    width: 0;
  }
  .breadcrumb .yourclass > * {
    scroll-snap-align: start;
  }
}
@media screen and (min-width: 1200px) {
  .breadcrumb {
    margin-bottom: 32px;
  }
}
.breadcrumb-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 6px 20px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  border-radius: 20px;
  border: 1px solid #5552fa;
  background-color: #fff;
  color: #2226f7;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .breadcrumb-pill {
    font-size: 12px;
  }
}
.breadcrumb-pill::before {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 20px;
  left: -8px;
  height: 20px;
  background-image: url(../images/breadcrumb-icon.png);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  pointer-events: none;
}
.breadcrumb-pill.active, .breadcrumb-pill:hover {
  background: #5552fa;
  color: #fff;
}

.main-news-detail-page {
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  padding: 90px 0 40px;
  background: #fff;
}
.main-news-detail-page.has-banner {
  padding-top: 40px;
}
@media screen and (min-width: 1200px) {
  .main-news-detail-page {
    padding: 140px 0 60px;
    background-image: url("../images/bg-news-detail.png");
  }
}
.main-news-detail-page .container {
  max-width: 922px;
}
.main-news-detail-page .title {
  color: rgba(0, 0, 0, 0.8);
  font-size: 28px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -1.08px;
  margin: 0 0 16px;
}
@media screen and (min-width: 1200px) {
  .main-news-detail-page .title {
    font-size: 36px;
  }
}
.main-news-detail-page .main-desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
  color: #2a2933;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4444444444;
}
@media screen and (min-width: 1200px) {
  .main-news-detail-page .main-desc {
    font-size: 18px;
  }
}
@media screen and (min-width: 1680px) {
  .main-news-detail-page .main-desc {
    gap: 60px;
  }
}
.main-news-detail-page .short-desc {
  color: #191d34;
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
}

.tags {
  padding: 12px 0;
  margin-bottom: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
@media screen and (min-width: 1200px) {
  .tags {
    padding: 24px 0;
    margin-top: 60px;
  }
}
.tags a {
  padding: 8px 14px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
          box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  color: #000;
  font-size: 14px;
  font-family: var(--font-secondary);
  font-weight: 400;
  line-height: 20px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  min-height: 36px;
}
.tags a:hover {
  background: #f1a009;
  color: #fff;
}

.main-news-page {
  background: #ffb727;
}
.main-news-page .banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}