/* xvx.kz — shared site styles.
   The archive has no OceanWP theme CSS and no Elementor frontend CSS (only the per-page
   Elementor CSS with colours/paddings of single elements), so the layout is rebuilt here:
   1. tokens & base   2. header / menus   3. page header, content, sidebar, footer
   4. Elementor core (sections, columns, widgets)   5. responsive */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/* ==================== 1. Tokens & base ==================== */
:root {
  --x-brand: #400a9d;        /* hero overlay colour of the home page */
  --x-brand-dark: #2c0670;
  --x-accent: #ffc107;       /* "Оставить заявку" buttons */
  --x-navy: #0d1f6e;         /* logo */
  --x-text: #4a4a4a;
  --x-heading: #1f1f2e;
  --x-muted: #8a8a99;
  --x-line: #e7e7ef;
  --x-bg-soft: #f5f5fa;
  --x-container: 1170px;
  --x-gutter: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--x-text);
  font: 400 15px/1.65 Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: var(--x-brand); text-decoration: none; transition: color .2s, background-color .2s, border-color .2s; }
a:hover { color: var(--x-brand-dark); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .6em; color: var(--x-heading); font-family: Tahoma, Roboto, Arial, sans-serif; font-weight: 600; line-height: 1.25; }
h1 { font-size: 34px; } h2 { font-size: 28px; } h3 { font-size: 22px; } h4 { font-size: 18px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
input, button, select, textarea { font: inherit; color: inherit; }
.container { width: 100%; max-width: var(--x-container); margin: 0 auto; padding: 0 var(--x-gutter); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* ==================== 2. Header ==================== */
#outer-wrap, #wrap { position: relative; }
/* footer pinned to the bottom on short pages */
#wrap { display: flex; flex-direction: column; min-height: 100vh; }
#main { flex: 1 0 auto; }
#site-header { position: relative; z-index: 100; background: #fff; box-shadow: 0 2px 14px rgba(20, 20, 60, .07); }
#site-header-inner { display: flex; align-items: center; gap: 24px; min-height: 84px; }
#site-logo { flex-shrink: 0; }
#site-logo .custom-logo { display: block; width: auto; max-height: 56px; }
#site-navigation-wrap { order: 2; margin-right: auto; }
.after-header-content { order: 3; }
.oceanwp-mobile-menu-icon { order: 4; display: none; }

/* desktop menu */
.main-menu { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.main-menu > li { position: relative; }
.main-menu .menu-link { display: block; padding: 0 14px; line-height: 84px; color: var(--x-heading); font-size: 15px; font-weight: 500; }
.main-menu .menu-link .text-wrap { position: relative; display: inline-block; line-height: 1.4; }
.main-menu .menu-link .text-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--x-brand); transform: scaleX(0); transition: transform .25s; }
.main-menu .menu-link:hover, .main-menu .current-menu-item > .menu-link { color: var(--x-brand); }
.main-menu .menu-link:hover .text-wrap::after, .main-menu .current-menu-item > .menu-link .text-wrap::after { transform: scaleX(1); }

/* phone / WhatsApp block on the right */
.after-header-content-inner { display: flex; align-items: center; }
.phone-nomber { margin: 0; padding: 8px 16px; border: 2px solid var(--x-brand); border-radius: 30px; color: var(--x-brand); font-weight: 600; font-size: 14px; line-height: 1.3; white-space: nowrap; }
.phone-nomber::before { content: "\f232"; margin-right: 8px; font: 400 16px/1 "Font Awesome 5 Brands"; color: #25d366; }

/* mobile menu toggle + dropdown */
.oceanwp-mobile-menu-icon a.mobile-menu { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 4px; background: var(--x-brand); color: #fff; font-weight: 500; font-size: 14px; }
.oceanwp-mobile-menu-icon .oceanwp-close-text { display: none; }
.oceanwp-mobile-menu-icon a.mobile-menu.opened .oceanwp-text { display: none; }
.oceanwp-mobile-menu-icon a.mobile-menu.opened .oceanwp-close-text { display: inline; }
#mobile-dropdown { display: none; background: #fff; border-top: 1px solid var(--x-line); box-shadow: 0 10px 20px rgba(20, 20, 60, .08); }
#mobile-dropdown.is-open { display: block; }
#mobile-dropdown nav { max-width: var(--x-container); margin: 0 auto; padding: 8px var(--x-gutter) 16px; }
#mobile-dropdown .menu { margin: 0; padding: 0; list-style: none; }
#mobile-dropdown .menu li { border-bottom: 1px solid var(--x-line); }
#mobile-dropdown .menu a { display: block; padding: 12px 0; color: var(--x-heading); font-weight: 500; }
#mobile-dropdown .menu .current-menu-item > a, #mobile-dropdown .menu a:hover { color: var(--x-brand); }
.mobile-searchform { position: relative; margin-top: 14px; }
.mobile-searchform .field { width: 100%; height: 42px; padding: 0 44px 0 14px; border: 1px solid var(--x-line); border-radius: 4px; background: var(--x-bg-soft); outline: none; }
.mobile-searchform .field:focus { border-color: var(--x-brand); background: #fff; }
.mobile-searchform .searchform-submit { position: absolute; top: 0; right: 0; width: 42px; height: 42px; border: 0; background: none; color: var(--x-muted); cursor: pointer; }
.icon-magnifier::before { content: "\f002"; font: 900 14px/1 "Font Awesome 5 Free"; }

/* ==================== 3. Page header, content, sidebar, footer ==================== */
.page-header { position: relative; padding: 46px 0 40px; background: linear-gradient(120deg, var(--x-brand-dark), var(--x-brand) 60%, #5b2bc4); color: #fff; }
.page-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 30px; }
.page-header-title { margin: 0; color: #fff; font-size: 32px; }
.page-subheading { flex-basis: 100%; order: 3; color: rgba(255, 255, 255, .8); font-size: 15px; }
.site-breadcrumbs { font-size: 14px; color: rgba(255, 255, 255, .75); }
.site-breadcrumbs .trail-items { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.site-breadcrumbs a { color: #fff; }
.site-breadcrumbs a:hover { color: var(--x-accent); }
.site-breadcrumbs .breadcrumb-sep { margin: 0 8px; opacity: .6; }
.site-breadcrumbs .trail-end a { color: rgba(255, 255, 255, .75); pointer-events: none; }
.icon-home { display: none; }

#main { position: relative; }
#content-wrap { padding-top: 50px; padding-bottom: 50px; }
.content-full-screen #content-wrap { max-width: none; padding: 0; }
.content-full-screen #primary { width: 100%; }
.entry:empty { min-height: 160px; }
.page-content { padding: 30px; border-radius: 8px; background: var(--x-bg-soft); }
.page-content p:last-child { margin: 0; }

/* archive pages with the right sidebar */
.content-right-sidebar #content-wrap { display: flex; align-items: flex-start; gap: 40px; }
.content-right-sidebar #primary { flex: 1; min-width: 0; }
#right-sidebar { width: 300px; flex-shrink: 0; }
.sidebar-box { margin-bottom: 30px; }
.widget-title { position: relative; margin: 0 0 14px; padding-left: 12px; border-left: 3px solid var(--x-brand); font-size: 15px; text-transform: uppercase; letter-spacing: .5px; }
.sidebar-box ul { margin: 0; padding: 0; list-style: none; }
.sidebar-box li { padding: 7px 0; border-bottom: 1px solid var(--x-line); font-size: 14px; }
.sidebar-box ul:empty::before { content: "—"; color: var(--x-muted); }

/* footer */
#footer { background: #14102a; color: rgba(255, 255, 255, .65); }
#footer-bottom-inner { display: flex; justify-content: center; padding-top: 22px; padding-bottom: 22px; text-align: center; font-size: 14px; }
#footer a { color: #fff; }

/* scroll to top */
#scroll-top { position: fixed; right: 20px; bottom: 20px; z-index: 99; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--x-brand); color: #fff; box-shadow: 0 6px 16px rgba(64, 10, 157, .35); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s, background-color .2s; }
#scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; }
#scroll-top:hover { background: var(--x-brand-dark); }
#scroll-top .fa { font-size: 20px; }

/* ==================== 4. Elementor core ==================== */
.elementor { position: relative; }
.elementor-section { position: relative; }
.elementor-section .elementor-container { position: relative; display: flex; margin-right: auto; margin-left: auto; }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 1140px; }
.elementor-section-content-middle > .elementor-container { align-items: center; }
.elementor-section-content-top > .elementor-container { align-items: flex-start; }
.elementor-background-overlay { position: absolute; inset: 0; pointer-events: none; }
.elementor-column { position: relative; display: flex; min-height: 1px; }
.elementor-widget-wrap { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; width: 100%; }
.elementor-widget-wrap > .elementor-element { width: 100%; }
.elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 10px; }
@media (min-width: 768px) {
  .elementor-column.elementor-col-16 { width: 16.666%; }
  .elementor-column.elementor-col-25 { width: 25%; }
  .elementor-column.elementor-col-33 { width: 33.333%; }
  .elementor-column.elementor-col-50 { width: 50%; }
  .elementor-column.elementor-col-100 { width: 100%; }
}
.elementor-inner-section { width: 100%; }
.elementor-widget { position: relative; }
.elementor-widget:not(:last-child) { margin-bottom: 20px; }
.elementor-widget-container > :last-child { margin-bottom: 0; }
.elementor-absolute { position: absolute; }
.elementor-widget__width-initial { max-width: 100%; }

/* heading / text */
.elementor-heading-title { margin: 0; padding: 0; line-height: 1.2; }
.elementor-widget-text-editor { line-height: 1.6; }

/* image */
.elementor-widget-image { text-align: center; }
.elementor-widget-image img { display: inline-block; max-width: 100%; height: auto; }

/* spacer */
.elementor-spacer-inner { height: var(--spacer-size, 50px); }

/* button */
.elementor-button-wrapper { display: block; }
.elementor-align-left .elementor-button-wrapper { text-align: left; }
.elementor-align-center .elementor-button-wrapper { text-align: center; }
.elementor-button {
  display: inline-block; padding: 14px 28px; border-radius: 40px;
  background: var(--x-accent); color: #1f1f2e; fill: currentColor;
  font: 600 15px/1 Roboto, Arial, sans-serif; text-align: center; text-transform: uppercase; letter-spacing: .5px;
  box-shadow: 0 8px 22px rgba(255, 193, 7, .35); transition: transform .2s, box-shadow .2s, filter .2s;
}
.elementor-button:hover { color: #1f1f2e; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 193, 7, .45); filter: brightness(1.04); }
.elementor-button.elementor-size-sm { padding: 11px 22px; font-size: 13px; }
.elementor-button.elementor-size-md { padding: 16px 32px; font-size: 15px; }
.elementor-button-content-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* icon list */
.elementor-icon-list-items { margin: 0; padding: 0; list-style: none; }
.elementor-icon-list-item { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 4px 0; }
.elementor-icon-list-icon { flex-shrink: 0; display: inline-flex; width: 1.25em; justify-content: center; padding-top: .22em; }
.elementor-icon-list-icon i { font-size: 14px; }
.elementor-icon-list-text { align-self: center; }

/* icon */
.elementor-icon-wrapper { line-height: 1; text-align: center; }
.elementor-icon { display: inline-block; font-size: 64px; line-height: 1; }
.elementor-icon svg { display: block; width: 1em; height: 1em; }

/* contact form widget (the form itself is not in the archive, only its heading) */
.eael-contact-form-7-wrapper { padding: 30px; border-radius: 10px; background: #fff; box-shadow: 0 14px 40px rgba(20, 20, 60, .12); }
.eael-contact-form-7-title { margin: 0; color: var(--x-heading); font-size: 20px; line-height: 1.4; text-align: center; }

/* empty portfolio columns: keep them from collapsing into an invisible strip */
.elementor-column > .elementor-widget-wrap:not(.elementor-element-populated):empty { min-height: 0; }

/* ==================== 5. Responsive ==================== */
/* tablets: 4 cards -> 2x2, 6 logos -> 3x2 */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-inner-section > .elementor-container { flex-wrap: wrap; }
  .elementor-inner-section .elementor-column.elementor-col-25 { width: 50%; }
  .elementor-inner-section .elementor-column.elementor-col-16 { width: 33.333%; }
}
/* empty Elementor columns only take room once the grid wraps */
@media (max-width: 1024px) {
  .elementor-inner-section .elementor-column:has(> .elementor-widget-wrap:empty) { display: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* a 4-column row with one empty column (devices row) becomes 3 equal columns */
  .elementor-inner-section > .elementor-container:has(> .elementor-col-25 > .elementor-widget-wrap:empty) > .elementor-column.elementor-col-25 { width: 33.333%; }
}
@media (max-width: 1024px) {
  .elementor-hidden-tablet { display: none !important; }
  #site-navigation-wrap, .after-header-content { display: none; }
  .oceanwp-mobile-menu-icon { display: block; margin-left: auto; }
  #site-header-inner { min-height: 72px; }
  #site-logo .custom-logo { max-height: 48px; }
  .content-right-sidebar #content-wrap { flex-direction: column; align-items: stretch; }
  #right-sidebar { width: 100%; }
  h1 { font-size: 30px; }
}
@media (max-width: 767px) {
  .elementor-hidden-phone { display: none !important; }
  .elementor-section .elementor-container { flex-wrap: wrap; }
  .elementor-column { width: 100%; }
  .elementor-mobile-align-center .elementor-button-wrapper { text-align: center; }
  .elementor-heading-title { overflow-wrap: break-word; }
  #site-header-inner { min-height: 64px; gap: 12px; }
  #site-logo .custom-logo { max-height: 40px; }
  .page-header { padding: 32px 0 28px; }
  .page-header-title { font-size: 26px; }
  #content-wrap { padding-top: 32px; padding-bottom: 32px; }
  .eael-contact-form-7-wrapper { padding: 22px 18px; }
  h1 { font-size: 26px; } h2 { font-size: 23px; }
}