/* 19Bakery Mini Elegant – Header & Hero 30% Image */

/* Reset & Base */
* {margin:0;padding:0;box-sizing:border-box;}
html {scroll-behavior:smooth;}
body {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;color:#333;background:#fff;line-height:1.6;}
a {text-decoration:none;color:#d35400;transition:color 0.3s;}
a:hover {color:#a04000;}
img {max-width:100%;height:auto;display:block;}
ul {list-style:none;}
.container {max-width:1200px;margin:auto;padding:0 15px;}

/* Header */
header {background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);position:sticky;top:0;z-index:1000;}
.header-container {display:flex;justify-content:space-between;align-items:center;padding:15px 0;}
.logo {font-size:1.5rem;font-weight:bold;color:#d35400;}
.main-nav ul {display:flex;gap:20px;}
.main-nav li.right {margin-left:auto;}
.main-nav a {color:#333;font-weight:500;position:relative;transition:color 0.3s;}
.main-nav a:hover {color:#d35400;}
.main-nav a::after {content:'';position:absolute;width:0;height:2px;bottom:-4px;left:0;background:#d35400;transition:width 0.3s;}
.main-nav a:hover::after {width:100%;}
.menu-toggle {display:none;flex-direction:column;gap:4px;cursor:pointer;}
.menu-toggle span {width:25px;height:3px;background:#333;transition:0.3s;}

/* Hero Section */
.hero {display:flex;align-items:center;justify-content:center;gap:30px;padding:40px 15px;background:#f5f5f5;text-align:center;flex-wrap:wrap;}
.hero-image-wrapper {flex:0 0 30%; max-width:30%;}
.hero-image-wrapper img {width:100%;height:auto;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.05);}
.hero-content {flex:1 1 65%; max-width:65%; text-align:left;}
.hero h1 {font-size:2.5rem;margin-bottom:15px;color:#333;animation:fadeInUp 1s ease;}
.hero p {font-size:1.1rem;color:#666;margin-bottom:20px;animation:fadeInUp 1s ease 0.2s;animation-fill-mode:both;}
.btn {display:inline-block;padding:10px 25px;border-radius:50px;font-weight:500;cursor:pointer;transition:all 0.3s;text-align:center;}
.btn-primary {background:#d35400;color:#fff;border:none;}
.btn-primary:hover {background:#a04000;transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,0.08);}
.btn-outline {background:transparent;border:2px solid #d35400;color:#d35400;}
.btn-outline:hover {background:#d35400;color:#fff;}

/* Sections & Cards */
section {padding:60px 0;}
.section-title {text-align:center;margin-bottom:40px;}
.section-title h2 {font-size:2rem;color:#333;margin-bottom:10px;}
.section-title p {font-size:1rem;color:#666;max-width:600px;margin:0 auto;}
.card {background:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.05);transition:transform 0.3s,box-shadow 0.3s;text-align:center;}
.card:hover {transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,0.08);}
.card h3 {font-size:1.25rem;margin-bottom:10px;color:#333;}
.card p {color:#666;line-height:1.5;}

/* Grid */
.grid {display:grid;gap:20px;}
.grid-3 {grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}

/* Forms */
.form-group {margin-bottom:15px;}
.form-group label {display:block;margin-bottom:5px;font-weight:500;}
.form-control {width:100%;padding:10px;border:1px solid #ddd;border-radius:5px;transition:border-color 0.3s;}
.form-control:focus {outline:none;border-color:#d35400;}

/* Footer */
footer {background:#222;color:#fff;padding:40px 15px;text-align:center;}
footer a {color:#bdc3c7;transition:color 0.3s;}
footer a:hover {color:#d35400;}

/* Animations */
@keyframes fadeInUp {from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* Responsive */
@media(max-width:992px){.hero h1{font-size:2.25rem;}.section-title h2{font-size:1.75rem;}}
@media(max-width:768px){.main-nav{display:none;position:absolute;top:100%;left:0;width:100%;background:#fff;padding:20px;box-shadow:0 5px 15px rgba(0,0,0,0.1);}.main-nav.active{display:block;}.main-nav ul{flex-direction:column;gap:15px;}.menu-toggle{display:flex;}.hero{flex-direction:column;}.hero-image-wrapper{max-width:80%;flex:0 0 80%;}.hero-content{max-width:100%;text-align:center;}}
@media(max-width:576px){.hero h1{font-size:1.75rem;}.hero p{font-size:1rem;}.btn{padding:8px 20px;font-size:0.9rem;}.section-title h2{font-size:1.5rem;}.grid-3{grid-template-columns:1fr;}}