/* Reset some default browser styles */
body, h1, h2, h3, h4, p, ul, li, a, img {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    background-color: #222;
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 0C11.1929 0 0 11.1929 0 25C0 38.8071 11.1929 50 25 50C38.8071 50 50 38.8071 50 25C50 11.1929 38.8071 0 25 0ZM25 5C36.055 5 45 13.945 45 25C45 36.055 36.055 45 25 45C13.945 45 5 36.055 5 25C5 13.945 13.945 5 25 5Z' fill='rgba(255,255,255,0.03)'/%3E%3Cpath d='M25 20C27.7614 20 30 22.2386 30 25C30 27.7614 27.7614 30 25 30C22.2386 30 20 27.7614 20 25C20 22.2386 22.2386 20 25 20ZM25 22C23.3431 22 22 23.3431 22 25C22 26.6569 23.3431 28 25 28C26.6569 28 28 26.6569 28 25C28 23.3431 26.6569 22 25 22Z' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E");
    color: #fff;
     overflow-x: hidden;
     scroll-behavior: smooth;
    max-width: 100vw;
    width: 100vw;
    position: relative; /* ensure site is not moving*/
}

.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
header {
    background-color: #ffc107;
    color: #222;
    padding: 1em 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: 0.3s ease;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin: 0;
    font-size: 1.8em;
}

nav a {
    color: #222;
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.3s ease, text-decoration 0.3s ease;
    padding: 8px 12px;
    border-radius: 4px;
}

nav a:hover,
nav a.active {
    color: #fff;
    text-decoration: underline;
}

/* Hero Section Styles */
.hero {
    background-image: url("https://images.unsplash.com/photo-1568901341531-c039a6118486?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YnVyZ2VyfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 150px 0 80px 0;
    text-align: center;
    position: relative; /* Needed for the overlay */
}
.hero::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    background-color: rgba(0,0,0,0.7);
}
.hero .container{
    position: relative;
    z-index: 10;
}
.hero-content{
  position: relative;
  z-index: 10;
}
.hero h2 {
    font-size: 3em;
    margin-bottom: 15px;
    color: #ffc107;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero p {
    font-size: 1.4em;
    margin-bottom: 25px;
    color: #eee;
    font-weight: 500;
}
.btn {
    background-color: transparent;
    color: #ffc107;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
     display: inline-block;
      border: 2px solid #ffc107
}

.btn:hover {
    background-color: #ffc107;
    color:#222;
}
/* Featured items */
.featured-items {
    padding: 80px 0;
}

.featured-items h2 {
    text-align: center;
    margin-bottom: 40px;
    color: #ffc107;
    font-size: 2.2em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.items-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 30px;
        overflow: hidden; /* forces the container to stop overflow */
}

.item {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
     border: 2px solid #ffc107; /*Added border*/
     flex-basis: calc(50% - 15px);
    max-width: 100%;
}

.item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.item .image-container { /* New CSS for the container of the images */
    max-width: 100%;
    max-height: 200px;
     margin-right: 20px;
     border-radius: 8px 0 0 8px;
     overflow: hidden;
}

.item .image-container img { /* css for actual images */
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the images resize while maintaining aspect ratio */
     display: block; /* added display: block */
}
.item-content {
    padding: 20px;
    color: #333;
    flex: 1;
}

.item h3 {
    margin-bottom: 10px;
    font-size: 1.3em;
    font-weight: 700;
}

.item p {
    margin-bottom: 10px;
}

/* Menu Styles */
.menu {
    background-color: #1e1e1e;
    padding: 80px 0;
    text-align: center;
}

.menu h2 {
    margin-bottom: 40px;
    color: #ffc107;
    font-size: 2.2em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.menu-items {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    text-align: left;
    justify-content: space-between;
    max-width: 100%;
       overflow: hidden; /* forces the container to stop overflow */
}

.menu-column {
    flex: 1;
    min-width: 300px;
}

.menu-column h3 {
    color: #ffc107;
    margin-bottom: 20px;
    font-size: 1.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #ffc107;
    padding-bottom: 5px;
}

.menu-item {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    color: #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid #ffc107;  /* Added yellow outline */
    flex-basis: calc(100% - 30px);
    max-width: 100%;
}

.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.menu-item h4 {
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 600;
}

.price {
    font-weight: bold;
    margin-top: 5px;
    text-align: right;
}

/* About Us Styles */
.about-us {
    padding: 80px 0;
    text-align: center;
    max-width:100%;
}

.about-us h2 {
    margin-bottom: 40px;
    color: #ffc107;
    font-size: 2.2em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-us p {
    font-size: 1.1em;
    color: #eee;
    line-height: 1.8;
    padding: 0 100px;
     max-width:100%;
}

/* Contact Section Styles */
.contact {
    background-color: #1e1e1e;
    padding: 80px 0;
    text-align: center;
    max-width:100%;
}

.contact h2 {
    margin-bottom: 40px;
    color: #ffc107;
    font-size: 2.2em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 70px;
}

.address-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.address-container i {
    margin-right: 10px;
    color: #ffc107;
    font-size: 1.3em;
}

.contact p {
    margin-bottom: 15px;
    font-size: 1.1em;
     max-width:100%;
}

.contact p a {
    color: #ffc107;
    text-decoration: none;
}

.address {
    font-weight: bold;
}

.hours {
    font-style: italic;
}

.social-links a {
    display: inline-block;
    margin: 10px;
    color: #ffc107;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 1.2em;
}

.social-links a:hover {
    color: #ffdb58;
}

/* Footer Styles */
footer {
    background-color: #343a40;
    color: #fff;
    text-align: center;
    padding: 1em 0;
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top: 100px;
}

main {
    padding-top: 80px;
    max-width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        width: 95%;
    }

    header h1 {
        font-size: 1.5em;
    }

    header .container {
        flex-direction: column;
        align-items: flex-start;
    }

    nav {
        margin-top: 10px;
    }

    nav a {
        margin-left: 0;
        margin-right: 20px;
    }

    .menu-items {
        flex-direction: column;
        gap: 20px;
         overflow: hidden; /* forces the container to stop overflow */
    }
      .menu-item {
         flex-basis: calc(100% - 30px);
        max-width: 100%;
      }
    .item {
        flex-direction: column;
          flex-basis: 100%;
           max-width: 100%;
             overflow: hidden; /* forces the container to stop overflow */
    }

    .item .image-container {
        margin-right: 0;
        border-radius: 8px 8px 0 0;
        max-height: 200px;
        width: 100%;
    }
      .item .image-container img {
         width: 100%;
         height: 100%;
          object-fit: cover;
    }

    .hero h2 {
        font-size: 2.5em;
        }
      .hero p{
          font-size: 1.1em
      }
    .about-us p {
        padding: 0 20px;
    }

    footer {
        margin-top: 50px;
    }

    .contact h2 {
        margin-top: 40px;
    }

    main {
        padding-top: 70px;
    }

    .featured-items h2 {
        margin-bottom: 20px;
    }
}