/* MASHAWI HOUSE – JOOMLA 6 DESIGN */

:root {
--mh-black: #151310;
--mh-dark: #211d18;
--mh-orange: #e3511e;
--mh-gold: #d6a549;
--mh-cream: #fffaf1;
}

/* General website */
body.site {
background: var(--mh-cream);
color: var(--mh-black);
font-family: Arial, Helvetica, sans-serif;
}

/* Header */
.container-header {
background: var(--mh-black);
background-image: none;
box-shadow: none;
padding: 0;
}

.container-header .grid-child {
max-width: 1180px;
margin: auto;
}

.container-header .navbar-brand {
padding: 16px 20px;
}

.container-header .site-title {
color: #ffffff;
font-size: 1.45rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}

.container-header .site-description {
color: var(--mh-gold);
font-size: 0.75rem;
letter-spacing: 1px;
}

/* Main navigation */
.container-header .container-nav {
padding: 0 20px;
}

.container-header .mod-menu {
display: flex;
flex-direction: row;
justify-content: flex-end;
gap: 8px;
}

.container-header .mod-menu > li > a {
color: #ffffff;
padding: 18px 16px;
font-weight: 700;
text-decoration: none;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li.active > a {
color: var(--mh-gold);
}

/* Remove default empty page spacing */
.item-page .page-header {
display: none;
}

main {
margin-top: 0;
}

.container-banner {
margin: 0;
padding: 0;
max-width: none;
}

.container-banner .mod-custom {
width: 100%;
}

/* Homepage hero */
.mh-hero {
position: relative;
width: 100vw;
min-height: 680px;
margin-left: calc(50% - 50vw);
color: #ffffff;
background:
linear-gradient(
90deg,
rgba(10, 9, 8, 0.97) 0%,
rgba(10, 9, 8, 0.88) 38%,
rgba(10, 9, 8, 0.25) 72%,
rgba(10, 9, 8, 0.08) 100%
),
url("/images/mashawi-grill-hero.png") center center / cover no-repeat;
}

.mh-hero-overlay {
min-height: 680px;
display: flex;
align-items: center;
}

.mh-hero-content {
width: min(1180px, calc(100% - 40px));
margin: auto;
padding: 80px 0 110px;
}

.mh-kicker {
margin-bottom: 18px;
color: var(--mh-gold);
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 3px;
}

.mh-hero h1 {
max-width: 720px;
margin: 0;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(4rem, 8vw, 7rem);
font-weight: 500;
line-height: 0.9;
letter-spacing: -4px;
}

.mh-hero h1 span {
color: var(--mh-gold);
font-style: italic;
}

.mh-intro {
max-width: 600px;
margin: 32px 0;
color: #ded8ce;
font-size: 1.25rem;
line-height: 1.7;
}

.mh-buttons {
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
}

.mh-button {
display: inline-flex;
align-items: center;
min-height: 54px;
padding: 0 28px;
background: var(--mh-orange);
color: #ffffff !important;
font-weight: 800;
text-decoration: none !important;
border-radius: 2px;
}

.mh-button:hover {
background: #bd3b12;
}

.mh-phone {
color: #ffffff !important;
font-weight: 800;
text-decoration: none !important;
}

.mh-phone:hover {
color: var(--mh-gold) !important;
}

/* Mobile layout */
@media (max-width: 768px) {
.container-header .mod-menu {
flex-direction: column;
}

.mh-hero {
min-height: 650px;
background-position: 68% center;
}

.mh-hero-overlay {
min-height: 650px;
background: rgba(10, 9, 8, 0.35);
}

.mh-hero-content {
width: calc(100% - 30px);
padding: 70px 0 120px;
}

.mh-hero h1 {
font-size: clamp(3.4rem, 16vw, 5rem);
letter-spacing: -2px;
}

.mh-intro {
font-size: 1.05rem;
}

.mh-buttons {
align-items: stretch;
flex-direction: column;
}

.mh-button,
.mh-phone {
width: 100%;
justify-content: center;
text-align: center;
}
}
<section class="mh-favorites">
<div class="mh-section-heading">
<div>
<p class="mh-kicker">FROM OUR CHARCOAL GRILL</p>
<h2>House Favorites</h2>
</div>

<a href="/index.php/menu" class="mh-view-menu">
View Full Menu →
</a>
</div>

<div class="mh-food-grid">
<article class="mh-food-card">
<span class="mh-number">01</span>
<div class="mh-food-icon"></div>
<h3>Mixed Grill</h3>
<p>
A generous selection of flame-grilled meats served
with rice or fries.
</p>
</article>

<article class="mh-food-card">
<span class="mh-number">02</span>
<div class="mh-food-icon">◒</div>
<h3>Chicken Tawook</h3>
<p>
Tender marinated chicken, charcoal-grilled and
served hot.
</p>
</article>

<article class="mh-food-card">
<span class="mh-number">03</span>
<div class="mh-food-icon">✦</div>
<h3>Mashawi House Platter</h3>
<p>
Our signature feast with mezze, fresh salad and
mixed grills for sharing.
</p>
</article>
</div>
</section>
/* MASHAWI HOUSE FAVORITES */

.container-top-a {
max-width: none;
margin: 0;
padding: 0;
}

.mh-favorites {
width: min(1180px, calc(100% - 40px));
margin: auto;
padding: 100px 0;
}

.mh-section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
margin-bottom: 45px;
}

.mh-section-heading h2 {
margin: 0;
color: #151310;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(2.8rem, 5vw, 4rem);
line-height: 1;
letter-spacing: -2px;
}

.mh-favorites .mh-kicker {
color: #a36e16;
}

.mh-view-menu {
color: #151310 !important;
font-weight: 800;
text-decoration: none !important;
}

.mh-view-menu:hover {
color: #e3511e !important;
}

.mh-food-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid #ded5c8;
border-bottom: 1px solid #ded5c8;
}

.mh-food-card {
position: relative;
min-height: 340px;
padding: 45px 34px;
border-right: 1px solid #ded5c8;
}

.mh-food-card:last-child {
border-right: 0;
}

.mh-number {
position: absolute;
top: 25px;
right: 25px;
color: #aaa197;
font-size: 0.8rem;
}

.mh-food-icon {
width: 66px;
height: 66px;
display: grid;
place-items: center;
margin-bottom: 48px;
color: #e3511e;
border: 1px solid #d6a549;
border-radius: 50%;
font-size: 1.8rem;
}

.mh-food-card h3 {
margin: 0 0 14px;
color: #151310;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.8rem;
}

.mh-food-card p {
margin: 0;
color: #746d64;
font-size: 1rem;
line-height: 1.7;
}

@media (max-width: 768px) {
.mh-favorites {
width: calc(100% - 30px);
padding: 70px 0;
}

.mh-section-heading {
align-items: flex-start;
flex-direction: column;
}

.mh-food-grid {
grid-template-columns: 1fr;
}

.mh-food-card {
min-height: auto;
border-right: 0;
border-bottom: 1px solid #ded5c8;
}

.mh-food-card:last-child {
border-bottom: 0;
}
}
/* MASHAWI HOUSE STORY SECTION */

.container-top-b {
max-width: none;
margin: 0;
padding: 0;
background: #151310;
}

.mh-story {
width: 100%;
padding: 100px 0;
color: #ffffff;
background: #151310;
}

.mh-story-inner {
width: min(1180px, calc(100% - 40px));
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 85px;
margin: auto;
}

.mh-story-photo {
position: relative;
min-height: 520px;
background:
linear-gradient(
rgba(10, 9, 8, 0.08),
rgba(10, 9, 8, 0.35)
),
url("/images/mashawi-grill-hero.png") 72% center / cover no-repeat;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.mh-halal-seal {
position: absolute;
right: -35px;
bottom: -35px;
width: 155px;
height: 155px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #ffffff;
background: rgba(21, 19, 16, 0.95);
border: 2px solid #d6a549;
border-radius: 50%;
transform: rotate(-8deg);
}

.mh-halal-seal strong {
color: #d6a549;
font-family: Georgia, "Times New Roman", serif;
font-size: 2.7rem;
line-height: 1;
}

.mh-halal-seal span {
margin-top: 8px;
font-size: 0.8rem;
letter-spacing: 4px;
}

.mh-story-content .mh-kicker {
color: #d6a549;
}

.mh-story-content h2 {
margin: 0;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(2.8rem, 5vw, 4.2rem);
line-height: 1;
letter-spacing: -2px;
}

.mh-story-text {
max-width: 570px;
margin: 28px 0;
color: #c8c0b6;
font-size: 1.1rem;
line-height: 1.8;
}

.mh-story-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}

.mh-story-tags span {
padding: 8px 13px;
color: #ded8cf;
border: 1px solid rgba(255, 255, 255, 0.2);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}

.mh-outline-button {
display: inline-flex;
align-items: center;
min-height: 52px;
padding: 0 25px;
color: #d6a549 !important;
border: 1px solid #d6a549;
font-weight: 800;
text-decoration: none !important;
}

.mh-outline-button:hover {
color: #151310 !important;
background: #d6a549;
}

/* Mobile story section */

@media (max-width: 768px) {
.mh-story {
padding: 70px 0;
}

.mh-story-inner {
width: calc(100% - 30px);
grid-template-columns: 1fr;
gap: 65px;
}

.mh-story-photo {
min-height: 380px;
}

.mh-halal-seal {
right: 15px;
bottom: -40px;
width: 130px;
height: 130px;
}

.mh-halal-seal strong {
font-size: 2.2rem;
}

.mh-story-content h2 {
font-size: 3rem;
}
}
/* MASHawi Catering Section */
.mashawi-catering {
position: relative;
width: 100%;
overflow: hidden;
padding: 90px 8%;
text-align: center;
color: #f7f1e6;
background:
radial-gradient(circle at top right,
rgba(205, 145, 48, 0.22),
transparent 38%),
#1d1c19;
border-top: 5px solid #d59a37;
}

.mashawi-catering::before {
content: "";
position: absolute;
width: 240px;
height: 240px;
left: -100px;
bottom: -120px;
border: 1px solid rgba(213, 154, 55, 0.35);
border-radius: 50%;
}

.mashawi-catering .mashawi-eyebrow {
margin: 0 0 18px;
color: #e2a640;
font-size: 13px;
font-weight: 800;
letter-spacing: 3px;
}

.mashawi-catering h2 {
margin: 0 auto 25px;
color: #fff;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(46px, 7vw, 82px);
line-height: 0.95;
}

.mashawi-catering > p:not(.mashawi-eyebrow) {
max-width: 650px;
margin: 0 auto 34px;
color: #ded8cd;
font-size: 18px;
line-height: 1.7;
}

.mashawi-catering-button {
display: inline-block;
padding: 15px 27px;
color: #1d1c19 !important;
background: #e2a640;
border: 2px solid #e2a640;
font-weight: 800;
text-decoration: none !important;
transition: 0.25s ease;
}

.mashawi-catering-button:hover {
color: #fff !important;
background: transparent;
}

@media (max-width: 600px) {
.mashawi-catering {
padding: 65px 24px;
}

.mashawi-catering h2 {
font-size: 48px;
}

.mashawi-catering > p:not(.mashawi-eyebrow) {
font-size: 16px;
}
}