/* MaxHelp — additions on top of the Glossia template bundle. Everything here is either markup the template did not have (language switcher, form messages, pagination) or a fix needed because the site now renders Uzbek and Russian text. */ /* ---- inline styles the exported page carried in ---------------- */ img:is([sizes=auto i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; } .e-heading-base a, .e-paragraph-base a { all: unset; cursor: pointer; } .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } @media screen and (max-height: 1024px) { .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } } @media screen and (max-height: 640px) { .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } } /* ---- typography ------------------------------------------------------ */ /* Archivo (the template's display face) ships no Cyrillic subset, so Russian headings need a fallback that does. */ body, h1, h2, h3, h4, h5, h6, .elementor-heading-title, .ekit-heading--title { font-feature-settings: "kern"; } :lang(ru) h1, :lang(ru) h2, :lang(ru) h3, :lang(ru) h4, :lang(ru) h5, :lang(ru) h6, :lang(ru) .elementor-heading-title, :lang(ru) .ekit-heading--title { font-family: "IBM Plex Sans", "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif; } /* ---- language switcher ----------------------------------------------- */ .mh-lang-switch { display: flex; align-items: center; gap: 2px; margin-right: 14px; } .mh-lang-switch__item { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 30px; font-size: 13px; font-weight: 600; line-height: 1; color: #fff; opacity: .7; text-decoration: none; transition: opacity .15s ease, background-color .15s ease; } .mh-lang-switch__item:hover { opacity: 1; color: #fff; } .mh-lang-switch__item.is-active { background: rgba(255, 255, 255, .18); opacity: 1; } /* Inner pages put the header on a light background. */ body:not(.home) .mh-lang-switch__item { color: inherit; } @media (max-width: 1024px) { .mh-lang-switch { margin-right: 8px; } .mh-lang-switch__item { min-width: 28px; height: 26px; font-size: 12px; } } /* ---- forms ----------------------------------------------------------- */ .mh-form-message { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; line-height: 1.5; } .mh-form-message--success { background: #e7f7ec; color: #17663a; border: 1px solid #b7e4c6; } .mh-form-message--error { background: #fdecec; color: #8c1d1d; border: 1px solid #f5c2c2; } .mh-field-error { display: block; margin-top: 6px; font-size: 12.5px; color: #d63636; } .mf-input.has-error, .mf-textarea.has-error, select.mf-input.has-error { border-color: #d63636 !important; } .mh-required { color: #d63636; } /* ---- small helpers --------------------------------------------------- */ .mh-menu-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 20px; background: rgba(255, 255, 255, .16); font-size: 11px; font-weight: 600; vertical-align: middle; } .mh-empty-state { padding: 60px 20px; text-align: center; color: #7a8598; font-size: 16px; } /* ---- pagination ------------------------------------------------------ */ .mh-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 40px 0 0; padding: 0; } .mh-pagination li a, .mh-pagination li span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid #e2e6ee; border-radius: 50px; background: #fff; color: #1b2130; font-weight: 600; font-size: 14px; text-decoration: none; transition: all .15s ease; } .mh-pagination li a:hover { border-color: #1b2130; } .mh-pagination li.active span, .mh-pagination li.active a { background: #1b2130; border-color: #1b2130; color: #fff; } .mh-pagination li.disabled span { opacity: .45; } /* ---- article body ---------------------------------------------------- */ .mh-content-body { font-size: 16px; line-height: 1.8; } .mh-content-body h2 { font-size: 30px; margin: 32px 0 14px; } .mh-content-body h3 { font-size: 24px; margin: 28px 0 12px; } .mh-content-body h4 { font-size: 20px; margin: 24px 0 10px; } .mh-content-body p { margin-bottom: 18px; } .mh-content-body ul, .mh-content-body ol { margin: 0 0 18px 22px; } .mh-content-body li { margin-bottom: 8px; } .mh-content-body img { max-width: 100%; height: auto; border-radius: 14px; margin: 12px 0; } .mh-content-body blockquote { margin: 24px 0; padding: 18px 24px; border-left: 4px solid #1b2130; background: #f6f8fb; border-radius: 0 12px 12px 0; font-style: italic; } .mh-content-body table { width: 100%; border-collapse: collapse; margin-bottom: 18px; } .mh-content-body th, .mh-content-body td { padding: 10px 14px; border: 1px solid #e2e6ee; text-align: left; } .mh-content-body a { text-decoration: underline; } /* ---- gallery --------------------------------------------------------- */ .mh-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 28px 0; } .mh-gallery-grid img { width: 100%; height: 200px; object-fit: cover; border-radius: 14px; } /* ---- partner strip (not in the original template) -------------------- */ .mh-partners { padding: 56px 0; } .mh-partners__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px 56px; width: 100%; } .mh-partners__logo { max-height: 46px; width: auto; filter: grayscale(1); opacity: .55; transition: opacity .2s ease, filter .2s ease; } .mh-partners__grid a:hover .mh-partners__logo, .mh-partners__grid span:hover .mh-partners__logo { filter: none; opacity: 1; } /* Plan feature that is not included in the tariff. */ .elementor-icon-list-item.mh-feature-off { opacity: .45; } .elementor-icon-list-item.mh-feature-off .elementor-icon-list-text { text-decoration: line-through; } /* ---- category filter chips ------------------------------------------- */ .mh-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .mh-filter__item { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border: 1px solid #e2e6ee; border-radius: 50px; background: #fff; color: #1b2130; font-size: 14px; font-weight: 500; text-decoration: none; transition: all .15s ease; } .mh-filter__item:hover { border-color: #1b2130; color: #1b2130; } .mh-filter__item.is-active { background: #1b2130; border-color: #1b2130; color: #fff; } /* ---- service detail --------------------------------------------------- */ .mh-service-cta { margin-top: 28px; padding: 28px 26px; border-radius: 16px; background: #12332a; color: #fff; } .mh-service-cta h5 { color: #fff; font-size: 21px; line-height: 1.3; margin: 0 0 10px; } .mh-service-cta p { color: rgba(255, 255, 255, .72); font-size: 14px; margin: 0 0 14px; } .mh-service-cta__phone { display: block; font-size: 20px; font-weight: 700; color: #e8f36b; text-decoration: none; margin-bottom: 18px; } .mh-service-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin: 28px 0; padding: 22px 26px; border: 1px solid #e2e6ee; border-radius: 16px; background: #f8fafc; } .mh-service-price__label { font-size: 14px; color: #6b7280; } .mh-service-price__value { font-size: 26px; font-weight: 700; color: #12332a; } .mh-service-price__meta { font-size: 14px; color: #6b7280; margin-left: auto; } .mh-section-subtitle { margin: 36px 0 14px; font-size: 22px; } /* ---- project detail --------------------------------------------------- */ .mh-project { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; width: 100%; padding: 72px 0; } .mh-project__cover { width: 100%; border-radius: 18px; margin-bottom: 26px; } .mh-project__lead { font-size: 19px; line-height: 1.7; color: #38414f; margin-bottom: 24px; } .mh-facts { padding: 26px; border: 1px solid #e2e6ee; border-radius: 16px; background: #fff; } .mh-facts h5 { margin: 0 0 14px; font-size: 19px; } .mh-facts__row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid #f0f2f7; font-size: 14.5px; } .mh-facts__row:last-child { border-bottom: 0; } .mh-facts__label { color: #6b7280; } .mh-facts__value { font-weight: 600; text-align: right; } @media (max-width: 1024px) { .mh-project { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 48px 0; } } /* ---- blog ------------------------------------------------------------- */ .mh-post { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 48px; padding: 72px 0; width: 100%; } .mh-post__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 0 0 18px; font-size: 14px; color: #6b7280; } .mh-post__meta a { color: inherit; } .mh-post__cover { width: 100%; border-radius: 18px; margin-bottom: 26px; } .mh-post__lead { font-size: 19px; line-height: 1.7; color: #38414f; margin-bottom: 22px; } .mh-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; } .mh-tags__item { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid #e2e6ee; border-radius: 50px; font-size: 13px; color: #4b5563; text-decoration: none; transition: all .15s ease; } .mh-tags__item:hover, .mh-tags__item.is-active { background: #12332a; border-color: #12332a; color: #fff; } .mh-widget { padding: 24px; border: 1px solid #e2e6ee; border-radius: 16px; margin-bottom: 20px; background: #fff; } .mh-widget h5 { margin: 0 0 14px; font-size: 18px; } .mh-widget__list { list-style: none; margin: 0; padding: 0; } .mh-widget__list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0f2f7; font-size: 14.5px; } .mh-widget__list li:last-child { border-bottom: 0; } .mh-widget__list a { color: #1b2130; text-decoration: none; } .mh-widget__list a:hover { color: #12332a; text-decoration: underline; } .mh-widget__list span { color: #9aa3b2; font-size: 13px; } .mh-widget__post { display: flex; gap: 12px; padding: 10px 0; text-decoration: none; color: inherit; } .mh-widget__post img { width: 62px; height: 62px; object-fit: cover; border-radius: 10px; flex-shrink: 0; } .mh-widget__post strong { display: block; font-size: 14px; line-height: 1.4; font-weight: 600; } .mh-widget__post em { font-style: normal; font-size: 12.5px; color: #9aa3b2; } /* ---- comments --------------------------------------------------------- */ .mh-comments { margin-top: 48px; } .mh-comments__list { list-style: none; margin: 0 0 28px; padding: 0; } .mh-comments__item { padding: 18px 22px; border: 1px solid #e2e6ee; border-radius: 14px; margin-bottom: 12px; background: #fbfcfe; } .mh-comments__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 14px; } .mh-comments__head span { color: #9aa3b2; } .mh-comments__item p { margin: 0; font-size: 15px; line-height: 1.6; } .mh-comment-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (max-width: 1024px) { .mh-post { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 0; } .mh-comment-form__row { grid-template-columns: minmax(0, 1fr); } } /* ---- team member ------------------------------------------------------ */ .mh-member { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 48px; padding: 72px 0; width: 100%; } .mh-member__photo img { width: 100%; border-radius: 18px; } .mh-member__info h2 { font-size: 38px; margin: 0 0 6px; } .mh-member__position { font-size: 17px; color: #12332a; font-weight: 600; margin-bottom: 20px; } .mh-member__socials { margin-top: 22px; } @media (max-width: 1024px) { .mh-member { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 48px 0; } .mh-member__info h2 { font-size: 30px; } } /* ---- contact page ----------------------------------------------------- */ .mh-contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; width: 100%; padding: 64px 0 0; } .mh-contact-card { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px; border: 1px solid #e2e6ee; border-radius: 16px; background: #fff; } .mh-contact-card__icon { width: 46px; height: 46px; border-radius: 50%; background: #12332a; color: #e8f36b; display: grid; place-items: center; font-size: 19px; margin-bottom: 6px; } .mh-contact-card__label { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #9aa3b2; } .mh-contact-card__value { font-size: 16px; font-weight: 600; color: #1b2130; text-decoration: none; } .mh-contact-card__value:hover { color: #12332a; } .mh-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; width: 100%; padding: 56px 0 72px; } .mh-contact__form h2 { font-size: 34px; margin: 0 0 10px; } .mh-contact__form > p { color: #6b7280; margin-bottom: 24px; } .mh-contact__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .mh-contact__map { min-height: 420px; border-radius: 18px; overflow: hidden; border: 1px solid #e2e6ee; } .mh-contact__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; } .mh-page-body { padding: 56px 0; width: 100%; } @media (max-width: 1024px) { .mh-contact { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px 0 56px; } .mh-contact__row { grid-template-columns: minmax(0, 1fr); } .mh-contact-cards { padding-top: 40px; } } /* ---- reviews page ----------------------------------------------------- */ .mh-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; width: 100%; padding: 64px 0 0; } .mh-review { padding: 30px 28px; border: 1px solid #e2e6ee; border-radius: 18px; background: #fff; display: flex; flex-direction: column; gap: 16px; } .mh-review__rating { display: flex; align-items: center; gap: 6px; font-size: 18px; } .mh-review__star svg { width: 18px; height: 18px; fill: #f0b429; } .mh-review__scale { color: #9aa3b2; font-size: 14px; } .mh-review__text { margin: 0; font-size: 16px; line-height: 1.7; color: #38414f; flex: 1; } .mh-review__author { display: flex; align-items: center; gap: 12px; } .mh-review__author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .mh-review__author strong { display: block; font-size: 15px; } .mh-review__author em { font-style: normal; font-size: 13px; color: #9aa3b2; } /* ---- search ----------------------------------------------------------- */ .mh-search { display: flex; gap: 12px; margin-bottom: 32px; } .mh-search .mf-input { flex: 1; } .mh-search__summary { color: #6b7280; margin-bottom: 12px; } .mh-search__list { list-style: none; margin: 0 0 26px; padding: 0; } .mh-search__list li { padding: 16px 0; border-bottom: 1px solid #f0f2f7; } .mh-search__list a { font-size: 18px; font-weight: 600; color: #1b2130; text-decoration: none; } .mh-search__list a:hover { color: #12332a; text-decoration: underline; } .mh-search__list p { margin: 6px 0 0; color: #6b7280; font-size: 14.5px; } /* ---- error page ------------------------------------------------------- */ .mh-error { padding: 90px 0; text-align: center; width: 100%; } .mh-error__label { margin-bottom: 18px; } .mh-error__code { font-size: 120px; font-weight: 800; line-height: 1; color: #12332a; } .mh-error__title { font-size: 40px; margin: 12px 0; } .mh-error__text { color: #6b7280; max-width: 560px; margin: 0 auto 28px; } /* ---- maintenance ------------------------------------------------------ */ .mh-maintenance { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #0f1620; } .mh-maintenance__card { max-width: 520px; text-align: center; background: #fff; border-radius: 20px; padding: 48px 40px; } .mh-maintenance__logo { max-width: 220px; margin-bottom: 24px; } .mh-maintenance__card h1 { font-size: 28px; margin: 0 0 12px; } .mh-maintenance__card p { color: #6b7280; margin-bottom: 20px; } .mh-maintenance__phone { font-size: 22px; font-weight: 700; color: #12332a; text-decoration: none; } @media (max-width: 768px) { .mh-error__code { font-size: 78px; } .mh-error__title { font-size: 28px; } .mh-search { flex-direction: column; } } /* ---- forms rendered by MaxHelp (not by MetForm) ----------------------- */ .mh-contact__form .mf-input-wrapper, .mh-comment-form .mf-input-wrapper { margin-bottom: 16px; } .mh-contact__form .mf-input-label, .mh-comment-form .mf-input-label, .mh-search .mf-input-label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: #1b2130; } .mh-contact__form .mf-input, .mh-comment-form .mf-input, .mh-search .mf-input { width: 100%; max-width: 100%; padding: 14px 18px; border: 1px solid #e2e6ee; border-radius: 10px; background: #fbfcfe; font-size: 15px; color: #1b2130; transition: border-color .15s ease, background-color .15s ease; } .mh-contact__form .mf-input:focus, .mh-comment-form .mf-input:focus, .mh-search .mf-input:focus { border-color: #12332a; background: #fff; outline: none; } .mh-contact__form .mf-textarea, .mh-comment-form .mf-textarea { min-height: 130px; resize: vertical; } /* The template's button colours only exist inside the MetForm scope, so give the hand-written forms the same look. */ .mh-contact__form button.metform-btn, .mh-comment-form button.metform-btn, .mh-search button.metform-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 32px; border: 0; border-radius: 50px; background-color: #12332a; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, transform .15s ease; } .mh-contact__form button.metform-btn:hover, .mh-comment-form button.metform-btn:hover, .mh-search button.metform-btn:hover { background-color: #e8f36b; color: #12332a; } .metform-btn.is-loading { opacity: .7; pointer-events: none; } /* Post meta items need a visible separator; the template relied on a widget setting that is not part of the exported markup. */ .posts-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; } .posts-meta > li + li::before { content: "·"; margin-right: 10px; opacity: .55; } /* ---- containers added by MaxHelp -------------------------------------- */ /* Elementor sizes its boxed containers through per-element CSS variables; the sections we add ourselves have no element id, so they need the same width and gutters explicitly. */ .mh-con { --content-width: 1200px; } .mh-con > .e-con-inner { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; display: flex; flex-direction: column; } @media (max-width: 767px) { .mh-con > .e-con-inner { padding-left: 16px; padding-right: 16px; } } /* ---- header CTA button ------------------------------------------------ */ /* The template fixed this column at 20% (200 px on tablet), which was enough for the short English label. A longer one — "Buyurtma berish" — plus the language switcher next to it pushed the text onto a second line, so the column now follows its content and the label stays on one line. */ .elementor-53 .elementor-element.elementor-element-7ffc45b { --width: auto; flex: 0 0 auto; white-space: nowrap; } .elementor-53 .elementor-element.elementor-element-31a043d, .elementor-53 .elementor-element.elementor-element-31a043d .elementor-button { width: auto; max-width: none; white-space: nowrap; } /* The menu column gives up the space instead. */ .elementor-53 .elementor-element.elementor-element-503fb74 { min-width: 0; flex: 1 1 auto; } /* ---- hero background video -------------------------------------------- */ /* The video sits under the hero text, so the dark overlay has to sit between the two. Elementor paints that overlay as the video container's ::before (z-index 1 inside the container's own stacking context); the section's own ::before is below the video and would only double the darkening, so it is dropped while a video is playing. */ .elementor-9 .elementor-element.elementor-element-74f5bce.mh-hero--video::before { content: none; } .mh-hero-video { container-type: size; } /* YouTube keeps the clip's 16:9 ratio inside whatever frame it is given, so a stretched iframe would show black bars. The frame is oversized to cover the section instead, and centred by Elementor's own translate(-50%, -50%). The extra 15% crops the strips where the player would draw its title and controls, in case it ever flashes them on a loop restart. */ .mh-hero-video { --mh-video-zoom: 1.15; } .mh-hero-video .elementor-background-video-embed { width: calc(max(100vw, 177.7778vh) * var(--mh-video-zoom)); height: calc(max(56.25vw, 100vh) * var(--mh-video-zoom)); max-width: none; } @supports (width: 1cqw) { /* Same cover maths against the hero itself rather than the viewport. */ .mh-hero-video .elementor-background-video-embed { width: calc(max(100cqw, 177.7778cqh) * var(--mh-video-zoom)); height: calc(max(56.25cqw, 100cqh) * var(--mh-video-zoom)); } } .mh-hero-video .elementor-background-video-hosted { width: 100%; height: 100%; max-width: none; } /* Fade the clip in once it actually plays, so the poster image is never replaced by a black frame. */ .mh-hero-video .elementor-background-video-embed, .mh-hero-video .elementor-background-video-hosted { opacity: 0; transition: opacity .8s ease; } .mh-hero-video.is-playing .elementor-background-video-embed, .mh-hero-video.is-playing .elementor-background-video-hosted { opacity: 1; } /* On phones autoplay is unreliable and the embed is pure weight, and a visitor who asked for less motion should not get a looping clip. The container stays so the overlay keeps working; the poster image shows through it. */ @media (max-width: 767px) { .mh-hero-video .elementor-background-video-embed, .mh-hero-video .elementor-background-video-hosted { display: none; } } @media (prefers-reduced-motion: reduce) { .mh-hero-video .elementor-background-video-embed, .mh-hero-video .elementor-background-video-hosted { display: none; } } /* ---- footer about column ---------------------------------------------- */ /* The newsletter panel used to sit next to this column and fill the row, so the template kept the column narrow at 30%. On its own it reads as a stranded third of a row, and the description broke over three short lines; a little more width gives the paragraph a normal measure. */ @media (min-width: 1025px) { .elementor-54 .elementor-element.elementor-element-45d7a72 { --width: 40%; } } /* ---- booking form ------------------------------------------------------ */ /* The template's grid declared three fixed rows for six fields. The form now asks for a name and a phone only, so the rows follow the content instead of leaving two empty bands below them. */ .elementor-625 .elementor-element.elementor-element-7d4cdd0a { --e-con-grid-template-rows: auto; } /* ---- client logo strip ------------------------------------------------- */ /* This carousel used to scroll photographs, which filled their slide edge to edge. Logos come in every proportion and often on transparent ground, so each one gets a tile of its own to sit in, centred and never stretched. */ .mh-client-strip .swiper-slide-inner { display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 16px 20px; border-radius: 8px; background: rgba(17, 43, 39, .04); border: 1px solid rgba(17, 43, 39, .08); } .mh-client-strip .swiper-slide-inner a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .mh-client-strip__logo { max-height: 44px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .7; transition: opacity .2s ease, filter .2s ease; } .mh-client-strip .swiper-slide-inner:hover .mh-client-strip__logo { filter: none; opacity: 1; } /* ---- projects grid ----------------------------------------------------- */ /* The template laid out exactly three project cards in one non-wrapping row, each declared at width 100% so flexbox simply split the row between them. With six projects the same rule squeezed every card to a 160px sliver, so the row now wraps and a card claims a third of it (two 64px gaps). The alternating top margins that stagger the cards are the template's own and keep working row by row. */ .elementor-18 .elementor-element.elementor-element-149223c { flex-wrap: wrap; align-items: flex-start; } .elementor-18 .elementor-element.elementor-element-149223c > .e-con { --width: calc((100% - 128px) / 3); flex: 0 0 auto; } @media (max-width: 1024px) { /* The template turns the row into a column here, so the width goes back. */ .elementor-18 .elementor-element.elementor-element-149223c > .e-con { --width: 100%; } } /* ---- first-order discount coupon --------------------------------------- */ .mh-promo { padding: 24px 0 8px; } .mh-coupon { --mh-coupon-stub: 240px; /* where the perforation runs */ --mh-coupon-notch: 30px; --mh-coupon-page: #fefefe; /* the ground the notches are punched out of */ position: relative; display: flex; align-items: stretch; width: 100%; border-radius: 18px; background: var(--e-global-color-primary, #154b4a); color: #fff; box-shadow: 0 18px 40px rgba(12, 40, 39, .14); transition: transform .25s ease, box-shadow .25s ease; } .mh-coupon:hover { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(12, 40, 39, .2); } /* The two half-circles bitten out of the seam, the way a torn-off stub looks. */ .mh-coupon::before, .mh-coupon::after { content: ''; position: absolute; left: var(--mh-coupon-stub); width: var(--mh-coupon-notch); height: var(--mh-coupon-notch); border-radius: 50%; background: var(--mh-coupon-page); transform: translate(-50%, -50%); } .mh-coupon::before { top: 0; } .mh-coupon::after { top: 100%; } /* ---- stub (the big number) */ .mh-coupon__stub { flex: 0 0 var(--mh-coupon-stub); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 40px 24px; border-radius: 18px 0 0 18px; background: var(--e-global-color-accent, #f7e504); color: var(--e-global-color-secondary, #0c2827); /* the perforation itself */ -webkit-mask-image: none; position: relative; } .mh-coupon__stub::after { content: ''; position: absolute; top: 18px; bottom: 18px; right: 0; border-right: 2px dashed rgba(12, 40, 39, .28); } .mh-coupon__percent { display: flex; align-items: flex-start; line-height: .9; font-weight: 700; font-size: clamp(52px, 6vw, 76px); letter-spacing: -.03em; } .mh-coupon__sign { font-size: .5em; margin-top: .18em; margin-left: .04em; } .mh-coupon__off { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .75; } /* ---- body */ .mh-coupon__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 36px 40px; } .mh-coupon__title { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; color: #fff; } .mh-coupon__text { margin: 0; max-width: 56ch; color: rgba(255, 255, 255, .78); } .mh-coupon__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 4px; } /* The code reads as something you can pick up — dashed, and it reacts. */ .mh-coupon__code { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 20px; border: 2px dashed rgba(255, 255, 255, .38); border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff; font: inherit; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .12s ease; } .mh-coupon__code:hover { border-color: var(--e-global-color-accent, #f7e504); background: rgba(255, 255, 255, .1); } .mh-coupon__code:active { transform: scale(.98); } .mh-coupon__code.is-copied { border-style: solid; border-color: var(--e-global-color-accent, #f7e504); } .mh-coupon__code-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; } .mh-coupon__code-value { font-size: 20px; font-weight: 700; letter-spacing: .08em; } .mh-coupon__code-hint { font-size: 12px; color: var(--e-global-color-accent, #f7e504); } .mh-coupon__cta { display: inline-flex; align-items: center; padding: 14px 28px; border-radius: 50px; background: var(--e-global-color-accent, #f7e504); color: var(--e-global-color-secondary, #0c2827); font-weight: 600; white-space: nowrap; transition: filter .2s ease, transform .12s ease; } .mh-coupon__cta:hover { filter: brightness(1.06); } .mh-coupon__cta:active { transform: scale(.98); } .mh-coupon__note { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .55); } /* ---- narrow screens: the stub moves on top and the seam turns horizontal */ @media (max-width: 767px) { .mh-coupon { --mh-coupon-stub: 168px; flex-direction: column; } .mh-coupon::before, .mh-coupon::after { left: auto; top: var(--mh-coupon-stub); } .mh-coupon::before { left: 0; transform: translate(-50%, -50%); } .mh-coupon::after { right: 0; top: var(--mh-coupon-stub); transform: translate(50%, -50%); } .mh-coupon__stub { flex: 0 0 var(--mh-coupon-stub); border-radius: 18px 18px 0 0; } .mh-coupon__stub::after { top: auto; right: 18px; left: 18px; bottom: 0; border-right: 0; border-bottom: 2px dashed rgba(12, 40, 39, .28); } .mh-coupon__body { padding: 28px 24px; } .mh-coupon__cta { width: 100%; justify-content: center; } } /* ---- hero showreel (round player) -------------------------------------- */ /* The headline column and the circle sit side by side; the highlight chips and the social links keep the bottom of the hero to themselves. */ .mh-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 48px; width: 100%; } .mh-reel { --mh-reel-size: clamp(260px, 30vw, 420px); position: relative; flex: 0 0 auto; width: var(--mh-reel-size); height: var(--mh-reel-size); } /* The dashed ring that orbits the circle. */ .mh-reel__ring { position: absolute; inset: -26px; border: 2px dashed rgba(255, 255, 255, .45); border-radius: 50%; animation: mh-reel-spin 46s linear infinite; } .mh-reel__disc { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; overflow: hidden; background: var(--e-global-color-secondary, #0c2827); cursor: pointer; box-shadow: 0 30px 70px rgba(12, 40, 39, .45); transition: box-shadow .3s ease; } /* No transform on hover: scaling an element that clips a cross-origin iframe to a circle promotes it to its own layer, and Chrome then draws the frame square — the circle turns into a rectangle under the pointer. The shadow carries the hover on its own. */ .mh-reel__disc:hover { box-shadow: 0 36px 90px rgba(12, 40, 39, .55); } /* `.elementor img { height: auto }` outranks a plain class here, which leaves the poster as a 16:9 strip across the top of the circle. */ .mh-reel .mh-reel__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Matches the clip's magnification, so the hand-over does not jump. */ transform: scale(var(--mh-reel-zoom)); } /* Square hole, 16:9 clip. `.elementor iframe { width: 100% }` outranks a bare class, which left the frame portrait-shaped and YouTube letterboxed the clip inside it — black bands across the top and bottom of the circle. The size is spelled out instead of left to `width: auto`: the height covers the circle with the zoom to spare, and the width follows it at 16:9. */ .mh-reel { --mh-reel-zoom: 1.3; } .mh-reel .mh-reel__frame { position: absolute; top: 50%; left: 50%; height: calc(100% * var(--mh-reel-zoom)); width: calc(100% * var(--mh-reel-zoom) * 16 / 9); max-width: none; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity .35s ease; } .mh-reel.is-playing .mh-reel__frame { opacity: 1; } /* ---- the "play showreel" badge, riding the lower-left edge */ .mh-reel__badge { position: absolute; left: -6%; bottom: 2%; width: 34%; height: 34%; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--e-global-color-primary, #154b4a); box-shadow: 0 12px 30px rgba(12, 40, 39, .25); pointer-events: none; } /* Same story as the poster: a bare class loses, and the ring collapses to the 16px an unsized falls back to. */ .mh-reel .mh-reel__rim { position: absolute; inset: 0; width: 100%; height: 100%; animation: mh-reel-spin 14s linear infinite; } .mh-reel__rim text { font-size: 7.4px; font-weight: 600; letter-spacing: .22em; fill: var(--e-global-color-primary, #154b4a); } .mh-reel .mh-reel__play { position: relative; width: 26%; height: 26%; } .mh-reel__disc:hover ~ .mh-reel__badge { transform: scale(1.06); } .mh-reel__badge { transition: transform .3s ease; } /* ---- sound toggle, lower-right */ .mh-reel__sound { position: absolute; right: 13%; bottom: 13%; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(12, 40, 39, .6); backdrop-filter: blur(6px); color: #fff; cursor: pointer; transition: background .2s ease, transform .12s ease; } .mh-reel__sound:hover { background: var(--e-global-color-primary, #154b4a); } .mh-reel__sound:active { transform: scale(.94); } /* `flex: none` because an without width/height attributes measures as a zero-width flex item in Chrome, however plainly the CSS states its size. */ .mh-reel .mh-reel__icon { flex: none; width: 20px; height: 20px; } .mh-reel__icon--loud { display: none; } .mh-reel[data-sound="on"] .mh-reel__icon--muted { display: none; } .mh-reel[data-sound="on"] .mh-reel__icon--loud { display: block; } @keyframes mh-reel-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .mh-reel__ring, .mh-reel__rim { animation: none; } } /* ---- the big view */ .mh-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 20, 19, .92); opacity: 0; transition: opacity .25s ease; } .mh-lightbox.is-open { opacity: 1; } .mh-lightbox__frame { width: min(100%, 1180px); aspect-ratio: 16 / 9; border: 0; border-radius: 14px; background: #000; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); transform: scale(.96); transition: transform .25s ease; } .mh-lightbox.is-open .mh-lightbox__frame { transform: scale(1); } .mh-lightbox__close { position: absolute; top: 20px; right: 24px; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s ease; } .mh-lightbox__close:hover { background: rgba(255, 255, 255, .18); } body.mh-lightbox-open { overflow: hidden; } /* ---- narrow screens: the circle moves under the headline */ @media (max-width: 1024px) { .mh-hero-top { flex-direction: column; align-items: flex-start; gap: 40px; } .mh-reel { --mh-reel-size: min(78vw, 340px); align-self: center; } } @media (max-width: 767px) { /* On a phone the circle is the hero's picture, and under the headline it landed some 670px down — below the fold and behind the floating promo, so it read as missing. It leads instead. */ .mh-hero-top { flex-direction: column-reverse; gap: 32px; } .mh-reel { --mh-reel-size: min(72vw, 300px); } } /* ---- pricing heading --------------------------------------------------- */ /* The template pinned this heading to 486px, which suited the short English line it shipped with. "Har bir makon uchun qulay tariflar" broke over three lines in that width and left the section top-heavy, so the heading gets the room to settle into two. */ .elementor-9 .elementor-element.elementor-element-e3ef526 { width: 780px; max-width: 100%; --container-widget-width: 780px; } /* ---- small promo reminders --------------------------------------------- */ .mh-promo-chip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; font-size: 14px; line-height: 1.3; } .mh-promo-chip__badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 50px; background: var(--e-global-color-accent, #f7e504); color: var(--e-global-color-secondary, #0c2827); font-weight: 700; letter-spacing: -.01em; } .mh-promo-chip__text { flex: 1 1 140px; min-width: 0; } .mh-promo-chip__code { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 14px; border: 1px dashed currentColor; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: border-style .2s ease, background .2s ease, transform .12s ease; } .mh-promo-chip__code:active { transform: scale(.97); } .mh-promo-chip__code.is-copied { border-style: solid; } .mh-promo-chip__value { font-weight: 700; letter-spacing: .06em; } .mh-promo-chip__hint { font-size: 12px; opacity: .75; } /* ---- beside the booking form, on its dark panel */ .mh-promo-chip--inline { margin-bottom: 20px; padding: 14px 16px; border-radius: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #fff; } .mh-promo-chip--inline .mh-promo-chip__code:hover { background: rgba(255, 255, 255, .1); } /* ---- the floating reminder */ .mh-promo-chip--toast { position: fixed; left: 24px; bottom: 24px; z-index: 900; max-width: min(380px, calc(100vw - 48px)); padding: 16px 46px 16px 18px; border-radius: 14px; background: var(--e-global-color-primary, #154b4a); color: #fff; box-shadow: 0 20px 50px rgba(12, 40, 39, .35); transition: transform .35s ease, opacity .35s ease; } .mh-promo-chip--toast.is-hidden { transform: translateY(24px); opacity: 0; pointer-events: none; } .mh-promo-chip--toast .mh-promo-chip__code:hover { background: rgba(255, 255, 255, .1); } .mh-promo-chip__close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 20px; line-height: 1; opacity: .6; cursor: pointer; transition: opacity .2s ease, background .2s ease; } .mh-promo-chip__close:hover { opacity: 1; background: rgba(255, 255, 255, .12); } @media (max-width: 767px) { .mh-promo-chip--toast { left: 12px; right: 12px; bottom: 12px; max-width: none; } } @media (prefers-reduced-motion: reduce) { .mh-promo-chip--toast { transition: opacity .35s ease; } .mh-promo-chip--toast.is-hidden { transform: none; } } /* ---- services heading -------------------------------------------------- */ /* The template gave this column 43% — enough for its short English line, but "Har qanday makon uchun tozalash yechimlari" stacked into four at 64px and left the middle of the row empty. At 62% it reads in two and closes most of the gap to the button beside it. */ @media (min-width: 1025px) { .elementor-9 .elementor-element.elementor-element-37f077e { --width: 62%; } } /* ---- brand logo -------------------------------------------------------- */ /* The template's placeholder was nearly square, so 128px of width gave it a reasonable height. MaxHelp's mark is 5.6:1, which left the wordmark 23px tall and lost against the header — these widths bring it back to a normal height for the bar and the footer it sits in. */ .elementor-53 .elementor-element.elementor-element-51ed5b1 img { width: 190px; } .elementor-54 .elementor-element.elementor-element-1f4bc1a .elementor-image-box-wrapper .elementor-image-box-img { width: 210px; } /* The contact page's own message form is gone — enquiries come in through the booking form below — so the map has the row to itself. */ .mh-contact--map-only { grid-template-columns: minmax(0, 1fr); } /* ---- banner video ------------------------------------------------------ */ /* The clip fills the banner the photograph used to. The template paints its dark overlay as the video container's ::before, which sits above the frame; the section's own ::before is below it and would only double the darkening. */ .mh-banner--video::before { content: none; } /* `.elementor iframe { width: 100% }` outranks a bare class and would leave the frame the shape of the banner, with YouTube letterboxing the clip inside it. The size is spelled out instead — but a percentage width resolves against the box's width and a percentage height against its height, which is no use for covering a 3.4:1 banner with a 16:9 clip. Container units measure both axes against the same box, so the cover maths works there. */ .mh-banner-video { --mh-banner-zoom: 1.15; container-type: size; } .mh-banner-video .mh-banner-video__frame { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; max-width: none; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity .8s ease; } @supports (width: 1cqw) { .mh-banner-video .mh-banner-video__frame { width: calc(max(100cqw, 177.7778cqh) * var(--mh-banner-zoom)); height: calc(max(56.25cqw, 100cqh) * var(--mh-banner-zoom)); } } .mh-banner--video.is-playing .mh-banner-video__frame { opacity: 1; } /* ---- play and sound, over the clip */ .mh-banner-video__controls { position: absolute; right: 32px; bottom: 28px; z-index: 3; display: flex; align-items: center; gap: 10px; } .mh-banner-video__btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 50px; background: rgba(12, 40, 39, .5); backdrop-filter: blur(6px); color: #fff; font: inherit; font-size: 15px; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .12s ease; } .mh-banner-video__btn:hover { background: var(--e-global-color-accent, #f7e504); border-color: var(--e-global-color-accent, #f7e504); color: var(--e-global-color-secondary, #0c2827); } .mh-banner-video__btn:active { transform: scale(.97); } .mh-banner-video__btn--play svg { flex: none; width: 18px; height: 18px; } .mh-banner-video__btn--sound { width: 46px; padding: 0; justify-content: center; } /* `flex: none` because an without width/height attributes measures as a zero-width flex item in Chrome; the extra class because a bare one loses the width and the glyph gets clipped inside a box narrower than its own. */ .mh-banner-video__controls .mh-banner-video__icon { flex: none; width: 20px; height: 20px; } .mh-banner-video__icon--loud { display: none; } .mh-banner--video[data-sound="on"] .mh-banner-video__icon--muted { display: none; } .mh-banner--video[data-sound="on"] .mh-banner-video__icon--loud { display: block; } @media (max-width: 767px) { .mh-banner-video__controls { right: 16px; bottom: 16px; } .mh-banner-video__btn--play span { display: none; } .mh-banner-video__btn--play { width: 46px; padding: 0; justify-content: center; } } /* ---- controls the kit thinks are its buttons --------------------------- */ /* `.elementor-kit-3 button:hover` paints every