:root {
    /*colors*/
    --color-gold: #bf9000;
    --color-royalblue: #002366;
    --color-royalblue-dark: #00102f;
    --color-white: #ffffff;
    --color-grey: #cccccc;
    --color-green: green;
    --color-blue-accent: #02449e;
    --color-form: #526270;
    --color-form-dark: #404c57;
    --color-form-grey: rgba(254, 254, 254, .3);

    /*styling*/
    --padding-btn: 15px 20px;
    --border-radius: 5px;

    --arrow-size: 6vmin;
    --arrow-min-size: 3rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 400;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
    outline: none !important;
    /* outline: 1px solid red !important; */
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--color-royalblue);
    color: var(--color-white);
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

/*------------------------- Styles -------------------------*/

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100vw;
    min-height: 100vh;
}

.container {
    width: 80vw;
    max-width: 1200px;
    margin: 0 auto;
}

h1 {
    position: relative;
    font-size: clamp(1.5rem, 6vw, 3.5rem);
    letter-spacing: .125rem;
    font-weight: 300;
    text-transform: uppercase;
    margin: 4rem 0 3.5rem 0;
}

h1::after {
    content: '';
    position: absolute;
    width: 50%;
    bottom: -1.5rem;
    left: 0;
    border-bottom: 1.5px solid var(--color-gold);
}

h2 {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
    letter-spacing: .125rem;
    font-weight: 400;
    margin-bottom: 2rem;
    color: var(--color-gold);
}

h3 {
    font-size: clamp(1.35rem, 6vw, 2rem);
    letter-spacing: .125rem;
    font-weight: 500;
    margin-bottom: 2rem;
    color: var(--color-gold);
}

p {
    font-size: clamp(.9rem, 2vw, 1.2rem);
    margin-bottom: 2rem;
    font-weight: 300;
}

a {
    text-decoration: none;
    color: var(--color-form-grey);
}

ul {
    margin-bottom: 2rem;
    margin-left: 2rem;
}

ul li {
    margin-bottom: 1rem;
}

ul li::marker {
    color: var(--color-gold);
}

a:hover {
    color: var(--color-gold);
}

form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    height: fit-content;
    margin: 4rem 0;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}

/* autofill styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--color-grey) !important;
    -webkit-box-shadow: 0 0 0 30px var(--color-form-dark) inset !important;
}

label {
    display: block;
    margin-bottom: .75rem;
}

.container-checkbox {
    display: block;
    position: relative;
    padding-left: 42px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: clamp(0.7rem, 2vw, .8rem);
}

/* Hide the browser's default checkbox */
.container-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: transparent;
    border: 1px solid var(--color-form-grey);
    border-radius: var(--border-radius);
}

/* On mouse-over, add a grey background color */
.container-checkbox:hover input~.checkmark {
    border: 1px solid var(--color-white);
}

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked~.checkmark {
    background-color: var(--color-gold);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container-checkbox input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
    left: 9px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid var(--color-white);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

input {
    width: 600px;
    max-width: 80vw;
    padding: 0.75rem;
    margin-bottom: 2rem;
    font-size: 1rem;
    background-color: transparent;
    border: 1px solid var(--color-form-grey);
    border-radius: var(--border-radius);
    color: var(--color-white);
}

input:hover,
input:focus {
    border: 1px solid var(--color-white);
}

button {
    width: fit-content;
    background-color: transparent;
    color: var(--color-white);
    align-self: center;
    font-weight: 500;
    font-size: 1.1rem;
    text-transform: uppercase;
    border: 2px solid var(--color-blue-accent);
    padding: var(--padding-btn);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 200ms ease-in;
}

button:hover {
    background-color: var(--color-gold);
    border: 2px solid var(--color-gold);
    color: var(--color-royalblue);
}

@media (width <=640px) {

    .container {
        width: 87.5vw;
        max-width: 87.5vw;
        padding: 1rem 0;
    }

    h1 {
        margin: 3rem 0 3.5rem 0;
    }
}

/* arrow style */
.container-arrow {
    display: flex;
    min-width: var(--arrow-min-size);
    min-height: var(--arrow-min-size);
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-radius: 50%;
    box-shadow: rgba(3, 102, 214, 0.5) 0px 0px 0px 2px;
    transition: all 300ms;
    margin: 0 auto;
    cursor: pointer;
}

.container-arrow:hover {
    box-shadow: none;
}

.container-arrow.down {
    transform: rotate(135deg);
}

.container-arrow.up {
    transform: rotate(-45deg);
}

.container-arrow.left {
    transform: rotate(225deg);
}

.container-arrow.right {
    transform: rotate(45deg);
}

.arrow {
    min-width: calc(0.4 * var(--arrow-min-size));
    min-height: calc(0.4 * var(--arrow-min-size));
    width: calc(0.4 * var(--arrow-size));
    height: calc(0.4 * var(--arrow-size));
    transform: translateX(-6px) translateY(2px);
    margin: auto;
}

.arrow:before {
    content: '';
    width: 100%;
    height: 100%;
    border-top: 4px solid var(--color-gold);
    border-right: 4px solid var(--color-gold);
    transition: .2s ease;
    display: block;
    transform-origin: 100% 0;
}

.arrow:after {
    content: '';
    float: left;
    position: relative;
    top: -100%;
    width: 100%;
    height: 100%;
    border-width: 0 4px 0 0;
    border-style: solid;
    border-color: var(--color-gold);
    transform-origin: 100% 0;
    transition: .2s ease;
}

.container-arrow:hover .arrow::after {
    transform: rotate(45deg);
    border-color: var(--color-gold);
    height: 120%;
}

.container-arrow:hover .arrow::before {
    border-color: var(--color-gold);
    transform: scale(.8);
}

/* animated elements */
.animated-element {
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.appear {
    opacity: 1;
}

/* prevent select */
.prevent-select {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

/*------------------------- Scale-Up Scan Title -------------------------*/

.container-title {
    width: 100%;
    max-width: 95%;
    padding-left: 5vw;
    align-items: start;
    position: relative;
}

.container-title p {
    font-weight: 400;
    font-size: clamp(1.1rem, 3vw, 1.3rem);
}

.container-title a>div {
    margin: 0;
}

/*------------------------- Scale-Up Scan Intro -------------------------*/

#PopupFormBtn {
    margin-top: 4rem;
}

.container_PopupForm {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-form);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 0 10vw;
}

.container_PopupForm span:nth-of-type(1) {
    font-size: clamp(1.5rem, 6vw, 2rem);
    font-weight: 500;
    margin-bottom: 2rem;
}

.container_PopupForm span:nth-of-type(2) {
    font-size: clamp(.9rem, 2vw, 1.3rem);
    font-weight: 500;
    margin-bottom: .5rem;
    text-transform: none;
}

.container_PopupForm span:nth-of-type(3) {
    font-size: clamp(.9rem, 2vw, 1.1rem);
    text-transform: none;
    margin-bottom: 2rem;
}

.container_PopupForm button {
    margin-top: 2rem;
    border: 1px solid var(--color-white);
}

.container_PopupForm button:hover {
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
    color: var(--color-form);
}

.container_PopupForm form {
    position: relative;
}

#ExitPopupForm {
    display: block;
    position: absolute;
    right: 0;
    top: -48px;
    cursor: pointer;
}

#ExitPopupForm svg:hover {
    fill: var(--color-gold);
}

.show {
    opacity: 1;
    position: fixed;
    max-height: 100%;
    animation: FormAppear 400ms ease-in;
}

@keyframes FormAppear {
    from {
        opacity: 0;
        max-height: 50%;
    }

    to {
        opacity: 1;
        max-height: 100%;
    }
}

/*------------------------- ScaleUpScan -------------------------*/

#ScaleUpScan {
    justify-content: start;
}

/* stepper for which question is displayed*/
.container-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 10vh;
    min-height: 80px;
    background: #001a4d;
}

.stepper-title {
    display: flex;
    align-items: center;
    height: 3vh;
    color: var(--color-gold);
    text-transform: uppercase;
    font-size: clamp(1rem, 4vmin, 1.5rem);
    text-wrap: nowrap;
    padding-left: 4vw;
    margin-top: -1.5vh;
    background: #001a4d;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, #001a4d 0px 3px 6px;
}

.stepper-title span {
    opacity: .7;
}

.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    font-size: clamp(.7rem, 2vw, 1.1rem);
}

.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid var(--color-blue-accent);
    width: 100%;
    top: 50%;
    left: -50%;
    z-index: 2;
    box-shadow: 0px 2px 5px var(--color-royalblue-dark);
}

.stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8vw;
    max-width: 40px;
    height: 8vw;
    max-height: 40px;
    border-radius: 50%;
    background: var(--color-blue-accent);
    box-shadow: 0px 5px 10px var(--color-royalblue-dark);
}

@media (width < 640px) {
    .stepper-item .step-counter {
        width: 6vw;
        height: 6vw;
    }
}

.stepper-item.active .step-counter {
    font-weight: 500;
    color: var(--color-gold);
}

.stepper-item.completed .step-counter {
    background-color: var(--color-gold);
}

.stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid var(--color-gold);
    width: 100%;
    top: 50%;
    left: 50%;
    z-index: 3;
}

.stepper-item:first-child::before {
    content: none;
}

.stepper-item:last-child::after {
    content: none;
}

/* question styling */
.container-question {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 77vh;
    max-height: calc(100vh - 160px - 3vh);
}

.question {
    margin-bottom: 10vh;
    display: none;
}

.question h3 {
    text-align: center;
}

.question p {
    margin: 0;
    text-align: center;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
}

.active-question {
    display: block;
}

.question-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10vw;
}

.question-buttons button {
    width: 125px;
    padding: 15px;
}

#finishScanBtn {
    width: fit-content;
    padding: 30px;
    font-size: 1.4rem;
}

.navigation-question {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    height: 10vh;
    min-height: 80px;
    width: 100%;
}

.navigation-question .container-arrow {
    margin: 0 10vw 10vw 10vw;
}

/* styling of questions/answers and animations */
#agreeBtn.selected {
    background-color: var(--color-gold) !important;
    border: 2px solid var(--color-gold) !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#disagreeBtn.selected {
    background-color: var(--color-gold) !important;
    border: 2px solid var(--color-gold) !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.nextAnimation {
    animation: nextAnimation 350ms ease-in;
}

.previousAnimation {
    animation: previousAnimation 350ms ease-in;
}

@keyframes nextAnimation {
    from {
        transform: translateY(20%);
        opacity: 0;
    }

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

@keyframes previousAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



/*------------------------- ScaleUpScan Result -------------------------*/

#ScaleUpScanResultIntro {
    display: none;
    background: var(--color-royalblue-dark);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, #001a4d 0px 3px 6px;
    padding-top: 2rem;
}

#ScaleUpScanResultIntro button {
    display: block;
    margin: 0 auto 10vh auto;
}

#ScaleUpScanResultIntro p>a {
    margin: 0;
    display: inline;
}

#ScaleUpScanResultIntro a,
#ScaleUpScanResult a {
    display: block;
    text-align: center;
    margin-bottom: 4rem;
}

#ScaleUpScanResultIntro a,
#ScaleUpScanResult a {
    margin-bottom: 1rem;
}

#ScaleUpScanResult {
    display: none;
}

#ScaleUpScanResult h1 {
    margin-bottom: 5rem;
}

.answer {
    margin-bottom: 5rem;
}

.answer p:nth-of-type(2) span {
    color: var(--color-gold);
}

.answer p:nth-of-type(3) {
    color: var(--color-gold);
}

/*------------------------- CustomModal styling (alert message) -------------------------*/

.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
    padding: 25px 42px 25px 0px;
    max-width: 360px;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.11);
    background-image: linear-gradient(to bottom, #FFFFFF, #F9F9F9);
    border-top-color: #d8d8d8;
    border-bottom-color: #bdbdbd;
    border-left-color: #cacaca;
    border-right-color: #cacaca;
    color: #404040;
    padding-left: 81px;
    position: relative;
    animation: alertAppear 350ms ease-in;
}

.modal-content .icon {
    text-align: center;
    width: 60px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 1px solid #bdbdbd;
    border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    background: var(--color-gold);
}

.modal-content .icon:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border: 1px solid #bdbdbd;
    position: absolute;
    border-left: 0;
    border-bottom: 0;
    top: 50%;
    right: -6px;
    margin-top: -5px;
    background: var(--color-gold);
}

.icon .text {
    position: absolute;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-white);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.modal-content p {
    margin: 0;
    padding: 0;
    font-size: clamp(.8rem, 2vw, 1.1rem);
}

.modal-content .close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
}

.modal-content .close:hover,
.modal-content .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .5;
}

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    text-transform: lowercase;
}

@keyframes alertAppear {
    from {
        opacity: 0;
        transform: translateY(-50%);
    }

    to {
        opacity: 1;
        transform: translateX(0%);
    }
}