/* DESKTOP FIRST DESIGN */

@font-face {
    font-family: "assistant";
    src: url("./fonts/Assistant.ttf");
    font-weight: 100 900;
}
@font-face {
    font-family: "light";
    src: url("./fonts/OEAlchemistPro-Light-08d42b72-51ef-445a-8de0-4bd4083a5387.otf_v.ttf");
}
@font-face {
    font-family: "regular";
    src: url("./fonts/OEAlchemistPro-Regular-d3528892-1b85-47b3-be2e-9ff9ec68035d.otf_v.ttf");
}
@font-face {
    font-family: "bold";
    src: url("./fonts/OEAlchemistPro-Bold-61703adb-3a94-40e5-9121-1cf3ec379232.otf_v.ttf");
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html, 
body {
    font-family: "regular", "Assistant", system-ui;
    direction: rtl;
    color: white;
    width: 100%; 
    overflow-x: hidden;
}
.main {
    background-image: url('./images/desktop.jpg');
    background-size: 100% 100%;
    aspect-ratio: 1920/2375;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow-x: hidden;
}
.delek-logo {
    position: absolute;
    left: 2vw;
    bottom: 4vw;
}
.delek-logo img {
    width: 12vw;
}
.credit {
    position: absolute;
    left: 1vw;
    top: 20vw;
}
.credit img {
    width: 1vw;
}
.main-inner {
    width: 50.521vw;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.section1 {
    position: relative;
    width: 100%;
    height: 49.479vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.top-logo {
    position: absolute;
    width: 30vw;
    top: -10vw; 
    left: -12vw;
}
.section1-top {
    display: flex;
    flex-direction: column;
    width: fit-content;
    font-size: 3.44vw;
    line-height: 0.9;
    padding: 1vw 0;
    color: white;
    /* background: linear-gradient(90deg, #d4defb, #92a5d7);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}
.section1-top-1 {
    font-weight: 300;
}
.section1-top-2 {
    font-family: "regular";
}
.section1-middle {
    flex-grow: 2;
    position: relative;
    font-size: 1.7vw;
    font-weight: 700;
}
.section1-middle-price1 {
    position: absolute;
    top: 8.5vw;
    left: -4vw;
    padding-right: 3.7vw;
    font-size: 3.5vw;
}
.section1-middle-price2 {
    position: absolute;
    top: 12.5vw;
    left: -3.9vw;
    border-bottom: 0.5px solid white;
    padding-right: -0.3vw;
    font-size: 1.2vw;
}
.nis {
    font-size: 1.4vw;
}
.section1-middle-price-removed {
    background: white;
    width: 5vw;
    height: 0.1vw;
    transform: rotate(15deg);
    position: absolute;
    top: 13.4vw;
    left: -3.8vw;
}
.section1-bottom {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}
.section1-bottom-titles {
    width: fit-content;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.dream-img {
    width: 30vw;
}
.section1-bottom-titles-top {
    font-size: 5vw;
    font-family: 'regular';
}
.section1-bottom-titles-bottom {
    display: flex;
    font-size: 2.5vw;
    width: 100%;
    justify-content: space-around;
}
.section1-bottom-titles-bottom-1 {
    font-weight: 700;
}
.section1-bottom-titles-bottom-2 {
    font-family: 'light';
    font-size: 1.6vw;
}
.form {
    background: #9f8db9;
    width: 50.521vw;
    padding: 1.2vw 0.5vw;
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
}
.form-title {
    color: black;
    font-size: 1.5vw;
}
.form-inputs {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 0.5vw;
}
.input {
    flex-grow: 2;
    background-color: #645776;
    color: white;
    border: none;
    padding: 0.3vw;
    font-family: "assistant";
    font-size: 0.8vw;
    width: 100%;
}
.input::placeholder {
    color: white;
}
.submit {
    color: black;
    font-size: 1vw;
    border: none;
    background-color: white;
    border-radius: 1vw;
    font-family: "assistant";
    padding: 0 1.5vw;
    font-weight: 600;
}
.ads-container {
    display: flex;
    width: 100%;
    gap: 0.5vw;
}
.checkbox-text {
    font-size: 0.8vw;
}
.section2 {
    display: flex;
    flex-direction: column;
    padding: 9.3vw 0 0 0;
    flex-grow: 2;
}
.section2-top {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    font-size: 1vw;
}
.section2-top-row {
    width: 100%;
}
.section2-top-1 {
    width: 48%; 
    border: 1px solid white;
    background-image: url("./images/section2-1.jpg");
    background-size: 100% 100%;
    aspect-ratio: 479/271;
    padding: 0.5vw;
    display: flex;
    align-items: flex-end;
}
.section2-top-2 {
    width: 48%; 
    border: 1px solid white;
    background-image: url("./images/section2-2.jpg");
    background-size: 100% 100%;
    aspect-ratio: 491/249;
    align-self: flex-end;
    padding: 0.5vw;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.section2-top-3 {
    width: 100%; 
    border: 1px solid white;
    background-image: url("./images/section2-3.jpg");
    background-size: 100% 100%;
    aspect-ratio: 970/397;
    padding: 0.5vw;
    color: black;
}
.section2-bottom {
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 0.8vw;
    line-height: 1.2;
    flex-grow: 2;
    height: 100%;
    position: relative;
}
.section2-bottom a {
    color: white;
}
.section3 {
    height: 2vw;
    padding: 0.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section3 img {
    object-fit: contain;
    max-height: 100%;
}
.floating-form {
    background: #9f8db9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 8.7vw;
}
.floating-form-inner {
    background: #9f8db9;
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    bottom: 0;
    width: 100%;
}
.thanks-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 6vw;
    gap: 1vw;
    font-size: 1.2vw;
}
.thanks-container a {
    padding: 0.5vw 1vw;
    background: white;
    text-decoration: none;
    color: black
}
.desktop {
    display: flex;
}
.mobile {
    display: none;
}
.error {
    outline: 1px solid tomato;
}
.error::placeholder {
    color: tomato;
}
@media (max-width: 768px) {
    .main {
        background-image: url('./images/mobile.jpg');
        aspect-ratio: 640/3380;
    }
    .delek-logo {
        bottom: 48vw;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0;
    }
    .delek-logo img {
        width: 45vw;
    }
    .credit {
        top: 36vw;
    }
    .credit img {
        width: 2.5vw;
    }
    .main-inner {
        width: 90%;
    }
    .top-logo {
        left: -25vw;
        top: -23vw;
        width: 70vw;
    }
    .section1 {
        height: 185vw;
    }
    .section1-top {
        font-size: 7.2vw;
        padding: 5vw 0;
    }
    .section1-middle {
        position: relative;
    }
    .section1-middle-price1 {
        position: absolute;
        top: 90.5vw;
        left: 3vw;
        padding-right: 3.7vw;
        font-size: 4.5vw;
    }
    .section1-middle-price2 {
        position: absolute;
        top: 96.5vw;
        right: 63vw;
        font-size: 2.5vw;
        padding-right: 3vw;
    }
    .section1-middle-price-removed {
        background: white;
        width: 11vw;
        height: 0.1vw;
        transform: rotate(15deg);
        position: absolute;
        top: 98.4vw;
        left: -0.8vw;
    }
    .nis {
        font-size: 2vw;
    }
    .section1-bottom {
        gap: 13vw;
    }
    .section1-bottom-titles {
        text-align: left;
    }
    .dream-img {
        width: 54vw;
    }
    .section1-bottom-titles-top {
        font-size: 11vw;
        line-height: 0.9;
    }
    .section1-bottom-titles-bottom {
        flex-direction: column;
        line-height: 1.1;
        font-size: 5vw;
    }
    .section1-bottom-titles-bottom-2 {
        font-family: 'light';
        font-size: 4.4vw;
    }
    .form {
        padding: 2vw 4vw;
        gap: 2vw;
        width: 100%;
    }
    .form-title {
        font-size: 5vw;
    }
    .form-inputs {
        flex-wrap: wrap;
        gap: 2vw;
        flex: 0 0 50%;
    }
    .input {
        font-size: 3.5vw;
        padding: 1vw;
        width: 48%;
    }
    select.input {
        width: 100%;
        max-width: 100%;
    }
    .submit {
        width: 100%;
        font-size: 5vw;
        border-radius: 4vw;
        padding: 1vw;
    }
    .checkbox-text {
        font-size: 3vw;
    }
    .section2 {
        padding: 47vw 0 0 0;
    }
    .section2-top {
        gap: 3vw;
    }
    .section2-top-1,
    .section2-top-2,
    .section2-top-3 {
        width: 100%;
        font-size: 4vw;
        padding: 2vw;
    }
    .section2-top-3 {
        background-image: url('./images/section2-3b.jpg');
        aspect-ratio: 575/413;
        margin-top: 65vw;
    }
    .section2-bottom {
        font-size: 2.5vw;
        padding-top: 12vw;
    }
    .floating-form {
        height: 65vw;
    }
    .floating-form-inner {
        width: 100%;
        padding: 0 5vw;
    }
    .section3 {
        height: 6vw;
    }
    .section3 img {
        max-height: 80%;
    }
    .thanks-container {
        height: 60vw;
        font-size: 4vw;
        gap: 5vw;
    }
    .thanks-container a {
        padding: 3vw 6vw;
    }
    .desktop {
        display: none;
    }
    .mobile {
        display: flex;
    }
}