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

/* Tropical Breeze Pallettes */
:root {
    --TealTurquoise:#2B7F8E; /*tropical breeze text*/
    --OrangeCoral: #e55934; /* Caribbean kitchen */
    --GoldenYellowOrange: #f5a623; /* sun/sunset background */
    --CreamOffWhite: #f5f5e8; /* background - inner */
    --DarkTeal: #1e5a5f; /* Outside ring */
}

#top {
    height: 0.5rem;
    background-color: var(--TealTurquoise);
}

/* navigator */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding: 0.5rem;
    flex-wrap: wrap;

}
.nav-bar {
    display: flex;
   
}
.nav-bar li {
    color: var(--TealTurquoise);
    padding: 10px;
    list-style-type: none;
    cursor: pointer;
}

.nav-bar li a:hover {
    color: var(--OrangeCoral);
    font-weight: bold;
}
.nav-bar li a {
    text-decoration: none;
    font-size: 1.5rem;
}

.btn-order button {
    padding: 0.5rem;
    color: var(--CreamOffWhite);
    background-color: var(--GoldenYellowOrange);
    cursor: pointer;
    font-size: 1.2rem;
}


#bottom-nav {
    height: 0.5rem;
    background-color: var(--GoldenYellowOrange);
}

.nav-bar li .active {
    color: var(--OrangeCoral);
    font-weight: bold;
}

#tropical_ {
    font-size: 1.5rem;;
    color: var(--OrangeCoral);
}
#breeze_ {
    color: var(--DarkTeal);
}

/* Hero */

.hero {
    width: 100%;
    height: 85vh;
    background-image: url(/images/oxtail-thumbnail.png);
    background-repeat: no-repeat;
    background-position: right;
    object-fit: cover;
    position: relative;
}

/* Background image of hero area - a subtle, bright kitchen or table setting */
        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('images/hero_background.jpg'); 
            background-size: cover;
            background-position: center top;
            filter: blur(2px) opacity(60%); /* Match image's bright, soft feel */
        }

        /* Gradient mask for the hero, fading from white to transparent */
        .hero-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(120deg, #fff 20%, rgba(255,255,255,0) 50%);
        }


#bottom-hero {
    height: 0.5rem;
    background-color: var(--OrangeCoral);
}

.paragraph {
    position: absolute;
    top: 20%;
    left: 5%;
    font-size: 2rem;

}

#tropical__ {
    color: var(--OrangeCoral);
}
#breeze_ {
    color: var(--DarkTeal);
}
#caribbeanCuisine_ {
    color: var(--GoldenYellowOrange);
}

/* Story */
/* --- Our Story Section --- */
        .our-story {
            padding: 60px 40px 40px 40px;
            display: grid;
            grid-template-columns: 1.5fr 2fr 1fr;
            gap: 30px;
            align-items: start;
        }

        .polaroid-container {
            position: relative;
        }

        .our-story .polaroid {
            background-color: #fff;
            padding: 10px 10px 40px 10px;
            box-shadow: 2px 4px 10px rgba(0,0,0,0.2);
            transform: rotate(-3deg);
            z-index: 1;
        }

        .our-story .polaroid img {
            width: 100%;
            display: block;
        }

        .our-story-text {
            color: black;
        }

        .our-story h2 {
            font-size: 28px;
            font-weight: bold;
            text-transform: uppercase;
            margin-top: 0;
            color: var(--OrangeCoral); /* Match text color */
        }

        .our-story p {
            font-size: 16px;
            line-height: 1.5;
            margin-top: 15px;
        }

        .our-story .big-logo {
            text-align: center;
        }

        .our-story .big-logo img {
            width: 200px;
            border-radius: 50%;
        }

        /* marquee */

        #chefSp {
            font-size: 2rem;
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .marq {
            display: flex;
            background-color: var(--GoldenYellowOrange);
            opacity: 1;
        }

        .marqImg {
            width: 5rem;
            margin-left: 2rem;
            border-radius: 50%;
            padding: 10px;
        }


        /* --- Featured Menu Section --- */
        .featured-menu {
            padding: 40px;
            margin-top: -20px; /* Offset from Our Story */
        }

        .featured-menu h2 {
            text-align: center;
            font-size: 28px;
            font-weight: bold;
            text-transform: uppercase;
            color: #007788;
            margin-bottom: 30px;
            font-family: 'Times New Roman', serif;
        }

        .menu-border {
            border: 2px solid #007788;
            border-radius: 10px;
            padding: 20px;
            display: grid;
            grid-template-columns: 2fr 1.2fr; /* Layout with space for image */
            gap: 20px;
        }

        .menu-items-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }

        .menu-category {
            display: flex;
            flex-direction: column;
        }

        .menu-category-title {
            font-size: 18px;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 15px;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .category-icon {
            width: 30px;
            height: 30px;
        }

        /* Specific color rules for category titles from image */
        .mains-cat .menu-category-title { color: #000; }
        .sides-cat .menu-category-title { color: #333; }
        .drinks-cat .menu-category-title { color: #000; }

        .menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            font-size: 13px;
        }

        .menu-item img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 1px solid #ccc;
        }

        .menu-item-text div:first-child {
            font-weight: bold;
        }

        .menu-item-text div:last-child {
            color: #cc4400; /* Darker orange for price */
            font-weight: bold;
        }

        .featured-image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }









        /* --- Footer --- */
        footer {
            background-color: #007788;
            color: #fff;
            padding: 40px;
            font-size: 14px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            align-items: center;
            gap: 20px;
        }

        .footer-logo img {
            width: 90px;
            border-radius: 50%;
        }

        .footer-info {
            text-align: center;
            line-height: 1.6;
        }

        .footer-social {
            text-align: right;
            font-size: 24px;
        }

        .footer-social a {
            color: #fff;
            text-decoration: none;
            margin-left: 15px;
        }

        .copyright {
            text-align: center;
            margin-top: 30px;
            font-size: 11px;
            color: #ccc;
            background-color: var(--DarkTeal);
        }

        .google-map {
      width: 300px;
      height: 250px;
      
    }
        


/* marquee and slider */
    .carousel {
    margin: 100px auto;
    width: 100%;
    background-color: var(--GoldenYellowOrange);
    border: 5px solid white;
    display: flex;
    overflow-x: auto;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em; 
    animation: spin 10s infinite linear;
    padding-right: 1em;
}

.card {
    flex: 0 0 0.0.5em;
    height: 1em;
    padding: 1em;
    font-size: 3rem;
    border-radius: .2em;
    text-align: center;
    align-content: center;
}

@keyframes spin {
    from { translate: 0; }
    to { translate: -100% }
}