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


.logo-image{
width:110px;
border-radius:75px;
margin-left:10px;
}

.nav-bar{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 20px;
margin-top:20px;
width:100%;
}

.cart-button{
background:none;
border:none;
cursor:pointer;
display:flex;
align-items:center;
gap:5px;
margin-right: 10px;
}

.cart-logo{

    width: 40px;
}

.first-section{
    width: 200px;
    display: flex;
    align-items: center;
}

.second-section{
    flex-grow: 1;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

.third-section{
display:flex;
justify-content:flex-end;
margin-right:20px;
}

.nav-menu{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 600;
color: white;              /* makes links white */
text-decoration: none;
white-space: nowrap;
padding: 10px 5px;
}

.nav-link:hover{
color:#ff4d4d;
}

.dropdown{
    position:absolute;
    background:white;
    list-style:none;
    padding:10px 0;
    margin-top:10px;
    width:180px;
    display:none;
    box-shadow:0 5px 12px rgba(0,0,0,0.2);
}

.dropdown.show{
display:block;
}

.dropdown li{
   text-decoration: none;
}

.dropdown a{
    text-decoration: none;
    color: rgb(44, 42, 42);
}

.header-links li:hover .dropdown{
display:block;
}

.header-links ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-links li{
    position: relative;
}


.header2{
    margin-top: 20px;
}

.dropdown:hover{
    display: block;
}

.dropdown a:hover  {
    color: rgb(207, 54, 54);
}
/* MOBILE HEADER */

.hamburger{
    display: none;
    color: white;
}

.nav-bar{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 20px;
margin-top:20px;
margin-bottom: 20px;
width:100%;
}

@media (max-width:768px){

.nav-bar{
display:grid;
grid-template-columns:40px 1fr 40px;
grid-template-rows:auto auto;
align-items:center;
}

/* hamburger */
.hamburger{
grid-column:1;
grid-row:1;
display:block;
font-size:22px;
cursor:pointer;
}

/* logo */
.first-section{
grid-column:2;
grid-row:1;
display:flex;
justify-content:center;
margin-bottom: 20px;
}

/* cart */
.third-section{
grid-column:3;
grid-row:1;
display:flex;
justify-content:flex-end;
}

/* search bar */
.search-section{
grid-column:1 / 4;
grid-row:2;
margin-top:20px;
width:100%;
}

.search-form{
width:100%;
}

.search-bar{
width:100%;
}

/* hide desktop menu */

.menu-bar{
display:none !important;
}

.logo-image{
    width: 80px;
}

}
.header2{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    border-radius: 40px;
    width: 400px;
    padding-right: 80px;
    padding-left: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 30px;
}

.header2 form {
    display: flex;
    align-items: center;
    width: 100%;
}


.Search-button{
height:48px;
border:none;
background:black;
color:white;
padding:0 28px;
border-radius:0 30px 30px 0;
cursor:pointer;
}

.container{
max-width:1500px;
margin:auto;
}

.search-section{
flex:1;
display:flex;
justify-content:center;
margin: 0 20px;
}

.search-section form{
display:flex;
align-items:center;
width:70%;
max-width:650px;
}

.menu-bar{
    background-color: black;   /* black background */
    width: 100%;
    padding: 35px 0;           /* makes the section taller */
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

.header-links li:hover .dropdown{
display:block;
}

.sub-menu{
display:block;
padding:8px 10px;
color:#333;
text-decoration:none;
font-size:14px;
}

.sub-menu:hover{
background:#f5f5f5;
color:#000;
}

.arrow{
    font-size:10px;
    margin-left:5px;
}

.announcement-bar{
width:100%;
background:#e60000;
color:white;
overflow:hidden;
padding:12px 0;
font-weight:600;
border-top: 2px solid #000;

}

.announcement-text{
display:inline-block;
white-space:nowrap;
padding-left:100%;
animation:scrollText 18s linear infinite;
}

@keyframes scrollText{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-100%);
}
}

.top-info-bar{
width:100%;
background:#111;
color:white;
font-size:14px;
}

.top-info-content{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
padding:8px 10px;
flex-wrap:wrap;
}

.top-info-content span{
border-right:1px solid rgba(255,255,255,0.3);
padding-right:15px;
margin-right:15px;
}

.top-info-content span:last-child{
border-right:none;
}

.cart-button{
background:none;
border:none;
font-size:24px;
cursor:pointer;
position:relative;
display:flex;
align-items:center;
padding:5px;
color: white;
}

.cart-button i{
font-size:18px;
}

.cart-badge{
position:absolute;
top:-8px;
right:-10px;
background:red;
color:white;
font-size:12px;
font-weight:bold;
padding:3px 7px;
border-radius:50%;
}

.search-form{
position:relative;
width:100%;
max-width:650px;
}

.search-bar{
width:100%;
height:45px;
border-radius:30px;
border:1px solid #ccc;
padding-left:20px;
padding-right:45px;
font-size:16px;
box-sizing:border-box;
}

.search-icon{
position:absolute;
right:5px;
top:50%;
transform:translateY(-50%);
background:black;
color:white;
border:none;
border-radius:50%;
width:35px;
height:35px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

.search-bar::placeholder{
color:#888;
}

.below-header-section{
background-color:#e60000;
height:70px;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:20px;
margin-top: 40px;
}

/* MOBILE MENU */

.mobile-menu{

position:fixed;

top:150px;
left:-280px;

width:280px;

/* FULL SCREEN HEIGHT */
height:calc(100vh - 150px);

background:#111;
color:white;

padding:20px;

transition:0.35s ease;

z-index:2001;

/* ALLOW SCROLLING */
overflow-y:auto;

/* smooth mobile scrolling */
-webkit-overflow-scrolling: touch;

scrollbar-width: none;

}
/* MENU OPEN */

.mobile-menu.open{
left:0;
}

/* MENU LINKS */

.mobile-menu ul{
list-style:none;
padding:0;
margin-top:80px;
}

.mobile-menu li{
margin-bottom:18px;
border-bottom:1px solid rgba(255,255,255,0.1);
padding-bottom:10px;
}

.mobile-menu a{
color:white;
text-decoration:none;
font-size:16px;
display:block;
}

.mobile-menu a:hover{
color:#ff4d4d;
}

/* MENU OVERLAY */

.menu-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

background:rgba(0,0,0,0.5);

opacity:0;
visibility:hidden;

transition:0.3s;

z-index:2000;

}

.menu-overlay.show{
opacity:1;
visibility:visible;
}

body.menu-open{
overflow: hidden;
height: 100vh;
}

.mobile-menu::-webkit-scrollbar{
display:none;
}


.mobile-submenu{
display:none;
margin-top:10px;
padding-left:15px;
}

.mobile-submenu li{
border:none;
margin-bottom:10px;
}

.mobile-submenu a{
font-size:15px;
color:#ccc;
}

.mobile-submenu a:hover{
color:white;
}

.mobile-toggle{
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
font-weight:600;
}

.mobile-dropdown.open .mobile-submenu{
display:block;
}

.nav-bar,
.menu-bar{
    position: sticky;
    top: 0;
    z-index: 3000;
    background: rgb(26, 24, 24);
}