/* =====================================
   LEGENDS PIZZA & KEBAB
   MAIN WEBSITE STYLES
===================================== */


/* ===============================
   GLOBAL RESET
=============================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: 'Poppins', sans-serif;

    background: #0b0b0b;

    color: #ffffff;

    line-height: 1.6;

}



img {

    width: 100%;

    display: block;

}



a {

    text-decoration: none;

    color: inherit;

}



button {

    font-family: inherit;

}





/* ===============================
   COLORS
=============================== */

:root {

    --black: #0b0b0b;

    --dark: #151515;

    --gold: #d4a017;

    --light-gold: #f3c74b;

    --white: #ffffff;

    --gray: #aaaaaa;

}









/* ===============================
   SECTION DEFAULTS
=============================== */


section {

    padding: 90px 8%;

}



.section-title {

    text-align: center;

    margin-bottom: 50px;

}



.section-title h2 {

    font-size: 42px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.section-title p {

    color: var(--gray);

    margin-top: 10px;

    font-size: 18px;

}










/* ===============================
   NAVBAR
=============================== */


.navbar {


    position: fixed;

    top: 0;

    left: 0;

    width: 100%;


    height: 90px;


    display: flex;

    align-items: center;

    justify-content: space-between;


    padding: 0 8%;


    background: rgba(11,11,11,0.95);


    backdrop-filter: blur(10px);


    z-index: 1000;


    border-bottom: 1px solid rgba(212,160,23,0.2);


}





.logo img {

    height: 60px;

    width: auto;

    object-fit: contain;

}







.nav-links {


    display: flex;


    align-items: center;


    gap: 35px;


}





.nav-links a {


    font-size: 16px;


    font-weight: 500;


    transition: 0.3s;


    position: relative;


}





.nav-links a:hover {


    color: var(--gold);


}





.nav-links .active {


    color: var(--gold);


}







.nav-links .active::after {


    content: "";


    position: absolute;


    bottom: -8px;


    left: 0;


    width: 100%;


    height: 2px;


    background: var(--gold);


}










/* ORDER BUTTON */


.order-btn {


    background: var(--gold);


    color: #000 !important;


    padding: 12px 25px;


    border-radius: 50px;


    font-weight: 700 !important;


}





.order-btn:hover {


    background: var(--light-gold);


    transform: translateY(-2px);


}










/* ===============================
   BUTTONS
=============================== */


.btn {


    display: inline-block;


    padding: 14px 35px;


    border-radius: 50px;


    font-weight: 700;


    transition: .3s;


    cursor: pointer;


}





.btn.primary {


    background: var(--gold);


    color: #000;


}





.btn.secondary {


    border: 2px solid var(--gold);


    color: var(--gold);


}





.btn:hover {


    transform: translateY(-4px);


}







/* ===============================
   HERO
=============================== */


.hero {


    height: 100vh;


    display: flex;


    align-items: center;


    background:


    linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.8)
    ),

    url("../images/hero.jpg");


    background-size: cover;


    background-position: center;


}







.hero-content {


    max-width: 700px;


}





.hero h1 {


    font-size: 80px;


    line-height: 1.05;


    font-weight: 800;


    text-transform: uppercase;


}





.hero p {


    margin: 25px 0;


    font-size: 22px;


    color: #ddd;


}





.hero-buttons {


    display: flex;


    gap: 20px;


}









/* ===============================
   PAGE HERO
=============================== */


.page-hero {


    height: 55vh;


    display: flex;


    justify-content: center;


    align-items: center;


    text-align: center;


    background:


    linear-gradient(
        rgba(0,0,0,.7),
        rgba(0,0,0,.8)
    ),

    url("../images/hero.jpg");


    background-size: cover;


    background-position: center;


}







.page-hero h1 {


    font-size: 65px;


    font-weight: 800;


    text-transform: uppercase;


}





.page-hero p {


    font-size: 20px;


    color: #ddd;


}
/* ===============================
   CATEGORY CARDS
=============================== */


.category-grid {


    display: grid;


    grid-template-columns: repeat(4,1fr);


    gap: 25px;


}






.category-card {


    position: relative;


    height: 350px;


    overflow: hidden;
    

    border-radius: 20px;


}






.category-card img {


    height: 100%;


    object-fit: cover;


    transition: .5s;


}






.category-card:hover img {


    transform: scale(1.1);


}







.card-overlay {


    position: absolute;


    inset: 0;


    background: linear-gradient(
        transparent,
        rgba(0,0,0,.85)
    );


    display: flex;


    flex-direction: column;


    justify-content: flex-end;


    padding: 30px;


}







.card-overlay h3 {


    font-size: 30px;


    margin-bottom: 10px;


}






.card-overlay a {


    color: var(--gold);


    font-weight: 600;


}











/* ===============================
   FOOD CARDS
=============================== */


.food-grid {


    display: grid;


    grid-template-columns: repeat(3,1fr);


    gap: 30px;


}





.food-card {


    background: var(--dark);


    border-radius: 20px;


    overflow: hidden;


    transition: .3s;


}







.food-card:hover {


    transform: translateY(-10px);


}







.food-card img {


    height: 260px;


    object-fit: cover;


}







.food-info {


    padding: 25px;


}







.food-info h3 {


    color: var(--gold);


    font-size: 24px;


    margin-bottom: 10px;


}







.food-info p {


    color: #bbb;


}









/* ===============================
   ABOUT SECTIONS
=============================== */


.about-container {


    display: grid;


    grid-template-columns: 1fr 1fr;


    align-items: center;


    gap: 60px;


}







.about-image img {


    border-radius: 25px;


}






.about-content h2 {


    font-size: 42px;


    margin-bottom: 20px;


}






.about-content p {


    color: #ccc;


    margin-bottom: 20px;


}











/* ===============================
   FEATURES
=============================== */


.features-grid {


    display: grid;


    grid-template-columns: repeat(4,1fr);


    gap: 25px;


}







.feature-card {


    background: var(--dark);


    padding: 35px 25px;


    text-align: center;


    border-radius: 20px;


    transition: .3s;


}







.feature-card:hover {


    transform: translateY(-10px);


    border: 1px solid var(--gold);


}







.feature-icon {


    font-size: 45px;


    margin-bottom: 20px;


}







.feature-card h3 {


    margin-bottom: 10px;


    color: var(--gold);


}







.feature-card p {


    color: #aaa;


}









/* ===============================
   ORDER BANNERS
=============================== */


.order-banner,
.contact-banner {


    background:


    linear-gradient(
        rgba(0,0,0,.7),
        rgba(0,0,0,.7)
    ),

    url("../images/order-bg.jpg");


    background-size: cover;


    background-position: center;


    text-align: center;


}







.order-content h2,
.contact-content h2 {


    font-size: 45px;


    margin-bottom: 15px;


}







.order-content p,
.contact-content p {


    color: #ddd;


    margin-bottom: 30px;


    font-size: 18px;


}











/* ===============================
   GALLERY
=============================== */


/* Gallery page - keep original square look */

.gallery-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}


.gallery-grid img {

    width:100%;

    aspect-ratio:1 / 1;

    object-fit:cover;

    border-radius:20px;

    cursor:pointer;

    transition:.3s;

}



.gallery-grid img:hover {

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.5);

}






/* Homepage scrolling gallery */

.gallery-track img {

    width:350px;

    height:250px;

    object-fit:cover;

    border:3px solid var(--gold);

    border-radius:16px;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.35);

}


.gallery-track img:hover {

    transform:scale(1.05);

    box-shadow:0 15px 40px rgba(212,160,23,.35);

}

/* ===============================
   REVIEWS
=============================== */


.review-slider {


    display: grid;


    grid-template-columns: repeat(3,1fr);


    gap: 30px;


}







.review-card {


    background: var(--dark);


    padding: 35px;


    border-radius: 20px;


    text-align: center;


}







.stars {


    color: var(--gold);


    font-size: 25px;


    margin-bottom: 15px;


}







.review-card p {


    color: #ccc;


    font-style: italic;


}
/* ===============================
   MENU SLIDESHOW
=============================== */


.menu-slider-section {


    text-align: center;


}





.menu-slider {


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 25px;


    margin: 40px auto;


}







.menu-image-container {


    max-width: 850px;


    background: #111;


    border-radius: 20px;


    overflow: hidden;


    box-shadow: 0 15px 40px rgba(0,0,0,.5);


}







.menu-image-container img {


    width: 100%;


    transition: opacity .3s;


}







.slide-btn {


    width: 55px;


    height: 55px;


    border-radius: 50%;


    border: none;


    background: var(--gold);


    color: #000;


    font-size: 25px;


    cursor: pointer;


    transition: .3s;


}







.slide-btn:hover {


    background: var(--light-gold);


    transform: scale(1.1);


}







.dots {


    display: flex;


    justify-content: center;


    gap: 10px;


    margin-top: 25px;


}







.dots span {


    width: 12px;


    height: 12px;


    border-radius: 50%;


    background: #555;


    cursor: pointer;


}







.dots span.active {


    background: var(--gold);


}









.menu-order {


    margin-top: 35px;


}









/* ===============================
   LOCATION
=============================== */


.location-container {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 50px;


    align-items: center;


}







.location-info h2 {


    font-size: 42px;


    margin-bottom: 20px;


}







.location-info p {


    color: #ccc;


}







.contact-item {


    margin: 25px 0;


}







.contact-item h3 {


    color: var(--gold);


    margin-bottom: 5px;


}







.map {


    height: 450px;


}







.map iframe {


    width: 100%;


    height: 100%;


    border: 0;


    border-radius: 20px;


}









/* ===============================
   CONTACT FORM
=============================== */


.contact-form-section {


    background: var(--dark);


}





.contact-form {


    max-width: 700px;


    margin: auto;


    display: flex;


    flex-direction: column;


    gap: 20px;


}







.contact-form input,
.contact-form textarea {


    width: 100%;


    padding: 18px;


    background: #222;


    border: 1px solid #333;


    color: white;


    border-radius: 10px;


    font-size: 16px;


    outline: none;


}







.contact-form input:focus,
.contact-form textarea:focus {


    border-color: var(--gold);


}







.contact-form textarea {


    resize: vertical;


}









/* ===============================
   SOCIAL LINKS
=============================== */


.social-section {


    text-align: center;


}





.social-links {


    display: flex;


    justify-content: center;


    gap: 25px;


}





.social-links a {


    padding: 15px 35px;


    border: 1px solid var(--gold);


    border-radius: 50px;


    color: var(--gold);


    transition: .3s;


}







.social-links a:hover {


    background: var(--gold);


    color: #000;


}









/* ===============================
   CATERING
=============================== */


.contact-form-section h2 {


    margin-bottom: 10px;


}





.about-page {


    padding-top: 100px;


}







.about-page .about-container {


    min-height: 500px;


}









/* ===============================
   FOOTER
=============================== */


.footer {


    background: #050505;


    padding: 70px 8% 30px;


}







.footer-container {


    display: grid;


    grid-template-columns: repeat(4,1fr);


    gap: 40px;


}







.footer-logo {


    width: 160px;


    margin-bottom: 20px;


}







.footer-column h3 {


    color: var(--gold);


    margin-bottom: 20px;


}







.footer-column a {


    display: block;


    color: #aaa;


    margin-bottom: 12px;


    transition: .3s;


}







.footer-column a:hover {


    color: var(--gold);


}







.footer-column p {


    color: #aaa;


}







.copyright {


    text-align: center;


    color: #777;


    border-top: 1px solid #222;


    margin-top: 50px;


    padding-top: 25px;


}
/* ===============================
   HAMBURGER MENU
=============================== */


.hamburger {

    display: none;

    flex-direction: column;

    gap: 6px;

    cursor: pointer;

}



.hamburger span {

    width: 30px;

    height: 3px;

    background: var(--gold);

    border-radius: 5px;

}









/* ===============================
   ANIMATIONS
=============================== */


@keyframes fadeUp {


    from {

        opacity: 0;

        transform: translateY(40px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }


}







.hero-content,
.page-hero-content {


    animation: fadeUp 1s ease;

}







.category-card,
.food-card,
.feature-card,
.gallery-item,
.review-card {


    animation: fadeUp .8s ease;

}









/* ===============================
   HOVER EFFECTS
=============================== */


.category-card,
.food-card,
.feature-card {


    border: 1px solid transparent;


}







.category-card:hover,
.food-card:hover,
.feature-card:hover {


    border-color: rgba(212,160,23,.4);


}









/* ===============================
   SCROLLBAR
=============================== */


::-webkit-scrollbar {


    width: 10px;


}



::-webkit-scrollbar-track {


    background: #111;


}



::-webkit-scrollbar-thumb {


    background: var(--gold);


    border-radius: 10px;


}









/* ===============================
   MOBILE NAV ACTIVE STATE
=============================== */


.nav-links.open {


    display: flex;

}









/* ===============================
   SELECTION COLOR
=============================== */


::selection {


    background: var(--gold);


    color: #000;


}









/* ===============================
   IMAGE LOADING
=============================== */


img {


    user-select: none;


}








/* ===============================
   EXTRA POLISH
=============================== */


.primary {


    box-shadow: 0 10px 30px rgba(212,160,23,.25);


}





.primary:hover {


    box-shadow: 0 15px 40px rgba(212,160,23,.45);


}







.secondary:hover {


    background: var(--gold);


    color:#000;


}
.review-card {

    display: flex;

    flex-direction: column;

    min-height: 260px;

}



.review-name {

    margin-top: auto;

    padding-top: 25px;

    color: var(--gold);

    font-size: 18px;

}
/* ===============================
   HOME SCROLLING GALLERY
=============================== */

.home-gallery{

    padding:100px 0;

    overflow:hidden;

}



.gallery-marquee{

    width:100%;

    overflow:hidden;

    position:relative;

}



.gallery-track{

    display:flex;

    gap:20px;

    width:max-content;

    animation:scrollGallery 40s linear infinite;

}



.gallery-track:hover{

    animation-play-state:paused;

}



.gallery-track img{

    width:350px;
    height:250px;

    object-fit:cover;

    border:3px solid var(--gold);

    border-radius:16px;

    box-shadow:0 8px 20px rgba(0,0,0,.35);

    transition:.35s;

    cursor:pointer;

}

.gallery-track img:hover{

    transform:scale(1.05);

    box-shadow:0 15px 40px rgba(212,160,23,.35);

}



@keyframes scrollGallery{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(calc(-50%));

    }

}
/* ===============================
   IMAGE LIGHTBOX
=============================== */

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

    backdrop-filter:blur(8px);

}

.lightbox.active{

    display:flex;

}

#lightbox-image{

    max-width:95vw;

    max-height:90vh;

    width:auto;

    height:auto;

    object-fit:contain;

    border:4px solid var(--gold);

    border-radius:16px;

}

.close-lightbox{

    position:absolute;

    top:25px;

    right:35px;

    color:white;

    font-size:48px;

    cursor:pointer;

}

.lightbox-prev,
.lightbox-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    background:rgba(0,0,0,.45);

    border:2px solid var(--gold);

    color:white;

    width:60px;

    height:60px;

    border-radius:50%;

    cursor:pointer;

    font-size:28px;

    transition:.3s;

}

.lightbox-prev:hover,
.lightbox-next:hover{

    background:var(--gold);

    color:#000;

}

.lightbox-prev{

    left:30px;

}

.lightbox-next{

    right:30px;

}
/* ===============================
   GALLERY BUTTON
=============================== */

.gallery-button {

    text-align:center;

    margin-top:40px;

}
.category-card {

    display:block;

    color:white;

}


.category-card span {

    color:var(--gold);

    font-weight:600;

}
/* ===============================
   SOCIAL ICONS
=============================== */

.social-icons {

    display:flex;

    gap:15px;

}


.social-icons a {

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--gold);

    border-radius:50%;

    color:var(--gold);

    font-size:20px;

    transition:.3s;

}


.social-icons a:hover {

    background:var(--gold);

    color:#000;

    transform:translateY(-5px);

}