.card-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 360px;
}

.card {
    position: relative;
    display: flex;
    width: 33vw;
    min-height: 240px;
    background-color: var(--card-background);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: var(--font-color);
    border-radius: 20px;
    box-sizing: border-box;
    flex-flow: column;
    font-size: min(7vw, 16px);
    padding-bottom: 10px;
    overflow: hidden;
    font-weight: 500;
}

.rajztabla {
    margin-top: 40px;
    height: 120%;
}

.card-title {
    font-weight: 700;
    align-self: center;
    margin-bottom: 10px;
    font-size: min(9vw, 28px);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: min(2vw, 10px);
    background-color: var(--horn-color);

}

.card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: min(2vw, 10px);
    background-color: var(--head-color);
}

.card-container .card:nth-child(1) {
    border-radius: 20px;
    padding: min(20px, 4vw) min(20px, 2vw) min(20px, 4vw) min(20px, 2vw);
    margin-left: 20px;
}

.card-container .card:nth-child(3) {
    border-radius: 20px;
    padding: min(20px, 4vw) min(20px, 2vw) min(20px, 4vw) min(20px, 2vw);
    margin-right: 20px;
}


.home-image {
    width: 100%;
    height: 480px;
    background-position: center;
    object-fit: cover;
    object-position: right;
    box-shadow: inset 0px 40px 30px -20px rgba(0,0,0,0.7);
    display: block;
}

/* EMAIL-AND-MAP-CONTAINER */

.email-and-map-container {
    background-color: var(--lighter-color);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.map-wrapper {
    position: relative;
    width: 48%;
    height: 96vh;
    margin: 1%;
    box-shadow: 0px 5px 20px rgba(0,0,0,0.7);
    border-radius: 20px;
    overflow: hidden;
}

.email-wrapper {
    position: relative;
    width: 50%;
}

#map-container {
    height: 100%!important;
}

/* MAIN CONTAINER */

.main-container {
    position: relative;
    display: flex;
    color: var(--font-color);
}

.main-open-jobs {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 50vw;
    background-color: var(--main-job-background);
}
.job-title {

}
.job-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    height: 21%;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
}

.job {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    min-height: 110px;
    background-color: var(--job-background);
    color: var(--font-color);
    text-align: center;
    box-sizing: border-box;
    padding: 30px 14px 30px 14px;
    font-weight: 600;
    border-radius: 20px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    transition: background-color 0.1s, color 0.1s;
}

.job:hover{
    background-color: var(--main-color);
    color: white;
}



.main-job-apply {
    width: 100%;
    background-color: var(--main-color);
    height: 50px;
    cursor: pointer;
}


/* MAIN TENDERS */

.main-tenders {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 50vw;
    background: var(--home-tender-color);
    color: var(--font-color);
}

.main-tenders-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 50px;
    height: fit-content;
    width: 100%;
    margin: 30px 0 30px 0;
}

.main-tender {
    display: flex;
    flex-flow: column;
    width: 500px;
    background-color: var(--job-background);
    font-weight: 600;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    min-height: 140px;
    height: fit-content;
    box-sizing: border-box;
    padding:5px;
    cursor: pointer;
    transition: background-color 0.1s, color 0.1s;
    border-radius: 20px;
    text-align: center;
}

.main-tender:hover {
    background-color: var(--main-color);
    color: white;
}
.main-tender:hover .highlight::before {
    background-color: #eeeeee;
}

.home-tender-title {
    align-self: center;
    margin:17px 0 17px 0;
}

/* MAIN PAGE LOGO */

.main-head, .logo-gyulai  {
    fill: var(--head-color);
}
.main-horn, .logo-agrar {
    fill: var(--horn-color);
}

/* EMAIL-FORM */

.company {
    width: 100%;
    padding: 0 max(6vw, 40px) 40px max(6vw, 40px);
}



@media screen and (max-width: 1100px) {
    .main-tender {
        width: 46vw;
    }
}

@media screen and (max-width: 900px) {
    .main-tender {
        width: 90vw;
    }
    .divider-mobile {
        display: block;
    }
    .main-container {
        flex-direction: column;
    }
    .main-open-jobs {
        width: 100%;
    }
    .main-tenders {
        width: 100%;
    }
    .main-open-jobs .job {
        padding: 20px;
    }
    .job-title {
        text-align: center;
    }
    .job::after {
        min-width: fit-content;
        padding-left: min(10px,2vw);
        padding-right: min(10px,2vw);
        width: min(50vw, 150px);
    }
    .card-container {
        flex-flow: column;
        height: fit-content;
    }
    .card {
        width: 100%;
        min-height: fit-content;
        box-shadow: none;
        align-self: center!important;
        margin: 0!important;
        border-radius: 0!important;
    }
    .card:nth-child(1) {
        align-self: flex-start;
    }
    .rajztabla {
        margin: 0;
        width: 100%;
        max-height: calc(200px - 5vw);
        background-color: var(--darker-background);
    }
    .card:nth-child(3) {
        align-self: flex-end;
    }
    .email-and-map-container {
        flex-direction: column;
    }
    .email-wrapper {
        width: 100%;
    }
    .map-wrapper {
        width: 100%;
        height: 66vh;
        margin: 0 0 0 0;
        border-radius: 0;
    }
    .company {
        padding: 0 min(6vw, 40px) 40px min(6vw, 40px);
    }
}

/*
@media screen and (max-width: 700px) {
    .card {
        align-self: center!important;
        margin: 0!important;
    }
}
 */

@media screen and (max-width: 300px) {
    .job::after {
        padding-left: min(4vw, 10px);
        padding-right: min(4vw, 10px);
    }
    .job {
        width: 80%;
    }
}