/* Reset */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family: 'Arial', sans-serif; background:#f5f5f5; color:#333; scroll-behavior:smooth;}
a {text-decoration:none; color:inherit;}

/* Header */
header {background:#1e1e1e; color:#fff; padding:20px 10%; position:sticky; top:0; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,0.3);}
header nav {display:flex; justify-content:space-between; align-items:center;}
header nav .logo {font-size:24px; font-weight:bold;}
header nav ul {display:flex; list-style:none;}
header nav ul li {margin-left:30px;}
header nav ul li a {transition:0.3s;}
header nav ul li a:hover {color:#ffcc00;}
header nav .menu-toggle {display:none; cursor:pointer; font-size:24px;}

/* Hero Section */
.hero {display:flex; flex-direction:column; justify-content:center; align-items:center; height:80vh; text-align:center; background:linear-gradient(135deg,#ffcc00,#ff9900); color:#fff;}
.hero h1 {font-size:48px; margin-bottom:20px;}
.hero p {font-size:20px; margin-bottom:30px;}
.hero button {padding:15px 30px; font-size:18px; background:#fff; border:none; cursor:pointer; border-radius:10px; transition:0.3s;}
.hero button:hover {background:#ffe066;}

/* About Section */
.about {padding:80px 10%; text-align:center; background:#fff;}
.about h2 {font-size:36px; margin-bottom:20px;}
.about p {max-width:800px; margin:0 auto 40px; font-size:18px; line-height:1.6;}
.skills {display:flex; flex-wrap:wrap; justify-content:center; gap:20px;}
.skill {background:#ffcc00; padding:15px 25px; border-radius:10px; font-weight:bold; transition:0.3s; cursor:pointer;}
.skill:hover {background:#ff9900; color:#fff; transform:scale(1.1);}

/* Portfolio Section */
.portfolio {padding:80px 10%; background:#f9f9f9;}
.portfolio h2 {text-align:center; font-size:36px; margin-bottom:50px;}
.portfolio-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:30px;}
.portfolio-item {background:#fff; border-radius:10px; padding:20px; box-shadow:0 5px 15px rgba(0,0,0,0.1); transition:0.3s;}
.portfolio-item:hover {transform:translateY(-10px);}
.portfolio-item .placeholder {height:150px; background:linear-gradient(135deg,#ffcc00,#ff9900); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:bold; color:#fff; margin-bottom:15px;}
.portfolio-item .info h3 {font-size:20px; margin-bottom:10px;}
.portfolio-item .info p {font-size:16px; color:#666;}

/* Shop Section */
.shop {padding:80px 10%; background:#fff;}
.shop h2 {text-align:center; font-size:36px; margin-bottom:50px;}
.shop-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:30px;}
.shop-item {background:#f9f9f9; border-radius:10px; padding:20px; text-align:center; transition:0.3s; box-shadow:0 5px 15px rgba(0,0,0,0.1);}
.shop-item:hover {transform:translateY(-10px);}
.shop-item .icon {font-size:50px; margin-bottom:15px;}
.shop-item h3 {font-size:20px; margin-bottom:10px;}
.shop-item p {font-size:16px; margin-bottom:15px;}
.shop-item button {padding:10px 20px; font-size:16px; background:#ffcc00; border:none; cursor:pointer; border-radius:8px; transition:0.3s;}
.shop-item button:hover {background:#ff9900; color:#fff;}

/* Cart Panel */
.cart-panel {position:fixed; top:50%; right:-350px; transform:translateY(-50%); width:300px; background:#fff; padding:20px; border-radius:10px; box-shadow:0 5px 20px rgba(0,0,0,0.3); transition:0.3s; z-index:1001;}
.cart-panel.show {right:20px;}
.cart-panel h3 {margin-bottom:15px; text-align:center;}
.cart-panel ul {list-style:none; max-height:300px; overflow-y:auto; margin-bottom:10px;}
.cart-panel ul li {padding:8px; border-bottom:1px solid #ddd; display:flex; justify-content:space-between; align-items:center;}
.cart-panel ul li button {padding:5px 8px; background:#ff9900; color:#fff; border:none; cursor:pointer; border-radius:5px; transition:0.3s;}
.cart-panel ul li button:hover {background:#ffcc00; color:#333;}
.cart-panel button {padding:10px; width:100%; margin-bottom:5px; cursor:pointer; background:#ffcc00; border:none; border-radius:8px; transition:0.3s;}
.cart-panel button:hover {background:#ff9900; color:#fff;}

/* Cart Button */
.cart-button {position:fixed; top:20px; right:20px; background:#ffcc00; padding:15px 20px; border-radius:50px; cursor:pointer; z-index:1000; transition:0.3s;}
.cart-button:hover {background:#ff9900; color:#fff;}

/* Contact Section */
.contact {padding:80px 10%; background:#f9f9f9;}
.contact h2 {text-align:center; font-size:36px; margin-bottom:50px;}
.contact form {max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:20px;}
.contact input, .contact textarea {padding:15px; font-size:16px; border:1px solid #ccc; border-radius:10px;}
.contact button {padding:15px; font-size:18px; border:none; background:#ffcc00; cursor:pointer; border-radius:10px; transition:0.3s;}
.contact button:hover {background:#ff9900; color:#fff;}

/* Footer */
footer {background:#1e1e1e; color:#fff; text-align:center; padding:30px 10%; margin-top:50px;}

/* Media Queries */
@media(max-width:768px){
  .hero h1 {font-size:36px;}
  .hero p {font-size:18px;}
  header nav ul {flex-direction:column; background:#1e1e1e; position:absolute; top:70px; right:10%; display:none;}
  header nav ul.show {display:flex;}
  header nav ul li {margin:15px 0;}
  header nav .menu-toggle {display:block;}
}