/* Hero Section */ .hero-img:nth-child(1) { object-position: 50%; } /* Food Section */ .food { background-color: white; } .food-container { padding: 150px 0 170px; } .food-grid { display: grid; grid-gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(calc(200px + 9vw), 1fr)); perspective: 1900px; } .cards, .cards-noflip { display: grid; grid-template-areas: "overlap"; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; box-shadow: 10px 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); transition: 0.4s all ease-in-out; transform-style: preserve-3d; position: relative; } .food-grid .mobile { display: none; } .cards:hover, .cards-noflip:hover { box-shadow: 10px 25px 50px -12px rgb(0 0 0 / 0.3); filter: none; cursor: pointer; } .front, .back { display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 12px; backface-visibility: hidden; height: 100%; background-color: white; } .front { grid-area: overlap; } .back { transform: rotateY(180deg); grid-area: overlap; border: 6px solid #e2001e; justify-content: center; padding: 40px; scrollbar-width: none; overflow: auto; gap: 20px; } .back b { font-weight: 500; } .cards.flip { transform: rotateY(180deg); } .picture { height: 70%; display: flex; align-items: center; justify-content: center; padding: 50px 40px 0; transition: all 0.5s ease; } .picture:hover { transform: scale(1.1); } .food-img { width: 100%; max-height: 100%; height: auto; } .foodtitle { display: flex; align-items: center; justify-content: center; width: 100%; height: 30%; } .menu-container { height: 100%; width: 100%; padding: 0 20px; font-size: 32px; text-align: center; flex-direction: row; display: flex; align-items: center; justify-content: center; letter-spacing: 0.8px; font-weight: 600; color: rgba(0, 0, 0, 0.75); word-wrap: break-word; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .menu-text { transition: all 0.5s ease; } @media (hover: hover) { .menu-text:hover { transform: scale(1.15); } } .food .info-text { line-height: 1.2; text-align: center; } /* Business Clients Section */ .business-clients { background-color: #f9f9f9; }