main {
  overflow: hidden;
}

a,
button {
  cursor: pointer;
  user-select: none;
  border: none;
  outline: none;
  background: none;
}



img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes slideRight {
  0% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
.navbar{
  --mdb-navbar-box-shadow:none;
}
.menu-inner{
  margin: 0;
}
.section {
  margin: 0 auto;
  padding: 6rem 0 2rem;
}

/*.container {
  max-width: 75rem;
  height: auto;
  margin-inline: auto;
  padding-inline: 1.5rem;
}*/

.centered {
  text-align: center;
  vertical-align: middle;
  margin-bottom: 1rem;
}

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
  border-radius: 0.25rem;
  text-transform: capitalize;
  transition: all 0.3s ease;
}
.btn-primary {
  padding: 0.75rem 1.5rem;
  color: var(--white-100);
  box-shadow: var(--shadow-medium);
}
.btn-darken {
  padding: 0.75rem 1.5rem;
  color: var(--white-100);
  background-color: var(--night-300);
  box-shadow: var(--shadow-medium);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 100;
  margin: 0 auto;
  background-color: var(--white-100);
  box-shadow: var(--shadow-medium);
  font-size: 15px;
}

.brand {
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  order: 1;
}


.navbar {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 4rem;
  margin: 0 auto;
}
.navbar-left {
  display: flex;
  align-items: center;
  flex: 0 0 17%;
}
.navbar-center {
  display: flex;
}
.navbar-right {
  display: flex;
  flex: 0 0 17%;
  align-items: center;
  justify-content: flex-end;
  column-gap: 1.5rem;
}
@media only screen and (max-width: 992px) {
  .navbar-left, .navbar-right {
    flex: 0 0 auto;
  }
  .navbar-right {
    align-items: center;
    margin-right: 10px;
  }
  .navbar-center {
    flex: 0 0 100%;
    order: 3;
    align-items: center;
  }
}

@media only screen and (max-width: 992px) {
  .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 75%;
    height: 100%;
    z-index: 100;
    overflow: hidden;
    transform: translate(-100%);
    background-color: var(--white-100);
    transition: all 0.4s ease-in-out;
  }
  .menu.is-active {
    transform: translate(0%);
  }
}

.menu-header {
  display: none;
  box-shadow: var(--shadow-medium);
}
.menu-item {
  display: inline-block;
  line-height: 1.5;
  padding-right: 1.25rem;
}
.menu-link {
  line-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--black-300);
  text-transform: capitalize;
  transition: all 0.25s ease;
}
.menu-item:has(.menu-link):hover i.fa-solid{
  rotate: 180deg;
}
i.fa-solid {
  transition: all 0.25s ease;
}
.menu-link > i.fa-solid {
  margin-left: 0.5rem;
  font-size: 12px;
}

.darkmode .menu-link {
  color: var(--white-100);
}
.menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  font-size: 1.45rem;
  color: var(--black-300);
  transition: all 0.25s ease;
}
@media only screen and (min-width: 993px) {
  .menu-dropdown:hover > .submenu {
    opacity: 1;
    visibility: visible;
    margin-top: 1rem;
  }
}
@media only screen and (max-width: 992px) {
  .menu-header {
    position: relative;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 4rem;
    z-index: 110;
    visibility: hidden;
    background: transparent;
  }
  .menu-header.is-active {
    visibility: visible;
    background-color: var(--white-100);
  }
  .menu-header.is-active > .menu-arrow {
    display: block;
  }
  .menu-arrow {
    display: none;
    cursor: pointer;
    width: 3rem;
    height: 4rem;
    text-align: center;
  }
  .menu-arrow > i.fa-solid {
    line-height: 4rem;
    transition: all 0.25s ease;
    rotate: 90deg;
  }
  .menu-title {
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
    text-transform: capitalize;
    color: var(--black-300);
  }
  
  .menu-inner {
    height: 100%;
    margin-top: -3rem;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .menu-item {
    display: block;
    line-height: 1;
    padding-inline: 0;
  }
  .menu-link {
    justify-content: space-between;
    height: 2.5rem;
    line-height: 2.5rem;
    padding-inline: 1.25rem;
  }
  .menu-link > i.fa-solid {
    margin-left: 0.5rem;
    transform: rotate(0deg);
  }
}

.submenu {
  position: absolute;
  height: auto;
  margin-top: 1.75rem;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  border-radius: 0.25rem;
  background-color: var(--white-100);
  box-shadow: var(--shadow-medium);
  transition: all 0.25s ease-in-out;
}
ul.submenu-list{
  padding: 0;
}

.submenu-inner {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  /* Keeps the hover-swap "flip" animation (translateY) cropped neatly
     inside its own box instead of sliding past the edges. */
  overflow: hidden;
}
.submenu-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: 1;
  padding: 0.75rem 0;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.submenu-item {
  display: block;
  line-height: 1;
  margin: 0 auto;
  padding-right: 20px;
}
.submenu-link {
  display: inline-block;
  max-width: 100%;
  line-height: 1.3;
  padding: 0.75rem 0;
  white-space: normal;
  overflow-wrap: break-word;
  text-transform: capitalize;
  color: var(--black-300);
  transition: all 0.25s ease-in-out;
}
.darkmode .submenu-link {
  color: var(--white-100);
}
.submenu-image {
  display: block;
  width: 100%;
  /* Fixed (not 100%/auto) on purpose: the default image and the
     per-service hover images all have different intrinsic aspect
     ratios. If the height were derived from the image itself, the
     whole dropdown would resize every time the src swaps on hover.
     object-fit: cover crops any source image cleanly to this box. */
  height: 260px;
  margin: 0;
  object-fit: cover;
}
@media only screen and (max-width: 992px) {
  .submenu {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    min-width: auto;
    margin: 0;
    padding: 1rem;
    padding-top: 4rem;
    opacity: 1;
    overflow-y: auto;
    visibility: visible;
    box-shadow: none;
    transform: translateX(0%);
  }
  .submenu.is-active {
    display: block;
  }
  .submenu-inner {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0rem;
  }
  .submenu-list {
    margin-bottom: 1rem;
  }
  .submenu-link {
    display: block;
  }
  .submenu-image {
    height: auto;
    margin-top: 0;
  }
}

.megamenu {
  height: auto;
  margin: 0 auto;
}
.megamenu-column-1 {
  max-width: fit-content;
  width: 100%;
  height: auto;
  padding: 10px;
}
.megamenu-column-4 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  max-width: none;
  height: auto;
  margin: 0 auto;
}
@media only screen and (max-width: 992px) {
  .megamenu {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    min-width: auto;
    margin: 0;
    padding: 1rem;
    padding-top: 4rem;
    opacity: 1;
    overflow-y: auto;
    visibility: visible;
    transform: translateX(0%);
    box-shadow: none;
  }
}

.switch {
  position: relative;
  display: block;
  cursor: pointer;
  user-select: none;
  margin-right: 0.5rem;
}
.switch-light, .switch-dark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in;
}
.switch-light {
  font-size: 1.3rem;
  visibility: visible;
  color: var(--black-300);
}
.darkmode .switch-light {
  font-size: 0rem;
  visibility: hidden;
}
.switch-dark {
  font-size: 0rem;
  visibility: hidden;
  color: var(--white-100);
}
.darkmode .switch-dark {
  font-size: 1.3rem;
  visibility: visible;
}

.overlay {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  transition: all 0.45s ease-in-out;
}
@media only screen and (max-width: 992px) {
  .overlay.is-active {
    opacity: 1;
    visibility: visible;
  }
}

.burger {
  position: relative;
  display: block;
  cursor: pointer;
  width: 1.6rem;
  height: 1rem;
  margin-right: 1rem;
  opacity: 0;
  visibility: hidden;
  background: transparent;
  margin-left: 15px;
}
@media only screen and (max-width: 992px) {
  .burger {
    opacity: 1;
    visibility: visible;
  }
}
.burger-line {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 2px;
  opacity: 1;
  border-radius: 1rem;
  background: var(--black-400);
}
.darkmode .burger-line {
  background: var(--white-100);
}
.burger-line:nth-child(1) {
  top: 0px;
}
.burger-line:nth-child(2) {
  top: 0.5rem;
  width: 70%;
}
.burger-line:nth-child(3) {
  top: 1rem;
}
/* ---------------------------------------------------------------------------
   Стабильная ширина мега-меню

   .megamenu-column-4 лежит внутри абсолютно позиционированного .submenu,
   у которого нет заданной ширины, поэтому браузер считает её по содержимому.
   В этот расчёт картинка вносит свою СОБСТВЕННУЮ ширину — «width: 100%»
   из CSS на него не влияет. Пока все hover-картинки были одного размера
   (услуги — все 1200px), это не проявлялось. У индустрий они разные
   (1450, 1200, 1024), и меню прыгало при каждом наведении.

   Лечится тем, что колонка с картинкой получает фиксированную ширину:
   тогда содержимое перестаёт влиять на расчёт. object-fit: cover обрезает
   любую исходную пропорцию под эту рамку, поэтому редактор в CMS сможет
   загрузить картинку какого угодно размера, ничего не сломав.

   320px — единственное число, которое здесь нужно крутить.
--------------------------------------------------------------------------- */
@media only screen and (min-width: 993px) {
  .megamenu-column-4 > .submenu-inner:first-child {
    flex: 0 0 320px;
    max-width: 320px;
  }
  .megamenu-column-4 .submenu-image {
    width: 320px;
    max-width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
  }
}

/* На мобильном мега-меню разворачивается в один столбец: картинка на всю
   ширину, высота фиксированная, чтобы список ссылок не прыгал при свайпе. */
@media only screen and (max-width: 992px) {
  .megamenu-column-4 .submenu-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center;
  }
}