/* ---MAIN STYLES--- */

.main_section {
    position: relative;
    height: 45vw;
}

@media (max-width: 996px) {
    .main_section {
        height: 60vw;
    }
}


/* ---DISCOVER STYLES--- */

.discover_section {
    padding: 10%;
}

.discover_section .discover_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3vw;
}

.discover_section .media_box img {
    width: 100%;
}

.discover_section .info_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
}

.discover_section .info_box h1 span {
    font-size: 3vw;
}

@media (max-width: 996px) {
    .discover_section .discover_box {
        grid-template-columns: 1fr;
        gap: 10vw;
    }
    .discover_section .info_box {
        order: -1;
        gap: 5vw;
    }
    .discover_section .info_box h1 span {
        font-size: 6vw;
    }
}


/* ---DISCOUNT STYLES--- */

.discount_section {
    padding: 10%;
    background: var(--gray);
}

.discount_section .discoun_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3vw;
}

.discount_section .info_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
}

.discount_section .info_box h2 span {
    font-weight: 500;
}

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

.discount_section .media_box img:first-child {
    width: 50%;
    transform: translate(5%, 10%);
    z-index: 1;
    cursor: pointer;
    transition: .25s;
}

.discount_section .media_box img:first-child:hover {
    transform: translate(5%, 10%) scale(1.02);
}

.discount_section .media_box img:last-child {
    width: 50%;
    transform: translate(-5%, -10%);
    cursor: pointer;
    transition: .25s;
}

.discount_section .media_box img:last-child:hover {
    transform: translate(-5%, -10%) scale(1.02);
}

@media (max-width: 996px) {
    .discount_section .discoun_box {
        grid-template-columns: 1fr;
        gap: 15vw;
    }
    .discount_section .info_box {
        gap: 5vw;
    }
    .discount_section .media_box img:first-child {
        transform: translate(5%, 0);
    }
}


/* ---CATEGORIES STYLES--- */

.categories_section {
    padding: 10% 10% 10% 0;
}

.categories_section .categories_box {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 3vw;
}

.categories_section .media_box {
    position: relative;
}

.categories_section .swiper-slide a {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--dark-blue);
    cursor: pointer;
}

.categories_section .card_media {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.categories_section .card_media img {
    width: 100%;
}

.categories_section .card_info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
    padding: 1.5vw 1.5vw 2vw 1.5vw;
}

.categories_section .card_info h2 {
    color: white;
    font-size: 1vw;
    text-align: center;
}

.categories_section .card_info p {
    position: relative;
    color: var(--yellow);
    font-size: .8vw;
    font-weight: 600;
    text-align: center;
}

.categories_section .card_info p::before {
    content: "";
    position: absolute;
    width: 2vw;
    height: .1vw;
    bottom: -.5vw;
    left: 50%;
    transform: translateX(-50%);
    background: var(--yellow);
    transition: .25s;
}

.categories_section .swiper-slide:hover .card_info p::before {
    width: 4vw;
}

.categories_section .nav_box {
    width: 100%;
    position: absolute;
    bottom: -1vw;
    left: 0;
    transform: translateY(100%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3vw;
}

.categories_section .prev_categorie,
.categories_section .next_categorie {
    justify-content: center;
    align-items: center;
    position: relative;
    width: 3vw;
    height: 3vw;
    left: inherit;
    top: inherit;
    right: inherit;
    margin: 0;
}

.categories_section .prev_categorie::after,
.categories_section .next_categorie::after {
    color: var(--dark-blue);
    font-size: 1.5vw;
    transition: .25s;
}

.categories_section .prev_categorie:hover::after,
.categories_section .next_categorie:hover::after {
    color: var(--yellow);
}

.categories_section .prev_categorie p,
.categories_section .next_categorie p {
    display: none;
}

.categories_section .info_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
}

.categories_section .info_box h2 {
    font-weight: 300;
}

.categories_section .info_box h2 span {
    font-weight: bold;
}

@media (max-width: 996px) {
    .categories_section {
        padding: 10% 0 25% 0;
    }
    .categories_section .categories_box {
        grid-template-columns: 100%;
        gap: 10vw;
    }
    .categories_section .media_box {
        order: 1;
        padding: 0 2vw;
    }
    .categories_section .card_info {
        gap: 3vw;
        padding: 4vw 2vw 6vw 2vw;
    }
    .categories_section .card_info h2 {
        font-size: 4vw;
    }
    .categories_section .card_info p {
        font-size: 3vw;
    }
    .categories_section .card_info p::before {
        width: 5vw;
        height: .5vw;
        bottom: -1.5vw;
    }
    .categories_section .swiper-slide:hover .card_info p::before {
        width: 10vw;
    }
    .categories_section .nav_box {
        bottom: -3vw;
        left: 0;
        gap: 10vw;
    }
    .categories_section .prev_categorie,
    .categories_section .next_categorie {
        width: 10vw;
        height: 10vw;
    }
    .categories_section .prev_categorie::after,
    .categories_section .next_categorie::after {
        font-size: 5vw;
    }
    .categories_section .info_box {
        gap: 5vw;
        padding: 10% 10% 0 10%;
    }
}


/* ---DELIVERY STYLES--- */

.delivery_section {
    padding: 5% 10%;
    background: var(--gray);
}

.delivery_section .delivery_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.delivery_section .info_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
}

.delivery_section .media_box {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.delivery_section .media_box img {
    width: 100%;
}

@media (max-width: 996px) {
    .delivery_section {
        padding: 10%;
    }
    .delivery_section .delivery_box {
        grid-template-columns: 1fr;
        gap: 10vw;
    }
    .delivery_section .info_box {
        gap: 5vw;
    }
    .delivery_section .media_box img {
        width: 100%;
    }
}


/* ---COCKTAIL STYLES--- */

.cocktails_section {
    display: flex;
    justify-content: center;
    padding: 10%;
}

.cocktails_section .cocktails_box {
    position: relative;
    width: 50vw;
}

.cocktails_section .cocktail {
    position: absolute;
    width: 30%;
    top: 50%;
    left: 0;
    transform: translate(-50%, -55%);
}

.cocktails_section .lemon01 {
    position: absolute;
    width: 20%;
    top: 0;
    right: 0;
    transform: translate(30%, -50%);
}

.cocktails_section .lemon02 {
    position: absolute;
    width: 15%;
    top: 40%;
    left: 0;
    transform: translate(-150%, 0) rotate(120deg);
}

.cocktails_section .info_box {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    padding: 3vw 3vw 3vw 8vw;
    background: var(--yellow);
}

.cocktails_section .main_btn {
    color: white;
    background: var(--dark-blue);
}

.cocktails_section .main_btn:hover {
    color: var(--dark-blue);
    background: white;
}

@media (max-width: 996px) {
    .cocktails_section {
        padding: 20% 10% 10% 10%;
    }
    .cocktails_section .cocktails_box {
        position: relative;
        width: 100%;
        background: var(--yellow);
    }
    .cocktails_section .media_box {
        padding-left: 10vw;
    }
    .cocktails_section .cocktail {
        position: relative;
        width: 35%;
        transform: translate(0) scale(1.3);
        transform-origin: bottom center;
    }
    .cocktails_section .lemon01 {
        width: 25%;
        transform: translate(10%, -50%);
    }
    .cocktails_section .lemon02 {
        width: 30%;
        top: 20%;
        left: inherit;
        right: 0;
        transform: translate(-50%, 0) rotate(120deg);
    }
    .cocktails_section .info_box {
        gap: 5vw;
        padding: 8vw 10vw 10vw 10vw;
    }
}


/* ---PLACE STYLES--- */

.place_section {
    padding: 10%;
    background: var(--gray);
}

.place_section .place_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3vw;
}

.place_section .info_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
}

.place_section .media_box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.place_section .media_box img {
    width: 70%;
}

@media (max-width: 996px) {
    .place_section .place_box {
        grid-template-columns: 1fr;
        gap: 10vw;
    }
    .place_section .info_box {
        gap: 5vw;
    }
    .place_section .media_box img {
        width: 100%;
    }
}


/* ---CARDS STYLES--- */

.cards_section {
    padding: 10%;
    background: var(--dark-blue);
}

.cards_section .card_box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8vw;
}

.cards_section .card_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}

.cards_section img {
    width: 100%;
}

.cards_section h2 {
    color: var(--yellow);
    font-size: 1.25vw;
    text-align: center;
}

.cards_section p {
    color: white;
    text-align: center;
}

.cards_section .main_btn:hover {
    color: var(--dark-blue);
    background: white;
}

@media (max-width: 996px) {
    .cards_section .card_box {
        grid-template-columns: 1fr;
        gap: 20vw;
    }
    .cards_section .card_item {
        gap: 5vw;
    }
    .cards_section img {
        width: 70%;
    }
    .cards_section h2 {
        font-size: 5vw;
    }
}


/* ---DISH STYLES--- */

.dish_section {
    padding: 10%;
}

.dish_section .dish_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3vw;
}

.dish_section .info_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
}

.dish_section .media_box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dish_section .media_box img {
    width: 100%;
}

@media (max-width: 996px) {
    .dish_section {
        padding: 10% 10% 15% 10%;
    }
    .dish_section .dish_box {
        grid-template-columns: 1fr;
        gap: 10vw;
    }
    .dish_section .info_box {
        order: 1;
        gap: 5vw;
    }
}


/* ---GALLERY STYLES--- */

.gallery_section {
    padding: 0;
}

.gallery_section .swiper-slide IMG {
    width: 100%;
}