/* Keep page content readable before hydration and when JavaScript is disabled. */
.mobile-menu .menu-box { overflow-y: auto; }
.owl-carousel:not(.owl-loaded) { display: block; }
.blog-details .text { overflow-wrap: anywhere; }
.blog-details .text img { max-width: 100%; height: auto; }
.pagination-wrapper .pagination { display: inline-flex; gap: 6px; }
.page-title .bread-crumb li { margin-inline: 6px; }

/* The skip link and visible controls remain usable with touch and a keyboard. */
.skip-link { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 10000; padding: 12px 18px; min-width: 48px; min-height: 48px; background: #1d165c; color: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); color: #fff; }
:where(a, button, summary, [tabindex]):focus-visible { outline: 3px solid #5944b8; outline-offset: 4px; }
#main-content:focus { outline: none; }
.main-header .main-menu .navigation > li > a,
.mobile-menu .navigation > li > a,
.footer-style-three a,
.website-design-page a { display: inline-flex; align-items: center; min-width: 48px; min-height: 48px; }
.main-header .main-menu .navigation > li > a { justify-content: center; }
.menu-area .mobile-nav-toggler { width: 48px; height: 48px; padding: 8px; background: transparent; }
.mobile-menu .close-btn { width: 48px; height: 48px; font: 36px/48px sans-serif; background: transparent; transition: transform 0.2s ease; }
.mobile-menu .menu-backdrop { width: 100%; height: 100%; }
.mobile-menu .menu-box,
.mobile-menu-visible .mobile-menu .menu-box { transition: transform 0.2s ease, opacity 0.2s ease; }
.mobile-menu .navigation li > a,
.mobile-menu .nav-logo a { transition-property: color, background-color, border-color; }
.website-design-page .btn-style-four { padding-block: 10px; }
.website-design-page .theme-btn { min-height: 48px; }
.website-design-page .about-style-five { overflow-x: clip; }
.banner-style-five .content-box .website-design-cta { justify-content: center; max-width: 100%; padding: 12px 24px; font-size: 16px; line-height: 1.8; text-align: center; white-space: normal; }
.scroll-top { width: 48px; height: 48px; line-height: 48px; }

@media (max-width: 1279px) {
  .main-header.style-three .main-menu,
  .main-header.style-three .sticky-header { display: none !important; }
  .main-header.style-three .header-upper .left-column { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
  .main-header.style-three .header-upper .logo-box { float: none; }
  .main-header.style-three .header-upper .logo { margin: 0; padding: 20px 0; }
  .main-header.style-three .header-upper .logo a { padding: 8px 12px; }
  .main-header.style-three .header-upper .logo img { width: 180px; height: auto; }
  .main-header.style-three .header-upper .menu-area { position: static; float: none; }
  .main-header.style-three .menu-area .mobile-nav-toggler { display: block; float: none; margin: 0; border: 1px solid #e3e5ef; border-radius: 10px; background: #fff; color: #1d165c; }
  .main-header.style-three .menu-area .mobile-nav-toggler .icon-bar { background: currentColor; width: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}