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

.container-header{
background:#ffffff;
box-shadow:0 4px 18px rgba(0,0,0,0.08);
display:flex;
align-items:center;
gap:30px;
padding:12px 30px;
position:relative;
}

.container-header::before{
display:none;
}


/* =================================
LOGO
================================= */

.navbar-brand{
display:flex;
align-items:center;
flex:0 0 auto;
}

.navbar-brand img{
height:70px;
width:auto;
}


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

.container-nav{
display:flex;
align-items:center;
}

.container-header .mod-menu ul{
display:flex;
align-items:center;
gap:14px;
margin:0;
padding:0;
list-style:none;
}


/* =================================
MENU BUTTONS
================================= */

.container-header .mod-menu a{
display:inline-block;
background:#c43a00;
color:#ffffff;
padding:10px 18px;
border-radius:6px;
font-weight:700;
font-size:14px;
text-decoration:none;
transition:all .2s ease;
white-space:nowrap;
}

.container-header .mod-menu a:hover{
background:#ff6b00;
}

.container-header .mod-menu li.current > a,
.container-header .mod-menu li.active > a{
background:#7a1c00;
}


/* =================================
HERO FIX
================================= */

.main-top .container,
.main-top .container-default{
max-width:100%;
background:transparent;
border:none;
box-shadow:none;
padding:0;
}


/* =================================
PAGE BACKGROUND
================================= */

body{
background:#ffffff;
}

.site-grid{
background:#ffffff;
}






/* =================================
FOOTER AREA (Cassiopeia wrapper)
================================= */

.container-footer{
background:#c43a00;
padding:0;
margin:0;
border:none;
box-shadow:none;
}

/* centre cassiopeia footer container */
.container-footer .grid-child{
max-width:1200px;
margin:0 auto;
padding:0;
}

/* your footer block */
.dunes-footer{
background:#1a1a1a;
width:100%;
}

/* remove gap above footer */
main{
margin-bottom:0;
padding-bottom:0;
}

.container-component{
margin-bottom:0;
padding-bottom:0;
}







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

@media (max-width:820px){

.container-header{
flex-direction:column;
align-items:center;
text-align:center;
}

.container-header .mod-menu ul{
flex-direction:column;
gap:8px;
}

.container-header .mod-menu a{
width:100%;
text-align:center;
}

.navbar-brand{
justify-content:center;
}

}