@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";
}

.right {
    width: 70vw;
}

.hero {
    background-image: url("./images/desktop-bg.jpg?r=7");
    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;
}
.logo {
    width: 9.948vw;
    height: 3.138vw;
}
.hero-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.hero-title-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1vw;
    text-align: left;
    padding-top: 10vw;
}

.white-title {
    font-size: 3.7vw;
    font-family: "ploni-bold";
    line-height: 1;
    letter-spacing: -0.052vw;
    direction: rtl;
}
.black-title {
    font-size: 3.2vw;
    font-family: "bmw-outline";
    line-height: 1;
}
.bold {
    font-family: "ploni-demibold";
}
.title-2 { 
    line-height: 1;
    font-size: 2.3vw;
    position: absolute;
    top: 7vw;
    left: 12vw;
}
.title-3{
    border: 0.052vw solid white;
    font-size: 1.563vw;
    line-height: 1.604vw;
    width: fit-content;
    padding: 0.729vw;
}
.title-3-1 {
    letter-spacing: 0.065vw;
}
.title-3-2 {
    letter-spacing: 0.012vw;
}
.hero-middle {
    flex-grow: 2;
    line-height: 1.1;
    position: relative;
}
.para {
    width: fit-content;
    font-size: 1.354vw;
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: row-reverse;
    gap: 1vw;
    height: fit-content;
    justify-content: center;
    align-items: center;
}
.para p {
    animation: fadeIn 1s ease-in;
    position: relative;
}
.border {
    background: white;
    width: 0.2vw;
    height: 2.61vw;
}
.p-1 {
    position: relative;
    right: 7.5vw;
    top: 2vw;
}
.p-2 {
    position: relative;
    right: 46vw;
    top: -1.5vw;
}
.p-3 {
    position: relative;
    top: 15vw;
    right: 22vw;
}
.bmw-light {
    font-family: "bmw-light";
}
.bmw-bold {
    font-family: "bmw-bold";
    vertical-align: middle;
}

.hero-bottom {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 9vw;
}
.hero-bottom img {
    width: 10.99vw;
    height: 1.823vw;
}

.strip {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0.3vw;
}
.strip img {
    width: 30vw;
    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;
}

.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?r=7");
        height: calc(100vw * 1180/750);
        padding: 4vw;
    }
    .hero-title {
        flex-direction: column-reverse;
        gap: 10vw;
        direction: ltr;
    }
    .hero-title-right {
        padding-top: 0;
        direction: rtl;
    }
    .title-1 {
        direction: rtl;
    }
    .white-title {
        font-size: 10.8vw;
        display: block;
    }
    .black-title {
        font-size: 9.6vw;
        line-height: 0.8;
    }
    .title-2 {
        top: unset;
        left: unset;
        bottom: 17vw;
        right: 5vw;    
        font-size: 5.625vw;
        direction: rtl;
    }
    
    .title-3 {
        font-size: 3.573vw;
        line-height: 3.76vw;
        padding: 1.867vw;
        text-align: right;
        direction: rtl;
        letter-spacing: 0.032vw;
    }
    .title-3-1 {
        letter-spacing: 0.15vw;
        direction: rtl;
        text-align: right;
    }
    .title-3-2 {
        letter-spacing: 0.025vw;
        direction: rtl;
        text-align: right;
    }
    .logo {
        width: 28.133vw;
        height: 9.148vw;
        align-self: flex-start;
    }
    .para {
        font-size: 3.737vw;
        
    }
    .border {
        width:0.431vw;
        height: 7.5vw;
    }
    .p-1 {
        top: 8vw;
        right: 2vw;
    }
    .p-2 {
        top: 9vw;
        right: 52vw;
    }
    .p-3 {
        top: 41vw;
        right: 20vw;
    }
    .bmw-bold {
        vertical-align: baseline;
    }
    .hero-bottom {
        padding-bottom: 14vw;
    }
    .hero-bottom img {
        width: 28.133vw;
        height: 4.275vw;
    }
    .strip {
        width: 100%;
        padding: 2vw 0;
    }
    .strip img {
        width: 80%;
    }

    .left{
        width: 100%;
        background: #F2F2F2;
    }
    .form-title {
        font-size: 4.933vw;
        line-height: 5.733vw;
        padding-top: 10vw;
        padding-bottom: 5vw;
    }
    .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: 5vw;
        padding-bottom: 10vw;
    }

    .dialog {
        width: 90%;
        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;
        align-items: center;
        right: 1vw;
         width: 10vw;
        bottom: 5vw;
        z-index: 5;
        height:15vw;
        background-color: #1D6BB3;
        display: flex;
        padding: 1.5vw;
          animation: vertical-shaking 5s infinite;
    }

    .scroll-btn {
        animation: vertical-shaking 5s infinite;
    }
    .scroll-btn {
        width: 18vw;
        z-index: 6;
        cursor: pointer;
        position: relative;
        right: -5vw;
    }

   
         @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;
        }
    }
}