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

@font-face {
    font-family: 'MySoho';
    src: url("../assets/fonts/SohoStd-MediumCE.ttf");
}

html, body {
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    /*grid-template-rows: 92px 100px 390px 390px 72px;*/
    grid-template-rows: 92px 100px auto auto 70px;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "nexxon-header nexxon-header form-container"
    "nexxon-text nexxon-text form-container"
    "pic1 pic2 form-container"
    "pic3 pic4 form-container"
    "footer footer form-container";
}

.nexxon-header {
    grid-area: nexxon-header;
    text-align: center;
    padding: 10px;
}

.nexxon-text {
    grid-area: nexxon-text;
    background-image: url("../assets/1.jpg");
    background-position: right;
    padding: 25px 240px;
    color: #FEFEFE;
    text-align: center;
    font-size: 20px;
}

.pic1 {
    grid-area: pic1;
    background-image: url("../assets/agricole1.jpg");
    /*background-position: center;*/
}

.pic2 {
    grid-area: pic2;
    background-image: url("../assets/camioane1.jpg");
    /*background-position: center;*/
}

.pic3 {
    grid-area: pic3;
    background-image: url("../assets/turisme1.jpg");
    /*background-position: center;*/
}

.pic4 {
    grid-area: pic4;
    background-image: url("../assets/offroad1.jpg");
    /*background-position: center;*/

}

.footer {
    grid-area: footer;
    background-color: #000000;
    padding: 20px;
}

.footer div {
    margin: 0 auto;
    width: 40%;
    display: flex;
    justify-content: space-around;
}

.form-container {
    grid-area: form-container;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 92px auto;
    /*grid-template-rows: 92px 100px auto auto 70px;*/
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "form-header"
    "form-wrapper"
}

.form-header {
    grid-area: form-header;
    background-color: #EF2B2D;
    text-transform: uppercase;
    text-align: center;
    padding: 30px;
    color: #FEFEFE;
}

.form-wrapper {
    grid-area: form-wrapper;
    background-color: #0C1C8C;
    padding: 5px 50px;
}

.form-wrapper p {
    width: 70%;
    padding: 10px;
    color: #FEFEFE;
    font-size: 15px;
    margin: 0 auto;
    text-align: center;
}

.pic1, .pic2, .pic3, .pic4 {
    text-align: center;
    color: #FEFEFE;
    padding: 10px;
    font-family: 'MySoho', sans-serif;
    background-position: center;

}

.pic1:hover, .pic2:hover,
.pic3:hover, .pic4:hover{
    border: 1px solid white;
}

form label {
    color: #FEFEFE;
    font-size: 20px;
    padding-left: 10px;
}

form input, textarea {
    width: 100%;
    border: none;
    font-size: 16px;
    padding: 7px 10px;
    border-radius: 17px;
    margin-top: 7px;
}

.nume-input, .prenume-input {
    width: 45%;
}

.form-item-for-name {
    display: flex;
    justify-content: space-between;
}

.form-item {
    padding: 5px 10px;
}

.form-submit {
    display: flex;
}

.form-submit input {
    width: 30px;
    height: 30px;
    background-color: #0C1C8C;
}

.form-submit label {
    padding: 10px 8px;
}

.submitButtonContainer {
    padding: 15px 0;
    margin: 0 auto;
    width: 50%;
}

.submitButton {
    font-size: 25px;
    font-weight: bold;
    padding: 10px;
    background-color: #EF2B2D;
    color: white;
    border: none;
    border-radius: 30px;
    width: 100%;
    cursor: pointer;
}

.submitButton:hover {
    background-color: #b02123;
}

@media (max-width: 1900px) {
    .nexxon-text{
        padding: 25px 200px;
    }
}

@media (max-width: 1800px) {
    .nexxon-text{
        padding: 25px 150px;
    }
}

@media (max-width: 1700px) {
    .nexxon-text{
        padding: 25px 100px;
    }
}

@media (max-width: 1560px) {
    .nexxon-text{
        padding: 25px 50px;
    }
}

@media (max-width: 1460px) {
    .nexxon-text{
        padding: 25px 20px;
    }
}

@media (max-width: 1400px) {
    .nexxon-text{
        padding: 10px 20px;
    }
}

@media (max-width: 1280px) {
    .container {
        /*width: 100%;*/
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 92px auto auto 390px 390px 390px 390px auto;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
        "nexxon-header"
        "nexxon-text"
        "form-container"
        "pic1"
        "pic2"
        "pic3"
        "pic4"
        "footer";
    }
    .nexxon-text{
        padding: 15px 20px;
        font-size: 15px;
    }
    .footer div {
        margin: 0 auto;
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    .form-wrapper {
        padding: 20px 20px;
    }
    .pic1, .pic2, .pic3, .pic4 {
        background-position: center;
    }
}

.canal{
    display: flex;
    justify-content: space-between;
}

.canal label{
    margin: 0;
    padding: 9px 10px;
}

.canal input{
    width: 30px;
    height: 30px;
}