/* ============================================================================= responsive-fixes.css v2 InterTours Albania — targeted responsive fixes Add ONE line in after all other CSS files: ============================================================================= */ /* ───────────────────────────────────────────────────────────────────────────── FIX 1 · Desktop nav — equal spacing between logo and Contact btn (≥1200px) ───────────────────────────────────────────────────────────────────────────── */ @media (min-width: 1200px) { .logo-and-menu-area { flex: 1; display: flex; align-items: center; } .main-menu { flex: 1; } .menu-list { display: flex !important; justify-content: space-evenly; align-items: center; width: 100%; padding: 0; margin: 0; list-style: none; flex-wrap: nowrap; } .menu-list > li { flex-shrink: 0; } .nav-right { flex-shrink: 0; } } /* ───────────────────────────────────────────────────────────────────────────── FIX 2 · Mobile sidebar — vertical stack layout + submenus open downward ───────────────────────────────────────────────────────────────────────────── */ @media (max-width: 1199px) { /* Force vertical list */ .main-menu .menu-list { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100%; gap: 0; padding: 0; margin: 0; list-style: none; } .main-menu .menu-list > li { width: 100%; position: relative; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } .main-menu .menu-list > li > a, .main-menu .menu-list > li > .drop-down { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 20px; box-sizing: border-box; } /* Sub-menus open BELOW parent — not to the right */ .main-menu .menu-list .sub-menu { position: static !important; /* take it out of absolute flow */ display: none; flex-direction: column; width: 100%; padding: 0 0 0 16px; box-shadow: none !important; background: transparent !important; border: none !important; margin: 0; } /* When the + is clicked (active state the theme sets) */ .main-menu .menu-list li.active > .sub-menu, .main-menu .menu-list li.open > .sub-menu { display: flex !important; } .main-menu .menu-list .sub-menu li a { padding: 8px 12px; font-size: 13px; display: block; } /* Mega menu also opens below */ .main-menu .menu-list .mega-menu { position: static !important; display: none; width: 100%; box-shadow: none !important; } .main-menu .menu-list li.active > .mega-menu, .main-menu .menu-list li.open > .mega-menu { display: block !important; } /* Hide language-trigger and sidebar Contact btn — replaced by nav-right icons */ .main-menu .menu-list li:has(.language-trigger) { display: none !important; } .sidebar-contact-hide { display: none !important; } } /* ───────────────────────────────────────────────────────────────────────────── FIX 3 · Mobile nav-right — phone icon button + flag button (< 1200px) ───────────────────────────────────────────────────────────────────────────── */ /* Phone icon contact button */ .mobile-contact-btn { display: none; /* hidden by default; shown below via d-xl-none */ align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: transparent !important; /* Made transparent */ color: #111; text-decoration: none; transition: background 0.2s; flex-shrink: 0; border: none !important; /* No border */ } .mobile-contact-btn:hover { background: rgba(0,0,0,0.05) !important; color: #111; } .mobile-contact-btn svg { width: 28px; /* Match language flag size */ height: 28px; fill: #111 !important; /* Black icon */ } /* Flag language button */ .mobile-lang-btn { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: none !important; /* Removed border */ cursor: pointer; text-decoration: none; flex-shrink: 0; background: transparent; padding: 0; } .mobile-lang-btn:hover { opacity: 0.8; } .mobile-flag-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } /* language-modal.js already manages the flag src and visibility; ensure our mobile flag is also revealed after JS sets src */ .mobile-lang-btn .mobile-flag-img { visibility: hidden; /* hidden until language-modal.js sets src */ } /* nav-right spacing for the compact row */ @media (max-width: 1199px) { .nav-right { display: flex; align-items: center; gap: 8px; } /* sidebar-button sits last — keep its original styling */ .sidebar-button { margin-left: 2px; } /* Make logo black */ .header-logo img, .mobile-logo-wrap img { filter: brightness(0) !important; } } /* ───────────────────────────────────────────────────────────────────────────── FIX 4 · language-modal.js already hides the nav flag; extend to mobile flag Add this so updateNavButton() also reveals the .mobile-flag-img (JS patch note: the language-modal.js already sets visibility:visible via imgEl.style.visibility after src assignment — the .mobile-flag-img is a SEPARATE img element so we need an additional JS line. CSS fallback below ensures it shows after 300ms in case JS doesn't reach it.) ───────────────────────────────────────────────────────────────────────────── */ @keyframes revealFlag { to { visibility: visible; } } .mobile-lang-btn .mobile-flag-img { animation: revealFlag 0s 0.3s forwards; } /* ───────────────────────────────────────────────────────────────────────────── FIX 5 · service-list — stack vertically at 768–991px (same as ≤767px) ───────────────────────────────────────────────────────────────────────────── */ @media (min-width: 768px) and (max-width: 991px) { .service-list { flex-direction: column !important; align-items: stretch !important; } .service-list .single-service { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } } /* ───────────────────────────────────────────────────────────────────────────── FIX 6 · "Request Group Quote" button text overflow ───────────────────────────────────────────────────────────────────────────── */ a.primary-btn1, button.primary-btn1 { max-width: 100% !important; overflow: hidden !important; padding-left: 10px; padding-right: 10px; white-space: nowrap; } a.primary-btn1 > span, button.primary-btn1 > span { display: block !important; max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } @media (min-width: 577px) and (max-width: 767px) { a.primary-btn1 > span, button.primary-btn1 > span { font-size: 12px !important; padding: 10px 14px !important; } a.primary-btn1, button.primary-btn1 { min-width: 0; } } /* ───────────────────────────────────────────────────────────────────────────── FIX 7 · counter-section — vertically align all 4 icons at ≤991px The grid wraps to 2×2 at col-sm-6. The two cols on each row have different justify-content values so items don't line up vertically. At ≤991px we unify alignment so all four icons are on the same horizontal baseline within each row. ───────────────────────────────────────────────────────────────────────────── */ @media (max-width: 991px) { /* Normalize all four cols to the same flex alignment */ .counter-section .col-sm-6, .counter-section .col-lg-3 { display: flex !important; justify-content: flex-start !important; align-items: flex-start; } /* Give every single-counter a fixed left offset so the icons in each row land on the same vertical axis */ .counter-section .single-counter { display: flex; align-items: flex-start; gap: 16px; padding-left: 0; } /* Within a 576–991px viewport the row is 2-col (col-sm-6). Center each pair so the two items look balanced. */ @media (min-width: 576px) { .counter-section .row { justify-content: center; } .counter-section .col-sm-6 { justify-content: center !important; } } } /* Full center at ≤575px (single column) */ @media (max-width: 575px) { .counter-section .row { justify-content: center; } .counter-section .col-lg-3 { display: flex !important; justify-content: center !important; } .counter-section .single-counter { display: flex; align-items: center; gap: 16px; } } /* ───────────────────────────────────────────────────────────────────────────── FIX 8 · footer-contact-wrap — no wrapping at 992px and up ───────────────────────────────────────────────────────────────────────────── */ @media (min-width: 992px) { .footer-contact-wrap { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 16px; width: 100%; } .footer-contact-wrap .inquiry-area { flex-shrink: 0; gap: 10px; max-width: 40%; } .footer-contact-wrap .contact-area { display: flex !important; flex-wrap: nowrap !important; gap: 12px !important; flex-shrink: 0; justify-content: flex-end; align-items: center; max-width: 60%; } .footer-contact-wrap .single-contact { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; white-space: nowrap !important; } .footer-contact-wrap .single-contact .content span { font-size: 12px; } .footer-contact-wrap .single-contact .content a { font-size: 13px; } } /* ───────────────────────────────────────────────────────────────────────────── FIX 9 · footer-menu-wrap — parallel h5 + tighter logo spacing ───────────────────────────────────────────────────────────────────────────── */ .footer-logo-and-addition-info { padding-top: 0; } .footer-logo-and-addition-info .footer-logo { display: block; margin-bottom: 8px; } .footer-widget .widget-title h5, .footer-logo-and-addition-info .footer-logo { margin-top: 0; padding-top: 0; } .footer-menu-wrap .footer-widget { padding-top: 0; } .footer-menu-wrap .widget-title { margin-bottom: 16px; } .address-area { margin-top: 8px; } /* ───────────────────────────────────────────────────────────────────────────── FIX 10 · footer — center align all content at ≤499px ───────────────────────────────────────────────────────────────────────────── */ @media (max-width: 499px) { .footer-contact-wrap { flex-direction: column !important; align-items: center !important; text-align: center; } .footer-contact-wrap .inquiry-area { flex-direction: column; align-items: center; text-align: center; } .footer-contact-wrap .contact-area { flex-direction: column !important; align-items: center !important; gap: 16px; } .footer-contact-wrap .single-contact { flex-direction: column; align-items: center; text-align: center; } .footer-menu-wrap .col-sm-6, .footer-menu-wrap .col-md-4, .footer-menu-wrap .col-lg-3 { display: flex !important; justify-content: center !important; text-align: center; } .footer-logo-and-addition-info { display: flex; flex-direction: column; align-items: center; text-align: center; } .footer-logo-and-addition-info .footer-logo { margin-left: auto; margin-right: auto; } .address-area { text-align: center; } .address-area span, .address-area a, .address-area p { display: block; text-align: center; } .social-list { justify-content: center !important; } .footer-widget { text-align: center; width: 100%; } .footer-widget .widget-list { padding-left: 0; list-style: none; } .footer-widget .widget-list li { text-align: center; } .copyright-and-payment-method-area { flex-direction: column !important; align-items: center !important; text-align: center; gap: 16px; } .payment-method-area { justify-content: center !important; flex-wrap: wrap; text-align: center; } }