@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Arial, sans-serif;
}



.menu-icon{
display:none;
font-size: 28px;
position: absolute;
right: 40px;
top: 25px;
cursor: pointer;
}


.header i{
display:none;
}


.menu{
list-style: none;
display: flex;
gap:27px;
position: absolute;
right: 110px;
top: 30px;
}
.menu li{
position: relative;
}
.menu li a{
text-decoration: none;
color: white;
font-size: 18px;
transition: 0.3s;
}
.menu li a:hover{
color: #a1874b;
}


.drop-down{
display: none;
position: absolute;
background: rgba(255,255,255,.5);
margin-top: 10px;
list-style: none;
border-radius: 6px;
overflow: hidden;
}


.has-dropdown:hover .drop-down{
display: block;
}
.drop-down li a{
display: block;
padding: 10px 20px;
}


.btn-login{
width:200px;
background: #ffb400;
border: none;
padding: 10px 30px;
border-radius:17px;
margin-left:10%;
margin-top:-20%;
}

.btn-login a{
text-decoration: none;
color: black;
font-weight: bold;
transition:background 0.5s;
}

.btn-login a:hover{
color:lightgray;
letter-spacing:1px;
}

.hero-text{
margin-top:75px;
max-width: 600px;
}

.hero-text span{
font-size:80px;
font-family: "Italianno",sans-serif;
font-weight:400;
font-style: normal;
background: linear-gradient(90deg, #e3d9ac, #bc9d10);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #bc9d10; 
display: inline-block;
}
.hero-text h1{
line-height:58px;
font-size:60px;
font-family: "cursive",sans-serif;
font-weight:400;
font-style: normal;
background: linear-gradient(90deg, #e3d9ac, #bc9d10);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #bc9d10; 
display: inline-block;
}
.hero-text p{
margin: 20px 0;
line-height:1;
font-size:25px;
}
.hero-btn{
display: inline-block;
padding: 12px 20px;
background: #ffb400;
color: black;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
text-align:center;
}




@media(max-width: 768px){


.header-nav .menu-icon{
display:block;
}

.menu{
flex-direction: column;
background: rgba(255,255,255,.3);
position: absolute;
top: 70px;
right: -95%;
width: 200px;
padding: 20px;
border-radius:4px;
transition: 0.7s;
z-index:1;
backdrop-filter:blur(7px);
}


.drop-down{
display: none;
position: absolute;
background: rgba(255,255,255,.5);
margin-right:-30%;
margin-top: 10px;
list-style: none;
border-radius: 6px;
overflow: hidden;
backdrop-filter:blur(20px);
}

.btn-login{
position:absolute;
top:7%;  
width:100%;
background: #ffb400;
border: none;
padding: 10px 30px;
border-radius: 20px;
}
.btn-login a{
text-decoration: none;
color: black;
font-weight: bold;
}


.drop-down li a{
display: block;
padding:8px 10px;
text-align:right;
}

.menu.show{
right: 20px;
}

.menu li{
margin-bottom: 15px;
}

.menu li a{
font-size: 16px;
}
}


.Plate{
position: absolute;
border-radius:50%;
left:60%;
height:320px;
width:320px;
bottom:17%;
background-color:aliceblue;
box-shadow:3px 3px 20px #ffb400;
animation: spain 3s linear infinite;
}

.Plate img{
height:320px;
width:320px;
border-radius:50%;
}

@keyframes spain{

0%{
transform:rotate(0);
}
100%{
transform:rotate(360deg);
}

}



@media(max-width: 1024px){
.Plate {
left: 55%;
width:330px;
height:330px;
}

.Plate img{
width:330px;
height:330px;
}

.hero-text{
margin-top:40%;
max-width:800px;
}

.hero-text span{
font-size:80px;
font-family: "Italianno",sans-serif;
font-weight:400;
font-style: normal;
background: linear-gradient(90deg, #e3d9ac, #bc9d10);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #bc9d10; 
display: inline-block;
}
.hero-text h1{
line-height:58px;
font-size:100px;
font-family: "cursive",sans-serif;
font-weight:400;
font-style: normal;
background: linear-gradient(90deg, #e3d9ac, #bc9d10);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #bc9d10; 
display: inline-block;
}
.hero-text p{
margin: 20px 0;
line-height:1;
font-size:40px;
}
.hero-btn{
display: inline-block;
padding: 12px 20px;
background: #ffb400;
color: black;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
text-align:center;
font-size:3rem;
}


}

@media(max-width: 768px){
.Plate {
left: 60%;
bottom:13%;
width: 250px;
height: 250px;
}

.Plate img{
width: 250px;
height:250px;
}


.cart-icon{
position: absolute;
top:-3px;
right:-70px;
font-size: 28px;
color: white;
cursor: pointer;
}

.cart-icon span{
background: red;
color: white;
padding: 2px 6px;
border-radius: 50%;
font-size: 13px;
position: absolute;
top: -10px;
right: -12px;
}

.cart-box{
z-index:1;
position: fixed;
top: 90px;
right:-5px;
width: 260px;
background:black;
padding: 15px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,.3);
display: none;
}

.cart-box.show{
display: block;
}

.cart-box ul{
list-style: none;
padding: 0;
}

}

@media(max-width: 480px){
.Plate {
left:28%;
bottom: 10%;
width:280px;
height:280px;
}

.Plate img{
width:280px;
height:280px;
}
}



@media(max-width: 1024px){

}



.content{
width: 100%;
text-align:center;
margin-top:5%;
}

.content h1{
font-size:3rem;
font-weight:700;
background: linear-gradient(90deg, #e3d9ac, #bc9d10);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.content p{
color:#777;
max-width:700px;
margin:auto;
font-size:1.1rem;
margin-bottom:3rem;
}


.massive{
display:grid;
gap:2.5rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
padding:20px 40px;
}

.order1{
background:#ffffff;
border-radius:20px;
padding:20px;
text-align:center;
box-shadow:0 4px 15px rgba(0,0,0,0.15);
transition:0.3s ease;
position:relative;
overflow:hidden;
border:1px solid #f1f1f1;
}

.order1:hover{
transform:translateY(-8px);
box-shadow:0 8px 25px rgba(0,0,0,0.2);
}

.order1 h3{
font-size:1.5rem;
margin-bottom:10px;
font-weight:600;
color:#333;
}


.order1 img{
width:190px;
height:190px;
object-fit:cover;
border-radius:50%;
border:4px solid #ffb400;
margin-bottom:15px;
}


.price-tag{
font-size:1.3rem;
font-weight:700;
color:#e67e22;
margin:8px 0 15px 0;
}


.add-btn{
background:#ffb400;
border:none;
padding:10px 20px;
border-radius:25px;
font-size:1rem;
font-weight:bold;
cursor:pointer;
transition:0.3s ease;
}

.add-btn:hover{
background:#e6a000;
}



@media(max-width: 768px){
.massive{
gap: 1.5rem;
padding: 1.5rem;
}

.order1 h3{
font-size: 1.3rem;
}

.order1 img{
max-width: 220px;
}
}

@media(max-width: 480px){
.massive{
grid-template-columns: 1fr;
gap: 1rem;
}

.order1 h3{
font-size: 1.2rem;
}

.order1 img{
max-width: 200px;
}
}


.cart-icon{
position: absolute;
top:-3px;
right:-70px;
font-size: 28px;
color: white;
cursor: pointer;
}

.cart-icon span{
background: red;
color: white;
padding: 2px 6px;
border-radius: 50%;
font-size: 13px;
position: absolute;
top: -10px;
right: -12px;
}

.cart-box{
z-index:1;
position: fixed;
top: 90px;
right: 20px;
width: 260px;
background:black;
padding: 15px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,.3);
display: none;
}

.cart-box.show{
display: block;
}

.cart-box ul{
list-style: none;
padding: 0;
}


.about-container {
max-width: 1100px;
margin: 80px auto;
padding: 50px;
background: #fff;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
display: flex;
align-items: center;
gap: 50px;
}

/* Image */
.about-image {
flex: 1;
text-align: center;
}

.about-image img {
width: 100%;
max-width: 420px;
}

/* Content */
.about-content {
flex: 1;
}

.about-content h2 {
font-size: 36px;
color: #FFB300;
margin-bottom: 10px;
}

.about-content .subtitle {
font-size: 16px;
font-weight: 500;
color: #888;
margin-bottom: 20px;
}

.about-content p {
font-size: 16px;
line-height: 1.7;
color: #555;
margin-bottom: 20px;
}

/* Button */
.about-btn {
display: inline-block;
padding: 14px 30px;
background: linear-gradient(90deg, #FFD700, #FFC107);
color: #fff;
text-decoration: none;
border-radius: 12px;
font-weight: 600;
transition: 0.3s;
}

.about-btn:hover {
background: linear-gradient(90deg, #FFC107, #FFB300);
transform: translateY(-3px);
}

/* 📱 Responsive */
@media (max-width: 768px) {
.about-container {
flex-direction: column;
text-align: center;
padding: 35px 25px;
}

.about-image img {
max-width: 300px;
margin-bottom: 20px;
}

.about-content h2 {
font-size: 30px;
}
}


.contact-container {
background: #fff;
padding: 50px;
border-radius: 18px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
max-width: 1000px;
margin: 60px auto;
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: 40px;
}



/* IMAGE SECTION */
.contact-image {
flex: 1;
text-align: center;
}

.contact-image img {
width: 100%;
max-width: 400px;
}

/* FORM SECTION */
.contact-form {
flex: 1;
}

.contact-form h2 {
font-size: 32px;
color: #FFB300;
margin-bottom: 15px;
}

.contact-form p {
font-size: 16px;
color: #777;
margin-bottom: 25px;
}

/* Inputs */
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 14px 18px;
margin-bottom: 18px;
border: 1px solid #ddd;
border-radius: 12px;
font-size: 16px;
transition: 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
border-color: #FFB300;
box-shadow: 0 0 10px rgba(255,179,0,0.3);
outline: none;
}

.contact-form textarea {
height: 150px;
resize: none;
}

/* Button */
.contact-form button {
width: 100%;
padding: 14px;
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: 600;
background: linear-gradient(90deg, #FFD700, #FFC107);
color: #fff;
cursor: pointer;
transition: 0.3s;
}

.contact-form button:hover {
background: linear-gradient(90deg, #FFC107, #FFB300);
transform: translateY(-2px);
}

/* 📱 RESPONSIVE */
@media (max-width: 768px) {
.contact-container {
flex-direction: column;
padding: 35px 25px;
}

.contact-image img {
max-width: 300px;
margin-bottom: 20px;
}

.contact-form h2 {
text-align: center;
}

.contact-form p {
text-align: center;
}
}


/* 🌙 DARK MODE TOGGLE ICON */
.dark-mode-toggle {
position: absolute;
top:2px;
right:185px;
font-size: 22px;
cursor: pointer;
color: #ffb400;
transition: 0.3s;
}

.dark-mode-toggle:hover {
transform: scale(1.2);
}

/* 🌌 DARK MODE STYLES */
body.dark-mode {
background: #0b132b;
color: #eaeaea;
}

/* Header */
body.dark-mode .header-nav {
background: linear-gradient(
to right,
rgba(11,19,43,0.95),
rgba(30,58,138,0.9)
),
url(Pictures/pizza-on-dark-table-top-background--with-copyspace.jpg);
}

/* Cards */
body.dark-mode .menu-card,
body.dark-mode .order1,
body.dark-mode .about-container,
body.dark-mode .contact-container {
background: #1c2541;
color: #fff;
}

/* Text */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode p {
color: #eaeaea;
}

/* Buttons */
body.dark-mode .menu-btn,
body.dark-mode .add-btn,
body.dark-mode .hero-btn,
body.dark-mode .about-btn,
body.dark-mode .contact-form button {
background: linear-gradient(90deg, #1e3a8a, #2563eb);
color: #fff;
}

/* Footer */
body.dark-mode .footer {
background: #020617;
}

/* Inputs */
body.dark-mode input,
body.dark-mode textarea {
background: #0f172a;
color: #fff;
border: 1px solid #334155;
}



.footer {
background: #111;
color: #eee;
padding: 60px 20px 20px;
margin-top: 60px;
}

.footer-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 40px;
}

.footer-section h2,
.footer-section h3 {
color: #ffb400;
margin-bottom: 15px;
font-weight: bold;
}

.footer-section p {
line-height: 1.7;
font-size: 15px;
}

.footer-section ul {
list-style: none;
padding: 0;
}

.footer-section ul li {
margin: 8px 0;
}

.footer-section ul li a {
text-decoration: none;
color: #ddd;
transition: 0.3s;
}

.footer-section ul li a:hover {
color: #ffb400;
}


.footer-social a {
color: #ddd;
margin-right: 15px;
font-size: 20px;
transition: 0.3s;
}

.footer-social a:hover {
color: #ffb400;
}


.footer-bottom {
text-align: center;
padding-top: 25px;
border-top: 1px solid #333;
margin-top: 40px;
}

.footer-bottom p {
font-size: 14px;
color: #bbb;
}


.menu-section {
padding: 80px 0;
text-align: center;
font-family: 'Poppins', sans-serif;
}

.menu-title {
font-size: 40px;
font-weight: bold;
margin-bottom: 10px;

background: linear-gradient(90deg, #e3d9ac, #bc9d10);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #bc9d10; 
}

.menu-desc {
font-size: 16px;
width: 60%;
margin: auto;
opacity: .8;
margin-bottom: 40px;
color:#777;
}


.menu-categories {
margin-bottom: 40px;
}

.cat-btn {
padding: 10px 25px;
margin: 5px;
border: none;
background: #eee;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
transition: .3s;
}




.cat-btn a{
text-decoration:none;
color:#000;
font-size:18px;
}

.cat-btn.active,
.cat-btn:hover {
background: #ffb703;
color: #000;
}

.menu-grid {
width: 90%;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 35px;
}


.menu-card {
background: #fff;
border-radius: 20px;
padding: 15px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
transition: .3s;
}

.menu-card a{
text-decoration:none;
color:#000;
font-size:18px;

}


.menu-card:hover {
transform: translateY(-5px);
}

.menu-card img {
width: 100%;
height: 180px;
border-radius: 15px;
object-fit: cover;
margin-bottom: 15px;
transition: .3s;
}

.menu-card:hover img {
transform: scale(1.05);
}

.menu-card h3 {
font-size: 18px;
margin-bottom: 5px;
}

.price {
font-size: 20px;
color: #ffb703;
font-weight: bold;
margin-bottom: 15px;
}

.menu-btn {
background: #ffb703;
padding: 10px 25px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: bold;
transition: .3s;
}

.menu-btn:hover {
background: #f59e0b;
}





@media(max-width: 640px){
.hero-text{
margin-top:120px;
max-width: 600px;
}

.hero-text span{
font-size:55px;
font-family: "Italianno",sans-serif;
font-weight:400;
font-style: normal;
background: linear-gradient(90deg, #e3d9ac, #bc9d10);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #bc9d10; 
display: inline-block;
}
.hero-text h1{
line-height:40px;
font-size:45px;
font-family: "cursive",sans-serif;
font-weight:400;
font-style: normal;
background: linear-gradient(90deg, #e3d9ac, #bc9d10);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #bc9d10; 
display: inline-block;
}
.hero-text p{
margin: 20px 0;
line-height:1;
font-size:22px;
}
.hero-btn{
display: inline-block;
padding:7px 10px;
background: #ffb400;
color: black;
font-size:20px;
border-radius: 25px;
margin-top:20%;
text-decoration: none;
font-weight: bold;
text-align:center;
width: 50%;
}

.Plate{
position: absolute;
border-radius:50%;
left:12%;
top:65%;
height:280px;
width:280px;
bottom:17%;
background-color:aliceblue;
box-shadow:3px 3px 20px #ffb400;
animation: spain 3s linear infinite;
}



.Plate img{
height:280px;
width:280px;
border-radius:50%;
}
}


.customer-service .container{
max-width:1100px;
margin:auto;
background:#fff;
border-radius:16px;
padding:50px 30px;
box-shadow:0 20px 40px rgba(0,0,0,.15);
}
.customer-service h2{
text-align:center;
font-size:36px;
margin-bottom:15px;
}
.customer-service p.subtitle{
text-align:center;
color:#666;
margin-bottom:40px;
}
.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}
.service-box{
background:#fafafa;
padding:30px 25px;
border-radius:14px;
text-align:center;
transition:.3s;
}
.service-box:hover{
transform:translateY(-8px);
box-shadow:0 15px 30px rgba(0,0,0,.12);
}
.service-box span{
font-size:42px;
display:block;
margin-bottom:15px;
}
.service-box h3{
margin-bottom:10px;
}



.chefs-section{
padding: 80px 20px;
background-color: #fdf3e7;
text-align: center;
}

.section-title{
font-size: 36px;
color: #333;
margin-bottom: 10px;
font-weight: 700;
background: linear-gradient(90deg, #e3d9ac, #bc9d10);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #bc9d10; 
font-style: normal;
}

.section-subtitle{
font-size: 18px;
color: #666;
margin-bottom: 50px;
}

.chefs-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
justify-items: center;
}

.chef-card{
background: white;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
padding: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
max-width: 300px;
}

.chef-card:hover{
transform: translateY(-10px);
box-shadow: 0 15px 25px rgba(0,0,0,0.2);
}

.chef-card img{
width: 100%;
border-radius: 15px;
margin-bottom: 15px;
}

.chef-card h3{
font-size: 22px;
color: #333;
margin-bottom: 5px;
}

.chef-card p{
color: #777;
font-size: 16px;
margin-bottom: 15px;
}

.chef-social a{
color: #555;
margin: 0 5px;
font-size: 16px;
transition: color 0.3s ease;
}

.chef-social a:hover{
color: #ff6600;
}



/* ===== RESET ===== */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body{
overflow-x: hidden;
}

/* ===== HEADER ===== */
.header{
min-height: 100vh;
background:
linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.4)),
url(Pictures/pizza-on-dark-table-top-background--with-copyspace.jpg);
background-position: center;
background-size: cover;
position: relative;
}

/* ===== NAVBAR ===== */
nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 0 60px;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(90deg, #e3d9acbd, #bc9c10bb);
backdrop-filter: blur(10px);
z-index: 999;
}

/* LOGO */
nav .logo img{
width: 120px;
margin-left:-40%;
}

/* MENU */
.menu{
list-style: none;
display: flex;
align-items: center;
gap: 30px;
}

.menu li{
position: relative;
}

.menu li a{
text-decoration: none;
font-size:22px;
color:aliceblue; 
transition: 0.3s;

}

.menu li a:hover{
color: #70530a;
}

/* DROPDOWN */
.has-dropdown:hover .drop-down{
display: block;
}

.drop-down{
position: absolute;
top: 35px;
left: 0;
background: #111;
min-width: 160px;
display: none;
border-radius: 6px;
overflow: hidden;
}

.drop-down li a{
display: block;
padding: 12px 15px;
color: #fff;
}

.drop-down li a:hover{
background: #ffb703;
color: #000;
position:fixed;
}

/* CART */
.cart-icon{
position: relative;
color: #fff;
font-size: 20px;
cursor: pointer;
}

#cartCount{
position: absolute;
top: -8px;
right: -10px;
background: red;
color: #fff;
font-size: 12px;
padding: 2px 6px;
border-radius: 50%;
}

/* DARK MODE */
.dark-mode-toggle{
color: #fff;
font-size: 18px;
cursor: pointer;
}

/* BUTTON */
.btn-login{
background:rgba(240, 248, 255, 0.556);
border: none;
padding: 10px 18px;
border-radius: 30px;
margin-top:-7%;
}

.btn-login a{
color: #000;
font-weight: 600;
text-decoration: none;
}

/* ===== HERO TEXT ===== */
.hero-text{
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
color: #fff;
max-width: 500px;
margin-left:-5%;
}

.hero-text h1{
font-size: 48px;
margin-bottom: 15px;
}

.hero-text span{
color: #ffb703;
}

.hero-text p{
font-size:22px;
margin-bottom: 25px;
}

.hero-btn{
background: #ffb703;
padding: 12px 25px;
border-radius: 30px;
text-decoration: none;
color: #000;
font-weight: 600;
}

/* ===== PLATE IMAGE ===== */
.Plate{
position: absolute;
right: 5%;
bottom:8%;
height:340px;
width:340px;
}

.Plate img{
width: 340px;
height: 340px;
}

/* ===================== */
/* ===== RESPONSIVE ==== */
/* ===================== */

@media (max-width: 992px){
nav{
padding: 0 30px;
}

.hero-text h1{
font-size: 38px;
}

.Plate img{
width: 320px;
}
}

@media (max-width: 768px){
nav{
height: 70px;
}

.menu{
position: absolute;
top: 70px;
left: 0;
width: 100%;
background: #111;
flex-direction: column;
align-items: flex-start;
padding: 20px;
display: none; /* JS ayaa furi doona */
}

.menu li{
width: 100%;
}

.menu li a{
display: block;
width: 100%;
padding: 12px 0;
}

.drop-down{
position: static;
width: 100%;
}

.hero-text{
left: 5%;
right: 5%;
text-align: center;
}

.Plate{
display: none;
}
}

@media (max-width: 480px){
.hero-text h1{
font-size: 30px;
}

.hero-text p{
font-size: 14px;
}
}




.menu{
list-style:none;
display:flex;
gap:30px;
}

/* ===== DROPDOWN ===== */
.drop-down{
display:none;
position:absolute;
top:35px;
left:0;
background:#111;
min-width:160px;
border-radius:6px;
overflow:hidden;
z-index:999;
}

.drop-down li a{
display:block;
padding:12px 15px;
color:#fff;
}

.has-dropdown:hover .drop-down{
display:block;
}

/* ===== MOBILE ===== */
@media(max-width:768px){

.menu-icon{
display:block;
}


.header i{
display:block;
}
.menu{
position:absolute;
top:80px;
left:0;
width:100%;
background:#111;
flex-direction:column;
padding:20px;
display:none;
}

.menu.show{
display:flex;
}

.menu li{
width:100%;
}

.menu li a{
display:block;
padding:12px 0;
}

/* MOBILE DROPDOWN */
.drop-down{
position:static;
background:#222;
width:100%;
display:none;
}

.has-dropdown.active .drop-down{
display:block;
}
}