

/* Box sizing rules */

*,

*::before,

*::after {

  box-sizing: border-box;

}



/* Prevent font size inflation */

html {

  -moz-text-size-adjust: none;

  -webkit-text-size-adjust: none;

  text-size-adjust: none;

}



/* Remove default margin in favour of better control in authored CSS */

body, h1, h2, h3, h4, p,

figure, blockquote, dl, dd {

  margin-block-end: 0;

}



/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul[role='list'],

ol[role='list'] {

  list-style: none;

}



/* Set core body defaults */

body {

  min-height: 100vh;

  line-height: 1.5;

}



/* Set shorter line heights on headings and interactive elements */

h1, h2, h3, h4,

button, input, label {

  line-height: 1.1;

}



/* Balance text wrapping on headings */

h1, h2,

h3, h4 {

  text-wrap: balance;

}



/* A elements that don't have a class get default styles */

a:not([class]) {

  text-decoration-skip-ink: auto;

  color: currentColor;

}



/* Make images easier to work with */

img,

picture {

  max-width: 100%;

  display: block;

}



/* Inherit fonts for inputs and buttons */

input, button,

textarea, select {

  font-family: inherit;

  font-size: inherit;

}



/* Make sure textareas without a rows attribute are not tiny */

textarea:not([rows]) {

  min-height: 10em;

}



/* Anything that has been anchored to should have extra scroll margin */

:target {

  scroll-margin-block: 5ex;

}



p {

    margin: 0;

}





@font-face {

    font-family: "Visby 800";

    src: url("../fonts/Visby Round CF Extra Bold.otf") format("opentype");

    font-weight: 800;

    font-style: normal;

}



body {

    width: 100%;

    background-color: #0b1727;

    font-family: 'Visby 800';

    margin: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

}



canvas {

    display: block;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

}



header {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding-top: clamp(0.625rem, 3.13vw, 1.5rem); /*  min: 10px  max: 24px, 320 - 768 */

}



.header-container {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    max-width: clamp(14.688rem, 0.089rem + 72.99vw, 35.125rem); /*  min: 235px  max: 562px, 320 - 768 */

    text-align: center;

    gap: clamp(0.625rem, 3.13vw, 1.5rem); /*  min: 10px  max: 24px, 320 - 768 */;

}



.header-logo > a > img {

    width: clamp(3.125rem, 15.63vw, 7.5rem); /*  min: 50px  max: 120px, 320 - 768 */

}

.header-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}


.header-title {

    font-size: clamp(0.75rem, 0.036rem + 3.57vw, 1.75rem); /*  min: 12px  max: 28px, 320 - 768 */

    color: #fff;

}



.header-subtitle {

    font-size: clamp(0.75rem, 0.036rem + 3.57vw, 1.75rem); /*  min: 12px  max: 28px, 320 - 768 */

    color: #fff;

}



main {

    margin-top: clamp(2rem, 0.036rem + 9.82vw, 4.75rem); /*  min: 32px  max: 76px, 320 - 768 */

    max-width: clamp(14.688rem, 0.089rem + 72.99vw, 35.125rem); /*  min: 235px  max: 562px, 320 - 768 */;

    display: flex;

    flex-direction: column;

    align-items: center;

}



form {

    display: flex;

    flex-direction: column;

    gap: clamp(0.625rem, 3.13vw, 1.5rem); /*  min: 10px  max: 24px, 320 - 768 */;

}



.main-title {

    color: #fff;

    font-size: clamp(0.625rem, 3.13vw, 1.5rem); /*  min: 10px  max: 24px, 320 - 768 */

    text-align: center;

    margin-bottom: clamp(1.25rem, -0.089rem + 6.7vw, 3.125rem); /*  min: 20px  max: 50px, 320 - 768 */;

}



.main-text-inputs-container {

    display: flex;

    flex-direction: column;

    gap: clamp(0.625rem, 3.13vw, 1.5rem); /*  min: 10px  max: 24px, 320 - 768 */;

}



.main-card-container {

    background-color: #fff;

    border-radius: clamp(1.25rem, -0.089rem + 6.7vw, 3.125rem); /*  min: 20px  max: 50px, 320 - 768 */

    display: flex;

    padding: clamp(0.75rem, 0.036rem + 3.57vw, 1.75rem); /*  min: 12px  max: 28px, 320 - 768 */;

    margin-bottom: clamp(0.875rem, -0.018rem + 4.46vw, 2.125rem); /*  min: 14px  max: 34px, 320 - 768 */

}



.main-card {

    width: 100%;

    display: flex;

    flex-direction: row;

    gap: clamp(0.938rem, -0.179rem + 5.58vw, 2.5rem); /*  min: 15px  max: 40px, 320 - 768 */

    align-items: center;

    color: #000;

}



.main-card-inner {

    display: flex;

    flex-direction: column;

    gap: clamp(0.5rem, 0.054rem + 2.23vw, 1.125rem); /*  min: 8px  max: 18px, 320 - 768 */;

}



.main-card-header-container {

    display: flex;

    flex-direction: column;

}



.main-card-img > img {

    width: clamp(2.688rem, 0.009rem + 13.39vw, 6.438rem); /*  min: 43px  max: 103px, 320 - 768 */

}



.main-card-name {

    font-size: clamp(0.625rem, 3.13vw, 1.5rem); /*  min: 10px  max: 24px, 320 - 768 */

}



.main-card-job {

    font-size: clamp(0.5rem, 0.054rem + 2.23vw, 1.125rem); /*  min: 8px  max: 18px, 320 - 768 */

    color: #929292;

}



.main-card-rating-container {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: clamp(0.625rem, 3.13vw, 1.5rem); /*  min: 10px  max: 24px, 320 - 768 */;

}



.main-card-reviews {

    font-size: clamp(0.375rem, 0.018rem + 1.79vw, 0.875rem); /*  min: 6px  max: 14px, 320 - 768 */

}



.main-card-stars {

    width: clamp(3.75rem, 0.089rem + 18.3vw, 8.875rem); /*  min: 60px  max: 142px, 320 - 768 */

}



.main-card-stars > img {

    width: 100%;

}



.main-subtitle {

    color: #fff;

    display: flex;

    flex-direction: column;

    gap: clamp(1.25rem, -0.089rem + 6.7vw, 3.125rem);

    font-size: clamp(0.875rem, -0.018rem + 4.46vw, 2.125rem); /*  min: 14px  max: 34px, 320 - 768 */

    text-align: center;

    align-items: center;

}



.main-subtitle > p:nth-last-child(1) {

    font-size: clamp(0.563rem, 0.071rem + 2.46vw, 1.25rem); /*  min: 9px  max: 20px, 320 - 768 */

    max-width: clamp(10.563rem, -0.018rem + 52.9vw, 25.375rem); /*  min: 169px  max: 407px, 320 - 768 */

}



input[type="text"], input[type="email"] {

    width: 100%;

    height: clamp(2.875rem, -0.071rem + 14.73vw, 7rem); /*  min: 46px  max: 112px, 320 - 768 */

    border: solid #fff;

    border-width: clamp(0.063rem, 0.018rem + 0.22vw, 0.125rem); /*  min: 1px  max: 2px, 320 - 768 */

    background: transparent;

    padding: clamp(0.938rem, 4.69vw, 2.25rem); /*  min: 15px  max: 36px, 320 - 768 */

    box-sizing: border-box;

    color: #fff;

    border-radius: clamp(0.625rem, 3.13vw, 1.5rem); /*  min: 10px  max: 24px, 320 - 768 */;

    font-size: clamp(0.875rem, 0.161rem + 3.57vw, 1.875rem); /*  min: 14px  max: 30px, 320 - 768 */

}



input[type="file"] {

    display: none;

}



input[type="text"]::placeholder, input[type="email"]::placeholder {

    color: #fff; 

}



.main-file-container {

    display: flex;

    flex-direction: row;

    position: relative;

}



.main-file-select {

    cursor: pointer;

    display: inline-block;

    width: 50%;

    min-height: clamp(7.5rem, -0.089rem + 37.95vw, 18.125rem); /*  min: 120px  max: 290px, 320 - 768 */

}



.main-file-select > img {

    width: 100%;

    height: 100%;

    border-radius: clamp(0.625rem, 3.13vw, 1.5rem); /*  min: 10px  max: 24px, 320 - 768 */

    object-fit: cover;

    border: solid #fff;

    border-width: clamp(0.063rem, 0.018rem + 0.22vw, 0.125rem); /*  min: 1px  max: 2px, 320 - 768 */

}



.main-file-picture {

    width: 50%;

}



.main-file-picture-container {

    position: absolute;

    width: clamp(7.938rem, 0.08rem + 39.29vw, 18.938rem); /*  min: 127px  max: 303px, 320 - 768 */

    transform:rotate(22deg);

    left: 45%;

}



.main-file-picture-text {

    height: 100%;

    display: flex;

    align-items: end;

    justify-content: end;

}



.main-file-picture-text > p {

    font-size: clamp(0.375rem, 0.018rem + 1.79vw, 0.875rem); /*  min: 6px  max: 14px, 320 - 768 */

    text-align: center;

    color: #fff;

    max-width: clamp(7rem, 0.17rem + 34.15vw, 16.563rem); /*  min: 112px  max: 265px, 320 - 768 */

}



.main-img {

    border-radius: clamp(0.313rem, 0.089rem + 1.12vw, 0.625rem); /*  min: 5px  max: 10px, 320 - 768 */

    margin-bottom: clamp(2.188rem, -0.268rem + 12.28vw, 5.625rem); /*  min: 35px  max: 90px, 320 - 768 */

}



.main-text {

    font-size: clamp(1.063rem, 0.036rem + 5.13vw, 2.5rem); /*  min: 17px  max: 40px, 320 - 768 */

    color: #fff;

    text-align: center;

    margin-bottom: clamp(4.375rem, 0.357rem + 20.09vw, 10rem);

}



.terms {

    color: #fff;

    font-size: clamp(0.625rem, 3.13vw, 1.5rem); /*  min: 10px  max: 24px, 320 - 768 */

    text-align: center;

}



#timer {

    font-size: clamp(4.688rem, 23.44vw, 11.25rem); /*  min: 75px  max: 180px, 320 - 768 */

    color: #fff;

    text-align: center;

    margin-top: clamp(0.625rem, 3.13vw, 1.5rem); /*  min: 10px  max: 24px, 320 - 768 */

    margin-bottom: clamp(0.625rem, 3.13vw, 1.5rem); /*  min: 10px  max: 24px, 320 - 768 */

}



.timer-text {

    color: #fff;

    font-size: clamp(0.625rem, 3.13vw, 1.5rem); /*  min: 10px  max: 24px, 320 - 768 */

    text-align: center;

}



.timer-label { 

    color: #fff;

    font-size: clamp(0.563rem, 0.071rem + 2.46vw, 1.25rem); /*  min: 9px  max: 20px, 320 - 768 */

    text-align: center;

}



.main-button {

    margin-top: clamp(0.313rem, -0.134rem + 2.23vw, 0.938rem); /*  min: 5px  max: 15px, 320 - 768 */

}



.main-button button {

    background: white;

    border: none;

    border-radius: 50px;

    width: 100%;

    color: #000;

    padding-top: clamp(0.875rem, -0.018rem + 4.46vw, 2.125rem); /*  min: 14px  max: 34px, 320 - 768 */

    padding-bottom: clamp(0.875rem, -0.018rem + 4.46vw, 2.125rem); /*  min: 14px  max: 34px, 320 - 768 */

    text-align: center;

    cursor: pointer;

    font-size: clamp(0.875rem, -0.018rem + 4.46vw, 2.125rem); /*  min: 14px  max: 34px, 320 - 768 */

}



.main-link {

    margin-top: clamp(1.25rem, -0.089rem + 6.7vw, 3.125rem); /*  min: 20px  max: 50px, 320 - 768 */

    width: 100%;

    background-color: #FFEA00;

    text-align: center;

    border: none;

    border-radius: 50px;

}



.main-link a {

    display: block;

    width: 100%;

    height: 100%;

    text-decoration: none;

    width: 100%;

    color: #000;

    text-align: center;

    cursor: pointer;

    font-size: clamp(0.875rem, -0.018rem + 4.46vw, 2.125rem); /*  min: 14px  max: 34px, 320 - 768 */

    line-height: normal;

    padding-top: clamp(0.875rem, -0.018rem + 4.46vw, 2.125rem); /*  min: 14px  max: 34px, 320 - 768 */

    padding-bottom: clamp(0.875rem, -0.018rem + 4.46vw, 2.125rem); /*  min: 14px  max: 34px, 320 - 768 */

}



.main-link a:hover {

    text-decoration: underline;

}



footer {

    max-width: clamp(14.688rem, 0.089rem + 72.99vw, 35.125rem); /*  min: 235px  max: 562px, 320 - 768 */;

    margin-top: clamp(2.813rem, 0.045rem + 13.84vw, 6.688rem); /*  min: 45px  max: 107px, 320 - 768 */

    color: #fff;

    text-align: center;

    font-size: clamp(0.5rem, 0.054rem + 2.23vw, 1.125rem); /*  min: 8px  max: 18px, 320 - 768 */

}



.wrapper {

    filter: blur(100px);

    pointer-events: none;

    position: absolute;

    min-width: 100%;

    margin-top: 0px;

    height: 740px;

    top: clamp(-8.75rem, -23.036rem + 71.43vw, 11.25rem);

    z-index: -1;

    opacity: 1;

    overflow: hidden;

}



.inner {

    border-radius: 99999px;

    position: absolute;

    min-width: 100%;

    min-height: 100%;

    overflow: hidden;

}



.ColorBlobs_SpinningGradient__DpGtx {

    position: absolute;

    top: 50%;

    left: 50%;

    width: clamp(18.75rem, 5.357rem + 66.96vw, 37.5rem);

    height: clamp(14.125rem, -0.071rem + 70.98vw, 34rem);

    transform: translate(-50%, -50%);

    animation: ColorBlobs_spin__CbrXa 8s linear infinite;

    background: conic-gradient(from 0deg,

            #00bfff,

            #00ffff,

            #7b68ee,

            #8a2be2,

            #32cd32,

            #00bfff);

}



.ColorBlobs_SpinningGradient__DpGtx2 {

    position: absolute;

    top: 50%;

    left: 50%;

    width: clamp(18.75rem, 5.357rem + 66.96vw, 37.5rem);

    height: clamp(14.125rem, -0.071rem + 70.98vw, 34rem);

    transform: translate(-50%, -50%);

    animation: ColorBlobs_spin__CbrXa 8s linear infinite;

    background: conic-gradient(from 0deg,

            #FF00FB);

}



@keyframes ColorBlobs_spin__CbrXa {

    0% {

        transform: translate(-50%, -50%) rotate(0deg);

    }



    to {

        transform: translate(-50%, -50%) rotate(1turn);

    }

}



@keyframes ColorBlobs_spin__CbrXa2 {

    0% {

        transform: translate(-50%, -50%) rotate(0deg);

    }



    to {

        transform: translate(-50%, -50%) rotate(1turn);

    }

}


.header-lang {
    position: relative;
    background-color: #fff;
    border-radius: clamp(0.688rem, -0.071rem + 3.79vw, 1.75rem); /*  min: 11px  max: 28px, 320 - 768 */
    border-width: clamp(0.047rem, 0.018rem + 0.15vw, 0.087rem); /*  min: 1px  max: 1.4px, 320 - 768 */
    border-style: solid;
    border-color: #D8D8D8;
    display: flex;
    flex-direction: row;
    height: 100%;
    padding-left: clamp(0.438rem, 0.08rem + 1.79vw, 0.938rem); /*  min: 7px  max: 15px, 320 - 768 */
    padding-right: clamp(0.438rem, 0.08rem + 1.79vw, 0.938rem); /*  min: 7px  max: 15px, 320 - 768 */
    padding-top: clamp(0.188rem, 0.098rem + 0.45vw, 0.313rem); /*  min: 3px  max: 5px, 320 - 768 */
    padding-bottom: clamp(0.188rem, 0.098rem + 0.45vw, 0.313rem); /*  min: 3px  max: 5px, 320 - 768 */
    align-items: center;
    cursor: pointer;
    gap: clamp(0.313rem, 0.089rem + 1.12vw, 0.625rem); /*  min: 5px  max: 10px, 320 - 768 */
}

.header-lang > img {
    width: clamp(0.313rem, -0.089rem + 2.01vw, 0.875rem); /*  min: 5px  max: 14px, 320 - 768 */
}

.header-lang-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0.563rem, 0.027rem + 2.68vw, 1.313rem); /*  min: 9px  max: 21px, 320 - 768 */
    gap: clamp(0.125rem, -0.009rem + 0.67vw, 0.313rem); /*  min: 2px  max: 5px, 320 - 768 */
}

.lang-flag {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.lang-flag > svg {
    height: clamp(0.563rem, 0.027rem + 2.68vw, 1.313rem); /*  min: 9px  max: 21px, 320 - 768 */
    width: clamp(0.563rem, 0.027rem + 2.68vw, 1.313rem); /*  min: 9px  max: 21px, 320 - 768 */
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    border-radius: clamp(0.5rem, 0.32rem + 0.56vw, 1.125rem); /* 8px - 18px */
    border: 1px solid #D8D8D8;
    width: 100%;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    text-align: center;
}

.lang-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown ul {
    list-style: none;
    padding: 0;
    padding-top: clamp(0.125rem, 0.036rem + 0.45vw, 0.25rem); /*  min: 2px  max: 4px, 320 - 768 */
    padding-bottom: clamp(0.125rem, 0.036rem + 0.45vw, 0.25rem); /*  min: 2px  max: 4px, 320 - 768 */
    margin: 0;
}

.lang-dropdown li {
    padding-top: clamp(0.125rem, 0.036rem + 0.45vw, 0.25rem); /*  min: 2px  max: 4px, 320 - 768 */
    padding-bottom: clamp(0.125rem, 0.036rem + 0.45vw, 0.25rem); /*  min: 2px  max: 4px, 320 - 768 */
    font-size: clamp(0.5rem, -0.036rem + 2.68vw, 1.25rem); /*  min: 8px  max: 20px, 320 - 768 */
    color: #000;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
}

.lang-dropdown li > a {
    text-decoration: none;
}

.lang-dropdown li:hover {
    background: #f0f0f0;
    text-decoration: underline;
}
