@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-style: normal;
}

body.no-scroll {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* img */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, select, textarea {
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

span, a {
  margin: 0;
}

ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* a */
.link {
  text-decoration: none;
  color: inherit;
}

:root {
  /* The main colors of the site */
  --main-accent-color: #165bfb;
  --secondary-accent-color: #0c0c0c;
  --main-text-color: #464c5c;
  --main-bg-color: #ffffff;
  --secondary-bg-color: #f9fbff;
  --white-button-hover: #e8edfd;
  --blue-button-hover: #2446bd;
  --hero-content-text: #bfd2ff;
  --pagination-black-color: #000000;
  --collar-image-color: #c7c7c7;
  --card-preview-bg: rgba(0, 0, 0, 0.3);
  --related-template-hover: #003bbf;
  /* Additional header colors */
  --blue-header-hover: #1348c2;
  --navigation-color-item: #2a6afd;
  --navigation-hover-dropdown: rgba(62, 120, 255, 0.1);
  --nav-description-color: #646e82;
  --list-dropdown-color: #666666;
  --language-toggle-color: #474c5b;
  --language-menu-color: #505665;
  --language-menu-hover: rgba(0, 0, 0, 0.05);
  /* Specific sidebar colors */
  --border-container-sidebar: #dfe2e8;
  --border-sidebar: 1px solid #edf0f5;
  --categories-sidebar-hover: #eff4ff;
  --sidebar-active-hover: #e0e7ff;
  --sidebar-search-color: #9199ab;
  /* Box shadow */
  --main-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  --header-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --call-action-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  --card-preview-box-shadow: 0 2px 10px 0 rgba(33, 39, 54, 0.16);
  --related-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  /* Text font-weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  /* Transition animation */
  --transition-time-cubic: 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
  --transition-time-header: 0.3s ease;
  --transition-navigation-hover: 0.2s ease-out;
  --transition-card-preview: 0.3s ease-out;
}

/* Mobile menu buttons */
.mobile-menu .header-buttons {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 20px;
  width: 100%;
}

.mobile-menu .header-buttons button {
  box-sizing: border-box;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  flex-grow: 1;
  transition: background-color var(--transition-time-cubic), color var(--transition-time-cubic), border-color var(--transition-time-cubic);
  width: calc(50% - 6px);
}

.mobile-btn-hero_visible {
  display: block;
  margin-bottom: 40px;
}

@media (max-width: 480px) {
  .mobile-menu .header-buttons {
    flex-direction: row;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
  }
  .mobile-menu .header-buttons button {
    width: calc(50% - 6px);
    padding: 12px 16px;
    font-size: 14px;
  }
  .mobile-btn-hero_visible {
    display: none;
  }
}
@media (max-width: 768px) {
  .mobile-menu .header-buttons button {
    padding: 10px 12px;
    font-size: 12px;
  }
}
.mobile-menu .header-buttons .login-button {
  background: var(--main-bg-color);
  border: 2px solid var(--main-accent-color);
  color: var(--main-accent-color);
}

.mobile-menu .header-buttons .login-button:hover {
  background: var(--main-accent-color);
  color: var(--main-bg-color);
}

.mobile-menu .header-buttons .start-button {
  background: var(--main-accent-color);
  color: var(--main-bg-color);
  border: transparent;
}

.mobile-menu .header-buttons .start-button:hover {
  background: var(--blue-button-hover);
}

.button-main_template,
.button-demo_template {
  padding: 12px 22px;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  flex-grow: 1;
  transition: background-color var(--transition-time-cubic), color var(--transition-time-cubic), border-color var(--transition-time-cubic);
}

.mobile-btn {
  padding: 12px 16px;
  font-size: 14px;
  width: 50%;
}

.button-main_template {
  background: var(--main-accent-color);
  border: transparent;
  color: var(--main-bg-color);
  box-sizing: border-box;
  border-radius: 8px;
}
.button-main_template:hover {
  background: var(--blue-button-hover);
}

.button-demo_template {
  background: var(--main-bg-color);
  border: 2px solid var(--main-accent-color);
  color: var(--main-accent-color);
  box-sizing: border-box;
  border-radius: 8px;
}
.button-demo_template:hover {
  background: var(--white-button-hover);
}

.button-demo_hero-templates {
  background: var(--main-bg-color);
  border: 2px solid var(--main-accent-color);
  color: var(--main-accent-color);
  box-sizing: border-box;
  border-radius: 8px;
  display: inline-flex;
}
.button-demo_hero-templates:hover {
  background: var(--white-button-hover);
}

.live-demo {
  padding: 12px 109px;
}

.btn-container_template {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 20px;
}

@media (min-width: 1440px) {
  .btn-container_template {
    flex-direction: row;
  }
  .button-main_template,
  .button-demo_template {
    flex-basis: calc(50% - 7.5px);
    width: auto;
  }
}
@media (min-width: 610px) and (max-width: 1355px) {
  .btn-column {
    display: flex;
    gap: 15px;
    flex-direction: column;
  }
}
.button-main {
  background: var(--main-accent-color);
  border: transparent;
  color: var(--main-bg-color);
}
.button-main:hover {
  background: var(--blue-button-hover);
}

.button-demo {
  background: var(--main-bg-color);
  border: 2px solid var(--main-accent-color);
  color: var(--main-accent-color);
}
.button-demo:hover {
  background: var(--white-button-hover);
}

.btn-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

@media (min-width: 480px) {
  .btn-container {
    gap: 24px;
  }
}
.btn-container-column {
  flex-direction: column;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--main-accent-color);
  color: var(--main-bg-color);
  border-radius: 5px;
  transition: background-color var(--transition-time-header);
}

.btn:hover {
  background-color: var(--blue-button-hover);
}

.header-buttons {
  display: flex;
  gap: 16px;
}

.hero-btn-text {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  margin-top: 3px;
}

.header-buttons button {
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  flex-grow: 1;
  transition: background-color var(--transition-time-header), color var(--transition-time-header), border-color var(--transition-time-header);
}

@media (min-width: 768px) and (max-width: 835px) {
  .header-buttons button {
    padding: 9px;
  }
}
.header-buttons .login-button {
  padding: 8px 16px;
  background: var(--main-bg-color);
  color: var(--main-accent-color);
  margin-right: -1px;
}

.header-login-button {
  padding: 8px 16px;
  background: var(--main-bg-color);
  color: var(--main-accent-color);
  margin-top: 8px;
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  border: transparent;
}
.header-login-button:hover {
  text-decoration: underline;
  text-decoration-color: #333333;
}

.header-buttons .login-button:hover {
  background: var(--main-accent-color);
  color: var(--main-bg-color);
}

.header-buttons .start-button {
  padding: 8px 16px;
  background: var(--main-accent-color);
  color: var(--main-bg-color);
  border: 2px solid var(--main-accent-color);
  margin-right: -5px;
}

.header-buttons .start-button:hover {
  background: var(--blue-header-hover);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fdfdfd;
  color: var(--main-accent-color);
  text-align: center;
  z-index: 1100;
  box-shadow: var(--header-box-shadow);
}

.header-container {
  margin: 0 auto;
  padding: 16px 24px;
}

.weblium-logo {
  margin-top: 7px;
  margin-bottom: 4px;
  margin-right: 7px;
  margin-left: -6px;
  max-height: 23px;
  max-width: 156.8px;
}

.mobile-navigation {
  display: block;
}

.desktop-navigation {
  display: none;
}

@media (min-width: 992px) {
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .navigation-list {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0px 20px;
    margin-left: 6px;
    cursor: pointer;
  }
  .header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
  }
}
.header-left {
  display: flex;
  justify-content: space-between;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 5px;
}

.burger-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
}
@media (max-width: 991.8px) {
  .burger-menu-toggle {
    display: block;
  }
}

.navigation-list {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
}
.navigation-list > li {
  position: relative;
  padding: 32px 0;
}
.navigation-list > li > span,
.navigation-list > li > a {
  display: block;
  text-align: left;
  font-weight: var(--font-weight-medium);
  color: #464c5c;
  font-size: 16px;
  line-height: 1;
  transition: color var(--transition-time-header);
  padding: 0 8px;
  height: 100%;
}
.navigation-list > li > span:hover, .navigation-list > li > span:focus,
.navigation-list > li > a:hover,
.navigation-list > li > a:focus {
  color: #175bfb;
}
.navigation-list > li > span > span,
.navigation-list > li > a > span {
  font-weight: var(--font-weight-semi-bold);
  font-size: 16px;
  line-height: 1.25;
  display: block;
  max-height: 20px;
  transition: color var(--transition-time-header);
  padding: 0 8px;
  height: 100%;
}
.navigation-list > li > span > span:hover, .navigation-list > li > span > span:focus,
.navigation-list > li > a > span:hover,
.navigation-list > li > a > span:focus {
  color: #175bfb;
}
.navigation-list > li > a:hover {
  color: #175bfb;
}

.navigation-list-dropdown.is-open {
  animation: fade-up-menu var(--transition-navigation-hover) both; /* Зберігаємо анімацію появи */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dropdown-icon {
  display: block;
  text-align: left;
  font-weight: var(--font-weight-medium);
  color: #464c5c;
  font-size: 16px;
  line-height: 1;
  transition: color var(--transition-time-header);
}
.dropdown-icon:hover, .dropdown-icon:focus {
  color: #175bfb;
}

.dropdown-icon.active {
  display: block;
  text-align: left;
  font-weight: var(--font-weight-medium);
  color: #175bfb;
  font-size: 16px;
  line-height: 1;
}

.dropdown-icon-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.dropdown-icon-close,
.lang-icon-close {
  display: block;
  margin-top: 2px;
}

.dropdown-icon-open,
.lang-icon-open {
  display: none;
}

.dropdown-icon-close.active,
.lang-icon-close.active {
  display: none;
}

.dropdown-icon-open.active,
.lang-icon-open.active {
  display: block;
}

.language-svg-box.active {
  color: #165bfb;
}

@media (max-width: 991.8px) {
  .header-right,
  .navigation,
  .language-dropdown,
  .header-buttons {
    display: none;
  }
}
.mobile-menu {
  display: none;
}

.navigation {
  position: relative;
  padding: 0;
  margin: 0;
  background-color: var(--main-bg-color);
}

@media (min-width: 992px) {
  .header-left {
    display: flex;
    justify-content: space-between;
  }
  .navigation-list > li > span {
    padding: 0;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
  }
  .navigation-list > li > a {
    font-size: 16px;
  }
  .navigation-list {
    align-items: flex-start;
    gap: 10px;
    padding: 0 20px;
    margin: 3px 0 0 6px;
    min-width: 360px;
  }
  .navigation-list-dropdown {
    width: 640px;
  }
  .header-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 40px;
    height: 88px;
  }
  .header-buttons {
    flex-direction: row;
  }
  .mobile-navigation {
    display: none;
  }
  .desktop-navigation {
    display: flex;
  }
}
@media (min-width: 1220px) {
  .header-container {
    padding: 24px 100px;
    height: 88px;
  }
}
.navigation-list-dropdown {
  display: grid;
  position: absolute;
  overflow: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  top: 100%;
  left: -200px;
  background-color: var(--main-bg-color);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 14px 24px;
  margin: 0;
  width: 485px;
  gap: 8px;
  z-index: 1000;
  grid-template-columns: repeat(2, 1fr);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-navigation-hover), visibility var(--transition-navigation-hover);
}
.navigation-list-dropdown li {
  color: var(--navigation-color-item);
  font-weight: var(--font-weight-bold);
  transition: all var(--transition-navigation-hover);
  background: var(--main-bg-color);
  text-align: left;
  height: 100%;
}
.navigation-list-dropdown li a {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 220px;
}
.navigation-list-dropdown li .nav-title {
  color: var(--main-accent-color);
  font-size: 15px;
  font-weight: var(--font-weight-semi-bold);
  margin-bottom: 5px;
  color: #333333;
  transition: color var(--transition-time-header);
}
.navigation-list-dropdown li .nav-title:hover {
  color: var(--blue-header-hover);
}
.navigation-list-dropdown li .nav-description {
  color: var(--nav-description-color);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  margin-bottom: 5px;
  transition: color var(--transition-time-header);
}

.navigation-dropdown-item_left {
  margin-right: 24px;
}

.navigation-dropdown-item_right {
  margin-left: 15px;
}

@media screen and (min-width: 1020px) {
  .navigation-list-dropdown {
    min-width: 600px;
  }
}
.header-nav-item_two {
  margin-left: -1px;
}

.header-nav-item_three {
  margin-left: -2px;
  max-width: 100%;
}

@media (min-width: 1220px) {
  .navigation-list {
    gap: 24px;
  }
  .navigation-list {
    align-items: center;
  }
}
.navigation-list > li:hover .navigation-list-dropdown {
  animation: fade-up-menu var(--transition-navigation-hover) both;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.language-dropdown {
  position: relative;
  display: inline-block;
}
.language-dropdown .language-toggle {
  background-color: transparent;
  border: none;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 1.28;
  text-align: right;
  color: var(--language-menu-color);
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 1px;
  margin-top: 6px;
}
.language-dropdown .language-menu {
  position: absolute;
  top: 100%;
  right: -60px;
  background-color: var(--main-bg-color);
  border-radius: 8px;
  box-shadow: 0px 5px 30px 0px rgba(22, 91, 251, 0.1019607843);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--transition-time-header), transform var(--transition-time-header), visibility var(--transition-time-header);
  z-index: 1000;
  user-select: none;
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  width: auto;
  max-width: 440px;
  justify-content: flex-start;
  padding: 24px;
  box-sizing: border-box;
  gap: 8px;
}
.language-dropdown .language-menu li {
  text-align: center;
}
.language-dropdown .language-menu li a {
  display: flex;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: var(--font-weight-semi-bold);
  color: var(--language-menu-color);
  user-select: none;
  transition: background-color var(--transition-time-header), color var(--transition-time-header), border-radius var(--transition-time-header);
  line-height: 1.25;
}
.language-dropdown .language-menu li a:hover {
  background-color: #f1f7ff;
  color: var(--main-accent-color);
  border-radius: 8px;
}
.language-dropdown .language-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-svg-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-buttons {
  display: flex;
  gap: 11px;
}

@media (min-width: 992px) {
  .header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
  }
  .burger-menu-toggle {
    display: none;
  }
}
@keyframes fade-up-menu {
  0% {
    transform: translate3d(0, -20%, 0);
    opacity: 0;
    pointer-events: none;
  }
  to {
    transform: translateZ(0);
    opacity: 1;
    pointer-events: auto;
  }
}
.language-btn-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dropdown-description {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 5px;
}

.navigation-list-dropdown li a {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 16px 18px;
  background: var(--main-bg-color);
  transition: background var(--transition-navigation-hover);
  border-radius: 8px;
  position: relative;
  width: 100%;
}

.navigation-list-dropdown li:hover a {
  background: var(--navigation-hover-dropdown);
}

.navigation-list-dropdown li .nav-title {
  color: #333333;
  transition: color var(--transition-time-header);
}

.navigation-list-dropdown li:hover .nav-title {
  color: var(--main-accent-color);
}

.navigation-list-dropdown li:hover .dropdown-description-icon svg path {
  fill: var(--main-accent-color);
  transition: fill var(--transition-time-header);
}

.navigation-list-dropdown li {
  padding: 0;
}

.navigation-list-dropdown::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #edf0f5;
  transform: translateX(-50%);
  height: calc(100% - 48px);
  margin-top: 24px;
  margin-bottom: 24px;
}

.collar {
  width: 100%;
  height: 24.33px;
  background: var(--main-bg-color);
  position: relative;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.collar::before {
  content: "...";
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: var(--collar-image-color);
}

.line, .menu-line {
  width: 100%;
  padding-top: 1px;
  position: relative;
  background: #EDF0F5;
}

.search-mobile-line {
  width: 100%;
  padding-top: 1px;
  position: relative;
  background: #EDF0F5;
  margin: 48px 0;
}

@media (min-width: 768px) {
  .search-mobile-line {
    display: none;
  }
}
@media (min-width: 768px) {
  .search-line {
    width: 100%;
    padding-top: 1px;
    position: relative;
    background: #EDF0F5;
    margin: 48px 0;
  }
}
.footer-line, .footer-line-mobile,
.footer-line-email {
  width: 100%;
  padding-top: 0.85px;
  position: relative;
  background: #3F79FF;
}

.lang-menu-line {
  width: 100%;
  padding-right: 1px;
  position: relative;
  background: #EDF0F5;
  margin-left: 12px;
  margin-right: 12px;
}

.lang-menu-line-mobile {
  width: 111px;
  position: relative;
}

.footer-line {
  margin-bottom: 45px;
}

.footer-line-mobile {
  margin: 16px 0;
}

.footer-line-email {
  margin: 32px 0 16px;
}

.line-sidebar {
  width: 100%;
  padding-top: 1px;
  background: #EDF0F5;
  margin: 24px 0 24px;
}

.template-line {
  width: 100%;
  padding-top: 1px;
  position: relative;
  background: #EDF0F5;
  margin: 40px 0;
}

@media (min-width: 767.99px) {
  .template-line {
    display: none;
  }
}
@media (min-width: 768px) {
  .line-sidebar {
    display: none;
  }
}
.menu-line {
  margin: 16px 0;
}

.line {
  margin: 40px 0;
}

.button-line {
  margin-top: 245px;
  margin-bottom: 32px;
}

@media (min-width: 482px) {
  .line {
    display: none;
  }
}
body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 1001;
  overflow-y: auto;
  padding: 24px 24px;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.active {
  display: block;
  top: 66px;
  height: calc(100% - 66px);
}
.mobile-menu .mobile-close-menu {
  position: absolute;
  top: 65px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: #000;
  font-size: 24px;
  z-index: 1002;
}
.mobile-menu .mobile-navigation {
  font-family: "Nunito", sans-serif;
  text-align: left;
}
.mobile-menu .mobile-navigation-list-dropdown {
  height: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
  background-color: var(--main-bg-color);
  transition: height 0.4s ease, padding 0.4s ease;
}
.mobile-menu .mobile-navigation-list-dropdown.active {
  height: auto;
  padding-top: 15px;
  display: block;
}
.mobile-menu #mobile-navigation-list-dropdown {
  position: absolute;
  left: 0;
  background-color: #fff;
  z-index: 15;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  max-height: 200px;
  margin: 0;
}
.mobile-menu #mobile-navigation-list-dropdown.active {
  opacity: 1;
  visibility: visible;
  display: block;
}
.mobile-menu .mobile-header-buttons {
  margin-top: 32px;
  position: relative;
  z-index: 20;
}
.mobile-menu .mobile-dropdown {
  position: relative;
  cursor: pointer;
  transition: margin-bottom 0.3s ease;
}
.mobile-menu .mobile-dropdown-icon {
  display: flex;
  font-weight: bold;
  justify-content: space-between;
  align-items: center;
  padding-right: 11px;
}
.mobile-menu .down-icon {
  display: block;
}
.mobile-menu .above-icon {
  display: none;
}
.mobile-menu .mobile-dropdown.active .dropdown-icon.down-icon {
  display: none;
}
.mobile-menu .mobile-dropdown.active .dropdown-icon.above-icon {
  display: block;
}
.mobile-menu .mobile-navigation-list-dropdown li {
  background: var(--main-bg-color);
}
.mobile-menu .mobile-navigation-list-dropdown li:last-child {
  border-bottom: none;
  padding: 3px 0;
}
.mobile-menu .mobile-navigation-list-dropdown .link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 0;
}
.mobile-menu .mobile-navigation-list-dropdown_lang {
  display: flex;
  justify-content: flex-start;
  padding-left: 52px;
}
.mobile-menu .nav-description {
  font-family: Nunito;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.8px;
  color: #666E81;
}
.mobile-menu .nav-title {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  text-align: left;
  color: #2A6AFD;
}
.mobile-menu .language-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.mobile-menu .mobile-language-dropdown {
  margin-top: 30px;
}
.mobile-menu .mobile-language-dropdown .mobile-language-toggle {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.mobile-menu .mobile-language-dropdown .mobile-language-toggle .arrow::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #333;
  vertical-align: middle;
}
.mobile-menu .mobile-language-dropdown .mobile-language-menu {
  margin-top: 10px;
  padding-left: 20px;
  list-style: none;
}
.mobile-menu .mobile-language-dropdown .mobile-language-menu li {
  margin: 5px 0;
}
.mobile-menu .mobile-header-buttons {
  display: flex;
  justify-content: space-between;
  gap: 11px;
  margin-top: 32px;
}

.mobile-language-column {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-mobile {
  display: block;
  background: var(--main-accent-color);
}

.footer-mobil-logo-box {
  display: flex;
  justify-content: center;
  padding: 48px 24px 43px;
}

.footer-box {
  text-align: center;
  padding: 0px 40px 27px;
}

.footer-title-button-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.footer-mobile-contacts {
  padding: 32px 24px 0;
  text-align: center;
}

.footer-list-social {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12.7px;
  margin-bottom: 29px;
}

.footer-main-list-box {
  display: flex;
  flex-direction: column;
  padding: 0 24px;
}

.footer-list-box {
  display: flex;
  flex-direction: column;
}

.footer-list {
  display: none;
}

.open {
  display: flex;
  flex-direction: column;
  gap: 26px;
  height: 100%;
  padding: 24px 0 8px;
  padding-left: 15px;
}

.footer-list.active {
  display: block;
  opacity: 1;
  visibility: visible;
}

.footer-link {
  font-size: 14px;
  font-weight: 200;
  line-height: 1.36px;
  color: var(--main-bg-color);
}

.footer-icon-open {
  display: block;
}

.footer-icon-close {
  display: none;
}

.footer-btn-drobdown {
  cursor: pointer;
}

.footer-btn-drobdown.active .footer-icon-open {
  display: none;
}

.footer-btn-drobdown.active .footer-icon-close {
  display: block;
}

.footer-title-list {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--main-bg-color);
}

.footer-social_title-folow,
.footer-social_title {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--main-bg-color);
  margin-bottom: 16.3px;
}

.footer-social_title {
  margin-bottom: 5.3px;
}

.footer-social_email {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.28;
  color: var(--main-bg-color);
}

@media (min-width: 992px) {
  .footer-box {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }
}
.footer-box p {
  color: var(--main-bg-color);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
  text-align: center;
  margin-bottom: 4px;
}

@media (max-width: 991.9px) {
  .footer-desktop {
    display: none;
  }
}
@media (min-width: 992px) {
  .footer-mobile {
    display: none;
  }
  .footer-desktop {
    display: block;
    background: var(--main-accent-color);
  }
  .footer-list-social {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12.7px;
    margin-bottom: 14px;
    margin-top: 24px;
  }
  .footer-box {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 0 100px 27px;
  }
  .footer-logo {
    margin-bottom: 40px;
  }
  .footer-main-list-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 103px 100px 66px;
    max-width: 1440px;
    margin: 0 auto;
  }
  .footer-list-box {
    display: flex;
    flex-direction: column;
  }
  .footer-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    height: 100%;
    margin-bottom: 32px;
  }
  .footer-link {
    font-size: 15px;
    font-weight: 200;
    line-height: 1.36px;
    color: var(--main-bg-color);
  }
  .footer-box-line {
    padding: 0 40px;
    max-width: 1600px;
    margin: 0 auto;
  }
  .footer-title-list {
    display: block;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.16;
    color: var(--main-bg-color);
    margin-bottom: 20px;
  }
  .footer-social_title-folow,
  .footer-social_title {
    display: block;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.16;
    color: var(--main-bg-color);
    margin-bottom: 16.3px;
  }
  .footer-social_title {
    margin-bottom: 5.3px;
  }
  .footer-social_email {
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    color: var(--main-bg-color);
  }
}
@media (min-width: 992px) and (min-width: 992px) {
  .footer-box {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    max-width: 1440px;
    margin: 0 auto;
  }
}
@media (min-width: 992px) {
  .footer-block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .footer-block p {
    color: var(--main-bg-color);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    line-height: 1.25;
    text-align: left;
  }
}
.footer-email-box {
  margin-bottom: 24px;
}

.card-templates-box_search {
  margin-bottom: 48px;
}

.card-templates_category {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  flex-direction: row;
  padding: 0;
}

.card-templates_search {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  flex-direction: row;
  padding: 0;
}

.card-template-category-item-search {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  overflow: visible;
  height: auto;
}

.card-template-category-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  max-width: 580px;
  width: 100%;
}

.templates-img {
  max-width: 580px;
  width: 100%;
  border-radius: 16px;
}

.card-template-name {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: center;
  color: var(--main-accent-color);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  padding-top: 21px;
  margin-bottom: 20px;
}

.card-template-category-item a img {
  transition: transform var(--transition-time-cubic), box-shadow var(--transition-time-cubic);
}

.card-box-img {
  width: 100%;
  border-radius: 16px;
  aspect-ratio: 265/408;
}

.card-box-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 610px) {
  .card-template-category-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    overflow: visible;
    width: calc((100% - 56px) / 2);
    max-width: 580px;
    height: auto;
  }
  .card-template-category-item-search {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    overflow: visible;
    width: calc((100% - 56px) / 2);
    height: auto;
  }
  .card-template-category-item,
  .card-template-category-item_search {
    max-width: 300px;
    width: calc((100% - 56px) / 2);
  }
  .templates-img {
    max-width: 300px;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .card-templates-box {
    margin-bottom: 40px;
  }
}
@media (min-width: 834px) {
  .card-template-category-item,
  .card-template-category-item_search {
    width: calc((100% - 57px) / 2);
  }
}
@media (min-width: 1220px) {
  .card-template-category-item,
  .card-template-category-item-search {
    width: calc((100% - 112px) / 3);
  }
  .card-templates-box {
    margin-bottom: 24px;
  }
  .card-template-category-item:hover .card-template-name {
    color: var(--related-template-hover);
  }
  .card-template-category-item a:hover img {
    transform: translateY(-5px);
    box-shadow: var(--related-box-shadow);
  }
}
@media (min-width: 1341px) {
  .card-box-img {
    aspect-ratio: 265/408;
  }
}
@media (min-width: 1440px) {
  .card-template-category-item {
    width: calc((100% - 112px) / 3);
  }
}
.container-search-sidebar {
  padding-bottom: 30px;
  position: sticky;
  top: 0;
  width: 241.5px;
  height: 100%;
}

.categories-list {
  height: calc(100vh - 150px);
  overflow-y: auto;
  padding-right: 4px;
}

.sidebar-inner {
  padding-top: 17px;
}

.categories-list::-webkit-scrollbar {
  width: 6px;
}

.categories-list::-webkit-scrollbar-track {
  background: var(--secondary-bg-color);
  border-radius: 4px;
}

.categories-list::-webkit-scrollbar-thumb {
  background: var(--sidebar-active-hover);
  border-radius: 4px;
}

.categories-list::-webkit-scrollbar-thumb:hover {
  background: var(--sidebar-search-color);
}

.templates-search-sidebar {
  position: sticky;
  top: 0;
  overflow: hidden;
  padding: 0 24px;
}

.container-section_category,
.container-section_search,
.container-section_main {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background: var(--secondary-bg-color);
  min-height: 100vh;
}

.container-section_search {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 56px;
  position: relative;
}

.container-section_main {
  padding-top: 56px;
}

@media (min-width: 768px) {
  .container-search-sidebar {
    top: 120px;
  }
  .container-section_category,
  .container-section_search .container-section_main {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 36px;
    position: relative;
  }
  .container-section_main {
    padding-top: 0px;
  }
  .container-section_category,
  .container-section_search {
    margin-top: 70px;
  }
  .container-section_main {
    margin-top: 100px;
    gap: 36px;
  }
}
@media (min-width: 1050px) {
  .container-section_category,
  .container-section_search {
    gap: 45px;
  }
}
@media (min-width: 1100px) {
  .container-section_category,
  .container-section_search {
    gap: 55px;
  }
}
@media (min-width: 1220px) {
  .container-section_category,
  .container-section_main,
  .container-section_search {
    flex-wrap: nowrap;
    gap: 65px;
  }
}
@media (min-width: 1440px) {
  .container-section_category,
  .container-section_search {
    gap: 92px;
  }
  .container-search-sidebar {
    width: 30%;
  }
  .container-section_main {
    gap: 92px;
  }
}
.desktop-sidebar {
  display: none;
}

@media (min-width: 768px) {
  .desktop-sidebar {
    display: block;
    min-width: 241.5px;
    width: 30%;
  }
}
@media (min-width: 900px) {
  .desktop-sidebar {
    max-width: 241.5px;
    width: 100%;
  }
}
.sidebar-scroll-container {
  overflow-y: auto;
  padding-right: 4px;
}

.sidebar-header {
  position: sticky;
  top: 0;
  background: var(--secondary-bg-color);
  z-index: 1;
  padding-top: 32px;
  padding-bottom: 12px;
  border-top: solid 1px #EDF0F5;
  border-right: solid 1px #EDF0F5;
}

.sidebar-content {
  border-right: solid 1px #EDF0F5;
}

.sidebar_span {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 0.9;
  text-align: left;
  color: var(--main-accent-color);
  margin-left: 11px;
}

.search-form-wrapper {
  position: relative;
  padding-top: 5px;
}

.container-form-search {
  text-align: center;
  border: 1px solid var(--border-container-sidebar);
  border-radius: 8px;
  padding: 8.5px 14.5px;
  background: var(--main-bg-color);
  transition: border-color 0.3s ease;
  margin-bottom: 34px;
}

.container-form-search_page {
  text-align: center;
  border: 1px solid var(--border-container-sidebar);
  border-radius: 8px;
  padding: 8.5px 14.5px;
  margin-top: 6px;
  margin-bottom: 32.5px;
  background: var(--main-bg-color);
}

.container-form-search.error-state,
.container-form-search_page.error-state {
  border-color: #D9534C;
}

.error-message {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: #D9534C;
  font-size: 12px;
  line-height: 1.33;
  text-align: left;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.error-message.show {
  opacity: 1;
}

.form-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  background: var(--main-bg-color);
}

.search-placeholder {
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  color: #888;
  pointer-events: none;
  transition: opacity 0.3s ease;
  font-size: 14px;
  line-height: 1.42;
  z-index: 1;
}

.form-search_input:focus + .search-placeholder,
.form-search_input:not(:placeholder-shown) + .search-placeholder {
  opacity: 0;
}

.category-main-box {
  flex-grow: 1;
}

.form-search_input {
  width: 190px;
  border: none;
  background: var(--main-bg-color);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.42;
  text-align: left;
  color: var(--sidebar-category-span);
  padding-right: 20px;
}

.form-search_input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.form-button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: transparent;
  cursor: pointer;
  background: var(--main-bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 0;
}

.error-icon-container {
  position: absolute;
  right: 14.5px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  z-index: 2;
}

.sidebar {
  width: 100%;
  padding-top: 32px;
}

.sidebar-scroll-container::-webkit-scrollbar {
  width: 7px;
}

.sidebar-scroll-container::-webkit-scrollbar-track {
  background: var(--secondary-bg-color);
}

.sidebar-scroll-container::-webkit-scrollbar-thumb {
  background: var(--sidebar-active-hover);
  border-radius: 4px;
}

.sidebar-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--hero-content-text);
}

.sidebar_span {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 0.9;
  text-align: left;
  color: var(--main-accent-color);
  margin-left: 11px;
}

.category_margin {
  padding-top: 8px;
}

@media (min-width: 768px) {
  .category_margin {
    padding-top: 16px;
    padding-bottom: 110px;
  }
}
.categories-item {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 12px 0;
  border-radius: 8px;
  transition: background-color var(--transition-time-cubic), color var(--transition-time-cubic);
  position: relative;
  cursor: pointer;
}

.categories-item:hover {
  background: var(--categories-sidebar-hover);
  color: var(--main-accent-color);
}

.categories-item.active {
  background-color: var(--sidebar-active-hover);
  color: var(--main-accent-color);
  pointer-events: none;
}

.categories-item.active:hover {
  background-color: var(--sidebar-active-hover);
  color: var(--main-accent-color);
}

.categories-item a {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
  text-align: left;
  color: var(--main-text-color);
  transition: color var(--transition-time-cubic);
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 11px;
  box-sizing: border-box;
}

.categories-item.active a {
  color: var(--main-accent-color);
}

.categories-item:hover a {
  color: var(--main-accent-color);
}

.categories-item_span {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.28;
  color: var(--sidebar-search-color);
  margin-left: 8px;
  transition: color var(--transition-time-cubic);
  margin-left: auto;
}

.container-category-description_block {
  padding-bottom: 56px;
}

.container-category-description_block > p,
.container-category-description_block_h2 > p,
.container-category-description_block_h3 > p {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  text-align: left;
  color: var(--main-text-color);
  margin-bottom: 10px;
}

.container-category-description_block_h3 {
  padding-bottom: 48px;
  max-width: 910px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.copyright_internal_faq_href {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  text-align: left;
  color: var(--main-accent-color);
  cursor: pointer;
  text-decoration: none;
}

.all-templates-list {
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style-type: disc;
}

.container-category-description_list {
  list-style: none;
  padding-left: 40px;
  padding-top: 20px;
  list-style-type: decimal;
}

.container-category-description_list li {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  text-align: left;
  color: var(--main-text-color);
  padding-bottom: 8px;
}

.container-category-description_list li {
  padding-bottom: 8px;
}

.container-category-description_block h2 {
  padding: 0;
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  text-align: left;
  color: var(--main-accent-color);
  margin-bottom: 16px;
}

.container-category-description_block_h3 p,
.all-templates-list-item {
  padding: 0;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  text-align: left;
  color: var(--main-text-color);
}

.container-category-description_block_h2 h2 {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: left;
  color: var(--main-accent-color);
  margin-bottom: 16px;
}

.container-category-description_block_h3 h3 {
  font-size: 28px;
  font-weight: var(--font-weight-semi-bold);
  line-height: 1.24;
  text-align: left;
  color: var(--main-accent-color);
  margin-top: 0;
  margin-bottom: 16px;
}

.container-category-description {
  padding-top: 64px;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .container-category-description_block h2,
  .container-category-description_block_h2 h2 {
    font-size: 48px;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 20px;
  }
  .container-description_bottom {
    margin-bottom: 10px;
  }
  .container-category-description_block {
    padding-bottom: 48px;
  }
  .container-category-description {
    padding-top: 85px;
  }
  .container-category-description_block_h3 p {
    margin-bottom: 10px;
  }
  .container-category-description_block_h3 {
    padding-bottom: 56px;
  }
  .all-templates-list {
    gap: 15px;
  }
  .container-category-description_block_h3 h3 {
    margin-bottom: 20px;
  }
}
@media (min-width: 1220px) {
  .container-category-description_block h2 {
    margin-top: 0;
  }
  .container-category-description {
    padding-top: 100px;
  }
  .container-category-description_block_h3 h3 {
    font-size: 28px;
    line-height: 1.28;
    font-weight: var(--font-weight-bold);
  }
}
.section-call-to-action {
  background: var(--main-bg-color);
  padding: 48px 24px 67px;
}

.section-call-to-action-_box {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.call-to-action_card {
  position: relative;
  margin-top: 32px;
  max-width: 700px;
  min-width: 360px;
  width: 100%;
  border-radius: 16px;
}

.call-to-action-text_box {
  flex: 1;
  max-width: 710px;
  min-width: 260px;
  width: 100%;
}

.call-to-action-text_box h2 {
  font-size: 36px;
  font-weight: var(--font-weight-bold);
  line-height: 1.16;
  text-align: left;
  color: var(--main-accent-color);
  margin-bottom: 8px;
}

.call-to-action-text_box p {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.33;
  text-align: left;
  color: var(--main-text-color);
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .call-to-action-text_box h2 {
    font-size: 28px;
    line-height: 1.28;
    margin-bottom: 24px;
  }
  .section-call-to-action-_box {
    max-width: 1440px;
    flex-direction: row;
    gap: 48px;
  }
  .section-call-to-action {
    padding: 48px 36px;
  }
  .call-to-action-text_box p {
    font-size: 18px;
    line-height: 1.5;
  }
}
@media (min-width: 922px) {
  .call-to-action_card {
    max-width: 520px;
    width: 100%;
  }
}
@media (min-width: 1100px) {
  .section-call-to-action {
    padding: 56px 48px 100px;
  }
}
@media (min-width: 1220px) {
  .section-call-to-action {
    padding: 56px 100px 100px;
    max-width: 1440px;
    margin: 0 auto;
  }
  .call-to-action_card {
    max-width: 620px;
    width: 100%;
  }
  .section-call-to-action-_box {
    gap: 70px;
  }
}
@media (min-width: 1280px) {
  .call-to-action-text_box h2 {
    margin-bottom: 24px;
  }
  .call-to-action_card {
    max-width: 620px;
    width: 100%;
  }
  .section-call-to-action {
    max-width: 1440px;
    margin: 0 auto;
  }
}
.call-to-action_card .collar {
  height: 16px;
  background-color: #f5f5f5;
}

.call-to-action_card .action-image {
  object-fit: cover;
  border-radius: 16px;
}

.action-main_template {
  cursor: pointer;
}

.action-button {
  display: block;
  padding: 12px 22px;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  flex-grow: 1;
  background-color: var(--main-accent-color);
  color: var(--main-bg-color);
  transition: background-color var(--transition-time-cubic), color var(--transition-time-cubic), border-color var(--transition-time-cubic);
  max-width: 140px;
}
.action-button:hover {
  background: var(--blue-button-hover);
}

.pagination-container-mobile {
  margin-bottom: 15px;
  margin-top: 35px;
}

.pagination-container-desktop {
  display: none;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.pagination-retreat {
  padding-bottom: 34px;
  padding-top: 60px;
}

.pagination-page_number_link {
  display: block;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-container-sidebar);
  color: var(--pagination-black-color);
  border-radius: 8px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 1.28;
  text-align: center;
  transition: all var(--transition-time-header);
}

.pagination-page_number_link-search {
  display: block;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-container-sidebar);
  color: var(--pagination-black-color);
  border-radius: 8px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 1.28;
  text-align: center;
  transition: all var(--transition-time-header);
}

.pagination-svg {
  fill: var(--main-text-color);
  margin-top: 12px;
  transition: fill var(--transition-time-header);
}

.pagination-page_number_link:hover .pagination-svg,
.pagination-page_number_link-search:hover .pagination-svg {
  fill: var(--main-bg-color);
}

.disabled-svg {
  fill: var(--border-container-sidebar) !important;
}

.page-item.disabled .pagination-page_number_link,
.page-item-search.disabled .pagination-page_number_link {
  pointer-events: none;
  cursor: not-allowed;
}

.pagination-page_number_link:hover,
.pagination-page_number_link-search:hover {
  background-color: var(--main-accent-color);
  border-color: var(--main-accent-color);
  color: var(--secondary-bg-color);
}

.pagination-page_number_link.active,
.pagination-page_number_link-search.active {
  background-color: var(--main-accent-color);
  border-color: var(--main-accent-color);
  color: var(--secondary-bg-color);
  pointer-events: none;
  cursor: default;
}

.page-item.ellipsis > a,
.page-item-search.ellipsis > a {
  border: none;
}
.page-item.ellipsis > a:hover,
.page-item-search.ellipsis > a:hover {
  background-color: transparent;
  border: none;
  cursor: auto;
}

.pagination-page_number_link.ellipsis,
.pagination-page_number.ellipsis {
  pointer-events: none;
  cursor: none;
  background-color: transparent;
  border: none;
  color: transparent;
}

.pagination-page_number_link.ellipsis,
.pagination-page_number_link-search.ellipsis {
  color: var(--pagination-black-color);
}

.pagination-page_number.ellipsis::before,
.pagination-page_number.ellipsis-search::before {
  content: "...";
  font-size: 15px;
  text-align: center;
  padding-left: 4px;
  color: var(--pagination-black-color);
}

.pagination-page_number {
  padding: 8px;
  margin: 0;
  text-align: center;
}

@media (max-width: 768px) {
  .hidden {
    display: none;
  }
  .visible {
    display: inline-block;
  }
}
@media (min-width: 420px) {
  .pagination-container-mobile {
    display: none;
  }
  .pagination-container-desktop {
    display: block;
    padding: 60px 0;
  }
}
.pagination-search-box {
  margin-bottom: 100px;
}

.pagination-page_number-search {
  margin-top: 8px;
}

.page-item-search.active {
  color: #ffffff;
  background: var(--main-accent-color);
  box-sizing: border-box;
  border-radius: 8px;
  padding: 0 12px 8px;
}

.container-faq {
  padding-bottom: 48px;
  max-width: 910px;
  width: 100%;
}

.container-faq h2 {
  padding: 0;
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  text-align: left;
  color: var(--main-accent-color);
  margin-bottom: 24px;
}

.container-faq h3 {
  font-size: 24px;
  font-weight: var(--font-weight-semi-bold);
  line-height: 1.2;
  text-align: left;
  color: var(--main-accent-color);
  margin-top: 0;
  margin-bottom: 16px;
}

.container-faq p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: var(--main-text-color);
  margin-bottom: 24px;
}

.container-faq p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .container-faq h3 {
    font-size: 28px;
    line-height: 1.28;
    font-weight: var(--font-weight-bold);
    margin-bottom: 16px;
  }
  .container-faq {
    padding-bottom: 56px;
  }
  .container-faq h2 {
    font-size: 48px;
    line-height: 1.16;
    margin-bottom: 20px;
  }
  .container-faq p {
    margin-bottom: 20px;
  }
}
.navigation-block {
  display: flex;
  justify-content: flex-start;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  align-items: center;
  gap: 8px;
}

.navigation-block-main {
  padding-top: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-navigation-block {
  padding-top: 15px;
  display: flex;
  justify-content: flex-start;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  align-items: center;
  gap: 5px;
}

@media (min-width: 1280px) {
  .navigation {
    margin-left: 32px;
  }
}
@media (min-width: 480px) {
  .navigation-block {
    padding-top: 32px;
  }
  .navigation-block-main {
    padding-top: 32px;
  }
}
@media (min-width: 768px) {
  .navigation-block-main {
    padding-top: 15px;
  }
}
@media (min-width: 1280px) {
  .navigation {
    margin-left: 32px;
  }
}
.navigation-page-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.navigation-page-link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  font-family: Nunito;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.12;
  color: var(--main-accent-color);
  padding: 3px;
}

.navigation-page_icon_arrow {
  fill: var(--main-text-color);
}

.navigation-item_icon {
  fill: var(--main-accent-color);
}

.mobile-sidebar {
  display: inline;
}

@media (max-width: 480px) {
  .mobile-sidebar-section {
    padding-top: 69px;
  }
}
@media (min-width: 768px) {
  .mobile-sidebar {
    display: none;
  }
  .mobile-sidebar-scroll-container {
    padding: 16px;
  }
  .mobile-sidebar-section {
    padding-top: 0;
  }
}
.mobile-container-sidebar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--secondary-bg-color);
  overflow: hidden;
  z-index: 1000;
  border-radius: 0 0 8px 8px;
}

.mobile-container-sidebar_category {
  position: sticky;
  top: 65px;
  left: 0;
  width: 100%;
  background: var(--secondary-bg-color);
  overflow: hidden;
  z-index: 1000;
  border-radius: 0 0 8px 8px;
}

@media (min-width: 768px) {
  .mobile-container-sidebar_category {
    display: none;
  }
}
.mobile-sidebar-scroll-container {
  overflow-y: auto;
  padding-top: 8px;
  max-width: 710px;
  width: 100%;
  max-height: calc(100vh - 120px);
}

.mobile-container-form-search {
  text-align: center;
  border: 1px solid var(--border-container-sidebar);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--main-bg-color);
  transition: border-color 0.3s ease;
  position: relative;
}

.mobile-container-form-search.error-state {
  border-color: #D9534C;
}

.mobile-templates-search-sidebar {
  position: sticky;
  position: -webkit-sticky;
}

.mobile-templates-search-sidebar.mobile-sidebar {
  position: sticky;
  top: 65px;
  z-index: 999;
  width: 100%;
  overflow: hidden;
}

.mobile-templates-search-sidebar.mobile-sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--secondary-bg-color);
  z-index: -1;
}

.mobile-form-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  background: var(--main-bg-color);
}

.mobile-form-box .form-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  background: var(--main-bg-color);
}

.mobile-form-button {
  border: transparent;
  background: transparent;
  cursor: pointer;
  background: var(--main-bg-color);
  flex-shrink: 0;
  padding: 0;
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-form-search_input {
  border: none;
  background: var(--main-bg-color);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.42;
  text-align: left;
  color: var(--sidebar-category-span);
  width: 100%;
  padding-right: 30px;
  padding-left: 0;
}

.mobile-form-search_input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.mobile-search-placeholder {
  position: absolute;
  top: 50%;
  left: 28px;
  transform: translateY(-50%);
  color: #888;
  pointer-events: none;
  transition: opacity 0.3s ease, color 0.3s ease, left 0.3s ease;
  font-size: 14px;
  line-height: 1.42;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}

.mobile-form-search_input:focus + .mobile-search-placeholder,
.mobile-form-search_input:not(:placeholder-shown) + .mobile-search-placeholder {
  opacity: 0;
}

.error-icon-container {
  position: absolute;
  right: 14.5px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.mobile-sidebar_span {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.42;
  text-align: left;
  color: #464C5C;
  margin-left: 11px;
}

.error-message {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: #D9534C;
  font-size: 12px;
  line-height: 1.33;
  text-align: left;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  min-height: 16px;
}

.error-message.show {
  opacity: 1;
}

.form-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mobile-categories-list {
  width: 100%;
  max-height: 350px;
  overflow-y: auto;
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
  background: #FFFFFF;
  border: 1px solid #EDF0F5;
  box-shadow: 0px 1px 6px 0px rgba(145, 153, 171, 0.3019607843);
  border-radius: 8px;
}

.hidden {
  display: none;
}

.mobile-sidebar-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 12px;
  cursor: pointer;
  border: 1px solid var(--border-container-sidebar);
  border-radius: 8px;
  background: var(--main-bg-color);
}

.mobile-sidebar-title .down-icon {
  display: block;
}

.mobile-sidebar-title .above-icon {
  display: none;
}

.mobile-sidebar-title.active .down-icon {
  display: none;
}

.mobile-sidebar-title.active .above-icon {
  display: block;
}

.mobile-categories-item {
  display: flex;
  padding: 8px;
  justify-content: space-between;
  align-items: center;
}

.mobile-categories-item:last-child {
  border-bottom: none;
}

.mobile-full-link {
  text-decoration: none;
  color: #464C5C;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-categories-item_span {
  font-size: 12px;
  color: #888;
  padding-right: 12px;
}

.mobile-categories-item.active .mobile-full-link {
  font-weight: bold;
}

.mobile-categories-item.active {
  background-color: var(--sidebar-active-hover);
  color: var(--main-accent-color);
  pointer-events: none;
}

.mobile-categories-item a {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.42;
  text-align: left;
  color: #212736;
  transition: color var(--transition-time-cubic);
  display: flex;
  align-items: center;
  padding-left: 16px;
  box-sizing: border-box;
}

.mobile-categories-item.active a {
  color: var(--main-accent-color);
}

.birthday-banner-mobile {
  position: absolute;
  width: 100%;
  background: #EE7995;
  top: 0;
  left: 0;
  padding: 15px 0;
  z-index: 1000;
}

.black-friday-banner-mobile {
  position: absolute;
  width: 100%;
  background: #1F1F1F;
  top: 0;
  left: 0;
  padding: 15px 0;
  z-index: 1000;
  text-align: center;
}

.black-friday-discount {
  font-weight: 500;
  font-style: Medium;
  font-size: 16px;
  line-height: 1.5;
  color: #E94C2F;
}

.birthday-banner {
  display: none;
}

.black-friday-banner {
  display: none;
}

@media (min-width: 880px) {
  .birthday-banner-mobile {
    display: none;
  }
  .black-friday-banner-mobile {
    display: none;
  }
  .birthday-banner {
    display: block;
    position: absolute;
    width: 100%;
    background: #EE7995;
    top: 0;
    left: 0;
    padding: 10px 0;
    z-index: 1000;
  }
  .black-friday-banner {
    display: block;
    position: absolute;
    width: 100%;
    background: #1F1F1F;
    top: 0;
    left: 0;
    padding: 10px 0;
    z-index: 1000;
  }
  .black-friday-discount {
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    line-height: 1.5;
    color: #E94C2F;
  }
  .birthday-banner_link {
    display: block;
    text-decoration: none;
    text-align: center;
  }
}
@media (min-width: 992px) {
  .birthday-banner {
    top: 13px;
  }
  .black-friday-banner {
    top: 18px;
  }
}
.birthday-banner-mobile_link {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 0 42px;
}

.birthday-banner_text {
  color: #FFFFFF;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
}

.demo-page-body {
  overflow: hidden;
  height: 100vh;
}

.demo-toolbar {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.toolbar-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.container-turn-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.link {
  text-decoration: none;
}

.device-icon {
  display: inline;
  width: 24px;
  height: 24px;
  margin-top: 4px;
}

.demo-turn-btn {
  display: flex;
  padding: 14px;
  background-color: transparent;
  border: none;
  border-right: 1px solid #edf0f5;
  justify-content: center;
  align-items: center;
}

.demo-turn-btn:hover,
.demo-turn-btn:focus {
  background-color: #edf0f5;
}

.demo-turn-btn:hover {
  background-color: #e6e8eb;
}

.demo-svg {
  fill: currentColor;
}

.demo-turn-btn .demo-svg path {
  fill: #464C5C;
}

.demo-device-container .demo-svg path {
  fill: #464C5C;
}

.demo-title {
  display: block;
  font-size: 16px;
  line-height: 1.12;
  text-align: center;
  color: var(--main-text-color);
  margin-left: 24px;
}

.demo-device-container {
  display: none;
}

.demo-create-btn {
  background-color: var(--main-accent-color);
  color: var(--main-bg-color);
  padding: 16px 32px;
  font-weight: var(--font-weight-bold);
  font-size: 16px;
  line-height: 1;
  transition: background-color 0.3s ease;
}

.demo-create-btn:hover {
  background: var(--blue-button-hover);
}

.demo-viewer-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
}

.demo-iframe {
  display: block;
  width: 100%;
  height: -webkit-fill-available;
  max-height: 100%;
  object-fit: contain;
  border: none;
  background-color: #ffffff;
}

.demo-iframe-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out, padding 0.4s ease-in-out, border-radius 0.4s ease-in-out;
  box-sizing: content-box;
}
.demo-iframe-container.desktop {
  width: 100%;
  padding: 0;
  aspect-ratio: 16/9;
  transform: none !important;
  height: 100vh;
}
.demo-iframe-container.tablet {
  aspect-ratio: 3/4;
  padding: 50px;
}
.demo-iframe-container.tablet .demo-iframe {
  width: 834px;
  max-height: 1112px;
}
.demo-iframe-container.mobile {
  aspect-ratio: 9/19.5;
  padding: 48px 32px;
}
.demo-iframe-container.mobile .demo-iframe {
  width: 418px;
  max-height: 1225px;
}
@media (min-width: 769px) {
  .demo-iframe-container.mobile {
    transform-origin: center;
    margin: 12px 24px;
  }
  .demo-iframe-container.mobile {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='468' height='939' fill='none'%3E%3Crect width='458.412' height='937.885' x='4.794' y='.557' fill='%23DFD2CF' stroke='%23121511' rx='70.5'/%3E%3Crect width='453.176' height='932.655' x='7.412' y='3.172' fill='%234E4A49' rx='69'/%3E%3Crect width='444.706' height='924.196' x='11.648' y='7.402' fill='%23000' rx='65'/%3E%3Cpath fill='url(%23a)' d='M189.529 7.402h88.941a4.23 4.23 0 0 1-4.229 4.23h-80.482a4.23 4.23 0 0 1-4.23-4.23'/%3E%3Cpath fill='%238E8A87' stroke='%23514D4A' stroke-width='.5' d='M1 181.071h2.985v34.396H1a.75.75 0 0 1-.75-.75v-32.896a.75.75 0 0 1 .75-.75Z'/%3E%3Cpath fill='%235C5A57' d='M2.117 182.936h2.118v30.666H2.117z'/%3E%3Cpath fill='%23312E2B' d='M4.235 182.936H3.176v30.666h1.06z'/%3E%3Cpath fill='%230C0A09' d='M2.117 213.601h2.118v1.057H2.117zM2.117 182.936h2.118v1.057H2.117z'/%3E%3Cpath fill='%238E8A87' stroke='%23514D4A' stroke-width='.5' d='M1 247.689h2.985v68.234H1a.75.75 0 0 1-.75-.75v-66.734a.75.75 0 0 1 .75-.75Z'/%3E%3Cpath fill='%235C5A57' d='M2.117 251.605h2.118v60.402H2.117z'/%3E%3Cpath fill='%23312E2B' d='M4.235 251.605H3.176v60.402h1.06z'/%3E%3Cpath fill='%230C0A09' d='M2.117 310.949h2.118v2.083H2.117zM2.117 251.605h2.118v2.083H2.117z'/%3E%3Cpath fill='%238E8A87' stroke='%23514D4A' stroke-width='.5' d='M467 401.574h-2.985V296.331H467a.75.75 0 0 1 .75.75v103.743a.75.75 0 0 1-.75.75Z'/%3E%3Cpath fill='%235C5A57' d='M465.882 395.416h-2.118V302.49h2.118z'/%3E%3Cpath fill='%23312E2B' d='M463.765 395.416h1.059V302.49h-1.059z'/%3E%3Cpath fill='%230C0A09' d='M465.882 304.117h-2.118v-3.204h2.118zM465.882 395.416h-2.118v-3.204h2.118z'/%3E%3Cpath fill='%238E8A87' stroke='%23514D4A' stroke-width='.5' d='M1 337.571h2.985v68.233H1a.75.75 0 0 1-.75-.75v-66.733a.75.75 0 0 1 .75-.75Z'/%3E%3Cpath fill='%235C5A57' d='M2.117 341.487h2.118v60.402H2.117z'/%3E%3Cpath fill='%23312E2B' d='M4.235 341.487H3.176v60.402h1.06z'/%3E%3Cpath fill='%230C0A09' d='M2.117 400.831h2.118v2.083H2.117zM2.117 341.487h2.118v2.083H2.117z'/%3E%3Cpath fill='%2331302E' d='M4.235 99.399h7.412v6.345H4.235z'/%3E%3Cpath fill='%234C4948' d='M4.235 99.399h2.471v6.345H4.235z'/%3E%3Cpath fill='%2331302E' d='M4.235 833.257h7.412v6.345H4.235z'/%3E%3Cpath fill='%234C4948' d='M4.235 833.257h2.471v6.345H4.235z'/%3E%3Cpath fill='%2331302E' d='M463.765 839.601h-7.412v-6.345h7.412z'/%3E%3Cpath fill='%234C4948' d='M463.765 839.601h-2.471v-6.345h2.471z'/%3E%3Cpath fill='%2331302E' d='M463.765 105.743h-7.412v-6.345h7.412z'/%3E%3Cpath fill='%234C4948' d='M463.765 105.743h-2.471v-6.345h2.471z'/%3E%3Cpath fill='%2331302E' d='M364.235 0v7.402h-6.353V0z'/%3E%3Cpath fill='%234C4948' d='M364.235 0v2.467h-6.353V0z'/%3E%3Cpath fill='%2331302E' d='M103.765 939v-7.402h6.353V939z'/%3E%3Cpath fill='%234C4948' d='M103.765 939v-2.467h6.353V939z'/%3E%3Crect width='127.059' height='37.01' x='170.471' y='35.953' fill='%23040404' rx='17.5'/%3E%3Cellipse cx='279' cy='54.458' fill='url(%23b)' rx='6.882' ry='6.873'/%3E%3Cellipse cx='279' cy='54.458' fill='url(%23c)' rx='4.765' ry='4.758'/%3E%3Cellipse cx='279' cy='51.814' fill='url(%23d)' rx='1.588' ry='1.057'/%3E%3Cellipse cx='279' cy='56.573' fill='url(%23e)' rx='1.588' ry='1.586'/%3E%3Cdefs%3E%3CradialGradient id='b' cx='0' cy='0' r='1' gradientTransform='matrix(0 6.87331 -15.3915 0 279 54.458)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23111524' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23111524'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='0' cy='0' r='1' gradientTransform='matrix(0 4.75845 -4.76471 0 279 54.458)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2303010D'/%3E%3Cstop offset='1' stop-color='%23081447'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='0' cy='0' r='1' gradientTransform='matrix(0 1.05743 -1.58824 0 279 51.814)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%235163A7'/%3E%3Cstop offset='1' stop-color='%231C1962'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='1' gradientTransform='matrix(0 1.58615 -1.58824 0 279 56.573)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23235965'/%3E%3Cstop offset='.616' stop-color='%230E3149'/%3E%3Cstop offset='1' stop-color='%23001736'/%3E%3C/radialGradient%3E%3ClinearGradient id='a' x1='234' x2='234' y1='7.402' y2='11.632' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230A0806'/%3E%3Cstop offset='1' stop-color='%232D2D2D'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
  }
  .demo-iframe-container.mobile .demo-iframe {
    border-radius: 52px;
  }
  .demo-iframe-container.tablet {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='921' height='1199' fill='none'%3E%3Cpath fill='url(%23a)' d='M805.875 2.301h51.806v3.452h-51.806z'/%3E%3Cpath fill='url(%23b)' d='M915.244 128.875h41.424v3.454h-41.424z' transform='rotate(-90 915.244 128.875)'/%3E%3Cpath fill='url(%23c)' d='M915.244 181.806h41.424v3.454h-41.424z' transform='rotate(-90 915.244 181.806)'/%3E%3Cpath fill='url(%23d)' fill-rule='evenodd' d='M889.888 10.121c-10.835-5.518-25.02-5.518-53.39-5.518H86.804c-28.37 0-42.554 0-53.39 5.518a50.64 50.64 0 0 0-22.136 22.126C5.756 43.077 5.756 57.255 5.756 85.61v1027.78c0 28.36 0 42.53 5.521 53.36a50.67 50.67 0 0 0 22.137 22.13c10.836 5.52 25.02 5.52 53.39 5.52h749.694c28.37 0 42.555 0 53.39-5.52a50.6 50.6 0 0 0 22.137-22.13c5.521-10.83 5.521-25 5.521-53.36V85.61c0-28.355 0-42.533-5.521-53.363a50.64 50.64 0 0 0-22.137-22.126m-20.284 35.36c-3.448-1.756-7.961-1.756-16.988-1.756H70.686c-9.026 0-13.54 0-16.987 1.756a16.1 16.1 0 0 0-7.043 7.04c-1.757 3.446-1.757 7.957-1.757 16.98V1129.5c0 9.02 0 13.53 1.757 16.98a16.15 16.15 0 0 0 7.043 7.04c3.448 1.75 7.961 1.75 16.988 1.75h781.929c9.026 0 13.54 0 16.988-1.75a16.15 16.15 0 0 0 7.043-7.04c1.757-3.45 1.757-7.96 1.757-16.98V69.5c0-9.022 0-13.533-1.757-16.979a16.1 16.1 0 0 0-7.043-7.04' clip-rule='evenodd'/%3E%3Cpath fill='%231B1B1B' fill-opacity='.2' fill-rule='evenodd' d='M869.675 6.44c-8.389-.686-18.973-.687-33.177-.687H86.804c-14.203 0-24.787.001-33.176.686-8.376.684-14.462 2.044-19.69 4.707A49.5 49.5 0 0 0 12.302 32.77C9.64 37.995 8.278 44.08 7.593 52.45c-.684 8.385-.685 18.963-.685 33.16v1027.78c0 14.2 0 24.77.686 33.16.684 8.37 2.045 14.45 4.71 19.68a49.47 49.47 0 0 0 21.633 21.62c5.229 2.67 11.315 4.03 19.691 4.71 8.39.69 18.973.69 33.176.69h749.694c14.204 0 24.788 0 33.177-.69 8.375-.68 14.462-2.04 19.691-4.71A49.47 49.47 0 0 0 911 1166.23c2.664-5.23 4.024-11.31 4.709-19.68.685-8.39.686-18.96.686-33.16V85.61c0-14.197-.001-24.775-.686-33.16-.684-8.371-2.045-14.455-4.709-19.68a49.5 49.5 0 0 0-21.634-21.624c-5.229-2.663-11.316-4.023-19.691-4.707m-6.379 36.358c2.758.225 4.917.684 6.83 1.658A17.26 17.26 0 0 1 877.673 52c.975 1.912 1.433 4.07 1.659 6.827.223 2.733.223 6.155.223 10.621V1129.55c0 4.47 0 7.89-.223 10.62-.226 2.76-.684 4.92-1.659 6.83a17.22 17.22 0 0 1-7.547 7.54c-1.913.98-4.072 1.44-6.83 1.66-2.735.23-6.158.23-10.626.23H70.632c-4.467 0-7.89 0-10.625-.23-2.759-.22-4.917-.68-6.83-1.66a17.22 17.22 0 0 1-7.547-7.54c-.975-1.91-1.434-4.07-1.659-6.83-.223-2.73-.223-6.15-.223-10.62V69.446c0-4.465 0-7.887.223-10.62.225-2.757.684-4.915 1.659-6.827a17.27 17.27 0 0 1 7.546-7.543c1.914-.974 4.072-1.433 6.831-1.658 2.735-.223 6.158-.223 10.627-.223h782.035c4.468 0 7.892 0 10.627.223M836.498 4.603c28.37 0 42.555 0 53.39 5.518a50.64 50.64 0 0 1 22.137 22.126c5.521 10.83 5.521 25.008 5.521 53.363v1027.78c0 28.36 0 42.53-5.521 53.36a50.6 50.6 0 0 1-22.137 22.13c-10.835 5.52-25.02 5.52-53.39 5.52H86.804c-28.37 0-42.554 0-53.39-5.52a50.67 50.67 0 0 1-22.137-22.13c-5.52-10.83-5.52-25-5.52-53.36V85.61c0-28.355 0-42.533 5.52-53.363A50.64 50.64 0 0 1 33.415 10.12c10.836-5.518 25.02-5.518 53.39-5.518zm16.118 39.122c9.027 0 13.54 0 16.988 1.756a16.1 16.1 0 0 1 7.043 7.04c1.757 3.446 1.757 7.957 1.757 16.98V1129.5c0 9.02 0 13.53-1.757 16.98a16.15 16.15 0 0 1-7.043 7.04c-3.448 1.75-7.962 1.75-16.988 1.75H70.686c-9.026 0-13.54 0-16.987-1.75a16.15 16.15 0 0 1-7.043-7.04c-1.757-3.45-1.757-7.96-1.757-16.98V69.5c0-9.022 0-13.533 1.757-16.979a16.1 16.1 0 0 1 7.043-7.04c3.448-1.756 7.961-1.756 16.988-1.756z' clip-rule='evenodd'/%3E%3Cpath fill='url(%23e)' fill-rule='evenodd' d='M887.692 13.322c-10.343-5.267-23.883-5.267-50.963-5.267H86.574c-27.08 0-40.62 0-50.963 5.267a48.34 48.34 0 0 0-21.13 21.12C9.21 44.78 9.21 58.313 9.21 85.38v1028.24c0 27.07 0 40.6 5.27 50.94a48.4 48.4 0 0 0 21.13 21.12c10.343 5.27 23.883 5.27 50.963 5.27H836.73c27.08 0 40.62 0 50.963-5.27a48.4 48.4 0 0 0 21.131-21.12c5.27-10.34 5.27-23.87 5.27-50.94V85.38c0-27.066 0-40.6-5.27-50.938a48.34 48.34 0 0 0-21.131-21.12' clip-rule='evenodd'/%3E%3Cellipse cx='461.55' cy='25.875' fill='url(%23f)' rx='5.529' ry='5.526' transform='rotate(-180 461.55 25.875)'/%3E%3Cellipse cx='461.55' cy='25.874' fill='url(%23g)' rx='3.578' ry='3.576'/%3E%3Cg filter='url(%23h)'%3E%3Cpath fill='url(%23i)' d='M461.224 22.952c-.69 0-1.351.308-1.839.856a3.12 3.12 0 0 0-.762 2.07c0 .775.274 1.52.762 2.068s1.149.857 1.839.857v-5.851'/%3E%3C/g%3E%3Cg filter='url(%23j)'%3E%3Cellipse cx='460.9' cy='24.573' fill='%2350326D' rx='.976' ry='.975'/%3E%3C/g%3E%3Cg filter='url(%23k)'%3E%3Cpath fill='url(%23l)' d='M461.876 28.802c.69 0 1.352-.309 1.839-.857a3.12 3.12 0 0 0 .763-2.069 3.12 3.12 0 0 0-.763-2.069c-.487-.548-1.149-.857-1.839-.857v5.852'/%3E%3C/g%3E%3Cg filter='url(%23m)'%3E%3Cellipse cx='462.2' cy='27.175' fill='url(%23n)' rx='.976' ry='.975'/%3E%3C/g%3E%3Cellipse cx='433.906' cy='25.55' fill='%23000' rx='8.456' ry='8.452'/%3E%3Cellipse cx='403.335' cy='25.55' fill='%23000' rx='8.456' ry='8.452'/%3E%3Cellipse cx='516.515' cy='25.55' fill='%23000' rx='8.456' ry='8.452'/%3E%3Cellipse cx='491.472' cy='25.878' fill='%23000' rx='2.277' ry='2.275'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='805.875' x2='857.681' y1='3.836' y2='3.836' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B0B0B0'/%3E%3Cstop offset='.089' stop-color='%23636363'/%3E%3Cstop offset='.177' stop-color='%23C2C2C2'/%3E%3Cstop offset='.75' stop-color='%23C2C2C2'/%3E%3Cstop offset='.865' stop-color='%23EFEEEE'/%3E%3Cstop offset='1' stop-color='%236C6C6C'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='915.244' x2='956.668' y1='130.41' y2='130.41' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B0B0B0'/%3E%3Cstop offset='.089' stop-color='%23636363'/%3E%3Cstop offset='.177' stop-color='%23C2C2C2'/%3E%3Cstop offset='.75' stop-color='%23C2C2C2'/%3E%3Cstop offset='.865' stop-color='%23EFEEEE'/%3E%3Cstop offset='1' stop-color='%236C6C6C'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='915.244' x2='956.668' y1='183.341' y2='183.341' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B0B0B0'/%3E%3Cstop offset='.089' stop-color='%23636363'/%3E%3Cstop offset='.177' stop-color='%23C2C2C2'/%3E%3Cstop offset='.75' stop-color='%23C2C2C2'/%3E%3Cstop offset='.865' stop-color='%23EFEEEE'/%3E%3Cstop offset='1' stop-color='%236C6C6C'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='889.053' x2='-158.011' y1='4.603' y2='202.805' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23BBB'/%3E%3Cstop offset='1' stop-color='%23828483'/%3E%3C/linearGradient%3E%3ClinearGradient id='e' x1='914.093' x2='9.21' y1='599.5' y2='599.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%231F1F1F'/%3E%3Cstop offset='1' stop-color='%230F0F0F'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='456.997' x2='465.776' y1='22.949' y2='28.154' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23222'/%3E%3Cstop offset='1' stop-color='%230B0B0B'/%3E%3C/linearGradient%3E%3ClinearGradient id='i' x1='459.273' x2='460.898' y1='23.602' y2='28.803' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2320569B'/%3E%3Cstop offset='1' stop-color='%23061127'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='463.827' x2='462.202' y1='28.151' y2='22.95' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233D6495'/%3E%3Cstop offset='1' stop-color='%23061127'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='463.501' x2='462.201' y1='27.826' y2='26.2' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233291AF'/%3E%3Cstop offset='1' stop-color='%233291AF' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='h' width='5.635' height='8.884' x='457.106' y='21.435' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_2519_103' stdDeviation='.758'/%3E%3C/filter%3E%3Cfilter id='j' width='6.5' height='6.5' x='457.65' y='21.323' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_2519_103' stdDeviation='1.137'/%3E%3C/filter%3E%3Cfilter id='k' width='5.635' height='8.884' x='460.359' y='21.434' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_2519_103' stdDeviation='.758'/%3E%3C/filter%3E%3Cfilter id='m' width='3.468' height='3.467' x='460.466' y='25.442' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_2519_103' stdDeviation='.379'/%3E%3C/filter%3E%3CradialGradient id='g' cx='0' cy='0' r='1' gradientTransform='rotate(37.861 193.528 685.642)scale(3.70746 3.7344)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23152457'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: 12px;
  }
  .demo-iframe-container.tablet .demo-iframe {
    border-radius: 21px;
  }
}
@media (min-width: 1025px) {
  .demo-iframe-container .demo-iframe-container.desktop {
    background-image: none !important;
  }
  .demo-iframe-container .demo-iframe-container.tablet {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='921' height='1199' fill='none'%3E%3Cpath fill='url(%23a)' d='M805.875 2.301h51.806v3.452h-51.806z'/%3E%3Cpath fill='url(%23b)' d='M915.244 128.875h41.424v3.454h-41.424z' transform='rotate(-90 915.244 128.875)'/%3E%3Cpath fill='url(%23c)' d='M915.244 181.806h41.424v3.454h-41.424z' transform='rotate(-90 915.244 181.806)'/%3E%3Cpath fill='url(%23d)' fill-rule='evenodd' d='M889.888 10.121c-10.835-5.518-25.02-5.518-53.39-5.518H86.804c-28.37 0-42.554 0-53.39 5.518a50.64 50.64 0 0 0-22.136 22.126C5.756 43.077 5.756 57.255 5.756 85.61v1027.78c0 28.36 0 42.53 5.521 53.36a50.67 50.67 0 0 0 22.137 22.13c10.836 5.52 25.02 5.52 53.39 5.52h749.694c28.37 0 42.555 0 53.39-5.52a50.6 50.6 0 0 0 22.137-22.13c5.521-10.83 5.521-25 5.521-53.36V85.61c0-28.355 0-42.533-5.521-53.363a50.64 50.64 0 0 0-22.137-22.126m-20.284 35.36c-3.448-1.756-7.961-1.756-16.988-1.756H70.686c-9.026 0-13.54 0-16.987 1.756a16.1 16.1 0 0 0-7.043 7.04c-1.757 3.446-1.757 7.957-1.757 16.98V1129.5c0 9.02 0 13.53 1.757 16.98a16.15 16.15 0 0 0 7.043 7.04c3.448 1.75 7.961 1.75 16.988 1.75h781.929c9.026 0 13.54 0 16.988-1.75a16.15 16.15 0 0 0 7.043-7.04c1.757-3.45 1.757-7.96 1.757-16.98V69.5c0-9.022 0-13.533-1.757-16.979a16.1 16.1 0 0 0-7.043-7.04' clip-rule='evenodd'/%3E%3Cpath fill='%231B1B1B' fill-opacity='.2' fill-rule='evenodd' d='M869.675 6.44c-8.389-.686-18.973-.687-33.177-.687H86.804c-14.203 0-24.787.001-33.176.686-8.376.684-14.462 2.044-19.69 4.707A49.5 49.5 0 0 0 12.302 32.77C9.64 37.995 8.278 44.08 7.593 52.45c-.684 8.385-.685 18.963-.685 33.16v1027.78c0 14.2 0 24.77.686 33.16.684 8.37 2.045 14.45 4.71 19.68a49.47 49.47 0 0 0 21.633 21.62c5.229 2.67 11.315 4.03 19.691 4.71 8.39.69 18.973.69 33.176.69h749.694c14.204 0 24.788 0 33.177-.69 8.375-.68 14.462-2.04 19.691-4.71A49.47 49.47 0 0 0 911 1166.23c2.664-5.23 4.024-11.31 4.709-19.68.685-8.39.686-18.96.686-33.16V85.61c0-14.197-.001-24.775-.686-33.16-.684-8.371-2.045-14.455-4.709-19.68a49.5 49.5 0 0 0-21.634-21.624c-5.229-2.663-11.316-4.023-19.691-4.707m-6.379 36.358c2.758.225 4.917.684 6.83 1.658A17.26 17.26 0 0 1 877.673 52c.975 1.912 1.433 4.07 1.659 6.827.223 2.733.223 6.155.223 10.621V1129.55c0 4.47 0 7.89-.223 10.62-.226 2.76-.684 4.92-1.659 6.83a17.22 17.22 0 0 1-7.547 7.54c-1.913.98-4.072 1.44-6.83 1.66-2.735.23-6.158.23-10.626.23H70.632c-4.467 0-7.89 0-10.625-.23-2.759-.22-4.917-.68-6.83-1.66a17.22 17.22 0 0 1-7.547-7.54c-.975-1.91-1.434-4.07-1.659-6.83-.223-2.73-.223-6.15-.223-10.62V69.446c0-4.465 0-7.887.223-10.62.225-2.757.684-4.915 1.659-6.827a17.27 17.27 0 0 1 7.546-7.543c1.914-.974 4.072-1.433 6.831-1.658 2.735-.223 6.158-.223 10.627-.223h782.035c4.468 0 7.892 0 10.627.223M836.498 4.603c28.37 0 42.555 0 53.39 5.518a50.64 50.64 0 0 1 22.137 22.126c5.521 10.83 5.521 25.008 5.521 53.363v1027.78c0 28.36 0 42.53-5.521 53.36a50.6 50.6 0 0 1-22.137 22.13c-10.835 5.52-25.02 5.52-53.39 5.52H86.804c-28.37 0-42.554 0-53.39-5.52a50.67 50.67 0 0 1-22.137-22.13c-5.52-10.83-5.52-25-5.52-53.36V85.61c0-28.355 0-42.533 5.52-53.363A50.64 50.64 0 0 1 33.415 10.12c10.836-5.518 25.02-5.518 53.39-5.518zm16.118 39.122c9.027 0 13.54 0 16.988 1.756a16.1 16.1 0 0 1 7.043 7.04c1.757 3.446 1.757 7.957 1.757 16.98V1129.5c0 9.02 0 13.53-1.757 16.98a16.15 16.15 0 0 1-7.043 7.04c-3.448 1.75-7.962 1.75-16.988 1.75H70.686c-9.026 0-13.54 0-16.987-1.75a16.15 16.15 0 0 1-7.043-7.04c-1.757-3.45-1.757-7.96-1.757-16.98V69.5c0-9.022 0-13.533 1.757-16.979a16.1 16.1 0 0 1 7.043-7.04c3.448-1.756 7.961-1.756 16.988-1.756z' clip-rule='evenodd'/%3E%3Cpath fill='url(%23e)' fill-rule='evenodd' d='M887.692 13.322c-10.343-5.267-23.883-5.267-50.963-5.267H86.574c-27.08 0-40.62 0-50.963 5.267a48.34 48.34 0 0 0-21.13 21.12C9.21 44.78 9.21 58.313 9.21 85.38v1028.24c0 27.07 0 40.6 5.27 50.94a48.4 48.4 0 0 0 21.13 21.12c10.343 5.27 23.883 5.27 50.963 5.27H836.73c27.08 0 40.62 0 50.963-5.27a48.4 48.4 0 0 0 21.131-21.12c5.27-10.34 5.27-23.87 5.27-50.94V85.38c0-27.066 0-40.6-5.27-50.938a48.34 48.34 0 0 0-21.131-21.12' clip-rule='evenodd'/%3E%3Cellipse cx='461.55' cy='25.875' fill='url(%23f)' rx='5.529' ry='5.526' transform='rotate(-180 461.55 25.875)'/%3E%3Cellipse cx='461.55' cy='25.874' fill='url(%23g)' rx='3.578' ry='3.576'/%3E%3Cg filter='url(%23h)'%3E%3Cpath fill='url(%23i)' d='M461.224 22.952c-.69 0-1.351.308-1.839.856a3.12 3.12 0 0 0-.762 2.07c0 .775.274 1.52.762 2.068s1.149.857 1.839.857v-5.851'/%3E%3C/g%3E%3Cg filter='url(%23j)'%3E%3Cellipse cx='460.9' cy='24.573' fill='%2350326D' rx='.976' ry='.975'/%3E%3C/g%3E%3Cg filter='url(%23k)'%3E%3Cpath fill='url(%23l)' d='M461.876 28.802c.69 0 1.352-.309 1.839-.857a3.12 3.12 0 0 0 .763-2.069 3.12 3.12 0 0 0-.763-2.069c-.487-.548-1.149-.857-1.839-.857v5.852'/%3E%3C/g%3E%3Cg filter='url(%23m)'%3E%3Cellipse cx='462.2' cy='27.175' fill='url(%23n)' rx='.976' ry='.975'/%3E%3C/g%3E%3Cellipse cx='433.906' cy='25.55' fill='%23000' rx='8.456' ry='8.452'/%3E%3Cellipse cx='403.335' cy='25.55' fill='%23000' rx='8.456' ry='8.452'/%3E%3Cellipse cx='516.515' cy='25.55' fill='%23000' rx='8.456' ry='8.452'/%3E%3Cellipse cx='491.472' cy='25.878' fill='%23000' rx='2.277' ry='2.275'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='805.875' x2='857.681' y1='3.836' y2='3.836' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B0B0B0'/%3E%3Cstop offset='.089' stop-color='%23636363'/%3E%3Cstop offset='.177' stop-color='%23C2C2C2'/%3E%3Cstop offset='.75' stop-color='%23C2C2C2'/%3E%3Cstop offset='.865' stop-color='%23EFEEEE'/%3E%3Cstop offset='1' stop-color='%236C6C6C'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='915.244' x2='956.668' y1='130.41' y2='130.41' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B0B0B0'/%3E%3Cstop offset='.089' stop-color='%23636363'/%3E%3Cstop offset='.177' stop-color='%23C2C2C2'/%3E%3Cstop offset='.75' stop-color='%23C2C2C2'/%3E%3Cstop offset='.865' stop-color='%23EFEEEE'/%3E%3Cstop offset='1' stop-color='%236C6C6C'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='915.244' x2='956.668' y1='183.341' y2='183.341' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B0B0B0'/%3E%3Cstop offset='.089' stop-color='%23636363'/%3E%3Cstop offset='.177' stop-color='%23C2C2C2'/%3E%3Cstop offset='.75' stop-color='%23C2C2C2'/%3E%3Cstop offset='.865' stop-color='%23EFEEEE'/%3E%3Cstop offset='1' stop-color='%236C6C6C'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='889.053' x2='-158.011' y1='4.603' y2='202.805' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23BBB'/%3E%3Cstop offset='1' stop-color='%23828483'/%3E%3C/linearGradient%3E%3ClinearGradient id='e' x1='914.093' x2='9.21' y1='599.5' y2='599.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%231F1F1F'/%3E%3Cstop offset='1' stop-color='%230F0F0F'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='456.997' x2='465.776' y1='22.949' y2='28.154' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23222'/%3E%3Cstop offset='1' stop-color='%230B0B0B'/%3E%3C/linearGradient%3E%3ClinearGradient id='i' x1='459.273' x2='460.898' y1='23.602' y2='28.803' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2320569B'/%3E%3Cstop offset='1' stop-color='%23061127'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='463.827' x2='462.202' y1='28.151' y2='22.95' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233D6495'/%3E%3Cstop offset='1' stop-color='%23061127'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='463.501' x2='462.201' y1='27.826' y2='26.2' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233291AF'/%3E%3Cstop offset='1' stop-color='%233291AF' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='h' width='5.635' height='8.884' x='457.106' y='21.435' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_2519_103' stdDeviation='.758'/%3E%3C/filter%3E%3Cfilter id='j' width='6.5' height='6.5' x='457.65' y='21.323' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_2519_103' stdDeviation='1.137'/%3E%3C/filter%3E%3Cfilter id='k' width='5.635' height='8.884' x='460.359' y='21.434' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_2519_103' stdDeviation='.758'/%3E%3C/filter%3E%3Cfilter id='m' width='3.468' height='3.467' x='460.466' y='25.442' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_2519_103' stdDeviation='.379'/%3E%3C/filter%3E%3CradialGradient id='g' cx='0' cy='0' r='1' gradientTransform='rotate(37.861 193.528 685.642)scale(3.70746 3.7344)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23152457'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 50px;
    width: auto !important;
    height: auto !important;
  }
  .demo-iframe-container .demo-iframe-container.mobile {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='468' height='939' fill='none'%3E%3Crect width='458.412' height='937.885' x='4.794' y='.557' fill='%23DFD2CF' stroke='%23121511' rx='70.5'/%3E%3Crect width='453.176' height='932.655' x='7.412' y='3.172' fill='%234E4A49' rx='69'/%3E%3Crect width='444.706' height='924.196' x='11.648' y='7.402' fill='%23000' rx='65'/%3E%3Cpath fill='url(%23a)' d='M189.529 7.402h88.941a4.23 4.23 0 0 1-4.229 4.23h-80.482a4.23 4.23 0 0 1-4.23-4.23'/%3E%3Cpath fill='%238E8A87' stroke='%23514D4A' stroke-width='.5' d='M1 181.071h2.985v34.396H1a.75.75 0 0 1-.75-.75v-32.896a.75.75 0 0 1 .75-.75Z'/%3E%3Cpath fill='%235C5A57' d='M2.117 182.936h2.118v30.666H2.117z'/%3E%3Cpath fill='%23312E2B' d='M4.235 182.936H3.176v30.666h1.06z'/%3E%3Cpath fill='%230C0A09' d='M2.117 213.601h2.118v1.057H2.117zM2.117 182.936h2.118v1.057H2.117z'/%3E%3Cpath fill='%238E8A87' stroke='%23514D4A' stroke-width='.5' d='M1 247.689h2.985v68.234H1a.75.75 0 0 1-.75-.75v-66.734a.75.75 0 0 1 .75-.75Z'/%3E%3Cpath fill='%235C5A57' d='M2.117 251.605h2.118v60.402H2.117z'/%3E%3Cpath fill='%23312E2B' d='M4.235 251.605H3.176v60.402h1.06z'/%3E%3Cpath fill='%230C0A09' d='M2.117 310.949h2.118v2.083H2.117zM2.117 251.605h2.118v2.083H2.117z'/%3E%3Cpath fill='%238E8A87' stroke='%23514D4A' stroke-width='.5' d='M467 401.574h-2.985V296.331H467a.75.75 0 0 1 .75.75v103.743a.75.75 0 0 1-.75.75Z'/%3E%3Cpath fill='%235C5A57' d='M465.882 395.416h-2.118V302.49h2.118z'/%3E%3Cpath fill='%23312E2B' d='M463.765 395.416h1.059V302.49h-1.059z'/%3E%3Cpath fill='%230C0A09' d='M465.882 304.117h-2.118v-3.204h2.118zM465.882 395.416h-2.118v-3.204h2.118z'/%3E%3Cpath fill='%238E8A87' stroke='%23514D4A' stroke-width='.5' d='M1 337.571h2.985v68.233H1a.75.75 0 0 1-.75-.75v-66.733a.75.75 0 0 1 .75-.75Z'/%3E%3Cpath fill='%235C5A57' d='M2.117 341.487h2.118v60.402H2.117z'/%3E%3Cpath fill='%23312E2B' d='M4.235 341.487H3.176v60.402h1.06z'/%3E%3Cpath fill='%230C0A09' d='M2.117 400.831h2.118v2.083H2.117zM2.117 341.487h2.118v2.083H2.117z'/%3E%3Cpath fill='%2331302E' d='M4.235 99.399h7.412v6.345H4.235z'/%3E%3Cpath fill='%234C4948' d='M4.235 99.399h2.471v6.345H4.235z'/%3E%3Cpath fill='%2331302E' d='M4.235 833.257h7.412v6.345H4.235z'/%3E%3Cpath fill='%234C4948' d='M4.235 833.257h2.471v6.345H4.235z'/%3E%3Cpath fill='%2331302E' d='M463.765 839.601h-7.412v-6.345h7.412z'/%3E%3Cpath fill='%234C4948' d='M463.765 839.601h-2.471v-6.345h2.471z'/%3E%3Cpath fill='%2331302E' d='M463.765 105.743h-7.412v-6.345h7.412z'/%3E%3Cpath fill='%234C4948' d='M463.765 105.743h-2.471v-6.345h2.471z'/%3E%3Cpath fill='%2331302E' d='M364.235 0v7.402h-6.353V0z'/%3E%3Cpath fill='%234C4948' d='M364.235 0v2.467h-6.353V0z'/%3E%3Cpath fill='%2331302E' d='M103.765 939v-7.402h6.353V939z'/%3E%3Cpath fill='%234C4948' d='M103.765 939v-2.467h6.353V939z'/%3E%3Crect width='127.059' height='37.01' x='170.471' y='35.953' fill='%23040404' rx='17.5'/%3E%3Cellipse cx='279' cy='54.458' fill='url(%23b)' rx='6.882' ry='6.873'/%3E%3Cellipse cx='279' cy='54.458' fill='url(%23c)' rx='4.765' ry='4.758'/%3E%3Cellipse cx='279' cy='51.814' fill='url(%23d)' rx='1.588' ry='1.057'/%3E%3Cellipse cx='279' cy='56.573' fill='url(%23e)' rx='1.588' ry='1.586'/%3E%3Cdefs%3E%3CradialGradient id='b' cx='0' cy='0' r='1' gradientTransform='matrix(0 6.87331 -15.3915 0 279 54.458)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23111524' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23111524'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='0' cy='0' r='1' gradientTransform='matrix(0 4.75845 -4.76471 0 279 54.458)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2303010D'/%3E%3Cstop offset='1' stop-color='%23081447'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='0' cy='0' r='1' gradientTransform='matrix(0 1.05743 -1.58824 0 279 51.814)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%235163A7'/%3E%3Cstop offset='1' stop-color='%231C1962'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='1' gradientTransform='matrix(0 1.58615 -1.58824 0 279 56.573)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23235965'/%3E%3Cstop offset='.616' stop-color='%230E3149'/%3E%3Cstop offset='1' stop-color='%23001736'/%3E%3C/radialGradient%3E%3ClinearGradient id='a' x1='234' x2='234' y1='7.402' y2='11.632' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230A0806'/%3E%3Cstop offset='1' stop-color='%232D2D2D'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 48px 32px;
    width: auto !important;
    height: auto !important;
  }
}
@media (max-width: 768px) {
  .demo-iframe-container {
    width: 100% !important;
    height: 100vh;
    padding: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
  }
  .demo-iframe-container .demo-iframe {
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .toolbar-container {
    flex-direction: column;
  }
  .demo-create-btn {
    width: 100%;
    text-align: center;
  }
}
@media (min-width: 768px) {
  .demo-device-container {
    display: flex;
    gap: 12px;
    background-color: var(--main-bg-color);
    justify-content: center;
    align-items: center;
  }
  .demo-device-container button {
    display: block;
    width: 32px;
    height: 32px;
    background-color: var(--main-bg-color);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .demo-device-container button:hover {
    background-color: #EDF0F5;
    border-radius: 4px;
  }
  .demo-device-container button.active {
    background-color: #EDF0F5;
    border-radius: 4px;
    pointer-events: none;
    cursor: default;
  }
}
.container-category-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--secondary-bg-color);
}

.category-info_text_box {
  max-width: 800px;
}

.category-info_text {
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: 1.33;
  text-align: left;
  color: var(--main-text-color);
}

.category-main-box {
  max-width: 910px;
}

.category-main-box h1 {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: left;
  color: var(--main-accent-color);
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .category-main-box {
    max-width: 910px;
    width: 75%;
  }
  .category-main-box h1 {
    font-size: 48px;
    line-height: 1.1;
    margin-top: 32px;
    margin-bottom: 8px;
  }
}
@media (min-width: 1050px) {
  .category-main-box {
    max-width: 70%;
  }
}
@media (min-width: 1440px) {
  .category-main-box h1 {
    font-size: 56px;
  }
  .category-main-box {
    max-width: 1010px;
    width: 100%;
  }
}
.container-category-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--secondary-bg-color);
}

.main_search {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
  max-width: 1440px;
  padding-top: 80px;
}

@media (max-width: 480px) {
  .main_search {
    max-width: 480px;
    padding: 0 24px;
  }
}
@media (min-width: 480.99px) {
  .main_search {
    padding: 72px 36px 0 36px;
  }
}
@media (min-width: 992px) {
  .main_search {
    padding: 72px 36px 0;
    margin-bottom: 40px;
  }
}
@media (min-width: 1280px) {
  .main_search {
    padding: 72px 100px 0 100px;
    margin-bottom: 40px;
    max-width: 1440px;
    width: 100%;
  }
}
.category-info_text_box {
  max-width: 800px;
  margin-bottom: 24px;
}

.category-info_text {
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: 1.33;
  text-align: left;
  color: var(--main-text-color);
}

.category-info_text_search {
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: 1.33;
  text-align: left;
  color: var(--main-text-color);
  margin-bottom: 20px;
}

.category-main-box {
  max-width: 910px;
}

.category-main-box h1 {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: left;
  color: var(--main-accent-color);
  margin-bottom: 8px;
}

.category-info_h1 {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: left;
  color: var(--main-accent-color);
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .category-main-box {
    max-width: 910px;
    width: 75%;
  }
  .category-main-box h1 {
    font-size: 48px;
    line-height: 1.1;
    margin-top: 32px;
    margin-bottom: 8px;
  }
}
@media (min-width: 1050px) {
  .category-main-box {
    max-width: 70%;
  }
}
@media (min-width: 1440px) {
  .category-main-box h1 {
    font-size: 56px;
  }
  .category-main-box {
    max-width: 910px;
    width: 100%;
  }
}
.search-tips-box {
  margin-top: 48px;
  padding: 24px 32px 25px;
  border-radius: 16px;
  background: #EFF3FE;
  border: 1px solid #D4E0FD;
}

.box-popular-suggestions {
  display: flex;
  justify-content: flex-start;
  margin-top: 45px;
  align-items: center;
  gap: 12px;
}

.popular-suggestions-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  color: var(--main-accent-color);
}

.popular-suggestions-text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}

.popular-suggestions-list {
  margin-top: 20px;
}

.popular-suggestions-list_item {
  margin-bottom: 12px;
  margin-left: 25px;
}

.zero-page-h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  color: #464C5C;
  margin-top: 48px;
}

.support-box-zero-page {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
}

.category-banner-box {
  margin-top: 70px;
}

.search-info {
  margin-bottom: 48px;
}

@media (max-width: 767px) {
  .mobile-sidebar-nav-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    padding: 55px 24px 0;
  }
  .category-info {
    margin-top: 160px;
  }
}
.hero-templates-page {
  background: var(--main-accent-color);
  color: var(--main-bg-color);
  margin-top: 65px;
  box-sizing: border-box;
}

.hero-content-box {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 54px;
  padding: 64px 24px 0;
}

.hero_img_box {
  padding-bottom: 56px;
  background: transparent;
}

.hero-content-text {
  max-width: 593px;
  width: 100%;
  box-sizing: border-box;
}

.hero-list-advantages {
  max-width: 291px;
  width: 100%;
  padding: 0;
  margin-bottom: 21px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.hero-text-main {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  text-align: left;
  color: var(--main-bg-color);
}

.hero-content-text h1 {
  font-size: 48px;
  font-weight: var(--font-weight-bold);
  line-height: 1.08;
  text-align: left;
  color: var(--main-bg-color);
  margin-bottom: 14px;
  margin-top: 64px;
}

@media (min-width: 768px) {
  .hero-templates-page {
    margin-top: 70px;
  }
  .hero-content-text_box {
    max-width: 381px;
    padding: 0;
  }
  .hero-content-box {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 80px 36px 57px;
    gap: 37px;
  }
  .hero_img_box {
    padding: 0;
    max-width: 340px;
  }
  .hero-list-advantages {
    margin-bottom: 24px;
  }
  .hero-text-main {
    font-size: 16px;
    line-height: 1.5;
  }
  .hero-content-text h1 {
    margin-bottom: 14px;
    margin-top: 0;
  }
}
@media (min-width: 834px) {
  .hero-text-main {
    font-size: 18px;
    line-height: 1.33;
  }
  .hero-content-text_box {
    max-width: 425px;
  }
}
@media (min-width: 920px) {
  .hero_img_box {
    max-width: 586px;
  }
  .hero-list-advantages {
    margin-bottom: 32px;
  }
}
@media (min-width: 1220px) {
  .hero-content-box {
    padding: 120px 100px;
  }
  .hero-content-text h1 {
    font-size: 56px;
    line-height: 1.1;
    margin-bottom: 20px;
  }
  .hero-content-text_box {
    margin-bottom: 16px;
  }
  .hero-list-advantages {
    margin-bottom: 20px;
    max-width: 532px;
    width: 100%;
  }
  .hero-content-text h5 {
    margin-top: 16px;
  }
}
@media (min-width: 1440px) {
  .hero-content-text_box {
    max-width: 562px;
  }
  .hero-content-box {
    max-width: 1440px;
    margin: 0 auto;
  }
}
.hero-content-text_box {
  margin-bottom: 20px;
}

.hero-list-item {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.hero-text-item {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 1.42;
  text-align: left;
  color: var(--main-bg-color);
}

.hero-text-mini {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  text-align: left;
  color: var(--hero-content-text);
}

.container-video-block {
  max-width: 1200px;
  width: 100%;
}

.container-video-block_box {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px;
}

.category-video,
.tag-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.container-video-block h2 {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: left;
  color: var(--main-accent-color);
  margin-bottom: 16px;
}

.container-video-block p {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  text-align: left;
  color: var(--main-text-color);
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .container-video-block_box {
    margin-bottom: 64px;
  }
  .container-video-block h2 {
    font-size: 48px;
    line-height: 1.16;
    margin-bottom: 16px;
  }
  .container-video-block {
    max-width: 1200px;
    margin: 0 auto;
  }
  .container-video-block p {
    margin-bottom: 48px;
  }
  .container-video-block_box {
    margin-bottom: 100px;
    box-shadow: var(--related-box-shadow);
  }
}
/* Containers styles */
.container-templates-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--secondary-bg-color);
  padding: 0 24px;
}

.main-templates {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1440px;
}

.templates-main-box,
.category-main-box {
  width: 100%;
}

.box_mobile-main {
  margin-top: 25px;
}

@media (min-width: 768px) {
  .templates-main-box {
    max-width: 60%;
  }
  .container-templates-page {
    padding: 0 36px;
  }
}
@media (min-width: 1050px) {
  .templates-main-box {
    max-width: 70%;
  }
  .main-templates {
    margin: 0 auto;
  }
}
@media (min-width: 1220px) {
  .container-templates-page {
    padding: 0 100px;
  }
}
@media (min-width: 1280px) {
  .templates-main-box {
    max-width: 75%;
  }
}
@media (min-width: 1440px) {
  .templates-main-box {
    max-width: 910px;
    padding-bottom: 20px;
  }
}
.templates-main-box h1 {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: left;
  color: var(--main-accent-color);
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .templates-main-box h1 {
    font-size: 48px;
    line-height: 1.16;
    margin-top: 32px;
    margin-bottom: 38px;
  }
}
@media (min-width: 1220px) {
  .templates-main-box h1 {
    font-size: 53px;
    line-height: 1.16;
    margin-top: 32px;
    margin-bottom: 38px;
  }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.hero-template {
  background: var(--main-bg-color);
}

@media (max-width: 480px) {
  .hero-template {
    padding-top: 32px;
  }
}
@media (min-width: 768px) {
  .hero-template {
    padding-right: 36px;
  }
  .template_page_title {
    margin-bottom: 23px;
  }
  .hero-template-title_box {
    margin-top: 36px;
  }
}
@media (mim-width: 1440px) {
  .hero-template {
    padding: 0 100px 0 100px;
  }
  .template_page_title {
    margin-bottom: 32px;
  }
  .hero-template-title_box {
    margin-top: 58px;
  }
}
.hero-template-title_box {
  margin-top: 32px;
  word-break: break-word;
}

.template_page_title {
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: var(font-weight-bold);
  line-height: 1.14;
  text-align: left;
  color: var(--main-accent-color);
  word-break: break-word;
}

.card-image {
  position: relative;
}

.card-preview {
  width: 800px;
  background: var(--main-bg-color);
  border-radius: 15px;
  border: 2px solid var(--main-bg-color);
  box-shadow: var(--card-preview-box-shadow);
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .card-preview {
    margin-bottom: 32px;
  }
}
@media (max-width: 1440px) {
  .card-preview {
    width: auto;
  }
}
.card-preview .collar {
  margin-bottom: 0;
}

.card-preview .collar::before {
  font-size: 45px;
  top: 0;
  left: 25px;
  user-select: none;
}

.card-preview .card-bg,
.card-preview .card-image {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  transition: all var(--transition-card-preview);
}

.card-preview .card-bg {
  content: "";
  top: 24px;
}

.card-preview:hover .card-bg,
.card-preview:focus-visible .card-bg,
.card-preview:focus .card-bg {
  opacity: 0.4;
  background: var(--pagination-black-color);
  z-index: 2;
}

.card-preview .card-image {
  z-index: 1;
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.card-preview .live-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: fit-content;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  top: calc(50% + 5px);
  left: 50%;
  transform: translate(-50%, -60%);
  padding: 10px 20px;
  font-size: 16px;
  font-weight: var(font-weight-bold);
  line-height: 1.5;
  text-align: center;
  color: var(--main-bg-color);
  background: var(--card-preview-bg);
  border-radius: 8px;
  text-decoration: none;
  transition: all var(--transition-card-preview);
  border: 2px solid var(--main-bg-color);
}

.card-preview:hover .live-demo {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.card-preview .live-demo:hover {
  color: var(--main-accent-color);
  background: var(--main-bg-color);
}

.template-text_box {
  max-width: 799px;
}

.template-text_box h2 {
  font-size: 28px;
  font-weight: var(font-weight-bold);
  line-height: 1.14;
  text-align: left;
  color: var(--main-accent-color);
  margin-bottom: 16px;
  word-break: break-word;
}

.template-text_box h3 {
  font-size: 20px;
  font-weight: var(font-weight-bold);
  line-height: 1.4;
  text-align: left;
  color: var(--main-accent-color);
  margin-bottom: 16px;
}

.template-text_block {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  text-align: left;
  color: var(--main-text-color);
}

.list_of_colors {
  margin-bottom: 40px;
  padding: 0 1.5rem;
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
}

.ul {
  list-style-type: disc;
}

.ol {
  list-style-type: decimal;
}

.template-updated-data {
  border: transparent;
  border-radius: 4px;
  width: auto;
  padding: 11px 16px;
  background: var(--categories-sidebar-hover);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.template-updated-data_p {
  font-size: 14px;
  font-weight: var(font-weight-bold);
  line-height: 1.28;
  text-align: left;
  color: var(--main-text-color);
  margin: 0;
}

.template-updated-data_span {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.28;
  text-align: left;
  color: var(--main-text-color);
}

.mobile-btn-hero_visible {
  display: flex;
}

.mobile-hero-btn {
  width: 50%;
}

@media (min-width: 767.99px) {
  .mobile-btn-hero_visible {
    display: none;
  }
  .template-updated-data {
    margin-top: 32px;
  }
}
@media (min-width: 768px) {
  .template-text_block {
    margin-bottom: 20px;
  }
  .template-text_box h2 {
    font-size: 28px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .template_page_title {
    margin-bottom: 24px;
    font-size: 48px;
    line-height: 1.16;
  }
  .update-data-box {
    display: block;
    max-width: 300px;
  }
}
.mobile-right-sidebar {
  display: none;
}

.desktop-right-sidebar {
  display: block;
}

.card-content_info {
  background-color: var(--main-bg-color);
  margin-bottom: 61px;
  min-height: 100%;
}

.card-content_advantages_box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}

@media (min-width: 768px) {
  .mobile-right-sidebar {
    display: block;
  }
  .desktop-right-sidebar {
    display: none;
  }
  .card-content_info {
    background: var(--secondary-bg-color);
    margin-bottom: 85px;
    min-height: 760px;
    padding: 0 36px;
    padding-top: 135px;
  }
  .card-content {
    max-width: 40%;
  }
  .card-content_advantages_box {
    margin-bottom: 40px;
  }
}
@media (min-width: 1440px) {
  .card-content_info {
    padding: 93px 40px 0 42px;
  }
}
.card-content_title {
  margin-bottom: 32px;
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1.14;
  text-align: left;
  color: var(--main-text-color);
}

.card-content_check {
  display: flex;
  justify-content: flex-start;
  gap: 11px;
}

.card-content_text {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.37;
  color: var(--main-text-color);
}

.container-template_categories-block {
  padding: 0;
}

@media (min-width: 768px) {
  .info-block_list {
    margin-bottom: 44px;
  }
}
.info-block_title {
  display: block;
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 0.96;
  text-align: left;
  color: var(--main-text-color);
  margin-bottom: 20px;
}

.info-block_list {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  align-items: center;
  margin-bottom: 40px;
}

.info-block_list-social {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 44px;
}

.tag-social-share-mobile {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 16px;
}

.tag-social-share-desktop {
  display: none;
}

@media (min-width: 920px) {
  .tag-social-share-mobile {
    display: none;
  }
  .tag-social-share-desktop {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }
  .tag-navigation-share {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .tag-navigation-share-item {
    max-width: 25px;
    max-height: 25px;
  }
}
.info-block_button {
  cursor: pointer;
}

.category_link {
  display: block;
  padding: 8px 16px;
  border: 1px solid var(--main-text-color);
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  text-align: left;
  color: var(--main-text-color);
  transition: all var(--transition-card-preview);
}
.category_link:hover {
  background: var(--main-text-color);
  color: var(--main-bg-color);
}

.container-template_tags-block,
.container-template_colors-block {
  padding: 0;
}

ul.list_of_colors {
  list-style-type: disc;
}

ol.list {
  list-style-type: decimal;
}

ul.info-block_colors {
  display: flex;
  width: fit-content;
  overflow: hidden;
  border: 1px solid #EDF0F5;
  border-radius: 4px;
  padding: 0;
  margin-bottom: 40px;
}

ul.info-block_colors li {
  list-style: none;
  margin: 0;
  padding: 0;
  content: "";
  display: block;
  width: 48px;
  height: 24px;
}

@media (min-width: 373px) {
  ul.info-block_colors li {
    width: 58px;
  }
}
@media (min-width: 768px) {
  ul.info-block_colors {
    margin-bottom: 44px;
  }
}
ul.info-block_colors li p {
  display: none;
}

ul.info-block_tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

ul.info-block_tags li {
  border: 1px solid #C5CBD6;
  border-radius: 8px;
  font-size: 14px;
  color: #C5CBD6;
  background: #fff;
  transition: all 0.2s ease;
  cursor: default;
  transition: all var(--transition-time-cubic);
}
ul.info-block_tags li > a {
  display: block;
  padding: 8px 16px;
}

ul.info-block_tags li span {
  margin: 0;
  padding: 0;
}

ul.info-block_tags li:hover {
  border-color: #C5CBD6;
  background: #C5CBD6;
  color: #fff;
}

.related-templates-box {
  max-width: 1440px;
  margin-bottom: 48px;
}

.related-templates {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}

.related-template-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: stretch;
}

.related-template-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.related-templates-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--call-action-shadow);
}

.related-template-name {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: center;
  color: var(--main-accent-color);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition-time-header);
}

.related-template-item:hover .related-template-name {
  color: var(--related-template-hover);
}

.related-templates-box .related-templates-title {
  display: block;
  width: 100%;
  max-width: 1165px;
  margin: 64px 0 40px 0;
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-align: left;
  color: var(--main-text-color);
}

.related-template-name {
  padding-top: 21px;
  margin-bottom: 20px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--main-accent-color);
  max-width: 580px;
  margin: 0 auto;
}

.text-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

.btn-container_template {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
  margin-bottom: 56px;
}

.button-main_template,
.button-demo_template {
  padding: 12px 22px;
  flex: 1 1 0;
  white-space: nowrap;
}

@media (min-width: 610px) {
  .related-templates-box {
    margin-bottom: 94px;
  }
  .related-templates {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 42px;
  }
  .related-template-item {
    width: calc((100% - 42px) / 2);
  }
}
@media (min-width: 1220px) {
  .related-templates-box {
    max-width: 1440px;
    margin-bottom: 101px;
  }
  .related-templates {
    gap: 60px;
  }
  .related-template-item {
    width: calc((100% - 180px) / 4);
  }
  .related-template-item a:hover img {
    transform: translateY(-5px);
    box-shadow: var(--related-box-shadow);
  }
  .related-template-item:hover .related-template-name {
    color: var(--related-template-hover);
  }
}
@media (min-width: 1440px) {
  .related-templates-img {
    width: 100%;
    max-width: 265px;
    height: 408px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: var(--call-action-shadow);
  }
  .btn-container_template {
    flex-direction: row;
    margin-bottom: 0;
  }
  .related-templates {
    gap: 60px;
  }
  .related-template-item {
    width: calc((100% - 180px) / 4);
  }
}
.container-social {
  padding: 0;
}

.info-block_list-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-block_list-social li {
  display: flex;
}

.info-block_list-social a,
.info-block_list-social button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  line-height: 0;
}

.copy-link-button .icon-success,
.copy-link-button-tag .icon-success {
  display: none;
}

.copy-link-button .icon-copy,
.copy-link-button-tag .icon-copy {
  display: block;
}

.copy-link-button.copied .icon-success,
.copy-link-button-tag.copied .icon-success {
  display: block;
}

.copy-link-button.copied .icon-copy,
.copy-link-button-tag.copied .icon-copy {
  display: none;
}

.footer-list-social-svg {
  display: block;
}

.share-list-social-svg,
.link-share-icon {
  display: block;
  transition: transform 0.3s ease, fill 0.3s ease;
}

.social-link {
  display: block;
  padding: 1px;
}

.copy-link-button:hover rect,
.copy-link-button-tag:hover rect {
  fill: #7a8293;
  transition: fill 0.3s ease;
}

.copy-link-button.copied rect,
.copy-link-button-tag.copied rect {
  fill: #61A854;
}

.link-share {
  transition: transform 0.3s ease, fill 0.3s ease;
}

.link-share-icon:hover rect,
.share-list-social-svg:hover path {
  fill: #7a8293;
  transition: fill 0.3s ease;
}

.link-share-icon:active rect,
.share-list-social-svg:active path {
  fill: #7a8293;
  transition: fill 0.3s ease;
}

.tags-cloud-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.tags-cloud-box_search {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
}

.tags-cloud {
  padding-top: 24px;
}

.tags-cloud-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  padding-top: 5px;
  padding-left: 4px;
  padding-bottom: 7px;
  overflow: hidden;
  height: 50px;
  position: relative;
}

.tags-cloud-list-search {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  padding-top: 5px;
  padding-left: 2px;
  padding-bottom: 5px;
  overflow: hidden;
  height: 150px;
  position: relative;
}

.cloud-list-main-page {
  margin-bottom: 36px;
}

.expanded {
  height: auto;
}

.expanded-mobile {
  height: auto;
}

@media (min-width: 1220px) {
  .expanded-mobile {
    height: auto;
  }
}
.tags-cloud-item {
  background: #eff4ff;
  border-radius: 8px;
  transition: background var(--transition-time-cubic);
}

.tags-cloud-item:hover {
  background: #e1e8ff;
}

.tags-cloud-span {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--main-accent-color);
}

.tags-cloud-button {
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
  align-items: center;
}

.tags-cloud-button {
  margin-top: 15px;
}

.tag-open-close {
  margin-top: 35px;
}

.cloud-button-main {
  margin-top: 10px;
}

.tags-cloud-list.active {
  display: block;
  opacity: 1;
  visibility: visible;
}

.icon-open {
  display: block;
}

.icon-close {
  display: none;
}

.tags-cloud-buttton.active .icon-open {
  display: none;
}

.tags-cloud-buttton.active .icon-close {
  display: block;
}

.tags-cloud-list.expanded .tags-cloud-item {
  display: flex !important;
}

@media (msn-width: 768px) {
  .tags-tag-page {
    padding-top: 64px;
  }
}
.tag-link {
  display: block;
  padding: 8px 16px;
}

.rating-container {
  margin-bottom: 46px;
}

.rating-total-box {
  display: flex;
  gap: 12px;
  align-items: center;
}

.rating-total {
  display: block;
  font-weight: 600;
  font-size: 48px;
  line-height: 1;
  color: #000000;
  padding: 0;
}

.rating-text {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.16;
  color: #464C5C;
}

.star-partial {
  background-color: #F29130;
  -webkit-mask-image: url("path/to/your/star-shape.svg");
  mask-image: url("path/to/your/star-shape.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.star-partial.fill-50 {
  width: 50%;
  padding-left: 25px;
}

.rating-webliuum-box {
  position: relative;
}

.rating-es {
  margin-top: 85px;
}

.rating-fr {
  margin-top: 48px;
}

.rating-title-weblium {
  display: block;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.33;
  color: var(--main-bg-color);
  margin-bottom: 4px;
}

.rating-text-weblium {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.16;
  color: var(--main-bg-color);
  margin-top: 4px;
}

.rating-line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 55px;
  background-color: #457CFC;
  transform: translateY(-50%);
}

.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1440px;
  padding-top: 80px;
  margin: 0 auto;
  font-style: normal;
}

@media (max-width: 480px) {
  .main {
    max-width: 480px;
    padding: 0 24px;
  }
  .section {
    margin-bottom: 100px;
  }
}
@media (min-width: 480.99px) {
  .main {
    padding: 72px 36px 0 36px;
  }
}
.section {
  display: flex;
  justify-content: space-between;
  max-width: 1600px;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .main {
    padding: 72px 24px 0 24px;
  }
  .section {
    flex-direction: column;
  }
}
@media (min-width: 768px) {
  .main {
    padding: 72px 36px 0;
  }
  .card-content-template-page {
    width: 100%;
    max-width: 328px;
    font-style: normal;
  }
}
@media (min-width: 992px) {
  .main {
    padding: 94px 36px 0 36px;
  }
}
@media (min-width: 1220px) {
  .main {
    padding: 94px 100px 0 100px;
  }
}
@media (min-width: 1280px) {
  .section .hero-template {
    width: 75%;
  }
  .section .card-content {
    width: 35%;
  }
  .card-content-template-page {
    width: 100%;
    max-width: 414px;
    font-style: normal;
  }
}
.container-tag-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--secondary-bg-color);
}

.tag-main-box {
  width: 100%;
  padding-bottom: 24px;
}

.tag-info {
  margin-bottom: 38px;
}

.tag-info_text_box {
  max-width: 619px;
}

@media (min-width: 1220px) {
  .tag-info_text_box {
    max-width: 910px;
  }
}
.tag-info_text {
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: 1.33;
  text-align: left;
  color: var(--main-text-color);
}

.tag-main-box {
  max-width: 910px;
}

.tag-main-box h1 {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: left;
  color: var(--main-accent-color);
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .tag-main-box {
    max-width: 910px;
    width: 75%;
  }
  .tag-main-box h1 {
    font-size: 48px;
    line-height: 1.16;
    margin-top: 32px;
    margin-bottom: 38px;
  }
}
@media (min-width: 1050px) {
  .tag-main-box {
    max-width: 70%;
  }
}
@media (min-width: 1220px) {
  .tag-main-box h1 {
    font-size: 53px;
    line-height: 1.16;
    margin-top: 32px;
    margin-bottom: 8px;
  }
}
@media (min-width: 1440px) {
  .tag-main-box {
    max-width: 1010px;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .mobile-sidebar-nav-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    padding: 55px 24px 0;
  }
  .tag-info {
    margin-top: 160px;
  }
}
.error-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 170px;
  padding: 0 24px;
}

@media (min-width: 768px) {
  .error-container {
    padding: 0 36px 100px;
  }
}
@media (max-width: 1260px) {
  .error-container {
    margin-top: 100px;
    flex-direction: column;
  }
}
.error-container .error-text {
  margin-right: 71px;
}

@media (max-width: 1260px) {
  .error-container .error-text {
    margin-right: 0;
    text-align: center;
    margin-bottom: 70px;
    padding: 40px 40px 0;
  }
}
.error-container .error-title {
  font-family: Nunito;
  font-size: 56px;
  font-weight: 700;
  color: #165bfb;
  line-height: 62px;
  width: 586px;
  height: 186px;
  margin: 0;
  text-align: left;
}

@media (max-width: 1260px) {
  .error-container .error-title {
    width: auto;
    height: auto;
  }
}
.error-container .error-info {
  font-family: Nunito;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: #165bfb;
  margin: 16px auto 32px auto;
  text-align: left;
}

@media (min-width: 1260px) {
  .error-container .error-info {
    margin: 85px auto 32px auto;
  }
}
.error-image-container {
  width: 583px;
  height: 611px;
  position: relative;
  user-select: none;
}

@media (max-width: 1260px) {
  .error-image-container {
    margin-bottom: 60px;
  }
}
.error-image-container .error-status,
.error-image-container .error-image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.error-image-container .error-status {
  top: 265px;
  left: 252px;
  bottom: 0;
  width: 91px;
  height: 51px;
  color: #fff;
  z-index: 2;
  font-family: Nunito;
  font-size: 50px;
  font-weight: 600;
  line-height: 50px;
  transform: rotate(-19deg);
}

.error-image-container .error-image {
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

html,
body {
  height: 100%;
}

@font-face {
  font-family: "Nunito", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Nunito"), url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
}
@font-face {
  font-family: "Nunito", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Nunito"), url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
}
@font-face {
  font-family: "Nunito", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Nunito"), url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
}
@font-face {
  font-family: "Nunito", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Nunito"), url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
}
body {
  font-family: Nunito;
  font-optical-sizing: auto;
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

.container {
  position: relative;
}

/*# sourceMappingURL=common.css.map */