/* -------------- index.html css file -------------- */

.hero {
    margin-top: 21.29vh;
    
}

.hero__container {
    margin-top: 10vh;
    gap: 10vh;
}

.hero__title {
    width: fit-content;
}

.hero__text {
    max-width: 861px;
}

.hero__end {
    gap: 1vw;
}



/* -------------- info cards, .card -------------- */

.card {
    gap: 10px;
    flex: 0 0 320px;
    height: 180px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


.info-cards {
    gap: 3vw;
    margin-top: 30vh;
}

.info-cards__coocking-order {
    background-image: url(../img/card-coockingOrder.png);
}
.info-cards__delivery {
    background-image: url(../img/card-delivery.png);
}
.info-cards__pickup {
    background-image: url(../img/card-pickup.png);
}



/* -------------- catalog -------------- */

#catalog {
    margin-top: 30vh;
}

.catalog__title-container {
    gap: 3vw;
}
.catalog__title {
    margin: 0;
    display: flex;
    flex-direction: column;
    text-align: right;
}
.catalog__right {
    max-width: 570px;
}


/* catalog__salad-cards */

.catalog__salad-cards {
    margin-top: 10vh;
    gap: 2vw;
}



/* -------------- contacts -------------- */

.contacts {
    gap: 5vw;
    margin-top: 30vh;
}

.contacts__content-container {
    gap: 3vh;
}

.contacts__content {
    gap: 3vh;
}

.contacts__logo {
    max-width: 180px;
}

.contacts__map > iframe {
  border-radius: 40px;
  filter: invert(100%) hue-rotate(290deg);
}



/* -------------- adaptive -------------- */

@media (max-width: 600px) {
    .contacts__map {
        display: none;
    }
}

@media (max-width: 564px) {
    .hero-end__button {
        display: none;
    }
}