/* T/////////////////////////////////////////// */
/* M/////////////////Media Query////////////////// */
/* B//////////////////////////////////////////// */

/* ? General media Query */

@media (max-width: 29rem) {
  html {
    -webkit-text-size-adjust: 100%;
    font-size: 30.5%;
    line-height: 1.3;
  }
  main > .page {
    width: 100%;
  }
  .destop-nav-toogle {
    display: none;
  }

  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8rem;
  }
  .grid-col-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8rem;
  }
  .single {
    padding: 270px 35px 50px;
  }
  .map-home {
    width: 65rem;
    height: 47.5rem;
  }
  .logo-img {
    /* width: 50px; */
    position: fixed;
    top: 60px;
    left: -6rem;
    transform: matrix(1, 0, 0, 1, 55, 0);
  }
  /* Common section */
  .section-social-media .vendor {
    padding: 50px 0px;
  }
  .vendor h2 {
    margin-bottom: 3rem;
  }
  .vendor a {
    width: 90%;
    text-align: center;
    font-size: 3rem;
  }

  .social-media-icons {
    padding: 10rem 0;
  }
  .icon {
    width: 4.6rem;
    height: 4.6rem;
    fill: #212529;
    font-weight: 400;
  }
  .newletter {
    flex-direction: column;
    padding: 30px 20px;
  }

  .newletter p {
    margin: 0 0 3.5rem;
    width: 80%;
    font-size: 3.6rem;
  }

  .icon-send {
    width: 3.8rem;
    height: 3.8rem;
  }

  .footer {
    align-items: center;
    justify-content: center;
    gap: 4rem;
    padding: 0 35px 20px;
  }
  .footer p {
    font-size: 2.8rem;
  }

  .footer p:last-child {
    margin-left: 0;
  }
}

/* ! HOme Media query */

@media (max-width: 29rem) {
  .single {
    padding: 270px 35px 50px;
  }
  .home-padding {
    padding: 10rem 3.2rem 8rem;
  }
  .home-section-event h2 {
    font-size: 14rem;
    line-height: 14rem;
  }
  .map-home {
    width: 72rem;
    height: 53.5rem;
  }
  .section-event-heading p {
    font-size: 9.6rem;
  }
  .home-section-event .grid {
    gap: 10rem;
  }
  .section-location-grid {
    margin-top: 10rem;
  }
  .linner-animi {
    padding: 13rem 0;
  }
  .linner-animi p {
    padding: 0 1.6em;
  }
  .linner-animi .linner-animi-div {
    padding-bottom: 6em;
    border-bottom: 1px solid #cecece;
  }
  .linner-animi .linner-div {
    margin-bottom: 6em;
    border-bottom: none;
  }
  .grid-content p {
    font-size: 3.2rem;
  }
  .home-event-btn {
    width: 90%;
    text-align: center;
    font-size: 3rem;
    bottom: -19rem;
  }
}

/* ! Food Media query */
@media (max-width: 29rem) {
  .food-padding {
    padding: 15.7rem 3.5rem 2rem;
  }

  .food-top-section h1 {
    font-size: 13rem;
    line-height: 13rem;
  }
  .food-single {
    margin-left: 0;
  }

  .food-top-section .rotate-food {
    display: none;
  }
  .food-hero-img {
    justify-self: center;
    width: 95%;
    margin-right: 0rem;
    padding-top: 3em;
  }

  .food-hero-span {
    display: block;
    font-size: 10rem;
    text-align: right;
    position: relative;
    top: -6.5rem;
    right: 2rem;
  }

  .item {
    font-size: 3.2rem;
  }
  .recipe-name {
    font-size: 5rem;
  }
  .happy-hours {
    padding: 18rem 0;
    margin-bottom: 20px;
  }
}

/* ! Retail Media query */
@media (max-width: 29rem) {
  .retail-single {
    margin-left: 0;
  }
  .retail-top-section .rotate-food {
    display: none;
  }

  .retail-top-section h1 {
    font-size: 11rem;
    line-height: 12rem;
  }

  .retail-hero-img {
    width: 100%;
    justify-self: end;
    position: relative;
    margin-right: 0rem;
    padding-top: 3em;
  }
}

/* ! Community Media query */
@media (max-width: 29rem) {
  .community-page {
    margin-left: 0;
  }
  .communit-hero-span {
    right: 0;
  }
  .retail-hero-img .community-img-hide {
    display: block;
  }
  .community-event-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(10, 1fr);
    gap: 2em 0rem;
  }
  .market-event-grid {
    grid-column: 1;
    grid-row: 1;
  }
  .start-lines-event {
    display: none;
  }
  .small-business {
    grid-row: 3;
  }
  .hack-city {
    grid-column: 1;
    grid-row: 7;
  }
  .taiwan-city {
    grid-row: 9;
  }

  .communit-event-pera {
    padding: 0 5em 0em;
    font-size: 2.8rem;
  }
  .new-balance {
    grid-row: 5;
  }

  .line-2 {
    grid-row: 2;
  }
  .line-4 {
    grid-row: 4;
  }
  .line-6 {
    grid-row: 6;
  }
  .line-8 {
    grid-row: 8;
  }
  .line-10 {
    grid-row: 10;
  }
  .line-end {
    display: none;
  }
  .features {
    gap: 13.6em 7rem;
    margin-bottom: 18rem;
  }
  .feature-imgae {
    height: 259px;
  }
  .img-cut {
    height: 259px;
  }
  .community-media-change {
    align-self: center;
    justify-self: center;
  }
  .change-media-community {
    margin-top: 7rem;
  }
}

/* ! Nav bar  Media query */
@media (max-width: 29rem) {
  .close-open-btn {
    display: block;
  }
  .mobile-navbar {
    display: block;
  }

  .close-open-btn {
    position: fixed;
    top: 7rem;
    right: 6rem;
    z-index: 99999;
    display: flex;
    align-items: center;
  }
  .toggle-btn {
    filter: brightness(10%);
  }
  .open-btn {
    width: 100%;
  }
  .close-btn {
    width: 100%;
  }

  .mobile-navbar {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    transition: opacity 0.3s ease-in-out;
  }
  .mobile-navbar-box-section {
    width: 100%;
    position: relative;
    height: 85vh;
  }
  .mobile-navbar-boxes {
    position: absolute;
    width: 50%;
    height: 50%;
    /* transform: scale(1); */
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    /* display: -ms-flexbox; */
    display: flex;
    /* -ms-flex-pack: center; */
    justify-content: center;
    /* -ms-flex-align: center; */
    align-items: center;
    /* opacity: 0; */
    z-index: 0;
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }

  .mobile-navbar-boxes span {
    font-family: var(--small);
    font-size: 3.6rem;
    color: #000;
    font-weight: 400;
    transform-origin: center;
  }
  .mobile-navbar-boxes:first-child span {
    transform: rotate(-45deg);
  }
  .mobile-navbar-boxes:nth-child(2) span {
    transform: rotate(45deg);
  }
  .mobile-navbar-boxes:nth-child(3) span {
    transform: rotate(45deg);
  }
  .mobile-navbar-boxes:last-child span {
    transform: rotate(-45deg);
  }

  .moblile-navbar-home {
    top: 0;
    left: 0;
    transform-origin: top left;
    background: #fff;
  }
  .moblile-navbar-food {
    top: 0;
    right: 0;
    transform-origin: top right;
    background: #5ea3ec;
  }
  .moblile-navbar-retail {
    bottom: 0;
    left: 0;
    transform-origin: bottom left;
    background: #f64444;
  }
  .moblile-navbar-community {
    bottom: 0;
    right: 0;
    transform-origin: bottom right;
    background: #ffb400;
  }

  .mobile-nav-text {
    padding: 30px;
    background: #fff;
  }
  .mobile-nav-btn {
    display: block;
    text-decoration: none;
    border: 1px solid #000;
    text-align: center;
    font-size: 3.2rem;
    font-weight: 400;
    color: #000;
    font-family: var(--small);
    padding: 20px 40px;
    margin-bottom: 30px;
  }
  .mobile-nav-pera p {
    font-size: 3rem;
    line-height: 24px;
    color: #000;
    font-weight: 400;
    font-family: var(--small);
    margin-bottom: 30px;
  }
  .moblie-email-link {
    font-size: 3rem;
    color: #000;
    font-weight: 400;
    font-family: var(--small);
    margin-bottom: 30px;
  }

  .mobile-nav-socile {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    align-items: center;
    justify-items: center;
  }
  .mobile-nav-icon {
    text-align: center;
    border: 1px solid #000;
    padding: 3em 10em;
  }
  .show {
    display: none;
  }

  .hide {
    opacity: 0;
    visibility: hidden;
  }
}
/* 
- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/