/* // https://piccalil.li/blog/a-modern-css-reset */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  overflow-x: clip;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
video {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

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

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Fonts */
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/PlayfairDisplay/PlayfairDisplay.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Playfair Display Italic";
  src: url("/assets/fonts/PlayfairDisplay/PlayfairDisplay-Italic.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/Roboto/Roboto.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Roboto Italic";
  src: url("/assets/fonts/Roboto/Roboto-Italic.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "remixicon";

  src: url("../fonts/remixicon/remixicon.eot") format("embedded-opentype"),
    /* IE6-IE8 */
    url("../fonts/remixicon/remixicon.woff2") format("woff2"),
    url("../fonts/remixicon/remixicon.woff") format("woff"),
    url("../fonts/remixicon/remixicon.ttf") format("truetype"),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url("../fonts/remixicon/remixicon.svg") format("svg");
  /* iOS 4.1- */
  font-display: swap;
}

[class^="ri-"],
[class*=" ri-"],
.important::before,
.cite::before,
.cite::after {
  font-family: "remixicon" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ri-whatsapp-fill:before {
  content: "\f2bb";
}

.ri-whatsapp-line:before {
  content: "\f2bc";
}

.ri-telegram-fill:before {
  content: "\f1ef";
}

.ri-telegram-line:before {
  content: "\f1f0";
}

.ri-phone-line:before {
  content: "\efec";
}

.ri-phone-fill:before {
  content: "\efe9";
}

.ri-mail-line:before {
  content: "\eef6";
}

.ri-mail-fill:before {
  content: "\eef3";
}

.ri-menu-line:before {
  content: "\ef3e";
}

.ri-menu-fill:before {
  content: "\ef3b";
}

.ri-close-large-fill:before {
  content: "\f4c7";
}

.ri-close-large-line:before {
  content: "\f4c8";
}

.ri-timer-flash-fill:before {
  content: "\f213";
}

.ri-timer-flash-line:before {
  content: "\f214";
}

.ri-verified-badge-fill:before {
  content: "\f3e8";
}

.ri-verified-badge-line:before {
  content: "\f3e9";
}

.ri-earth-fill:before {
  content: "\ec79";
}

.ri-earth-line:before {
  content: "\ec7a";
}

.ri-customer-service-fill:before {
  content: "\ec0d";
}

.ri-customer-service-line:before {
  content: "\ec0e";
}

.ri-search-eye-fill:before {
  content: "\f0ce";
}

.ri-search-eye-line:before {
  content: "\f0cf";
}

.ri-roadster-fill:before {
  content: "\f08f";
}

.ri-roadster-line:before {
  content: "\f090";
}

.ri-arrow-right-fill:before {
  content: "\ea6b";
}

.ri-arrow-right-line:before {
  content: "\ea6c";
}

.ri-star-fill:before {
  content: "\f186";
}

.ri-star-line:before {
  content: "\f18b";
}

.ri-first-aid-kit-fill:before {
  content: "\ed36";
}

.ri-first-aid-kit-line:before {
  content: "\ed37";
}

.ri-shopping-cart-fill:before {
  content: "\f11f";
}

.ri-shopping-cart-line:before {
  content: "\f120";
}

.ri-briefcase-fill:before {
  content: "\eaf4";
}

.ri-briefcase-line:before {
  content: "\eaf5";
}

.ri-external-link-fill:before {
  content: "\ecae";
}

.ri-external-link-line:before {
  content: "\ecaf";
}

.ri-map-pin-fill:before {
  content: "\ef13";
}

.ri-map-pin-line:before {
  content: "\ef14";
}

.ri-map-pin-time-fill:before {
  content: "\ef17";
}

.ri-map-pin-time-line:before {
  content: "\ef18";
}

.ri-feedback-fill:before {
  content: "\ecc0";
}

.ri-feedback-line:before {
  content: "\ecc1";
}

.ri-download-2-fill:before {
  content: "\ec53";
}

.ri-download-2-line:before {
  content: "\ec54";
}

.ri-arrow-down-fill:before {
  content: "\ea4b";
}

.ri-arrow-down-line:before {
  content: "\ea4c";
}

.ri-arrow-left-fill:before {
  content: "\ea5f";
}

.ri-arrow-left-line:before {
  content: "\ea60";
}

.ri-calendar-event-fill:before {
  content: "\eb24";
}

.ri-calendar-event-line:before {
  content: "\eb25";
}

:root {
  /* Colors */
  --clr-primary-100: ;

  --clr-neutral-100: #fff;
  --clr-neutral-200: hsl(210, 20%, 98%);
  --clr-neutral-300: hsl(216, 12%, 84%);
  --clr-neutral-500: hsl(218, 11%, 65%);
  --clr-neutral-400: #9ca3af;
  --clr-neutral-600: hsla(0, 0%, 0%, 0.5);
  --clr-neutral-700: #000;

  --clr-accent-100: #c5a572;
  --clr-accent-200: #c5a5721a;

  --clr-accent-400: rgba(17, 24, 39, 1);
  --clr-accent-500: rgba(31, 41, 55, 1);

  /* Font Family */
  --ff-primary: "Roboto", serif;
  --ff-heading: "Playfair Display", sans-serif;
  --ff-heading-i: "Playfair Display Italic", sans-serif;

  /* Font Sizes */
  --fs-100: 0.875rem;
  --fs-200: 1rem;
  --fs-300: 1.125rem;
  --fs-400: 1.25rem;
  --fs-500: 1.875rem;
  --fs-600: 2.25rem;
  --fs-700: 4.375rem;
  --fs-mobile-700: 3rem;

  /* Padding */
  --pad-100: 0.5rem;
  --pad-200: 1rem;
  --pad-300: 1.5rem;
  --pad-400: 2rem;
  --pad-500: 3rem;
  --pad-600: 4rem;
  --pad-700: 5rem;

  /* Padding */
  --bor-rad-100: 0.5rem;
  --bor-rad-200: 1rem;
  --bor-rad-300: 1.5rem;
  --bor-rad-400: 2rem;
  --bor-rad-500: 3rem;
  --bor-rad-600: 4rem;
  --bor-rad-700: 5rem;

  /* Shadows */
  --shd-sm: 0 6px 6px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
  --shd-md: 0 12px 12px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
  --shd-lg: 0 8px 24px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
  --shd-xl: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
    0 0 32px -8px hsl(0, 0%, 0%, 0.12), 0 0 1px hsl(0, 0%, 0%, 0.2);

  /* Component sizes */
  --header-height: 4rem;
}

/* Utility classes */

.bg-neutral-100 {
  background-color: var(--clr-neutral-100);
}

.bg-neutral-200 {
  background-color: var(--clr-neutral-200);
}

.bg-neutral-300 {
  background-color: var(--clr-neutral-300);
}

.bg-neutral-400 {
  background-color: var(--clr-neutral-400);
}

.bg-neutral-700 {
  background-color: var(--clr-neutral-700);
}

.bg-accent-400 {
  background-color: var(--clr-accent-400);
}

.text-neutral-100 {
  color: var(--clr-neutral-100);
}

.text-neutral-200 {
  color: var(--clr-neutral-200);
}

.text-neutral-300 {
  color: var(--clr-neutral-300);
}

.text-neutral-400 {
  color: var(--clr-neutral-400);
}

.text-neutral-500 {
  color: var(--clr-neutral-500);
}

.text-neutral-700 {
  color: var(--clr-neutral-700);
}

.text-accent-100 {
  color: var(--clr-accent-100);
}

.ff-heading {
  font-family: var(--ff-heading);
}

.ff-heading-i {
  font-family: var(--ff-heading-i);
}

.fs-primary-heading {
  font-size: clamp(var(--fs-mobile-700), 2.6071rem + 1.9643vw, var(--fs-700));
}

.fs-200 {
  font-size: var(--fs-200);
}

.fs-300 {
  font-size: var(--fs-300);
}

.fs-400 {
  font-size: var(--fs-400);
}

.fs-500 {
  font-size: var(--fs-500);
}

.grid {
  display: grid;
  align-items: center;
  gap: var(--_gap);
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--_gap);
}

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* main styles */
body {
  font-family: var(--ff-primary);
}

section {
  padding-block: var(--pad-700);
  padding-inline: var(--pad-100);
}

@media(max-width: 49.99em) {
  section {
    padding-block: var(--pad-300);

  }
}

.content-wrapper {
  max-width: 1440px;
  margin-inline: auto;
  width: 100%;
}

.grid-auto-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, (minmax(var(--_min-size), 1fr)));
}

.cta-btn {
  padding: var(--pad-100) var(--pad-200);
  border: 1px solid transparent;
  border-radius: var(--bor-rad-100);
  font-size: var(--fs-200);
  background-color: var(--clr-accent-100);
  color: var(--clr-neutral-700);
  text-align: center;
}

.cta-btn.transparent {
  border: 1px solid var(--clr-neutral-100);
  background-color: transparent;
  color: var(--clr-neutral-100);
}

.section-heading {
  font-family: var(--ff-heading);
  font-size: var(--fs-600);
  text-align: center;
  position: relative;
  padding-bottom: var(--pad-100);
}

.section-heading::after {
  --_line-width: 6rem;
  content: "";
  position: absolute;
  width: var(--_line-width);
  height: 0.25rem;
  inset: 100% calc(50% + (var(--_line-width) / -2));
  background: var(--clr-accent-100);
}

.item-heading {
  font-family: var(--ff-heading);
  font-size: var(--fs-400);
}

.big-icon {
  margin-bottom: 1rem;
  display: grid;
  place-content: center;
  width: 3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: 1.5rem;
  background: #c5a5721a;
  color: var(--clr-accent-100);
}

/* Header */
.page-header {
  height: var(--header-height);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding-inline: 0.5rem;
}

.logo {
  font-family: "Playfair Display Italic", sans-serif;
}

.primary-nav ul {
  --_gap: 1rem;
}

.primary-nav ul a {
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
}

.primary-nav ul a:is(:hover, :active) {
  border-bottom-color: var(--clr-accent-100);
  transition: 0.2s ease-out;
}

.primary-nav {
  display: flex;
  --_gap: 2rem;
  justify-content: space-between;
}

@media (max-width: 49.99em) {
  .page-header .buttons {
    --_gap: 1rem;
  }

  .page-header .buttons li span {
    display: none;
  }

  .mobile-menu button {
    border: 1px solid var(--clr-neutral-100);
    border-radius: var(--bor-rad-100);
    display: grid;
    place-items: center;
    background-color: transparent;
    color: var(--clr-neutral-100);
    aspect-ratio: 1;
    width: fit-content;
  }

  .page-header .primary-nav {
    position: absolute;
    z-index: 10;
    inset: calc(var(--header-height) + 0.1rem) 0.5rem 1rem 0.5rem;
    height: calc(100vh - var(--header-height) - 0.1rem);
    display: none;
    place-content: start center;
    padding: var(--pad-300) 0.5rem;
    gap: 1rem;
    background: #373737;
    border-radius: 1rem;
    font-size: var(--fs-400);
    isolation: isolate;
  }

  .page-header .primary-nav[data-visible] {
    display: grid;
  }

  .page-header .primary-nav .socials {
    width: 70%;
    font-size: var(--fs-500);
    margin-inline: auto;
    color: var(--clr-accent-100);
  }

  .page-header .primary-nav::before {
    content: "";
    inset: 0;
    border-radius: inherit;
    position: absolute;
    box-shadow: 0 0 0 10rem hsla(0, 0%, 0%, 0.75);
    z-index: -10;
  }

  .page-header .nav-list {
    width: 100%;
    margin-inline: auto;
    place-content: center;
    --_gap: 1rem;
    display: grid;

    grid-auto-flow: row;
  }

  .page-header .nav-list {
    width: 100%;
    margin-inline: auto;
    place-content: center;
    --_gap: 1rem;
    display: grid;
    grid-auto-flow: row;
  }

  .page-header .nav-list li {
    border: 1px solid var(--clr-neutral-100);
    border-radius: var(--bor-rad-100);
    padding: var(--pad-100) var(--pad-300);
    text-align: center;
  }

  .mobile-menu:has([aria-expanded="false"]) .ri-menu-line,
  .mobile-menu:has([aria-expanded="true"]) .ri-close-large-line {
    display: grid;
  }

  .mobile-menu:has([aria-expanded="false"]) .ri-close-large-line,
  .mobile-menu:has([aria-expanded="true"]) .ri-menu-line {
    display: none;
  }

  .mobile-menu:has([aria-expanded="true"]) .ri-close-large-line {
    z-index: 1000;
    color: var(--clr-accent-100);
  }
}

@media (min-width: 50em) {
  .mobile-menu {
    display: none;
  }
}

.page-header .socials {
  font-size: 1.5rem;
  justify-self: flex-end;
}

.page-header .buttons .flex {
  --_gap: 1rem;
}

/* Promo */
.promo {
  background-image: url("../img/promo.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  object-fit: cover;
  min-height: 100vh;
  min-height: 100dvh;
  isolation: isolate;
  position: relative;
}

.promo::after {
  place-self: center;
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* background-color: hwb(0 0% 100% / 0.5); */
  background-image: linear-gradient(to bottom,
      hwb(0 0% 100% / 0.3),
      hwb(0 0% 100% / 0.8));
  z-index: -1;
}

.promo h2 {
  font-size: var(--fs-600);
}

.promo .content-wrapper {
  padding: var(--pad-300) var(--pad-100);
  --_gap: 1.5rem;
  max-width: 768px;
  margin-inline: auto;
  margin-block: auto;
}

@media (min-width: 50em) {
  .promo .content-wrapper {
    padding: var(--pad-700) var(--pad-300);
    max-width: 768px;
    margin-inline: 185px;
  }
}

.promo-heading {
  line-height: 1;
}

.promo-features {
  margin-top: 2rem;
  --_min-size: 200px;
  --_max-size: 1fr;
  align-items: stretch;
  grid-template-columns: repeat(auto-fit,
      minmax(var(--_min-size), var(--_max-size)));
}

.promo-features .item {
  max-width: var(--_max-size);
  padding: var(--pad-300);
  background-color: hsla(0, 0%, 0%, 0.83);
  border-radius: var(--bor-rad-200);
}

/* Features */
.features-about {
  margin-top: 3rem;
  --_gap: 1rem;
}

.features-about h3 {
  font-size: var(--fs-400);
}

.features-about p {
  text-wrap: pretty;
}

.features-layout,
.services-layout {
  margin-top: 2rem;
  --_gap: 2rem;
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.features .item,
.services .item,
.services-inner .item {
  background-color: var(--clr-neutral-100);
  border-radius: var(--bor-rad-200);
  padding: var(--pad-300);
  box-shadow: var(--shd-md);
  place-content: start;
  --_gap: 1rem;
}

.features .item p {
  align-self: start;
}

/* Services */
.services-layout ul {
  height: 250px;
}

@media (max-width:49.99em) {
  .services-layout ul {
    height: max-content;
  }
}

.services .item:not(.features .item) {
  padding: 0;
  overflow: hidden;
}

.services .item ul {
  list-style: decimal;
  padding-left: var(--pad-300);
}

.services .item-text {
  padding: var(--pad-300);
}

.item a {
  align-self: end;
  padding: 0 0 var(--pad-300) var(--pad-300);
}

.show-all {
  margin-top: 2rem;
  display: grid;
  place-content: center;
  --_gap: 1rem;
}

.show-all a {
  box-shadow: var(--shd-sm);
}

/* Work order */
.work-order {
  overflow: hidden;
  isolation: isolate;
}

.work-order ul {
  --_gap: 1rem;
}

.work-order li {
  background-color: var(--clr-neutral-100);
  padding: var(--pad-300);
  border-radius: var(--bor-rad-300);
  box-shadow: var(--shd-md);
  justify-content: start;
  flex-wrap: wrap;
  --_gap: 1rem;
  font-family: var(--ff-heading);
  position: relative;
  font-size: var(--fs-400);
  font-weight: bold;
}

.work-order li:nth-child(n + 1)::before {
  content: "";
  height: 100vh;
  width: 4px;
  position: absolute;
  background-color: grey;
  inset: -30% 3rem;
  z-index: -2;
}

.work-order li:nth-child(n + 2)::before {
  inset-block: -80%;
}

.work-order li:nth-child(n + 3)::before {
  inset-block: -130%;
}

@media (min-width: 50em) {
  .work-order ul {
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    place-items: stretch;
  }

  .work-order li:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/3;
  }

  .work-order li:nth-child(2) {
    grid-column: 2/3;
    grid-row: 2/4;
  }

  .work-order li:nth-child(3) {
    grid-column: 3/4;
    grid-row: 3/5;
  }

  .work-order li:nth-child(4) {
    grid-column: 1/2;
    grid-row: 4/6;
  }

  .work-order li:nth-child(5) {
    grid-column: 2/3;
    grid-row: 5/7;
  }

  .work-order li:nth-child(6) {
    grid-column: 3/4;
    grid-row: 6/8;
  }
}

.work-order li i {
  font-family: "system ui";
  line-height: 1;
  display: grid;
  place-content: center;
  font-size: 1.5rem;
  width: 3rem;
  aspect-ratio: 1;
  background: var(--clr-accent-100);
  color: var(--clr-neutral-700);
  border-radius: 50%;
}

/* Featured Articles */
.featured-articles .blog-layout,
.blog .blog-layout {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  --_gap: 2rem;
  place-items: stretch;
  margin-top: 2rem;
}

.featured-articles .article,
.blog .article {
  border-radius: var(--bor-rad-300);
  overflow: hidden;
  box-shadow: var(--shd-md);
}

.post-content {
  padding: var(--pad-300);
  border-radius: var(--bor-rad-300);
}

.article figure,
.post-content figure {
  position: relative;
}

.article figure .categories {
  display: flex;
  flex-wrap: wrap;
}

.article figure time {
  align-self: end;
}

.article figure img,
.post-content figure img {
  width: 100%;
}

.article figcaption,
.post-content figcaption {
  position: absolute;
  inset: auto 0.5rem 0.5rem;
}

.article figcaption span,
.article figcaption time,
.post-content figcaption span,
.post-content figcaption time {
  background-color: hsla(0, 0%, 0%, 0.3);
  padding: var(--pad-100);
  border-radius: var(--bor-rad-100);
  line-height: 1;
  color: var(--clr-neutral-100);
}

.article .article-text {
  --_gap: 1rem;
  padding: var(--pad-300);
  height: 320px;
}

.article .article-text .flex {
  align-self: end;
}

.article .article-text span[itemprop="name"] {
  color: var(--clr-neutral-400);
}

/* Testimonials */
.testimonials-layout {
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  --_gap: 2rem;
  align-items: stretch;
}

.testimonial {
  --_gap: 1rem;
  border-radius: var(--bor-rad-300);
  padding: var(--pad-300);
  box-shadow: var(--shd-md);
}

.testimonial .author {
  justify-content: start;
  --_gap: 1rem;
}

.testimonial .author img {
  width: 3rem;
  aspect-ratio: 1;
  border-radius: 50%;
}

.testimonial .author .grid {
  --_gap: 0.5rem;
  line-height: 1;
}

.testimonials .show-all .transparent {
  border-color: var(--clr-accent-100);
  color: var(--clr-accent-100);
}

.testimonials .show-all {
  place-content: center;
}

@media (min-width: 50em) {
  .testimonials .show-all {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    place-items: center;
  }

  .testimonials .show-all a {
    max-width: fit-content;
  }
}

/* Contacts */
.contacts .content-wrapper {
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  --_gap: 2rem;
  align-items: stretch;
}

.form-wrapper {
  border-radius: var(--bor-rad-300);
  padding: var(--pad-300);
  box-shadow: var(--shd-md);
  position: relative;
}

.contacts form>.grid {
  --_gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.form-group {
  display: grid;
  gap: 0.5rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  border-radius: var(--bor-rad-100);
  border: 1px solid var(--clr-neutral-300);
  padding: 0.75rem var(--pad-200);
}

.form-group textarea {
  resize: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--clr-neutral-400);
}

.form-group button[type="submit"] {
  width: 10rem;
  margin-inline: auto;
}

/* CSS для кнопки submit */
button[type="submit"] {
  margin-inline: auto;
  display: grid;
  place-content: center;
  color: var(--clr-neutral-700);
  background: var(--clr-accent-100);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: 0.15s ease-in-out;
}

button[type="submit"]:disabled {
  opacity: 0.65;
}

/* button[type="submit"]:not(:disabled)::before {
  content: "";
  width: 1rem;
  height: 1rem;
  margin-right: .5rem;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512.333 512'%3E%3Cpath fill='%23fff' d='M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z'/%3E%3C/svg%3E") transparent no-repeat center center;
  background-size: 100% 100%;
} */

button[type="submit"]:disabled::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: -0.125em;
  border: 0.2em solid currentColor;
  border-right-color: transparent;
  -webkit-animation: 0.75s linear infinite spinner-border;
  animation: 0.75s linear infinite spinner-border;
  border: 1px solid transparent;
}

button[type="submit"]:not(:disabled):hover {
  box-shadow: var(--shd-sm);
}

button[type="submit"]:not(:disabled):focus {
  outline: 0;
  box-shadow: var(--shd-sm);
}

/* Стили для сообщения об ошибках */
.form-error {
  position: relative;
  padding: 0.5rem 1rem 0.6rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  color: #dc3545;
  background-color: #dc35450d;
  border: 1px solid #dc3545;
}

.form-error_hide {
  display: none;
}

/* сообщение об успешной отправки формы */
.form-success {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  background: rgba(0, 0, 0, 0.4);
  font-size: 1.25rem;
  border-radius: 0.25rem;
  z-index: 3;
}

.form-success_hide {
  display: none;
}

.form-success__message {
  vertical-align: center;
  inset: 0;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  padding: var(--padding-300);
  border-radius: 1rem;
  background-color: var(--clr-neutral-100);
  border: 1px solid;
  box-shadow: 0 0 0.75rem var(--box-shadow);
  display: grid;
  place-content: center;
}

.form-success__btn {
  font-weight: 400;
  color: var(--clr-neutral-500);
  text-decoration: underline;
  border: none;
  background-color: transparent;
  display: inline;
  padding: 0;
}

.phone-input {
  padding-left: 2.25rem;
}

label {
  padding-left: var(--padding-100);
  color: var(--clr-accent-100);
}

.form-group:has(input[type="hidden"]) {
  display: none;
}

input:focus-visible:not(input[type="checkbox"]),
textarea:focus,
button[type="submit"]:focus-visible {
  outline: 2px solid var(--clr-accent-100);
  border-radius: 1rem;
  box-shadow: var(--shd-sm);
}

.form-group.form-agree {
  display: block;
}

.form-group.form-agree input {
  width: fit-content;
}

@media (min-width: 50em) {
  .submit-button {
    width: 20rem;
    margin-inline: auto;
  }
}

label a {
  text-decoration: underline;
  text-decoration-skip: none;
}

.contacts-info {
  border-radius: var(--bor-rad-300);
  padding: var(--pad-300);
  box-shadow: var(--shd-md);
}

.contacts-info li {
  justify-content: start;
  --_gap: 0.5rem;
}

.contacts-info li .big-icon {
  margin-bottom: 0;
}

.contacts-info li .grid {
  --_gap: 0.25rem;
}

.map {
  width: 100%;
}

.map iframe {
  width: 100%;
  border: 0;
  border-radius: var(--bor-rad-300);
  box-shadow: var(--shd-md);
}

/* Contact-cta */
.contact-cta {
  padding-block: var(--pad-200) var(--pad-300);
}

/* Online Booking Cta */
.online-booking-cta {
  padding-block: var(--pad-500);
  padding-inline: var(--pad-100);
}

.online-booking-cta h2 {
  margin-bottom: 1rem;
  font-size: var(--fs-400);
}

.online-booking-cta .section-heading::after {
  display: none;
}

.online-booking-cta .grid {
  --_gap: 0.5rem;
  padding-inline: .5rem;
  margin-inline: auto;
}

@media (min-width: 50em) {
  .online-booking-cta .grid {
    --_gap: 0.5rem;
    max-width: 30%;
    margin-inline: auto;
  }

  .online-booking-cta h2 {
    font-size: var(--fs-600);
  }
}

/* Footer */
.page-footer {
  font-size: var(--fs-100);
  padding-top: var(--pad-500);
  padding-inline: 0.5rem;
}

.footer-top {
  padding-bottom: 1rem;
}

.footer-top,
.footer-bottom {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
  --_gap: 2rem;
}

.footer-top .footer-menu {
  --_gap: 1rem;
}

.footer-top .logo {
  justify-content: start;
  --_gap: 1rem;
}

.footer-top .footer-location {
  --_gap: 1rem;
}

.footer-top .footer-info {
  --_gap: 1rem;
}

.footer-top .footer-info li .grid {
  --_gap: 0.5rem;
}

.footer-top .footer-info li {
  justify-content: start;
  --_gap: 1rem;
}

.footer-about {
  --_gap: 1rem;
}

.footer-about .socials {
  width: 70%;
  margin-inline: auto;
}

.footer-about .socials i {
  width: 2.5rem;
}

.footer-bottom .copyright .flex {
  justify-content: flex-start;
}

.footer-bottom .documents {
  justify-content: flex-end;
}

.footer-bottom {
  border-top: 1px solid var(--clr-accent-500);
  padding-block: var(--pad-300);
}

.footer-menu ul {
  --_gap: 0.5rem;
}

.footer-location div:has(select) {
  width: fit-content;
  --_gap: 0.25rem;
  padding-left: 0.5rem;
  background-color: var(--clr-accent-200);
  border-radius: var(--bor-rad-200);
}

.footer-location .ri-earth-line {
  color: var(--clr-accent-100);
}

.footer-location select {
  background: none;
  padding: var(--pad-100);
  border-radius: 0 var(--bor-rad-200) var(--bor-rad-200) 0;
  color: var(--clr-neutral-100);
  font-family: inherit;
  border-color: transparent;
}

option {
  background: none;
  background-color: var(--clr-accent-100);
  color: var(--clr-neutral-100);
}



/* Pricing */
ul.pricing-wrapper {
  background-color: var(--clr-neutral-100);
  padding: var(--pad-300);
  border-radius: var(--bor-rad-300);
  box-shadow: var(--shd-md);
  max-width: 800px;
  margin-inline: auto;
  margin-top: 2rem;
}

.pricing h2 {
  margin-block: 1rem;
}

.price-list li:not(.price-li,.grid) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--clr-accent-100);
}
.price-list li.grid:not(li.grid ul) {
  --_gap: 0.25rem;
}
.price-list li.description {
  font-weight: bold;
}
.price-list li:not(.price-li) .price {
  min-width: fit-content;
  font-weight: bold;
}

.price-list {
  --_gap: 0.25rem;
}

.individual-price {
  padding: var(--pad-300);
  border-radius: var(--bor-rad-300);
  display: flex;
  background-color: var(--clr-neutral-100);
  box-shadow: var(--shd-md);
  position: relative;
  font-weight: bold;
  padding-left: calc(var(--pad-300) + 3rem);
  justify-content: start;
  max-width: 600px;
  margin-inline: auto;
  margin-top: 2rem;
}

.individual-price::after {
  --_line-width: 6rem;
  content: "";
  position: absolute;
  width: var(--_line-width);
  height: 0.3rem;
  inset: 0 calc(50% + (var(--_line-width) / -2));
  background: var(--clr-accent-100);
  z-index: 2;
}

.individual-price i {
  position: absolute;
  top: calc(var(--pad-300) / 4);
  left: calc(var(--pad-300) / 4);
}

/* About */
.about .item img {
  position: relative;
}

.about .item {
  box-shadow: var(--shd-md);
  border-radius: var(--bor-rad-300);
  overflow: clip;
  max-width: fit-content;
  position: relative;
  --_gap: 0;
}

.about .item figure {
  width: 100%;
  object-fit: cover;
}

.about .item figcaption {
  padding: var(--pad-200);
}

.crew-layout {
  margin-top: 2rem;
  --_gap: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.crew-bio {
  position: absolute;
  max-width: 100%;
  background-color: var(--clr-neutral-600);
  inset: 0 0 5.2rem 0;
  color: var(--clr-neutral-100);
  padding: var(--pad-300);
  padding-top: var(--pad-500);
  place-content: end;
  --_gap: 1rem;
  display: none;
  pointer-events: none;
}

.about .item:has(figure:is(:hover, :active)) .crew-bio {
  display: grid;
}

.crew-cta {
  margin-top: 2rem;
  border-radius: var(--bor-rad-300);
  padding: var(--pad-300);
  box-shadow: var(--shd-md);
  width: fit-content;
  margin-inline: auto;
  --_gap: 1rem;
}

@media(min-width: 50em) {
  .crew-cta .buttons {
    width: 50%;
    margin-inline: auto;
  }
}

.crew-cta .cta-btn.transparent {
  color: var(--clr-neutral-700);
  border-color: var(--clr-neutral-700);
}

.about-extra {
  margin-top: 2rem;
}

.extra-layout {
  padding-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  --_gap: 0.5rem;
}

.extra-layout figure {
  columns: 300px;
  background: var(--clr-neutral-200);
  box-shadow: var(--shd-md);
  padding: var(--pad-300);
  border-radius: var(--bor-rad-300);
}

.extra-layout figure img {
  width: 100%;
  border: 1px solid var(--clr-accent-100);
  box-shadow: var(--shd-sm);
}

/* Documents */
section.documents {
  min-height: 100vh;
}

.documents-layout {
  margin-top: 2rem;
  padding: var(--pad-300);
  border-radius: var(--bor-rad-300);
  box-shadow: var(--shd-md);
  max-width: 900px;
  margin-inline: auto;
}

.documents-category {
  --_gap: 2rem;
}

.documents-category .card .content {
  --_gap: 0.5rem;
  padding-top: var(--pad-200);
}

.documents-category .content li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--clr-neutral-200);
}

.documents-category .card .doc-links {
  --_gap: 1rem;
}

.documents-category .card .doc-links a {
  border: 1px solid var(--clr-neutral-300);
  padding: 0.25rem var(--pad-100);
  border-radius: var(--bor-rad-100);
}

.documents-category .card .doc-links a:hover {
  color: var(--clr-accent-100);
  box-shadow: var(--shd-sm);
}

.documents-category details:not([open]) summary {
  border-bottom: 1px solid var(--clr-neutral-300);
}

.documents-category summary i {
  font-size: 1.5rem;
}

/* Contacts-page */
.contact-info {
  border-bottom: 1px solid var(--clr-accent-100);
  padding-bottom: var(--pad-500);
  margin-bottom: 3rem;
}

.contacts-layout {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  --_gap: 2rem;
  align-items: start;
  margin-top: 2rem;
  place-content: stretch;
}

.contacts-page .map {
  height: 100%;
}

.contacts-page .map iframe {
  height: 100%;
}

/* Blog */
.blog .blog-layout {
  margin-top: 2rem;
}

.blog .article {
  height: 100%;
}

.blog .article-text {
  justify-content: space-between;
  height: 320px;
}

.blog .article-text .flex {
  align-self: end;
}

/* Breadcrumbs */
.breadcrumbs {
  --_gap: 0.25rem;
  max-width: max-content;
  list-style: none;
  margin-block: 1rem;
}

.breadcrumbs li:not(li:last-of-type)::after {
  content: "\ea6c";
  font-family: "remixicon" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Article */
section:has(.post-content) {
  padding-block: var(--pad-100);
}

.post-content {
  max-width: 1440px;
  margin-inline: auto;
}

.post-content .text {
  padding: var(--pad-300);
}

.post-bottom {
  padding: var(--pad-200);
  border-top: 1px solid var(--clr-accent-100);
}

.share-btn {
  --_gap: 0.5rem;
}

.important {
  background-color: var(--clr-accent-200);
  padding: var(--pad-200);
  padding-left: calc(var(--pad-200) + 2rem);
  border-radius: var(--bor-rad-200);
  margin-block: 1rem;
  position: relative;
}

.important::before {
  width: 2rem;
  aspect-ratio: 1;
  content: "\ecc1";
  background-color: var(--clr-neutral-100);
  color: var(--clr-accent-100);
  border-radius: 50%;
  position: absolute;
  inset: 0.25rem 0.25rem;
  display: grid;
  place-items: center;
}

.cite {
  background-color: var(--clr-neutral-200);
  padding: var(--pad-200);
  padding-left: var(--pad-300);
  margin-block: 1rem;
  border-left: 2px solid var(--clr-accent-100);
  position: relative;
  border-radius: 0 var(--bor-rad-200) var(--bor-rad-200) 0;
}

.cite::before,
.cite::after {
  font-size: 1rem;
  color: var(--clr-accent-100);
  position: absolute;
  width: 1rem;
  aspect-ratio: 1;
}

.cite::before {
  content: "\ec51";
  inset: 0.1rem 0.1rem;
}

.cite::after {
  content: "\ec52";
  right: 0.25rem;
  bottom: 0.1rem;
}

.intro {
  font-size: var(--fs-400);
  padding-block: 1rem;
  border-bottom: 1px solid var(--clr-accent-100);
  margin-bottom: 1rem;
}

/* Policy */
.policy .content-wrapper {
  --_gap: 2rem;
}

.policy .policy-layout {
  padding: var(--pad-300);
  border-radius: var(--bor-rad-300);
  box-shadow: var(--shd-md);
  --_gap: 0.75rem;
}

.policy .policy-layout a {
  color: var(--clr-accent-100);
  text-decoration: underline;
}

/* Services-inner */
.services .section-heading {
  font-size: 1.9rem;
}

.services-inner .item {
  padding: 0;
  overflow: clip;
}

.services-inner .item-text {
  padding: var(--pad-300);
}



.services-item {
  padding: var(--pad-300);
  border-radius: var(--bor-rad-300);
  box-shadow: var(--shd-md);
}
.services-item figure img {
  object-fit: cover;
  width: 100%;
  object-position: center -12rem;
  filter: blur(2px);
}
@media(max-width: 49.99em) {
  .services-item figure img {
    object-fit: cover;
    object-position: unset;
    width: 100%;
    filter: blur(2px);
  }

  .services-item {
    padding-inline: .5rem;
  }

  .services .features-layout {
    --_gap: 1rem;
  }

  .services .features .item {
    padding: var(--pad-200);
  }

  .services .features .item>div {
    position: relative;
  }

  .services .features .item i {
    position: absolute;

    font-size: 1rem;
  }

  .services .features .big-icon {
    width: 2rem;
  }
}

.services-item h2,
.services-item h3 {
  text-align: center;
}

.services-item ul:not(li>ul),
.services-item ol {
  --_gap: 1rem;
  margin-top: 1rem;
}

.services-item h2:not(.service-heading h2) {
  margin-top: 2rem;
}

.services-item .price-list {
  background-color: var(--clr-neutral-200);
  border-radius: var(--bor-rad-200);
  padding: var(--pad-200);
}

.services-item .price-list li {
  border-color: var(--clr-neutral-300);
}

.services-item figure {
  height: 200px;
  overflow: clip;
  position: relative;
}



.services-item.military figure img {
  object-position: 0;
}

.services-item figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--clr-neutral-600);
  z-index: 2;
  width: 100%;
  height: 100%;
}

.prefix {
  padding: var(--pad-200);
  box-shadow: var(--shd-sm);
  background-color: var(--clr-neutral-200);
  border-radius: 0 var(--bor-rad-100) var(--bor-rad-100) 0;
  border-left: 2px solid var(--clr-accent-100);
  margin-block: 1rem;
}

.price-link {
  place-self: center;
  margin-top: 1rem;
}

.price-link a {
  color: var(--clr-accent-100);
}

.services-offer {
  padding: var(--pad-300);
  border-radius: var(--bor-rad-300);
  margin-block: 2rem;
  --_gap: 1rem;
}

.services-offer .cta-btn {
  width: fit-content;
  margin-inline: auto;
}

.links.buttons,
.top-links.buttons {
  --_gap: 1rem;
  width: fit-content;
  margin-inline: auto;
  margin-block: 2rem;
  grid-auto-flow: row;
}

@media(min-width: 50em) {

  .links.buttons,
  .top-links.buttons {
    --_gap: 1rem;
    width: fit-content;
    margin-inline: auto;
    margin-block: 2rem;
    grid-auto-flow: column;
  }
}

.links.buttons a,
.top-links.buttons a {
  border: 1px solid var(--clr-accent-100);
  padding: var(--pad-100) var(--pad-200);
  border-radius: var(--bor-rad-100);
}

.links.buttons a:is(:hover, :active),
.top-links.buttons a:is(:hover, :active) {
  color: var(--clr-neutral-100);
  background-color: var(--clr-accent-100);
}


.order-list>li {
  position: relative;
  display: flex;
  gap: 1rem;
  background-color: var(--clr-neutral-100);
  padding: var(--pad-200);
  border-radius: var(--bor-rad-300);
  box-shadow: var(--shd-md);
  justify-content: start;
  position: relative;
  font-size: var(--fs-300);


}

@media(min-width: 50em) {
  .order-list>li ul {
    padding-left: 4rem;


  }


}

.order-list li i {
  place-self: center flex-start;
  position: absolute;
  font-family: "system ui";
  line-height: 1;
  display: grid;
  place-content: center center;
  font-size: 1.5rem;
  width: 2rem;
  aspect-ratio: 1;
  background: var(--clr-accent-100);
  color: var(--clr-neutral-700);
  border-radius: 50%;


}

.order-list li p {
  padding-left: 3rem;
}

@media (max-width: 49.99em) {
  .order-list li i {
    place-self: unset;
    inset: -0.75rem -0.5rem;
  }

  .order-list li p {
    padding: 0;
  }
}

@media (min-width: 50em) {
  .services.penalty-recovery img {
    object-position: top -400px right 0;
  }

  .services.licensing img {
    object-position: top -400px right 0;
  }

  .services.estate img {
    object-position: top -400px right 0;
  }
  .services.tender img {
    object-position: top -550px right 0;
  }
}

/* Military-law */
/* Payments table */
.payments-table {
  --_gap: 1rem;
  border-radius: var(--bor-rad-200);
}

.payments-table thead {
  --_gap: 1rem;
  border-bottom: 1px solid var(--clr-accent-100);
  padding-bottom: var(--pad-100);
}

.payments-table tr {
  --_gap: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(6rem, 1fr));
}

.payments-table tbody tr {
  border-bottom: 1px solid var(--clr-neutral-300);
}

.payments-table td:nth-of-type(2) {
  text-align: center;
}

@media (min-width: 50em) {
  .payments-table tbody tr {
    padding-inline: var(--pad-100);
  }
}

/* FAQ */
.faq-layout {
  margin-inline: auto;
  max-width: 900px;
  --_gap: 1rem;
  margin-block: 2rem;
}

.faq-layout details {
  padding: var(--pad-100) var(--pad-200);
  border-radius: var(--bor-rad-200);
  box-shadow: var(--shd-sm);
}

.faq-layout details i {
  font-size: 1.5rem;
}

details[open] i {
  rotate: 180deg;
}

.faq-cta {
  padding: var(--pad-300);
  border-radius: var(--bor-rad-300);
  width: fit-content;
  margin-inline: auto;
  background-color: var(--clr-neutral-100);
  border: 1px solid var(--clr-neutral-400);
  box-shadow: var(--shd-md);
  --_gap: 1rem;
}

.faq-cta .buttons {
  display: flex;
  margin-top: 1rem;
  margin-inline: auto;
  gap: 1rem;
}

.faq-cta .buttons .transparent {
  color: var(--clr-accent-100);
  border-color: var(--clr-accent-100);
}

/* 404 */
.error-page {
  min-height: 100vh;
}

.error-layout {
  padding: var(--pad-500);
  border-radius: var(--bor-rad-300);
  box-shadow: var(--shd-md);
}

.error-page .content-wrapper {
  place-items: center;
  gap: 1rem;
  margin-block: auto;
  padding-block: var(--pad-700);
}

.error-code {
  place-self: center;
  color: var(--clr-accent-100);
  font-weight: bold;
}

.error-page p:nth-of-type(2) {
  margin-top: 2rem;
}

.error-page a {
  color: var(--clr-accent-100);
}