/* Max width 767px */
@media only screen and (max-width: 767px) {
.ptb-100 {
padding-top: 50px;
padding-bottom: 50px;
}
.pt-100 {
padding-top: 50px;
}
.pb-100 {
padding-bottom: 50px;
}
.ptb-70 {
padding-top: 35px;
padding-bottom: 35px;
}
.pt-70 {
padding-top: 35px;
}
.pb-70 {
padding-bottom: 35px;
}
.ptb-40 {
padding-top: 30px;
padding-bottom: 30px;
}
.pt-40 {
padding-top: 30px;
}
.pb-40 {
padding-bottom: 30px;
}
.ptb-20 {
padding-top: 15px;
padding-bottom: 15px;
}
.pt-20 {
padding-top: 15px;
}
.pb-20 {
padding-bottom: 15px;
}
.default-btn {
font-size: 15px;
padding: 14px 26px;
}
.default-btn.icon {
padding: 14px 26px 14px 56px;
}
.default-btn.extra-btn {
margin: 15px auto;
}
.blog-area .default-btn.extra-btn {
margin: 30px auto 15px;
}
.btn-area {
margin-top: 15px;
margin-bottom: 15px;
}
.blog-list .btn-area {
margin-top: 30px;
margin-bottom: 15px;
}
.page .entry-content {
padding-top: 15px;
padding-bottom: 15px;
}
.page.elementor-page .entry-content {
padding-top: 0;
padding-bottom: 0;
}
.page .entry-content .page-content {
padding: 15px;
}
.page.elementor-page .entry-content .page-content {
padding: 0;
}
.section-title {
max-width: 100%;
margin: 15px auto 50px;
}
.container-block-fluid .section-title {
padding: 0 15px;
}
.section-title h2 {
font-size: 20px;
line-height: 30px;
}
.footer-area .footer-top .footer-title {
font-size: 16px;
}
.footer-area .footer-bottom .footer-social li {
margin: 0;
}
.footer-area .footer-bottom .footer-social li a i {
margin-bottom: 8px;
}
.page-title-area {
padding-top: 20px;
padding-bottom: 20px;
}
.page-title-content h2 {
font-size: 24px;
}
.page-title-content ul li {
font-size: 14px;
}
.page-error-content h3 {
font-size: 25px;
}
.single-blog-inner {
padding: 15px 15px 20px;
margin-bottom: 15px;
}
.single-blog-inner .thumb .blog-meta {
margin: 0 10px;
padding: 10px 10px;
}
.single-blog-inner .blog-meta li {
margin-right: 3px;
}
.single-blog-inner .blog-meta li i {
margin-right: 3px;
}
.single-blog-inner .details {
padding: 10px;
margin: 0 10px;
}
.single-blog-inner .details h4 {
font-size: 16px;
}
.single-blog-inner .details .read-more-btn {
height: 40px;
width: 40px;
line-height: 40px;
}
.pagination-area {
margin-top: 30px;
margin-bottom: 5px;
}
.pagination-area .page-numbers {
margin-bottom: 10px;
}
.blog-details-right-area .widget_block {
margin-bottom: 30px;
padding: 15px;
}
.blog-details-right-area .widget_block:last-child {
margin-bottom: 15px;
}
.blog-details-right-area.blog-left-sidebar {
padding: 0 15px;
margin-top: 15px;
}
.blog-details-right-area.blog-right-sidebar {
padding: 0 15px;
margin-top: 15px;
}
.blog-details-area .blog-details-right-area.blog-right-sidebar {
margin-top: 15px;
}
.blog-details-right-area .widget_block.widget_search .wp-block-search button {
padding: 16px;
}
.blog-details-right-area .blog-widget.resent-post-widget ul li {
height: auto;
}
.blog-details-right-area .blog-widget.resent-post-widget ul li a {
position: relative;
display: block;
padding-left: 0;
}
.blog-details-right-area .blog-widget.resent-post-widget ul li a img {
position: relative;
top: 0;
left: 0;
width: auto;
height: auto;
margin-bottom: 15px;
}
.blog-details-left-area {
padding: 0px;
}
.blog-details-left-area .blog-details-single-post .blog-details-img {
margin-bottom: 25px;
}
.blog-details-left-area .wp-block-quote {
padding: 20px;
}
.blog-details-left-area .wp-block-quote p {
font-size: 18px;
}
.blog-details-left-area .blog-details-single-post h3 {
font-size: 20px;
}
.blog-details-left-area .single-post-2 h3 {
font-size: 20px;
}
.blog-details-left-area .single-post-2 .blog-col {
padding: 0;
}
.blog-details-left-area .blog-sheare-tag {
text-align: center;
margin-bottom: 20px;
}
.blog-details-left-area .blog-details-sheare {
text-align: center;
}
.blog-details-left-area .blog-details-sheare .social-icon {
text-align: unset;
}
.blog-details-left-area .prev-next::before {
display: none;
}
.blog-details-left-area .prev-next .prev-post {
text-align: center;
}
.blog-details-left-area .prev-next .next-post {
float: unset;
text-align: center;
margin-bottom: 7px;
}
.blog-details-left-area .profile {
padding: 30px 20px;
text-align: center;
}
.blog-details-left-area .profile img {
position: unset;
margin-bottom: 15px;
}
.blog-details-left-area .comments-wrap .comment-respond {
padding: 20px;
margin: 30px 0 15px 0;
}
.blog-details-left-area .comments-wrap .title {
margin-top: 30px;
margin-bottom: 30px;
font-size: 20px;
line-height: 30px;
}
.blog-details-left-area .comments-wrap ul {
margin-bottom: 0px;
}
.blog-details-left-area .comments-wrap ul li {
padding: 20px;
margin-bottom: 30px;
}
.blog-details-left-area .comments-wrap ul li img {
position: unset;
margin-bottom: 15px;
margin-right: 15px;
}
.blog-details-left-area .comments-wrap ul li a {
position: unset;
}
.blog-details-left-area .comments-wrap ul li b {
margin-right: 10px;
}
.blog-details-left-area .comments-wrap ul li span {
margin-left: 0;
}
.blog-details-left-area .comments-wrap ul .ml-30 {
margin-left: 20px;
}
.blog-details-left-area .comment-area .comment-wrap .comment-title h2 {
font-size: 22px;
margin-top: -6px;
}
.comment-area .comment-wrap {
padding: 30px 10px 20px;
}
.comment-wrap .form-group {
padding: 10px;
}
.comment-wrap .default-btn {
margin: 10px 10px 0 10px;
}
.comment-area .comment-wrap .comment-title {
margin-bottom: 10px;
padding: 0 10px;
}
.comment-area .comment-wrap .comment-title h2 {
font-size: 25px;
}
.admin-bar .main-header .main-sticky {
top: 0px;
}
.admin-bar .main-header .mainmenu-nav {
top: 32px;
}
.page-error-content .search-form .search-submit {
margin-top: 10px;
}
}
/* Min width 768px to Max width 991px */
@media only screen and (min-width: 768px) and (max-width: 991.9999px) {
.ptb-100 {
padding-top: 50px;
padding-bottom: 50px;
}
.pt-100 {
padding-top: 50px;
}
.pb-100 {
padding-bottom: 50px;
}
.ptb-70 {
padding-top: 35px;
padding-bottom: 35px;
}
.pt-70 {
padding-top: 35px;
}
.pb-70 {
padding-bottom: 35px;
}
.page .entry-content {
padding-top: 20px;
padding-bottom: 20px;
}
.page.elementor-page .entry-content {
padding-top: 0;
padding-bottom: 0;
}
.page .entry-content .page-content {
padding: 20px;
}
.page.elementor-page .entry-content .page-content {
padding: 0;
}
.section-title h2 {
font-size: 28px;
}
.footer-area .footer-top .footer-title {
font-size: 18px;
}
.page-title-area {
padding-top: 80px;
padding-bottom: 80px;
}
.page-title-content h2 {
font-size: 35px;
}
.page-title-content ul li {
font-size: 15px;
}
.single-blog-inner .thumb .blog-meta {
margin: 0 25px;
padding: 10px 15px;
}
.single-blog-inner .details {
margin: 0 25px;
padding: 15px;
}
.single-blog-inner .details h4 {
font-size: 17px;
}
.pagination-area {
margin-bottom: 10px;
margin-top: 30px;
}
.pagination-area .page-numbers {
margin-bottom: 10px;
}
.blog-details-right-area.blog-left-sidebar {
margin-bottom: 20px;
}
.blog-details-right-area.blog-right-sidebar {
margin-top: 20px;
}
.go-top.active {
top: 82.5%;
}
.admin-bar .main-header .main-sticky {
top: 46px;
}
.admin-bar .main-header .mainmenu-nav {
top: 46px;
}
}
/* Max width 991px */
@media only screen and (max-width: 991.9999px) {
.pt-30 {
padding-top: 30px;
}
.pt-30:first-child {
padding-top: 0;
}
.footer-bottom .copyright {
padding-bottom: 30px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
.default-btn.icon {
font-size: 18px;
}
}
/* Min width 992px to Max width 1199px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.section-title h2 {
font-size: 35px;
}
.default-btn.icon {
padding: 16px 20px 16px 50px;
}
.default-btn.icon i {
left: 20px;
}
.main-header .header-navbar .header-logo {
flex: 0 0 auto;
max-width: none;
}
.main-header .header-navbar .header-logo img {
display: block;
width: 215px;
max-width: 100%;
height: auto;
}
.main-header.header-style-1 .mainmenu > li,
.mainmenu > li {
margin: 0 7px;
}
.main-header.header-style-1 .mainmenu li:first-child,
.mainmenu li:first-child {
margin-left: 0;
}
.mainmenu > li > a {
font-size: 17px;
}
.mainmenu > .menu-item-has-children > a {
margin-right: 14px;
}
.mainmenu > .menu-item-has-children > a::after {
right: -15px;
font-size: 17px;
}
.mainmenu i {
margin-right: 6px;
font-size: 22px;
}
.footer-area .footer-top .footer-title {
font-size: 19px;
}
.footer-area .footer-top .address-widget li {
padding: 0px 0px 20px 35px;
}
.footer-area .footer-top .desc.time {
font-size: 14.5px;
}
.single-blog-inner .thumb .blog-meta {
margin: 0 15px;
padding: 10px 15px;
}
.single-blog-inner .blog-meta li {
margin-right: 8px;
}
.single-blog-inner .details {
padding: 15px;
margin: 0 15px;
}
.single-blog-inner .details h4 {
font-size: 18px;
}
.blog-details-right-area .blog-widget {
padding: 20px;
}
.blog-details-right-area .blog-widget.resent-post-widget ul li a {
padding-left: 100px;
}
.blog-details-right-area .blog-widget.resent-post-widget ul li a img {
width: 90px;
}
.go-top.active {
top: 77.8%;
}
}
/* Min width 992px */
@media only screen and (min-width: 992px) {
.pl-50 {
padding-left: 50px;
}
.footer-area .footer-top .widget_nav_menu {
padding-left: 50px;
}
}
/* Preserve original go-top positioning for 1200–1320px. */
@media only screen and (min-width: 1200px) and (max-width: 1320px) {
.go-top.active {
top: 85.2%;
}
}
/* ========================================================================
ZUMI MODERN NAVIGATION — RESPONSIVE RULES
Breakpoint contract: desktop navigation >= 992px; off-canvas navigation < 992px.
======================================================================== */
/* Desktop width management: fluid values instead of stacked one-off fixes. */
@media only screen and (min-width: 992px) {
.main-header .header-navbar {
min-height: clamp(72px, 5.2vw, 84px) !important;
gap: clamp(5px, .8vw, 16px) !important;
}
.main-header .header-navbar .header-logo {
flex-basis: clamp(164px, 14.8vw, 268px) !important;
width: clamp(164px, 14.8vw, 268px) !important;
max-width: 268px !important;
}
.main-header .mainmenu > li > a {
min-height: 44px !important;
padding-left: clamp(5px, .52vw, 10px) !important;
padding-right: clamp(5px, .52vw, 10px) !important;
font-size: clamp(13px, .92vw, 16px) !important;
}
.main-header .mainmenu > .menu-item-has-children > a {
padding-right: clamp(21px, 1.55vw, 27px) !important;
}
.main-header .mainmenu > .menu-item-has-children > a::after {
right: clamp(7px, .62vw, 11px) !important;
}
.main-header .header-action > ul {
gap: clamp(6px, .65vw, 10px) !important;
}
.main-header .header-action .my_switcher {
height: clamp(40px, 2.7vw, 44px) !important;
min-width: clamp(40px, 2.7vw, 44px) !important;
padding-left: clamp(8px, .65vw, 11px) !important;
padding-right: clamp(8px, .65vw, 11px) !important;
border-radius: 11px !important;
font-size: clamp(13px, .82vw, 15px) !important;
}
.main-header .header-action .header-btn .main-btn,
.main-header .header-action .header-btn .default-btn {
min-height: clamp(42px, 2.9vw, 46px) !important;
padding: clamp(11px, .8vw, 13px) clamp(12px, 1vw, 18px) !important;
border-radius: 11px !important;
font-size: clamp(13px, .86vw, 15px) !important;
}
.main-header .header-action .header-btn .main-btn.icon,
.main-header .header-action .header-btn .default-btn.icon {
padding-left: clamp(39px, 2.75vw, 46px) !important;
}
.main-header .header-action .header-btn .main-btn.icon i,
.main-header .header-action .header-btn .default-btn.icon i {
left: clamp(13px, 1vw, 17px) !important;
font-size: clamp(17px, 1.1vw, 19px) !important;
}
.mobile-nav-header {
display: none !important;
}
.main-header .mainmenu-nav {
position: static !important;
width: auto !important;
max-width: none !important;
padding: 0 !important;
background: transparent !important;
visibility: visible !important;
transform: none !important;
}
.main-header .mainmenu-nav .mainmenu {
overflow: visible !important;
}
}
/* Tight desktop: preserve a real desktop navigation without horizontal overflow. */
@media only screen and (min-width: 992px) and (max-width: 1099.9999px) {
.main-header .main-mainmenu > .container,
.main-header .main-mainmenu > .container-fluid,
.main-header .main-mainmenu.main-sticky > .container,
.main-header .main-mainmenu.main-sticky > .container-fluid {
padding-left: 10px !important;
padding-right: 10px !important;
}
.main-header .header-navbar .header-logo {
flex-basis: 158px !important;
width: 158px !important;
}
.main-header .mainmenu > li > a {
padding-left: 4px !important;
padding-right: 4px !important;
font-size: 12.5px !important;
letter-spacing: -0.02em !important;
}
.main-header .mainmenu > .menu-item-has-children > a {
padding-right: 19px !important;
}
.main-header .mainmenu > .menu-item-has-children > a::after {
right: 6px !important;
width: 6px !important;
height: 6px !important;
}
.main-header .header-action > ul {
gap: 5px !important;
}
.main-header .header-action .my_switcher {
min-width: 38px !important;
height: 40px !important;
padding-left: 7px !important;
padding-right: 7px !important;
font-size: 12px !important;
}
.main-header .header-action .header-btn .main-btn,
.main-header .header-action .header-btn .default-btn {
min-height: 40px !important;
padding: 10px 10px !important;
font-size: 12.5px !important;
}
.main-header .header-action .header-btn .main-btn.icon,
.main-header .header-action .header-btn .default-btn.icon {
padding-left: 34px !important;
}
.main-header .header-action .header-btn .main-btn.icon i,
.main-header .header-action .header-btn .default-btn.icon i {
left: 10px !important;
font-size: 16px !important;
}
}
/* Comfortable desktop. */
@media only screen and (min-width: 1280px) {
.main-header .mainmenu > li > a {
padding-left: 11px !important;
padding-right: 11px !important;
}
.main-header .mainmenu > .menu-item-has-children > a {
padding-right: 28px !important;
}
}
@media only screen and (min-width: 1600px) {
.main-header .main-mainmenu > .container,
.main-header .main-mainmenu > .container-fluid,
.main-header .main-mainmenu.main-sticky > .container,
.main-header .main-mainmenu.main-sticky > .container-fluid {
padding-left: 48px !important;
padding-right: 48px !important;
}
.main-header .header-navbar .header-logo {
flex-basis: 286px !important;
width: 286px !important;
max-width: 286px !important;
}
.main-header .mainmenu > li > a {
font-size: 16.5px !important;
padding-left: 13px !important;
padding-right: 13px !important;
}
.main-header .mainmenu > .menu-item-has-children > a {
padding-right: 31px !important;
}
}
/* Tablet + phone header and off-canvas drawer. */
@media only screen and (max-width: 991.9999px) {
.main-header,
.main-header .main-mainmenu,
.main-header .main-mainmenu.main-sticky,
.main-header .main-mainmenu > .container,
.main-header .main-mainmenu > .container-fluid,
.main-header .main-mainmenu.main-sticky > .container,
.main-header .main-mainmenu.main-sticky > .container-fluid {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
}
.main-header .main-mainmenu,
.main-header .main-mainmenu.main-sticky {
padding: 0 !important;
background: rgba(10, 13, 11, 0.975) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.main-header .main-mainmenu.main-sticky {
animation: none !important;
}
.main-header .main-mainmenu > .container,
.main-header .main-mainmenu > .container-fluid,
.main-header .main-mainmenu.main-sticky > .container,
.main-header .main-mainmenu.main-sticky > .container-fluid {
padding-left: clamp(14px, 3vw, 24px) !important;
padding-right: clamp(14px, 3vw, 24px) !important;
}
.main-header .header-navbar {
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 72px !important;
gap: 10px !important;
}
.main-header .header-navbar .header-logo {
flex: 0 1 clamp(178px, 24vw, 215px) !important;
width: clamp(178px, 24vw, 215px) !important;
min-width: 0 !important;
max-width: 215px !important;
}
.main-header .header-navbar .header-logo img,
.main-header .main-mainmenu.main-sticky .header-navbar .header-logo img {
width: 100% !important;
max-width: 100% !important;
max-height: 54px !important;
}
.main-header .header-navbar .header-main-nav,
.main-header.header-style-1 .header-main-nav {
flex: 0 0 auto !important;
min-width: 0 !important;
margin: 0 !important;
}
.main-header .header-navbar .header-action {
flex: 0 0 auto !important;
min-width: 0 !important;
margin-left: auto !important;
}
.main-header .header-action > ul {
flex-flow: row nowrap !important;
gap: 7px !important;
width: auto !important;
}
.main-header .header-action > ul > li {
margin: 0 !important;
}
.main-header .header-action .my_switcher {
min-width: 42px !important;
width: auto !important;
height: 42px !important;
margin: 0 !important;
padding: 0 9px !important;
border-radius: 11px !important;
font-size: 13px !important;
}
.main-header .header-action .header-btn {
display: block !important;
margin: 0 !important;
}
.main-header .header-action .header-btn .main-btn,
.main-header .header-action .header-btn .default-btn {
min-height: 42px !important;
margin: 0 !important;
padding: 11px 13px !important;
border-radius: 11px !important;
font-size: 13px !important;
}
.main-header .header-action .header-btn .main-btn.icon,
.main-header .header-action .header-btn .default-btn.icon {
padding-left: 38px !important;
}
.main-header .header-action .header-btn .main-btn.icon i,
.main-header .header-action .header-btn .default-btn.icon i {
left: 12px !important;
font-size: 17px !important;
}
.main-header .header-action .mobile-menu-btn {
display: block !important;
margin: 0 !important;
}
.main-header .header-action .mobile-menu-btn .btn-wrap {
width: 44px !important;
height: 44px !important;
padding: 0 !important;
border-radius: 11px !important;
}
/* Drawer */
.main-header .mainmenu-nav,
.main-header.header-style-1 .mainmenu-nav {
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 1150 !important;
display: flex !important;
flex-direction: column !important;
width: min(390px, 92vw) !important;
max-width: 92vw !important;
height: 100dvh !important;
padding: 18px !important;
overflow: hidden !important;
color: #F7F8F7 !important;
background: rgba(13, 17, 15, 0.985) !important;
border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
box-shadow: 22px 0 65px rgba(0, 0, 0, 0.34) !important;
-webkit-backdrop-filter: blur(20px) saturate(130%) !important;
backdrop-filter: blur(20px) saturate(130%) !important;
visibility: hidden !important;
opacity: 0 !important;
transform: translateX(-102%) !important;
transition: transform 280ms cubic-bezier(.2,.75,.3,1), opacity 180ms ease, visibility 280ms ease !important;
overscroll-behavior: contain;
}
.main-header .mainmenu-nav.show,
.main-header.header-style-1 .mainmenu-nav.show {
visibility: visible !important;
opacity: 1 !important;
transform: translateX(0) !important;
}
.main-header .mobile-nav-header {
display: flex !important;
flex: 0 0 auto !important;
}
.main-header .mainmenu-nav .mainmenu {
display: block !important;
flex: 1 1 auto !important;
width: 100% !important;
height: auto !important;
margin: 14px 0 0 !important;
padding: 0 2px 28px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.20) transparent;
}
.main-header .mainmenu-nav .mainmenu > li {
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.main-header .mainmenu-nav .mainmenu > li:last-child {
border-bottom: 0 !important;
}
.main-header .mainmenu-nav .mainmenu > li > a {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
min-height: 58px !important;
height: auto !important;
margin: 0 !important;
padding: 14px 36px 14px 10px !important;
border-radius: 10px !important;
color: rgba(255, 255, 255, 0.94) !important;
background: transparent !important;
font-size: 16.5px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: -0.015em !important;
white-space: normal !important;
}
.main-header .mainmenu-nav .mainmenu > li > a::before {
display: none !important;
}
.main-header .mainmenu-nav .mainmenu > li > a:hover,
.main-header .mainmenu-nav .mainmenu > li.active > a,
.main-header .mainmenu-nav .mainmenu > li.current-menu-item > a,
.main-header .mainmenu-nav .mainmenu > li.current-menu-ancestor > a {
color: #FFFFFF !important;
background: rgba(255, 255, 255, 0.06) !important;
}
.main-header .mainmenu-nav .mainmenu > .menu-item-has-children > a::after {
display: block !important;
top: 50% !important;
right: 13px !important;
width: 8px !important;
height: 8px !important;
transform: translateY(-70%) rotate(45deg) !important;
}
.main-header .mainmenu-nav .mainmenu > .menu-item-has-children.menu-item-open > a::after {
transform: translateY(-30%) rotate(225deg) !important;
}
.main-header .mainmenu-nav .mainmenu .menu-item-has-children .main-submenu,
.main-header.header-style-1 .mainmenu-nav .mainmenu .menu-item-has-children .main-submenu,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children .main-submenu-menu {
position: static !important;
/* Keep this non-important so the theme's click/slideToggle JS can open it. */
display: none;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 0 10px !important;
padding: 6px !important;
color: #F7F8F7 !important;
background: rgba(255, 255, 255, 0.045) !important;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 12px !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
transition: none !important;
}
.main-header .mainmenu-nav .mainmenu .menu-item-has-children.menu-item-open > .main-submenu,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children.menu-item-open > .main-submenu-menu {
display: block !important;
}
.main-header .mainmenu-nav .mainmenu .main-submenu li {
margin: 0 !important;
opacity: 1 !important;
transform: none !important;
}
.main-header .mainmenu-nav .mainmenu .main-submenu li > a {
display: flex !important;
align-items: center !important;
gap: 9px !important;
min-height: 42px !important;
margin: 0 !important;
padding: 9px 10px !important;
border-radius: 9px !important;
color: rgba(255, 255, 255, 0.75) !important;
background: transparent !important;
font-size: 14.5px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
white-space: normal !important;
}
.main-header .mainmenu-nav .mainmenu .main-submenu li > a:hover,
.main-header .mainmenu-nav .mainmenu .main-submenu li.active > a,
.main-header .mainmenu-nav .mainmenu .main-submenu li.current-menu-item > a {
color: #FFFFFF !important;
background: rgba(232, 106, 36, 0.13) !important;
}
/* Dim and softly blur the page behind an open drawer. */
body:has(.main-header .mainmenu-nav.show) {
overflow: hidden !important;
}
body:has(.main-header .mainmenu-nav.show)::before {
content: "";
position: fixed;
inset: 0;
z-index: 1040;
background: rgba(0, 0, 0, 0.48);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
}
/* iPad/tablet transition: keep controls proportional immediately below 992px. */
@media only screen and (min-width: 768px) and (max-width: 991.9999px) {
.main-header .header-navbar .header-logo {
flex-basis: clamp(184px, 21vw, 210px) !important;
width: clamp(184px, 21vw, 210px) !important;
}
.main-header .header-action .header-btn .main-btn,
.main-header .header-action .header-btn .default-btn {
font-size: 13px !important;
}
}
/* Phones: move the real booking CTA into the open drawer and simplify the top row. */
@media only screen and (max-width: 767.9999px) {
.main-header .header-navbar {
min-height: 68px !important;
}
.main-header .header-navbar .header-logo {
flex: 0 1 clamp(155px, 42vw, 190px) !important;
width: clamp(155px, 42vw, 190px) !important;
max-width: 190px !important;
}
.main-header .header-action .my_switcher {
min-width: 40px !important;
height: 40px !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
.main-header .header-action .mobile-menu-btn .btn-wrap {
width: 42px !important;
height: 42px !important;
}
.main-header .mainmenu-nav .mainmenu {
padding-bottom: 104px !important;
}
.main-header .header-action .header-btn {
display: block !important;
position: fixed !important;
left: 18px !important;
bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
z-index: 1170 !important;
width: calc(min(390px, 92vw) - 36px) !important;
max-width: calc(92vw - 36px) !important;
margin: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(8px) !important;
transition: opacity 170ms ease, visibility 170ms ease, transform 190ms ease !important;
}
.main-header:has(.mainmenu-nav.show) .header-action .header-btn {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
transition-delay: 120ms !important;
}
.main-header .header-action .header-btn .main-btn,
.main-header .header-action .header-btn .default-btn {
width: 100% !important;
min-height: 50px !important;
padding: 14px 16px !important;
border-radius: 12px !important;
font-size: 15px !important;
box-shadow: 0 12px 28px rgba(232, 106, 36, 0.28) !important;
}
.main-header .header-action .header-btn .main-btn.icon,
.main-header .header-action .header-btn .default-btn.icon {
padding-left: 44px !important;
}
.main-header .header-action .header-btn .main-btn.icon i,
.main-header .header-action .header-btn .default-btn.icon i {
left: 15px !important;
font-size: 19px !important;
}
}
@media only screen and (max-width: 419.9999px) {
.main-header .main-mainmenu > .container,
.main-header .main-mainmenu > .container-fluid,
.main-header .main-mainmenu.main-sticky > .container,
.main-header .main-mainmenu.main-sticky > .container-fluid {
padding-left: 12px !important;
padding-right: 12px !important;
}
.main-header .header-navbar {
gap: 6px !important;
}
.main-header .header-navbar .header-logo {
flex-basis: clamp(138px, 41vw, 164px) !important;
width: clamp(138px, 41vw, 164px) !important;
}
.main-header .header-action > ul {
gap: 5px !important;
}
.main-header .header-action .my_switcher {
min-width: 38px !important;
height: 38px !important;
padding-left: 6px !important;
padding-right: 6px !important;
}
.main-header .header-action .mobile-menu-btn .btn-wrap {
width: 40px !important;
height: 40px !important;
}
.main-header .mainmenu-nav,
.main-header.header-style-1 .mainmenu-nav {
width: 94vw !important;
max-width: 94vw !important;
padding: 15px !important;
}
.main-header .header-action .header-btn {
left: 15px !important;
width: calc(94vw - 30px) !important;
max-width: calc(94vw - 30px) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.main-header .mainmenu-nav,
.main-header .header-action .header-btn {
transition-duration: 0.01ms !important;
}
}
/* ========================================================================
ZUMI MOBILE/TABLET PALETTE LOCK — LIGHT / PROFESSIONAL
Color-only correction; existing responsive dimensions are preserved.
======================================================================== */
@media only screen and (max-width: 991.9999px) {
/* Top bar remains white with black controls. */
.main-header .main-mainmenu,
.main-header .main-mainmenu:not(.main-sticky),
.main-header .main-mainmenu.main-sticky,
.main-header.header-style-1 .main-mainmenu,
.main-header.header-style-1 .main-mainmenu.main-sticky {
color: #444A46 !important;
background: rgba(255, 255, 255, 0.985) !important;
border-bottom-color: rgba(17, 24, 20, 0.09) !important;
}
.main-header .header-action .mobile-menu-btn .btn-wrap,
.main-header .header-action .sidemenu-btn .btn-wrap {
color: #111311 !important;
background: #F5F6F4 !important;
border-color: rgba(17, 24, 20, 0.10) !important;
}
/* Light off-canvas drawer. */
.main-header .mainmenu-nav,
.main-header.header-style-1 .mainmenu-nav {
color: #444A46 !important;
background: rgba(255, 255, 255, 0.992) !important;
border-right-color: rgba(17, 24, 20, 0.10) !important;
box-shadow: 22px 0 65px rgba(16, 22, 18, 0.20) !important;
}
.main-header .mainmenu-nav .mainmenu {
scrollbar-color: rgba(17, 24, 20, 0.20) transparent !important;
}
.main-header .mainmenu-nav .mainmenu > li {
border-bottom-color: rgba(17, 24, 20, 0.09) !important;
}
/* Menu text = charcoal. Leading icons = black. */
.main-header .mainmenu-nav .mainmenu > li > a {
color: #444A46 !important;
background: transparent !important;
}
.main-header .mainmenu-nav .mainmenu > li > a > i,
.main-header .mainmenu-nav .mainmenu > li > a > svg {
color: #000000 !important;
}
.main-header .mainmenu-nav .mainmenu > li > a > svg {
fill: currentColor;
stroke: currentColor;
}
.main-header .mainmenu-nav .mainmenu > li > a:hover,
.main-header .mainmenu-nav .mainmenu > li.active > a,
.main-header .mainmenu-nav .mainmenu > li.current-menu-item > a,
.main-header .mainmenu-nav .mainmenu > li.current-menu-ancestor > a {
color: #262B27 !important;
background: #F2F4F1 !important;
}
.main-header .mainmenu-nav .mainmenu > li > a:hover > i,
.main-header .mainmenu-nav .mainmenu > li.active > a > i,
.main-header .mainmenu-nav .mainmenu > li.current-menu-item > a > i,
.main-header .mainmenu-nav .mainmenu > li.current-menu-ancestor > a > i {
color: #000000 !important;
}
/* Dropdown arrows inherit a neutral dark gray instead of white. */
.main-header .mainmenu-nav .mainmenu > .menu-item-has-children > a::after {
color: #5D635F !important;
}
/* Mobile submenu panel. */
.main-header .mainmenu-nav .mainmenu .menu-item-has-children .main-submenu,
.main-header.header-style-1 .mainmenu-nav .mainmenu .menu-item-has-children .main-submenu,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children .main-submenu-menu {
color: #444A46 !important;
background: #F6F7F5 !important;
border-color: rgba(17, 24, 20, 0.09) !important;
}
.main-header .mainmenu-nav .mainmenu .main-submenu li > a {
color: #555B57 !important;
background: transparent !important;
}
.main-header .mainmenu-nav .mainmenu .main-submenu li > a > i,
.main-header .mainmenu-nav .mainmenu .main-submenu li > a > svg {
color: #000000 !important;
}
.main-header .mainmenu-nav .mainmenu .main-submenu li > a:hover,
.main-header .mainmenu-nav .mainmenu .main-submenu li.active > a,
.main-header .mainmenu-nav .mainmenu .main-submenu li.current-menu-item > a {
color: #272C28 !important;
background: rgba(232, 106, 36, 0.09) !important;
}
/* Drawer logo / close separator area. */
.main-header .mobile-nav-header {
border-bottom-color: rgba(17, 24, 20, 0.10) !important;
}
.main-header .mobile-nav-header .mobile-menu-close,
.main-header.header-style-1 .mobile-nav-header .mobile-menu-close {
color: #111311 !important;
background: #F3F4F2 !important;
border-color: rgba(17, 24, 20, 0.10) !important;
}
/* Language text is dark; flag/image remains untouched. */
.main-header .header-action .my_switcher,
.main-header .header-action .my_switcher a,
.main-header .header-action .my_switcher span,
.main-header .header-action .my_switcher [role="button"] {
color: #444A46 !important;
}
.main-header .header-action .my_switcher {
background: #F5F6F4 !important;
border-color: rgba(17, 24, 20, 0.10) !important;
}
/* Booking button is the one intentional white-text element. */
.main-header .header-action .header-btn .main-btn,
.main-header .header-action .header-btn .default-btn,
.main-header .header-action .header-btn .main-btn i,
.main-header .header-action .header-btn .default-btn i {
color: #FFFFFF !important;
}
}
/* ========================================================================
ZUMI MOBILE NAVIGATION INTERACTION FIX — FINAL
Keeps the approved spacing, fixes submenu clicks, CTA anchoring, type weight,
and gives every expandable row an explicit closed/open caret state.
======================================================================== */
@media only screen and (max-width: 991.9999px) {
/* Lighter navigation typography. */
.main-header .mainmenu-nav .mainmenu > li > a,
.main-header.header-style-1 .mainmenu-nav .mainmenu > li > a {
font-weight: 500 !important;
letter-spacing: -0.01em !important;
}
.main-header .mainmenu-nav .mainmenu .main-submenu li > a,
.main-header.header-style-1 .mainmenu-nav .mainmenu .main-submenu li > a {
font-weight: 450 !important;
}
/* Closed state: clear downward caret. Remove every old border-chevron part. */
.main-header .mainmenu-nav .mainmenu .menu-item-has-children > a::after,
.main-header.header-style-1 .mainmenu-nav .mainmenu .menu-item-has-children > a::after {
content: "▾" !important;
display: block !important;
position: absolute !important;
top: 50% !important;
right: 14px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
color: #707671 !important;
font-family: Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1 !important;
transform: translateY(-50%) !important;
transition: color 150ms ease !important;
}
/* Open state. Support the theme class, common alternatives and aria-expanded. */
.main-header .mainmenu-nav .mainmenu .menu-item-has-children.menu-item-open > a::after,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children.open > a::after,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children.submenu-open > a::after,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children > a[aria-expanded="true"]::after,
.main-header.header-style-1 .mainmenu-nav .mainmenu .menu-item-has-children.menu-item-open > a::after,
.main-header.header-style-1 .mainmenu-nav .mainmenu .menu-item-has-children.open > a::after,
.main-header.header-style-1 .mainmenu-nav .mainmenu .menu-item-has-children.submenu-open > a::after,
.main-header.header-style-1 .mainmenu-nav .mainmenu .menu-item-has-children > a[aria-expanded="true"]::after {
content: "▴" !important;
color: #252925 !important;
transform: translateY(-50%) !important;
}
/* If the existing theme JS opens a submenu by inline display style, reflect it
in the parent caret as well. Modern mobile browsers support :has(). */
.main-header .mainmenu-nav .mainmenu .menu-item-has-children:has(> .main-submenu[style*="display: block"]) > a::after,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children:has(> .main-submenu-menu[style*="display: block"]) > a::after {
content: "▴" !important;
color: #252925 !important;
}
/* These state selectors make expansion compatible with whichever state the
theme script uses; inline display:block from slideToggle remains allowed. */
.main-header .mainmenu-nav .mainmenu .menu-item-has-children.menu-item-open > .main-submenu,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children.menu-item-open > .main-submenu-menu,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children.open > .main-submenu,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children.open > .main-submenu-menu,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children.submenu-open > .main-submenu,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children.submenu-open > .main-submenu-menu,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children:has(> a[aria-expanded="true"]) > .main-submenu,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children:has(> a[aria-expanded="true"]) > .main-submenu-menu {
display: block !important;
}
}
/* Phones: make the floating CTA viewport-fixed instead of header-fixed. */
@media only screen and (max-width: 767.9999px) {
/* backdrop-filter/transform on an ancestor creates a containing block for a
fixed descendant. Disable that effect on the compact header so bottom: is
relative to the viewport, not the 68px header row. */
.main-header .main-mainmenu,
.main-header .main-mainmenu:not(.main-sticky),
.main-header .main-mainmenu.main-sticky,
.main-header.header-style-1 .main-mainmenu,
.main-header.header-style-1 .main-mainmenu.main-sticky {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
filter: none !important;
transform: none !important;
perspective: none !important;
contain: none !important;
animation: none !important;
}
.main-header .header-action .header-btn {
position: fixed !important;
top: auto !important;
right: auto !important;
bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* ========================================================================
ZUMI MOBILE NAVIGATION — VERTICAL ORANGE ITEM ACCENTS
Final visual override. No spacing or submenu interaction changes.
======================================================================== */
@media only screen and (max-width: 991.9999px) {
.main-header .mainmenu-nav .mainmenu > li > a,
.main-header.header-style-1 .mainmenu-nav .mainmenu > li > a {
position: relative !important;
}
.main-header .mainmenu-nav .mainmenu > li > a::before,
.main-header.header-style-1 .mainmenu-nav .mainmenu > li > a::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 50% !important;
bottom: auto !important;
left: 0 !important;
right: auto !important;
width: 3px !important;
height: 26px !important;
border-radius: 999px !important;
background: #E86A24 !important;
opacity: .38 !important;
transform: translateY(-50%) scaleY(.78) !important;
transform-origin: center !important;
transition: opacity 150ms ease, transform 150ms ease !important;
}
.main-header .mainmenu-nav .mainmenu > li > a:hover::before,
.main-header .mainmenu-nav .mainmenu > li.active > a::before,
.main-header .mainmenu-nav .mainmenu > li.current-menu-item > a::before,
.main-header .mainmenu-nav .mainmenu > li.current-menu-ancestor > a::before,
.main-header .mainmenu-nav .mainmenu > li.menu-item-open > a::before,
.main-header .mainmenu-nav .mainmenu > li.open > a::before,
.main-header .mainmenu-nav .mainmenu > li.submenu-open > a::before,
.main-header .mainmenu-nav .mainmenu > li:has(> a[aria-expanded="true"]) > a::before,
.main-header.header-style-1 .mainmenu-nav .mainmenu > li > a:hover::before,
.main-header.header-style-1 .mainmenu-nav .mainmenu > li.active > a::before,
.main-header.header-style-1 .mainmenu-nav .mainmenu > li.current-menu-item > a::before,
.main-header.header-style-1 .mainmenu-nav .mainmenu > li.current-menu-ancestor > a::before {
opacity: 1 !important;
transform: translateY(-50%) scaleY(1) !important;
}
/* Smaller matching rails inside expanded submenus. */
.main-header .mainmenu-nav .mainmenu .main-submenu li > a,
.main-header.header-style-1 .mainmenu-nav .mainmenu .main-submenu li > a {
position: relative !important;
}
.main-header .mainmenu-nav .mainmenu .main-submenu li > a::before,
.main-header.header-style-1 .mainmenu-nav .mainmenu .main-submenu li > a::before {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 3px !important;
width: 2px !important;
height: 18px !important;
border-radius: 999px !important;
background: #E86A24 !important;
opacity: .22 !important;
transform: translateY(-50%) scaleY(.75) !important;
transition: opacity 140ms ease, transform 140ms ease !important;
}
.main-header .mainmenu-nav .mainmenu .main-submenu li > a:hover::before,
.main-header .mainmenu-nav .mainmenu .main-submenu li.active > a::before,
.main-header .mainmenu-nav .mainmenu .main-submenu li.current-menu-item > a::before,
.main-header.header-style-1 .mainmenu-nav .mainmenu .main-submenu li > a:hover::before,
.main-header.header-style-1 .mainmenu-nav .mainmenu .main-submenu li.active > a::before,
.main-header.header-style-1 .mainmenu-nav .mainmenu .main-submenu li.current-menu-item > a::before {
opacity: 1 !important;
transform: translateY(-50%) scaleY(1) !important;
}
}
/* ========================================================================
ZUMI MOBILE LOGO — SLIGHT SIZE INCREASE
Final override. Keeps existing header controls and spacing unchanged.
======================================================================== */
@media only screen and (max-width: 767.9999px) {
.main-header .header-navbar .header-logo {
flex: 0 1 clamp(168px, 46vw, 205px) !important;
flex-basis: clamp(168px, 46vw, 205px) !important;
width: clamp(168px, 46vw, 205px) !important;
max-width: 205px !important;
}
}
@media only screen and (max-width: 419.9999px) {
.main-header .header-navbar .header-logo {
flex: 0 1 clamp(154px, 44vw, 182px) !important;
flex-basis: clamp(154px, 44vw, 182px) !important;
width: clamp(154px, 44vw, 182px) !important;
max-width: 182px !important;
}
}
/* ========================================================================
ZUMI NAVIGATION — CUSTOM SVG ICON SYSTEM
========================================================================
Menu label examples:
Home
Vehicles
Insurance
======================================================================== */
/* ------------------------------------------------------------------------
BASE ICON RESET
Prevent the theme's global img rules from affecting navigation SVGs.
------------------------------------------------------------------------ */
.main-header .zumi-nav-icon {
display: block !important;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
flex: 0 0 22px !important;
object-fit: contain !important;
object-position: center !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
vertical-align: middle !important;
}
/* ------------------------------------------------------------------------
TOP-LEVEL NAVIGATION ALIGNMENT
Important:
Do NOT add margin-right to the SVG.
The flex gap controls icon -> text distance.
------------------------------------------------------------------------ */
.main-header .mainmenu > li > a {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
column-gap: 10px !important;
box-sizing: border-box !important;
}
/* Custom SVG */
.main-header .mainmenu > li > a > .zumi-nav-icon {
margin: 0 !important;
align-self: center !important;
}
/* Font Awesome / Boxicons still used elsewhere */
.main-header .mainmenu > li > a > i {
margin: 0 !important;
flex-shrink: 0 !important;
}
/* ------------------------------------------------------------------------
DESKTOP — 992PX+
------------------------------------------------------------------------ */
@media only screen and (min-width: 992px) {
/*
* Slight inset keeps the icons from visually hugging the left side
* of each navigation item.
*/
.main-header .mainmenu > li > a {
column-gap: 9px !important;
}
.main-header .mainmenu > li > a > .zumi-nav-icon {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
flex: 0 0 22px !important;
margin: 0 !important;
}
}
/* ------------------------------------------------------------------------
MOBILE + TABLET — 991PX AND BELOW
------------------------------------------------------------------------ */
@media only screen and (max-width: 991.9999px) {
/*
* Move the actual icon + text content slightly farther right.
*
* Your orange vertical accent can remain at the left edge while the
* icon/text gets some breathing room.
*/
.main-header .mainmenu > li > a {
padding-left: 18px !important;
padding-right: 16px !important;
column-gap: 12px !important;
align-items: center !important;
}
.main-header .mainmenu > li > a > .zumi-nav-icon {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
max-width: 24px !important;
max-height: 24px !important;
flex: 0 0 24px !important;
margin: 0 !important;
}
/*
* Make existing font icons occupy the same visual box as SVG icons.
* This keeps Home / Vehicles / Insurance / Info & Help aligned.
*/
.main-header .mainmenu > li > a > i {
display: inline-flex !important;
width: 24px !important;
min-width: 24px !important;
height: 24px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
font-size: 22px !important;
line-height: 1 !important;
flex: 0 0 24px !important;
}
}
/* ------------------------------------------------------------------------
VERY SMALL PHONES
------------------------------------------------------------------------ */
@media only screen and (max-width: 479px) {
.main-header .mainmenu > li > a {
padding-left: 20px !important;
padding-right: 14px !important;
column-gap: 11px !important;
}
.main-header .mainmenu > li > a > .zumi-nav-icon {
width: 23px !important;
height: 23px !important;
min-width: 23px !important;
min-height: 23px !important;
max-width: 23px !important;
max-height: 23px !important;
flex: 0 0 23px !important;
margin: 0 !important;
}
.main-header .mainmenu > li > a > i {
width: 23px !important;
min-width: 23px !important;
height: 23px !important;
flex: 0 0 23px !important;
font-size: 21px !important;
}
}
/* ------------------------------------------------------------------------
PREVENT THEME IMAGE HOVER / TRANSFORM EFFECTS
------------------------------------------------------------------------ */
.main-header .mainmenu .zumi-nav-icon,
.main-header .mainmenu a:hover .zumi-nav-icon,
.main-header .mainmenu li.active > a .zumi-nav-icon {
transform: none !important;
scale: none !important;
opacity: 1 !important;
filter: none !important;
transition:
opacity 0.2s ease,
transform 0.2s ease !important;
}
/* ------------------------------------------------------------------------
SVG + LABEL VERTICAL CONSISTENCY
------------------------------------------------------------------------ */
.main-header .mainmenu > li > a > .zumi-nav-icon,
.main-header .mainmenu > li > a > i {
position: relative !important;
top: 0 !important;
left: 0 !important;
}
/* ------------------------------------------------------------------------
SUBMENU ITEMS
Don't force top-level icon spacing onto submenu links.
------------------------------------------------------------------------ */
.main-header .mainmenu .submenu li > a,
.main-header .mainmenu ul.sub-menu li > a {
column-gap: 8px !important;
}
/* ========================================================================
END ZUMI CUSTOM SVG ICON SYSTEM
======================================================================== */
/* ========================================================================
ZUMI FINAL ICON + CARET OVERRIDES — 2026-09-11
- Larger dropdown carets
- Plan Your Adventure SVG icon
- Scroll-to-top SVG icon
- Mobile drawer close SVG icon
======================================================================== */
/* ------------------------------------------------------------------------
PLAN YOUR ADVENTURE — replace the legacy icon-font glyph with the SVG.
The SVG is used as a mask so the button icon always remains white.
------------------------------------------------------------------------ */
.main-header .header-action .header-btn .main-btn.icon,
.main-header .header-action .header-btn .default-btn.icon {
position: relative !important;
}
.main-header .header-action .header-btn .main-btn.icon > i,
.main-header .header-action .header-btn .default-btn.icon > i,
.main-header .header-action .header-btn .main-btn > i,
.main-header .header-action .header-btn .default-btn > i {
display: block !important;
position: absolute !important;
top: 50% !important;
left: 17px !important;
width: 21px !important;
min-width: 21px !important;
height: 21px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
background-color: #FFFFFF !important;
background-image: none !important;
-webkit-mask-image: url("https://zumirentals.com/wp-content/uploads/2026/09/plan-adventure-icon.svg") !important;
mask-image: url("https://zumirentals.com/wp-content/uploads/2026/09/plan-adventure-icon.svg") !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
transform: translateY(-50%) !important;
}
.main-header .header-action .header-btn .main-btn > i::before,
.main-header .header-action .header-btn .default-btn > i::before,
.main-header .header-action .header-btn .main-btn > i::after,
.main-header .header-action .header-btn .default-btn > i::after {
content: none !important;
display: none !important;
}
/* ------------------------------------------------------------------------
SCROLL TO TOP — replace bx-chevrons-up / legacy icon with custom SVG.
Uses a mask so the icon stays white on the orange circular button.
------------------------------------------------------------------------ */
.go-top i,
.zumi-go-top.go-top i,
.go-top.zumi-go-top i {
display: block !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
width: 22px !important;
min-width: 22px !important;
height: 22px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
background-color: #FFFFFF !important;
background-image: none !important;
-webkit-mask-image: url("https://zumirentals.com/wp-content/uploads/2026/09/up-chevron-scroll.svg") !important;
mask-image: url("https://zumirentals.com/wp-content/uploads/2026/09/up-chevron-scroll.svg") !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
-webkit-transform: translate(-50%, -50%) !important;
transform: translate(-50%, -50%) !important;
}
.go-top i::before,
.zumi-go-top.go-top i::before,
.go-top.zumi-go-top i::before,
.go-top i::after,
.zumi-go-top.go-top i::after,
.go-top.zumi-go-top i::after {
content: none !important;
display: none !important;
}
/* ------------------------------------------------------------------------
MOBILE DRAWER CLOSE — custom SVG replaces the old X/icon-font glyph.
Put the SVG directly on the close control so this also works when the
theme's original close markup is only text or an element.
------------------------------------------------------------------------ */
.mobile-nav-header .mobile-menu-close,
.main-header.header-style-1 .mobile-nav-header .mobile-menu-close {
position: relative !important;
font-size: 0 !important;
color: transparent !important;
overflow: hidden !important;
}
.mobile-nav-header .mobile-menu-close > *,
.main-header.header-style-1 .mobile-nav-header .mobile-menu-close > * {
visibility: hidden !important;
opacity: 0 !important;
}
.mobile-nav-header .mobile-menu-close::before,
.main-header.header-style-1 .mobile-nav-header .mobile-menu-close::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 19px !important;
height: 19px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: #111311 !important;
-webkit-mask-image: url("https://zumirentals.com/wp-content/uploads/2026/09/close-icon-cancel.svg") !important;
mask-image: url("https://zumirentals.com/wp-content/uploads/2026/09/close-icon-cancel.svg") !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
transform: translate(-50%, -50%) !important;
opacity: 1 !important;
visibility: visible !important;
}
.mobile-nav-header .mobile-menu-close::after,
.main-header.header-style-1 .mobile-nav-header .mobile-menu-close::after {
content: none !important;
display: none !important;
}
/* ------------------------------------------------------------------------
DESKTOP DROPDOWN CARETS — intentionally larger and easier to read.
------------------------------------------------------------------------ */
@media only screen and (min-width: 992px) {
.main-header .mainmenu > .menu-item-has-children > a::after,
.main-header.header-style-1 .mainmenu > .menu-item-has-children > a::after {
content: "▾" !important;
display: block !important;
top: 50% !important;
right: 7px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
color: #666D68 !important;
font-family: Arial, sans-serif !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1 !important;
transform: translateY(-52%) !important;
}
.main-header .mainmenu > .menu-item-has-children:hover > a::after,
.main-header .mainmenu > .menu-item-has-children:focus-within > a::after,
.main-header.header-style-1 .mainmenu > .menu-item-has-children:hover > a::after,
.main-header.header-style-1 .mainmenu > .menu-item-has-children:focus-within > a::after {
content: "▴" !important;
color: #252925 !important;
transform: translateY(-48%) !important;
}
}
/* ------------------------------------------------------------------------
TABLET / MOBILE DROPDOWN CARETS — larger closed and open states.
------------------------------------------------------------------------ */
@media only screen and (max-width: 991.9999px) {
.main-header .mainmenu-nav .mainmenu .menu-item-has-children > a::after,
.main-header.header-style-1 .mainmenu-nav .mainmenu .menu-item-has-children > a::after {
content: "▾" !important;
right: 13px !important;
width: auto !important;
height: auto !important;
border: 0 !important;
font-family: Arial, sans-serif !important;
font-size: 19px !important;
font-weight: 700 !important;
line-height: 1 !important;
transform: translateY(-52%) !important;
}
.main-header .mainmenu-nav .mainmenu .menu-item-has-children.menu-item-open > a::after,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children.open > a::after,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children.submenu-open > a::after,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children > a[aria-expanded="true"]::after,
.main-header.header-style-1 .mainmenu-nav .mainmenu .menu-item-has-children.menu-item-open > a::after,
.main-header.header-style-1 .mainmenu-nav .mainmenu .menu-item-has-children.open > a::after,
.main-header.header-style-1 .mainmenu-nav .mainmenu .menu-item-has-children.submenu-open > a::after,
.main-header.header-style-1 .mainmenu-nav .mainmenu .menu-item-has-children > a[aria-expanded="true"]::after,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children:has(> .main-submenu[style*="display: block"]) > a::after,
.main-header .mainmenu-nav .mainmenu .menu-item-has-children:has(> .main-submenu-menu[style*="display: block"]) > a::after {
content: "▴" !important;
font-size: 19px !important;
font-weight: 700 !important;
transform: translateY(-48%) !important;
}
/* Keep the CTA SVG correctly proportioned at tablet/mobile sizes. */
.main-header .header-action .header-btn .main-btn.icon > i,
.main-header .header-action .header-btn .default-btn.icon > i,
.main-header .header-action .header-btn .main-btn > i,
.main-header .header-action .header-btn .default-btn > i {
left: 12px !important;
width: 19px !important;
min-width: 19px !important;
height: 19px !important;
}
}
/* ========================================================================
ZUMI FINAL ICON SPACING + SCROLL ICON PATCH — 2026-09-11
- Keeps menu icons comfortably separated from their labels as the viewport
narrows.
- Makes the Plan Your Adventure SVG participate in flex layout instead of
sitting absolutely over the button text.
- The scroll-to-top SVG URL is the new up-chevron-scroll.svg asset.
======================================================================== */
/* Desktop navigation: do not let icon-to-label spacing collapse too tightly. */
@media only screen and (min-width: 992px) {
.main-header .mainmenu > li > a,
.main-header.header-style-1 .mainmenu > li > a {
column-gap: clamp(9px, 0.65vw, 12px) !important;
}
/* Keep image/flag-based controls from crowding their text as well. */
.main-header .header-action > ul > li:not(.header-btn) > a,
.main-header .header-action > ul > li:not(.header-btn) > span,
.main-header .header-action > ul > li:not(.header-btn) a,
.main-header .header-action > ul > li:not(.header-btn) [role="button"] {
column-gap: clamp(9px, 0.65vw, 12px) !important;
}
/*
* PLAN YOUR ADVENTURE
* The icon is now a real flex item. This guarantees a physical gap between
* the SVG and the text at every desktop width and prevents overlap.
*/
.main-header .header-action .header-btn .main-btn.icon,
.main-header .header-action .header-btn .default-btn.icon {
display: inline-flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: clamp(10px, 0.72vw, 14px) !important;
padding-left: clamp(14px, 1.15vw, 22px) !important;
padding-right: clamp(14px, 1.15vw, 22px) !important;
}
.main-header .header-action .header-btn .main-btn.icon > i,
.main-header .header-action .header-btn .default-btn.icon > i,
.main-header .header-action .header-btn .main-btn > i,
.main-header .header-action .header-btn .default-btn > i {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
flex: 0 0 clamp(19px, 1.2vw, 22px) !important;
width: clamp(19px, 1.2vw, 22px) !important;
min-width: clamp(19px, 1.2vw, 22px) !important;
height: clamp(19px, 1.2vw, 22px) !important;
margin: 0 !important;
transform: none !important;
-webkit-transform: none !important;
}
}
/* Very tight desktop: retain the gap without making the CTA unnecessarily wide. */
@media only screen and (min-width: 992px) and (max-width: 1099.9999px) {
.main-header .mainmenu > li > a,
.main-header.header-style-1 .mainmenu > li > a {
column-gap: 9px !important;
}
.main-header .header-action .header-btn .main-btn.icon,
.main-header .header-action .header-btn .default-btn.icon {
gap: 8px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.main-header .header-action .header-btn .main-btn.icon > i,
.main-header .header-action .header-btn .default-btn.icon > i,
.main-header .header-action .header-btn .main-btn > i,
.main-header .header-action .header-btn .default-btn > i {
flex-basis: 18px !important;
width: 18px !important;
min-width: 18px !important;
height: 18px !important;
}
}
/* Tablet/mobile header: same no-overlap treatment if the CTA is shown. */
@media only screen and (max-width: 991.9999px) {
.main-header .header-action .header-btn .main-btn.icon,
.main-header .header-action .header-btn .default-btn.icon {
display: inline-flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.main-header .header-action .header-btn .main-btn.icon > i,
.main-header .header-action .header-btn .default-btn.icon > i,
.main-header .header-action .header-btn .main-btn > i,
.main-header .header-action .header-btn .default-btn > i {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
flex: 0 0 18px !important;
width: 18px !important;
min-width: 18px !important;
height: 18px !important;
margin: 0 !important;
transform: none !important;
-webkit-transform: none !important;
}
}
/* ========================================================================
ZUMI FINAL DESKTOP RAIL-TO-ICON SPACING PATCH — 2026-09-11
Keeps the orange vertical accent visually separated from the menu icon
without materially widening the navigation at tighter desktop widths.
This lives at the end of responsive.css as the final breakpoint authority.
======================================================================== */
@media only screen and (min-width: 1100px) {
.main-header .mainmenu > li > a,
.main-header.header-style-1 .mainmenu > li > a {
padding-left: clamp(8px, 0.62vw, 11px) !important;
}
.main-header .mainmenu > li > a::before,
.main-header.header-style-1 .mainmenu > li > a::before {
left: -4px !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1099.9999px) {
.main-header .mainmenu > li > a,
.main-header.header-style-1 .mainmenu > li > a {
padding-left: 6px !important;
}
.main-header .mainmenu > li > a::before,
.main-header.header-style-1 .mainmenu > li > a::before {
left: -5px !important;
}
}
/* ========================================================================
IPAD LANDSCAPE DROPDOWN CARET FIX
Keep one identical glyph and rotate it instead of swapping ▾ / ▴.
Prevents oversized expanded caret in iPad WebKit.
======================================================================== */
@media only screen
and (min-width: 992px)
and (max-width: 1199.98px)
and (hover: none)
and (pointer: coarse) {
/* CLOSED */
.main-header .mainmenu .menu-item-has-children > a::after,
.main-header.header-style-1 .mainmenu .menu-item-has-children > a::after {
content: "▾" !important;
display: block !important;
position: absolute !important;
top: 50% !important;
right: 8px !important;
width: 12px !important;
height: 12px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
color: #737A75 !important;
font-family: Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 12px !important;
text-align: center !important;
transform:
translateY(-50%)
rotate(0deg) !important;
transform-origin:
50% 50% !important;
transition:
transform 160ms ease,
color 150ms ease !important;
}
/* OPEN — USE THE SAME GLYPH, JUST ROTATE IT */
.main-header .mainmenu .menu-item-has-children.menu-item-open > a::after,
.main-header .mainmenu .menu-item-has-children.open > a::after,
.main-header .mainmenu .menu-item-has-children.submenu-open > a::after,
.main-header .mainmenu .menu-item-has-children > a[aria-expanded="true"]::after,
.main-header.header-style-1 .mainmenu .menu-item-has-children.menu-item-open > a::after,
.main-header.header-style-1 .mainmenu .menu-item-has-children.open > a::after,
.main-header.header-style-1 .mainmenu .menu-item-has-children.submenu-open > a::after,
.main-header.header-style-1 .mainmenu .menu-item-has-children > a[aria-expanded="true"]::after,
.main-header .mainmenu .menu-item-has-children:focus-within > a::after,
.main-header.header-style-1 .mainmenu .menu-item-has-children:focus-within > a::after {
content: "▾" !important;
color: #252925 !important;
font-size: 12px !important;
transform:
translateY(-50%)
rotate(180deg) !important;
}
/* ALSO HANDLE THE THEME'S INLINE DISPLAY TOGGLE */
.main-header .mainmenu .menu-item-has-children:has(
> .main-submenu[style*="display: block"]
) > a::after,
.main-header .mainmenu .menu-item-has-children:has(
> .main-submenu-menu[style*="display: block"]
) > a::after {
content: "▾" !important;
font-size: 12px !important;
transform:
translateY(-50%)
rotate(180deg) !important;
}
}
/* ========================================================================
ZUMI HEADER EMERGENCY CTA — RESPONSIVE
The same red Emergency control and warning SVG are preserved everywhere.
On phones it appears as a full-width red action in the open drawer above
Plan Your Adventure.
======================================================================== */
/* Tight desktop: compact red warning button so the header never overflows. */
@media only screen and (min-width: 992px) and (max-width: 1099.9999px) {
.main-header .header-action .header-emergency-btn .zumi-emergency-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
min-width: 40px !important;
height: 40px !important;
min-height: 40px !important;
padding: 0 !important;
gap: 0 !important;
border-radius: 10px !important;
background: #C93434 !important;
border-color: #B72A2A !important;
}
.main-header .header-action .header-emergency-btn .zumi-emergency-btn > span {
display: none !important;
}
.main-header .header-action .header-emergency-btn .zumi-emergency-btn-icon {
display: block !important;
flex: 0 0 19px !important;
width: 19px !important;
min-width: 19px !important;
max-width: 19px !important;
height: 19px !important;
margin: 0 !important;
filter: brightness(0) invert(1) !important;
}
}
/* Tablet: same compact red Emergency button next to the other header actions. */
@media only screen and (min-width: 768px) and (max-width: 991.9999px) {
.main-header .header-action > ul {
gap: 7px !important;
}
.main-header .header-action .header-emergency-btn .zumi-emergency-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
min-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
gap: 0 !important;
border-radius: 11px !important;
background: #C93434 !important;
border-color: #B72A2A !important;
}
.main-header .header-action .header-emergency-btn .zumi-emergency-btn > span {
display: none !important;
}
.main-header .header-action .header-emergency-btn .zumi-emergency-btn-icon {
display: block !important;
flex: 0 0 19px !important;
width: 19px !important;
min-width: 19px !important;
max-width: 19px !important;
height: 19px !important;
margin: 0 !important;
filter: brightness(0) invert(1) !important;
}
}
/*
* Phones: preserve the site's existing drawer CTA behavior, but give Emergency
* its own complete red row above Plan Your Adventure. The same supplied warning
* SVG remains visible to the left of the translated Emergency label.
*/
@media only screen and (max-width: 767.9999px) {
.main-header .mainmenu-nav .mainmenu {
padding-bottom: 170px !important;
}
.main-header .header-action .header-booking-btn {
bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}
.main-header .header-action .header-emergency-btn {
bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
}
.main-header .header-action .header-emergency-btn .zumi-emergency-btn,
.main-header .header-action .header-booking-btn .zumi-booking-btn {
width: 100% !important;
min-height: 50px !important;
}
.main-header .header-action .header-emergency-btn .zumi-emergency-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 14px 16px !important;
gap: 10px !important;
color: #FFFFFF !important;
background: #C93434 !important;
border-color: #B72A2A !important;
border-radius: 12px !important;
box-shadow: 0 12px 28px rgba(201, 52, 52, 0.28) !important;
}
.main-header .header-action .header-emergency-btn .zumi-emergency-btn > span {
display: inline-block !important;
color: #FFFFFF !important;
}
.main-header .header-action .header-emergency-btn .zumi-emergency-btn-icon {
display: block !important;
flex: 0 0 20px !important;
width: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
height: 20px !important;
margin: 0 !important;
filter: brightness(0) invert(1) !important;
}
}
/* Keep the two stacked phone actions aligned with the narrower drawer. */
@media only screen and (max-width: 419.9999px) {
.main-header .header-action .header-emergency-btn,
.main-header .header-action .header-booking-btn {
left: 15px !important;
width: calc(94vw - 30px) !important;
max-width: calc(94vw - 30px) !important;
}
}
/* ========================================================================
ZUMI EMERGENCY CTA — FINAL RESPONSIVE AUTHORITY — 2026-09-17
- 768–1279px: icon-only in the top header so translated labels never clip.
- <=767px: full red Emergency CTA in the opened mobile drawer.
- Dedicated selector avoids all .default-btn orange styling.
======================================================================== */
/* Tablet + compact desktop/laptop header: warning icon only. */
@media only screen and (min-width: 768px) and (max-width: 1279.9999px) {
html body .main-header .header-navbar .header-action > ul > li.header-btn.header-emergency-btn > a.zumi-emergency-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
gap: 0 !important;
color: #FFFFFF !important;
background: #C92E2E !important;
background-color: #C92E2E !important;
background-image: none !important;
border: 2px solid #B62424 !important;
border-radius: 11px !important;
box-shadow: 0 7px 18px rgba(201, 46, 46, 0.22) !important;
overflow: hidden !important;
}
html body .main-header .header-navbar .header-action > ul > li.header-btn.header-emergency-btn > a.zumi-emergency-btn > span {
display: none !important;
}
html body .main-header .header-navbar .header-action > ul > li.header-btn.header-emergency-btn > a.zumi-emergency-btn .zumi-emergency-btn-icon {
display: block !important;
flex: 0 0 20px !important;
width: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
height: 20px !important;
margin: 0 !important;
filter: brightness(0) invert(1) !important;
}
}
/* Phones: same Emergency CTA, full label, inside the open drawer rail. */
@media only screen and (max-width: 767.9999px) {
html body .main-header .header-action > ul > li.header-btn.header-emergency-btn > a.zumi-emergency-btn {
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 50px !important;
padding: 14px 16px !important;
color: #FFFFFF !important;
background: #C92E2E !important;
background-color: #C92E2E !important;
background-image: none !important;
border: 2px solid #B62424 !important;
border-radius: 12px !important;
box-shadow: 0 12px 28px rgba(201, 46, 46, 0.28) !important;
overflow: hidden !important;
}
html body .main-header .header-action > ul > li.header-btn.header-emergency-btn > a.zumi-emergency-btn > span {
display: inline-block !important;
min-width: 0 !important;
color: #FFFFFF !important;
white-space: normal !important;
text-align: center !important;
}
html body .main-header .header-action > ul > li.header-btn.header-emergency-btn > a.zumi-emergency-btn .zumi-emergency-btn-icon {
display: block !important;
flex: 0 0 20px !important;
width: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
height: 20px !important;
margin: 0 !important;
filter: brightness(0) invert(1) !important;
}
}