@font-face {
    font-family: 'bold';
    src: url('./fonts/OEAlchemistPro-Bold.ttf');
}
@font-face {
    font-family: 'regular';
    src: url('./fonts/OEAlchemistPro-Regular.ttf');
}
@font-face {
    font-family: 'light';
    src: url('./fonts/OEAlchemistPro-Light.ttf');
}


:root {
    /* fonts */
    --regular: 'regular', sans-serif;
    --light: 'light', sans-serif;
    --bold: 'bold', sans-serif;
}

* { padding: 0; margin: 0; box-sizing: border-box; }

html,
body {
    width: 100%;
    font-family: var(--regular);
    background-color: black;
    line-height: 1;
    color: white;
    direction: rtl;
}
.main {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.header {
    width: 100%;
    aspect-ratio: 1920 / 1116;
    background-image: url('./images/header-desktop.jpg');
    background-size: 100% 100%;;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.logo {
    position: absolute;
    width: 26.563vw;
    left: 10vw;
    top: 7vw;
}
.header-text {
    position: absolute;
    font-size: 4.063vw;
    top: 23vw;
    left: 11vw;
}
.header-text2 {
    background-image: url('./images/line.svg'), url('./images/line.svg');
    background-repeat: no-repeat;
    background-position:top center, bottom center; 
    background-size: 100% auto, 100% auto;
    position: absolute;
    top: 52vw;
    font-size: 3.177vw;
    padding: 1vw 0;
}
.header-text2 span {
    font-family: var(--bold);
}
.price {
    position: absolute;
    width: 29.531vw;
    top: 42vw;
    right: 16vw;
}
.scroll-button {
    font-family: var(--bold);
    position: absolute;
    font-size: 2.24vw;
    background: white;
    padding: 1vw 3vw;
    color: black;
    width: fit-content;
    left: 13.5vw;
    top: 35vw;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
}
.arrow {
    width: 1.458vw;
    margin-top: 0.3vw;
}
.titles {
    display: flex;
    flex-direction: column;
    padding: 3vw 0;
    justify-content: center;
    align-items: center;
}
.title1,
.title2,
.title3,
.title4,
.title5,
.title6 {
    text-align: center;
}
.title1 {
    font-family: var(--light);
    font-size: 2.708vw;
}
.title2 {
    font-size: 4.219vw;
    font-family: var(--bold);
}
.title3 {
    font-size: 3.958vw;
}
.title4 {
    font-family: var(--bold);
    font-size: 5.208vw;
}
.title5 {
    font-family: var(--light);
    font-size: 3.073vw;
}
.images {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    font-size: 3.5vw;
}
.pic1 {
    width: 100%;
    aspect-ratio: 1920 / 958;
    background-image: url('./images/pic1.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: top left;
    display: flex;
    align-items: center;
    padding: 6.771vw;
}
.pic2 {
    width: 100%;
    aspect-ratio: 1920 / 992;
    background-image: url('./images/pic2.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: top right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6.771vw;
}
.pic3 {
    width: 100%;
    aspect-ratio: 1920 / 843;
    background-image: url('./images/pic3.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: top left;
    display: flex;
    align-items: center;
    padding: 6.771vw;
}
.pic4 {
    width: 100%;
    aspect-ratio: 1917 / 1025;
    background-image: url('./images/pic4.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.pic5 {
    width: 100%;
    aspect-ratio: 1920 / 1036;
    background-image: url('./images/pic5.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 5vw;
    padding: 3vw;
}
.specs {
    width: 100%;
    max-width: 50vw;
    display: grid;
    grid-template-areas: 
        "spec11 spec12 spec13"
        "line1 line1 line1"
        "spec21 spec22 spec23"
        "line2 line2 line2"
        "spec31 spec32 spec33";
    grid-template-rows: 4.167vw 0.104vw 4.167vw 0.104vw 4.167vw;
    grid-template-columns: 1fr 10vw 1fr;
    justify-content: center;
    align-items: center;
    justify-items: center;
    gap: 3vw 0vw;
}
#spec11 { grid-area: spec11; height: 100%; max-width:100%;}
#spec12 { grid-area: spec12; width: 100%; max-height: 100%; max-width:100%;}
#spec13 { grid-area: spec13;  height: 100%; max-width:100%;}
#spec21 { grid-area: spec21;  height: 100%; max-width:100%;}
#spec22 { grid-area: spec22; width: 100%; max-height: 100%; max-width:100%;}
#spec23 { grid-area: spec23;  height: 100%; max-width:100%;}
#spec31 { grid-area: spec31;  height: 100%; max-width:100%;}
#spec32 { grid-area: spec32; width: 100%; max-height: 100%; max-width:100%;}
#spec33 { grid-area: spec33;  height: 100%; max-width:100%;}
#line1 { grid-area: line1;  height: 100%; max-width:100%;}
#line2 { grid-area: line2;  height: 100%; max-width:100%;}

.form-section {
    width: 100%;
    background-image: url('./images/pic6.jpg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.logo-small {
    padding: 50vw 0 5vw 0;
    width: 5vw;
}
.form {
    width: 50vw;
    display: grid;
    grid-template-columns: 4vw 1fr 1fr 4vw;
    grid-template-rows: repeat(6, auto);
    gap: 1vw;
}
.form .thanks {
    padding: 5vw 0;
    text-align: center;
    font-size: 4vw;
    grid-row: 1;
    grid-column: 1 / span 4;
}
.input {
    width: 100%;
    font-family: var(--light);
    /* font-size: 2.396vw; */
    font-size: 2.056vw;
    padding: 1vw;
    background: black;
    color: white;
    border: 1px solid white;
    text-align: right;
}
.input::placeholder {
    color: white;
}
#fname {
    grid-row: 1;
    grid-column: 1 / span 2;
}
#lname {
    grid-row: 1;
    grid-column: 3 / span 2;
}
#phone {
    grid-row: 2;
    grid-column: 1 / span 2;
}
#email {
    grid-row: 2;
    grid-column: 3 / span 2;
}
#showroom {
    grid-row: 3;
    grid-column: 1 / span 4;
}
.checkbox-container {
    grid-row: 4;
    grid-column: 2 / span 2;
    display: flex;
    font-size: 1.719vw;
    font-family: var(--light);
    gap: 1vw;
}
.submit {
    font-family: var(--regular);
    background: white;
    color: black;
    font-size: 2.24vw;
    grid-row: 5;
    grid-column: 2 / span 2;
    border: 0;
    padding: 1vw 0;
}
.form-links {
    grid-row: 6;
    grid-column: 2 / 4;
    display: flex;
    justify-content: space-around;
    padding: 1vw 0;
}
.form-links a {
    color: white;
    font-size: 1.3vw;
}

.terms {
    font-family: var(--light);
    font-size: 1.563vw;
    padding: 5vw 0;
}

.desktop { display: inherit; }
.mobile { display: none; }
.error { outline: tomato; }
.error::placeholder { color: tomato; }

.white{
    color: white;
    background-color: transparent;
    width: 100%;
}

@media (max-width: 768px){

    .header {
        aspect-ratio: 1500 / 2330; 
        background-image: url('./images/header-mobile.jpg');
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .logo {
        width: 47.222vw;
        left: unset;
        top: 10vw;
    }
    .header-text {
        font-size: 7.222vw;
        left: unset;
        top: 37vw;
    }
    .price {
        width: 50.093vw;
        top: 110vw;
        right: unset;
    }
    .scroll-button {
        font-size: 3.981vw;
        left: unset;
        top: 125vw;
        padding: 2vw 8vw;
    }
    .arrow {
        width: 2.593vw;
    }
    .header-text2 {
        width: 72.778vw;
        background-image: url('./images/lines.png');
        background-size: 100% 100%;
        text-align: center;
        font-size: 5.648vw;
        padding: 2vw 8vw 3vw;
        top: 140vw;
    }
    .titles {
        padding: 5vw;
    }
    .title1 {
        font-size: 4.815vw;
    }
    .title2 {
        font-size: 6.944vw;
    }
    .title3 {
        font-size: 4.722vw;
    }
    .title4 {
        font-size: 6.944vw;   
    }
    .title5 {
        font-size: 4.815vw;
    }
    .pic1 {
        background-image: url('./images/pic11.jpg');
        background-position: top center;
        background-size: 100% auto;
        aspect-ratio: 1080 / 886;
        justify-content: center;
        align-items: flex-end;
        font-size: 6.944vw;
        text-align: center;
    }
    .pic2 {
        background-image: url('./images/pic21.jpg');
        background-position: top center;
        background-size: 100% auto;
        aspect-ratio: 1080 / 886;
        justify-content: center;
        align-items: flex-end;
        font-size: 6.944vw;
        text-align: center;
        padding: 3vw;
    }
    .pic3 {
        background-image: url('./images/pic31.jpg');
        background-position: top center;
        background-size: 100% auto;
        aspect-ratio: 1080 / 886;
        justify-content: center;
        align-items: flex-end;
        font-size: 6.944vw;
        text-align: center;
        padding: 5vw;
    }
    .center {
        gap: 10vw;
        padding: 7vw 10vw;
    }
    .specs {
        width: 71.944vw;
        max-width: unset;
        grid-template-rows: 7.222vw 0.185vw 7.222vw 0.185vw 7.222vw;
        grid-template-columns: 1fr 9.537vw 1fr;
        gap: 5vw 5vw;
    }
    .form-section {
        background-image: url('./images/pic61.jpg');
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: top center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .logo-small {
        width: 7.685vw;
        padding: 76vw 0 5vw 0;
    }
    .form {
        width: 77.778vw;
        gap: 2vw;
    }
    .input {
        /* font-size: 4.259vw; */
        font-size: 3.259vw;
        padding: 2vw;
    }
    .checkbox-container {
        font-size: 3.056vw;
    }
    .submit {
        font-size: 3.981vw;
        padding: 2vw;
    }
    .form-links a {
        font-size: 3vw;
    }
    .terms {
        text-align: center;
        padding: 7vw;
        font-size: 2.778vw;
    }

    .desktop { display: none }
    .mobile { display: inherit }
}