@font-face {
    font-family: "ploni-regular";
    src: url("./fonts/PloniDL1.1AAA-Regular.otf");
}
@font-face {
    font-family: "ploni-bold";
    src: url("./fonts/PloniDL1.1AAA-Bold.otf");
}
@font-face {
    font-family: "ploni-demibold";
    src: url("./fonts/PloniDL1.1AAA-D-Bold.otf");
}
@font-face {
    font-family: "ploni-light";
    src: url("/fonts/PloniDL1.1AAA-Light.otf");
}
@font-face {
    font-family: "bmw-outline";
    src: url("./fonts/BMWMotorradOutline-Regular.otf");
}
@font-face {
    font-family: "bmw-light";
    src: url('./fonts/BMWMotorradW05-Light.ttf');
}
@font-face {
    font-family: "bmw-bold";
    src: url('./fonts/BMWMotorradW05-Bold.ttf');
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.main {
    display: flex;
    background: white;
    direction: rtl;
    font-family: "ploni-regular";
    direction: rtl;
}
.right {
    width: 70vw;
}
.hero {
    background-image: url("./images/desktop-bg.jpg");
    background-size: 100% 100%;
    width: 100%;
    height: calc(70vw * 876/1413);
    padding: 2.292vw;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    text-align: center;
}
.logo {
    position: absolute;
    left: 2vw;
    top: 1vw;
    width: 9.948vw;
    height: 3.138vw;
}
.hero-top {  
    display: flex;
    flex-direction: column;
    gap: 1vw;
} 
.title1 {
    font-family: "bmw-bold";
    font-size: 3.4vw;
    border-bottom: 0.3vw solid white;
    line-height: 1.2;
}
.title1 span {
    font-family: "bmw-outline";
}
.title2 {
    font-family: "ploni-bold";
    line-height: 1;
    font-size: 1.6vw;
}
.bottom-container {
    padding: 0.5vw 2vw;
    position: relative;
    background: url('./images/shape.png');
    background-size: 100% 100%; 
    display: flex;
    justify-content: center;
}
.title3 {
    font-size: 3vw;
    font-family: "ploni-bold";
}
.title4 {
    position: absolute;
    background:none;
    bottom: -0.8vw;
    font-size: 1.4vw;
}
.strip {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0.3vw;
}
.strip img {
    width: 40vw;
    cursor: pointer;
}

.left {
    width: calc(100vw - 70vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.form-title {
    font-family: "ploni-demibold";
    font-size: 1.51vw;
    line-height: 1.771vw;
    text-align: center;
}
.form {
    display: flex;
    flex-direction: column;
    width: 90%;
    gap: 1vw;
    padding: 2.5vw 0;
}
.input {
    border: none;
    background: #F2F2F2;
    color: #919191;
    font-family: "ploni-regular";
    padding: 0.5vw 0.5vw;
    font-size: 1.25vw;
}
.input::placeholder {
    font-size: 1.25vw;
    color: #919191;
}
.checkbox {
    display: flex;
    gap: 1vw;
    color: #919191;
    font-size: 0.833vw;
    line-height: 0.885vw;
    padding: 1vw 0;
}
.submit {
    font-size: 1.667vw;
    font-family: "ploni-demibold";
    background: #1D6BB3;
    border: none;
    color: white;
    padding: 0.3vw 0;
}

.thanks-text {
    font-family: "ploni-demibold";
    font-size: 2vw;
    padding-bottom: 1vw;
}
.thanks-link {
    text-decoration: none;
    color: white;
    background: #1D6BB3;
    padding: 1vw 2vw;
    font-size: 1.5vw;
}
.extra {
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: space-between;
    font-size: 0.99vw;
}
.extra a {
    color: #919191;
}

.terms {
    font-size: 0.81vw;
    padding: 1vw 1.5vw 0 1vw;
}
.terms a {
    color: black;
    text-decoration: underline;
}

.dialog {
    position: absolute;
    background: #ffffff;
    color: black;
    width: 70%;
    top: 20%;
    left: 15%;
    border: none;
    border-radius: 1vw;
    direction: rtl;
}
.dialog-button {
    background: none;
    padding: 1vw;
    font-size: 2vw;
    border: none;
    cursor: pointer;
}
.dialog img {
    width: 70%;
    margin: 0 auto;
}

.mobile {
    display: none;
}
.desktop {
    display: block;
}
.error {
    outline: 1px solid tomato;
}
.error::placeholder {
    color: tomato !important;
}

@keyframes fadeIn {
    0% { 
        left:-10vw;
        opacity: 0;
    }
    100% { 
        opacity: 1; 
        left: 0vw;
    }
}
  

@media screen and (max-width: 765px) {
    .main {
        display: flex;
        flex-direction: column;
    }
    .right {
        width: 100%;    
    }

    .hero {
        width: 100%;
        background-image: url("./images/mobile-bg.jpg");
        height: calc(100vw * 936/750);
        padding: 4vw;
    }
    .logo {
        width: 28.133vw;
        height: 9.148vw;
        align-self: flex-start;
        top: 3vw;
    }
    .hero-top {
        font-size: 10vw;
        gap: 3vw;
    }
    .title1 {
        padding-top: 15vw;
        font-size: 9vw;
        border-bottom: 1vw solid white;
    }
    .title2 {
        font-size: 4.5vw;
    }
    .hero-bottom {
        padding-bottom: 1vw;
    }
    .bottom-container {
        padding: 1vw 7vw 2vw;
    }
    .title3 {
        font-size: 8vw;
    }
    .title4 {
        font-size: 4vw;
        bottom: -2vw;
    }
    .strip {
        width: 100%;
        padding: 2vw 0;
    }
    .strip img {
        width: 100%;
    }

    .left{
        width: 100%;
        background: #F2F2F2;
    }
    .form-title {
        font-size: 4.933vw;
        line-height: 5.733vw;
        padding-top: 8vw;
        padding-bottom: 4vw;
    }
    .form {
        width: 77%;
        gap: 4vw;
    }
    .input {
        background: white;
        font-size: 4.133vw;
        padding: 1.5vw;
    }
    .input::placeholder {
        font-size: 4.133vw;
    }
    .submit {
        font-size: 5.6vw;
    }
    .checkbox {
        font-size: 2.8vw;
        line-height: 2.9vw;
        gap: 2vw;
    }
    .thanks-text {
        font-family: "ploni-demibold";
        font-size: 7vw;
        padding: 5vw;
    }
    .thanks-link {
        text-decoration: none;
        color: white;
        background: #1D6BB3;
        padding: 1vw 2vw;
        font-size: 5vw;
        margin-bottom: 10vw;
    }
    .extra {
        width: 77%;
        font-size: 3.333vw;
        padding-top: 3vw;
        padding-bottom: 2vw;
    }

    .terms {
        font-size: 2.1vw;
        padding: 0 11vw 3vw 7vw;
    }

    .dialog {
        width: 90%;
        height: 80%;
        top: 10%;
        left: 5%;
        border: none;
        border-radius: 1vw;
        direction: rtl;
    }
    .dialog-button {
        background: none;
        padding: 1vw;
        font-size: 7vw;
        border: none;
        cursor: pointer;
        align-self: flex-start;
    }
    .dialog img {
        width: 90%;
        margin: 0 auto;
        flex: 2;
        object-fit: contain;
    }

    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }

    .scroll-btn-container {
        position: fixed;
        right: 2vw;
        bottom: 5vw;
        z-index: 5;
    }

    .scroll-btn {
        animation: vertical-shaking 5s infinite;
    }
    .scroll-btn {
        object-fit: contain;
        width: 7vw;
        z-index: 6;
        cursor: pointer;
    }

    @keyframes vertical-shaking {
        0% {
          transform: translateY(0);
        }
        25% {
          transform: translateY(5px);
        }
        50% {
          transform: translateY(-5px);
        }
        75% {
          transform: translateY(5px);
        }
        100% {
          transform: translateY(0);
        }
      }
    
    @keyframes fadeIn {
        0% { 
            left:-20vw;
            opacity: 0;
        }
        100% { 
            opacity: 1; 
            left: 0vw;
        }
    }
}