@charset "UTF-8";

/* Final public-site integration rules. Component files are linked directly by
   sites/partials/assets.php so the browser can fetch them in parallel. */

/* Contact heading: keep the subtitle below the decorative title mark. */
body .contact-rtl .main-heading h2 {
  margin-bottom: clamp(44px, 4vw, 54px) !important;
}

body .contact-rtl .main-heading .contact-heading-subtitle {
  display: block !important;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  color: var(--Secondary-color) !important;
  font-weight: 800 !important;
  line-height: 1.9 !important;
}

/* Public hero action layout. */
body :where(.landing-rtl .hero-actions, .landing-ltr .hero-actions, .seo-actions) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

@media (max-width: 767px) {
  body :where(.landing-rtl .hero-actions, .landing-ltr .hero-actions, .seo-actions) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)) !important;
    width: 100% !important;
    max-width: 430px !important;
  }
}

.currency-equivalent {
  display: block;
  margin-top: 5px;
  color: var(--gray-color, #9F9F9F);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

/* Remove vertical side rails from public site hero blocks. */
body :is(
  .hero,
  .site-hero,
  .landing-hero,
  .main-hero,
  .home-hero,
  .page-hero,
  .service-hero,
  .seo-hero,
  .support-search-hero,
  .support-topic-hero,
  .support-knowledge-hero,
  .about-hero-note
) {
  border-inline-start: 0 !important;
  border-right-width: 0 !important;
  border-left-width: 0 !important;
}

/* Gallery tab layout. */
.gallery :where(.gallery-media-tabs, .gallery-category-tabs, .gallery-media-category-tabs) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.gallery :where(.gallery-category-tabs, .gallery-media-category-tabs)[hidden],
.gallery :where(.gallery-application-grid, .gallery-video-grid, .imgs-container)[hidden],
.gallery .application-project-card[hidden] {
  display: none !important;
}

.gallery .application-project-link,
.gallery .application-project-link:visited,
.gallery .application-project-link:hover,
.gallery .application-project-link:focus-visible,
.gallery .application-project-link:active,
.gallery .application-project-link :where(i, span) {
  color: #ffffff !important;
}

.gallery .application-project-link {
  border-color: var(--main-color) !important;
  background: var(--main-color) !important;
}

.gallery .application-project-link:hover,
.gallery .application-project-link:focus-visible,
.gallery .application-project-link:active {
  border-color: var(--Secondary-color) !important;
  background: var(--Secondary-color) !important;
}

.gallery .gallery-application-grid[data-visible-count="0"] {
  grid-template-columns: 1fr !important;
}

.gallery .gallery-application-grid[data-visible-count="1"] {
  grid-template-columns: minmax(0, 380px) !important;
  justify-content: center !important;
}

.gallery .gallery-application-grid[data-visible-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 360px)) !important;
  justify-content: center !important;
}

@media (max-width: 820px) {
  .gallery .gallery-application-grid[data-visible-count="1"],
  .gallery .gallery-application-grid[data-visible-count="2"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

body :is(
  .hero,
  .site-hero,
  .landing-hero,
  .main-hero,
  .home-hero,
  .page-hero,
  .service-hero,
  .seo-hero,
  .support-search-hero,
  .support-topic-hero,
  .support-knowledge-hero,
  .about-hero-note
)::before,
body :is(
  .hero,
  .site-hero,
  .landing-hero,
  .main-hero,
  .home-hero,
  .page-hero,
  .service-hero,
  .seo-hero,
  .support-search-hero,
  .support-topic-hero,
  .support-knowledge-hero,
  .about-hero-note
)::after {
  border-inline-start: 0 !important;
  border-right-width: 0 !important;
  border-left-width: 0 !important;
}

/* Founder values: compact readable cards, not a merged text strip. */
.founder-section .founder-values {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)) !important;
  gap: 10px !important;
  width: min(100%, 560px) !important;
  margin-top: 18px !important;
}

.founder-section .founder-values span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  border: 1px solid rgb(222 0 125 / 14%) !important;
  border-radius: 10px !important;
  background: rgb(222 0 125 / 5%) !important;
  color: var(--main-color) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  white-space: normal !important;
}

.founder-section .founder-values span i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  color: inherit !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Founder profile card: keep the chairman card polished above shared card resets. */
.founder-section .founder-profile {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: clamp(16px, 2.4vw, 22px) !important;
  min-height: 100% !important;
  padding: clamp(30px, 4vw, 52px) 22px !important;
  border-color: rgb(222 0 125 / 18%) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgb(222 0 125 / 5%), rgb(255 255 255 / 0%) 42%),
    var(--General-color-W) !important;
  overflow: hidden !important;
  text-align: center !important;
}

.founder-section .founder-profile::before {
  content: "" !important;
  position: absolute !important;
  inset: 14px !important;
  z-index: -1 !important;
  border: 1px solid rgb(222 0 125 / 10%) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgb(222 0 125 / 7%), transparent 46%),
    linear-gradient(180deg, rgb(222 0 125 / 4%), transparent 58%) !important;
}

.founder-section .founder-logo-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(74%, 152px) !important;
  min-height: 50px !important;
  margin-top: 2px !important;
  padding: 8px 14px !important;
  border: 1px solid rgb(222 0 125 / 14%) !important;
  border-radius: 12px !important;
  background: var(--General-color-W) !important;
}

.founder-section .founder-logo {
  display: block !important;
  width: min(100%, 126px) !important;
  max-height: 34px !important;
  object-fit: contain !important;
}

.founder-section .founder-photo-frame {
  display: inline-grid !important;
  place-items: center !important;
  width: 172px !important;
  height: 172px !important;
  border: 1px solid rgb(222 0 125 / 18%) !important;
  border-radius: 50% !important;
  background:
    linear-gradient(var(--General-color-W), var(--General-color-W)) padding-box,
    linear-gradient(135deg, rgb(222 0 125 / 70%), rgb(222 0 125 / 16%)) border-box !important;
}

.founder-section .founder-photo {
  width: 150px !important;
  height: 150px !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: 51% 28% !important;
}

.founder-section .founder-profile-copy {
  display: grid !important;
  justify-items: center !important;
  gap: 10px !important;
}

.founder-section .founder-role {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  background: var(--main-color) !important;
  color: var(--General-color-W) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

.founder-section .founder-profile h2 {
  margin: 0 !important;
  color: var(--main-color) !important;
  font-size: clamp(25px, 3vw, 34px) !important;
  font-weight: 1000 !important;
  line-height: 1.35 !important;
}

@media (max-width: 767px) {
  .founder-section .founder-photo-frame {
    width: 140px !important;
    height: 140px !important;
  }

  .founder-section .founder-photo {
    width: 120px !important;
    height: 120px !important;
  }

  .founder-section .founder-logo-badge {
    width: min(78%, 144px) !important;
    min-height: 46px !important;
  }
}

/* Arabic is the primary and only visual language direction for the public site. */
html,
html body,
body[dir="rtl"],
body.rtl,
.rtl,
.landing-ltr,
.offers-ltr,
.contact-ltr {
  direction: rtl !important;
  text-align: right !important;
}

body :where(
  input,
  select,
  textarea,
  code,
  pre,
  .phone-number,
  .ltr-value,
  .site-language-switch
) {
  direction: rtl !important;
  text-align: right !important;
}

body :where(.header, .site-nav, .main-nav, .landing, .services, .offers, .gallery, .customers, .contact, .footer) {
  direction: rtl !important;
}

/* Mobile public buttons: one clear column with full-width controls. */
@media (max-width: 767px) {
  body .landing-rtl .hero-actions,
  body .landing-ltr .hero-actions,
  body .seo-actions,
  body .offers-rtl .offers-tabs,
  body .offers-ltr .offers-tabs,
  body #offerCatalogTabs,
  body #subscriptionDurationTabs,
  body .contact-switcher-actions,
  body .gallery .gallery-media-tabs,
  body .gallery .gallery-category-tabs,
  body .gallery .gallery-media-category-tabs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body .landing-rtl .hero-actions > .hero-btn,
  body .landing-ltr .hero-actions > .hero-btn,
  body .seo-actions > .hero-btn,
  body .offers-rtl .offers-tabs > .offers-tab-btn,
  body .offers-ltr .offers-tabs > .offers-tab-btn,
  body #offerCatalogTabs > button,
  body #subscriptionDurationTabs > label,
  body .contact-switcher-actions > button,
  body .gallery .gallery-media-tabs > :where(button, [role="tab"]),
  body .gallery .gallery-category-tabs > :where(button, label),
  body .gallery .gallery-media-category-tabs > :where(button, label) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  body :where(
    .hero-actions,
    .seo-actions,
    .service-detail-actions,
    .application-detail-actions,
    .about-contact-actions,
    .contact-switcher-actions,
    .contact-actions,
    .section-actions,
    .card-actions,
    .offer-actions,
    .offers-actions,
    .gallery-actions,
    .support-actions,
    .knowledge-actions,
    .service-modal-footer
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body :where(
    .hero-actions,
    .seo-actions,
    .service-detail-actions,
    .application-detail-actions,
    .about-contact-actions,
    .contact-switcher-actions,
    .contact-actions,
    .section-actions,
    .card-actions,
    .offer-actions,
    .offers-actions,
    .gallery-actions,
    .support-actions,
    .knowledge-actions,
    .service-modal-footer
  ) > :where(a, button, label, form, .hero-btn, .submit-btn, .offers-btn, .ads-whatsapp-btn, .other-services-whatsapp-btn, .service-modal-whatsapp, .service-modal-offers) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  body :where(
    .hero-btn,
    .submit-btn,
    .offers-btn,
    .ads-whatsapp-btn,
    .other-services-whatsapp-btn,
    .contact-switch-btn,
    .service-icon-btn,
    .service-modal-whatsapp,
    .service-modal-offers,
    .application-project-link,
    .public-assistant-trigger,
    .support-search-submit,
    button:not(.video-card),
    input[type="submit"],
    input[type="button"]
  ) {
    max-width: 100% !important;
    min-height: 44px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  body :where(.offers-tabs, .gallery-tabs, .gallery-category-tabs, .gallery-media-category-tabs, .support-filter-tabs) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body :where(.offers-tabs, .gallery-tabs, .gallery-category-tabs, .gallery-media-category-tabs, .support-filter-tabs) > :where(a, button) {
    width: 100% !important;
    min-width: 0 !important;
  }

  body :where(
    .whatsapp-btn,
    .contact-email-btn,
    .service-article-table-action,
    .about-contact-button,
    .phone,
    .seo-card-link
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* Final public icon alignment repair. */
html body :where(
  button:not(.video-card),
  .hero-btn,
  .submit-btn,
  .submit-button,
  .main-button,
  .offers-btn,
  .delete-btn,
  .ads-whatsapp-btn,
  .other-services-whatsapp-btn,
  .offer-whatsapp,
  .offers-tab-btn,
  .quick-budget button,
  .contact-switch-btn,
  .whatsapp-btn,
  .contact-email-btn,
  .phone.whatsapp-btn,
  .service-icon-btn,
  .service-modal-whatsapp,
  .service-modal-offers,
  .service-modal-close,
  .service-article-table-action,
  .application-project-link,
  .about-contact-button,
  .seo-card-link,
  .guides-filter button,
  .support-reset-filter,
  .tab button,
  .tablinks,
  .support-hero-search button,
  .support-search-form button,
  .support-search-submit,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab,
  .popup-image-close,
  .video-popup-close,
  .site-ai-toggle,
  .site-ai-close,
  .site-ai-form button,
  .mobile-nav-toggle,
  .scroll-top,
  .public-file-button,
  .pricing-card button,
  .package-card button,
  .contact-form button
) > :where(i, .fa, [class*="fa-"], svg) {
  position: static !important;
  inset: auto !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 1.15em !important;
  width: 1.15em !important;
  min-width: 1.15em !important;
  max-width: 1.15em !important;
  height: 1.15em !important;
  min-height: 1.15em !important;
  max-height: 1.15em !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  font-size: 1em !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
}

html body :where(
  button:not(.video-card),
  .hero-btn,
  .submit-btn,
  .submit-button,
  .main-button,
  .offers-btn,
  .delete-btn,
  .ads-whatsapp-btn,
  .other-services-whatsapp-btn,
  .offer-whatsapp,
  .offers-tab-btn,
  .quick-budget button,
  .contact-switch-btn,
  .whatsapp-btn,
  .contact-email-btn,
  .phone.whatsapp-btn,
  .service-icon-btn,
  .service-modal-whatsapp,
  .service-modal-offers,
  .service-modal-close,
  .service-article-table-action,
  .application-project-link,
  .about-contact-button,
  .seo-card-link,
  .guides-filter button,
  .support-reset-filter,
  .tab button,
  .tablinks,
  .support-hero-search button,
  .support-search-form button,
  .support-search-submit,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab,
  .popup-image-close,
  .video-popup-close,
  .site-ai-toggle,
  .site-ai-close,
  .site-ai-form button,
  .mobile-nav-toggle,
  .scroll-top,
  .public-file-button,
  .pricing-card button,
  .package-card button,
  .contact-form button
) > :where(i, .fa, [class*="fa-"])::before {
  display: block !important;
  width: 1em !important;
  height: 1em !important;
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Final public icon box centering: keep standalone site icons visually centered. */
html body :where(
  .about-feature-icon,
  .service-fallback-icon,
  .service-image-placeholder,
  .about-service-image-placeholder,
  .site-ai-toggle,
  .site-ai-close,
  .mobile-nav-toggle,
  .scroll-top,
  .popup-image-close,
  .video-popup-close,
  .contact-feature-icon,
  .gallery-media-tab > i,
  .gallery-category-tab > i,
  .gallery-media-category-tab > i,
  .stats i[class*="fa-"],
  .social-icon,
  .footer-social a > i,
  .about-section-kicker > i,
  .support-search-form button > i,
  .support-hero-search button > i
) {
  position: static !important;
  inset: auto !important;
  display: inline-grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
  transform: none !important;
}

html body :where(
  .about-feature-icon,
  .service-fallback-icon,
  .service-image-placeholder,
  .about-service-image-placeholder
) {
  flex: 0 0 auto !important;
  color: var(--main-color, var(--Main-color, #de007d)) !important;
  -webkit-text-fill-color: var(--main-color, var(--Main-color, #de007d)) !important;
}

html body :where(
  .about-feature-icon,
  .service-fallback-icon,
  .service-image-placeholder,
  .about-service-image-placeholder
) > :where(i, .fa, [class*="fa-"], svg),
html body :where(
  .site-ai-toggle,
  .site-ai-close,
  .mobile-nav-toggle,
  .scroll-top,
  .popup-image-close,
  .video-popup-close,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab
) > :where(i, .fa, [class*="fa-"], svg) {
  display: inline-grid !important;
  place-items: center !important;
  width: 1.15em !important;
  min-width: 1.15em !important;
  height: 1.15em !important;
  min-height: 1.15em !important;
  margin: auto !important;
  padding: 0 !important;
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  line-height: 1 !important;
  text-align: center !important;
}

html body :where(
  .about-feature-icon,
  .service-fallback-icon,
  .service-image-placeholder,
  .about-service-image-placeholder,
  .site-ai-toggle,
  .site-ai-close,
  .mobile-nav-toggle,
  .scroll-top,
  .popup-image-close,
  .video-popup-close,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab,
  .stats i[class*="fa-"],
  .social-icon,
  .footer-social a > i,
  .about-section-kicker > i
) :where(i, .fa, [class*="fa-"])::before,
html body :where(
  .site-ai-toggle,
  .site-ai-close,
  .mobile-nav-toggle,
  .scroll-top,
  .popup-image-close,
  .video-popup-close,
  .gallery-media-tab > i,
  .gallery-category-tab > i,
  .gallery-media-category-tab > i,
  .stats i[class*="fa-"],
  .social-icon,
  .footer-social a > i,
  .about-section-kicker > i
)::before {
  display: inline-block !important;
  width: 1em !important;
  min-width: 1em !important;
  height: 1em !important;
  min-height: 1em !important;
  margin: 0 auto !important;
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 1em !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Final public-site button and service-card polish. */
html body :where(
  a.more,
  button.more,
  .seo-card-link,
  .hero-btn,
  .contact-switch-btn,
  .application-project-link,
  .application-detail-actions a,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab,
  .site-ai-toggle,
  .site-ai-close,
  .site-ai-form button,
  .scroll-top
),
html body :where(
  a.more,
  button.more,
  .seo-card-link,
  .hero-btn,
  .contact-switch-btn,
  .application-project-link,
  .application-detail-actions a,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab,
  .site-ai-toggle,
  .site-ai-close,
  .site-ai-form button,
  .scroll-top
) :where(i, span, strong) {
  border-color: var(--main-color, #de007d) !important;
  background: var(--main-color, #de007d) !important;
  color: var(--General-color-W, #ffffff) !important;
  -webkit-text-fill-color: var(--General-color-W, #ffffff) !important;
}

html body :where(
  a.more,
  button.more,
  .seo-card-link,
  .hero-btn,
  .contact-switch-btn,
  .application-project-link,
  .application-detail-actions a,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab,
  .site-ai-toggle,
  .site-ai-close,
  .site-ai-form button,
  .scroll-top
) :where(i, span, strong) {
  background: transparent !important;
  border-color: transparent !important;
}

html body :where(
  a.more,
  button.more,
  .seo-card-link,
  .hero-btn,
  .contact-switch-btn,
  .application-project-link,
  .application-detail-actions a,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab,
  .site-ai-toggle,
  .site-ai-close,
  .site-ai-form button,
  .scroll-top
):is(:hover, :focus-visible, :active) {
  border-color: var(--Secondary-color, #9f9f9f) !important;
  background: var(--Secondary-color, #9f9f9f) !important;
  color: var(--General-color-W, #ffffff) !important;
  -webkit-text-fill-color: var(--General-color-W, #ffffff) !important;
}

html body :where(.service-card, .about-service-card, .service-hub-card, .seo-card):is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--main-color, #de007d) 18%, transparent) !important;
  background: var(--General-color-W, #ffffff) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Final repairs loaded from the cache-busted main stylesheet. */
html body :where(.landing-rtl, .landing-ltr) .video-box:not(.has-landing-image):has(iframe[hidden]) {
  display: none !important;
}

html body :where(.service-card, .about-service-card, .service-hub-card, .seo-card) :where(img, .service-card-media, .about-service-image) {
  transform: none !important;
}

html body .services .services-container .info {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  justify-items: stretch !important;
  gap: 10px !important;
  text-align: center !important;
}

html body .services .services-container .info .more {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px !important;
}

html body :where(.offers-rtl, .offers-ltr) .plans .plan ul,
html body :where(.offers-rtl, .offers-ltr) .plans .plan ul li {
  list-style: none !important;
}

html body :where(.offers-rtl, .offers-ltr) .plans .plan ul li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

html body :where(.offers-rtl, .offers-ltr) .plans .plan ul li::before,
html body :where(.offers-rtl, .offers-ltr) .plans .plan ul li span::before,
html body :where(.offers-rtl, .offers-ltr) .plans .plan ul li .offer-feature-text::before {
  content: none !important;
  display: none !important;
}

html body :where(.offers-rtl, .offers-ltr) .plans .plan ul li .offer-feature-icon {
  flex: 0 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  margin-top: 5px !important;
  border-radius: 50% !important;
  background-color: rgb(222 0 125 / 10%) !important;
  color: var(--main-color, #de007d) !important;
  -webkit-text-fill-color: var(--main-color, #de007d) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body :where(.offers-rtl, .offers-ltr) .plans .plan ul li .offer-feature-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Final header and footer repair. */
html {
  scroll-padding-top: 96px !important;
}

html body :where(section[id], [id]:not(script):not(style)) {
  scroll-margin-top: 96px !important;
}

html body .header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgb(255 255 255 / 96%) !important;
  border-bottom: 1px solid rgb(222 0 125 / 12%) !important;
  box-shadow: 0 10px 24px rgb(222 0 125 / 8%) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

html body .header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  min-height: 76px !important;
  padding-block: 8px !important;
}

html body .header .logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 54px !important;
  padding: 6px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .header .logo img {
  display: block !important;
  width: auto !important;
  height: clamp(38px, 4vw, 52px) !important;
  max-width: clamp(138px, 15vw, 190px) !important;
  object-fit: contain !important;
}

html body .header .site-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body .header .main-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body .header .main-nav > li {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

html body .header .main-nav > li > a,
html body .header .main-nav > li > .nav-help-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 42px !important;
  height: auto !important;
  padding: 10px clamp(10px, 1.2vw, 16px) !important;
  border: 1px solid transparent !important;
  border-radius: var(--public-button-radius, var(--radius-md, 8px)) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--main-color, #de007d) !important;
  -webkit-text-fill-color: var(--main-color, #de007d) !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: none !important;
}

html body .header .main-nav > li > a::before,
html body .header .main-nav > li > .nav-help-trigger::before {
  content: none !important;
  display: none !important;
}

html body .header .main-nav > li > a:is(:hover, :focus-visible, .is-active, [aria-current="page"]),
html body .header .main-nav > li > .nav-help-trigger:is(:hover, :focus-visible, .is-active) {
  border-color: var(--main-color, #de007d) !important;
  background: var(--main-color, #de007d) !important;
  box-shadow: 0 10px 20px rgb(222 0 125 / 12%) !important;
  color: var(--General-color-W, #ffffff) !important;
  -webkit-text-fill-color: var(--General-color-W, #ffffff) !important;
}

html body .mobile-nav-toggle {
  display: none !important;
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border-radius: 12px !important;
}

html body .mobile-nav-overlay {
  display: none !important;
}

html body #myBtn.scroll-top {
  position: fixed !important;
  inset-block: auto clamp(15px, 3vw, 25px) !important;
  inset-inline: auto clamp(15px, 3vw, 30px) !important;
  z-index: 1200 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  transform: none !important;
}

html body #myBtn.scroll-top.show {
  display: inline-flex !important;
}

html body .footer {
  padding-block: clamp(34px, 5vw, 58px) !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, var(--General-color-W, #ffffff), rgb(222 0 125 / 4%)) !important;
  border-top: 1px solid rgb(222 0 125 / 12%) !important;
  color: var(--main-color, #de007d) !important;
  text-align: center !important;
}

html body .footer::before {
  content: none !important;
  display: none !important;
}

html body .footer .container {
  display: grid !important;
  grid-template-columns: minmax(240px, 1.05fr) minmax(220px, .95fr) minmax(260px, 1.1fr) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 18px !important;
}

html body .footer-brand,
html body .footer-links,
html body .footer-contact,
html body .footer .social-icon,
html body .footer .copyright {
  min-width: 0 !important;
}

html body .footer-brand {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  padding: 22px !important;
  border: 1px solid rgb(222 0 125 / 14%) !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 88%) !important;
  box-shadow: 0 12px 28px rgb(222 0 125 / 8%) !important;
}

html body .footer .container img {
  display: block !important;
  width: auto !important;
  height: clamp(44px, 5vw, 60px) !important;
  max-width: min(190px, 82%) !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  transform: none !important;
}

html body .footer p:not(.copyright) {
  width: 100% !important;
  max-width: 360px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--Secondary-color, #9f9f9f) !important;
  -webkit-text-fill-color: var(--Secondary-color, #9f9f9f) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.8 !important;
  text-transform: none !important;
}

html body .footer-links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
}

html body .footer-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border: 1px solid rgb(222 0 125 / 14%) !important;
  border-radius: 12px !important;
  background: var(--General-color-W, #ffffff) !important;
  color: var(--main-color, #de007d) !important;
  -webkit-text-fill-color: var(--main-color, #de007d) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  box-shadow: none !important;
}

html body .footer-links a:is(:hover, :focus-visible) {
  border-color: var(--main-color, #de007d) !important;
  background: var(--main-color, #de007d) !important;
  color: var(--General-color-W, #ffffff) !important;
  -webkit-text-fill-color: var(--General-color-W, #ffffff) !important;
}

html body .footer-contact {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
}

html body .footer-contact a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 10px 14px !important;
  border: 1px solid rgb(222 0 125 / 14%) !important;
  border-radius: 12px !important;
  background: var(--General-color-W, #ffffff) !important;
  color: var(--main-color, #de007d) !important;
  -webkit-text-fill-color: var(--main-color, #de007d) !important;
  box-shadow: none !important;
  font-weight: 900 !important;
  text-align: right !important;
}

html body .footer-contact a:is(:hover, :focus-visible) {
  border-color: var(--Secondary-color, #9f9f9f) !important;
  background: var(--Secondary-color, #9f9f9f) !important;
  color: var(--General-color-W, #ffffff) !important;
  -webkit-text-fill-color: var(--General-color-W, #ffffff) !important;
  transform: none !important;
}

html body .footer-contact a :where(i, span) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

html body .footer .social-icon {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 2px auto 0 !important;
  padding: 0 !important;
}

html body .footer .social-icon a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border: 1px solid rgb(222 0 125 / 14%) !important;
  border-radius: 50% !important;
  background: var(--main-color, #de007d) !important;
  color: var(--General-color-W, #ffffff) !important;
  -webkit-text-fill-color: var(--General-color-W, #ffffff) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .footer .social-icon a:is(:hover, :focus-visible) {
  border-color: var(--Secondary-color, #9f9f9f) !important;
  background: var(--Secondary-color, #9f9f9f) !important;
  transform: none !important;
}

html body .footer .social-icon i,
html body .footer .social-icon i::before {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-align: center !important;
}

html body .footer .copyright {
  grid-column: 1 / -1 !important;
  margin: 4px 0 0 !important;
  color: var(--Secondary-color, #9f9f9f) !important;
  -webkit-text-fill-color: var(--Secondary-color, #9f9f9f) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.8 !important;
  text-align: center !important;
}

html body .footer .copyright span {
  color: var(--main-color, #de007d) !important;
  -webkit-text-fill-color: var(--main-color, #de007d) !important;
}

@media (max-width: 1100px) {
  html body .header .main-nav {
    gap: 4px !important;
  }

  html body .header .main-nav > li > a,
  html body .header .main-nav > li > .nav-help-trigger {
    padding-inline: 9px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 991px) {
  html {
    scroll-padding-top: 84px !important;
  }

  html body :where(section[id], [id]:not(script):not(style)) {
    scroll-margin-top: 84px !important;
  }

  html body .header .container {
    min-height: 70px !important;
    padding-inline: 14px !important;
  }

  html body .header .site-nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    inset-inline: 12px !important;
    z-index: 1003 !important;
    display: block !important;
    width: auto !important;
    max-height: min(72vh, 520px) !important;
    padding: 12px !important;
    border: 1px solid rgb(222 0 125 / 16%) !important;
    border-radius: 18px !important;
    background: var(--General-color-W, #ffffff) !important;
    box-shadow: 0 20px 44px rgb(222 0 125 / 18%) !important;
    opacity: 0 !important;
    transform: translateY(-12px) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow-y: auto !important;
  }

  html body .header .site-nav.open {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body .header .main-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  html body .header .main-nav > li > a,
  html body .header .main-nav > li > .nav-help-trigger {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px !important;
    border-color: rgb(222 0 125 / 14%) !important;
    border-radius: 12px !important;
    background: var(--General-color-W, #ffffff) !important;
    color: var(--main-color, #de007d) !important;
    -webkit-text-fill-color: var(--main-color, #de007d) !important;
    white-space: normal !important;
  }

  html body .header .main-nav > li > a:is(:hover, :focus-visible, .is-active, [aria-current="page"]),
  html body .header .main-nav > li > .nav-help-trigger:is(:hover, :focus-visible, .is-active) {
    background: var(--main-color, #de007d) !important;
    color: var(--General-color-W, #ffffff) !important;
    -webkit-text-fill-color: var(--General-color-W, #ffffff) !important;
  }

  

  html body .header.menu-open .mobile-nav-overlay {
    position: fixed !important;
    inset: 70px 0 0 !important;
    z-index: 1002 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border: 0 !important;
    background: rgb(222 0 125 / 12%) !important;
  }

  html body .footer .container {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  html body .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  html body .header .container {
    gap: 10px !important;
  }

  html body .header .logo img {
    height: 38px !important;
    max-width: 145px !important;
  }

  html body .footer-links {
    grid-template-columns: 1fr !important;
  }

  html body .footer-brand,
  html body .footer-contact a {
    padding-inline: 14px !important;
  }
}

/* Unified public button system: the single final contract for site actions. */
:root {
  --public-button-height: 42px;
  --public-button-icon-size: 44px;
  --public-button-radius: 6px;
  --public-button-gap: var(--space-xs, 8px);
  --public-button-padding-y: 10px;
  --public-button-padding-x: 16px;
}

html body :where(
  button:not(.mobile-nav-overlay):not(.ai-drawer-backdrop):not(.video-card),
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.btn,
  .btn,
  .button,
  a.more,
  button.more,
  .hero-btn,
  .submit-btn,
  .submit-button,
  .main-button,
  .offers-btn,
  .delete-btn,
  .ads-whatsapp-btn,
  .other-services-whatsapp-btn,
  .offer-whatsapp,
  .offers-tab-btn,
  .quick-budget button,
  .contact-switch-btn,
  .whatsapp-btn,
  .contact-email-btn,
  .phone.whatsapp-btn,
  .service-icon-btn,
  .service-modal-whatsapp,
  .service-modal-offers,
  .service-modal-close,
  .service-article-table-action,
  .application-project-link,
  .about-contact-button,
  .seo-card-link,
  .guides-filter button,
  .support-reset-filter,
  .tab button,
  .tablinks,
  .support-hero-search button,
  .support-search-form button,
  .support-search-submit,
  .support-result-action,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab,
  .popup-image-close,
  .video-popup-close,
  .site-ai-toggle,
  .site-ai-close,
  .site-ai-form button,
  .mobile-nav-toggle,
  .scroll-top,
  .public-file-button,
  .pricing-card button,
  .package-card button,
  .contact-form button,
  .footer-links a,
  .footer-contact a,
  .footer .social-icon a,
  .header .main-nav > li > a,
  .header .main-nav > li > .nav-help-trigger,
  .services .services-container .box .info a,
  .services .services-container .box .info button
) {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--public-button-gap) !important;
  min-width: 0 !important;
  min-height: var(--public-button-height) !important;
  padding: var(--public-button-padding-y) var(--public-button-padding-x) !important;
  border: 1px solid var(--main-color, var(--brand-primary, #DE007D)) !important;
  border-radius: var(--public-button-radius) !important;
  background: var(--main-color, var(--brand-primary, #DE007D)) !important;
  background-color: var(--main-color, var(--brand-primary, #DE007D)) !important;
  color: var(--General-color-W, #FFFFFF) !important;
  -webkit-text-fill-color: var(--General-color-W, #FFFFFF) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: var(--font-weight-black, 900) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  user-select: none !important;
  touch-action: manipulation !important;
  transform: none !important;
  transition: background-color var(--transition-fast, 160ms ease), border-color var(--transition-fast, 160ms ease), color var(--transition-fast, 160ms ease), opacity var(--transition-fast, 160ms ease) !important;
}

html body :where(.scroll-top, .site-ai-toggle, .site-ai-close, .mobile-nav-toggle, .popup-image-close, .video-popup-close, .service-modal-close, .footer .social-icon a) {
  width: var(--public-button-icon-size) !important;
  min-width: var(--public-button-icon-size) !important;
  max-width: var(--public-button-icon-size) !important;
  height: var(--public-button-icon-size) !important;
  min-height: var(--public-button-icon-size) !important;
  max-height: var(--public-button-icon-size) !important;
  padding: 0 !important;
}

html body :where(
  button:not(.mobile-nav-overlay):not(.ai-drawer-backdrop):not(.video-card),
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.btn,
  .btn,
  .button,
  a.more,
  button.more,
  .hero-btn,
  .submit-btn,
  .submit-button,
  .main-button,
  .offers-btn,
  .delete-btn,
  .ads-whatsapp-btn,
  .other-services-whatsapp-btn,
  .offer-whatsapp,
  .offers-tab-btn,
  .quick-budget button,
  .contact-switch-btn,
  .whatsapp-btn,
  .contact-email-btn,
  .phone.whatsapp-btn,
  .service-icon-btn,
  .service-modal-whatsapp,
  .service-modal-offers,
  .service-modal-close,
  .service-article-table-action,
  .application-project-link,
  .about-contact-button,
  .seo-card-link,
  .guides-filter button,
  .support-reset-filter,
  .tab button,
  .tablinks,
  .support-hero-search button,
  .support-search-form button,
  .support-search-submit,
  .support-result-action,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab,
  .popup-image-close,
  .video-popup-close,
  .site-ai-toggle,
  .site-ai-close,
  .site-ai-form button,
  .mobile-nav-toggle,
  .scroll-top,
  .public-file-button,
  .pricing-card button,
  .package-card button,
  .contact-form button,
  .footer-links a,
  .footer-contact a,
  .footer .social-icon a,
  .header .main-nav > li > a,
  .header .main-nav > li > .nav-help-trigger,
  .services .services-container .box .info a,
  .services .services-container .box .info button
) :where(i, svg, span, small, strong, b, em) {
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

html body :where(
  button:not(.mobile-nav-overlay):not(.ai-drawer-backdrop):not(.video-card),
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.btn,
  .btn,
  .button,
  a.more,
  button.more,
  .hero-btn,
  .submit-btn,
  .submit-button,
  .main-button,
  .offers-btn,
  .delete-btn,
  .ads-whatsapp-btn,
  .other-services-whatsapp-btn,
  .offer-whatsapp,
  .offers-tab-btn,
  .quick-budget button,
  .contact-switch-btn,
  .whatsapp-btn,
  .contact-email-btn,
  .phone.whatsapp-btn,
  .service-icon-btn,
  .service-modal-whatsapp,
  .service-modal-offers,
  .service-modal-close,
  .service-article-table-action,
  .application-project-link,
  .about-contact-button,
  .seo-card-link,
  .guides-filter button,
  .support-reset-filter,
  .tab button,
  .tablinks,
  .support-hero-search button,
  .support-search-form button,
  .support-search-submit,
  .support-result-action,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab,
  .popup-image-close,
  .video-popup-close,
  .site-ai-toggle,
  .site-ai-close,
  .site-ai-form button,
  .mobile-nav-toggle,
  .scroll-top,
  .public-file-button,
  .pricing-card button,
  .package-card button,
  .contact-form button,
  .footer-links a,
  .footer-contact a,
  .footer .social-icon a,
  .header .main-nav > li > a,
  .header .main-nav > li > .nav-help-trigger,
  .services .services-container .box .info a,
  .services .services-container .box .info button
):is(:hover, :focus, :focus-visible, :active, .active, .is-active, [aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) {
  border-color: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  background: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  background-color: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  color: var(--General-color-W, #FFFFFF) !important;
  -webkit-text-fill-color: var(--General-color-W, #FFFFFF) !important;
}

html body :where(button:not(.mobile-nav-overlay):not(.ai-drawer-backdrop):not(.video-card), input[type="button"], input[type="submit"], input[type="reset"], .btn, .button, .hero-btn, .offers-tab-btn, .gallery-media-tab, .gallery-category-tab, .gallery-media-category-tab, .public-file-button):focus-visible {
  outline: 3px solid rgb(222 0 125 / 22%) !important;
  outline-offset: 2px !important;
}

html body :where(button:not(.mobile-nav-overlay):not(.ai-drawer-backdrop):not(.video-card), input[type="button"], input[type="submit"], input[type="reset"], .btn, .button, .hero-btn, .offers-tab-btn, .gallery-media-tab, .gallery-category-tab, .gallery-media-category-tab, .public-file-button):is(:disabled, [disabled], .disabled, [aria-disabled="true"]) {
  border-color: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  background: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  color: var(--General-color-W, #FFFFFF) !important;
  -webkit-text-fill-color: var(--General-color-W, #FFFFFF) !important;
  opacity: .68 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

html body input[type="file"]::file-selector-button,
html body input[type="file"]::-webkit-file-upload-button {
  min-height: var(--public-button-height) !important;
  padding: var(--public-button-padding-y) var(--public-button-padding-x) !important;
  border: 1px solid var(--main-color, var(--brand-primary, #DE007D)) !important;
  border-radius: var(--public-button-radius) !important;
  background: var(--main-color, var(--brand-primary, #DE007D)) !important;
  color: var(--General-color-W, #FFFFFF) !important;
  -webkit-text-fill-color: var(--General-color-W, #FFFFFF) !important;
  font: inherit !important;
  font-weight: var(--font-weight-black, 900) !important;
}

html body input[type="file"]:is(:hover, :focus)::file-selector-button,
html body input[type="file"]:is(:hover, :focus)::-webkit-file-upload-button {
  border-color: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  background: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  color: var(--General-color-W, #FFFFFF) !important;
  -webkit-text-fill-color: var(--General-color-W, #FFFFFF) !important;
}

html body .services .services-container .box .info :where(a, button) {
  width: 100% !important;
  max-width: 100% !important;
}

html body .mobile-nav-toggle,
html body .mobile-nav-overlay {
  display: none !important;
}

@media (max-width: 991px) {
  html body .mobile-nav-toggle {
    display: inline-grid !important;
    place-items: center !important;
  }

  html body .header.menu-open .mobile-nav-overlay {
    display: block !important;
  }
}

@media (max-width: 640px) {
  html body :where(
    .hero-actions,
    .seo-actions,
    .service-detail-actions,
    .application-detail-actions,
    .about-contact-actions,
    .contact-switcher-actions,
    .contact-actions,
    .section-actions,
    .card-actions,
    .offer-actions,
    .offers-actions,
    .gallery-actions,
    .support-actions,
    .knowledge-actions,
    .footer-links,
    .footer-contact
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 10px !important;
  }

  html body :where(
    .hero-actions,
    .seo-actions,
    .service-detail-actions,
    .application-detail-actions,
    .about-contact-actions,
    .contact-switcher-actions,
    .contact-actions,
    .section-actions,
    .card-actions,
    .offer-actions,
    .offers-actions,
    .gallery-actions,
    .support-actions,
    .knowledge-actions,
    .footer-links,
    .footer-contact
  ) > :where(a, button, label, .btn, .hero-btn) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 992px) {
  html body .header button.mobile-nav-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Final public tab button coverage: every site tab follows the unified button system. */
html body :where(
  .offers-tab-btn,
  .offer-catalog-tab,
  .subscription-duration-tab,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab,
  .contact-switch-btn,
  .tablinks
) {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--public-button-gap) !important;
  min-width: 0 !important;
  min-height: var(--public-button-height) !important;
  padding: var(--public-button-padding-y) var(--public-button-padding-x) !important;
  border: 1px solid var(--main-color, var(--brand-primary, #DE007D)) !important;
  border-radius: var(--public-button-radius) !important;
  background: var(--main-color, var(--brand-primary, #DE007D)) !important;
  background-color: var(--main-color, var(--brand-primary, #DE007D)) !important;
  color: var(--General-color-W, #FFFFFF) !important;
  -webkit-text-fill-color: var(--General-color-W, #FFFFFF) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: var(--font-weight-black, 900) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  user-select: none !important;
  touch-action: manipulation !important;
  transform: none !important;
  transition: background-color var(--transition-fast, 160ms ease), border-color var(--transition-fast, 160ms ease), color var(--transition-fast, 160ms ease), opacity var(--transition-fast, 160ms ease) !important;
}

html body :where(
  .offers-tab-btn,
  .offer-catalog-tab,
  .subscription-duration-tab,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab,
  .contact-switch-btn,
  .tablinks
) :where(i, svg, span, small, strong, b, em) {
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

html body :where(
  .offers-tab-btn,
  .offer-catalog-tab,
  .subscription-duration-tab,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab,
  .contact-switch-btn,
  .tablinks
):is(:hover, :focus, :focus-visible, :active, .active, .is-active, [aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) {
  border-color: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  background: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  background-color: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  color: var(--General-color-W, #FFFFFF) !important;
  -webkit-text-fill-color: var(--General-color-W, #FFFFFF) !important;
}

@media (max-width: 640px) {
  html body :where(
    .offers-tab-btn,
    .offer-catalog-tab,
    .subscription-duration-tab,
    .gallery-media-tab,
    .gallery-category-tab,
    .gallery-media-category-tab,
    .contact-switch-btn,
    .tablinks
  ) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Final coverage for public links that behave as buttons outside the generic class names. */
html body .social-engagement-link {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--public-button-gap, 8px) !important;
  min-width: 0 !important;
  min-height: var(--public-button-height, 42px) !important;
  padding: var(--public-button-padding-y, 10px) var(--public-button-padding-x, 16px) !important;
  border: 1px solid var(--main-color, var(--brand-primary, #DE007D)) !important;
  border-radius: var(--public-button-radius, 8px) !important;
  background: var(--main-color, var(--brand-primary, #DE007D)) !important;
  background-color: var(--main-color, var(--brand-primary, #DE007D)) !important;
  color: var(--General-color-W, #FFFFFF) !important;
  -webkit-text-fill-color: var(--General-color-W, #FFFFFF) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: var(--font-weight-black, 900) !important;
  line-height: 1.35 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
}

html body .social-engagement-link :where(i, svg, span, small, strong, b, em) {
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

html body .social-engagement-link:is(:hover, :focus, :focus-visible, :active, .active, .is-active, [aria-current="page"]) {
  border-color: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  background: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  background-color: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  color: var(--General-color-W, #FFFFFF) !important;
  -webkit-text-fill-color: var(--General-color-W, #FFFFFF) !important;
}

@media (max-width: 640px) {
  html body .social-engagement-link {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Keep the mobile menu button visually clean; show the filled effect only on hover. */
html body .header .mobile-nav-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--main-color, var(--brand-primary, #DE007D)) !important;
  -webkit-text-fill-color: var(--main-color, var(--brand-primary, #DE007D)) !important;
}

html body .header .mobile-nav-toggle :where(i, svg, span) {
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

html body .header .mobile-nav-toggle:is(:focus, :focus-visible, :active),
html body .header.menu-open .mobile-nav-toggle:not(:hover) {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--main-color, var(--brand-primary, #DE007D)) !important;
  -webkit-text-fill-color: var(--main-color, var(--brand-primary, #DE007D)) !important;
  outline: 2px solid rgb(222 0 125 / 22%) !important;
  outline-offset: 3px !important;
}

html body .header .mobile-nav-toggle:hover {
  border-color: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  background: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  background-color: var(--Secondary-color, var(--brand-gray, #9F9F9F)) !important;
  color: var(--General-color-W, #FFFFFF) !important;
  -webkit-text-fill-color: var(--General-color-W, #FFFFFF) !important;
  outline: 0 !important;
}

/* Gallery responsive repair: photos, videos, applications and their controls. */
html body .gallery {
  overflow: clip !important;
}

html body .gallery > .container,
html body .gallery > :is(.imgs-container, .gallery-video-grid, .gallery-application-grid) {
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: 1180px !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

html body .gallery .gallery-media-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  margin: 18px auto 22px !important;
  padding: 0 !important;
}

html body .gallery :is(.gallery-category-tabs, .gallery-media-category-tabs) {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body .gallery :is(.gallery-category-tabs, .gallery-media-category-tabs)[hidden],
html body .gallery :is(.imgs-container, .gallery-video-grid, .gallery-application-grid)[hidden],
html body .gallery .application-project-card[hidden] {
  display: none !important;
}

html body .gallery :is(.gallery-category-group, .gallery-category-children) {
  display: contents !important;
}

html body .gallery :is(.gallery-media-tab, .gallery-category-tab, .gallery-media-category-tab) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 9px 14px !important;
  border-radius: var(--public-button-radius, 8px) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body .gallery .gallery-media-tab {
  width: 100% !important;
}

html body .gallery :is(.gallery-media-tab, .gallery-category-tab, .gallery-media-category-tab) > i {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

html body .gallery :is(.imgs-container, .gallery-video-grid, .gallery-application-grid) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: clamp(14px, 2vw, 22px) !important;
  margin-top: 28px !important;
}

/* The image portfolio intentionally presents four equal items per desktop row. */
html body .gallery #gallery.imgs-container {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body .gallery .imgs-container .box,
html body .gallery .gallery-video-grid .video-card,
html body .gallery .gallery-application-grid .application-project-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

html body .gallery .gallery-video-grid .video-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr !important;
  align-content: stretch !important;
  border: 1px solid rgb(222 0 125 / 14%) !important;
  background: var(--General-color-W, #FFFFFF) !important;
  background-color: var(--General-color-W, #FFFFFF) !important;
  color: var(--main-color, #DE007D) !important;
  text-align: right !important;
}

/* Keyboard-clickable image cards keep card semantics and are not buttons. */
html body .gallery #gallery.imgs-container > .box[role="button"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  gap: 0 !important;
  padding: 0 !important;
  background: var(--General-color-W, #FFFFFF) !important;
  background-color: var(--General-color-W, #FFFFFF) !important;
}

html body .gallery #videoGrid.gallery-video-grid > .video-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  gap: 0 !important;
  padding: 0 !important;
}

html body .gallery .gallery-video-grid .video-card:is(:hover, :focus, :focus-visible, :active) {
  border-color: rgb(222 0 125 / 28%) !important;
  background: var(--General-color-W, #FFFFFF) !important;
  background-color: var(--General-color-W, #FFFFFF) !important;
  color: var(--main-color, #DE007D) !important;
}

html body .gallery .gallery-video-grid .video-card .video-card-image {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  background: var(--General-color-W, #FFFFFF) !important;
}

html body .gallery .gallery-video-grid .video-card .video-card-image img,
html body .gallery .imgs-container .box > img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center !important;
}

html body .gallery #videoGrid.gallery-video-grid > .video-card .video-card-image img {
  aspect-ratio: 16 / 9 !important;
}

html body .gallery .gallery-video-grid .video-card .video-card-caption {
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  min-height: 82px !important;
  padding: 12px 14px !important;
  background: var(--main-color, #DE007D) !important;
  color: var(--General-color-W, #FFFFFF) !important;
  -webkit-text-fill-color: var(--General-color-W, #FFFFFF) !important;
  text-align: right !important;
}

html body .gallery .gallery-video-grid .video-card .video-card-caption :is(b, strong, span) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

html body .gallery .gallery-application-grid .application-project-card {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  border: 1px solid rgb(222 0 125 / 14%) !important;
  background: var(--General-color-W, #FFFFFF) !important;
}

html body .gallery .application-project-media {
  width: 100% !important;
  min-height: 160px !important;
  padding: 16px !important;
}

html body .gallery .application-project-media img {
  display: block !important;
  width: min(220px, 74%) !important;
  max-width: 100% !important;
  height: 124px !important;
  max-height: 124px !important;
  object-fit: contain !important;
}

html body .gallery .application-project-copy {
  min-width: 0 !important;
  padding: 16px !important;
}

html body .gallery .application-project-link {
  width: 100% !important;
  min-height: 42px !important;
  margin-top: 4px !important;
}

@media (max-width: 991px) {
  html body .gallery :is(.imgs-container, .gallery-video-grid, .gallery-application-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body .gallery #gallery.imgs-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body .gallery :is(.gallery-category-tabs, .gallery-media-category-tabs) {
    display: flex !important;
    align-items: stretch !important;
    width: min(100%, 760px) !important;
  }

  html body .gallery :is(.gallery-category-tab, .gallery-media-category-tab) {
    flex: 1 1 160px !important;
    width: auto !important;
    max-width: 220px !important;
  }
}

@media (hover: none), (pointer: coarse) {
  html body .gallery .imgs-container .box .caption {
    position: static !important;
    width: 100% !important;
    padding: 12px 14px !important;
    background: var(--main-color, #DE007D) !important;
    transform: none !important;
  }

  html body .gallery .imgs-container .box:is(:hover, :focus, :focus-within) .caption {
    transform: none !important;
  }
}

@media (max-width: 767px) {
  html body .gallery > .container,
  html body .gallery > :is(.imgs-container, .gallery-video-grid, .gallery-application-grid) {
    width: min(100% - 24px, 520px) !important;
  }

  html body .gallery .gallery-media-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 520px !important;
    margin-block: 14px 18px !important;
  }

  html body .gallery :is(.gallery-category-tabs, .gallery-media-category-tabs) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 520px !important;
    margin-bottom: 18px !important;
  }

  html body .gallery :is(.gallery-media-tab, .gallery-category-tab, .gallery-media-category-tab) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 8px 9px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  html body .gallery .gallery-media-tab {
    gap: 5px !important;
    padding-inline: 6px !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  html body .gallery :is(.imgs-container, .gallery-video-grid, .gallery-application-grid),
  html body .gallery .gallery-application-grid[data-visible-count="1"],
  html body .gallery .gallery-application-grid[data-visible-count="2"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    margin-top: 20px !important;
  }

  html body .gallery #gallery.imgs-container {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .gallery .gallery-video-grid .video-card .video-card-image img,
  html body .gallery .imgs-container .box > img {
    aspect-ratio: 4 / 3 !important;
  }

  html body .gallery #videoGrid.gallery-video-grid > .video-card .video-card-image img {
    aspect-ratio: 16 / 9 !important;
  }

  html body .gallery .application-project-media {
    min-height: 140px !important;
  }

  html body .gallery .application-project-copy {
    gap: 8px !important;
    padding: 14px !important;
  }

  html body .gallery .popup-image img {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 96px) !important;
    border-radius: 8px !important;
  }

  html body .video-popup .video-popup-inner {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
  }
}

@media (max-width: 380px) {
  html body .gallery .gallery-media-tabs {
    gap: 6px !important;
  }

  html body .gallery .gallery-media-tab {
    gap: 5px !important;
    padding-inline: 6px !important;
    font-size: 11px !important;
  }

  html body .gallery .gallery-media-tab > i {
    display: none !important;
  }
}

@media (max-width: 340px) {
  html body .gallery :is(.gallery-category-tabs, .gallery-media-category-tabs) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Public actions are rectangular; only dedicated icon controls stay circular. */
html body :where(
  button:not(.mobile-nav-overlay):not(.ai-drawer-backdrop):not(.video-card):not(.popup-image-close):not(.video-popup-close):not(.service-modal-close):not(.site-ai-toggle):not(.site-ai-close):not(.scroll-top),
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a[class*="btn"],
  a[class*="button"],
  a.more,
  .header .main-nav > li > a,
  .header .main-nav > li > .nav-help-trigger,
  .footer-links a,
  .footer-contact a,
  .service-article-table-action,
  .application-project-link,
  .seo-card-link,
  .social-engagement-link,
  .gallery-media-tab,
  .gallery-category-tab,
  .gallery-media-category-tab,
  .tablinks,
  .public-file-button
) {
  border-radius: var(--public-button-radius, 6px) !important;
}

html body input[type="file"]::file-selector-button,
html body input[type="file"]::-webkit-file-upload-button {
  border-radius: var(--public-button-radius, 6px) !important;
}

/* Keep every works type isolated and align four cards per desktop row. */
html body .gallery .gallery-application-panel {
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: 1180px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  isolation: isolate;
}

html body .gallery .gallery-application-panel[hidden] {
  display: none !important;
}

html body .gallery .gallery-application-panel > :is(.gallery-application-context, .gallery-application-grid) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

html body .gallery .gallery-application-panel > .gallery-application-grid {
  padding-inline: 0 !important;
}

html body .gallery :is(
  #gallery.imgs-container,
  #videoGrid.gallery-video-grid,
  #applicationProjects.gallery-application-grid
) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

html body .gallery #applicationProjects.gallery-application-grid[data-visible-count="1"] {
  grid-template-columns: minmax(0, 380px) !important;
  justify-content: center !important;
}

html body .gallery #applicationProjects.gallery-application-grid[data-visible-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 380px)) !important;
  justify-content: center !important;
}

html body .gallery #applicationProjects.gallery-application-grid[data-visible-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  justify-content: center !important;
}

html body .gallery #applicationProjects.gallery-application-grid[data-visible-count="0"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body .gallery #applicationProjects.gallery-application-grid > .application-project-card {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

html body .gallery #applicationProjects.gallery-application-grid > .application-project-card[hidden],
html body .gallery #applicationProjects.gallery-application-grid > .gallery-application-empty-state[hidden] {
  display: none !important;
}

html body .gallery #applicationProjects.gallery-application-grid .application-project-copy {
  overflow-wrap: anywhere;
}

@media (max-width: 991px) {
  html body .gallery .gallery-application-panel {
    width: min(100% - 32px, 760px) !important;
  }

  html body .gallery :is(
    #gallery.imgs-container,
    #videoGrid.gallery-video-grid,
    #applicationProjects.gallery-application-grid,
    #applicationProjects.gallery-application-grid[data-visible-count="2"],
    #applicationProjects.gallery-application-grid[data-visible-count="3"]
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  html body .gallery .gallery-application-panel {
    width: min(100% - 24px, 520px) !important;
  }

  html body .gallery :is(
    #videoGrid.gallery-video-grid,
    #applicationProjects.gallery-application-grid,
    #applicationProjects.gallery-application-grid[data-visible-count="1"],
    #applicationProjects.gallery-application-grid[data-visible-count="2"],
    #applicationProjects.gallery-application-grid[data-visible-count="3"]
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .gallery #gallery.imgs-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
  }

  html body .gallery #gallery.imgs-container > .box {
    height: auto !important;
    align-self: start !important;
  }
}

@media (max-width: 340px) {
  html body .gallery #gallery.imgs-container {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}