* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 @font-face {
     font-family: 'gorditaBlack';
     src: url('/assets/quiz/money-personality/fonts/Gordita-Black.otf') format('opentype');
     font-weight: normal;
     font-style: normal;
 }

 @font-face {
     font-family: 'gorditaBold';
     src: url('/assets/quiz/money-personality/fonts/Gordita-Bold.otf') format('opentype');
     font-weight: normal;
     font-style: normal;
 }

 @font-face {
     font-family: 'gorditaMedium';
     src: url('/assets/quiz/money-personality/fonts/Gordita-Medium.otf') format('opentype');
     font-weight: normal;
     font-style: normal;
 }

 @font-face {
     font-family: 'gorditaRegular';
     src: url('/assets/quiz/money-personality/fonts/Gordita-Regular.otf') format('opentype');
     font-weight: normal;
     font-style: normal;
 }


 :root {
     --black: #353745;
     --green: #037C4D;
     --lightGreen: #7EC248;
     --lightGray: #E4E0DE;
     --white: #fff;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     margin-bottom: 0.5em;
     -webkit-font-smoothing: antialiased;
     font-weight: 500;
 }

 p {
     -webkit-font-smoothing: antialiased
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 a:hover {
     text-decoration: none;
 }

 body {
     font-family: 'gorditaRegular', sans-serif;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
 }

 .sidNW-container {
     max-width: 1300px;
     margin: 0 auto;
     width: 100%;
 }

 .sidNW-progress {
     position: fixed;
     top: 50%;
     right: 30px;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     gap: 15px;
     opacity: 0;
     transition: opacity 0.4s ease-in-out;
     z-index: 1;
 }

 .sidNW-progress--visible {
     opacity: 1;
     pointer-events: auto;
 }

 .sidNW-progress__circle {
     width: 16px;
     height: 16px;
     border-radius: 50%;
     border: 1px solid var(--lightGray);
     background: var(--white);
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .sidNW-progress__circle:hover {
     border-color: var(--lightGreen);
 }

 .sidNW-progress__circle--answered {
     background: var(--green);
     border-color: var(--green);
 }

 .sidNW-progress__circle--active {
     background: var(--white);
     border-color: var(--lightGreen);
 }

 .sidNW-progress__circle--answered.sidNW-progress__circle--active {
     background: var(--green);
     border-color: var(--green);
 }

 .sidNW-mobile-progress {
     display: none;
     position: sticky;
     left: 0;
     right: 0;
     padding: 15px 20px;
     z-index: 1;
     font-size: 18px;
     text-align: center;
 }

 .sidNW-mobile-progress--sticky {
     top: 0;
 }
 /* hero */

 .sidNW-hero {
     background: url(/assets/quiz/money-personality/images/sidNW-hero__bg.png);
     background-size: cover;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 50px;
     position: relative;
     padding: 40px 0;
     width: 100%;
     z-index: 1;
 }

 .sidNW-hero .sidNW-button {
     background-color: transparent;
     color: var(--green);
 }

 .sidNW-hero .sidNW-button:hover {
     background-color: var(--green);
     color: var(--white);
 }

 .sidNW-hero__content {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .sidNW-hero__icon {
     max-width: 500px;
     width: 100%;
 }

 .sidNW-hero__title {
     font-family: 'gorditaBlack', sans-serif;
     font-size: 60px;
     margin-bottom: 10px;
     text-transform: uppercase;
 }

 .sidNW-hero__title span:first-of-type {
     color: var(--lightGreen);
 }

 .sidNW-hero__title span:last-child {
     color: var(--green);
 }

 .sidNW-hero__description {
     color: var(--black);
     font-size: 20px;
     margin-bottom: 50px;
     line-height: 1.6;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
 }

 .sidNW-button {
     background-color: var(--green);
     border: 1px solid var(--green);
     border-radius: 12px;
     color: white;
     cursor: pointer;
     font-size: 18px;
     font-family: 'gorditaBold', sans-serif;
     padding: 15px 40px 14px;
     transition: all 0.3s ease;
 }

 .sidNW-button:hover {
     background-color: transparent;
     color: var(--green);
 }

 .sidNW-quiz {
     padding-bottom: 50px;
 }

 /* questions */

 .sidNW-question {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     opacity: 0;
     animation: sidNW-fadeIn 0.6s ease-in forwards;
 }

 @keyframes sidNW-fadeIn {
     from {
         opacity: 0;
         transform: translateY(5px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .sidNW-question__card {
     border-radius: 20px;
     padding: 50px 0;
     max-width: 750px;
     width: 100%;
     text-align: center;
 }

 .sidNW-question__number {
     border: 1px solid var(--lightGreen);
     border-radius: 18px;
     color: var(--black);
     font-size: 12px;
     font-family: 'gorditaBold', sans-serif;
     max-width: 50px;
     margin: 0 auto 30px;
     padding: 5px 15px 4px;
     width: 100%;
 }

 .sidNW-question__icon {
     width: 50px;
     margin: 0 auto 15px;
     display: block;
 }

 .sidNW-question__text {
     font-size: 38px;
     font-family: 'gorditaBold', sans-serif;
     color: var(--black);
     margin-bottom: 30px;
     line-height: 1.2;
 }

 .sidNW-answers {
     display: flex;
     flex-direction: column;
     gap: 20px;
     max-width: 650px;
     margin: 0 auto;
     width: 100%;
 }

 .sidNW-answer p {
     color: var(--green);
     font-size: 24px;
     font-family: 'gorditaBold', sans-serif;
     line-height: normal;
     padding-bottom: 20px;
 }

 .sidNW-answer {
     border: 1px solid var(--lightGray);
     border-radius: 12px;
     background: white;
     color: var(--black);
     cursor: pointer;
     font-size: 16px;
     font-family: 'gorditaRegular', sans-serif;
     line-height: 1.75;
     padding: 30px 50px;
     transition: all 0.3s ease;
     text-align: left;
 }

 .sidNW-answer:hover {
     border-color: var(--lightGreen);
 }

 .sidNW-answer--selected {
     background: var(--green);
     color: white;
     border-color: var(--green);
 }

 .sidNW-answer--selected p {
     color: var(--white);
 }

 .sidNW-answer.sidNW-answer--selected:hover {
     border-color: var(--green);
 }

 .sidNW-show-results {
     opacity: 0;
     animation: sidNW-fadeIn 0.6s ease-in forwards;
 }

 .sidNW-show-results--hidden {
     display: none;
 }

 .sidNW-result {
     background: linear-gradient(#c6dbea 15%, var(--white) 85%);
     position: relative;
     padding: 100px 0;
     z-index: 1;
 }

 .sidNW-result__card {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 60px;
 }

 .sidNW-result__icon {
     max-width: 565px;
     margin: 0 auto;
     width: 100%;
 }

 .sidNW-result__title {
     font-family: 'gorditaBold', sans-serif;
 }

 .sidNW-result__title h2 {
     color: var(--green);
     font-size: 54px;
     margin-bottom: 15px;
 }

 .sidNW-result__title h3 {
     color: var(--black);
     font-size: 18px;
     line-height: 32px;
     margin-bottom: 50px;
 }

 .sidNW-result__description {
     font-size: 16px;
     color: var(--black);
     line-height: 27px;
     max-width: 640px;
 }

 .sidNW-result__description p:first-of-type {
     margin-bottom: 30px;
 }

 .sidNW-result__related {
     margin-top: 100px;
 }

 .sidNW-result__related h2 {
     color: var(--black);
     font-size: 32px;
     line-height: 1.75;
 }

 .sidNW-result__related ol {
     column-count: 2;

     counter-reset: custom-counter;
     font-family: 'gorditaBold', sans-serif;
     list-style: none;
     /* Removes default numbering */
 }

 .sidNW-result__related ol li {
     counter-increment: custom-counter;
     color: var(--black);
     font-size: 20px;
     line-height: 1.75;
 }

 .sidNW-result__related ol li::before {
     content: counter(custom-counter) " ";
     font-size: 24px;
     font-family: 'gorditaBold', sans-serif;
     line-height: 1.75;
     margin-right: 15px;
 }

 .sidNW-result__related a {
     font-family: 'gorditaMedium', sans-serif;
     text-decoration: underline !important;
     transition: all 0.3s ease;
     color: inherit !important;
 }

 .sidNW-result__related a:hover {
     text-decoration-color: transparent !important;
 }

 .sidNW-result--hidden {
     display: none;
 }

 .sidNW-result__cta {
     background-color: var(--green);
     border-radius: 11px;
     color: var(--white);
     display: flex;
     gap: 100px;
     align-items: center;
     justify-content: space-between;
     margin: 100px auto 0;
     padding: 30px 50px 0 !important;
 }

 .sidNW-result__cta h2 {
     font-family: 'gorditaBold', sans-serif;
     font-size: 32px;
     color: inherit;
 }

 .sidNW-result__cta p {
     font-family: 'gorditaRegular', sans-serif;
     font-size: 16px;
     line-height: 23px
 }

 .sidNW-result__cta .sidNW-button {
     border-color: var(--white);
     margin-top: 20px;
     margin-bottom: 30px;
 }

 .sidNW-result__cta .sidNW-button a {
    color: var(--white);
 }

 .sidNW-result__cta .sidNW-button:hover {
     background-color: var(--white);
 }

 .sidNW-result__cta .sidNW-button:hover a {
    color: var(--green);
 }

 .sidNW-result__cta img {
     width: 200px;
 }