/*!
Theme Name: Zulu Help
Theme URI: https://webdeveloper.com.ua/
Author: webdeveloper.com.ua
Author URI: https://t.me/webdeveloper_com_ua
Description:
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: zulu-help
Tags:
----------------------------------------------------------------------------------------- */
*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* border: 1px solid red; */
}

*:focus,
*:active {
  outline: none;
}

:root {
  /* Color */
  --color-black: #353333;
  --color-white: #fff;
  --color-accent: #6e2dad;
  --color-beige: #f8f7f2;
  --color-orange: #ff9c61;
  --color-blue: #2a83cb;
  --color-gray: rgb(128, 128, 128);
  --color-gray-dark: #575555;
  --color-gray-light: #e9e9e9;
  --color-orange-light: #fff5ef;

  /* Font Family */
  --font-sans-serif: "Raleway", sans-serif;

  /* Font Size */
  --font-size-h1: 48px;
  --font-size-h2: 38px;
  --font-size-h3: 28px;
  --font-size-h4: 26px;
  --font-size-h5: 24px;
  --font-size-h6: 22px;
}

html {
  line-height: normal;
  scroll-behavior: smooth;
}

body {
  font-size: 18px;
  font-weight: 400;
  font-display: auto;
  color: var(--color-gray-dark);
  background: var(--color-beige);
  font-family: var(--font-sans-serif);
}

.mobile {
  display: none;
}

@media only screen and (max-width: 576px) {
  .mobile {
    display: block;
  }

  .desktop {
    display: none;
  }
}

.w-50 {
  width: 50%;
}

/* --------------------------------------------------------------------------------------
 *
 *  Grid System
 *
----------------------------------------------------------------------------------------- */

/* Container */
.container,
.container-short,
.container-fluid {
  width: 100%;
  display: flex;
  row-gap: 16px;
  margin: 0 auto;
  padding: 0 16px;
  flex-direction: column;
}

/* Container Default */
.container {
  max-width: 1280px !important;
}

/* Container Short */
.container-short {
  max-width: 920px !important;
}

/* Container Fluid */
.container-fluid {
  max-width: 100% !important;
}

/* Row */
.row {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex: 0 1 auto;
  -webkit-box-flex: 0;
  flex: 0 1 auto;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.y-margin {
  display: flex;
  row-gap: 32px;
  flex-direction: column;
}

.y-center {
  align-items: center;
}

.x-space-between {
  justify-content: space-between;
}

.d-flex {
  display: flex;
}

.justify-content-end {
  justify-content: end;
}

.align-items-start {
  align-items: start;
}

/* Column */
[class*="col-"] {
  box-sizing: border-box;
  -ms-flex: 0 0 auto;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  max-width: 100%;
  padding: 12px;
}

.col-xs {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  -webkit-box-flex: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  max-width: 100%;
}

.col-xs-1 {
  -ms-flex-preferred-size: 8.333%;
  flex-basis: 8.333%;
  max-width: 8.333%;
}

.col-xs-2 {
  -ms-flex-preferred-size: 16.667%;
  flex-basis: 16.667%;
  max-width: 16.667%;
}

.col-xs-3 {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%;
}

.col-xs-4 {
  -ms-flex-preferred-size: 33.333%;
  flex-basis: 33.333%;
  max-width: 33.333%;
}

.col-xs-5 {
  -ms-flex-preferred-size: 41.667%;
  flex-basis: 41.667%;
  max-width: 41.667%;
}

.col-xs-6 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}

.col-xs-7 {
  -ms-flex-preferred-size: 58.333%;
  flex-basis: 58.333%;
  max-width: 58.333%;
}

.col-xs-8 {
  -ms-flex-preferred-size: 66.667%;
  flex-basis: 66.667%;
  max-width: 66.667%;
}

.col-xs-9 {
  -ms-flex-preferred-size: 75%;
  flex-basis: 75%;
  max-width: 75%;
}

.col-xs-10 {
  -ms-flex-preferred-size: 83.333%;
  flex-basis: 83.333%;
  max-width: 83.333%;
}

.col-xs-11 {
  -ms-flex-preferred-size: 91.667%;
  flex-basis: 91.667%;
  max-width: 91.667%;
}

.col-xs-12 {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
}

@media only screen and (min-width: 576px) {
  .col-sm {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-sm-1 {
    -ms-flex-preferred-size: 8.333%;
    flex-basis: 8.333%;
    max-width: 8.333%;
  }

  .col-sm-2 {
    -ms-flex-preferred-size: 16.667%;
    flex-basis: 16.667%;
    max-width: 16.667%;
  }

  .col-sm-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    -ms-flex-preferred-size: 33.333%;
    flex-basis: 33.333%;
    max-width: 33.333%;
  }

  .col-sm-5 {
    -ms-flex-preferred-size: 41.667%;
    flex-basis: 41.667%;
    max-width: 41.667%;
  }

  .col-sm-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    -ms-flex-preferred-size: 58.333%;
    flex-basis: 58.333%;
    max-width: 58.333%;
  }

  .col-sm-8 {
    -ms-flex-preferred-size: 66.667%;
    flex-basis: 66.667%;
    max-width: 66.667%;
  }

  .col-sm-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    -ms-flex-preferred-size: 83.333%;
    flex-basis: 83.333%;
    max-width: 83.333%;
  }

  .col-sm-11 {
    -ms-flex-preferred-size: 91.667%;
    flex-basis: 91.667%;
    max-width: 91.667%;
  }

  .col-sm-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width: 992px) {
  .col-md {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-md-1 {
    -ms-flex-preferred-size: 8.333%;
    flex-basis: 8.333%;
    max-width: 8.333%;
  }

  .col-md-2 {
    -ms-flex-preferred-size: 16.667%;
    flex-basis: 16.667%;
    max-width: 16.667%;
  }

  .col-md-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-md-4 {
    -ms-flex-preferred-size: 33.333%;
    flex-basis: 33.333%;
    max-width: 33.333%;
  }

  .col-md-5 {
    -ms-flex-preferred-size: 41.667%;
    flex-basis: 41.667%;
    max-width: 41.667%;
  }

  .col-md-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-md-7 {
    -ms-flex-preferred-size: 58.333%;
    flex-basis: 58.333%;
    max-width: 58.333%;
  }

  .col-md-8 {
    -ms-flex-preferred-size: 66.667%;
    flex-basis: 66.667%;
    max-width: 66.667%;
  }

  .col-md-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-md-10 {
    -ms-flex-preferred-size: 83.333%;
    flex-basis: 83.333%;
    max-width: 83.333%;
  }

  .col-md-11 {
    -ms-flex-preferred-size: 91.667%;
    flex-basis: 91.667%;
    max-width: 91.667%;
  }

  .col-md-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width: 1200px) {
  .col-lg {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-lg-1 {
    -ms-flex-preferred-size: 8.333%;
    flex-basis: 8.333%;
    max-width: 8.333%;
  }

  .col-lg-2 {
    -ms-flex-preferred-size: 16.667%;
    flex-basis: 16.667%;
    max-width: 16.667%;
  }

  .col-lg-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    -ms-flex-preferred-size: 33.333%;
    flex-basis: 33.333%;
    max-width: 33.333%;
  }

  .col-lg-5 {
    -ms-flex-preferred-size: 41.667%;
    flex-basis: 41.667%;
    max-width: 41.667%;
  }

  .col-lg-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    -ms-flex-preferred-size: 58.333%;
    flex-basis: 58.333%;
    max-width: 58.333%;
  }

  .col-lg-8 {
    -ms-flex-preferred-size: 66.667%;
    flex-basis: 66.667%;
    max-width: 66.667%;
  }

  .col-lg-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    -ms-flex-preferred-size: 83.333%;
    flex-basis: 83.333%;
    max-width: 83.333%;
  }

  .col-lg-11 {
    -ms-flex-preferred-size: 91.667%;
    flex-basis: 91.667%;
    max-width: 91.667%;
  }

  .col-lg-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------------------
 *
 *  Typography
 *
----------------------------------------------------------------------------------------- */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 700;
  line-height: 1.4;
}

h1,
.h1 {
  font-size: var(--font-size-h1);
}

h2,
.h2 {
  font-size: var(--font-size-h2);
}

h3,
.h3 {
  font-size: var(--font-size-h3);
}

h4,
.h4 {
  font-size: var(--font-size-h4);
}

h5,
.h5 {
  font-size: var(--font-size-h5);
}

h6,
.h6 {
  font-size: var(--font-size-h6);
}

/* Accent */
.accent {
  color: var(--color-accent);
}

/* Text Orange */
.orange {
  color: var(--color-orange);
}

/* Text White */
.white {
  color: var(--color-white) !important;
}

/* Text Black */
.black {
  color: var(--color-black);
}

.blue {
  color: var(--color-blue);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  cursor: pointer;
}

p {
  line-height: 1.4;
}

ul,
ol,
dl {
  line-height: 1.5;
  list-style: none;
}

img {
  height: auto;
  max-width: 100%;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid var(--color-gray);
}

thead {
  font-weight: 500;
  text-align: center;
  color: var(--color-white);
  background: var(--color-gray-dark);
}

th,
td {
  padding: 32px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: var(--color-gray-light);
}

/*  Typography: Editor
------------------------------------------ */
.editor > *:not(:last-child) {
  margin-bottom: 16px;
}

.editor ul,
.editor ol {
  margin-left: 16px;
}

.editor ul li:not(:last-child),
.editor ol li:not(:last-child) {
  margin: 0 0 10px 0;
}

.editor ul {
  list-style: square;
}

.editor ol {
  list-style: decimal;
}

.editor iframe {
  width: 100%;
  height: 400px;
}

.editor a {
  text-decoration: underline;
  color: var(--color-accent);
}

.editor strong,
.editor b {
  font-weight: 700;
}

.editor a {
  font-weight: 700;
  text-decoration: underline;
  color: var(--color-accent);
}

/* Blockquote */
.editor blockquote {
  margin: 0 auto;
  margin-bottom: 16px;
}

.editor blockquote::after,
.editor blockquote::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background: url("https://api.iconify.design/el:quotes.svg?color=%23D1CEE1")
    no-repeat center center / contain;
}

.editor blockquote::after {
  margin-left: auto;
  transform: rotate(180deg);
}

.editor blockquote p {
  padding: 16px 32px;
}

.editor blockquote p:first-child {
  padding: 16px 32px 0 32px;
}

.editor blockquote p:last-child {
  margin-bottom: 0 32px 16px 32px;
}

/* --------------------------------------------------------------------------------------
 *
 *  Site Header
 *
 *  —— Headbar
 *  —— Sidebar
 *
----------------------------------------------------------------------------------------- */

:root {
  /* Site Header */
  --site-header-height: 88px;

  /* Site Header: Sidebar */
  --sidebar-width: 350px;
}

/* Site Header */
.site-header {
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  font-size: 16px;
  position: sticky;
  background: transparent;
  color: var(--color-black);
  transition: ease-in-out 0.15s;
}

/* Site Header Fixed */
.site-header.fixed {
  position: fixed;
  color: var(--color-white);
}

.site-header.fixed #headbar-buttons [class*="button-"] {
  border-color: var(--color-white);
  color: var(--color-white);
}

.site-header.fixed #headbar-buttons [class*="button-"]:hover {
  color: var(--color-accent);
}

/* Onscroll / Site Header */
.onscroll .site-header {
  background: var(--color-beige);
  color: var(--color-black) !important;
  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.1);
}

.onscroll .site-header.fixed #headbar-buttons [class*="button-"] {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/*  Site Header: Headbar
----------------------------------------------------------------------------------------- */

/* Headbar */
.headbar {
  display: flex;
  align-items: center;
  height: var(--site-header-height);
}

.headbar-content {
  display: flex;
  column-gap: 24px;
  align-items: center;
  justify-content: flex-end;
}

.headbar-content .site-branding,
.headbar-content .headbar-navigation {
  margin-right: auto;
}

/*  Headbar: Headbar Navigation
------------------------------------------ */
.headbar-navigation .menu {
  display: flex;
  column-gap: 24px;
}

/* Headbar Navigation / Menu Item */
.headbar-navigation .menu-item {
  height: 32px;
  display: flex;
  column-gap: 8px;
  cursor: pointer;
  position: relative;
  align-items: center;
  transition: ease-in-out 0.15s;
  justify-content: space-between;
}

.headbar-navigation .menu-item > a {
  width: 100%;
  display: block;
  font-weight: 500;
}

.headbar-navigation .menu-item:hover > a {
  color: var(--color-accent);
}

.headbar-navigation .current-menu-item > a {
  text-decoration: underline;
}

/* Headbar Navigation / Sub Menu */
.headbar-navigation .sub-menu {
  left: 0;
  top: 30px;
  padding: 16px;
  display: none;
  position: absolute;
  border-radius: 16px;
  min-width: max-content;
  background: var(--color-white);
  color: var(--color-black) !important;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
}

/* Menu Item Has Children */
.headbar-navigation .menu-item-has-children::after {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
}

.headbar-navigation .menu-item-has-children .menu-item-type-post_type.menu-item-object-page a {
  color: var(--color-accent);
  text-decoration: underline;
  font-weight: 600;
}

/* First ****************************** */
.headbar-navigation .menu > *::after {
  background: url("https://api.iconify.design/carbon/chevron-down.svg")
    no-repeat center center / contain;
}

.headbar-navigation .menu > *:hover > .sub-menu {
  display: block;
}

/* Second ****************************** */
.headbar-navigation .menu > * > * > *::after {
  background: url("https://api.iconify.design/carbon/chevron-right.svg")
    no-repeat center center / contain;
}

.headbar-navigation .menu > * > * > *:hover > .sub-menu {
  top: 0;
  display: block;
  left: 100%;
}

/* Third ****************************** */
.headbar-navigation .menu > * > * > * > * > *::after {
  background: url("https://api.iconify.design/carbon/chevron-right.svg")
    no-repeat center center / contain;
}

.headbar-navigation .menu > * > * > * > * > *:hover > .sub-menu {
  top: 0;
  display: block;
  left: 100%;
}

/*  Site Header: Sidebar
----------------------------------------------------------------------------------------- */
.sidebar {
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  z-index: 999;
  position: fixed;
  overflow-x: hidden;
  color: var(--color-black);
  transition: ease-in-out 0.15s;
  background: var(--color-beige);
  -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
}

.sidebar.open,
.sidebar > * {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
}

.sidebar > * > *:not(:last-child) {
  margin: 0 0 16px 0;
}

/* Sidebar Head */
.sidebar-head {
  min-height: var(--site-header-height);
  flex-direction: row;
  justify-content: end;
  align-items: center;
  padding-left: 28px;
  padding-right: 28px;
}

/* Sidebar Body */
.sidebar-body {
  padding: 32px;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 32px;
}

/*  Sidebar: Sidebar Navigation
------------------------------------------ */
.sidebar-navigation .menu {
  display: flex;
  row-gap: 16px;
  flex-direction: column;
}

/* Headbar Navigation / Menu Item */
.sidebar-navigation .menu-item {
  display: flex;
  position: relative;
  flex-direction: column;
}

.sidebar-navigation .menu-item > a {
  display: block;
  min-width: max-content;
}

/* Sidebar Navigation / Menu Item Toggle */
.sidebar-navigation .menu-item-toggle {
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  display: block;
  position: absolute;
  filter: brightness(0);
  transition: ease-in-out 0.16s;
  background: url("https://api.iconify.design/carbon/chevron-down.svg?color=%236e2dad")
    no-repeat center center / contain;
}

.sidebar-navigation .menu-item-toggle.active {
  filter: unset;
  transform: rotate(180deg);
}

/* Sidebar Navigation / Sub Menu */
#sidebar-menu > * > .sub-menu,
#sidebar-menu > * > .sub-menu > * > .sub-menu, 
#sidebar-menu > * > .sub-menu > * > .sub-menu > * > .sub-menu {
  row-gap: 16px;
  max-height: 0;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  transition: max-height 0.15s ease-out;
}

#sidebar-menu > * > .sub-menu > *:first-child,
#sidebar-menu > * > .sub-menu > * > .sub-menu > *:first-child,
#sidebar-menu > * > .sub-menu > * > .sub-menu > * > .sub-menu > *:first-child {
  margin-top: 16px;
}

/* First ****************************** */

/* Second ****************************** */

/*  Sidebar: Menu Toggle
------------------------------------------ */
.menu-toggle {
  width: 35px;
  height: 26px;
  display: none;
  cursor: pointer;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.menu-toggle span {
  left: 0;
  opacity: 1;
  height: 1px;
  width: 100%;
  display: block;
  border-radius: 0;
  position: absolute;
  background: var(--color-accent);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.menu-toggle-close span {
  background: var(--color-accent);
}

.menu-toggle span:nth-child(1) {
  top: 0px;
}

.menu-toggle span:nth-child(2),
.menu-toggle span:nth-child(3) {
  top: 12px;
}

.menu-toggle span:nth-child(4) {
  top: 24px;
}

.menu-toggle-close span:nth-child(1) {
  top: 14px;
  width: 0%;
  left: 50%;
}

.menu-toggle-close span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.menu-toggle-close span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.menu-toggle-close span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

@media only screen and (max-width: 576px) {
  .sidebar-head {
    justify-content: space-between;
  }
}

.headbar-content .phones {
  position: relative;
}

.headbar-content .phones .phone-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 6px;
  border: 1px solid var(--color-accent);
  cursor: pointer;
  background: none;
} 

.headbar-content .phones .phone-block {
  display: none;
  top: 50px;
  position: absolute;
  background: var(--color-white);
  padding: 10px 15px;
  border-radius: 8px;
  width: max-content;
  flex-direction: column;
  gap: 15px;
}

.headbar-content .phones .phone-block .phone-block__item {
  display: flex;
  align-items: center;
}

.headbar-content .phones .phone-block .phone-block__text {
  color: var(--color-black);
}

.headbar-content .phones .phone-block .phone-block__btn {
  margin-left: 15px;
  background: none;
  line-height: 0;
  border: none;
  cursor: pointer;
}

.headbar-content .phones .phone-block::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 20px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--color-white);
  z-index: 2;
}

.headbar-content .phones:hover .phone-btn {
  background: var(--color-accent);
}

.headbar-content .phones:hover .phone-btn img {
  filter: brightness(0) invert(1);
}

.headbar-content .phones:hover .phone-block {
  display: flex;
}

/* --------------------------------------------------------------------------------------
 *
 *  Site Page
 *
 *  —— Page Header
 *  —— 
 *
----------------------------------------------------------------------------------------- */

/*  Site Page: Page Header
----------------------------------------------------------------------------------------- */
.page-header {
  padding: 16px 0 0 0;
}

/* Page Meta */
.page-meta {
  display: flex;
  row-gap: 32px;
  flex-direction: column;
}

/* Page Title */
.page-title {
  text-align: center;
  color: var(--color-black);
}

/* Page Breadcrumbs */
.page-breadcrumbs {
  font-size: 14px;
  font-weight: 500;
}

.page-breadcrumbs a {
  color: var(--color-orange);
}

.page-breadcrumbs .separator {
  margin: 0 8px;
}

/* --------------------------------------------------------------------------------------
 *
 *  Site Footer
 *
 *  —— 
 *  —— 
 *
----------------------------------------------------------------------------------------- */
.site-footer {
  font-size: 16px;
  padding: 56px 0;
  color: var(--color-black);
  background: var(--color-white);
}

/* Colophon Copyright */
.colophon-copyright {
  text-align: center;
}

/*  Colophon Navigation
------------------------------------------ */
.colophon-navigation .menu {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;
  column-gap: 40px;
  align-items: center;
}

.colophon-navigation .menu > * {
  font-weight: 600;
  color: var(--color-accent);
}

.colophon-navigation .menu-item {
  transition: ease-in-out 0.15s;
}

.colophon-navigation .menu-item:hover {
  color: var(--color-accent);
}

/* Colophon Navigation / Menu Divide */
.colophon-navigation .menu-divide {
  row-gap: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.colophon-navigation .menu-divide > *:not(:last-child)::after {
  content: "|";
  opacity: 0.6;
  margin: 0 8px;
}

/* Colophon Navigation / Menu Column */
.colophon-navigation .menu-column {
  display: flex;
  row-gap: 16px;
  flex-direction: column;
}

/*  Colophon Message
------------------------------------------ */
.colophon-message {
  display: flex;
  font-weight: 600;
  border-radius: 8px;
  padding: 24px 16px;
  align-items: center;
  justify-content: center;
  color: var(--color-blue);
  background: rgba(58, 117, 195, 0.08);
  border: 1px solid rgba(58, 117, 195, 0.16);
}

/* Colophon Message Brand */
.colophon-message__brand {
  display: flex;
  column-gap: 16px;
  margin: 0 32px 0 0;
  padding: 0 32px 0 0;
  align-items: center;
  min-width: max-content;
  border-right: 1px solid rgba(58, 117, 195, 0.16);
}

.colophon-message__image {
  max-height: 48px;
}

/*  Colophon Panel
------------------------------------------ */
.colophon-panel {
  display: flex;
  row-gap: 56px;
  flex-wrap: wrap;
  column-gap: 56px;
  justify-content: space-between;
}

/* Colophon Column */
.colophon-column {
  display: flex;
  row-gap: 56px;
  max-width: 440px;
  flex-direction: column;
  justify-content: space-between;
}

/* Colophon Wrapper */
.colophon-wrapper {
  display: flex;
  column-gap: 56px;
  justify-content: space-between;
}

@media only screen and (max-width: 576px) {
  /* Colophon Panel / Colophon Column */
  .colophon-panel,
  .colophon-column {
    row-gap: 24px;
  }
  /* Colophon Wrapper */
  .colophon-wrapper {
    row-gap: 24px;
    column-gap: 24px;
    flex-direction: column;
  }
  /* Colophon Navigation */
  .colophon-navigation .menu {
    column-gap: 24px;
  }

  /* Colophon Message */
  .colophon-message {
    display: flex;
    flex-direction: column;
  }

  /* Colophon Message Brand */
  .colophon-message__brand {
    min-width: 100%;
    border-right: none;
    margin: 0 0 16px 0;
    padding: 0 0 16px 0;
    border-bottom: 1px solid rgba(58, 117, 195, 0.16);
  }

  .colophon-message__image {
    max-height: 48px;
  }
}

/* Card Logo */

.card-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 15px;
}

.card-logo__image {
  width: 50px;
}

.card-logo__image:nth-child(1) {
  width: 35px;
}

.card-logo__image:nth-child(3) {
  width: 100px;
}

.card-logo__image:nth-child(4) {
  width: 55px;
}

.card-logo__image:nth-child(5) {
  width: 60px;
  margin-top: 2px;
}

.card-logo__image:nth-child(6) {
  width: 25px;
  margin-top: -2px;
}

.card-logo__image:nth-child(7) {
  width: 27px;
}

.card-logo__image:nth-child(8) {
  width: 29px;
}

/* --------------------------------------------------------------------------------------
 *
 *  Section
 *
 *  —— 
 *  —— 
 *
----------------------------------------------------------------------------------------- */

:root {
  --section-padding: 80px;
}

section {
  padding: var(--section-padding) 0;
}

/* Section Orange */
section.orange {
  background: var(--color-orange);
}

/* Section Purple */
section.purple {
  background: var(--color-accent);
}

/*  Section: Hero
----------------------------------------------------------------------------------------- */
section.hero {
  padding: 0;
  position: relative;
}

/* Hero Home */
section#hero-home {
  display: flex;
  padding: 64px 0;
  align-items: center;
  min-height: calc(var(--vh, 1vh) * 100 - var(--site-header-height));
}

/* Hero Info */
section#hero-info {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--vh, 1vh) * 100 - var(--site-header-height));
}

/* Hero 404 */
section#hero-404 {
  display: flex;
  align-items: center;
  min-height: calc(var(--vh, 1vh) * 100 - var(--site-header-height));
}

/*  Hero Overlay
------------------------------------------ */
.hero-overlay {
  display: flex;
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.5);
  min-height: calc(var(--vh, 1vh) * 100);
  padding: calc(var(--site-header-height) + 16px) 0;
}

.hero-overlay .container {
  justify-content: space-between;
}

.hero-overlay-reviews .container {
  justify-content: start;
}

.hero-overlay .container .page-meta {
  padding-left: 12px;
}

/* Hero Overlay / Page Meta */
.hero-post__title {
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
}

.hero-overlay-reviews__row {
  align-items: center;
  height: 100%;
}

.hero-overlay-reviews__col {
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------------------
 *
 *  Component
 *
 *  —— 
 *  —— 
 *
----------------------------------------------------------------------------------------- */

/*  Component: Thumbnail
----------------------------------------------------------------------------------------- */
[class*="__thumbnail"] {
  width: 100%;
  height: 100%;
  display: block;
  line-height: 0;
  overflow: hidden;
  position: relative;
  border-radius: 16px;
  transition: ease-in-out 0.15s;
  background: var(--color-gray-light);
}

[class*="__thumbnail"] > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: ease-in-out 0.15s;
}

/*  Component: Notfound
----------------------------------------------------------------------------------------- */

/* Icon 404 */
.notfound {
  display: flex;
  row-gap: 64px;
  align-items: center;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
}

/*  */
.notfound-text {
  display: flex;
  row-gap: 24px;
  flex-direction: column;
}

/* notfound */
.notfound-image {
  max-height: 468px;
}

/*  Component: Cookie
----------------------------------------------------------------------------------------- */
.cookie {
  right: 48px;
  bottom: 48px;
  z-index: 1000;
  display: none;
  row-gap: 24px;
  position: fixed;
  max-width: 420px;
  border-radius: 32px;
  padding: 24px 32px 32px 32px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.08);
}

/* Cookie Active */
.cookie.active {
  display: flex;
  flex-direction: column;
}

/*  Cookie Buttons
------------------------------------------ */

/* Cookie Cancel */
.cookie-cancel {
  font-size: 32px;
  margin-left: auto;
  color: var(--color-gray);
}

/*  Cookie Text
------------------------------------------ */
.cookie-text {
  position: relative;
  padding: 0 0 0 64px;
}

.cookie-text::before {
  top: 0;
  left: 0;
  content: "";
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  background: url(/wp-content/themes/zulu-help/assets/media/icon-cookie.png)
    no-repeat center center / contain;
}

/* Cookie Text Link */
.cookie-text__link {
  font-weight: 600;
  color: var(--color-orange);
}

/*  Component: Step
----------------------------------------------------------------------------------------- */

/*  Step Feed
------------------------------------------ */
.step-feed {
  display: flex;
  row-gap: 16px;
  flex-direction: column;
}

/*  Step Box
------------------------------------------ */
.step-box {
  row-gap: 0;
  padding: 24px;
  display: flex;
  position: relative;
  border-radius: 24px;
  flex-direction: column;
  padding: 24px 24px 24px 96px;
  background: var(--color-white);
}

.step-box__title::before {
  top: 16px;
  left: 24px;
  content: "";
  width: 48px;
  height: 48px;
  display: flex;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  position: absolute;
  align-items: center;
  border-radius: 100%;
  justify-content: center;
  color: var(--color-accent);
  content: attr(data-iteration);
  border: 1px solid var(--color-accent);
}

.step-box__title.active::before {
  color: var(--color-white);
  background: var(--color-accent);
}

.step-box__text {
  max-height: 0;
  overflow: hidden;
  color: var(--color-gray-dark);
  transition: max-height 0.15s ease-out;
}

/*  Component: Accordion
----------------------------------------------------------------------------------------- */
/* Accordion Feed */
.accordion-feed {
  display: flex;
  border-radius: 24px;
  flex-direction: column;
  background: var(--color-white);
}

.accordion-feed > *:not(:last-child) {
  border-bottom: 1px solid var(--color-gray-light);
}

/* Accordion */
.accordion {
  padding: 24px 32px;
  position: relative;
}

/* Accordion Panel */
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  color: var(--color-gray-dark);
  transition: max-height 0.15s ease-out;
}

/* Accordion Button */
.accordion-button {
  display: flex;
  cursor: pointer;
  font-weight: 600;
  position: relative;
  align-items: center;
  color: var(--color-black);
  font-size: var(--font-size-h6);
  justify-content: space-between;
}

.accordion-button::after {
  width: 40px;
  content: "";
  height: 40px;
  display: block;
  min-width: 40px;
  min-height: 40px;
  border-radius: 100%;
  transition: ease-in-out 0.15s;
  background: url("https://api.iconify.design/bi/chevron-down.svg?color=white")
    no-repeat center center / 16px var(--color-accent);
}

.accordion-button.active {
  margin-bottom: 8px;
}

.accordion-button.active::after {
  transform: rotate(180deg);
}

@media only screen and (max-width: 576px) {
  /* Accordion */
  .accordion {
    padding: 16px;
  }
}

/*  Component: Card
----------------------------------------------------------------------------------------- */

/*  Card Feed
------------------------------------------ */
.card-feed {
  display: flex;
  row-gap: 32px;
  flex-direction: column;
}

/*  Card Announce
------------------------------------------ */
.card-announce {
  display: flex;
  padding: 0 48px;
  overflow: hidden;
  column-gap: 40px;
  align-items: center;
  /*border-radius: 32px;*/
  background: var(--color-white);
}

.card-announce > * {
  width: calc(50% - 20px);
}

/* Card Announce Transparent */
.card-announce.unstyle {
  padding: 0;
  background: transparent;
}

/* Card Announce Image */
.card-announce__image {
  overflow: hidden;
  border-radius: 24px;
}

/* Card Announce Slider */
.card-announce__slider {
  position: relative;
  line-height: 0;
}

.card-announce__slider::after,
.card-announce__slider::before {
  left: 0;
  content: "";
  width: 100%;
  height: 48px;
  position: absolute;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.78) 4.44%,
    rgba(255, 255, 255, 0) 100%
  );
}

.card-announce__slider::before {
  top: -2px;
}

.card-announce__slider::after {
  bottom: -2px;
  transform: rotate(180deg);
}

/*  Caed Box Icon
------------------------------------------ */
.card-box {
  height: 100%;
  row-gap: 16px;
  padding: 32px;
  border-radius: 24px;
  background: var(--color-white);
}

.card-box > *:not(:last-child) {
  margin: 0 0 16px 0;
}

.card-box.center {
  text-align: center;
  align-items: center;
}

/* Card Box Title */
.card-box__title {
  line-height: 1.2;
}

.card-box__title span {
  font-size: 26px;
}

/* Card Box Icon */
.card-box__icon {
  max-height: 224px;
  object-fit: contain;
}

/* Card Box Icon Small */
.card-box__icon.small {
  max-height: 48px;
}

/* Card Box Icon Middle */
.card-box__icon.middle {
  max-height: 112px;
}

/*  Component: Discount
----------------------------------------------------------------------------------------- */

/*  Discount Feed
------------------------------------------ */
.discount-feed {
  display: flex;
  row-gap: 32px;
  flex-direction: column;
}

/*  Discount Announce
------------------------------------------ */
.discount-announce {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 24px;
  color: var(--color-white);
  background: var(--color-accent);
}

.discount-announce__image {
  width: 100%;
  max-width: 500px;
}

/*  Discount Box
------------------------------------------ */
.discount-box {
  display: flex;
  row-gap: 24px;
  column-gap: 72px;
  padding: 40px 40px;
  align-items: center;
  border-radius: 24px;
  background: var(--color-white);
}

/* Discount Box Image */
.discount-box__image {
  width: 340px;
  height: 260px;
  object-fit: contain;
}

/* Discount Box Content */
.discount-box__content {
  display: flex;
  row-gap: 16px;
  flex-direction: column;
}

/*  responsive
------------------------------------------ */
@media only screen and (max-width: 992px) {
  /* Discount Box */
  .discount-box {
    flex-wrap: wrap;
  }
}

/*  
----------------------------------------------------------------------------------------- */

/*  Component: Service
----------------------------------------------------------------------------------------- */

/*  Service Feed
------------------------------------------ */
.service-feed {
  display: flex;
  row-gap: 16px;
  flex-direction: column;
}

/*  Service Grid
------------------------------------------ */
.service-grid {
  row-gap: 24px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 32px;
}

.service-grid > * {
  min-width: 220px;
  text-decoration: underline;
  width: calc(33.33% - 32px);
}

/*  Service Box
------------------------------------------ */
.service-box {
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;
  padding: 16px 24px;
  border-radius: 16px;
  align-items: center;
  justify-content: flex-end;
  background: var(--color-white);
}

.service-box > *:first-child {
  margin-right: auto;
}

/* Service Box Panel */
.service-box__panel {
  display: flex;
  min-width: 760px;
  flex-wrap: wrap;
  row-gap: 16px;
  justify-content: space-between;
}

/* Service Box Meta */
.service-box__meta {
  display: flex;
  column-gap: 16px;
  align-items: center;
}

/* Service Box Title */
.service-box__title {
  font-size: 22px;
  font-weight: 600;
}

/* Service Box Info */
.service-box__info {
  display: flex;
  font-weight: 600;
  column-gap: 8px;
  align-items: center;
}

.service-box__info::before {
  content: "";
  width: 32px;
  height: 32px;
  display: block;
  min-width: 32px;
  min-height: 32px;
}

.service-box__info.timing::before {
  background: url(/wp-content/themes/zulu-help/assets/media/icon-clock.png)
    no-repeat center center / contain;
}

.service-box__info.pricing::before {
  background: url(/wp-content/themes/zulu-help/assets/media/icon-money-bag.png)
    no-repeat center center / contain;
}

/* Service Box Meta Inverse */
.service-box__meta.inverse {
  filter: invert(0) brightness(100);
}

/*  Service Card
------------------------------------------ */
.service-card {
  height: 100%;
  row-gap: 48px;
  display: flex;
  padding: 32px;
  border-radius: 24px;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-white);
}

/* Service Card Iterator */
.service-card__iterator {
  font-weight: 700;
  color: var(--color-orange);
  font-size: var(--font-size-h2);
}

/* Service Card Title */
.service-card__title {
  font-weight: 700;
  color: var(--color-black);
  font-size: var(--font-size-h4);
}

/* Service Card Text */
.service-card__text {
  color: var(--color-gray-dark);
  font-size: var(--font-size-h6);
}

/* Service Card Value */
.service-card__value {
  color: var(--color-black);
}


/*  New Service Card
------------------------------------------ */
.new-service-card {
  height: 100%;
  row-gap: 15px;
  display: flex;
  padding: 32px;
  border-radius: 24px;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-white);
}

.new-service-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--color-gray-light);
  padding-bottom: 15px;
}

.new-service-card__body {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

.new-service-card__footer {
  padding-top: 15px;
  border-top: 1px solid var(--color-gray-light);
}

.new-service-card__icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.new-service-card__title {
  font-weight: 700;
  color: var(--color-black);
  font-size: var(--font-size-h6);
}

.new-service-card__key {
  font-size: 14px;
  color: #575555;
}

.new-service-card__value {
  font-weight: 700;
  font-size: 16px;
}

.new-service-card__price {
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
  font-size: var(--font-size-h6);
}

/*  Service Announce
------------------------------------------ */
.service-announce {
  display: flex;
  column-gap: 40px;
  row-gap: 24px;
  align-items: center;
}

/* Service Card Thumbnail */
.service-announce__thumbnail {
  width: 400px;
  height: 400px;
  min-width: 400px;
  min-height: 400px;
  object-fit: cover;
}

/* Service Card Textarea */
.service-announce__textarea {
  display: flex;
  row-gap: 24px;
  flex-direction: column;
}

/*  responsive
------------------------------------------ */
@media only screen and (max-width: 992px) {
  /* Service Announce */
  .service-announce {
    flex-wrap: wrap;
  }
  /* .service-announce__thumbnail */
  .service-announce__thumbnail {
    height: 280px;
    min-width: unset;
    min-height: unset;
  }
}
@media only screen and (max-width: 768px) {
  /* Servie box Panel */
  .service-box__panel {
    min-width: 100%;
  }
  .service-box__panel .buttons {
    width: 100%;
    justify-content: space-between;
  }
}

/*  Component: Orderbox
----------------------------------------------------------------------------------------- */
.order-box {
  height: 100%;
  padding: 24px;
  border-radius: 24px;
  background: var(--color-white);
}

/*  Component: Card
----------------------------------------------------------------------------------------- */

/*  Component: Team
----------------------------------------------------------------------------------------- */

/*  Team Announce
------------------------------------------ */
.team-announce {
  display: flex;
  padding: 32px;
  row-gap: 24px;
  column-gap: 48px;
  border-radius: 24px;
  align-items: center;
  background: var(--color-white);
}

/*  Team Slider
------------------------------------------ */
#team-slider {
  margin: 0;
  width: 340px;
  height: 420px;
  border-radius: 16px;
}

/* Team Slider Image */
.team-slider__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/*  Team Responsive
------------------------------------------ */
@media only screen and (max-width: 576px) {
  /* Tem Slider */
  #team-slider {
    width: 100%;
    height: 320px;
  }
  /* Team Announce */
  .team-announce {
    flex-wrap: wrap;
  }
}

/*  Team Announce Update
------------------------------------------ */
.team-announce-update {
  display: flex;
  padding: 32px;
  row-gap: 24px;
  column-gap: 48px;
  align-items: center;
  background: var(--color-white);
  border-radius: 16px;
  padding: 56px 32px;
}

/*  Team Slider (Update)
------------------------------------------ */

.team-slider-update {
  display: grid;
  grid-template-columns: 300px 1fr;
  column-gap: 48px;
  padding-left: 5px;
  padding-right: 5px;
}

/* Team Slider Image */
.team-slider-update__image {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 16px;
}

.team-slider-update__title {
  margin-bottom: 12px;
}

.team-slider-update__text {
  font-size: 14px;
  text-align: justify;
}

.team-slider-update__line {
  border: 1px solid #e9e9e9;
  margin-top: 24px;
  margin-bottom: 24px;
}

.team-slider-update__info {
  display: flex;
  flex-flow: column;
  row-gap: 20px;
}

.team-slider-update__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 16px;
}

.team-slider-update__item.team-slider-update__item_end {
  text-align: end;
}

/*  Swiper Control
------------------------------------------ */
.team-announce-update .swiper-control {
  display: flex;
  column-gap: 16px;
  align-items: center;
}

/* Swiper Control Buttons */
.team-announce-update .swiper-next,
.team-announce-update .swiper-prev {
  width: 56px;
  height: 56px;
  display: flex;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  align-items: center;
  border-radius: 100%;
  justify-content: center;
  color: var(--color-accent);
  background: var(--color-white);
  border: 1px solid var(--color-accent);
}

.team-announce-update .swiper-next:hover,
.team-announce-update .swiper-prev:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

@media only screen and (max-width: 576px) {
  .team-announce-update .swiper-next,
  .team-announce-update .swiper-prev {
    width: 40px;
    height: 40px;
  }

  .team-announce-update .swiper-control {
    column-gap: 8px;
  }
}

/*  Team Responsive
------------------------------------------ */
@media only screen and (max-width: 768px) {

	.team-slider-update__image {
		margin: 0 auto 24px;
	}

	.team-slider-update {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media only screen and (max-width: 576px) {
  /* Tem Slider */
  #team-slider-update {
    width: 100%;
  }
  /* Team Announce */
  .team-announce-update {
    flex-wrap: wrap;
  }

  .team-slider-update__info {
    row-gap: 16px;
  }

  .team-slider-update__item {
    font-size: 14px;
  }
}

.d-none {
	display: none !important;
}

@media only screen and (min-width: 992px) {
  .d-md-flex {
    display: flex !important;
  }
  
  .d-md-none {
    display: none !important;
  }

  .w-md-100 {
    width: 100% !important;;
  }
}

/*  Component: Country Choice
----------------------------------------------------------------------------------------- */
.country-choice {
  display: flex;
  flex-direction: column;
  padding: 40px;
  row-gap: 24px;
  column-gap: 45px;
  border-radius: 20px;
  background: var(--color-white);
}

.country-choice__image {
  max-width: 450px;
  flex: none;
}

@media only screen and (max-width: 1199px) {
  .country-choice {
    column-gap: 35px;
  }

  .country-choice__image {
    max-width: 370px;
  }
}

@media only screen and (max-width: 992px) {
  .country-choice {
    flex-direction: column-reverse;
    padding: 25px;
  }

  .country-choice__image {
    max-width: 100%;
  }
}

@media only screen and (max-width: 576px) {
  .country-choice {
    padding: 16px;
  }
}

/*  Component: Payment Installments
----------------------------------------------------------------------------------------- */

/*  Payment Installments
------------------------------------------ */
.payment-installments {
  display: flex;
  padding: 40px;
  row-gap: 24px;
  column-gap: 45px;
  border-radius: 20px;
  align-items: center;
  background: var(--color-white);
}

.payment-installments__image {
  max-width: 440px;
  flex: none;
}

.payment-installments .headline-title {
  font-size: 32px;
}

.payment-installments .payment-installments__text {
  display: inline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical;
}

.payment-installments .payment-installments__text.opened {
  display: block;
  -webkit-line-clamp: initial;
}

.payment-installments .payment-installments__button {
  font-weight: 700;
  text-decoration: underline;
  color: var(--color-accent);
}

.payment-installments .payment-installments__button.payment-installments__button_hide {
  display: none;
}

.payment-installments .payment-installments__buttons {
  margin-top: 25px;
}

/*  Country Choice Responsive
------------------------------------------ */
@media only screen and (max-width: 1199px) {
  /* Country Choice */
  .payment-installments {
    column-gap: 35px;
  }

  .payment-installments__image {
    max-width: 370px;
  }
}

@media only screen and (max-width: 992px) {
  .payment-installments {
    flex-flow: column;
    padding: 25px;
  }

  .payment-installments__image {
    max-width: 100%;
  }
}

@media only screen and (max-width: 576px) {
  .payment-installments .headline-title {
    font-size: 22px;
  }

  .payment-installments {
    padding: 16px;
  }

  .payment-installments .payment-installments__buttons {
    flex-direction: column;
    align-items: normal;
  }
}

/*  Component: Calculator
----------------------------------------------------------------------------------------- */

/*  Calculator
------------------------------------------ */

.calculation {
  padding: 40px 48px;
  border-radius: 20px;
  background: var(--color-white);
}

.calculation__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-gray-light);
}

.calculation__header .buttons .button-xl {
  padding: 0 24px;
}

.calculation__form {
  padding-top: 40px;
}

.calculation-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
} 

.calculation-form__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-group__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.form-group .form-control-solid {
  background: #F9F9F9;
  border: none;
}

.form-group .form-control-solid:disabled {
  background: #E9ECEF;
  cursor: not-allowed;
  opacity: 0.6;
}

.form-group__append {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calculation-form__cost {
  background: #FFF9F5;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.calculation-cost {
  position: relative;
}

.calculation-cost__wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}

.calculation-cost__text {
  font-size: 12px;
}

.calculation-cost__info {
  display: none;
  position: absolute;
  bottom: 70px;
  left: 30px;
  padding: 10px;
  border-radius: 10px;
  background: var(--color-white);
  max-width: 350px;
  width: 100%;
  box-shadow: 0px 0px 5px #e4e4e4;
}

.calculation-cost__icon {
  cursor: pointer;
  height: 16px;
}

.calculation-cost__icon:hover > .calculation-cost__info {
  display: block;
}

.calculation-cost__total {
  font-weight: 600;
  font-size: 18px;
}

.calculation__footer {
  padding-top: 40px;
}

.calculation__footer .buttons .calculation__mobile-btn {
  display: none;
}

.calculation .slider-empty-value {
  font-size: 14px;
  color: var(--color-orange);
}

@media only screen and (max-width: 1250px) {
  .calculation__footer .buttons .calculation__mobile-btn {
    display: flex;
  }

  .calculation__footer .buttons .calculation__btn {
    display: none;
  }
}

@media only screen and (max-width: 768px) {

  .calculation__header {
    padding-bottom: 25px;
  }
  
  .calculation__form {
    padding-top: 25px;
  }

  .calculation__footer {
    padding-top: 25px;
  }

  .calculation {
    padding: 20px;
  }

  .calculation-form {
    grid-template-columns: 1fr;
    gap: 30px;
  } 

  .calculation-form .form-group:nth-of-type(1) {
    order: 1;
  }
  
  .calculation-form .form-group:nth-of-type(2) {
    order: 3;
  }
  
  .calculation-form .form-group:nth-of-type(3) {
    order: 2;
  }
  
  .calculation-form .form-group:nth-of-type(4) {
    order: 5;
  }

  .calculation-form .form-group:nth-of-type(5) {
    order: 4;
  }

  .calculation-form .form-group:nth-of-type(6) {
    order: 6;
  }

  .calculation__footer .buttons .button-xl {
    width: 100%;
  }
}

/*  Component: Review
----------------------------------------------------------------------------------------- */

/*  Review Box
------------------------------------------ */
.review-box {
  height: 100%;
  padding: 24px;
  border-radius: 24px;
  background: var(--color-white);
}

/* Review Box Meta */
.review-box__meta {
  row-gap: 8px;
  display: flex;
  margin: 0 0 24px 0;
  padding: 0 0 24px 0;
  flex-direction: column;
  border-bottom: 1px solid var(--color-gray-light);
}

/* Review Box Type */
.review-box__type {
  font-size: 16px;
}

/* Review Box Label */
.review-box__label {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

/* Review Box Title */
.review-box__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-accent);
}

/*  Review Slider
------------------------------------------ */

/* Review Slider */
.review-slider__image {
  width: 100%;
  height: 346px;
  object-fit: cover;
  border-radius: 24px;
  border: 2px solid var(--color-white);
}

/*  Component: Rating
----------------------------------------------------------------------------------------- */
.rating {
  width: max-content;
  position: relative;
  min-width: max-content;
}

/* Rating Range */
.rating-range {
  top: 0;
  right: 0;
  z-index: 0;
  height: 100%;
  position: absolute;
  background: rgba(255, 255, 255, 0.72);
}

/* Rating Star */
.rating-star {
  width: 24px;
  height: 24px;
  color: var(--color-orange);
}

/*  Rating Box
------------------------------------------ */
.rating-box-wrap {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}

.rating-box {
  height: 100%;
  padding: 35px;
  display: flex;
  row-gap: 25px;
  border-radius: 24px;
  flex-direction: column;
  background: var(--color-white);
}

.rating-box > *:last-child {
  margin-top: auto;
}

/* Rating Box Icon */
.rating-box__logo {
  max-height: 40px;
}

/* Rating Box Meta */
.rating-box__meta {
  row-gap: 16px;
  display: flex;
  flex-direction: column;
}

/* Rating Box Title */
.rating-box__title {
  font-weight: 600;
  color: var(--color-black);
}

/* Rating Bar */
.rating-bar {
  display: flex;
  font-weight: 600;
  justify-content: space-between;
}

.rating-toggle-btn {
  display: none;
  margin: 0 auto;
  border: 2px solid var(--color-orange);
  color: var(--color-orange);
  padding: 16px 40px;
  border-radius: 10px;
  background: none;
  margin-bottom: 20px;
  font-weight: 600;
}

@media only screen and (max-width: 992px) {
  /* Partner Box */
  .rating-box-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 576px) {

  .rating-box {
    row-gap: 15px;
  }

  .rating-box__icon {
    width: 80px;
  }

  .rating-box__meta {
    row-gap: 10px;
  }

  .rating-box__title,
  .rating-bar__index {
    font-size: 12px;
  }

  .rating-star {
    width: 15px;
    height: 15px;
  }

  .rating-toggle-btn {
    display: flex;
  }
}

/*  Component: Partner
----------------------------------------------------------------------------------------- */

/*  Partner Feed
------------------------------------------ */
.partner-feed {
  display: flex;
  row-gap: 24px;
  flex-direction: column;
}

/*  Partner Box
------------------------------------------ */
.partner-box {
  display: flex;
  row-gap: 24px;
  column-gap: 48px;
  padding: 32px 40px;
  align-items: center;
  border-radius: 24px;
  background: var(--color-white);
}

/* Partner Box Content */
.partner-box__content {
  display: flex;
  row-gap: 16px;
  flex-direction: column;
}

/* Partner Box Logo */
.partner-box__logo {
  width: 184px;
  height: 184px;
  min-width: 184px;
  min-height: 184px;
}

/* Partner Box Title */
.partner-box__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-accent);
}

/*  Responsive
------------------------------------------ */
@media only screen and (max-width: 992px) {
  /* Partner Box */
  .partner-box {
    align-items: flex-start;
    flex-direction: column;
  }
}

/*  Component: Form
----------------------------------------------------------------------------------------- */
form {
  display: flex;
  row-gap: 16px;
  font-size: 16px;
  flex-wrap: wrap;
  column-gap: 24px;
}

label {
  display: flex;
  column-gap: 16px;
  align-items: center;
}

input,
select,
textarea {
  width: 100%;
  padding: 16px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid #acacac;
}

input.zulu-input,
select.zulu-select,
textarea {
  padding: 15px 16px;
}

input:active,
input:focus,
textarea:active,
textarea:focus {
  border-color: var(--color-accent);
}

textarea {
  height: 146px;
}

input[type="radio"],
input[type="checkbox"] {
  width: 40px;
  height: 40px;
  accent-color: var(--color-accent);
}

input[type="submit"] {
  width: max-content;
}

/* Form <a> */
form a {
  text-decoration: underline;
  color: var(--color-accent);
}

/*  Input Range
------------------------------------------ */
input[type="range"] {
  padding: 0;
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  background: linear-gradient(
    to right,
    var(--color-orange) 0%,
    var(--color-orange) 50%,
    var(--color-orange-light) 50%,
    var(--color-orange-light) 100%
  );
  border-radius: 7px;
  outline: none;
  border: none;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  border-radius: 7px;
  background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px var(--color-white);
  border: 4px solid var(--color-orange);
  height: 24px;
  width: 24px;
  border-radius: 50px;
  background: var(--color-white);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}

input[type="range"]:disabled::-webkit-slider-runnable-track {
  background: var(--color-gray-light);
  cursor: not-allowed;
}

input[type="range"]:disabled::-webkit-slider-thumb {
  border: 4px solid var(--color-gray-light);
  background: var(--color-white);
  cursor: not-allowed;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: var(--color-orange);
  border-radius: 7px;
  border: 0px solid var(--color-white);
}

input[type="range"]::-moz-range-thumb {
  box-shadow: 0px 0px 0px var(--color-white);
  border: 4px solid var(--color-orange);
  height: 24px;
  width: 24px;
  border-radius: 50px;
  background: var(--color-white);
  cursor: pointer;
}

input[type="range"]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type="range"]::-ms-fill-lower {
  background: var(--color-orange);
  border: 0px solid var(--color-white);
  border-radius: 14px;
  box-shadow: 0px 0px 0px #000000;
}

input[type="range"]::-ms-fill-upper {
  background: var(--color-orange);
  border: 0px solid var(--color-white);
  border-radius: 14px;
  box-shadow: 0px 0px 0px #000000;
}

input[type="range"]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px var(--color-white);
  border: 4px solid var(--color-orange);
  height: 16px;
  width: 16px;
  border-radius: 50px;
  background: var(--color-white);
  cursor: pointer;
}

input[type="range"]:focus::-ms-fill-lower {
  background: var(--color-orange);
}

input[type="range"]:focus::-ms-fill-upper {
  background: var(--color-orange);
}

/* Range Value */
.range-value {
  top: -8px;
  right: 0;
  font-size: 20px;
  font-weight: 600;
  position: absolute;
  color: var(--color-orange);
}

.range-value::after {
  content: "%";
}

/*  Input Group
------------------------------------------ */
[class*="input-group__"] {
  display: flex;
  row-gap: 16px;
  column-gap: 16px;
  flex-direction: column;
}

.input-group__50 {
  width: calc(50% - 12px);
}

.input-group__100 {
  width: 100%;
}

/*  Input Field
------------------------------------------ */
.input-field {
  row-gap: 8px;
  display: flex;
  position: relative;
  flex-direction: column;
}

.input-field::before {
  display: block;
  font-weight: 600;
  content: attr(data-title);
}

/*  Contact Form 7
------------------------------------------ */
.wpcf7-list-item {
  margin: 0;
}

/*  Form Contact
------------------------------------------ */
#form-contact textarea {
  height: 240px;
}

.input-group__100 .codedropz-upload-inner {
  display: flex;
  flex-flow: column;
}

.input-group__100 .codedropz-upload-inner h3,
.input-group__100 .codedropz-upload-inner h4 {
  order: 3;
  font-size: 15px;
  font-weight: 400;
  margin-top: 10px;
}

.input-group__100 .codedropz-upload-inner span {
  order: 2;
}

.input-group__100 .codedropz-upload-inner .codedropz-btn-wrap {
  order: 1;
}

.input-group__100 .codedropz-upload-inner .codedropz-btn-wrap a.cd-upload-btn {
  font-size: 20px;
  font-weight: 700;
  text-decoration: underline;
}

.input-group__100 .dnd-upload-status .dnd-upload-details span.has-error{
  color: #dc3232;
}

.input-group__100 .dnd-upload-status .dnd-upload-details .dnd-progress-bar {
  background: #adadad;
  height: 6px;
}

.input-group__100 .dnd-upload-status .dnd-upload-details .dnd-progress-bar span {
  background: var(--color-orange);
  font-size: 0px;
}

.input-group__100 .dnd-upload-status .dnd-upload-details .name em {
  font-weight: 400;
}

.input-group__100 .dnd-upload-status .dnd-upload-details .name span {
  color: var(--color-accent);
  font-weight: 700;
}

.input-group__100 .codedropz-upload-wrapper span.has-error-msg {
  color: #dc3232;
  font-style: normal;
  font-weight: 700;
}

/*  Component: Toggle
----------------------------------------------------------------------------------------- */
/* Accordion Panel */

/*  Component: Contact
----------------------------------------------------------------------------------------- */

/*  Contact List
------------------------------------------ */
.contact-list {
  position: relative;
}

.contact-list.iconed {
  padding: 0 0 0 40px;
}

.contact-list.iconed::before {
  top: 0;
  left: 0;
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  position: absolute;
}

.contact-list.phones::before {
  background: url("https://api.iconify.design/ph/phone-call.svg?color=%236e2dad")
    no-repeat center center / 24px 24px;
}

.contact-list.emails::before {
  background: url("https://api.iconify.design/bytesize/mail.svg?color=%236e2dad")
    no-repeat center center / 24px 24px;
}

/*  Contact Map
------------------------------------------ */
#contact-map {
  width: 100%;
  border: none;
  height: 435px;
  list-style: none;
  border-radius: 24px;
}

/*  Contact Feed
------------------------------------------ */
.contact-feed {
  display: flex;
  row-gap: 16px;
  flex-direction: column;
}

/* Contact Feed Item */
.contact-feed__item {
  row-gap: 8px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  column-gap: 32px;
  border-radius: 8px;
  position: relative;
  align-items: center;
  padding: 16px 16px 16px 72px;
  background: var(--color-white);
}

.contact-feed__item::before {
  top: 0;
  left: 0;
  content: "";
  width: 56px;
  height: 100%;
  display: block;
  position: absolute;
}

.contact-feed__item.phone::before {
  background: url("https://api.iconify.design/ph/phone-call.svg?color=white")
    no-repeat center center / 24px 24px var(--color-accent);
}

.contact-feed__item.email::before {
  background: url("https://api.iconify.design/bytesize/mail.svg?color=white")
    no-repeat center center / 24px 24px var(--color-accent);
}

.contact-feed__item.location::before {
  background: url("https://api.iconify.design/gis/location-arrow-o.svg?color=white")
    no-repeat center center / 24px 24px var(--color-accent);
}

.contact-feed__item.shedule::before {
  background: url("https://api.iconify.design/clarity/calendar-line.svg?color=white")
    no-repeat center center / 24px 24px var(--color-accent);
}

.contact-feed__item.user::before {
  background: url("https://api.iconify.design/ant-design/user-outlined.svg?color=white")
    no-repeat center center / 24px 24px var(--color-accent);
}

/*  Component: Social Media
----------------------------------------------------------------------------------------- */
.social-media {
  display: flex;
  column-gap: 16px;
}

/* Social Link */
.social-link {
  display: flex;
}

/* Social Icon */
.social-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  object-fit: cover;
}

/*  Component: Widget
----------------------------------------------------------------------------------------- */
.widget {
  display: flex;
  row-gap: 16px;
  flex-direction: column;
}

/*  Widget Title
------------------------------------------ */
.widget-title {
  font-size: 18px;
  font-weight: 600;
}

/*  Component: Language Switcher
----------------------------------------------------------------------------------------- */

/* Language Switcher */
.language-switcher {
  display: flex;
  align-items: center;
}

.language-switcher > *:not(:last-child)::after {
  content: "/";
  margin: 0 8px;
  display: block;
  font-weight: 300;
}

/* Language Switcher Language */
.language-switcher .language {
  display: flex;
  transition: ease-in-out 0.15s;
}

.language-switcher .language:hover,
.language-switcher .current-language {
  opacity: 1;
  color: var(--color-accent);
}

.language-switcher .current-language {
  font-weight: 600;
}

/*  Component: Site Branding
----------------------------------------------------------------------------------------- */
.site-branding,
.sidebar-logo {
  display: flex;
  align-items: center;
}

.sidebar-logo {
  margin: 0 !important;
}

/* Site Branding / Site Logo */
.site-branding .site-logo {
  max-height: 48px;
  position: relative;
}

.sidebar-logo .site-logo {
  max-height: 48px;
  position: relative;
  display: none;
}

/*  Component: Buttons
----------------------------------------------------------------------------------------- */
.buttons {
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;
  column-gap: 16px;
  align-items: center;
}

.category-buttons{
  display: flex;
  flex-wrap: nowrap;
  column-gap: 12px;
  align-items: center;
  max-width: 100%;
  width: 100%;
}

/* Buttons Center */
.buttons.center {
  justify-content: center;
}

/*  Button Default
------------------------------------------ */
.buttons [class*="button-"],
.category-buttons [class*="button-"]{
  height: 48px;
  display: flex;
  outline: none;
  cursor: pointer;
  font-weight: 600;
  padding: 0px 32px;
  text-align: center;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: ease-in-out 0.15s;
  border: 1px solid transparent;
  background: var(--color-accent);
  gap: 10px;
}

.category-buttons [class*="button-"]{
  padding: 0px 20px;
}

.buttons [class*="button-"]:hover {
  background: #8240c2;
}

/* Button XL */
.buttons .button-xl {
  height: 56px;
  padding: 0 48px;
}

/*  Button Unstyle
------------------------------------------ */
.buttons [class*="button-"].unstyle {
  background: transparent;
  color: var(--color-accent);
  text-decoration: underline;
}

/*  Button Full Width
------------------------------------------ */
.buttons [class*="button-"].fw {
  width: 100%;
}

/*  Button Bordered
------------------------------------------ */
.buttons [class*="button-"].bordered,
.category-buttons [class*="button-"].bordered {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: transparent !important;
}

.buttons [class*="button-"].bordered.white {
  color: var(--color-white) !important;
  border-color: var(--color-white) !important;
}

.buttons [class*="button-"].bordered:hover,
.category-buttons [class*="button-"].bordered:hover {
  background: #fbf7ff !important;
  border-color: #6e2dad !important;
}

.buttons [class*="button-"].bordered.white:hover {
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

/*  Button Icon
------------------------------------------ */
.buttons .button-icon {
  padding: 8px;
  width: 56px;
  height: 56px;
  font-size: 42px;
}

/*  Button White
------------------------------------------ */
.buttons [class*="button-"].white {
  color: var(--color-accent) !important;
  background: var(--color-white);
}

/*  Button White
------------------------------------------ */
.buttons [class*="button-"].orange {
  background: var(--color-orange);
}

/*  Component: Swiper
----------------------------------------------------------------------------------------- */

/*  Swiper Slide
------------------------------------------ */
.swiper-slide {
  height: auto !important;
}

/*  Swiper Control
------------------------------------------ */
.swiper-control {
  display: flex;
  column-gap: 16px;
  align-items: center;
}

/* Swiper Control Buttons */
.swiper-next,
.swiper-prev {
  width: 56px;
  height: 56px;
  display: flex;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  align-items: center;
  border-radius: 100%;
  justify-content: center;
  color: var(--color-accent);
  background: var(--color-white);
}

@media only screen and (max-width: 576px) {
  .swiper-next,
  .swiper-prev {
    width: 40px;
    height: 40px;
  }
}

/*  Component: Event
----------------------------------------------------------------------------------------- */

/*  Event Box
------------------------------------------ */
.event-box {
  display: flex;
  row-gap: 24px;
  flex-direction: column;
}

.event-box__thumbnail {
  height: 420px;
}

/* Event Box Title */
.event-box__title {
  font-size: 26px;
  font-weight: 700;
}

/*  Component: Headline
----------------------------------------------------------------------------------------- */
.headline {
  display: flex;
  row-gap: 16px;
  flex-direction: column;
}

/* Headline Center */
.headline.center {
  text-align: center;
  align-items: center;
  justify-content: center;
}

/*  Headline Wrapper
------------------------------------------ */
.headline-wrapper {
  display: flex;
  column-gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

/*  Headline Icon
------------------------------------------ */
.headline-icon {
  width: 140px;
  height: 140px;
  min-width: 140px;
  min-height: 140px;
  object-fit: contain;
}

/*  Headline Title
------------------------------------------ */
.headline-title {
  font-weight: 700;
  line-height: normal;
}

/*  Headline Text
------------------------------------------ */
.headline-text {
  color: var(--color-gray-dark);
}

/*  Headline Info
------------------------------------------ */
.headline-info {
  color: var(--color-gray);
}

/*  Component: Modal
----------------------------------------------------------------------------------------- */
.modal {
  display: none;
  border-radius: 24px !important;
}

/* Modal Wrapper */
.modal-wrapper {
  display: flex;
  row-gap: 24px;
  flex-direction: column;
  max-width: 768px !important;
}

/*  Component: Charity
----------------------------------------------------------------------------------------- */

/*  Charity Promo
------------------------------------------ */
.charity-promo {
  row-gap: 48px;
  display: flex;
  position: relative;
  padding: 56px 48px;
  border-radius: 32px;
  flex-direction: column;
  background: var(--color-blue);
}

.charity-promo__meta {
  display: flex;
  row-gap: 24px;
  max-width: 580px;
  flex-direction: column;
}

.charity-promo__image {
  bottom: 0;
  right: 128px;
  height: 340px;
  object-fit: contain;
  width: max-content;
  position: absolute;
}

/*  Charity Card
------------------------------------------ */
.charity-card {
  display: flex;
  row-gap: 64px;
  column-gap: 128px;
  padding: 32px 40px;
  border-radius: 32px;
  align-items: center;
  background: var(--color-white);
}

.charity-card__image {
  height: 180px;
}

/*  Charity Team
------------------------------------------ */

/* Charity Team / Team Announce */
#charity-team .team-announce {
  flex-direction: row-reverse;
}

/* Charity Team / Headline Title */
#charity-team .headline-title {
  color: var(--color-blue);
  font-size: var(--font-size-h2);
}

/* Charity Team / Team Slider */

/*  Responsive
------------------------------------------ */
@media only screen and (max-width: 1180px) {
  /* Charity Card */
  .charity-card {
    align-items: flex-start;
    flex-direction: column-reverse;
  }
  /* Charity Card Image */
  .charity-card__image {
    height: 112px;
  }
  /* .charity-promo */
  .charity-promo {
    padding: 24px 16px 0 16px;
  }
  /* .charity-promo__image */
  .charity-promo__image {
    position: unset;
  }
}

/*  Component: Comments
----------------------------------------------------------------------------------------- */

.comment-list > .comment {
  padding: 32px;
  background: var(--color-gray-light);
  border: 1px solid var(--color-gray-light);
}

.comment-list > .comment:not(:last-child),
.comment-list > .comment ul.children .comment:not(:last-child) {
  margin-bottom: 32px;
}

.comment-list > .comment ul.children {
  margin: 32px 0 0 32px;
}

.comment-body {
  padding: 32px;
  background: var(--color-white);
}

.comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.comment-meta > .comment-author {
  display: flex;
  align-items: center;
}

.comment-meta > .comment-author > .avatar {
  margin-right: 10px;
}

.comment-meta > .comment-metadata {
  font-size: 12px;
}

.comment-content {
  padding: 16px 0;
  margin: 16px 0;
  border-top: 1px solid var(--color-gray-light);
  border-bottom: 1px solid var(--color-gray-light);
}

/*  Component: Post Navigation / Post Pagintaion / Comment Navigation
----------------------------------------------------------------------------------------- */

/* .navigation */
.navigation > .screen-reader-text {
  display: none;
}

/* .navigation > .nav-links */
.nav-links {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.nav-links > [class*="nav-"] {
  max-width: 320px;
}

.nav-links > .nav-next {
  margin-left: auto;
}

.nav-links > .nav-previous {
  margin-right: auto;
}

.nav-links > [class*="nav-"] > a {
  display: flex;
  line-height: 1.5;
  align-items: flex-start;
}

.nav-links > .nav-next > a {
  text-align: right;
}

.nav-links > .nav-previous > a {
  text-align: left;
}

.nav-links > .nav-previous > a::before,
.nav-links > .nav-next > a::after {
  content: "";
  min-width: 24px;
  min-height: 24px;
  display: block;
}

.nav-links > .nav-previous > a::before {
  margin-right: 8px;
  background: url("https://api.iconify.design/carbon:chevron-left.svg")
    no-repeat center center / contain;
}

.nav-links > .nav-next > a::after {
  margin-left: 8px;
  background: url("https://api.iconify.design/carbon:chevron-right.svg")
    no-repeat center center / contain;
}

/* .pagination > .nav-links */
.pagination .nav-links {
  align-items: center;
  justify-content: center;
}

.pagination .nav-links > .page-numbers {
  width: 48px;
  height: 48px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.pagination .nav-links > .page-numbers.current {
  background: var(--color-orange);
  color: var(--color-white);
}

.pagination .nav-links > .page-numbers.prev {
  background: url("https://api.iconify.design/carbon:chevron-left.svg")
    no-repeat center center / contain;
}

.pagination .nav-links > .page-numbers.next {
  background: url("https://api.iconify.design/carbon:chevron-right.svg")
    no-repeat center center / contain;
}

.pagination .nav-links > .page-numbers:not(:last-child) {
  margin-right: 16px;
}

/* --------------------------------------------------------------------------------------
 *
 *
 *
 *
 *
 *
 *
 *  
 *
 *
 *
 *
----------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------------
 *
 *  Component
 *
 *  —— 
 *  —— 
 *
----------------------------------------------------------------------------------------- */

/*  Component: Post
----------------------------------------------------------------------------------------- */

/*  Post Content
------------------------------------------ */
.post-content,
.post-content-header,
.post-content-categories {
  padding: 40px;
  border-radius: 32px;
  background: var(--color-white);
}

.post-content-header,
.post-content-categories {
  margin-bottom: 40px;
}

.post-content-header__title,
.post-content__header,
.post-content-categories__title {
  font-size: var(--font-size-h3);
  color: #6e2dad;
}

.post-content__subheader {
  font-size: var(--font-size-h5);
  color: #6e2dad;
}

.post-content-header__menu {
  list-style: auto;
  padding-left: 20px;
  padding-top: 15px;
}

/* .post-content__header:before {
  display: block;
  content: "";
  height: 55px;
  margin: -55px 0 0;
} */

.post-content__imgblock {
  display: flex;
  justify-content: space-between;
}

.post-content__imgblock img{
  margin-right: 20px;
  margin-left: 0;
  max-width: 35%;
  object-fit: cover;
}

.post-content__imgblock.flex-row-reverse {
  flex-flow: row-reverse;
}

.post-content__imgblock.flex-row-reverse img{
  margin-right: 0;
  margin-left: 20px;
  max-width: 35%;
}

.post-content__imgblock p{
  margin-bottom: 12px;
}

.post-content__imgblock p:last-child {
  margin-bottom: 0;
}

/* Post Lead */
.post-lead {
  display: flex;
  row-gap: 24px;
  column-gap: 40px;
  align-items: center;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-gray-light);
}

/*  Post Box
------------------------------------------ */
.post-box {
  height: 100%;
  display: flex;
  row-gap: 16px;
  overflow: hidden;
  border-radius: 16px;
  padding: 0 0 24px 0;
  flex-direction: column;
  background: var(--color-white);
}

.post-box > *:not(:first-child) {
  padding: 0 24px;
}

.post-box > *:last-child {
  margin-top: auto;
}

/* Post Box Thumbnail */
.post-box__thumbnail {
  height: 268px;
}

.post-box__thumbnail > img {
  object-fit: cover;
}

/* Post Box Meta */
.post-box__meta {
  padding: 16px 24px 24px 24px;
}

/* Post Box Title */
.post-box__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-orange);
}

.post-box__title.accent {
  color: var(--color-accent);
}

.post-box__title span {
  text-transform: lowercase;
}

.post-box__categories,
.post-content-categories__wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 10px;
}

.post-box__categories {
  padding: 0 24px;
}

.post-box__category,
.post-content-categories__category {
  display: flex;
  outline: none;
  cursor: pointer;
  font-size: 14px;
  padding: 3px 15px;
  text-align: center;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: ease-in-out 0.15s;
  border: 1px solid transparent;
  background: var(--color-accent);
}

.post-box__category:hover {
  background: #8240c2;
}

.post-content-categories__category {
  background: var(--color-orange);;
}

.post-content-categories__category:hover {
  background: #8240c2;
}

/*  Service Box
------------------------------------------ */

.text-block >*:not(:first-child) {
  margin-top: 40px;
}

.card-box .text-block__left,
.card-box .text-block__right {
  max-width: 750px;
}

.card-box .text-block__left {
  margin-left: auto;
}

.card-box .text-block__left h3,
.card-box .text-block__right h3 {
  color: var(--color-accent);
}

/* Rating Section
------------------------------------------- */

.rating-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rating-wrap__star {
  margin-left: 30px;
}

.rating-wrap__record {
  font-weight: 500;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: -2px;
}

/* --------------------------------------------------------------------------------------
 *
 *  Responsive
 *
 *  —— 
 *  —— 
 *
----------------------------------------------------------------------------------------- */

@media only screen and (max-width: 1180px) {
  /*  Site Header
  ------------------------------------------ */

  /* Headbar Navigation */
  .headbar-navigation {
    display: none;
  }
  /* Menu Toggle */
  .menu-toggle {
    display: block;
  }
  /*  Post Content
  ------------------------------------------ */
  /* post Lead */
  .post-lead {
    flex-wrap: wrap;
  }

  /* Card Announce
  ------------------------------------------ */
  .card-announce {
    display: flex;
    row-gap: 24px;
    flex-direction: column;
    padding: 24px 24px 24px 24px;
  }
  .card-announce > * {
    width: 100%;
  }

  .category-buttons {
    overflow-x: scroll;
  }

}

@media only screen and (max-width: 992px) {

  .post-content__imgblock {
    flex-flow: column !important;
    align-items: center;
  }

  .post-content__imgblock img,
  .post-content__imgblock.flex-row-reverse img {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 15px;
    max-width: 65%;
  }
}

@media only screen and (max-width: 768px) {

  /* Section Hero
  ------------------------------------------ */
  
  /* Headbar Buttons */
  #headbar-buttons {
    display: none;
  }
  /* Headbar Panel */
  .headbar .language-switcher {
    display: none;
  }
  /* Social Icon */
  .social-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }


  .text-block>*:not(:first-child) {
    margin-top: 16px;
  }

  .rating-wrap {
    flex-flow: column;
  }

  .rating-wrap__star {
    margin-left: 0;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .rating-wrap__record {
    font-size: 16px;
    margin-bottom: 0;
  }

  .post-content .rating-wrap__star {
    margin-left: 0;
  }

  .post-content .rating-wrap__star .kk-star-ratings {
    flex-wrap: wrap;
    justify-content: center;
  }

  .headbar-content .phones .phone-btn {
    height: 32px;
    width: 32px;
  }

  .headbar-content .phones .phone-btn img {
    height: 16px;
    width: 16px;
  }

  .headbar-content .phones .phone-block {
    left: -90px;
  }

  .headbar-content .phones .phone-block::before {
    left: 107px;
  }
}

@media only screen and (max-width: 576px) {
  /*  Root
  ------------------------------------------ */
  :root {
    /* Site Header: Sidebar */
    --sidebar-width: 100%;

    /* Font Size */
    --font-size-h1: 28px;
    --font-size-h2: 26px;
    --font-size-h3: 22px;
    --font-size-h4: 20px;
    --font-size-h5: 18px;
    --font-size-h6: 16px;

    /* Section */
    --section-padding: 32px;
  }
  /* Body */
  body {
    font-size: 14px;
  }
  /*  Section Hero
  ------------------------------------------ */
  section#hero-home {
    padding: 32px 0;
    min-height: unset;
  }
  /*  Rating Box
  ------------------------------------------ */
  .rating-box {
    padding: 24px;
    row-gap: 32px;
  }
  /*  Service Card
  ------------------------------------------ */
  .service-card {
    row-gap: 24px;
  }
  /*  Input Group
  ------------------------------------------ */
  [class*="input-group__"] {
    width: 100% !important;
  }
  /*  Card Box
  ------------------------------------------ */
  .card-box {
    padding: 24px;
  }
  .card-box.center {
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
  }

  /*  Fancybox
  ------------------------------------------ */
  .fancybox-content {
    padding: 16px !important;
  }
  /*  Accordion
  ------------------------------------------ */
  .accordion-button::after {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .post-content__imgblock img,
  .post-content__imgblock.flex-row-reverse img {
    max-width: 100%;
  }

  .sidebar-logo .site-logo {
    display: block;
  }

}

/* --------------------------------------------- 
Page cooperation
------------------------------------------------*/

.card-box-cooperation {
  display: flex;
  align-items: center;
  column-gap: 90px;
  height: 100%;
  row-gap: 16px;
  padding: 32px;
  border-radius: 24px;
  background: var(--color-white);
}

.card-box-cooperation__title {
  font-size: 38px;
  font-weight: 700;
  color: #FF9C61;
  max-width: 70%;
}

.card-staged-interview {
  height: 100%;
  row-gap: 16px;
  padding: 32px;
  border-radius: 24px;
  background: var(--color-white);
}

.card-interview-item {
  display: flex;
  align-items: center;
  column-gap: 15px;
  margin-bottom: 15px;
  max-width: 98%;
  min-height: 60px;
}

.card-interview-item__number {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FF9C61;
  border-radius: 50%;
  color: #FFFFFF;
  font-weight: 700;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.card-interview-item__title {
  font-weight: 400;
  font-size: 21px;
  line-height: 30px;
}

@media only screen and (max-width: 1256.98px) {
  .card-interview-item {
    min-height: 90px;
  }
}

@media only screen and (max-width: 1180px) {
  .card-box-cooperation {
    flex-direction: column;
    row-gap: 24px;
  }

  .card-box-cooperation__title {
    max-width: 100%;
  }
}

@media only screen and (max-width: 991.98px) {
  .card-interview-item {
    min-height: 60px;
  }
}

@media only screen and (max-width: 576px) {

  .card-box-cooperation__title {
    font-size: 22px;
  }

  .card-interview-item__title {
    font-size: 16px;
    line-height: 1.4;
  }

  .card-box__title span {
    font-size: 18px;
  }
}

/* --------------------------------------------- 
Notice
------------------------------------------------*/

.header-notice {
  display: none;
  position: relative;
  background: var(--color-orange);
  text-align: center;
}

.header-notice__text {
  display: inline-block;
  color: var(--color-white);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}

.header-notice__link {
  display: inline-block;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--color-white);
  border-bottom: 1px solid var(--color-white);
  margin-left: 24px;
}

.header-notice__close {
  position: absolute;
  z-index: 1001;
  right: 18px;
  top: 14px;
}

@media only screen and (max-width: 992px) {
  .header-notice__link {
    margin-left: 0;
  }

  .header-notice__text {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 16px;
  }

  .header-notice__close {
    right: 12px;
    top: 12px;
  }
}

/* --------------------------------------------- 
Promo card
------------------------------------------------*/

.promo-card {
  display: block;
  height: 346px;
  background: #ccc;
  width: 100%;
  border-radius: 16px;
}

.promo-card__img {
  border-radius: 16px;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

@media only screen and (max-width: 992px) {
  #promo-slider {
    margin: 0 28px;
  }

  .promo-card {
    height: 250px;
  }
}

@media only screen and (max-width: 756px) {
  .promo-card {
    height: 320px;
  }
}

@media only screen and (max-width: 620px) {
  .promo-card {
    height: 250px;
  }
}

@media only screen and (max-width: 470px) {
  .promo-card {
    height: 380px;
  }
}

/*  Report Content
------------------------------------------ */
.report-content-block {
  align-items: center;
  margin-bottom: 40px;
}

.report-content-block.wrapper {
  padding: 32px 40px;
  border-radius: 32px;
  background: var(--color-white);
}

.report-content-block {
  align-items: center;
  margin-bottom: 40px;
}

.report-content-block img{
  border-radius: 20px;
}

.report-content-block h2,
.report-content-block p {
  margin-bottom: 15px;
}

.report-content-block p:last-child {
  margin-bottom: 0;
}

.p-0 {
  padding: 0;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.report-content-review {
  margin-bottom: 40px;
}

.report-content-review.wrapper {
  padding: 40px;
  background: var(--color-white);
}

/* Review Slider */
.report-content-review__image {
  width: 100%;
  height: 346px;
  object-fit: cover;
  border-radius: 24px;
}

.report-content-review h2,
.report-content-review p {
  margin-bottom: 15px;
}

@media only screen and (max-width: 992px) {
  .report-content .wrapper {
    padding: 24px;
    border-radius: 20px;
  }

  .report-content-block img {
    margin-bottom: 15px;
    width: 100%;
    border-radius: 30px;
  }
}

@media only screen and (max-width: 576px) {
  .report-content-review__image {
    height: 410px;
  }

  .report-content-review .swiper-control{
    
  }
}



/*  Chat Button
------------------------------------------ */

.zulu-contact-block {
  
}

.zulu-contact-button {
  position: fixed;
  z-index: 999;
  bottom: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--color-beige);
  cursor: pointer;
}

.zulu-contact-content {
  position: fixed;
  max-width: 320px;
  width: 100%;
  z-index: 999;
  bottom: 100px;
  right: 30px;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid var(--color-gray-light);
  background: var(--color-white);
  display: none;
  transition: opacity 1s ease;
}

.active-icon {
  display: none;
}

.zulu-contact-content.active {
  display: block;
}

.zulu-contact-content__title {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 5px;
}

.zulu-contact-content__text {
  font-size: 16px;
  line-height: 20px;
}

.zulu-contact-content__separator {
  border-bottom: 1px solid var(--color-gray-light);
  margin-top: 16px;
  margin-bottom: 16px;
}

.zulu-contact-content__socials {
  margin-top: 16px;
}

.zulu-contact-content__socials,
.zulu-contact-content__phone {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.zulu-contact-content .socials,
.contact-phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zulu-contact-content .socials .socials__wrap,
.contact-phone__wrap {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.socials__icon {
  width: 32px;
  height: 32px;
  background: var(--color-gray-light);
  border-radius: 50%;
}

.socials__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.contact-phone__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-accent);
  border-radius: 50%;
}

.contact-phone__icon img {
  width: 15px;
  height: 15px;
  filter: brightness(0) invert(1);
}

.zulu-contact-content .socials .socials__text,
.contact-phone__text {
  font-weight: 600;
  font-size: 16px;
}

.zulu-contact-content .socials .socials__btn,
.contact-phone__btn {
  line-height: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/*  Taxonomy subjects
------------------------------------------ */

.section-subjects .subjects {
  display: grid;
  column-gap: 16px;
  row-gap: 24px;
}

.section-subjects .grid-cols-1 {
  grid-template-columns: 1fr;
}

.section-subjects .grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.section-subjects .grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.section-subjects .grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.section-subjects .grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.section-subjects .subject-block,
.section-subjects-mobile .subject-block{
  background: #fff;
  border-radius: 20px;
  padding: 20px 24px;
}

.section-subjects .subject-block__title,
.section-subjects-mobile .subject-block__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.section-subjects .subject-item,
.section-subjects-mobile .subject-item {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
}

.section-subjects .subject-item:hover,
.section-subjects-mobile .subject-item:hover {
  text-decoration: underline;
}

.section-subjects .subject-item:last-child,
.section-subjects-mobile .subject-item:last-child {
  margin-bottom: 0;
}

.section-subjects-mobile {
  display: none;
}

.section-subjects-mobile .swiper-next,
.section-subjects-mobile .swiper-prev {
  color: var(--color-accent);
  background: var(--color-white);
  border: 1px solid var(--color-accent);
}

.section-subjects-mobile .swiper-next:hover,
.section-subjects-mobile .swiper-prev:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

@media only screen and (max-width: 992px) {
  .section-subjects {
    display: none;
  }

  .section-subjects-mobile {
    display: block;
  }
}

@media only screen and (max-width: 576px) {
  .section-subjects-mobile .buttons .button-xl {
    width: 100%;
  }
}

.section-page-subjects .subjects {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 12px;
  background: #fff;
  border-radius: 20px;
  padding: 20px 32px;
}

.section-page-subjects .subjects .subject-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-page-subjects .subjects .subject-item {
  display: block;
}

@media only screen and (max-width: 768px) {
  .section-page-subjects .subjects {
    grid-template-columns: 1fr;
    padding: 20px 24px;
  }
}

/*--------------------------------------------------------------------------
Section Reviews New
---------------------------------------------------------------------------*/
.section-reviews .headline {
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.section-reviews .headline .headline-text {
  text-align: center;
  max-width: 600px;
}

.section-reviews .headline-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-reviews .headline-info svg {
  margin: 0;
}

.section-reviews .buttons {
  margin-top: 30px;
}

.section-reviews #review-slider-new {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
}

.section-reviews .swiper-slide {
  margin-bottom: 0;
  opacity: 0.4;
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: flex;
  justify-content: center;
}

.section-reviews .swiper-slide-active {
  opacity: 1;
}

.section-reviews .swiper-slide .review-slider-new__image {
  width: auto;
  height: 440px; 
  border-radius: 0;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  object-fit: fill;
  filter: blur(1px);
}

.section-reviews .swiper-slide-active .review-slider-new__image {
  height: 477px;
  filter: blur(0);
}

/* Додаємо контейнер для вирівнювання слайдів по низу */
.section-reviews .swiper-wrapper {
  display: flex;
  align-items: flex-end; /* Вирівнювання слайдів по нижньому краю */
}

.card-box-reviews {
  display: flex;
  flex-flow: column;
  align-items: start;
  row-gap: 0;
  justify-content: center;
}

#form-review .buttons p{
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 991px) {
  .section-reviews .headline {
    justify-content: start;
    margin-bottom: 10px;
    row-gap: 10px;
  }
  
  .section-reviews .headline .headline-text {
    text-align: left;
  }
}

/*  Section: First screen
----------------------------------------------------------------------------------------- */
section.home-first-screen {
  position: relative;
  display: flex;
  padding: 0;
  align-items: center;
  min-height: calc(var(--vh, 1vh) * 100 - var(--site-header-height));
}

.home-first-screen .home-first-screen__container {
  display: flex;
  flex-flow: column;
  gap: 50px;
  padding: 310px 12px 100px 12px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.home-first-screen .home-first-screen__wrapper {
  display: flex;
  flex-flow: column;
  gap: 10px;
}

.home-first-screen .home-first-screen__wrap {
  display: flex;
  gap: 20px;
}

.home-first-screen .home-first-screen__title {
  font-size: 19px;
  color: var(--color-black);
}

.home-first-screen .home-first-screen__text {
  font-size: 19px;
  color: var(--color-gray);
}

.home-first-screen .discont,
.home-first-screen .promo {
  background: linear-gradient(90deg, rgba(252,209,81,1) 0%, rgba(201,73,237,1) 100%);
  border-radius: 20px;
  padding: 10px 20px;
}

.home-first-screen .discont {
  display: flex;
  align-items: center;
  gap: 15px;
}

.home-first-screen .discont .discont__procent,
.home-first-screen .discont .discont__text {
  color: var(--color-white);
  font-weight: 700;
}

.home-first-screen .discont .discont__procent {
  font-size: 80px;
  line-height: 50px;
}

.home-first-screen .discont .discont__symbol {
  font-size: 40px;
}

.home-first-screen .discont .discont__text {
  font-size: 36px;
  line-height: 1;
}

.home-first-screen .promo {
  display: flex;
  flex-flow: column;
  gap: 5px;
}

.home-first-screen .promo .promo__title,
.home-first-screen .promo .promo__text {
  color: var(--color-white);
}

.home-first-screen .promo .promo__title {
  font-size: 20px;
  line-height: 1;
}

.home-first-screen .promo .promo__text {
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
}

.home-first-screen .home-first-screen-mobile__container {
  display: none;
  margin: 0 -12px;
}

.home-first-screen .home-first-screen-mobile__wrapper {
  display: flex;
  flex-flow: column;
  gap: 5px;
  padding: 0 28px 15px 28px;
}

.home-first-screen .home-first-screen-mobile__text {
  font-size: 13px;
  color: var(--color-gray);
}

.home-first-screen .discont-mobile{
  background: linear-gradient(90deg, rgba(252,209,81,1) 0%, rgba(201,73,237,1) 100%);
  border-radius: 10px;
  padding: 15px 20px;
}

.home-first-screen .discont-mobile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-first-screen .discont-mobile .discont-mobile__procent,
.home-first-screen .discont-mobile .discont-mobile__text {
  color: var(--color-white);
}

.home-first-screen .discont-mobile .discont-mobile__procent {
  font-size: 75px;
  line-height: 50px;
  font-weight: 700;
}

.home-first-screen .discont-mobile .discont-mobile__symbol {
  font-size: 37px;
  font-weight: 700;
}

.home-first-screen .discont-mobile .discont-mobile__text {
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
}

.home-first-screen .discont-mobile .discont-mobile__promo {
  display: inline-block;
  font-size: 19px;
  font-weight: 700;
  margin-top: 5px;
}

.home-first-screen .home-first-screen-mobile__bg {
  padding: 52vh 28px 30px;
  background-size: cover;
  background-position: top center;
}

.home-first-screen .home-first-screen-mobile__bg .button-xl {
  width: 100%;
}

@media only screen and (max-width: 1200px) {
  .home-first-screen .home-first-screen__container {
    padding: 23% 12px 9% 12px;
    gap: 25px;
  }

  .home-first-screen .home-first-screen__wrapper {
    gap: 5px;
  }

  .home-first-screen .home-first-screen__wrap {
    gap: 15px;
  }

  .home-first-screen .home-first-screen__title,
  .home-first-screen .home-first-screen__text {
    font-size: clamp(11px, 1.5vw, 20px);
  }

  .home-first-screen .discont, 
  .home-first-screen .promo {
    border-radius: 10px;
    padding: 8px 12px;
  }

  .home-first-screen .discont {
    gap: 7px;
  }

  .home-first-screen .discont .discont__procent {
    font-size: clamp(36px, 5.5vw, 80px);
    /* line-height: 50px; */
  }

  .home-first-screen .discont .discont__symbol {
    font-size: clamp(20px, 3.5vw, 40px);
  }

  .home-first-screen .discont .discont__text {
    font-size: clamp(16px, 2.8vw, 36px);
  }

  .home-first-screen .promo .promo__title {
    font-size: clamp(14px, 2vw, 20px);
  }
  
  .home-first-screen .promo .promo__text {
    font-size: clamp(16px, 2.8vw, 27px);
  }
}

@media only screen and (max-width: 768px) {
  section.home-first-screen {
    min-height: auto;
  }
  
  .home-first-screen .home-first-screen__container {
    display: none;
  }

  .home-first-screen .home-first-screen-mobile__container {
    display: block;
  }
}

@media only screen and (max-width: 422px) {
  .home-first-screen .discont-mobile .discont-mobile__procent {
    font-size: 60px;
  }

  .home-first-screen .discont-mobile .discont-mobile__symbol {
    font-size: 30px;
  }

  .home-first-screen .discont-mobile .discont-mobile__text {
    font-size: 14px;
  }

  .home-first-screen .discont-mobile .discont-mobile__promo {
    font-size: 16px;
  }

  .home-first-screen .home-first-screen-mobile__text {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------
Example Completed Work
---------------------------------------------------------- */
.example-work-card {
  height: 100%;
  row-gap: 15px;
  display: flex;
  padding: 32px;
  border-radius: 24px;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-white);
}

.example-work-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--color-gray-light);
  padding-bottom: 15px;
  height: 51px;
}

.example-work-card__body {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  margin-top: 20px;
}

.example-work-card__footer {
  padding-top: 15px;
  border-top: 1px solid var(--color-gray-light);
}

.example-work-card__icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.example-work-card__title {
  font-weight: 700;
  color: var(--color-black);
  font-size: var(--font-size-h6);
}

.example-work-card__key {
  font-size: 14px;
  color: #575555;
}

.example-work-card__value {
  font-weight: 700;
  font-size: 16px;
}

.example-work-card__description {
  margin-bottom: 15px;
  font-size: 14px;
}

.modal-example-work-card__file {
  width: 600px;
  height: 85vh;
}

.modal-example-work-card__file .pdfp_iframe {
  width: 100%;
  height: 85vh;
}

.example-work-card__container {
  position: relative;
  max-height: 80px;
  overflow: hidden;
  transition: max-height 0.4s ease;
  cursor: pointer;
  margin-bottom: 10px;
  background: #fff;
}

.example-work-card__container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  transition: opacity 0.3s;
  pointer-events: none;
}

.example-work-card__container.expanded {
  max-height: 1000px; /* або auto, якщо з JS */
}

.example-work-card__container.expanded::after {
  opacity: 0;
}

@media only screen and (max-width: 660px) {
  .modal-example-work-card__file {
    width: 85vw;
  }
}

@media only screen and (max-width: 568px) {
  .modal-example-work-card__file {
    padding-top: 25px;
  }

  .modal-example-work-card__file .pdfp_iframe {
    width: 100%;
    height: 80vh;
  }
}

@media only screen and (max-width: 400px) {
  .modal-example-work-card__file {
    width: 90vw;
  }
}

/*  Known Clients
------------------------------------------ */
.known-clients {
  display: flex;
  padding: 32px;
  row-gap: 24px;
  column-gap: 48px;
  align-items: center;
  background: var(--color-white);
  border-radius: 16px;
  padding: 56px 32px;
}

/*  Team Slider (Update)
------------------------------------------ */

.known-clients-slider {
  display: grid;
  grid-template-columns: 300px 1fr;
  column-gap: 48px;
  padding-left: 5px;
  padding-right: 5px;
}

/* Team Slider Image */
.known-clients-slider__image {
  width: 300px;
  height: 330px;
  object-fit: cover;
  border-radius: 16px;
}

.known-clients-slider__header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

.known-clients-slider__title {
  margin-bottom: 0;
}

.known-clients-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.known-clients-social__item {
  display: block;
  height: 24px;
  width: 24px;
}

.known-clients-slider__about {
  font-size: 14px;
  text-align: justify;
}

.known-clients-slider__line {
  border: 1px solid #e9e9e9;
  margin-top: 24px;
  margin-bottom: 24px;
}

.known-clients-slider__review {
  font-size: 16px;
}

/*  Swiper Control
------------------------------------------ */
.known-clients-control .swiper-control {
  display: flex;
  column-gap: 16px;
  align-items: center;
}

/* Swiper Control Buttons */
.known-clients-control .swiper-next,
.known-clients-control .swiper-prev {
  width: 56px;
  height: 56px;
  display: flex;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  align-items: center;
  border-radius: 100%;
  justify-content: center;
  color: var(--color-accent);
  background: var(--color-white);
  border: 1px solid var(--color-accent);
}

.known-clients-control .swiper-next:hover,
.known-clients-control .swiper-prev:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

@media only screen and (max-width: 576px) {
  .known-clients-control .swiper-next,
  .known-clients-control .swiper-prev {
    width: 40px;
    height: 40px;
  }

  .known-clients-control .swiper-control {
    column-gap: 8px;
  }
}

/*  Team Responsive
------------------------------------------ */
@media only screen and (max-width: 768px) {

  .known-clients {
    padding: 30px;
  }

  #known-clients-section .headline-title {
    text-align: left;
  }

	.known-clients-slider__image {
		margin: 0 auto 24px;
	}

	.known-clients-slider {
		grid-template-columns: repeat(1, 1fr);
	}

  .known-clients-slider__review {
    font-size: 14px;
  }
}

@media only screen and (max-width: 576px) {
  /* Tem Slider */
  #known-clients-slider {
    width: 100%;
  }
  /* Team Announce */
  .known-clients {
    flex-wrap: wrap;
  }
}

.blog-shortcode {
  border: 1px solid #6E2DAD;
  padding: 20px 40px;
  border-radius: 30px;
  margin: 40px 0 !important;
  color: #6E2DAD;
}

.blog-shortcode__title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}

.blog-shortcode__text {
  font-size: 16px;
  color: #353333;
}

@media only screen and (max-width: 768px) {
  .blog-shortcode__title {
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 5px;
  }
  
  .blog-shortcode__text {
    font-size: 12px;
  }
}

/* Trade mark
------------------------------------------ */
.trade-mark {
  display: flex;
  padding: 40px;
  row-gap: 24px;
  column-gap: 45px;
  border-radius: 20px;
  align-items: center;
  background: var(--color-white);
}

.trade-mark__image {
  max-width: 276px;
  flex: none;
}

.trade-mark .headline-title {
  font-size: 38px;
}

/*  Trade mark
------------------------------------------ */

@media only screen and (max-width: 768px) {
  .trade-mark {
    flex-flow: column;
    padding: 25px;
  }

  .trade-mark__image {
    max-width: 340px;
  }

  .trade-mark .headline-title {
    font-size: 22px;
  }
}

@media only screen and (max-width: 400px) {
  .trade-mark__image {
    max-width: 100%;
  }
}

/* About-us-team
------------------------------------------ */
.about-us-team {
  display: flex;
  column-gap: 40px;
  align-items: center;
  padding-top: 20px;
}

/* Swiper Control Buttons */
.about-us-team-control .swiper-next,
.about-us-team-control .swiper-prev {
  width: 56px;
  height: 56px;
  display: flex;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  align-items: center;
  border-radius: 100%;
  justify-content: center;
  color: var(--color-accent);
  background: var(--color-white);
  border: 1px solid var(--color-accent);
}

.about-us-team-control .swiper-next:hover,
.about-us-team-control .swiper-prev:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

@media only screen and (max-width: 576px) {
  .about-us-team-control .swiper-next,
  .about-us-team-control .swiper-prev {
    width: 40px;
    height: 40px;
  }
  .about-us-team {
    display: block;
    position: relative;
    margin-right: -25px !important;
    margin-left: -5px !important;
  }

  .review-slider__image {
    height: 275px;
  }

  .about-us-team-control .swiper-prev {
    position: absolute;
    z-index: 2;
    top: 45%;
    left: -20px;
  }

  .about-us-team-control .swiper-next {
    position: absolute;
    z-index: 2;
    top: 45%;
    right: 20px;
  }
}

@media only screen and (max-width: 400px) {
  .review-slider__image {
    height: 250px;
  }
}

/*---------------------------------------------------------
Advantages
----------------------------------------------------------*/

.card-advantages {
  background: var(--color-white);
  padding: 40px;
  border-radius: 20px;
}

.card-advantages__header {
  margin-bottom: 30px;
}

.card-advantages__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-gray-light);
}

.card-advantages__title {
  font-weight: 700;
  font-size: 24px;
}

.card-advantages__info {
  font-size: 20px;
}

@media only screen and (max-width: 991px) {
  .card-advantages__header {
    margin-bottom: 10px;
  }

  .card-advantages__title {
    font-size: 18px;
  }

  .card-advantages__info {
    font-size: 14px;
  }
}

@media only screen and (max-width: 576px) {
  .card-advantages__wrap {
    flex-flow: column;
    align-items: start;
  }

  .card-advantages__wrap:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .card-advantages__info {
    margin-top: 5px;
  }

}