@import "https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap";
:root {
  --content-width: 1216px;
  --container-offset: 15px;
  --container-width: calc(var(--content-width)  + (var(--container-offset) * 2));
  --font-family-primary: "Inter", sans-serif;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --color-white: #fff;
  --color-black: #1c1c1c;
  --color-black-10: #000;
  --color-black-01: #0000004d;
  --color-gray: #5c5c5c;
  --color-gray-06: #f2f2f2;
  --color-gray-07: #7b7b7b;
  --color-gray-08: #494949;
  --color-gray-09: #2c2c2e;
  --color-dark: #292e3d;
  --color-page-background: #e3ddd3;
  --color-text-general: #1f1f1f;
  --color-text-subtitles: #646464;
  --color-brown: #532800;
  --color-brown-10: #442101;
  --color-brown-01: #53280099;
  --color-beige: #c5b9a3;
  --color-beige-03: #d6d0c5;
  --color-beige-01: #f6f2eb;
  --radius-main: 12px;
  --shadow-primary: 0px 4px 4px 0px #00000040;
  --shadow-secondary: 0px 20px 24px -4px #1118271a;
}

.checkbox__field:checked + .checkbox__content:after {
  opacity: 1;
}

.checkbox__field:focus + .checkbox__content:before {
  outline: 1px solid var(--color-gray-100);
  outline-offset: 1px;
}

.checkbox__field:disabled + .checkbox__content {
  opacity: .4;
  pointer-events: none;
}

html, body {
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

.page {
  height: var(--vh);
  font-family: var(--font-family-primary);
  font-weight: var(--fw-400);
  letter-spacing: 0;
  color: var(--color-text-general);
  background-color: var(--color-page-background);
  font-optical-sizing: auto;
  font-size: clamp(16px, 1vw, 20px);
  font-style: normal;
  line-height: 1.5;
}

.page__body {
  min-width: 320px;
  min-height: var(--vh);
}

.page.open {
  overflow: hidden;
}

.container {
  padding: 0 var(--container-offset);
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
}

.site-container {
  min-height: var(--vh);
  grid-template-rows: 1fr auto;
  grid-template-columns: 100%;
  display: grid;
}

.main {
  padding-top: var(--header-height);
}

#form-request {
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  margin: auto;
  transition-property: opacity, visibility;
  transition-duration: .2s;
  position: fixed;
  inset: 0;
}

#form-request:before {
  content: "";
  background-color: var(--color-black);
  opacity: .3;
  position: absolute;
  inset: 0;
}

#form-request iframe {
  z-index: 1;
  width: 90%;
  height: calc(var(--vh)  - 60px);
  max-width: 980px;
  border: none;
  margin: 30px auto;
  position: absolute;
  left: 0;
  right: 0;
}

#form-request.open {
  opacity: 1;
  visibility: visible;
}

.overlay {
  position: relative;
}

.overlay:before {
  content: "";
  z-index: 1;
  background: linear-gradient(90deg, #0000007a 53.89%, #0000 74.96%);
  position: absolute;
  inset: 0;
}

.hidden {
  display: none !important;
}

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

.dis-scroll {
  width: 100%;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  overscroll-behavior: none;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

h1, h2, h3 {
  font-weight: var(--fw-700);
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--font-family-primary);
  color: var(--color-text-general);
  font-size: 38px;
  overflow: hidden;
}

@media only screen and (max-width: 576px) {
  h1, h2, h3 {
    line-height: 1.2;
  }
}

@media only screen and (max-width: 992px) {
  h1 {
    font-size: 30px;
  }

  h2, h3 {
    font-size: 26px;
  }

  p {
    font-size: 18px;
  }
}

a, button {
  font-weight: 400;
  font-family: var(--font-family-primary);
}

h2 {
  color: var(--color-text-general);
  line-height: 1.2;
}

h3 {
  color: var(--color-dark);
  font-size: 26px;
  line-height: 1.2;
}

p {
  color: var(--color-text-subtitles);
  font-size: 26px;
  line-height: 1.2;
}

.header {
  z-index: 10;
  width: 100%;
  background-color: var(--color-page-background);
  border-top: 1px solid var(--color-beige);
  border-bottom: 1px solid var(--color-beige);
  padding: 12px 0;
  transition-property: transform, padding;
  transition-duration: .15s;
  position: fixed;
  top: 0;
}

.header.hide {
  transform: translateY(-100%);
}

.header .btn {
  padding: 7px 20px;
}

.header .btn--simple {
  margin-right: 20px;
}

.header .container {
  max-width: 1390px;
}

@media only screen and (max-width: 768px) {
  .header .nav {
    align-items: flex-start;
  }

  .header .nav .logo {
    margin-bottom: 0;
  }
}

.nav {
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.nav .logo {
  max-width: 302px;
  width: 100%;
}

.nav__inner {
  width: 100%;
  justify-content: flex-end;
  display: flex;
}

@media only screen and (max-width: 992px) {
  .nav__inner {
    z-index: -1;
    padding-top: calc(var(--header-height) * 1.5);
    width: 100%;
    height: calc(var(--vh));
    background-color: var(--color-white);
    flex-direction: column;
    justify-content: flex-start;
    transition-property: transform;
    transition-duration: .4s;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    transform: translateX(150%);
  }
}

.nav__list {
  align-items: center;
  margin: 0 20px 0 0;
  display: flex;
}

@media only screen and (max-width: 992px) {
  .nav__list {
    z-index: -1;
    flex-direction: column;
    margin: 0;
  }
}

.nav__item:not(:last-of-type) {
  margin-right: 24px;
}

@media only screen and (max-width: 992px) {
  .nav__item:not(:last-of-type) {
    margin-right: 0;
  }

  .nav__item {
    margin-bottom: 15px;
  }
}

.nav__link {
  font-weight: var(--fw-500);
  color: var(--color-text-general);
  font-size: 18px;
}

.nav__link.true {
  border-bottom: 2px solid var(--color-text-general);
}

@media only screen and (max-width: 992px) {
  .nav .btn {
    margin: 0 auto 8px;
  }
}

@media only screen and (max-width: 768px) {
  .nav .logo {
    max-width: 300px;
  }
}

.btn {
  border-radius: calc(var(--radius-main) / 1.5);
  font-size: 18px;
  font-weight: var(--fw-500);
  padding: 20px 32px;
  line-height: 1.21;
  display: inline-block;
}

.btn--request, .btn.formsapp-popup-button {
  background-color: var(--color-brown);
  color: var(--color-white);
  border: 1px solid #0000;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
}

@media only screen and (max-width: 1180px) {
  .btn--request, .btn.formsapp-popup-button {
    font-size: 18px;
    padding: 10px 20px !important;
  }
}

.btn--request:hover, .btn--request:focus, .btn.formsapp-popup-button:hover, .btn.formsapp-popup-button:focus {
  background-color: var(--color-brown-10);
}

.btn--simple {
  color: var(--color-brown);
  border: 1px solid var(--color-brown);
  background-color: #0000;
}

@media only screen and (max-width: 1180px) {
  .btn--simple {
    font-size: 18px;
    padding: 10px 20px !important;
  }
}

.btn--simple:hover, .btn--simple:focus {
  background-color: var(--color-beige-03);
}

.burger {
  --line-height: 2px;
  --buger-size: 20px;
  --move: calc(var(--buger-size) / 3);
  --move-decrement: calc(var(--move) * -1);
  --transition-time: .5s;
  --lines-color: var(--color-black);
  width: calc(var(--buger-size)  + 5px);
  height: var(--buger-size);
  transition: opacity var(--transition-time) ease;
  background-color: #0000;
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.burger span {
  z-index: -1;
  width: 100%;
  height: var(--line-height);
  background-color: var(--lines-color);
  transition: transform var(--transition-time) ease, background-color var(--transition-time) ease .3s;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.burger span:before, .burger span:after {
  content: "";
  width: 100%;
  height: var(--line-height);
  background-color: var(--lines-color);
  animation-duration: .4s;
  animation-timing-function: cubic-bezier(.645, .045, .355, 1);
  animation-fill-mode: forwards;
  position: absolute;
  left: 0;
}

.burger span:before {
  transform: translateY(var(--move-decrement)) rotate(0);
}

.burger span:after {
  transform: translateY(var(--move)) rotate(0);
}

.burger:hover {
  opacity: 1;
}

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

.closed.opened span {
  background-color: var(--lines-color);
  transition: background-color .2s;
}

.closed.opened span:before {
  animation-name: toplineburger;
}

.closed.opened span:after {
  animation-name: bottomlineburger;
}

.opened .nav__inner {
  transform: translateX(0);
}

.opened span {
  background-color: #0000;
  transition: background-color .2s;
}

.opened span:before, .opened span:after {
  animation-duration: .2s;
  animation-timing-function: cubic-bezier(.645, .045, .355, 1);
  animation-fill-mode: forwards;
}

.opened span:before {
  animation-name: toplinecross;
}

.opened span:after {
  animation-name: bottomlinecross;
}

.hero {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 213px;
  display: flex;
}

.hero__inner {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.hero__content {
  z-index: 1;
  width: 100%;
  max-width: 544px;
  padding: 0 20px;
  translate: 0 -28px;
}

.hero__image {
  margin-right: 52px;
}

.hero h1 {
  margin-bottom: 24px;
  font-size: 38px;
  line-height: 1.2;
}

.hero p {
  margin-bottom: 32px;
  font-size: 26px;
  line-height: 1.2;
}

.hero__btns .btn {
  max-height: unset;
  padding: 17px 32px;
}

.hero__btns .btn--simple {
  margin-right: 24px;
}

.hero--services {
  margin-bottom: 0;
  padding: 122px 0 96px;
}

.hero--services .hero__inner {
  min-height: 542px;
  overflow: unset;
  background-position: bottom;
}

.hero--services .hero__inner h1 {
  color: var(--color-text-general);
  margin-bottom: 23px;
}

.hero--services .hero__content {
  max-width: 564px;
  position: relative;
  top: -45px;
}

.hero--services .overlay:before {
  display: none;
}

.hero--services p {
  color: var(--color-text-subtitles);
  font-size: 26px;
  line-height: 1.2;
}

.hero--about .hero__content {
  max-width: 427px;
}

.hero--portfolio {
  justify-content: end;
  margin-bottom: 0;
}

.hero--portfolio .hero__inner {
  min-height: 671px;
  width: 100%;
  background-position: 0 55%;
  background-size: cover;
  align-items: flex-end;
}

.hero--portfolio .hero__content {
  max-width: 640px;
  padding: 72px 56px;
}

@media only screen and (max-width: 1330px) {
  .hero {
    margin-bottom: 113px;
  }

  .hero__image {
    max-width: 600px;
  }
}

@media only screen and (max-width: 1180px) {
  .hero h1 {
    font-size: 30px;
  }

  .hero h2 {
    font-size: 26px;
  }

  .hero p {
    font-size: 18px;
  }

  .hero__btns .btn {
    max-height: unset;
    padding: 10px 20px;
  }

  .hero__btns .btn--simple {
    margin-right: 12px;
  }

  .hero__image {
    max-width: 500px;
  }
}

@media only screen and (max-width: 992px) {
  .hero {
    margin-bottom: 0;
    padding: 0;
  }

  .hero__inner {
    min-height: 442px;
  }

  .hero__image {
    max-width: 400px;
    margin-right: 12px;
  }

  .hero--services .hero__content {
    top: 90px;
  }
}

@media only screen and (max-width: 768px) {
  .hero {
    flex-direction: column;
    align-items: center;
  }

  .hero .hero__inner {
    background-position: 0;
    background-size: cover;
    padding: 20px 0;
    position: relative;
  }

  .hero--home, .hero--about {
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
  }

  .hero--home .hero__content, .hero--about .hero__content {
    padding: 10px;
    translate: 0;
  }

  .hero--home .hero__image, .hero--about .hero__image {
    max-width: 100%;
    max-height: 300px;
    margin-right: 0;
  }

  .hero--services .hero__content {
    top: 40px;
  }
}

.services {
  padding: 100px 0;
}

.services .container--services {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.services__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 65px;
  display: grid;
}

.services__item {
  flex-direction: column;
  display: flex;
  position: relative;
}

.services__image {
  border-radius: calc(var(--radius-main)  + 4px);
  max-height: 400px;
  height: 100%;
  max-width: 384px;
  box-shadow: var(--shadow-primary);
  margin-bottom: 44px;
  overflow: hidden;
}

.services h2 {
  margin-bottom: 38px;
}

.services h3 {
  font-size: 26px;
  font-weight: var(--fw-700);
  line-height: 1.2;
}

.services .btn {
  max-height: unset;
  padding: 17px 31px;
  display: inline-block;
}

.services--blog {
  padding: 106px 0;
}

.services--blog .services__header {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.services--blog h2 {
  margin-bottom: 44px;
}

.services--blog .services__grid {
  gap: 57px;
}

.services--blog .services__grid a {
  font-size: 26px;
  font-weight: var(--fw-400);
  color: var(--color-dark);
  word-break: break-all;
  line-height: 1.2;
}

.services--blog .services__image {
  border-radius: 40px;
}

.services--blog .btn {
  max-height: 58px;
  line-height: 1;
}

.services--services .services__grid {
  gap: 80px 32px;
  margin-bottom: 0;
}

@media only screen and (max-width: 992px) {
  .services--services .services__grid {
    gap: 30px;
  }
}

.services--services .services__image {
  margin-bottom: 20px;
}

.services--services .services__content {
  max-width: 341px;
}

.services--services .services__content h3 {
  margin-bottom: 20px;
}

.services--services .services__content p {
  font-size: 18px;
  font-weight: var(--fw-500);
  color: var(--color-dark);
  margin-bottom: 20px;
}

.services--services .services__content ul, .services--services .services__content li {
  list-style: disc;
}

.services--services .services__content ul {
  padding-left: 20px;
}

.services--services .services__content li {
  font-size: 18px;
  font-weight: var(--fw-500);
  color: var(--color-dark);
}

.services--services h2 {
  margin-bottom: 20px;
}

.services--services p {
  margin-bottom: 80px;
}

@media only screen and (max-width: 992px) {
  .services--services p {
    margin-bottom: 30px;
  }
}

@media only screen and (max-width: 1280px) {
  .services {
    padding: 60px 0;
  }

  .services h2 {
    margin-bottom: 23px;
  }

  .services h3 {
    font-size: 20px;
  }

  .services__image {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 5 / 4;
    margin-bottom: 23px;
  }

  .services--blog .services__grid {
    gap: 30px;
  }

  .services--blog span a {
    font-size: 18px;
  }
}

@media only screen and (max-width: 992px) {
  .services {
    padding: 30px 0;
  }

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

  .services__item:last-child {
    grid-column: 1 / span 2;
  }
}

@media only screen and (max-width: 768px) {
  .services__grid {
    grid-template-columns: 1fr;
  }

  .services__item:last-child {
    grid-column: auto;
  }
}

@media only screen and (max-width: 576px) {
  .services .btn {
    max-width: none;
  }

  .services__grid[class] {
    gap: 12px;
    margin-bottom: 20px;
  }
}

.featured {
  margin-bottom: 4.25rem;
}

.featured__content {
  border-radius: calc(var(--radius-main) * 2);
  min-height: 360px;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--color-gray-400);
  margin-bottom: 20px;
  padding: 2rem 4.1875rem;
  overflow: hidden;
}

.featured__content p {
  max-width: 675px;
  font-size: clamp(1rem, .9294rem + .3562vi, 20px);
}

.featured__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  display: grid;
}

.featured__item {
  border-radius: calc(var(--radius-main) * 2);
  background-color: var(--color-gray-400);
  padding: 2.0625rem;
  overflow: hidden;
}

.featured__item h3 {
  margin-bottom: 16px;
  font-size: 24px;
  line-height: 1.25;
}

.featured__image {
  border-radius: calc(var(--radius-main) * 2);
  height: 100%;
  max-height: 228px;
  margin-bottom: 24px;
  overflow: hidden;
}

.featured--who {
  padding-top: 3.625rem;
}

.featured--who .featured__content {
  min-height: 435px;
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.featured--who .featured__content p {
  max-width: 535px;
}

.featured--who h2 {
  margin: 0 auto 27px;
}

@media only screen and (max-width: 992px) {
  .featured--who .featured__content {
    background-size: 100%;
    justify-content: flex-start;
  }

  .featured:not(.featured--who) {
    background-color: var(--color-gray-400);
    margin: 0 -16px;
    padding: 0;
  }

  .featured__content {
    min-height: 400px;
    background-size: contain;
    padding-top: 3.125rem;
  }

  .featured__content h2 {
    margin-bottom: 20px;
  }

  .featured__content p {
    max-width: 600px;
  }

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

  .featured__item:last-child {
    max-width: 360px;
    grid-column: 1 / span 2;
    justify-self: center;
  }
}

@media only screen and (max-width: 768px) {
  .featured {
    margin-bottom: 30px;
  }

  .featured__grid {
    grid-template-columns: 1fr;
  }

  .featured__content {
    min-height: 400px;
    background-position: 100% 100%;
    background-size: 150%;
    border-radius: 0;
    padding: 40px 0 0 20px;
  }

  .featured__item {
    border-radius: 0;
    flex-direction: column;
    justify-self: center;
    align-items: center;
    padding: 24px;
    display: flex;
  }

  .featured__item:last-child {
    max-width: none;
    grid-column: auto;
  }

  .featured h3 {
    display: inline-table;
  }
}

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

  .featured__image {
    width: 100%;
  }
}

.faq {
  padding: 72px 0 205px;
}

.faq__list {
  margin-bottom: 2rem;
}

.faq__item {
  background-color: var(--color-white);
  border-radius: 8px;
}

.faq__item:not(:last-child) {
  margin-bottom: 32px;
}

.faq details {
  overflow: hidden;
}

.faq details p {
  font-size: 16px;
  font-weight: var(--fw-400);
  color: var(--color-gray-09);
  line-height: 1.2;
}

.faq details[open] summary:before {
  rotate: unset;
}

.faq summary {
  font-family: var(--font-family-primary);
  font-weight: var(--fw-600);
  color: var(--color-black-10);
  cursor: pointer;
  padding: 16px 30px 16px 24px;
  font-size: 18px;
  line-height: 1.2;
  position: relative;
}

.faq summary:before {
  content: "";
  border-radius: var(--radius-main);
  width: 18px;
  height: 11px;
  color: var(--color-brown);
  background-image: url("data:image/svg+xml,%3Csvg width='19' height='12' viewBox='0 0 19 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.63031 0.666706C9.3965 0.665355 9.16473 0.71017 8.94828 0.798579C8.73183 0.886989 8.53495 1.01725 8.36895 1.18191L1.26271 8.28815C1.09706 8.4538 0.965667 8.65045 0.876021 8.86687C0.786375 9.08329 0.740234 9.31526 0.740234 9.54951C0.740234 9.78377 0.786375 10.0157 0.876021 10.2322C0.965667 10.4486 1.09706 10.6452 1.26271 10.8109C1.42835 10.9765 1.625 11.1079 1.84142 11.1976C2.05785 11.2872 2.28981 11.3333 2.52407 11.3333C2.75832 11.3333 2.99028 11.2872 3.20671 11.1976C3.42313 11.1079 3.61978 10.9765 3.78542 10.8109L9.63031 4.93045L15.493 10.5799C15.6564 10.7616 15.8556 10.9077 16.078 11.0089C16.3005 11.1102 16.5414 11.1644 16.7858 11.1683C17.0301 11.1722 17.2727 11.1256 17.4982 11.0314C17.7238 10.9373 17.9275 10.7976 18.0966 10.6212C18.2657 10.4447 18.3966 10.2353 18.481 10.0059C18.5655 9.77657 18.6017 9.53227 18.5875 9.28828C18.5732 9.0443 18.5087 8.80588 18.3981 8.58794C18.2875 8.37 18.1331 8.17722 17.9446 8.02167L10.8384 1.16414C10.5135 0.850908 10.0816 0.673059 9.63031 0.666706Z' fill='%23532800'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 10px;
  position: absolute;
  top: 45%;
  right: 10px;
  overflow: hidden;
  rotate: 180deg;
}

.faq summary + div {
  padding: 12px 24px;
}

.faq h2 {
  text-align: center;
  margin: 0 auto 28px;
}

.faq a {
  margin: 0 auto;
}

@media only screen and (max-width: 768px) {
  .faq {
    padding: 30px 0;
  }

  .faq summary {
    line-height: 1.2;
  }

  .faq br {
    display: none;
  }
}

@keyframes toplinecross {
  0% {
    transform: translateY(var(--move-decrement));
  }

  50% {
    transform: translateY(0);
  }

  100% {
    transform: rotate(45deg);
  }
}

@keyframes bottomlinecross {
  0% {
    transform: translateY(var(--move));
  }

  50% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(0)rotate(-45deg);
  }
}

@keyframes toplineburger {
  0% {
    transform: rotate(45deg);
  }

  50% {
    transform: rotate(0);
  }

  100% {
    transform: translateY(var(--move-decrement)) rotate(0);
  }
}

@keyframes bottomlineburger {
  0% {
    transform: translateY(0)rotate(-45deg);
  }

  50% {
    transform: rotate(0);
  }

  100% {
    transform: translateY(var(--move)) rotate(0);
  }
}

.policy {
  color: var(--color-gray-09);
  flex-direction: column;
  align-items: center;
  padding: 125px 0 203px;
  display: flex;
}

.policy h1 {
  color: var(--color-tile-800);
  margin-bottom: 48px;
  font-size: clamp(32px, 1.6176rem + 1.3vi, 56px);
  position: relative;
}

.policy h2 {
  font-family: var(--font-family-primary);
  font-weight: var(--fw-600);
  color: var(--color-black-10);
  margin-bottom: 24px;
  font-size: 30px;
  line-height: 1.3;
}

.policy p {
  font-size: 20px;
  font-weight: var(--fw-400);
  color: var(--color-gray-09);
  line-height: 1.21;
}

.policy p:not(:last-child), .policy ul {
  margin-bottom: 48px;
}

.policy ul li {
  font-size: 20px;
  font-weight: var(--fw-400);
  color: var(--color-gray-09);
  line-height: 1.21;
}

.policy a {
  color: var(--color-brown);
  text-decoration: underline;
}

.policy--terms {
  padding: 125px 0 197px;
}

@media only screen and (max-width: 992px) {
  .policy {
    padding: 30px 0;
  }
}

.footer {
  width: 100%;
  background-color: var(--color-page-background);
  border-top: 1px solid var(--color-beige);
  border-bottom: 1px solid var(--color-beige);
  transition-property: transform, padding;
  transition-duration: .15s;
  position: relative;
}

.footer__copyrigth {
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-gray);
  padding: 75px 0;
}

.footer__copyrigth .copyrigth__inner {
  max-width: 1216px;
  justify-content: space-between;
  margin: 0 auto;
  display: flex;
}

@media only screen and (max-width: 768px) {
  .footer__copyrigth .copyrigth__inner {
    flex-direction: column;
    align-items: center;
  }

  .footer__copyrigth .copyrigth__inner p {
    padding-bottom: 23px;
  }
}

.footer__copyrigth .copyrigth__list {
  display: flex;
}

.footer__copyrigth .copyrigth__item:not(:last-child) {
  margin-right: 48px;
}

@media only screen and (max-width: 992px) {
  .footer__copyrigth {
    padding: 30px 0;
  }
}

.footer__nav {
  align-items: center;
  display: flex;
}

.footer__nav__link {
  background-color: var(--color-page-background);
}

@media only screen and (max-width: 992px) {
  .footer__nav {
    flex-direction: column;
  }

  .footer__nav .logo {
    margin-bottom: 24px;
  }
}

.footer__inner {
  width: 100%;
  justify-content: flex-end;
  display: flex;
}

@media only screen and (max-width: 992px) {
  .footer__inner {
    justify-content: center;
    align-items: center;
  }
}

.footer .nav__list {
  z-index: 0;
  flex-direction: row;
}

@media only screen and (max-width: 992px) {
  .footer .nav__item {
    margin-bottom: 0;
    margin-right: 12px;
  }
}

.footer .logo {
  max-width: 302px;
  width: 100%;
}

.footer .btn {
  padding: 8px 20px;
}

.footer p {
  color: var(--color-white);
  font-size: 16px;
}

.footer .container {
  max-width: 1390px;
  padding: 12px var(--container-offset);
}

.footer .btn--simple {
  margin-right: 20px;
}

@media only screen and (max-width: 768px) {
  .footer .btn--simple {
    margin-bottom: 20px;
    margin-right: 0;
  }

  .footer__nav {
    align-items: center;
  }

  .footer__inner {
    flex-direction: column;
    align-items: center;
  }

  .footer .nav__list, .footer .logo {
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 475px) {
  .footer .nav__list {
    flex-direction: column;
  }

  .footer .nav__item {
    margin-bottom: 20px;
  }
}

.blog {
  padding: 88px 0 159px;
}

.blog h1 {
  margin-bottom: 23px;
}

.blog h2 {
  color: var(--color-black-10);
  font-size: 26px;
  font-weight: var(--fw-400);
  line-height: 1.2;
}

.blog p {
  font-size: 26px;
  font-weight: var(--fw-400);
  margin-bottom: 60px;
  line-height: 1.2;
}

.blog__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 57px;
  display: grid;
}

.blog__item {
  cursor: pointer;
}

.blog__image {
  border-radius: 40px;
  margin-bottom: 20px;
  overflow: hidden;
}

@media only screen and (max-width: 992px) {
  .blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog__item:last-child {
    max-width: 360px;
    grid-column: 1 / span 2;
    justify-self: center;
  }
}

@media only screen and (max-width: 768px) {
  .blog {
    margin-bottom: 30px;
  }

  .blog__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .blog__item {
    border-radius: 0;
    flex-direction: column;
    justify-self: center;
    align-items: center;
    padding: 24px;
    display: flex;
  }

  .blog__item:last-child {
    max-width: none;
    grid-column: auto;
  }
}

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

  .blog__image {
    width: 100%;
  }
}

.baner {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.baner__inner {
  width: 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
  overflow: hidden;
}

.baner__content {
  z-index: 1;
  width: 100%;
  min-width: 500px;
  max-width: 550px;
  padding: 12px 20px;
  position: relative;
  bottom: 124px;
  left: 112px;
}

.baner__content--bg {
  background-color: var(--color-black-01);
}

.baner h2 {
  color: var(--color-white);
  margin-bottom: 24px;
  font-size: 38px;
  line-height: 1.2;
}

.baner p {
  font-weight: var(--fw-400);
  color: var(--color-white);
  font-size: 26px;
  line-height: 1.2;
}

.baner--wedding .baner__inner {
  min-height: 780px;
}

.baner--parties .baner__inner, .baner--commercials .baner__inner {
  min-height: 720px;
}

@media only screen and (max-width: 768px) {
  .baner__inner {
    min-height: 440px;
  }

  .baner__content {
    min-width: unset;
    bottom: 20px;
    left: 20px;
  }

  .baner h2 {
    margin-bottom: 23px;
    font-size: 26px;
  }

  .baner p {
    font-size: 18px;
  }

  .baner--wedding .baner__inner, .baner--parties .baner__inner, .baner--commercials .baner__inner {
    min-height: 440px;
  }
}

@media only screen and (max-width: 475px) {
  .baner__content {
    position: static;
  }
}

.additional {
  justify-content: flex-end;
  align-items: center;
  padding: 100px 0;
  display: flex;
}

.additional__box {
  flex-direction: column;
  display: flex;
}

.additional__content {
  max-width: 534px;
  margin-bottom: 23px;
}

.additional__image {
  overflow: hidden;
}

.additional h2 {
  font-size: 38px;
  font-weight: var(--fw-700);
  margin-bottom: 23px;
}

.additional p {
  font-size: 26px;
  font-weight: var(--fw-400);
  line-height: 1.2;
}

.additional .btn {
  max-height: unset;
  max-width: 164px;
  padding: 20px 32px;
}

.additional--reverse {
  flex-direction: row-reverse;
}

.additional--fashion {
  justify-content: center;
  align-items: center;
  padding: 124px 0 61px;
}

.additional--fashion .additional__image {
  margin-right: 154px;
}

.additional--fashion root__content {
  max-width: 564px;
}

.additional--portraits {
  padding: 181px 0;
}

.additional--portraits root__content {
  max-width: 524px;
  margin-right: 30px;
}

@media only screen and (max-width: 992px) {
  .additional {
    padding: 3.75rem 0;
  }

  .additional__inner {
    min-height: auto;
  }

  .additional__box {
    padding: 1.875rem 0 1.875rem 1.875rem;
  }

  .additional__content {
    max-width: 500px;
    padding: 24px;
  }
}

@media only screen and (max-width: 768px) {
  .additional, .additional--reverse {
    flex-direction: column;
  }

  .additional__content {
    border-radius: 0;
    margin-bottom: 56px;
    padding: 0;
  }

  .additional__inner {
    border-radius: 0;
  }

  .additional__image {
    border-radius: 0;
    position: relative;
  }

  .additional__box {
    flex-direction: column;
    padding: 0;
    display: flex;
  }

  .additional--fashion .additional__image {
    display: none;
  }

  .additional h2 {
    color: var(--color-tile-800);
    margin-bottom: 10px;
  }

  .additional .overlay:before {
    display: none;
  }
}

.categories {
  flex-direction: column;
  align-items: center;
  padding: 131px 0 132px;
  display: flex;
}

.categories__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
  display: grid;
}

.categories__item {
  display: flex;
  position: relative;
}

.categories img {
  border-radius: var(--radius-main);
  max-height: 160px;
  height: 100%;
  max-width: 160px;
  box-shadow: var(--shadow-primary);
  margin-right: 44px;
  overflow: hidden;
}

.categories h2 {
  color: var(--color-text-general);
  margin-bottom: 60px;
}

.categories h3 {
  font-size: 26px;
  font-weight: var(--fw-700);
  color: var(--color-dark);
  line-height: 1.2;
}

@media only screen and (max-width: 992px) {
  .categories {
    padding: 60px 0;
  }

  .categories__item {
    flex-direction: column;
  }

  .categories img {
    margin-bottom: 12px;
    margin-right: 0;
  }

  .categories h3 {
    font-size: 20px;
  }
}

@media only screen and (max-width: 374px) {
  .categories__grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 23px;
  }
}

.gallery {
  padding: 100px 0;
}

.gallery h2 {
  color: var(--color-text-general);
  font-size: 38px;
  font-weight: var(--fw-700);
  margin-bottom: 40px;
  line-height: 1.2;
}

.gallery__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  display: grid;
}

.gallery__image {
  border-radius: var(--radius-main);
  max-width: 384px;
  height: 100%;
  max-height: 400px;
  box-shadow: var(--shadow-primary);
  overflow: hidden;
}

@media only screen and (max-width: 1180px) {
  .gallery__image {
    max-width: 100%;
  }
}

@media only screen and (max-width: 992px) {
  .gallery {
    padding: 30px 0;
  }

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

  .gallery__item:last-child {
    max-width: 360px;
    grid-column: 1 / span 2;
    justify-self: center;
  }
}

@media only screen and (max-width: 768px) {
  .gallery__grid {
    gap: 10px;
  }

  .gallery__item {
    border-radius: 0;
    flex-direction: column;
    justify-self: center;
    align-items: center;
    display: flex;
  }

  .gallery__item:last-child {
    max-width: none;
    grid-column: auto;
  }
}

@media only screen and (max-width: 576px) {
  .gallery__image {
    width: 100%;
  }
}

.article {
  color: var(--color-gray-09);
  padding: 111px 0 149px;
}

.article__header {
  margin-bottom: 13px;
  display: flex;
}

.article__header a {
  min-width: 119px;
  min-height: 40px;
  font-size: 18px;
  line-height: 1;
  font-weight: var(--fw-500);
  margin-right: 16px;
  padding-top: 11px;
}

.article__header a:before {
  content: url("data:image/svg+xml,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.414531 6.39792L5.47703 11.4604C5.58258 11.566 5.72573 11.6253 5.875 11.6253C6.02427 11.6253 6.16742 11.566 6.27297 11.4604C6.37852 11.3549 6.43781 11.2117 6.43781 11.0624C6.43781 10.9132 6.37852 10.77 6.27297 10.6645L2.17023 6.56245H13.1875C13.3367 6.56245 13.4798 6.50318 13.5852 6.39769C13.6907 6.29221 13.75 6.14913 13.75 5.99995C13.75 5.85076 13.6907 5.70769 13.5852 5.6022C13.4798 5.49671 13.3367 5.43745 13.1875 5.43745H2.17023L6.27297 1.33542C6.37852 1.22987 6.43781 1.08671 6.43781 0.937447C6.43781 0.788179 6.37852 0.645026 6.27297 0.539478C6.16742 0.43393 6.02427 0.374634 5.875 0.374634C5.72573 0.374634 5.58258 0.43393 5.47703 0.539478L0.414531 5.60198C0.362232 5.65422 0.320742 5.71626 0.292435 5.78454C0.264128 5.85283 0.249557 5.92603 0.249557 5.99995C0.249557 6.07387 0.264128 6.14706 0.292435 6.21535C0.320742 6.28364 0.362232 6.34567 0.414531 6.39792Z' fill='%232C2C2E'/%3E%3C/svg%3E");
  margin-right: 13px;
  padding-left: 24px;
}

.article__inner {
  border-bottom: 1px solid var(--color-gray-06);
  margin-bottom: 24px;
}

.article h1 {
  color: var(--color-text-general);
  margin-bottom: 16px;
  position: relative;
}

.article span {
  font-size: 20px;
  font-weight: var(--fw-400);
  color: var(--color-gray-07);
  line-height: 1.2;
}

.article h2 {
  font-family: var(--font-family-primary);
  font-weight: var(--fw-600);
  color: var(--color-black-10);
  margin-bottom: 24px;
  font-size: 30px;
  line-height: 1.3;
}

.article p {
  font-size: 18px;
  font-weight: var(--fw-500);
  color: var(--color-gray-09);
  line-height: 1.21;
}

.article p:not(:last-child) {
  margin-bottom: 24px;
}

.article__image {
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: hidden;
}

.article__image:first-child {
  margin-bottom: 64px;
}

.about {
  justify-content: space-between;
  padding: 100px 0;
  display: flex;
}

.about__box {
  flex-direction: column;
  display: flex;
}

.about__content {
  max-width: 534px;
  margin-bottom: 20px;
}

.about img {
  border-radius: calc(var(--radius-main)  + 4px);
  box-shadow: var(--shadow-primary);
  overflow: hidden;
}

.about h2 {
  font-size: 38px;
  font-weight: var(--fw-700);
  margin-bottom: 23px;
}

.about p {
  font-size: 26px;
  font-weight: var(--fw-400);
  line-height: 1.2;
}

.about .btn {
  max-height: unset;
  max-width: -moz-fit-content;
  max-width: fit-content;
  padding: 18px 31px;
}

.about--about {
  align-items: center;
  padding: 100px 0 80px;
}

.about--services .about__image {
  overflow: unset;
  border-radius: unset;
  box-shadow: unset;
}

.about--services h2 {
  margin-bottom: 60px;
}

.about--services .about__content ul {
  padding-left: 30px;
}

.about--services .about__content ul, .about--services .about__content li {
  list-style: decimal;
}

.about--services .about__content li {
  font-size: 26px;
  font-weight: var(--fw-400);
  color: var(--color-gray-08);
  line-height: 1.21;
}

.about--services .about__content li:not(:last-child) {
  margin-bottom: 10px;
}

@media only screen and (max-width: 768px) {
  .about--services .about__content li {
    font-size: 18px;
  }
}

@media only screen and (max-width: 992px) {
  .about {
    padding: 60px 0 30px;
  }

  .about h2 {
    font-size: 26px;
    font-weight: var(--fw-700);
    margin-bottom: 23px;
  }

  .about p {
    font-size: 18px;
  }

  .about .btn {
    padding: 20px 32px;
  }

  .about__inner {
    min-height: auto;
  }

  .about__box {
    padding: 24px;
  }

  .about__content {
    max-width: 500px;
  }
}

@media only screen and (max-width: 768px) {
  .about__content {
    border-radius: 0;
    margin-bottom: 12px;
    padding: 0;
  }

  .about__inner {
    border-radius: 0;
  }

  .about__image {
    border-radius: 0;
    position: relative;
  }

  .about__box {
    flex-direction: column;
    margin-right: 12px;
    padding: 0;
    display: flex;
  }

  .about h2 {
    color: var(--color-tile-800);
    margin-bottom: 10px;
  }

  .about .overlay:before {
    display: none;
  }

  .about--services {
    flex-direction: column;
  }

  .about--services img {
    aspect-ratio: 5 / 3;
    width: 100%;
  }

  .about--services .about__box {
    margin-right: 0;
  }

  .about--services .about__content {
    max-width: unset;
  }
}

@media only screen and (max-width: 576px) {
  .about {
    flex-direction: column-reverse;
  }

  .about__image {
    margin-bottom: 12px;
  }
}

.reviews {
  max-width: 100%;
  padding: 5.1875rem 0;
  overflow: hidden;
}

.reviews__slider {
  margin-bottom: 4.0625rem;
}

.reviews__slide {
  opacity: 0;
  visibility: hidden;
  display: flex;
  width: 100% !important;
  height: auto !important;
}

.reviews__slide.swiper-slide-active {
  opacity: 1;
  visibility: visible;
}

.reviews__content {
  border-radius: calc(var(--radius-main) * 2);
  width: 100%;
  max-width: 480px;
  background-color: var(--color-gray-400);
  flex-direction: column;
  margin-right: 22px;
  padding: 2rem;
  display: flex;
  overflow: hidden;
}

.reviews__header {
  margin-bottom: 1.4375rem;
  display: flex;
}

.reviews__avatar {
  width: 64px;
  height: 64px;
  border-radius: 100%;
  margin-right: 25px;
}

.reviews__image {
  border-radius: calc(var(--radius-main) * 2);
  width: 100%;
  max-width: 670px;
  overflow: hidden;
}

.reviews__image img {
  height: 100%;
}

.reviews__btns {
  margin-top: auto;
  display: flex;
}

.reviews__btns .btn {
  width: auto;
  min-width: auto;
  border: none;
  padding: 14px 18px;
}

.reviews__btns .btn:after {
  right: 0;
}

.reviews__btns .btn:not(:last-child) {
  margin-right: 20px;
}

.reviews__btns .btn.swiper-button-disabled {
  border-color: var(--color-gray-650);
  background-color: var(--color-gray-650);
  pointer-events: none;
}

.reviews__btns .btn--prev {
  scale: -1 1;
}

.reviews__btn {
  margin: 0 auto;
}

.reviews h2 {
  margin: 0 auto 1.875rem;
}

.reviews h3 {
  font-family: var(--font-family-primary);
  font-weight: var(--fw-500);
  margin-bottom: 10px;
  font-size: 24px;
}

.reviews p {
  color: var(--color-gray-700);
  margin-bottom: 30px;
  font-size: 20px;
}

.reviews svg {
  max-height: 20px;
}

.reviews .swiper-scrollbar {
  display: none;
}

.reviews .swiper-scrollbar-drag {
  background-color: var(--color-tile-800);
}

@media only screen and (max-width: 992px) {
  .reviews {
    padding: 3.75rem 0;
  }

  .reviews__slider {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 768px) {
  .reviews__slide {
    align-items: center;
    display: block;
  }

  .reviews__image {
    max-width: 500px;
    margin-bottom: 12px;
  }

  .reviews__content {
    max-width: 500px;
    margin: 0 0 20px;
    padding: 20px;
  }
}

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

  .reviews .swiper-scrollbar {
    margin-top: 16px;
    display: block;
    position: relative !important;
  }
}

.request {
  flex-direction: column;
  align-items: center;
  padding: 23px 0 120px;
  display: flex;
}

.request__form {
  max-width: 800px;
  width: 100%;
  background-color: var(--color-white);
  border-radius: 8px;
  flex-direction: column;
  padding: 34px 32px;
  display: flex;
}

.request input {
  background-color: var(--color-gray-06);
  max-width: 736px;
  width: 100%;
  max-height: 48px;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 16px;
}

.request textarea {
  background-color: var(--color-gray-06);
  max-width: 736px;
  min-height: 156px;
  width: 100%;
  resize: none;
  border: none;
  border-radius: 8px;
  outline: none;
  margin-bottom: 18px;
  padding: 16px;
}

.request h2 {
  margin-bottom: 48px;
}

.request .btn {
  max-width: 180px;
  padding: 15px 24px;
  line-height: 1;
}

.request--services {
  padding: 60px 0;
}

.request--services h2 {
  margin-bottom: 23px;
}

.request--services h3 {
  font-size: 26px;
  font-weight: var(--fw-400);
  color: var(--color-text-subtitles);
  line-height: 1.2;
}

.request--services span {
  color: var(--color-brown);
  font-weight: var(--fw-700);
}

@media only screen and (max-width: 992px) {
  .request {
    padding: 3.75rem 0;
  }

  .request__form {
    margin-bottom: 20px;
  }

  .request a {
    margin-bottom: 20px;
    font-size: 20px;
  }
}

@media only screen and (max-width: 576px) {
  .request {
    border-radius: calc(var(--radius-main) * 2) calc(var(--radius-main) * 2) 0 0;
  }

  .request__form-field, .request__form-box {
    flex-direction: column;
    gap: 5px;
  }

  .request .request__btn {
    display: none;
  }

  .request .btn--send {
    max-width: none;
    text-align: center;
  }

  .request .btn--send:after {
    display: none;
  }

  .request .btn--send span {
    display: block;
  }

  .request h2, .request h3, .request a, .request label {
    text-align: left;
    margin-left: 0;
  }

  .request textarea {
    height: 120px;
    margin-bottom: 20px;
    overflow: hidden;
  }
}

.portfolio {
  padding: 100px 0 95px;
}

.portfolio h2 {
  margin-bottom: 23px;
}

.portfolio p {
  margin-bottom: 20px;
}

.portfolio__image {
  border-radius: var(--radius-main);
  max-height: 567px;
  margin-bottom: 17px;
}

@media only screen and (max-width: 992px) {
  .portfolio {
    padding: 3.75rem 0;
  }

  .portfolio p {
    font-size: 18px;
  }

  .portfolio__image {
    max-height: 300px;
    object-position: 0 -500px;
  }
}

@media only screen and (max-width: 768px) {
  .portfolio__image {
    object-position: unset;
  }
}

.clients {
  flex-direction: column;
  align-items: center;
  padding: 25px 0 100px;
  display: flex;
}

.clients h2 {
  margin-bottom: 80px;
}

.clients__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  display: grid;
}

.clients__item {
  background-color: var(--color-beige-03);
  border-radius: 20px;
  flex-direction: column;
  padding: 20px 16px;
  display: flex;
  position: relative;
}

.clients p {
  margin-bottom: 20px;
  font-size: 20px;
}

.clients span {
  font-size: 26px;
  font-weight: var(--fw-400);
  color: var(--color-text-general);
  margin-top: auto;
  line-height: 1.2;
}

@media only screen and (max-width: 992px) {
  .clients h2 {
    margin-bottom: 23px;
  }

  .clients__grid {
    gap: 20px;
  }

  .clients p {
    margin-bottom: 20px;
    font-size: 18px;
  }

  .clients span {
    font-size: 20px;
  }
}

@media only screen and (max-width: 768px) {
  .clients {
    padding: 25px 0 30px;
  }

  .clients__grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

.service {
  padding: 4.5625rem 0;
}

.service__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  display: grid;
}

.service__grid:not(:last-child) {
  margin-bottom: 3.75rem;
}

.service__grid:nth-child(2n) .service__image {
  grid-column: 1 / 2;
}

.service__grid:nth-child(2n) .service__content {
  grid-area: 1 / 2 / 2 / 3;
}

.service__list {
  margin-bottom: 5rem;
}

.service__content {
  border-radius: calc(var(--radius-main) * 2);
  background-color: var(--color-gray-400);
  padding: 2.125rem 2.0625rem;
  overflow: hidden;
}

.service__image {
  border-radius: calc(var(--radius-main) * 2);
  overflow: hidden;
}

.service__image img {
  width: 100%;
  height: 100%;
}

.service h2 {
  margin: 0 auto 1.4375rem;
}

.service h3 {
  text-transform: capitalize;
  margin-bottom: 17px;
  font-size: 32px;
}

.service p {
  font-size: 20px;
}

.service .btn {
  margin: 0 auto;
}

@media only screen and (max-width: 768px) {
  .service {
    padding: 30px 0;
  }

  .service__list {
    margin-bottom: 30px;
  }

  .service__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .service__grid:not(:last-child) {
    margin-bottom: 30px;
  }

  .service__grid:nth-child(2n) .service__image {
    grid-column: auto;
  }

  .service__grid:nth-child(2n) .service__content {
    grid-area: auto;
  }

  .service__content {
    padding: 20px;
  }
}

.packages {
  padding: 100px 0;
}

.packages h2 {
  margin-bottom: 23px;
}

.packages__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  display: grid;
}

@media only screen and (max-width: 768px) {
  .packages__grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 23px;
  }
}

.packages__item {
  background-color: var(--color-beige-01);
  border-radius: 20px;
  flex-direction: column;
  padding: 8px;
  display: flex;
  position: relative;
}

@media only screen and (max-width: 768px) {
  .packages__item {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
}

.packages__content {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.packages__content h3 {
  font-size: 24px;
  font-weight: var(--fw-600);
  color: var(--color-text-general);
  text-align: center;
  line-height: 1.5;
}

.packages__content ul, .packages__content li {
  list-style: disc;
}

.packages__content ul {
  padding-left: 20px;
}

.packages__content li {
  font-size: 18px;
  font-weight: var(--fw-500);
  color: var(--color-dark);
}

.packages p {
  max-width: 998px;
  margin-bottom: 60px;
  font-size: 26px;
}

@media only screen and (max-width: 768px) {
  .packages p {
    font-size: 18px;
  }
}

@media only screen and (max-width: 992px) {
  .packages {
    padding: 30px 0;
  }
}

@media only screen and (max-width: 768px) {
  .packages__item {
    max-width: 100%;
  }
}

.customization {
  justify-content: space-between;
  padding: 100px 0;
  display: flex;
}

.customization__box {
  flex-direction: column;
  display: flex;
}

.customization__content {
  margin-bottom: 23px;
}

.customization h2 {
  font-size: 38px;
  font-weight: var(--fw-700);
  margin-bottom: 23px;
}

.customization p {
  font-size: 26px;
  font-weight: var(--fw-400);
  line-height: 1.2;
}

@media only screen and (max-width: 768px) {
  .customization p {
    font-size: 18px;
  }
}

.customization__item {
  min-width: 592px;
  width: 100%;
  background-color: var(--color-brown-01);
  color: var(--color-white);
  font-size: 24px;
  font-weight: var(--fw-600);
  text-align: center;
  border-radius: 16px;
  padding: 16px 8px;
  line-height: 1.5;
}

.customization__item:not(:last-child) {
  margin-bottom: 12px;
}

.customization__item:not(:first-child) {
  justify-content: space-between;
  display: flex;
}

.customization__item:first-child {
  background-color: var(--color-beige-01);
  color: var(--color-text-general);
}

.customization__item span {
  font-size: 18px;
  font-weight: var(--fw-500);
  line-height: 1.21;
}

@media only screen and (max-width: 992px) {
  .customization {
    flex-direction: column;
    padding: 30px 0;
  }

  .customization__inner {
    min-height: auto;
  }
}

@media only screen and (max-width: 768px) {
  .customization__content {
    border-radius: 0;
    margin-bottom: 56px;
    padding: 0;
  }

  .customization__inner {
    border-radius: 0;
  }

  .customization__image {
    border-radius: 0;
    position: relative;
  }

  .customization__box {
    flex-direction: column;
    padding: 0;
    display: flex;
  }

  .customization__item {
    min-width: unset;
  }

  .customization h2 {
    color: var(--color-tile-800);
    margin-bottom: 10px;
  }

  .customization .overlay:before {
    display: none;
  }
}

.team {
  flex-direction: column;
  align-items: center;
  padding: 100px 0;
  display: flex;
}

.team__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 57px;
  display: grid;
}

.team__item {
  flex-direction: column;
  display: flex;
  position: relative;
}

.team img {
  max-height: 387px;
  height: 100%;
  max-width: 367px;
  box-shadow: var(--shadow-primary);
  border-radius: 40px;
  margin-bottom: 44px;
  overflow: hidden;
}

.team h2 {
  margin-bottom: 40px;
}

.team h3 {
  font-size: 18px;
  font-weight: var(--fw-700);
  color: var(--color-black-10);
  line-height: 1.2;
}

.team p {
  font-size: 18px;
  font-weight: var(--fw-500);
  color: var(--color-black-10);
  line-height: 1.2;
}

@media only screen and (max-width: 1280px) {
  .team img {
    max-width: 100%;
  }
}

@media only screen and (max-width: 992px) {
  .team {
    padding: 30px 0;
  }

  .team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media only screen and (max-width: 475px) {
  .team__grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

.approach {
  flex-direction: column;
  align-items: center;
  padding: 100px 0;
  display: flex;
}

.approach__list {
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 32px;
  display: grid;
}

.approach__item {
  max-width: 384px;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.approach__item h3 {
  color: var(--color-text-subtitles);
  font-size: 24px;
  font-weight: var(--fw-600);
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.5;
}

.approach__item p {
  color: var(--color-gray-07);
  font-size: 18px;
  font-weight: var(--fw-400);
  text-align: center;
  line-height: 1.6;
}

.approach h2 {
  margin-bottom: 60px;
}

.approach__icon {
  width: 96px;
  height: 96px;
  background-color: var(--color-beige-03);
  border-radius: 16px;
  margin-bottom: 24px;
  position: relative;
}

.approach__icon--creativity {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M33.8973 0C35.0808 0 36.0401 0.95939 36.0401 2.14286V4.95631C36.0401 6.13978 35.0808 7.09917 33.8973 7.09917C32.7139 7.09917 31.7545 6.13978 31.7545 4.95631V2.14286C31.7545 0.95939 32.7139 0 33.8973 0ZM13.8779 29.9593C18.4764 29.9593 22.2044 26.2315 22.2044 21.6328C22.2044 17.0342 18.4764 13.3063 13.8779 13.3063C9.27926 13.3063 5.55134 17.0342 5.55134 21.6328C5.55134 26.2315 9.27926 29.9593 13.8779 29.9593ZM0 46.6121C0 38.9479 6.21319 32.7348 13.8775 32.7348C21.5419 32.7348 27.755 38.9479 27.755 46.6121C27.755 47.3787 27.1337 48 26.3673 48H1.38775C0.621319 48 0 47.3787 0 46.6121ZM47.028 8.54654C47.9966 7.86658 48.2307 6.53013 47.5509 5.56149C46.8706 4.59288 45.5342 4.35888 44.5656 5.03883L42.263 6.6553C41.2944 7.33529 41.0602 8.67175 41.7401 9.64035C42.4203 10.609 43.7568 10.843 44.7254 10.163L47.028 8.54654ZM20.2372 5.56149C19.5573 6.53013 19.7913 7.86658 20.7599 8.54654L23.0626 10.163C24.0312 10.843 25.3677 10.609 26.0476 9.64035C26.7276 8.67175 26.4936 7.33529 25.525 6.6553L23.2223 5.03883C22.2537 4.35888 20.9172 4.59288 20.2372 5.56149ZM33.7389 9.73773C37.967 9.64992 41.5461 13.1687 41.5303 17.3977C41.4957 20.2051 39.8129 22.8854 37.2994 24.1365V27.953C37.2939 28.1748 37.2017 28.3856 37.0426 28.5404C36.8839 28.6952 36.6706 28.7818 36.4488 28.7818H31.3457C31.1239 28.7818 30.9108 28.6952 30.7519 28.5404C30.593 28.3856 30.5009 28.1748 30.4952 27.953V24.2019C28.0585 22.9887 26.3954 20.4339 26.2722 17.7146C26.0808 13.49 29.5108 9.82553 33.7389 9.73773Z' fill='%23646464'/%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 48px 48px;
}

.approach__icon--empathy {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_55_1741)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M48 24C48 10.7452 37.2549 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2549 10.7452 48 24 48C37.2549 48 48 37.2549 48 24ZM35.7946 16.9766C35.7946 18.9137 34.2266 20.4847 32.2905 20.4891L32.2822 20.4892C30.3422 20.4892 28.7696 18.9165 28.7696 16.9766C28.7696 15.0394 30.3377 13.4685 32.2738 13.464L32.2821 13.464C34.2221 13.464 35.7946 15.0367 35.7946 16.9766ZM19.2305 16.9766C19.2305 18.9138 17.6623 20.4847 15.7262 20.4891L15.7178 20.4892C13.7779 20.4892 12.2053 18.9165 12.2053 16.9766C12.2053 15.0394 13.7734 13.4685 15.7095 13.464L15.7179 13.464C17.6578 13.464 19.2305 15.0367 19.2305 16.9766ZM14.3655 26.6073C14.058 25.4645 12.8823 24.7874 11.7395 25.0949C10.5967 25.4024 9.91954 26.5782 10.2271 27.721C11.8624 33.7978 17.4088 38.2735 24.006 38.2735C30.6032 38.2735 36.1495 33.7978 37.7849 27.721C38.0925 26.5782 37.4153 25.4024 36.2726 25.0949C35.1298 24.7874 33.9539 25.4645 33.6464 26.6073C32.5019 30.8601 28.6165 33.9876 24.006 33.9876C19.3955 33.9876 15.51 30.8601 14.3655 26.6073Z' fill='%23646464'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_55_1741'%3E%3Crect width='48' height='48' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 48px 48px;
}

.approach__icon--attention {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.17143 0C4.53466 0 2.96494 0.650201 1.80757 1.80757C0.650201 2.96494 0 4.53466 0 6.17143V41.8286C0 43.4654 0.650204 45.035 1.80757 46.1925C2.96494 47.3499 4.53466 48 6.17143 48H18.906C18.5929 47.2824 18.4781 46.4832 18.5902 45.6881L18.9738 42.9641H6.77143C6.31111 42.9641 5.86961 42.7814 5.5441 42.456C5.21859 42.1303 5.03571 41.689 5.03571 41.2286V24.0131C5.37487 24.0044 5.71509 24 6.05633 24C12.4848 24 18.5509 25.5515 23.9006 28.3004C24.5656 28.784 25.4832 29.4739 26.5001 30.2724L36.9432 19.8072C37.7465 19.002 38.8371 18.5493 39.9744 18.5487C41.112 18.5481 42.203 18.9997 43.0073 19.8039L48 24.7967V6.17143C48 4.53466 47.3499 2.96494 46.1925 1.80757C45.035 0.650204 43.4654 0 41.8286 0H6.17143ZM35.893 12.308C35.893 15.1484 33.5903 17.4509 30.75 17.4509C27.9097 17.4509 25.6071 15.1484 25.6071 12.308C25.6071 9.46773 27.9097 7.16517 30.75 7.16517L30.8276 7.16575L30.904 7.16517C33.6593 7.16517 35.893 9.39874 35.893 12.154L35.8923 12.2304L35.893 12.308ZM23.3027 42.9641L22.834 46.2857L30.1377 45.2921L46.2864 29.1434L39.9778 22.8348L23.8634 38.9835L23.3027 42.9641Z' fill='%23646464'/%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 48px 48px;
}

.approach__icon--commitment {
  background-image: url("data:image/svg+xml,%3Csvg width='46' height='44' viewBox='0 0 46 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M45.7524 16.714C45.5433 16.0505 44.9592 15.5601 44.2669 15.4592L30.7164 13.4904L24.6515 1.20917C24.0313 -0.0456353 21.9688 -0.0456353 21.3414 1.20917L15.2837 13.4904L1.7332 15.4592C1.0409 15.5601 0.456763 16.0433 0.240416 16.714C0.0240703 17.3847 0.204358 18.1202 0.709165 18.6034L10.5169 28.1659L8.20195 41.6587C8.08657 42.351 8.36782 43.0577 8.93753 43.4688C9.50724 43.8798 10.2572 43.9375 10.8774 43.6058L23 37.238L35.1154 43.6058C35.3895 43.75 35.6851 43.8149 35.9808 43.8149C36.363 43.8149 36.738 43.6996 37.0625 43.4688C37.6322 43.0505 37.9135 42.351 37.7981 41.6587L35.4832 28.1659L45.2909 18.6034C45.7957 18.113 45.9688 17.3847 45.7524 16.714Z' fill='%23646464'/%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 48px 48px;
}

.approach__icon--personalized {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='34' viewBox='0 0 48 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.463 10.971L23.2774 6.62034C25.5176 4.59604 28.534 3.65819 31.5271 4.05549L37.8957 4.90091L46.7355 0.122853C47.3064 -0.185821 48 0.227699 48 0.876899V17.122C48 18.2282 47.4665 19.2665 46.5669 19.9102L40.6138 24.17L34.1712 18.7642C35.4655 18.3052 36.5709 17.5483 37.4829 16.6025C38.3043 15.7505 38.2797 14.3939 37.4277 13.5725C36.576 12.751 35.2193 12.7757 34.3978 13.6276C33.7602 14.2889 33.0232 14.7137 32.1609 14.8825C31.4095 15.0297 30.4526 15.0034 29.2495 14.6346L27.7184 13.3499L23.4515 16.803C21.7753 18.1595 19.3109 17.8697 17.9953 16.1612C16.7731 14.5741 16.9767 12.314 18.463 10.971ZM15.5895 7.79113L19.0465 4.66725C17.5788 4.26683 16.0239 4.18478 14.4877 4.45077L8.19432 5.54041L1.29075 1.82504C0.707314 1.51105 0 1.93362 0 2.59619L7.03317e-05 17.1205C7.57961e-05 18.2789 0.572767 19.3624 1.52993 20.0149L20.2325 32.7641C22.6537 34.4146 25.8463 34.3841 28.2353 32.6873L36.8259 26.5862L27.6692 18.903L26.1476 20.1344C22.6 23.0054 17.3842 22.3919 14.5997 18.776C12.013 15.417 12.444 10.6336 15.5895 7.79113Z' fill='%23646464'/%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 48px 48px;
}

.approach__icon--seamless {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32.827 0.346191L30.0578 1.50004L30.8078 4.96158C30.1155 5.46638 29.5457 6.101 29.0193 6.80773L25.5001 6.00004L24.3462 8.76927L27.3462 10.6731C27.2092 11.5385 27.2236 12.4111 27.3462 13.2693L24.3462 15.1731L25.4424 17.9423L28.9616 17.1923C29.4664 17.8774 30.101 18.4544 30.8078 18.9808L29.9424 22.5L32.7116 23.6539L34.6732 20.5962C35.5385 20.726 36.4256 20.726 37.2693 20.5962L39.1732 23.6539L41.9424 22.5577L41.1347 19.0385C41.8198 18.5337 42.4039 17.8919 42.9232 17.1923L46.5001 18L47.6539 15.2308L44.5962 13.327C44.726 12.4616 44.7188 11.6322 44.5962 10.7885L47.6539 8.82696L46.5001 6.05773L42.9808 6.86542C42.4832 6.17311 41.8919 5.54571 41.1924 5.01927L42.0001 1.55773L39.2308 0.403884L37.327 3.40388C36.4616 3.26686 35.5818 3.28129 34.7308 3.40388L32.827 0.346191ZM36.0001 7.84619C36.5409 7.84619 37.0818 7.96879 37.6155 8.19235C39.7429 9.08658 40.7525 11.488 39.8655 13.6154C38.9784 15.7428 36.5121 16.7524 34.3847 15.8654C32.2573 14.9784 31.2477 12.5193 32.1347 10.3847C32.8054 8.7909 34.3703 7.8534 36.0001 7.84619ZM13.6155 16.7308L12.8655 21.3462C11.7477 21.6202 10.7092 22.0457 9.75008 22.6154L5.94238 19.9039L3.17315 22.6731L5.827 26.4808C5.25008 27.4399 4.83902 28.5361 4.55777 29.6539L-0.0576172 30.4039V34.327L4.55777 35.1347C4.83181 36.2524 5.24286 37.2909 5.827 38.25L3.11546 42.0577L5.88469 44.827L9.75008 42.1731C10.7092 42.75 11.7549 43.1683 12.8655 43.4423L13.6155 48.0577H17.5385L18.3462 43.4423C19.4568 43.1611 20.5097 42.6923 21.4616 42.1154L25.327 44.827L28.0962 42.0577L25.327 38.25C25.8967 37.2981 26.3222 36.2452 26.5962 35.1347L31.2693 34.327V30.4039L26.5962 29.6539C26.3222 28.5505 25.8967 27.4904 25.327 26.5385L28.0385 22.6731L25.2693 19.9039L21.4616 22.6731C20.5025 22.0962 19.4568 21.6202 18.3462 21.3462L17.5385 16.7308H13.6155ZM15.6347 26.9423C18.6563 26.9423 21.0578 29.3438 21.0578 32.3654C21.0578 35.3871 18.6563 37.8462 15.6347 37.8462C12.6131 37.8462 10.1539 35.3871 10.1539 32.3654C10.1539 29.3438 12.6131 26.9423 15.6347 26.9423Z' fill='%23646464'/%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 48px 48px;
}

@media only screen and (max-width: 992px) {
  .approach {
    padding: 30px 0;
  }

  .approach__list {
    gap: 15px;
  }
}

@media only screen and (max-width: 768px) {
  .approach__list {
    grid-template-columns: 1fr;
  }
}

.history {
  padding: 0 0 100px;
}

.history__item {
  border-radius: calc(var(--radius-main)  + 6px);
  background-color: var(--color-beige-01);
  padding: 12px;
  position: relative;
  overflow: hidden;
}

.history__item:not(:last-child) {
  margin-bottom: 40px;
}

.history h3 {
  color: var(--color-black-10);
  margin-bottom: 20px;
  font-size: 26px;
  line-height: 1.2;
}

.history p {
  color: var(--color-black-10);
  font-size: 26px;
  line-height: 1.3;
  font-weight: var(--fw-400);
}

.history span {
  font-size: 26px;
  font-weight: var(--fw-600);
  color: var(--color-black-10);
  margin-bottom: 40px;
  line-height: 1.3;
  display: block;
}

@media only screen and (max-width: 768px) {
  .history {
    padding: 30px 0;
  }

  .history__item {
    padding: 24px;
  }
}

.reach {
  padding: 4.1875rem 0 5.125rem;
}

.reach h2 {
  text-align: center;
  text-transform: none;
  margin: 0 auto 2.0625rem;
  font-size: 40px;
  line-height: 1.25;
}

.reach .btn {
  margin: 0 auto;
}

@media only screen and (max-width: 992px) {
  .reach {
    padding: 3.125rem 0;
  }

  .reach h2 {
    margin-bottom: 20px;
    font-size: 32px;
  }
}

@media only screen and (max-width: 768px) {
  .reach h2 {
    font-size: 24px;
  }
}