.header__wrapper {
display: flex;
align-items: center;
gap: 1rem;
}
.header_phone {
display: flex;
align-items: center;
gap: .5rem;
color: var(--gray-700);
font-weight: 600;
line-height: 1.5;
transition: color 0.5s;
}
.header_phone i {
font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
}
.header_phone:hover {
color: var(--gold-500);
}
.header_button {
padding-block: .75rem !important;
} header#site-header {
position: sticky;
top: 0;
z-index: 10;
background-color: #fff;
padding-block: 1.5rem;
}
nav#site-navigation {
margin-right: auto;
z-index: 10;
}
.site__logo {
max-width: 13rem;
display: flex;
height: 3.25rem;
object-fit: contain;
}
ul#primary-menu {
display: flex;
align-items: center;
position: relative;
gap: 1rem;
}
ul#primary-menu .menu-item {
position: relative;
justify-content: space-between;
}
ul#primary-menu .menu-item a {
display: flex;
align-items: center;
gap: .5rem;
font-size: .875rem;
line-height: 2;
color: var(--gray-700);
transition: .5s;
text-transform: capitalize;
}
ul#primary-menu .menu-item:hover > a {
color: var(--gold-500);
}
ul#primary-menu .sub-menu {
position: absolute;
background-color: #fff;
padding: .75rem .875rem .625rem;
display: flex;
flex-direction: column;
gap: .5rem;
min-width: max-content;
border-radius: .5rem;
box-shadow: 0 0 1rem #B3B3B380;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: .5s;
top: 100%;
left: 0;
transition-delay: .2s;
}
ul#primary-menu .menu-item:hover > .sub-menu {
opacity: 1;
visibility: visible;
overflow: visible;
}
ul#primary-menu .menu-item.menu-item-has-children {
display: flex;
align-items: center;
gap: .25rem;
}
ul#primary-menu .menu-item.menu-item-has-children::after {
content: '\e90d';
font-family: 'icomoon';
display: flex;
align-items: center;
justify-content: center;
font-size: 0.5rem;
color: var(--gold-500);
pointer-events: none;
}
ul#primary-menu .sub-menu .menu-item.menu-item-has-children::after {
transform: rotate(-90deg);
}
ul#primary-menu .sub-menu .sub-menu {
left: 100%;
}
ul#primary-menu .sub-menu .sub-menu {
left: calc(100% + .9375rem);
top: -.75rem;
z-index: 1;
box-shadow: .5rem 0 1rem #B3B3B380;
} #mask {
position: fixed;
z-index: 480;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
}
#menumobile {
position: fixed;
top: 0;
bottom: 0;
left: -300px;
width: 250px;
background-color: #fff;
z-index: 999999;
transition: all 0.5s;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3) !important;
overflow-y: auto;
}
#menumobile img {
max-width: 8rem;
}
#nomenumobile {
cursor: pointer;
transition: all 0.5s;
width: 25px;
height: 25px;
background: #BE202F;
font-size: 1rem;
text-align: center;
border-radius: 3px;
display: inline-flex;
color: #fff;
align-items: center;
justify-content: center;
color: #fff;
}
.tel-mm a {
background: var(--bg_footer);
color: #fff;
padding: 10px 15px;
display: block;
text-align: center;
}
.tel-mm a:before {
content: '';
width: 6px;
height: 6px;
margin-left: 10px;
background: var(--color2);
display: inline-block;
border-radius: 100%;
animation: pulse 2s infinite;
position: relative;
top: -1px;
}
.come-menumobile {
left: 0 !important;
}
.title-mm {
background-color: var(--color1);
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.title-mm img {
user-select: none;
}
.btn-mm {
padding: 0 20px;
margin-top: 20px;
}
.btn-mm a {
display: flex;
}
.title-sub-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
flex-flow: row-reverse;
}
.title-sub-head strong {
font-family: var(--bold_font);
}
.main-mm {
padding: 10px 20px;
}
.main-mm ul li a {
display: block;
padding: 8px 0;
position: relative;
width: 80%;
}
.main-mm ul li > .sub-menu {
position: fixed;
top: 0;
bottom: 0;
width: 250px;
background-color: #fff;
left: -250px;
transition: 0.3s;
z-index: 9;
padding: 20px;
}
.childer::before {
content: '\e90c';
font-family: 'icomoon';
font-size: 10px;
}
.childer {
position: absolute;
right: -25%;
cursor: pointer;
top: .5rem;
width: 24px;
height: 24px;
border-radius: 4px;
background-color: var(--gold-500);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
line-height: 1;
}
.come-submenu {
left: 0 !important;
}
.sub-closer::before {
content: '\e90b';
font-family: 'icomoon';
font-size: .6875rem;
}
.sub-closer {
cursor: pointer;
top: .5rem;
width: 24px;
height: 24px;
border-radius: 4px;
color: #fff;
background-color: #BE202F;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.title-subcome {
color: var(--gold-500);
position: relative;
top: 2px;
font-size: 1.125rem;
}
i.header-mm.icon-bar {
font-size: 1.25rem;
color: var(--gold-500);
cursor: pointer;
}
@media (max-width:1399.98px) {
.header__wrapper {
gap: .75rem;
}
}
@media (max-width:1199.98px) {
.header_button,
.header_phone,
.main-navigation {
display: none !important;
}
.site__logo {
width: 10rem;
}
.site__logo img {
width: 100%;
}
.header__wrapper {
justify-content: space-between;
}
i.header-mm.icon-bars {
font-size: 1.5rem;
color: var(--gold-500);
}
}
@media (max-width:575.98px) {
.site__logo {
width: 8rem;
}
}