/* ========================================================= HEADER V2 + HERO V2 Load AFTER style.css / responsive.css / main.css Change the colours below to re-theme the whole header. ========================================================= */ /* Font: kept as the theme's own "Potro Sans Bangla" (no override here). Kohinoor Bangla was tried earlier but added load time without the actual licensed font files in place, so it was reverted back to the original. */ :root { /* Colour values below are placeholders: the ones that actually apply come from Admin > Site Setting > Theme Setting and are printed inline in by master.blade.php. These are only the fallback if that admin row does not exist yet. */ --hb-accent: #2D8511; /* cart badge, dots, arrows, hover colour = primary */ --hb-nav-bg: #12351A; /* dark category bar + top strip = secondary */ --hb-nav-text: #ffffff; --hb-search-bg: #f1f1ef; /* search box background */ --hb-text: #1f2a2a; /* icons + labels in the white bar */ --hb-radius: 14px; /* rounded corners of slider / banner */ --hb-hero-bg: transparent; /* background behind the hero area */ } /* ---------- header behaviour on scroll ---------- style.css has a generic `header{position:fixed}` rule that used to pin the WHOLE header (top strip + logo/search bar + category bar) to the screen. We only want the compact middle bar pinned: white bar (logo+search+icons) on desktop, logo+cart row on mobile. The top strip, the mobile search box and the dark category bar scroll away normally, so no extra #content padding is needed -- everything sits in normal document flow. */ #navbar_top, #navbar_bottom { position: static; } /* style.css sets `body{overflow-x:hidden}`. Per the CSS spec, pairing that with the default overflow-y:visible silently upgrades overflow-y to "auto", which turns into its own scroll container and breaks position:sticky (sticky elements stick to their nearest scroll container, not the page). "clip" avoids that upgrade while still preventing horizontal scroll. */ html, body { overflow-x: clip; } /* Extra safety net: some pages (product details, which loads the zoomsl image-zoom plugin) can inject off-screen helper elements at huge negative offsets, which has been known to visually stretch a fixed-position bar on that page in some mobile browsers. Capping the bottom nav to the actual viewport width makes it immune to that regardless of the cause. */ .footer_nav { max-width: calc(100vw - 20px); } /* style.css gives #content a fixed 122px top padding to clear the old fixed header. The header is normal flow now, so that reserved space is no longer needed. */ #content { padding-top: 0 !important; } /* .hb-sticky-bar is a direct child of (see master.blade.php), not nested inside

-- position:sticky is bounded by the element's own parent, so it needs a parent as tall as the whole page (body) to be able to stay pinned all the way down, instead of only within a ~130px-tall header box. The top strip (before it, in #navbar_top) and the search/category bar (after it, in #navbar_bottom) are normal siblings, so they scroll away on their own while this bar stays put. */ .hb-sticky-bar { position: sticky; top: 0; z-index: 1001; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); } @media (max-width: 767px) { .hb-sticky-bar .main-header { display: none; } /* the category bar moved out of .main-header (see master.blade.php) so it needs its own rule to stay hidden on phones -- categories are reached through the hamburger menu there, same as before. */ #navbar_bottom .hb-nav { display: none; } } @media (min-width: 768px) { .hb-sticky-bar .mobile-header { display: none; } } /* ---------- top strip (marquee headline) ---------- */ #navbar_top .hb-topstrip { background: var(--hb-nav-bg); color: var(--hb-nav-text); font-size: 13px; padding: 6px 0; } #navbar_top .hb-topstrip marquee { display: block; color: var(--hb-nav-text); } /* ---------- white bar : logo | search | actions ---------- */ .main-header.hb { background: #fff; } .hb-top { padding: 14px 0; } .hb-top__inner { display: flex; align-items: center; gap: 32px; } .hb-logo { flex: 0 0 auto; } .hb-logo img { display: block; max-height: 48px; width: auto; max-width: 200px; } /* search */ .hb-search { position: relative; flex: 1 1 auto; max-width: 560px; margin: 0 auto; } .hb-search form { display: flex; align-items: center; height: 48px; padding: 0 6px 0 18px; background: var(--hb-search-bg); border-radius: 12px; margin: 0; } .hb-search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--hb-text); box-shadow: none; } .hb-search input::placeholder { color: #7b8383; } .hb-search button { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--hb-text); cursor: pointer; padding: 0; } .hb-search button svg { width: 20px; height: 20px; } .hb-search .search_result { position: relative; } .hb-search .search_product { border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); overflow: hidden; margin-top: 6px; } /* right side icons */ .hb-actions { display: flex; align-items: center; gap: 22px; margin: 0 0 0 auto; padding: 0; list-style: none; flex: 0 0 auto; } .hb-actions > li { position: relative; margin: 0; padding: 0; } .hb-action { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 46px; padding: 0; border: 0; background: transparent; color: var(--hb-text); font-size: 13px; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; } .hb-action:hover, .hb-action:focus { color: var(--hb-accent); text-decoration: none; outline: none; } .hb-action__icon { position: relative; display: grid; place-items: center; width: 26px; height: 26px; } .hb-action__icon svg { width: 24px; height: 24px; stroke-width: 1.6; } .hb-badge { position: absolute; top: -7px; right: -10px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hb-accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } /* cart hover box (re-uses the old .cshort-summary) */ .hb-actions #cart-qty .cshort-summary, .hb-actions #cart-qty:hover .cshort-summary { top: 100%; margin-top: 0; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); z-index: 1001; } /* "More" dropdown */ .hb-dropdown { position: absolute; right: 0; top: 100%; padding-top: 12px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: 0.2s ease; z-index: 1001; } .hb-more:hover .hb-dropdown, .hb-more:focus-within .hb-dropdown { opacity: 1; visibility: visible; transform: none; } .hb-dropdown__panel { min-width: 200px; padding: 8px; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); } .hb-dropdown__panel a { display: block; padding: 9px 14px; border-radius: 8px; color: var(--hb-text); font-size: 14px; text-decoration: none; } .hb-dropdown__panel a:hover { background: #f7f5f0; color: var(--hb-accent); } /* ---------- dark category bar ---------- */ .hb-nav { background: var(--hb-nav-bg); } .hb-nav__list { display: flex; align-items: stretch; flex-wrap: nowrap; /* items that do not fit are moved under "Others" by the script in master.blade.php */ margin: 0; padding: 0; list-style: none; } .hb-nav__item { position: relative; margin: 0; } .hb-nav__link { display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 14px; color: var(--hb-nav-text); font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; } .hb-nav__link i { font-size: 10px; opacity: 0.85; } .hb-nav__link:hover, .hb-nav__item:hover > .hb-nav__link { color: var(--hb-accent); text-decoration: none; } .hb-nav__link--deal { font-weight: 600; } /* drop-down panels */ .hb-drop { position: absolute; left: 0; top: 100%; min-width: 230px; margin: 0; padding: 10px 0; list-style: none; background: #fff; border-radius: 0 0 12px 12px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: 0.18s ease; z-index: 1000; } .hb-nav__item:hover > .hb-drop { opacity: 1; visibility: visible; transform: none; } .hb-drop li { position: relative; list-style: none; margin: 0; } .hb-drop a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 18px; color: var(--hb-text); font-size: 14px; white-space: nowrap; text-decoration: none; } .hb-drop a i { font-size: 10px; opacity: 0.6; } .hb-drop a:hover, .hb-drop li:hover > a { background: #f7f5f0; color: var(--hb-accent); } .hb-drop .hb-drop { left: 100%; top: -10px; border-radius: 12px; } .hb-drop li:hover > .hb-drop { opacity: 1; visibility: visible; transform: none; } /* last items open towards the left so they never leave the screen */ .hb-nav__item--end > .hb-drop { left: auto; right: 0; } .hb-nav__item--end .hb-drop .hb-drop { left: auto; right: 100%; } /* ---------- HERO ---------- */ .hero-v2 { background: var(--hb-hero-bg); padding: 18px 0 8px; --hero-h: clamp(190px, 27vw, 400px); } .hero-v2__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } .hero-v2__grid.has-side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .hero-v2__main, .hero-v2__side { position: relative; height: var(--hero-h); border-radius: var(--hb-radius); overflow: hidden; background: #e4e4e0; } .hero-v2__side { display: block; } .hero-v2__side img { display: block; width: 100%; height: 100%; object-fit: cover; } /* slider */ .hero-v2 .main_slider, .hero-v2 .main_slider .owl-stage-outer, .hero-v2 .main_slider .owl-stage, .hero-v2 .main_slider .owl-item, .hero-v2 .main_slider .slider-item { height: 100%; } .hero-v2 .main_slider .slider-item img { display: block; width: 100%; height: 100%; object-fit: cover; } /* arrows */ .hero-v2 .main_slider .owl-nav { margin: 0; } .hero-v2 .main_slider .owl-nav button.owl-prev, .hero-v2 .main_slider .owl-nav button.owl-next { position: absolute; top: 50%; width: 40px; height: 40px; margin: 0; padding: 0; transform: translateY(-50%); display: grid; place-items: center; background: #fff; border: 0; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); color: var(--hb-accent) !important; /* style.css forces white + 30px with !important */ font-size: 16px !important; line-height: 1 !important; text-align: center !important; cursor: pointer; z-index: 5; transition: background 0.2s, color 0.2s; } .hero-v2 .main_slider .owl-nav button.owl-prev { left: 0; right: auto; border-radius: 0 6px 6px 0; } .hero-v2 .main_slider .owl-nav button.owl-next { right: 0; left: auto; border-radius: 6px 0 0 6px; } .hero-v2 .main_slider .owl-nav button i, .hero-v2 .main_slider .owl-nav button:hover i { color: inherit !important; font-size: 16px; } .hero-v2 .main_slider .owl-nav button.owl-prev:hover, .hero-v2 .main_slider .owl-nav button.owl-next:hover { background: var(--hb-accent); color: #fff !important; } /* dots */ .hero-v2 .main_slider .owl-dots { position: absolute; left: 24px; bottom: 16px; display: flex; align-items: center; gap: 6px; margin: 0; } .hero-v2 .main_slider .owl-dots .owl-dot { display: block; padding: 0; background: transparent; border: 0; } .hero-v2 .main_slider .owl-dots .owl-dot span { display: block; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: #fff; opacity: 0.95; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); transition: 0.25s ease; } .hero-v2 .main_slider .owl-dots .owl-dot.active span { width: 20px; border-radius: 6px; background: var(--hb-accent); } /* ---------- product cards: rounder, cleaner, unique (used on Home, Category, Search, Hot Deals...) ---------- */ :root { --pc-radius: 14px; /* card corner radius */ --pc-img-h: 190px; /* product image height */ } .product_item { display: flex; flex-direction: column; /* spacing between cards comes from the grid's own grid-gap (style.css) and the owl-carousel "margin" option -- an extra bottom margin here on top of those, combined with the grid container's overflow:hidden, was clipping unevenly and making the gap under each product section look broken. Only keep a sliver of top margin so a hover-lifted card has room to rise without visually touching the row above it. */ margin: 4px 0 0; /* uniform padding around EVERYTHING (image, name, price, button) so the button and price never touch the card's border -- matches the reference design of a clearly bordered, padded product card. */ padding: 14px; border: 1px solid #ebede9; border-radius: var(--pc-radius); background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 20, 0.04); transition: 0.25s ease; overflow: visible; } /* Push price + button to the bottom of the card as a group, so every card in a row lines its button up on the same edge even when the name wraps to a different number of lines or the rating/badge is missing on some cards. */ .product_item .pro_price { margin-top: auto; } /* Reference design has no star rating row on the card -- hidden site-wide. */ .product_item .pro_rating { display: none; } /* Owl Carousel sliders (related products, feature sliders, etc.) don't equal- ise item heights on their own -- without this, cards in the same slide can have different heights and their buttons end up at different levels. */ .owl-carousel .owl-stage { display: flex; align-items: stretch; } .owl-carousel .owl-item { display: flex; height: auto; } .owl-carousel .owl-item > * { width: 100%; } .owl-carousel .owl-stage-outer { padding: 6px 0 12px; margin: -6px 0 -6px; } .product_item:hover { margin-top: 6px; /* cancel the theme's hover "lift" that used margin-top:0 */ border-color: color-mix(in srgb, var(--brand-primary, var(--hb-accent)) 35%, #ebede9); box-shadow: 0 10px 24px rgba(20, 30, 20, 0.1); transform: translateY(-3px); } .product_item:hover .product_item_inner { border-color: transparent; } .product_item_inner { /* the card itself now carries the padding (above); this wrapper no longer needs its own -- it just holds the badge + image + name. */ padding: 0; border-radius: var(--pc-radius); overflow: hidden; } .pro_img { height: var(--pc-img-h); margin: 0 0 10px; width: 100%; border-radius: 10px; background: #fafaf8; } .pro_img img { padding: 0; } .pro_name { height: auto; max-height: 42px; margin-top: 2px; -webkit-line-clamp: 2; } .pro_name a { font-size: 14px; color: var(--brand-text, #222); } .product_item i { color: var(--brand-primary, var(--hb-accent)); font-size: 12px; } .pro_price { margin: 8px 0 10px; } .pro_price p { font-size: 17px; color: var(--brand-primary, var(--hb-accent)); } .pro_price del { color: #a7ada7; } .pro_btn button, .cart_btn.order_button a { display: flex !important; align-items: center; justify-content: center; gap: 8px; background: #fff !important; color: var(--brand-primary, var(--hb-accent)) !important; border: 1.5px solid var(--brand-primary, var(--hb-accent)) !important; border-radius: 10px !important; height: 40px !important; line-height: 38px !important; font-weight: 600; letter-spacing: 0.2px; overflow: visible !important; } /* the theme's old "slide the text up, reveal an icon" hover animation on .cart_btn.order_button a is dropped in favour of a plain icon + label, always shown together, matching the reference card design. */ .cart_btn.order_button a::before, .pro_btn button::before { content: "\f07a"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 13px; line-height: 1; } .cart_btn.order_button a::after { content: none !important; } .cart_btn.order_button a span { position: static !important; top: auto !important; left: auto !important; color: inherit !important; /* style.css's old slide-up-reveal animation made this span `width:100%; display:block`, which was harmless while it was `position:absolute` (taken out of flow). Now that it's a plain flex item (position:static, just above), that 100% width made it swallow the whole button and shove the icon away from the centred text -- lock it back down to its own text size. */ width: auto !important; height: auto !important; line-height: inherit !important; display: inline !important; } .pro_btn button:hover, .cart_btn.order_button a:hover { background: var(--brand-primary, var(--hb-accent)) !important; color: #fff !important; } /* discount badge: a soft rounded pill instead of the old red circle */ .product_item_inner .sale-badge { top: 10px; right: -2px; } .product_item_inner .sale-badge-inner { --sale-badge-width: 42px; } .product_item_inner .sale-badge-box { background-color: var(--brand-primary, var(--hb-accent)); border-radius: 10px 0 0 10px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); } .product-details-discount-badge span.sale-badge-text { background-color: var(--brand-primary, var(--hb-accent)); border-radius: 12px; } /* quick-view + wishlist circle buttons pick up the brand colour on hover */ .quick_view_hard a:hover { background: var(--brand-primary, var(--hb-accent)); border-color: var(--brand-primary, var(--hb-accent)); } /* ---------- mobile search bar (matches the desktop rounded search look) ---------- */ .mobile-search { background: #fff; padding: 10px 14px 14px; } .mobile-search form { display: flex; align-items: center; height: 46px; padding: 0 6px 0 16px; background: var(--hb-search-bg); border: 0; border-radius: 12px; overflow: visible; } .mobile-search form input.msearch_keyword { flex: 1 1 auto; width: auto !important; height: 100%; padding: 0; border: 0; background: transparent; color: var(--hb-text); font-size: 14px; text-align: left; box-shadow: none; } .mobile-search form input.msearch_keyword::placeholder { color: #7b8383; } .mobile-search form button { position: static; flex: 0 0 38px; width: 38px !important; height: 38px; display: grid; place-items: center; background: transparent; opacity: 1; } .mobile-search form button svg, .mobile-search form button i { color: var(--hb-text); width: 19px; height: 19px; } .mobile-search .search_result { position: relative; } .mobile-search .search_product { border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); overflow: hidden; margin-top: 6px; } /* ========================================================================== SITE-WIDE BRAND COLOUR SWEEP The theme hard-codes its old red accent (#ff0018 / #ff0000 / #a92c2c), an old blue (#108BC3) and dark hover shades (#1d2224) across many pages (category filters, checkout, wishlist, order tracking, sidebar menus, quick-view, coupon box, etc). This block re-points all of those to the colours set in Admin > Site Setting > Theme Setting, so the whole site -- not just the header/footer/product cards -- follows the brand colour. Selectors already redesigned above (the outline product button, the product card, the mobile search box, the bottom nav) are intentionally left out here so this block cannot undo that styling. ========================================================================== */ /* -- primary colour: buttons, active states, accents -- */ .parsley-errors-list, .mobile-menu .nav li button.active, .categories ul li a:hover, .wishlist-modal .price, .sidebar-menu li a.active, .checkout-shipping h6, .menu-more, .menu-more i, .cmn_menu ul li a:hover { color: var(--brand-primary, var(--hb-accent)) !important; } .parsley-error { border: 1px solid var(--brand-primary, var(--hb-accent)) !important; } .header-list-items ul li span, .submit-btn, .register-now a:hover, .go_cart, .go_cart:hover, .menu_view_all, .menu_view_all:hover, .categories p, .main-menu ul li a:after, .front-category ul li a:hover, .feature-btn a:hover, .sidebar_item h2.accordion-header button.accordion-button, .item_count, .product-code p, .add_cart_btn, .details-action-box .section-head .action .details-action-btn, .subcategory-filter-label input[type=checkbox]:checked, .ui-slider-horizontal .ui-slider-range, .confirm-btn, .continue-btn:hover, .confirm-btn:hover, .wcart-btn, .wcart-btn:focus, .coupon-form form button, .invoice_btn, .invoice_btn:focus, .order_place, .order_place:hover, .product-inner button.owl-prev:hover i, .related-product-section button.owl-prev:hover i, .product-inner button.owl-next:hover i, .related-product-section button.owl-next:hover i, .timer_inner .syotimer-cell, .scrolltop, .tracktable thead, li.all__category__list, .side__bar, .side__barsub, .side__barchild, li.cat_bar > a, .filter_btn, .menu-bag .margin-shopping span { background: var(--brand-primary, var(--hb-accent)) !important; background-color: var(--brand-primary, var(--hb-accent)) !important; } .front-category ul li a { border: 1px solid var(--brand-primary, var(--hb-accent)) !important; } .front-category ul li a:hover { border-color: var(--brand-primary, var(--hb-accent)) !important; } .order_now_btn:hover, .order_now_btn:active { background-color: var(--brand-primary, var(--hb-accent)) !important; border-color: var(--brand-primary, var(--hb-accent)) !important; } .add_cart_btn, .details-action-box .section-head .action .details-action-btn, .subcategory-filter-label input { border: 1px solid var(--brand-primary, var(--hb-accent)) !important; } .details-action-box .empty-content i { color: var(--brand-primary, var(--hb-accent)) !important; } .custom-loader { --c: radial-gradient(farthest-side, var(--brand-primary, var(--hb-accent)) 92%, #0000); } .cat_item:hover { border-color: var(--brand-primary, var(--hb-accent)) !important; } .brand-slider .owl-nav button:hover { background: var(--brand-primary, var(--hb-accent)) !important; } /* -- soft brand tint (was a translucent red) -- */ .details-action-box .empty-content i { background-color: rgba(var(--brand-primary-rgb, 45,133,17), 0.2) !important; } .cust_according_body ul li:hover a, .subcategory-filter-label:hover { background-color: rgba(var(--brand-primary-rgb, 45,133,17), 0.22) !important; } /* -- darker hover shade of the primary colour -- */ .quick_view_hard a:hover { background: var(--brand-primary-dark, var(--brand-primary)) !important; border: 2px solid var(--brand-primary-dark, var(--brand-primary)) !important; } .side__bar ul li:hover, .side__bar ul li:hover > a { background-color: var(--brand-primary-dark, var(--brand-primary)) !important; } /* -- dark panels/buttons: use the secondary (dark) brand colour -- */ .menu-area, .quick_view_btn, a.view_more_btn { background: var(--brand-secondary, var(--hb-nav-bg)) !important; } /* ---------- mobile bottom nav: floating rounded bar with an elevated home button ---------- */ .footer_nav { left: 10px; right: 10px; bottom: 10px; width: auto; border-top: 0; border-radius: 20px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); padding: 8px 4px; /* higher than the sticky header (1001) and any hover-lifted product card, so the bar never gets scrolled/rendered underneath page content */ z-index: 1002; } .footer_nav ul li a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #8a8f8a; font-size: 11px; text-decoration: none; padding: 4px 0; } .footer_nav ul li a:hover { color: var(--brand-primary, var(--hb-accent)); } .footer_nav .fn-icon { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; transition: 0.2s; } .footer_nav ul li:not(.mobile_home) a:hover .fn-icon { background: color-mix(in srgb, var(--brand-primary, var(--hb-accent)) 12%, transparent); } .footer_nav .fn-badge { position: absolute; top: -3px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brand-primary, var(--hb-accent)); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } /* elevated home button -- floats above the bar as a filled circle */ .footer_nav li.mobile_home { background: var(--brand-primary, var(--hb-accent)); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } .footer_nav li.mobile_home { color: #fff; } .footer_nav li.mobile_home a, .footer_nav li.mobile_home a:hover { color: #fff !important; } /* icon only for the elevated Home button -- no text label underneath */ .footer_nav li.mobile_home a span:not(.fn-icon) { display: none; } .footer_nav li.mobile_home i { font-size: 22px; } .footer_nav li.mobile_home a span:last-child { font-weight: 600; } /* ---------- mobile category drawer: WhatsApp + Call buttons under the list ---------- */ .mobile-menu__contact { display: flex; gap: 10px; padding: 16px; margin-top: 6px; border-top: 1px solid #eee; } .mobile-menu__contact-btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 10px; color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none; } .mobile-menu__contact-btn i { font-size: 16px; } .mobile-menu__contact-btn--whatsapp { background: #25D366; } .mobile-menu__contact-btn--call { background: var(--brand-primary, var(--hb-accent)); } /* ---------- footer: modern, unique, brand-coloured ---------- */ .hb-footer { background: var(--brand-secondary, var(--hb-nav-bg)); } .hb-footer a { text-decoration: none; } .hb-footer__top { padding: 48px 0 28px; } .hb-footer__logo { display: inline-block; margin-bottom: 14px; } .hb-footer__logo img { max-height: 40px; width: auto; } .hb-footer__about p { margin: 0 0 12px; color: rgba(255, 255, 255, 0.72); font-size: 14px; line-height: 1.6; } .hb-footer__hotline { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; font-weight: 600; } .hb-footer__hotline svg { width: 17px; height: 17px; color: var(--brand-primary, var(--hb-accent)); } .hb-footer__title { margin: 0 0 16px; color: #fff; font-size: 15px; font-weight: 600; position: relative; padding-bottom: 10px; } .hb-footer__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: var(--brand-primary, var(--hb-accent)); border-radius: 2px; } .hb-footer__menu ul { margin: 0; padding: 0; list-style: none; } .hb-footer__menu ul li { display: block; margin: 0 0 10px; } .hb-footer__menu ul li a { color: rgba(255, 255, 255, 0.72); font-size: 14px; transition: 0.2s; } .hb-footer__menu ul li a:hover { color: var(--brand-primary, var(--hb-accent)); padding-left: 3px; } .hb-footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; } .hb-footer__social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 14px; transition: 0.2s; } .hb-footer__social a:hover { background: var(--brand-primary, var(--hb-accent)); } .hb-footer__app img { height: 40px; width: auto; border-radius: 8px; } .hb-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 16px 0; } .hb-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; text-align: center; } .hb-footer__bottom-inner p { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 13px; } .hb-footer__sep { color: rgba(255, 255, 255, 0.35); } .dev-credit { color: rgba(255, 255, 255, 0.75); font-size: 13px; } .dev-credit strong { color: #fff; } .dev-credit:hover { color: var(--brand-primary, var(--hb-accent)); } /* admin panel footer uses the same partial, on a light background */ footer.footer .dev-credit, footer.footer .dev-credit strong { color: inherit; } /* ---------- responsive ---------- */ @media (max-width: 1199px) { .hb-top__inner { gap: 20px; } .hb-actions { gap: 16px; } .hb-nav__link { padding: 0 11px; font-size: 14px; } } /* tablet: keep the bar, hide the long labels and mega menus */ @media (min-width: 768px) and (max-width: 991px) { .hb-top__inner { gap: 14px; } .hb-logo img { max-height: 40px; max-width: 130px; } .hb-action__label, .hb-actions .hb-hotline { display: none; } .hb-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; } .hb-nav::-webkit-scrollbar { display: none; } .hb-nav .hb-drop, .hb-nav__more, .hb-nav__link i { display: none !important; } } /* phone: the old mobile header is used, only the hero changes */ @media (max-width: 767px) { .hero-v2 { padding: 10px 0 4px; } .hero-v2__grid.has-side { grid-template-columns: minmax(0, 1fr); } .hero-v2__side { display: none; } .hero-v2__main { height: auto; aspect-ratio: 2 / 1; border-radius: 10px; } .hero-v2 .main_slider .owl-nav { display: none; } .hero-v2 .main_slider .owl-dots { left: 12px; bottom: 8px; } }