@font-face {
    font-family: 'rag-reg';
    src: url('./fonts/RagSans-1.4-Regular.ttf');
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    direction : rtl;
    font-family: 'rag-reg';
    color: #112c4e;
    line-height: 1.1;
}
.main {
    display: flex;
    flex-direction: row;
    min-height: 100svh;
}
.arrow {
    position: fixed;
    display: hidden;
}
.right {
    width: 65%;
    display: flex;
    flex-direction: column;
}
.right-top {
    width: 100%;
    aspect-ratio: 1400/ 550;
}
.video {
    width: 100%;
}
.right-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.71vw;
    font-size: 1.1vw;
    text-align: center;
    padding: 1vw;
}
.horse {
    width: 4vw;
    aspect-ratio: 64 / 79;
}
.right-center-bold {
    font-weight: 600;
}
.right-bottom {
    background: #ebecee;
    display: flex;
    gap: 1vw;
    text-align: center;
    justify-content: center;    
    padding: 2vw 2vw 0.5vw 2vw;
    flex: 1;
}
.swiper {
    width: 100%;
    /* max-height: 200px; */
}
.item {
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
    font-size: 0.9vw;
}
.item-pic {
    width: 11.5vw;
}
.left {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5vw 4.5vw;
}
.form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.75vw;
}
.form-title {
    font-size: 2vw;
    text-align: center;
}
.input {
    appearance: none;
    -webkit-appearance: none;
    font-family: 'rag-reg';
    font-size: 1vw;
    padding: 0.5vw;
    direction: rtl;
    border: 1px solid #767676;
    color: #767676;
    background: white;
}
.input::placeholder {
    color: #767676;
}
.checkbox-container {
    display: flex;
    gap: 1vw;
    font-size: 0.7vw;
    color: #828282;
    align-items: center;
}
.checkbox {
    height: 2.5vw;
    width: 2.5vw;
}
.submit {
    background-color: #102b4e;
    color: white;
    border: none;
    width: 100%;
    padding: 0.5vw 1vw;
    font-size: 1.2vw;
    cursor: pointer;
    font-family: 'rag-reg';
}
.terms {
    font-size: 0.9vw;
    color: #102b4e;
    text-align: center;
}
.ford-logo {
    width: 50%;
    align-self: center;
    padding: 1vw;
}
.links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    font-size: 1vw;
}
.link {
     color: #102b4e;
}
.strip {
    width: 100%;
}

#pollutionDialog {
  flex-direction: column;
  position: fixed;
  margin: auto;
  border: 0;
  border-radius: 1vw;
  padding: 1vw;
}

#dialog_close_btn {
  user-select: none;
  width: fit-content;
  border: 0;
  cursor: pointer;
  padding: 1vw;
  border-radius: 1vw;
}

#pollutionDialog img {
  width: 70vw;
}
.error { outline: 1px solid tomato; }
.error::placeholder { color: tomato; }
.thanks-message {
    font-size: 2vw;
    text-align: center;
}
.desktop { display: flex; }
.mobile { display: none; }

@media (max-width: 768px) {
    .main {
        flex-direction: column;
    }
    .arrow {
        display: flex;
        background: #102b4e;
        padding: 2vw;
        bottom: 2vw;
        left: 2vw;
        z-index: 3;
        border-radius: 1vw; 
    }
    .arrow svg {
        width: 7vw;
        height: 7vw;
    }
    .right {
        width: 100%;
    }
    .right-top {
        aspect-ratio: 740 / 412;
    }
    .right-center {
        padding: 3vw 0;
        font-size: 3.3vw;
        gap: 4vw;
    }
    .horse {
       width: 9.07vw;
    }
    .right-bottom {
        padding: 2vw 0 0;
    }
    .item {
        display: flex !important;
        gap: 2vw;
        align-self: center;
        align-items: center;
    }
    .item-pic {
        width: 50%;
    }
    .item-desc {
        font-size: 3.3vw;
        padding-bottom: 6vw;
    }
    .swiper-pagination {
        display:block !important;
        padding-top: 15vw !important;
        top: unset !important;
        bottom: 1vw !important;
    }
    .left {
        width: 100%;
        padding: 7vw;
    }
    .form {
        gap: 2vw;
    }
    .form-title {
        font-size: 7vw;
    }
    .input {
        font-size: 4.5vw;
        padding: 2.5vw;
        border-radius: none;
    }
    .checkbox-container {
        font-size: 3vw;
        gap: 2vw;
    }
    .checkbox {
        width: 8vw;
        height: 8vw;
        border-radius: none;
    }
    .select {
        border-radius: none;
    }
    .submit {
        border-radius: none;
        padding: 2.5vw;
        font-size: 4.5vw;
    }
    .terms {
        font-size: 3.5vw;
    }
    .ford-logo {
        padding: 5vw 0;
    }
    .links {
        font-size: 4vw;
        gap: 5vw;
    }
    #pollutionDialog {
        border-radius: 3vw;
    }
    #pollutionDialog img {
        width: 90%;
        content: url("./images/mobile-popup.png");
        align-self: center;
    }

    #dialog_close_btn {
        padding: 3vw;
        border-radius: 3vw;
    }
    .thanks-message {
        padding: 5vw 0;
        font-size: 6vw;
        text-align: center;
    }
    .desktop { display: none; }
    .mobile { display: flex; }
}