* {
  box-sizing: border-box;
}

/* Verdana Regular */
@font-face {
  font-family: 'Verdana Regular';
  src: url(../fonts/VERDANA.TTF);
  font-weight: normal;
  font-style: normal;
}

/* Verdana Bold */
@font-face {
  font-family: 'Verdana Bold';
  src: url(../fonts/VERDANA-BOLD.TTF);
  font-weight: normal;
  font-style: normal;
}

:root {
  --color-primary: #30ea03;
  --font-regular: 'Verdana Regular';
  --font-bold: 'Verdana Bold';

  /* --hue: 255;
    --bg: hsl(var(--hue),90%,90%);
    --fg: hsl(var(--hue),90%,10%);
    --shade1: hsl(var(--hue),10%,90%);
    --shade2: hsl(var(--hue),90%,80%);
    --shade3: hsl(var(--hue),90%,10%);
    --shade4: hsl(283,90%,80%);
    --desc-text1: hsl(var(--hue),10%,30%);
    --desc-text2: hsl(var(--hue),10%,70%); */
  /* --trans-dur: 0.3s;
    --ease-in-out: cubic-bezier(0.65,0,0.35,1);
    --ease-out: cubic-bezier(0.33,1,0.68,1); */
}

body {
  margin: 0;
  padding: 0;
  font-size: 2rem;
  font-family: var(--font-regular);
}

h1,
h2,
h3,
h4,
h5,
strong {
  margin: 0;
  font-family: var(--font-bold);
}

@keyframes zoom-in-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.absolute-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hidden {
  display: none !important;
}

.qh-header {
  display: block;
  height: 38rem;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.qh-logo,
.qe-logo>div {
  background-image: url(../images/H_MasterLogo_Mono_NEG_RGB.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 14rem;
  height: 3rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
}

.qe-logo>div {
  background-image: url(../images/H_MasterLogo_Mono_POS_RGB.svg);
}

.qh-text {
  background-color: var(--color-primary);
  font-family: var(--font-bold);
  display: inline-block;
  margin-top: 4rem;
  padding: 2rem 3rem;
  font-size: 2rem;
}

.qh-foot {
  display: flex;
  position: absolute;
  bottom: -4rem;
  width: 100%;
}

.qh-foot::before {
  content: '';
  width: 64%;
  margin-top: 4rem;
  height: 4rem;
  background-color: var(--color-primary);
}

.qh-foot::after {
  content: '';
  width: 36%;
  height: 4rem;
  background-color: var(--color-primary);
}

/* layer entry start */
.layer-entry {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.layer-entry>div {
  flex: 1;
  max-height: calc(100% / 2.8);
}

.layer-entry>div:last-child {
    margin-top: -1rem;
}

@keyframes rotateAround {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.entry-one-bg {
    width: 47rem;
    height: 47rem;
    position: absolute;
    left: 10rem;
    top: -3.5rem;
    background-image: url(../images/entry-one-rotation.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation: rotateAround 40s linear 0s infinite forwards;
}

.entry-one {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-image: url(../images/entry-one-bg.jpg);
  background-repeat: no-repeat;
  background-size: 180% 240%;
  background-position: top 30% center;
}

.eo-haleon-logo,
.default-haleon-logo,
.color-haleon-logo {
  background-image: url(../images/H_MasterLogo_Colour_NEG_RGB.svg);
  background-repeat: no-repeat;

  width: 16rem;
  height: 4rem;
  position: absolute;
  top: 2rem;
  right: 2.5rem;
}

.color-haleon-logo {
  background-image: url(../images/H_MasterLogo_Colour_POS_RGB.svg);
}

.eo-play-video {
  /* background-image: url(../images/landing_play_button.png);
  background-repeat: no-repeat;
  background-size: contain; */
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
    width: 10rem;
    height: 10rem;
    position: absolute;
    top: 14.5rem;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.eo-play-video div {
  background-image: url(../images/Play.png);
  background-repeat: no-repeat;
  background-size: contain;
    width: 3rem;
    height: 3rem;
}

.default-haleon-logo {
  background-image: url(../images/H_MasterLogo_Mono_POS_RGB.svg);
}

.entry-two {
  /* background-image: url(../images/climate-quiz.png);
  background-repeat: no-repeat;
  background-size: 100% 100%; */
  display: flex;
  flex-direction: column;
}

#bgVideo {
    z-index: -1;
    position: absolute;
    width: 100%;  
    object-fit: cover;
}

.e-two-header {
  font-family: var(--font-regular);
  font-size: 5rem;
  background-color: var(--color-primary);
  margin-top: 3rem;
  display: inline-block;
  width: 48.5rem;
  height: 17rem;
  padding: 3rem;
}

.e-two-header span {
  font-family: var(--font-bold);
}

.e-two-btn {
  background-color: black;
  color: #fff;
  font-size: 3rem;
  margin-top: 7rem;
  margin-left: 3rem;
  display: inline-block;
  width: 24rem;
  height: 7rem;
  border-radius: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.e-two-btn span {
  background-image: url(../images/arrow-right.png);
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  width: 3rem;
  height: 3rem;
  animation: zoom-in-out 1s ease-in-out infinite;
}

.entry-three {
  background-color: var(--color-primary);
}

.e-three-content {
  padding: 3rem 0 0 3rem;
  height: 100%;
  position: relative;
}

.e-three-content h5 {
  font-size: 2.6rem;
  line-height: 4rem;
  font-family: var(--font-bold);
}

.e-three-content ul {
  margin-top: 1rem;
  font-size: 2.2rem;
  line-height: 1.5;
  height: 18rem;
}

.e-three-content li::marker {
  content: "- ";
  font-family: var(--font-bold);
}

.e-brought {
    background-color: #fff;
    margin-left: -7rem;
    padding-left: 7rem;
    margin-top: -5rem;
    padding-top: 1rem;
    height: 100%;
}
.otrivin-logo {
  background-image: url(../images/Otrivin-logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 14rem;
  height: 5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: inline-block;
}
.theraflu-logo {
  background-image: url(../images/Theraflu-logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 18rem;
  height: 7rem;
  margin-top: 1rem;
  display: inline-block;
}
.e-three-cnt-bg {
  background-image: url(../images/resources-2.png);
  background-repeat: no-repeat;
  background-position:right 0 bottom 0;
  width: 61rem;
  position: absolute;
  top: 1rem;
  right: 0rem;
  height: 42rem;
}

.etc-arrow {
  background-image: url(../images/arrow-right-black.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* width: 1rem;
  height: 2rem;
  margin-left: 45%; */
  width: 2rem;
  height: 4rem;
  position: absolute;
  left: 55%;
  bottom: 52%;
  z-index: 1;
  animation: zoom-in-out 1s ease-in-out infinite;
}

/* layer entry end */

/* main video start */
.video-section {
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.video-section .close-icon {
  display: flex;
  justify-content: flex-end;
}

.video-section .close-icon img {
  display: inline-block;
  background-color: var(--color-primary);
  padding: 1rem;
}

.video-section .video-js {
  width: 100%;
  height: 50rem;
}

.video-js .vjs-duration,
.video-js .vjs-time-control {
  display: none !important;
}

.video-js .vjs-control-bar {
  background-color: transparent;
  bottom: -5rem;
}

.video-js .vjs-play-control,
.video-js .vjs-volume-menu-button,
.video-js .vjs-fullscreen-control,
.video-js .vjs-remaining-time {
  display: none !important;
}

.video-js .vjs-progress-control {
  margin-top: -2em;
  margin-left: 2em;
  max-width: 96%;
}

.video-js .vjs-slider,
.video-js .vjs-load-progress div {
  background-color: #fff;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 10px;
}

.video-js .vjs-progress-holder {
  height: 1.8em;
}

.video-js .vjs-progress-holder .vjs-play-progress,
.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-tooltip-progress-bar,
.video-js .vjs-progress-holder .vjs-load-progress div {
  height: 1.8em;
}

.video-js .vjs-play-progress {
  background-color: #30ea03;
}

.video-js .vjs-play-progress:before {
  background-color: #30ea03;
  color: #30ea03;
  font-size: 4.9em;
}

.video-js .vjs-control-text {
  display: none !important;
}

/* main video end */

/* quiz entry gate start */
.qe {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.quiz-entry .qe-top {
  background-image: none;
}

.qe-top {
  width: 100%;
  min-height: calc(100% / 3);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.qe-logo {
  background-color: var(--color-primary);
  width: 26%;
  height: 6rem;
}

.qe-text {
  padding: 6rem 4rem;
  font-size: 2.5rem;
  line-height: 1.4;
}

.qe-statement-logo {
  display: flex;
}

.qe-statement {
  background-color: var(--color-primary);
  padding: 2rem 4rem;
  width: 74%;
  margin-top: 9%;
  font-size: 2rem;
  font-family: var(--font-bold);
}

.qe-txt-knowledge {
  font-family: var(--font-bold);
  font-size: 2.4rem;
  margin-top: 3rem;
}

.qe-txt-knowledge span {
  background-color: var(--color-primary);
  padding: 2.3rem 4rem;
  display: inline-block;
}

.qe-proceed {
  margin-top: auto;
  display: flex;
}

.qe-proceed-1 {
  background-color: var(--color-primary);
  padding: 2.3rem 4rem;
  width: 64%;
  height: 8rem;
  margin-top: 8rem;
}

.qe-proceed-2 {
  background-color: var(--color-primary);
  padding: 2.3rem 3rem;
  width: 36%;
  height: 8rem;
  margin-bottom: 9rem;
  font-family: var(--font-bold);
  font-size: 3rem;
  display: flex;
  justify-content: space-between;
}

.qe-proceed-2 img {
  animation: zoom-in-out 1s ease-in-out infinite;
}

/* quiz entry gate end */

/* question one */
.qe-top.qo-top {
  border-bottom: 2rem solid var(--color-primary);
}

.qe-text.qo-text {
  line-height: 1.2;
}

.qo-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin: 0 13rem;
}

.qo-options>div {
  background-color: #d0d3d4;
  min-width: 19rem;
  padding: 1rem;
  height: 7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.5rem solid #d0d3d4;
  font-family: var(--font-bold);
}

.correct.active {
  border: 0.5rem solid var(--color-primary);
  background-color: #fff;
}

.qone.all-correct .correct.active {
  transform: translate(-143px, -143px);
  transition: transform 0.5s ease-in-out;
}

.qtwo .correct.moveX {
  transform: translateX(-330px);
  transition: transform 0.5s ease-in-out;
}

.incorrect.active {
  border: 0.5rem solid #ff29ff;
  background-color: #fff;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.qone.all-correct .inactive,
.qtwo.all-correct .inactive,
.qthree.all-correct .inactive,
.qfour.all-correct .inactive,
.qfive.all-correct .inactive {
  animation: fadeOut 1s linear 0s forwards;
}

.qone.all-correct .qa-crct-note {
  margin-top: 0;
}


.qe-end {
  margin: 4rem 3rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qe-home {
  background-image: url(../images/home-icon.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 4rem;
  height: 4rem;
}

.qe-hashtag {
  font-size: 1.4rem;
  font-family: var(--font-bold);
}

.qa-incorrect {
  text-align: center;
  font-size: 4rem;
  margin-top: 4rem;
}

.qa-correct {
  padding: 0rem 4rem;
}

.qa-crct-ans {
  background-color: #d0d3d4;
  width: 19rem;
  padding: 1rem;
  min-height: 7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.5rem solid var(--color-primary);
  background-color: #fff;
  font-family: var(--font-bold);
}

.qa-crct-note {
  font-size: 1.9rem;
  padding-left: 2rem;
  border-left: 0.4rem solid var(--color-primary);
  margin-top: 9rem;
}

.qo-submit-skip-or-retry {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 5rem;
  margin-left: auto;
  margin-bottom: 0.5rem;
}

.qo-submit,
.qo-retry,
.qo-next {
  background-color: var(--color-primary);
  border: none;
  font-size: 2.5rem;
  font-family: var(--font-bold);
  width: 23rem;
  padding: 2.5rem;
  display: flex;
  justify-content: space-between;
}

.qo-submit img,
.qo-retry img,
.qo-next img {
  animation: zoom-in-out 1s ease-in-out infinite;
}

/* question one ends */
/* question two */
.qtwo .qe-top {
  border-bottom: 2rem solid var(--color-primary);
}

.qtwo .qo-options {
  margin: 0 5rem;
  font-size: 2rem;
}

.qtwo .qa-incorrect {
  margin-top: 1rem;
}

.qtwo .qa-correct {
  margin-top: -4rem;
  display: flex;
  flex-direction: column;
}

.qtwo .qa-correct .qa-crct-ans {
  min-width: 38rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  padding: 0.5rem;
}

.qtwo .qa-correct .qa-crct-ans:nth-child(2) {
  width: 42rem;
}

.qtwo .qa-crct-note {
  margin-top: 1rem;
}

.qtwo.all-correct .qo-options {
  margin-top: -4rem;
}

.qtwo.all-correct .last-option {
    transform: translateX(-330px);
  transition: transform 0.5s ease-in-out;
}

.qtwo.all-correct .qa-correct {
  margin-top: 1rem;
}


.q-ref {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  position: absolute;
  bottom: 6rem;
  left: 4rem;
}

/* question two ends */
/* question three */

.qthree .qo-options {
  margin: 0 4rem;
  font-size: 2rem;
  font-family: var(--font-bold);
}

.qthree.all-correct .correct.active {
  transform: translateY(-260px);
  transition: transform 0.5s ease-in-out;
}

.qthree.all-correct .qa-crct-note {
  margin-top: -20rem;
}

.qthree .qa-crct-ans {
  width: 55rem;
}

/* question three ends */
/* question four */
.qfour .qo-options {
  margin: 0 0 0 6rem;
  font-size: 2rem;
  font-family: var(--font-bold);
}

.qfour .qa-crct-ans {
  min-width: 25rem;
  font-family: var(--font-bold);
}

.qfour .qa-crct-note {
  margin-top: 4rem;
  font-size: 2rem;
}

.qfour.all-correct .correct.active {
  transform: translate(-579px, -152px);
  transition: transform 0.5s ease-in-out;
}

.qfour.all-correct .qa-correct {
  margin-top: -7rem;
}

/* question four ends */
/* question five */

.qfive .qo-options {
  margin: 0 4rem;
  font-size: 2rem;
  font-family: var(--font-bold);
}

.qfive .qa-crct-ans {
  min-width: 60rem;
  font-size: 2rem;
  font-family: var(--font-bold);
}

.qfive .qa-crct-note {
  margin-top: 4rem;
  font-size: 2rem;
}

.qfive.all-correct .qa-crct-note {
  margin-top: -18rem;
}

/* question five ends */
/* congrats */
.congrats {
  flex: 1;
  position: relative;
  padding-top: 13rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.congrats h5 {
  margin: 0 auto;
  font-size: 3rem;
  display: inline-block;
  border-bottom: 0.5rem solid var(--color-primary);
}

.congrats h3 {
  text-align: center;
  font-size: 5rem;
}

.low-score .high,
.high-score .low {
  display: none;
}

.footnote {
  font-size: 2rem;
}

.congrats h4 {
  text-align: center;
  font-size: 3rem;
}

.congrats p {
  text-align: center;
}

.congrats p span {
  display: inline-block;
}

.high-score .congrats-bg {
  background-image: url(../images/sun.png);
}

.low-score .congrats-bg {
  background-image: url(../images/cloudy.png);
}

.hp-qr-code {
  margin-top: 1rem;
  width: 20rem;
  height: 20rem;
  background-image: url(../qr-codes/health-partner-qr-code.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.congrats-bg {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 20rem;
  height: 20rem;
  margin: 5rem auto;
}

.green-area {
  height: 12rem;
  background-color: var(--color-primary);
}

.next-area {
  height: 10rem;
  display: flex;
  align-items: center;
  padding: 2rem;
  background-color: #fff;
}

.next-area .qe-home {
  margin-left: 14rem;
}

.res-entry .next-area .qe-home {
  margin-right: 14rem;
}

.next-go {
  margin-left: auto;
  animation: zoom-in-out 1s ease-in-out infinite;
}

.reveal-block {
  height: 100%;
  position: absolute;
  inset: 0;
  display: flex;
}

.left-block,
.right-block {
  width: 50%;
  height: 100%;
  background-color: gray;
  position: absolute;
}

@keyframes moveLeftBlock {
  from {
    left: 0;
  }

  to {
    left: -55%;
  }
}

.left-block {
  left: 0;
  animation: moveLeftBlock 0.1s linear 0.1s forwards;
}

@keyframes moveRightBlock {
  from {
    right: 0;
  }

  to {
    right: -55%;
  }
}

.right-block {
  right: 0;
  animation: moveRightBlock 0.1s linear 0.1s forwards;
}

/* congrats ends */
/* resource entry */
.res-entry {
  background-color: #d0d3d4;
}

.res-entry .qe {
  background-image: url(../images/lady.png);

}

.res-entry .e-three-content {
  margin-top: auto;
  background-image: none;
  background-color: var(--color-primary);
  height: calc(100% / 3);
}

.res-entry .e-brought {
  margin-left: -4rem;
  padding-left: 4rem;
  display: flex;
}

.res-entry .otrivin-logo {
  width: 7rem;
}

.res-entry .theraflu-logo {
  width: 15rem;
}

.res-entry .next-area {
  position: relative;
  background-color: transparent;
    margin-top: -8rem;
    flex-direction: row-reverse;
  align-items: flex-end;
}

.res-entry .next-go {
    position: absolute;
    top: -16rem;
    right: 6rem;
    width: 2rem;
}

/* resource entry ends */
/* resources section */
.resources-section {
  margin-top: 9rem;
}

.res-heading {
  display: flex;
}

.res-heading>div:first-child {
  margin-top: 5rem;
  width: calc(100% - 5rem);
  padding: 5rem;
  background-color: var(--color-primary);
  font-family: var(--font-bold);
  font-size: 3rem;
}

.res-heading>div:last-child {
  background-color: var(--color-primary);
  width: 5rem;
  height: 5rem;
}

.res-next {
  background-color: black;
  padding: 2rem;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.res-next .qe-home {
  background-image: url(../images/home-icon-white.png);
}

embed {
  width: 100%;
  flex: 1;
}

.pdf-arrow-back {
  background-image: url(../images/arrow-left.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
    width: 2rem;
    height: 3rem;
}

/* Accordion styles */
.accordion {
  /* --anim-dur: 0.5s; */
  margin: 3rem auto 0;
  width: 100%;
  max-width: 60rem;
}

.accordion__item {
  background-color: #fff;
  /* transition: background-color var(--trans-dur); */
}

.accordion__item-btn {
  background-color: transparent;
  /* box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 50%, 0) inset; */
  cursor: pointer;
  list-style: none;
  outline: transparent;
  padding: 0.5em;
  position: relative;
  text-align: left;
  width: 100%;
  /* transition: box-shadow calc(var(--trans-dur) / 2) var(--ease-in-out); */
  -webkit-tap-highlight-color: transparent;
  font-size: 2rem;
  font-family: var(--font-bold);
  border-bottom: 0.2rem solid #ccc;
    display: flex;
    gap: 1rem;
}

.accordion__item-btn:focus-visible {
  /* box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 50%, 1) inset; */
}

.accordion__item-btn:before,
.accordion__item-btn:after {
  /* background-color: currentColor; */
  content: "";
  display: block;
  position: absolute;
  top: 20%;
  right: 1.5em;
  /* width: 0.75em;
  height: 1px; */
  /* transition: transform var(--trans-dur) var(--ease-in-out); */
  background-repeat: no-repeat;
  background-size: contain;
  width: 3rem;
  height: 3rem;
}

.accordion__item[open] .accordion__item-btn::after {
  background-image: url(../images/up.png);
}

.accordion__item:not([open]) .accordion__item-btn:after {
  background-image: url(../images/down.png);
  /* transform: rotate(-180deg); */
}

.accordion__item-btn::marker,
.accordion__item-btn::-webkit-details-marker {
  display: none;
}

.accordion__item-desc {
  /* color: var(--desc-text1); */
  min-height: 5.5em;
  padding: 1em 0.5em;
  border-bottom: 0.2rem solid #ccc;
  /* transition: color var(--trans-dur); */
}

/* .accordion__item:nth-child(2) {
  background-color: #fff;
}
.accordion__item:nth-child(3) {
  background-color: #fff;
} */
.accordion__item:nth-child(3) .accordion__item-btn {
  /* color: var(--bg); */
  /* transition: color var(--trans-dur); */
}

.accordion__item:nth-child(3) .accordion__item-desc {
  /* color: var(--desc-text2); */
}

/* .accordion__item:nth-child(4) {
  background-color: var(--shade4);
} */
.accordion__item.collapsing,
.accordion__item.expanding {
  overflow: hidden;
}

.accordion__item[open] .accordion__item-btn:after {
  transform: rotate(0);
}

.accordion__item.expanding .accordion__item-btn:after {
  /* animation: accordion-minus var(--anim-dur) var(--ease-out) forwards; */
  transform: rotate(0);
}

.accordion__item.expanding .accordion__item-desc {
  /* animation: accordion-fade-in var(--anim-dur) var(--ease-out) forwards; */
}

.accordion__item.collapsing .accordion__item-btn:after {
  /* animation: accordion-plus var(--anim-dur) var(--ease-out) forwards; */
  transform: rotate(-180deg);
}

.accordion__item.collapsing .accordion__item-desc {
  /* animation: accordion-fade-slide-out var(--anim-dur) var(--ease-out) forwards; */
}

.acc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.acc-row div:last-child {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.acc-pdf-view {
  background-color: black;
  padding: 1rem 2rem;
  font-size: 2rem;
  color: #fff;
  border-radius: 1.2rem;
  border-color: currentColor;
}

.acc-pdf-view.visited {
  background-color: var(--color-primary);
  color: black;
}

.acc-pdf-download {
  background-color: transparent;
  border: none;
  background-image: url(../images/download.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 4rem;
  height: 4rem;
}

.acc-pdf-download.visited {
  background-image: url(../images/download-black.png);
}

.resource-popup {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.res-popup-main {
  background-color: #fff;
  padding: 2rem;
  border-radius: 2rem;
  width: 90%;
  height: calc(100% / 2.5);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.res-popup-main h5 {
  text-align: center;
  margin-top: 1rem;
}

.res-close-icon {
  background-color: var(--color-primary);
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
}

.res-close-icon>div {
  background-image: url(../images/close-icon-light.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}

.res-qr-code {
  margin-top: 5rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
    width: 32rem;
    height: 32rem;
    background-image: url(../qr-codes/health-partner-qr-code.png);
}

/* Dark theme */
/* @media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue),90%,10%);
    --fg: hsl(var(--hue),90%,90%);
    --shade1: hsl(var(--hue),10%,20%);
    --shade2: hsl(var(--hue),90%,30%);
    --shade3: hsl(var(--hue),90%,90%);
    --shade4: hsl(283,90%,30%);
    --desc-text1: hsl(var(--hue),10%,80%);
    --desc-text2: hsl(var(--hue),10%,30%);
  }
} */
/* Animations */
/* @keyframes accordion-minus {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(0);
  }
}
@keyframes accordion-plus {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-90deg);
  }
}
@keyframes accordion-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes accordion-fade-slide-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-0.75em);
  }
} */