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

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f8f9fa;
}

/* Navbar */
.navbar{
    background:#c57a24 !important;
}

.navbar-brand,
.nav-link{
    color:white !important;
    font-weight:bold;
}

.nav-link:hover{
    color:#ffe8b6 !important;
}

/* Hero Section */
.hero{
    background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    url("menu.png");
    background-size:cover;
    background-position:center;
    color:white;
    text-align:center;
    padding:100px 20px;
}

.hero img{
    width:180px;
    border-radius:50%;
    background:white;
    padding:8px;
    margin-bottom:20px;
}

.hero h1{
    font-size:50px;
    font-weight:bold;
}

.hero p{
    font-size:22px;
}

/* Section Title */
.section-title{
    color:#c57a24;
    text-align:center;
    margin-bottom:30px;
    font-weight:bold;
}

/* Cards */
.card{
    border:none;
    border-radius:15px;
    transition:.3s;
    box-shadow:0 5px 12px rgba(0,0,0,.15);
}

.card:hover{
    transform:translateY(-8px);
}

.card img{
    border-radius:15px 15px 0 0;
}

/* Buttons */
.btn-brew{
    background:#c57a24;
    color:white;
    font-weight:bold;
}

.btn-brew:hover{
    background:#8b5a20;
    color:white;
}

/* Contact Box */
.contact-box{
    background:white;
    padding:25px;
    border-radius:15px;
    box-shadow:0 5px 12px rgba(0,0,0,.15);
}

/* Footer */
footer{
    background:#c57a24;
    color:white;
    text-align:center;
    padding:18px;
    margin-top:60px;
}

/* Login / Signup */
.login-card{
    max-width:430px;
    margin:60px auto;
}

/* Order Form */
.order-card{
    max-width:850px;
    margin:40px auto;
}

/* Receipt */
.receipt-card{
    max-width:600px;
    margin:40px auto;
}

/* Feedback */
textarea{
    resize:none;
}

/* Images */
.menu-image{
    width:100%;
    border-radius:12px;
    margin-bottom:25px;
}

.logo{
    width:120px;
    border-radius:50%;
}

/* About Page */
.about-img{
    width:100%;
    border-radius:15px;
}

/* Service Cards */
.service-icon{
    font-size:45px;
    color:#c57a24;
}

/* Responsive */
@media(max-width:768px){

.hero{
    padding:60px 20px;
}

.hero h1{
    font-size:36px;
}

.hero p{
    font-size:18px;
}

.navbar-brand{
    font-size:20px;
}

}