/* ===========================
   HEADER
=========================== */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    border-bottom: 1px solid #eee;
    z-index: 1000;
    transition: all .35s ease;
}

.announcement-bar{
background:#A57421;
color:white;
overflow:hidden;
white-space:nowrap;
padding:10px 0;
position:relative;
}

.announcement-track{
display:inline-block;
white-space:nowrap;
animation:scrollAnnouncement 22s linear infinite;
font-size:.9rem;
letter-spacing:1px;
font-weight:500;
}

@keyframes scrollAnnouncement{

from{
transform:translateX(0);
}

to{
transform:translateX(-50%);
}

}

.header-container{
    max-width:1400px;
    margin:auto;
    padding:24px 60px;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
}

/* ===========================
   LEFT NAVIGATION
=========================== */

.left-nav{
    display:flex;
    align-items:center;
    gap:48px;
}

.left-nav a{
    color:#444;
    text-decoration:none;
    font-weight:500;
    letter-spacing:1.6px;
    text-transform:uppercase;
    font-size:.78rem;
    transition:.3s;
}

.left-nav a:hover{
    color:#A57421;
}

/* ===========================
   BRAND
=========================== */

.brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.brand img{
    width:65px;
}

.brand h1{
    font-family:"Thephir",serif;
    font-size:1.65rem;
    color:#494949;
    margin:0;
    font-weight:300;
    white-space:nowrap;
}

/* ===========================
   RIGHT ICONS
=========================== */

.right-icons{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:25px;
}

.right-icons a{
    color:#444;
    font-size:1.3rem;
    transition:.3s;
}

.right-icons a:hover{
    color:#A57421;
}

/* ===========================
   DROPDOWNS
=========================== */

.dropdown{
    position:relative;
}

.dropdown-content{

    position:absolute;

    top:calc(100% + 2px);
    left:0;

    min-width:270px;

    background:white;

    border-radius:0;

    padding:28px;

    box-shadow:0 6px 18px rgba(0,0,0,.06);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.35s;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.dropdown:hover .dropdown-content{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-content a{

    text-transform:none;

    letter-spacing:0;

    font-weight:500;

    display:block;

    padding:8px 0;

    font-size:1rem;

    color:#494949;

    transition:.25s;

}


.dropdown-content a:hover{

    color:#c08a2e;
    padding-left:8px;

}

.dropdown-heading{
    font-size:.75rem;
    font-weight:700;
    color:#c08a2e;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:18px;
}

/* ===========================
   MOBILE HEADER
=========================== */

.mobile-header{
    display:none;
}

/* ===========================
   DESKTOP HEADER
=========================== */

.desktop-header{
    display:block;
}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:768px){

/* ===========================
MOBILE HEADER
=========================== */

.desktop-header{
display:none;
}

.mobile-header{
display:block;
}

.mobile-header .announcement-bar{
padding:8px 0;
}

.mobile-header .announcement-track{
font-size:.75rem;
white-space:nowrap;
}

.mobile-header .header-container{
display:grid;
grid-template-columns:50px 1fr 70px;
align-items:center;
padding:16px 18px;
background:white;
border-bottom:1px solid #eee;
position:relative;
}

.menu-toggle{
display:flex;
align-items:center;
justify-content:flex-start;
background:none;
border:none;
color:#A57421;
font-size:1.6rem;
cursor:pointer;
padding:0;
margin:0;
}

.mobile-header .brand{
position:static;
transform:none;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
}

.mobile-header .brand img{
width:48px;
}

.mobile-header .brand h1{
font-family:"Thephir", serif;
font-size:1.2rem;
font-weight:300;
color:#494949;
margin:0;
}

.mobile-header .right-icons{
display:flex;
justify-content:flex-end;
align-items:center;
gap:18px;
}

.mobile-header .right-icons a{
color:#494949;
font-size:1.15rem;
}

/* ===========================
MOBILE MENU
=========================== */

#mobile-menu{

position:fixed;

top:0;
left:-100%;

width:75%;
max-width:320px;

height:100dvh;

overflow-y: auto;

background:white;

display:flex;
flex-direction:column;

padding:90px 35px 40px;

gap:22px;

transition:.35s ease;

box-shadow:-10px 0 30px rgba(0,0,0,.12);

z-index:3000;

font-family: "Poppins" , sans-serif;

font-size: 1.25rem;

font-weight: 500;

letter-spacing: 0.3px;

}

#mobile-menu.show{
left:0;
}

#mobile-menu a{
text-decoration:none;
color:#494949;
font-size:1.1rem;
font-weight:500;
}

#mobile-menu a:hover{
color:#A57421;
}

.close-menu{

position:absolute;

top:20px;
right:20px;

background:none;
border:none;

font-size:1.8rem;

color:#A57421;

cursor:pointer;
}


.mobile-menu-header{
text-align:center;
margin-bottom:25px;
}

.mobile-menu-header img{
width:80px;
margin-bottom:12px;
}

.mobile-menu-header h2{
font-family:"Thephir",serif;
color:#A57421;
font-size:2rem;
margin:0;
}

.mobile-menu-header p{
color:#666;
margin-top:10px;
line-height:1.6;
}

.menu-verse{
background:#F9f2e6;
border-radius:18px;
border: 1px solid #e8d7bb;
padding:18px;
text-align:center;
line-height:1.7;
color:#555;
margin-bottom:30px;
font-family: "Poppins" , sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}


.menu-verse strong {
    font-weight: 600;
}

.menu-links{
display:flex;
flex-direction:column;
gap:18px;
}

.menu-links a{
font-size:1.2rem;
}

.order-button{
display:block;
margin:35px auto;
background:#A57421;
color:white !important;
text-decoration:none;
padding:16px 28px;
width:85%;
max-width: 260px;
margin: 30px auto;
padding: 14px 20px;
text-align:center;
border-radius:40px;
font-weight:600;
}

.menu-socials{
display:flex;
flex-direction:column;
gap:15px;
margin-top:20px;
}

.menu-socials a{
text-decoration:none;
color:#666;
}

.menu-footer{
margin-top:auto;
text-align:center;
color:#999;
font-size:.9rem;
padding-top:40px;
font-family: "Poppins" , sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
}

.menu-tagline { 
    font-family: "Poppins" , sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
}


.menu-socials a,
.menu-email {
    font-family: "Poppins" , sans-serif;
    font-size: 1rem;
    font-weight: 500;
}

.menu-logo img {
    width:90px;
    height: auto;
}

.menu-logo h2 {
    font-size: 2.4rem;
    line-height: 1.1;
}


}