/* Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family: Arial, sans-serif; }
body { background:#ffffff; color:#333; line-height:1.6; }
a { text-decoration:none; color:#1e90ff; }
ul { list-style:none; }

/* Navigation */
nav {
    display:flex; justify-content:space-between; align-items:center;
    padding:20px 50px; background:#fff; border-bottom:2px solid #1e90ff; position:fixed; width:100%; top:0; z-index:1000;
}
nav .logo { font-size:1.8rem; font-weight:bold; color:#1e90ff; }
nav ul { display:flex; gap:30px; }
nav ul li a:hover { color:#007acc; }

/* Slideshow */
.slideshow { position:relative; height:90vh; overflow:hidden; }
.slideshow .slides img { position:absolute; width:100%; height:100%; object-fit:cover; opacity:0; transition:1s; }
.slideshow .slides img.active { opacity:1; }
.hero-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; color:#1e90ff; }
.hero-text h1 { font-size:3rem; margin-bottom:20px; }
.hero-text p { font-size:1.2rem; }

/* Features Section */
.features { padding:100px 50px; text-align:center; background:#e6f2ff; }
.features h2 { font-size:2.5rem; margin-bottom:40px; color:#1e90ff; }
.feature-cards { display:flex; justify-content:center; gap:30px; flex-wrap:wrap; }
.feature { background:#fff; padding:20px; border-radius:10px; width:250px; box-shadow:0 5px 15px rgba(0,0,0,0.1); }
.feature h3 { color:#1e90ff; margin-bottom:15px; }

/* About Home Section */
.about-home { padding:80px 50px; text-align:center; }
.about-home h2 { font-size:2.5rem; margin-bottom:20px; color:#1e90ff; }
.about-home p { max-width:800px; margin:0 auto 20px; line-height:1.7; }

/* Call to Action Section */
.call-to-action { padding:80px 50px; text-align:center; background:#cce6ff; }
.call-to-action h2 { font-size:2.5rem; margin-bottom:20px; color:#1e90ff; }
.call-to-action p { max-width:700px; margin:0 auto 30px; }
.call-to-action .btn { padding:15px 30px; background:#1e90ff; color:#fff; font-weight:bold; border-radius:5px; transition:0.3s; text-decoration:none; }
.call-to-action .btn:hover { background:#007acc; }

/* Info sections */
.info { padding:120px 50px 50px; text-align:center; }
.info h1 { font-size:2.5rem; margin-bottom:20px; color:#1e90ff; }
.info p { max-width:800px; margin:0 auto 20px; line-height:1.7; }

/* Order page */
.order-section { padding:120px 50px 50px; text-align:center; }
.order-section h1 { font-size:2.5rem; margin-bottom:40px; color:#1e90ff; }
.order-form { display:flex; justify-content:center; gap:10px; margin-bottom:30px; }
select, input[type=number] { padding:10px; border-radius:5px; border:1px solid #1e90ff; }
button { padding:10px 20px; border-radius:5px; border:none; background:#1e90ff; color:#fff; cursor:pointer; transition:0.3s; }
button:hover { background:#007acc; }
.order-summary { max-width:500px; margin:0 auto; text-align:left; }
.order-summary ul { margin-top:10px; }
.order-summary p { font-weight:bold; margin-top:10px; }

/* Footer */
footer { padding:20px; text-align:center; background:#fff; border-top:2px solid #1e90ff; color:#1e90ff; margin-top:50px; }

/* Team Section */
.team { padding:80px 50px; text-align:center; background:#f0f8ff; }
.team h2 { font-size:2.5rem; margin-bottom:40px; color:#1e90ff; }
.team-grid { display:flex; justify-content:center; gap:30px; flex-wrap:wrap; }
.team-member { background:#fff; padding:20px; border-radius:10px; width:200px; box-shadow:0 5px 15px rgba(0,0,0,0.1); text-align:center; }
.team-member img { width:100%; border-radius:50%; margin-bottom:10px; }
.team-member h3 { color:#1e90ff; margin-bottom:5px; }
.team-member p { font-size:0.9rem; color:#555; }

/* Item pictures grid */
.item-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-bottom:30px; }
.item { text-align:center; width:150px; }
.item img { width:100%; border-radius:10px; }
.item p { margin-top:10px; font-weight:bold; color:#1e90ff; }
/* Order Summary Box */
.order-summary-box {
    max-width:500px;
    margin:0 auto 50px;
    text-align:left;
    padding:20px;
    border:2px solid #1e90ff;
    border-radius:10px;
    background:#f0f8ff;
}
.order-summary-box h2 { text-align:center; color:#1e90ff; margin-bottom:15px; }
.order-summary-box p { font-weight:bold; font-size:1.2rem; margin-top:15px; text-align:right; }
.order-summary-box .submit-order {
    display:block;
    width:100%;
    padding:12px;
    margin-top:20px;
    background:#1e90ff;
    color:#fff;
    font-weight:bold;
    border:none;
    border-radius:5px;
    cursor:pointer;
    transition:0.3s;
}
.order-summary-box .submit-order:hover { background:#007acc; }

/* --- ORDER PAGE BLURRED BACKGROUND --- */
body.order-page {
    background: url('https://picsum.photos/1920/1080?blur=8') no-repeat center center/cover;
    backdrop-filter: blur(6px);
}

body.order-page::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    z-index: -1;
}

/* --- ORDER SECTION STYLING --- */
.order-section {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    padding: 30px;
    width: 80%;
    margin: auto;
    border-radius: 15px;
    color: white;
    text-align: center;
}

.order-form select,
.order-form input {
    padding: 8px;
    border-radius: 6px;
}

/* Item grid */
.item-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin: 30px auto;
    width: 90%;
}

.item-grid img {
    width: 100%;
    border-radius: 10px;
}

/* --- Order Summary Box --- */
.order-summary-box {
    margin-top: 25px;
    padding: 20px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    color: white;
}

/* Receipt-style layout */
.receipt-line {
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
}

.total-bold {
    font-weight: bold;
    font-size: 20px;
}

.submit-order {
    padding: 10px 20px;
    background: white;
    color: black;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    margin-top: 15px;
    font-size: 17px;
    transition: 0.3s ease;
}

.submit-order:hover {
    background: #ddd;
}

/* HORIZONTAL SLIDING WHEEL */
.item-wheel {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 20px;
    scroll-behavior: smooth;
    white-space: nowrap;
}

.item-wheel::-webkit-scrollbar {
    height: 10px;
}

.item-wheel::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.4);
    border-radius: 8px;
}

.item-wheel::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
}

.item {
    flex: 0 0 auto;
    text-align: center;
    color: white;
}

.item img {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    object-fit: cover;
}

/* Arrow buttons */
.scroll-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    padding: 12px 20px;
    font-size: 20px;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    margin: 10px;
    backdrop-filter: blur(4px);
}

.scroll-btn:hover {
    background: rgba(255,255,255,0.35);
}