/*
    Restoria - template extensions
    ------------------------------------------------------------------
    The Restoria HTML theme ships markup for a restaurant site. This file
    adds the handful of components a venue / marriage-hall site also needs
    (hall cards, package cards, an FAQ accordion, newsletter and form
    feedback, pagination) and nothing else.

    Everything below is built on the theme's own tokens - --main-color,
    --color-one/two, --white-color-opacity*, Fraunces and Urbanist - so it
    reads as part of the original design rather than bolted on.
*/


/* ==================================================================
   1. Shared pieces
   ================================================================== */

.section-sub-text {
    max-width: 640px;
    margin: 18px auto 0;
    color: var(--white-color-opacity-two);
}

.title-box.centered .section-sub-text {
    text-align: center;
}


/* ==================================================================
   2. Form feedback (flash messages and validation errors)
   ================================================================== */

.form-feedback {
    position: relative;
    display: block;
    margin-bottom: 25px;
    padding: 16px 22px;
    border: none;
    border-left: 3px solid var(--main-color);
    border-radius: 0;
    background-color: var(--white-color-opacity-five);
    color: var(--white-color);
    font-family: var(--font-family-Urbanist);
    font-size: 15px;
    line-height: 1.7em;
    letter-spacing: 0.4px;
}

.form-feedback ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.form-feedback.alert-success {
    border-left-color: var(--main-color);
}

.form-feedback.alert-danger {
    border-left-color: #c0553c;
}

.field-error {
    display: block;
    margin-top: 8px;
    color: #e2a08c;
    font-size: 13px;
    letter-spacing: 0.4px;
}


/* ==================================================================
   3. FAQ accordion
   The theme's custom-script.js already drives .accordion-box, but the
   stylesheet that went with it was not shipped. This restores it.
   ================================================================== */

.faq-section .accordion-box {
    position: relative;
    display: block;
    margin: 0;
    list-style: none;
}

.faq-section .accordion-box .block {
    position: relative;
    display: block;
    margin-bottom: 18px;
    border: 1px solid var(--white-color-opacity-four);
    background-color: var(--white-color-opacity-five);
    transition: all 300ms ease;
}

.faq-section .accordion-box .block:last-child {
    margin-bottom: 0;
}

.faq-section .accordion-box .block.active-block {
    border-color: var(--main-color);
}

.faq-section .accordion-box .block .acc-btn {
    position: relative;
    display: block;
    padding: 24px 70px 24px 32px;
    cursor: pointer;
    font-family: var(--font-family-Fraunces);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5em;
    color: var(--white-color);
    transition: all 300ms ease;
}

.faq-section .accordion-box .block .acc-btn:hover,
.faq-section .accordion-box .block .acc-btn.active {
    color: var(--main-color);
}

.faq-section .accordion-box .block .acc-btn .icon {
    position: absolute;
    top: 50%;
    right: 30px;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border: 1px solid var(--white-color-opacity-four);
    border-radius: 50%;
    text-align: center;
    line-height: 34px;
    font-size: 16px;
    color: var(--main-color);
    transition: all 300ms ease;
}

.faq-section .accordion-box .block .acc-btn.active .icon {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: var(--color-one);
    transform: rotate(180deg);
}

.faq-section .accordion-box .block .acc-content {
    position: relative;
    display: none;
    padding: 0 60px 28px 32px;
}

.faq-section .accordion-box .block .acc-content.current {
    display: block;
}

.faq-section .accordion-box .block .acc-content .text {
    color: var(--white-color-opacity-two);
    line-height: 1.9em;
}


/* ==================================================================
   4. Hall / venue cards
   ================================================================== */

.hall-grid .hall-block {
    margin-bottom: 40px;
}

.hall-grid .hall-block .inner-box {
    position: relative;
    display: block;
    height: 100%;
    border: 1px solid var(--white-color-opacity-four);
    background-color: var(--white-color-opacity-five);
    transition: all 400ms ease;
}

.hall-grid .hall-block .inner-box:hover {
    border-color: var(--main-color);
}

.hall-grid .hall-block .image-box {
    position: relative;
    display: block;
    overflow: hidden;
}

.hall-grid .hall-block .image-box img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 700ms ease;
}

.hall-grid .hall-block .inner-box:hover .image-box img {
    transform: scale(1.06);
}

.hall-grid .hall-block .hall-price {
    position: absolute;
    right: 24px;
    bottom: 24px;
    padding: 12px 20px;
    background-color: var(--main-color);
    color: var(--color-one);
    font-family: var(--font-family-Fraunces);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2em;
    text-align: center;
}

.hall-grid .hall-block .hall-price span {
    display: block;
    font-family: var(--font-family-Urbanist);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.75;
}

.hall-grid .hall-block .hall-price small {
    display: block;
    font-family: var(--font-family-Urbanist);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.75;
}

.hall-grid .hall-block .content-box {
    position: relative;
    padding: 32px 30px 36px;
}

.hall-grid .hall-block .cat-name {
    margin-bottom: 8px;
    color: var(--main-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hall-grid .hall-block h4 {
    margin-bottom: 14px;
    font-family: var(--font-family-Fraunces);
    font-size: 28px;
    line-height: 1.3em;
}

.hall-grid .hall-block h4 a {
    color: var(--white-color);
    transition: color 300ms ease;
}

.hall-grid .hall-block h4 a:hover {
    color: var(--main-color);
}

.hall-grid .hall-block .text {
    margin-bottom: 22px;
    color: var(--white-color-opacity-two);
}

.hall-grid .hall-block .hall-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-bottom: 26px;
    padding: 20px 0 0;
    border-top: 1px solid var(--white-color-opacity-four);
    list-style: none;
}

.hall-grid .hall-block .hall-meta li {
    font-size: 14px;
    letter-spacing: 0.5px;
    color: var(--white-color-opacity);
}

.hall-grid .hall-block .hall-meta li i {
    margin-right: 8px;
    color: var(--main-color);
}


/* Venue detail page */

.hall-detail .spec-strip {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 50px;
    padding: 0;
    border: 1px solid var(--white-color-opacity-four);
    list-style: none;
}

.hall-detail .spec-strip li {
    flex: 1 1 200px;
    padding: 26px 30px;
    border-right: 1px solid var(--white-color-opacity-four);
}

.hall-detail .spec-strip li:last-child {
    border-right: none;
}

.hall-detail .spec-strip li span {
    display: block;
    margin-bottom: 6px;
    color: var(--main-color);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hall-detail .spec-strip li strong {
    font-family: var(--font-family-Fraunces);
    font-size: 26px;
    font-weight: 600;
    color: var(--white-color);
}

.hall-detail .feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 30px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.hall-detail .feature-list li {
    position: relative;
    padding-left: 30px;
    color: var(--white-color-opacity);
}

.hall-detail .feature-list li i {
    position: absolute;
    left: 0;
    top: 8px;
    color: var(--main-color);
}


/* ==================================================================
   5. Package cards
   ================================================================== */

.package-grid .package-block {
    margin-bottom: 40px;
}

.package-grid .package-block .inner-box {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--white-color-opacity-four);
    background-color: var(--white-color-opacity-five);
    transition: all 400ms ease;
}

.package-grid .package-block .inner-box:hover,
.package-grid .package-block .inner-box.featured {
    border-color: var(--main-color);
}

.package-grid .package-block .pkg-flag {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 2;
    padding: 7px 16px;
    background-color: var(--main-color);
    color: var(--color-one);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.package-grid .package-block .image-box img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.package-grid .package-block .content-box {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 30px 28px 32px;
}

.package-grid .package-block .cat-name {
    margin-bottom: 6px;
    color: var(--main-color);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.package-grid .package-block h4 {
    margin-bottom: 16px;
    font-family: var(--font-family-Fraunces);
    font-size: 26px;
    color: var(--white-color);
}

.package-grid .package-block .pkg-price {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--white-color-opacity-four);
}

.package-grid .package-block .pkg-price del {
    margin-right: 10px;
    color: var(--white-color-opacity-three);
    font-size: 18px;
}

.package-grid .package-block .pkg-price .amount {
    font-family: var(--font-family-Fraunces);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    color: var(--main-color);
}

.package-grid .package-block .pkg-price small {
    margin-left: 6px;
    color: var(--white-color-opacity-two);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.package-grid .package-block .text {
    margin-bottom: 20px;
    color: var(--white-color-opacity-two);
}

.package-grid .package-block .pkg-list {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.package-grid .package-block .pkg-list li {
    position: relative;
    margin-bottom: 11px;
    padding-left: 28px;
    font-size: 15px;
    line-height: 1.6em;
    color: var(--white-color-opacity);
}

.package-grid .package-block .pkg-list li i {
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 13px;
    color: var(--main-color);
}

.package-grid .package-block .pkg-list li.is-excluded {
    color: var(--white-color-opacity-three);
    text-decoration: line-through;
}

.package-grid .package-block .pkg-list li.is-excluded i {
    color: var(--white-color-opacity-three);
}

.package-grid .package-block .pkg-list li em {
    margin-left: 6px;
    font-size: 11px;
    font-style: normal;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--main-color);
}

.package-grid .package-block .pkg-min {
    margin-bottom: 22px;
    color: var(--white-color-opacity-two);
    font-size: 13px;
    letter-spacing: 1px;
}

.package-grid .package-block .link-box {
    margin-top: auto;
}


/* ==================================================================
   6. Newsletter (in the footer)
   ================================================================== */

.footer-newsletter {
    position: relative;
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid var(--white-color-opacity-four);
}

.footer-newsletter h6 {
    margin-bottom: 6px;
    color: var(--main-color);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-newsletter p {
    margin-bottom: 18px;
    color: var(--white-color-opacity-two);
    font-size: 15px;
}

.footer-newsletter .field-inner {
    position: relative;
    max-width: 420px;
}

.footer-newsletter input[type="email"] {
    display: block;
    width: 100%;
    height: 54px;
    padding: 10px 60px 10px 20px;
    border: 1px solid var(--white-color-opacity-four);
    background-color: transparent;
    color: var(--white-color);
    font-family: var(--font-family-Urbanist);
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: border-color 300ms ease;
}

.footer-newsletter input[type="email"]:focus {
    border-color: var(--main-color);
}

.footer-newsletter input[type="email"]::placeholder {
    color: var(--white-color-opacity-three);
}

.footer-newsletter button {
    position: absolute;
    top: 0;
    right: 0;
    width: 54px;
    height: 54px;
    background-color: var(--main-color);
    color: var(--color-one);
    cursor: pointer;
    transition: background-color 300ms ease;
}

.footer-newsletter button:hover {
    background-color: var(--white-color);
}

.bottom_footer ul.footer-links li a {
    width: auto;
    padding: 0 12px;
    border: none;
    border-radius: 0;
    font-size: 14px;
    color: var(--white-color-opacity-two);
}

.bottom_footer ul.footer-links li a:hover {
    color: var(--main-color);
    background: none;
}


/* ==================================================================
   7. Pagination
   ================================================================== */

.styled-pagination {
    margin-top: 50px;
    text-align: center;
}

.styled-pagination .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.styled-pagination .page-item .page-link {
    display: block;
    min-width: 48px;
    height: 48px;
    padding: 0 12px;
    border: 1px solid var(--white-color-opacity-four);
    border-radius: 0;
    background-color: transparent;
    color: var(--white-color);
    font-size: 15px;
    line-height: 46px;
    text-align: center;
    transition: all 300ms ease;
}

.styled-pagination .page-item .page-link:hover,
.styled-pagination .page-item.active .page-link {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: var(--color-one);
}

.styled-pagination .page-item.disabled .page-link {
    opacity: 0.35;
}


/* ==================================================================
   8. Blog listing helpers
   ================================================================== */

.blog_panel .main_img img {
    width: 100%;
    height: 380px;
    object-fit: cover;
}

.recent_blog_list .img img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.empty-state {
    padding: 70px 20px;
    border: 1px dashed var(--white-color-opacity-four);
    text-align: center;
    color: var(--white-color-opacity-two);
}


/* ==================================================================
   9. Menu card page (grouped, per-category listing)
   ================================================================== */

.menu-group {
    margin-bottom: 70px;
}

.menu-group:last-child {
    margin-bottom: 0;
}

.menu-group .group-head {
    margin-bottom: 36px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--white-color-opacity-four);
}

.menu-group .group-head h3 {
    font-family: var(--font-family-Fraunces);
    font-size: 34px;
    color: var(--white-color);
}

.menu-group .group-head .text {
    margin-top: 6px;
    color: var(--white-color-opacity-two);
}

/* The theme scopes its circular dish thumbnail to .menu-tabs; the grouped
   menu page needs the same treatment. */
.menu-group .dish-block .inner-box {
    position: relative;
    min-height: 100px;
    padding-top: 10px;
    padding-left: 120px;
}

.menu-group .dish-block .dish-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
}

.menu-group .dish-block .dish-image img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 500ms ease;
}

.menu-group .dish-block .inner-box:hover .dish-image img {
    transform: rotate(90deg);
}

.menu-group .dish-block .title {
    display: flex;
    line-height: 24px;
    margin-bottom: 10px;
}

.menu-group .dish-block .title .menu-list-line {
    flex-grow: 1;
    margin: 0 15px;
    border-bottom: 1px dashed var(--white-color-opacity-four);
    transform: translateY(-6px);
}

.menu-group .dish-block .price del {
    margin-right: 8px;
    opacity: 0.5;
    font-size: 0.85em;
}

.menu-group .dish-block {
    margin-bottom: 26px;
}

.menu-group .dish-block .s-info {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 2px;
    font-family: var(--font-family-Urbanist);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    vertical-align: middle;
}


/* ==================================================================
   10. Hero, for brand photography
   ------------------------------------------------------------------
   The supplied banner shots all put the product on the right and leave
   the left clear. The theme centres its hero copy, which would land it
   on the food, so the headline is pulled left into that space and a
   scrim guarantees it stays readable at any crop.
   ================================================================== */

.banner-section .slide-item .inner {
    max-width: 560px;
    margin: 0 auto 0 0;
    /* Clear the social rail and the slider arrow that live against the
       left edge; the theme only centres its copy so they never collided. */
    padding-left: 100px;
    text-align: left;
}

/* With the copy on the left, both arrows move to the right of the frame. */
.banner-section .swiper-button-prev,
.banner-section .swiper-button-next {
    top: auto;
    bottom: 160px;
    left: auto;
}

.banner-section .swiper-button-prev {
    right: 104px;
}

.banner-section .swiper-button-next {
    right: 40px;
}

.banner-section .slide-item .title-box,
.banner-section .slide-item .links-box {
    text-align: left;
}

/* Left-to-right scrim: solid enough to read against, gone by the middle. */
.banner-section .slide-item:before {
    background: linear-gradient(
        90deg,
        rgba(3, 22, 17, 0.88) 0%,
        rgba(3, 22, 17, 0.70) 28%,
        rgba(3, 22, 17, 0.20) 52%,
        rgba(3, 22, 17, 0) 70%
    );
}

/* The theme's Ken Burns push is 1.15, which crops the composition away.
   Enough movement to feel alive, not enough to lose the framing. */
.banner-section .slide-item.swiper-slide-active .image-layer {
    transform: scale(1.06);
}

.banner-section .slide-item .content-box {
    height: 820px;
    min-height: 86vh;
}

@media only screen and (max-width: 1199px) {
    .banner-section .slide-item .inner {
        max-width: 470px;
        padding-left: 80px;
    }
}

@media only screen and (max-width: 991px) {
    /* Portrait crops cut the negative space away, so centre the copy and
       darken the whole frame instead. */
    .banner-section .slide-item .inner {
        max-width: 100%;
        margin: 0 auto;
        padding-left: 0;
        text-align: center;
    }

    .banner-section .swiper-button-prev,
    .banner-section .swiper-button-next {
        bottom: 110px;
    }

    .banner-section .slide-item .title-box,
    .banner-section .slide-item .links-box {
        text-align: center;
    }

    .banner-section .slide-item:before {
        background: linear-gradient(
            180deg,
            rgba(3, 22, 17, 0.72) 0%,
            rgba(3, 22, 17, 0.62) 45%,
            rgba(3, 22, 17, 0.86) 100%
        );
    }

    .banner-section .slide-item .content-box {
        height: auto;
        min-height: 70vh;
    }
}

/* Inner-page banners use the same photography, so the heading moves left
   into the clear side rather than sitting on top of the food. */
.inner-banner .inner {
    max-width: 640px;
    margin: 0;
    text-align: left;
}

/* The theme indents the strapline by 150px to sit under centred type. */
.inner-banner .inner .sub_text {
    padding-left: 0;
    max-width: 460px;
    text-align: left;
}

.inner-banner .inner .sub_text p {
    text-align: left;
    margin-left: 0;
}

@media only screen and (max-width: 991px) {
    .inner-banner .inner {
        max-width: 100%;
        text-align: center;
    }

    .inner-banner .inner .sub_text {
        max-width: 100%;
    }

    .inner-banner .inner .sub_text,
    .inner-banner .inner .sub_text p {
        text-align: center;
    }
}

.inner-banner .image-layer:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(3, 22, 17, 0.86) 0%,
        rgba(3, 22, 17, 0.62) 35%,
        rgba(3, 22, 17, 0.12) 65%,
        rgba(3, 22, 17, 0) 82%
    );
}

@media only screen and (max-width: 991px) {
    .inner-banner .image-layer:after {
        background: rgba(3, 22, 17, 0.72);
    }
}


/* ==================================================================
   11. Home . "What We Make" category rows
   ------------------------------------------------------------------
   The theme sized these rows around a 300x120 cut-out PNG and hardcoded
   one hover background per row in CSS. This site feeds them square
   product photographs and drives the hover image from the record, so
   both the height and the background need restating.
   ================================================================== */

.menu-cat .menucat-list {
    align-items: center;
    padding: 24px 0;
    text-decoration: none;
    cursor: pointer;
}

.menu-cat .menucat-list:hover {
    padding: 44px 0;
    background-image: var(--cat-hover);
}

.menu-cat .menucat-list .image-box {
    flex: 0 0 auto;
    line-height: 0;
}

/* Without this the 760px source renders at full height. */
.menu-cat .menucat-list .image-box img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    transition: opacity 400ms ease, transform 400ms ease;
}

/* The theme uses display:none here, which collapses the row mid-hover.
   Fading keeps the height stable so the photo cross-fades in cleanly. */
.menu-cat .menucat-list:hover .image-box {
    display: block;
}

.menu-cat .menucat-list:hover .image-box img {
    opacity: 0;
    transform: scale(0.9);
}

.menu-cat .menucat-list .data-colom {
    flex: 1 1 auto;
}

/* The row is now one anchor, so the arrow is a span and misses the
   theme rules written for .arrow-btn a. Restate them here. */
.menu-cat .menucat-list .arrow-btn span {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 10px;
    color: var(--main-color);
    font-size: 50px;
    line-height: 80px;
    text-align: center;
    border: solid 1px var(--white-color-opacity-three);
    border-radius: 200px;
    transition: all 400ms ease;
}

.menu-cat .menucat-list:hover .arrow-btn span {
    color: var(--black-color);
    background: var(--main-color);
    border: solid 1px var(--main-color);
    transform: rotate(315deg);
}

@media only screen and (max-width: 991px) {
    .menu-cat .menucat-list,
    .menu-cat .menucat-list:hover {
        padding: 18px 0;
    }

    .menu-cat .menucat-list .image-box img {
        width: 76px;
        height: 76px;
    }

    .menu-cat .menucat-list .arrow-btn span {
        width: 60px;
        height: 60px;
        font-size: 25px;
        line-height: 45px;
    }
}

@media only screen and (max-width: 479px) {
    .menu-cat .menucat-list .arrow-btn span {
        width: 40px;
        height: 40px;
        font-size: 20px;
        line-height: 20px;
    }
}

@media only screen and (max-width: 399px) {
    .menu-cat .menucat-list .arrow-btn span {
        width: 35px;
        height: 35px;
        font-size: 16px;
        line-height: 10px;
    }
}


/* ==================================================================
   12. Services blocks
   The theme's icon box held a 50px PNG; these hold a Font Awesome glyph.
   ================================================================== */

.services-section .s-block .icon-box i {
    display: block;
    font-size: 40px;
    line-height: 50px;
    color: var(--main-color);
    transition: transform 300ms ease;
}

.services-section .s-block:hover .icon-box i {
    transform: translateY(-4px);
}

.services-section .image-col .image-box img {
    width: 100%;
    max-width: 440px;
    height: auto;
    object-fit: cover;
}

/* The About story list takes the same treatment: the theme sized this
   slot for a PNG badge, these carry a glyph. */
.story-section .feature-info .feature-info-box .feature-title i {
    flex: 0 0 auto;
    width: 40px;
    font-size: 28px;
    line-height: 1;
    color: var(--main-color);
    transition: transform 400ms ease;
}

.story-section .feature-info .feature-info-box:hover .feature-title i {
    transform: rotateY(180deg);
}


/* ==================================================================
   13. Header . "Order now" button
   ------------------------------------------------------------------
   Everywhere else the theme puts the SAME words in .text-one and
   .text-two, so the button just rolls its own label over. This one
   reveals the phone number instead, which is longer. The theme sizes
   .btn-wrap from .text-one alone (.text-two is absolutely positioned)
   and clips it with overflow:hidden, so the number wrapped onto two
   lines and was cut off.

   Stacking both labels in one grid cell makes the wrap take the width
   of the longer of the two, and the roll is driven by transform rather
   than `top` so nothing depends on being out of flow. Scoped to the
   header so the other thirteen buttons keep the theme's behaviour.
   ================================================================== */

.main-header .links-box .btn-style-one .btn-wrap {
    display: grid;
    justify-items: center;
}

.main-header .links-box .btn-style-one .btn-wrap .text-one,
.main-header .links-box .btn-style-one .btn-wrap .text-two {
    grid-area: 1 / 1;
    position: static;
    white-space: nowrap;
    transition: transform 300ms ease;
}

.main-header .links-box .btn-style-one .btn-wrap .text-two {
    transform: translateY(150%);
}

.main-header .links-box .btn-style-one:hover .btn-wrap .text-one,
.main-header .links-box .btn-style-one:hover .btn-wrap .text-one:first-child {
    transform: translateY(-150%);
}

.main-header .links-box .btn-style-one:hover .btn-wrap .text-two {
    transform: translateY(0);
}


/* ==================================================================
   14. Responsive
   ================================================================== */

@media only screen and (max-width: 767px) {
    .hall-detail .spec-strip li {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid var(--white-color-opacity-four);
    }

    .hall-detail .spec-strip li:last-child {
        border-bottom: none;
    }

    .hall-detail .feature-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq-section .accordion-box .block .acc-btn {
        padding: 20px 60px 20px 22px;
        font-size: 18px;
    }

    .faq-section .accordion-box .block .acc-content {
        padding: 0 22px 24px;
    }

    .hall-grid .hall-block .image-box img {
        height: 230px;
    }

    .menu-group .group-head h3 {
        font-size: 28px;
    }
}