.walk-left, .walk-right {
    animation: .9s steps(5) infinite walk;
}

.banner-usa-text, .bodyshop-text, .road-sign-text, .scroll-text, .tesla-van-project-text, .welcome-text {
    color: var(--white-color);
}

.form-request, .form-row {
    gap: 10px;
    display: flex;
}

#security-question, .banner-usa-text, .bodyshop-text, .popup, .scroll-text, .text-form, .welcome-text {
    text-align: center;
}

#security-question, .popup {
    font-family: Arial, sans-serif;
}

:root {
    --scene-height: 21300px;
    --avatar-height: 250px;
    --avatar-width: 130px;
    --background-color: #00bef3;
    --white-color: #ffffff;
    --road-sign-color: #32243d;
    --sand-color: #c69c6d;
    --grey-color: #aeaeae;
    --flagpole-color: #e2e2e2;
    --flagpole-point-color: #252525;
    --black-color: #000000;
    --ground-height: 100px;
    --sand-height: 30px;
}

@font-face {
    font-family: ChiaSeeds;
    src: url("../fonts/ChiaSeeds.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background: var(--background-color);
    overflow-x: hidden;
    font-family: ChiaSeeds, sans-serif;
    overflow-y: hidden;
}

#control-sound-button {
    height: 40px;
    right: 10px;
    top: 10px;
    position: fixed;
}

.avatar {
    height: var(--avatar-height);
    width: var(--avatar-width);
    position: fixed;
    z-index: 9998;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.ground, .sand {
    width: var(--scene-height);
    position: fixed;
}

.scene {
    height: var(--scene-height);
}

.left, .right {
    background-image: url(../images/avatar-front.png);
}

.walk-right {
    background-image: url(../images/avatar-walk-right.png);
}

.walk-left {
    background-image: url(../images/avatar-walk-left.png);
}

.avatar-at-drive, .van {
    animation: 1s ease-in-out infinite gentleShake;
}

@keyframes walk {
    from {
        background-position: 0;
    }
    to {
        background-position: -650px;
    }
}

.ground {
    background-image: url(../images/ground.png);
    background-repeat: repeat;
    height: var(--ground-height);
    bottom: 0;
}

.sand {
    background-color: var(--sand-color);
    height: var(--sand-height);
    z-index: 9994;
    bottom: var(--ground-height);
}

.welcome-text {
    position: fixed;
    font-size: 30px;
    width: 385px;
    z-index: 9999;
}

.scroll {
    position: fixed;
    background: rgba(128, 128, 128, .7);
    bottom: 250px;
    width: 200px;
    height: 150px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.scroll img {
    width: 50px;
}

.scroll-text {
    font-size: 24px;
    z-index: 9999;
    margin-top: 10px;
}

.cloud-empty1, .cloud-empty2, .cloud-empty3 {
    position: fixed;
    background-image: url(../images/cloud-empty.png);
    width: 562px;
    height: 148px;
    z-index: 9999;
}

.lifeguard-tower {
    position: fixed;
    background-image: url(../images/lifeguard-tower.png);
    width: 493px;
    height: 512px;
}

.palm-left, .palm-right {
    background-image: url(../images/palm-tree.png);
    background-repeat: no-repeat;
    width: 450px;
    height: 650px;
    position: fixed;
}

.palm-right {
    transform: scaleX(-1);
}

.miami-background {
    position: fixed;
    background-image: url(../images/miami.png);
    height: 553px;
    background-repeat: repeat-x;
    width: 3600px;
    opacity: .5;
    bottom: var(--ground-height);
    z-index: -9999;
}

.banner-usa, .final-message, .mount, .people-photo, .sema-show-logo {
    background-repeat: no-repeat;
}

.road-sign-left {
    position: fixed;
    background-image: url(../images/roadSignLeft.png);
    width: 311px;
    height: 350px;
    z-index: 9998;
}

.road-sign-right {
    position: fixed;
    background-image: url(../images/roadSignRight.png);
    width: 61px;
    height: 350px;
    z-index: 9999;
}

.road-sign-text {
    position: fixed;
    font-size: 70px;
    width: 222px;
    height: 74px;
    z-index: 9999;
}

.tesla-van-project-text {
    position: fixed;
    font-size: 36px;
    width: 600px;
    height: 50px;
    z-index: 9999;
    text-align: center;
}

.avatar-at-drive, .van, .wheel-back, .wheel-front {
    position: fixed;
    z-index: 9998;
}

.van {
    background-image: url(../images/van.png);
    width: 660px;
    height: 332px;
    transition: opacity .5s ease-in-out;
}

@keyframes gentleShake {
    0%, 100%, 50% {
        transform: translate(0, 0) rotate(0);
    }
    10% {
        transform: translate(.5px, 1px) rotate(.2deg);
    }
    20% {
        transform: translate(1px, .5px) rotate(-.2deg);
    }
    30% {
        transform: translate(-.5px, 0) rotate(.1deg);
    }
    40% {
        transform: translate(.5px, -1px) rotate(-.1deg);
    }
    60% {
        transform: translate(-.5px, 1px) rotate(.1deg);
    }
    70% {
        transform: translate(-1px, -.5px) rotate(-.1deg);
    }
    80% {
        transform: translate(.5px, -.5px) rotate(.2deg);
    }
    90% {
        transform: translate(-.5px, 1px) rotate(-.2deg);
    }
}

.avatar-at-drive {
    background-image: url(../images/avatar-at-drive.png);
    width: 63px;
    height: 74px;
    transition: opacity .2s ease-in-out;
}

.wheel-back, .wheel-front {
    background-image: url(../images/wheel.png);
    width: 94px;
    height: 94px;
    transition: opacity .5s ease-in-out;
    transform-origin: center;
}

.bar, .flamingos, .miami-logo, .surfboard {
    z-index: 9996;
    position: fixed;
}

.surfboard {
    background-image: url(../images/surf.png);
    width: 93px;
    height: 311px;
}

.bar {
    background-image: url(../images/bar.png);
    width: 658px;
    height: 419px;
}

.miami-logo {
    background-image: url(../images/miami-logo.png);
    width: 308px;
    height: 130px;
}

.flamingos {
    background-image: url(../images/flamingos.png);
    width: 105px;
    height: 200px;
    opacity: 0;
}

.crazy-flamingos {
    position: fixed;
    height: 310px;
    z-index: 9996;
}

.flag1, .flag2, .flag3 {
    position: fixed;
    height: 630px;
    z-index: 9996;
    background-size: contain;
}

.flag1 {
    background-image: url(../images/flags1.png);
    width: 409px;
}

.flag2 {
    background-image: url(../images/flags2.png);
    width: 410px;
}

.flag3 {
    background-image: url(../images/flags3.png);
    width: 409px;
}

.bodyshop, .bodyshop-text {
    position: fixed;
    z-index: 10001;
}

.bodyshop {
    background-image: url(../images/bodyshop.png);
    width: 1210px;
    height: 544px;
}

.bodyshop-text {
    font-size: 30px;
    width: 600px;
    height: 50px;
}

.road-sign2, .this-way-sign, .traffic-sign {
    z-index: 9997;
    position: fixed;
}

.road-sign2 {
    background-image: url(../images/road-sign.png);
    width: 244px;
    height: 375px;
}

.road-sign2-text1, .road-sign2-text2, .road-sign2-text3 {
    position: fixed;
    font-size: 30px;
    width: 180px;
    height: 50px;
    z-index: 9997;
    color: var(--white-color);
}

.this-way-sign {
    background-image: url(../images/this-way-sign.png);
    width: 248px;
    height: 335px;
}

.traffic-sign {
    background-image: url(../images/traffic-sign.png);
    width: 180px;
    height: 360px;
}

.banner-usa {
    position: fixed;
    background-image: url(../images/usabanner.png);
    background-size: contain;
    width: 385px;
    height: 76px;
    z-index: 9999;
}

.banner-usa-text {
    position: fixed;
    font-size: 32px;
    width: 338px;
    height: 38px;
    z-index: 9999;
}

.liberty-statue {
    position: fixed;
    background-image: url(../images/statue.png);
    width: 180px;
    height: 630px;
    z-index: 9997;
}

.golden-gate, .mount, .white-house {
    height: 500px;
    position: fixed;
}

.mount {
    background-image: url(../images/mount.png);
    width: 1290px;
    z-index: 9996;
}

.golden-gate {
    background-image: url(../images/golden-gate.png);
    width: 1306px;
    z-index: 9995;
}

.white-house {
    background-image: url(../images/white-house.png);
    width: 1293px;
    z-index: 9996;
}

.flag-trump {
    position: fixed;
    background-image: url(../images/flag-trump.png);
    width: 185px;
    height: 100px;
    z-index: -9999;
    bottom: calc(-1 * (var(--ground-height) + var(--sand-height)));
}

.flag-pole {
    height: 550px;
    width: 8px;
    background-color: var(--flagpole-color);
    position: fixed;
    margin-right: 5px;
}

.flag-point, .form-request button {
    background-color: var(--flagpole-point-color);
}

.flag-point {
    height: 20px;
    width: 20px;
    border-radius: 30px;
    position: fixed;
    z-index: 9999;
}

.eiffel-tower, .ferris-wheel, .las-vegas-sign, .roadSignSemaShowLeft {
    z-index: 9996;
    position: fixed;
}

.las-vegas-sign {
    background-image: url(../images/las-vegas-sign.png);
    width: 387px;
    height: 680px;
}

.ferris-wheel {
    background-image: url(../images/ferris-wheel.png);
    width: 462px;
    height: 489px;
}

.eiffel-tower {
    background-image: url(../images/tower-eiffel.png);
    width: 256px;
    height: 500px;
}

.roadSignSemaShowLeft {
    background-image: url(../images/roadSignLeft2.png);
    width: 400px;
    height: 500px;
}

.roadSignSemaShowRight {
    position: fixed;
    background-image: url(../images/roadSignRight2.png);
    width: 61px;
    height: 500px;
    z-index: 9998;
}

.sema-show-logo, .showroom, .stage {
    z-index: 9996;
    position: fixed;
}

.sema-show-logo {
    background-image: url(../images/sema-show-logo.png);
    background-size: contain;
    width: 250px;
    height: 70px;
}

.showroom {
    background-image: url(../images/showroom.png);
    width: 1618px;
    height: 267px;
}

.stage {
    background-image: url(../images/stage.png);
    width: 1149px;
    height: 635px;
    background-size: contain;
}

.people-photo {
    position: fixed;
    background-image: url(../images/people-photo.png);
    background-size: contain;
    background-position: initial;
    width: 1180px;
    height: 320px;
    z-index: 9999;
}

.flash1, .flash2, .flash3 {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
}

.flash1.flash-active {
    animation: .8s ease-in-out .2s infinite flash;
}

.flash2.flash-active {
    animation: 1s ease-in-out .4s infinite flash;
}

.flash3.flash-active {
    animation: 1.2s ease-in-out .6s infinite flash;
}

@keyframes flash {
    0%, 100% {
        opacity: 0;
        box-shadow: 0 0 20px 5px rgba(255, 255, 255, .8), 0 0 40px 10px rgba(255, 255, 255, .5), 0 0 60px 15px rgba(255, 255, 255, .3);
        transform: scale(.8);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 50px 20px #fff, 0 0 100px 40px rgba(255, 255, 255, .7), 0 0 150px 60px rgba(255, 255, 255, .4);
        transform: scale(1.5);
    }
}

.ribbon-win {
    position: fixed;
    background-image: url(../images/ribbon-win.png);
    width: 320px;
    height: 80px;
    z-index: 9998;
}

.billboard {
    position: fixed;
    background-image: url(../images/billboard.png);
    width: 490px;
    height: 580px;
    z-index: 9996;
}

.form-request, .text-form {
    z-index: 9999;
    position: fixed;
}

.text-form {
    font-size: 22px;
    width: 470px;
    height: 50px;
    color: var(--black-color);
}

.form-request {
    width: 450px;
    padding: 10px;
    flex-direction: column;
}

.form-request input[type=email], .form-request input[type=text], .form-request input[type=url], .form-request textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    font-family: Arial, sans-serif;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
}

.form-request textarea {
    resize: none;
    height: 100px;
}

.form-request button {
    display: flex;
    padding: 10px 20px;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 700;
    margin-left: auto;
}

.form-request input::placeholder, .form-request textarea::placeholder {
    color: #888;
    font-size: 13px;
    font-family: Arial, sans-serif;
}

.form-request button svg {
    width: 16px;
    height: 16px;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.security-question-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

#security-question-label {
    white-space: nowrap;
    font-size: 18px;
}

#security-question {
    width: 40px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
    box-sizing: border-box;
}

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    width: 350px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
    transition: .3s;
    z-index: 10000;
    cursor: pointer;
}

.popup.success {
    background-color: #d4edda;
    color: #155724;
    border: 2px solid #c3e6cb;
}

.popup.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 2px solid #f5c6cb;
}

.popup.fadeIn {
    opacity: 0;
    animation: .3s forwards fadeInPopup;
}

@keyframes fadeInPopup {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.final-message {
    height: 300px;
    width: 428px;
    position: fixed;
    background-size: contain;
    background-image: url(../images/final-message.png);
}

.powered-by-container {
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: flex-start; /* Align items to the left */
    position: fixed;
    bottom: 20px; /* Reduced bottom space */
    left: calc(50% - 672px); /* Move 7 inches (672px) to the left from the center */
    z-index: 9997; /* Ensure it stays on top */
    overflow: hidden;
}

.powered-by {
    position: fixed;
    font-size: 26px;
    text-decoration: none;
    cursor: pointer;
    color: var(--white-color);
    margin-right: 20px; /* Space between the text and the video */
}

.my-video {
    max-width: 100%;
    margin: 0 auto;
}

.my-video iframe {
    width: 100%;
    height: 630px;
    max-width: 1120px; /* Ensure iframe fits within its container */
}

.youtube-iframe {
    transform: rotate(180deg); /* Rotate only the YouTube iframe */
}

@media (max-width: 576px) {
    .cloud-big, .ribbon-win {
        position: fixed;
        background-size: contain;
    }
    :root {
        --scene-height: 19200px;
    }
    .text-form {
        position: fixed;
        font-size: 18px;
        width: 470px;
        height: 50px;
        z-index: 9999;
        color: var(--black-color);
        text-align: center;
    }
    .ribbon-win {
        background-image: url(../images/ribbon-win.png);
        width: 240px;
        height: 60px;
        z-index: 9998;
    }
    .final-message {
        height: 200px;
        text-align: center;
        width: 320px;
        position: fixed;
        color: var(--white-color);
        font-size: 30px;
    }
    .cloud-big {
        background-image: url(../images/cloud-big.png);
        width: 360px;
        height: 244px;
        background-repeat: no-repeat;
        z-index: 9997;
    }
}

@media (max-width: 430px) {
    :root {
        --scene-height: 19000px;
        --ground-height: 50px;
    }
    .welcome-text {
        font-size: 28px;
    }
    .tesla-van-project-text {
        font-size: 36px;
    }
    .final-message {
        height: 281px;
        width: 400px;
        position: fixed;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(../images/final-message.png);
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    :root {
        --scene-height: 19500px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --scene-height: 19800px;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    :root {
        --scene-height: 20300px;
    }
}

@media (min-width: 1441px) and (max-width: 1536px) {
    :root {
        --scene-height: 20500px;
    }
}

@media (min-width: 1537px) and (max-width: 1930px) {
    :root {
        --scene-height: 20700px;
    }
}

.youtube-container {
    position: absolute;
    left: 5000px;
    bottom: 50px;
    width: 560px;
    height: 315px;
}

iframe {
    max-width: 100%; /* Ensure iframe fits within its container */
    height: auto; /* Adjust the height according to aspect ratio */
}