* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Gilroy", sans-serif;
}

body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  width: 100vw;
  font-family: "Gilroy";
  background-color: var(--light-color);
}

/* Brand Colros */

:root {
  /* Primary Colors - Main Brand */
  --primary-color: #ee0a10;
  --primary-light: #ff3036;
  --primary-dark: #bb0000;
  --primary-hover: #d40000;

  /* Secondary Colors - Light Accent */
  --secondary-color: #b7968a;
  --secondary-light: #ddbcb0;
  --secondary-dark: #846357;

  /* Tertiary Colors - Dark Accent */
  --tertiary-color: #a98b68;
  --tertiary-light: #cfb18e;
  --tertiary-dark: #765835;

  /* Shadow & Depth & Dark-Background & Text*/
  --shadow-color: #141418;
  --shadow-light: rgba(20, 20, 24, 0.3);
  --shadow-medium: rgba(20, 20, 24, 0.6);
  --shadow-dark: rgba(20, 20, 24, 0.9);

  /* Light Colors & Light-Background & Text */
  --light-color: #f3eeef;
  --white: #ffffff;
  --light-gray: #ded9da;

  /* Accent Colors for Vibrancy */
  --accent-orange: #e67e22;
  --accent-blue: #3498db;
  --accent-red: #e74c3c;
  --accent-yellow: #f1c40f;

  /* Status Colors */
  --success-color: #27ae60;
  --warning-color: #f39c12;
  --error-color: #e74c3c;
  --info-color: #3498db;

  /* Gradients for Rich Effects */
  --gradient-primary: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-dark)
  );
  --gradient-warm: linear-gradient(
    135deg,
    var(--tertiary-color),
    var(--primary-color)
  );
  --gradient-subtle: linear-gradient(
    135deg,
    var(--light-color),
    var(--light-gray)
  );
}

/*Additional Colors*/

:root {
  --primary-accent-1: var(--primary-color);
  --primary-accent-2: var(--primary-dark);

  --light-accent-1: var(--secondary-color);
  --light-accent-2: var(--secondary-light);

  --dark-accent-1: var(--tertiary-color);
  --dark-accent-2: var(--tertiary-dark);
}

/* Elements Colors */
:root {
  --text-color-main: var(--shadow-color);
  --text-color-accent: var(--dark-accent-1);
  --text-color-oposite: var(--light-color);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body a,
body li {
  font-family: "Gilroy";
  letter-spacing: 0.07em;
}

body h1,
body h2,
body h3 {
  font-weight: 300;
}

th,
td {
  font-family: Roboto;
}

label {
  font-family: "Gilroy";
}

.lowercase {
  text-transform: lowercase;
}

.link {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav a,
.nav li,
.nav p {
  font-family: "Gilroy";
  text-transform: capitalize;
}

/*Language*/

.language-panel {
  display: none;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background: rgba(37, 32, 41, 0.5);
  backdrop-filter: blur(5px);
}

.language-panel.active {
  display: flex;
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(15px);
  }
}

.lang-panel-box {
  display: flex;
  flex-direction: column;
  width: 380px;
  overflow: hidden;
  padding: 0;
  position: relative;
}

/* Add header container for title and close button */
.lang-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  background: var(--shadow-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 25px 0;
}

.lang-title {
  text-align: center;
  color: var(--light-color);
  margin: 0;
  font-size: 24px;
  width: auto;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: none;
  padding: 0;
}

.lang-list {
  width: 100%;
  padding: 20px 0;
  background: var(--shadow-dark);
}

.lang-panel-box ul {
  margin: 0;
  padding: 0;
  width: 100%;
}

.lang-item {
  height: 65px;
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
  transition: all 0.3s ease;
  position: relative;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.lang-item > a {
  color: var(--light-color);
  font-size: 18px;
  font-weight: 400;
}

.lang-item:hover {
  background: var(--primary-color);
  color: var(--light-color);
}

.lang-item:hover > a {
  color: var(--light-color);
  transition: 0.3s;
}

.lang-code {
  display: inline-block;
  width: 30px;
  font-weight: bold;
  text-transform: uppercase;
  margin-right: 10px;
}

.lang-item.active .lang-link {
  color: var(--primary-color);
  font-weight: bold;
}

.lang-item.active .lang-link:hover {
  color: var(--light-color);
  font-weight: bold;
}

.lang-link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0 25px;
}

.lang-link span {
  margin-left: 20px;
  transition: none;
  font-size: 16px;
  letter-spacing: 0.05em;
}

.lang-item > a > img {
  width: 40px;
  height: 28px;
  object-fit: cover;
  transition: none;
  border: 1px solid var(--light-color);
}

.lang-close-btn {
  position: absolute;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  z-index: 2;
  transition: all 0.3s ease;
  overflow: hidden;
  top: auto;
}

.close-icon {
  position: relative;
  width: 30px;
  height: 30px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Create the X using pseudo-elements */
.close-icon::before,
.close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 3px;
  background: var(--primary-color);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
}

.close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Hover animations */
.lang-close-btn:hover .close-icon {
  transform: scale(1.2) rotate(180deg);
}

.lang-close-btn:hover .close-icon::before {
  background: var(--accent-red);
  width: 120%;
  height: 4px;
}

.lang-close-btn:hover .close-icon::after {
  background: var(--accent-red);
  width: 120%;
  height: 4px;
}

/* Active state animation */
.lang-close-btn:active .close-icon {
  transform: scale(0.8) rotate(270deg);
}

/* Pulse effect on hover */
.lang-close-btn:hover::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(231, 76, 60, 0.3), transparent 70%);
  transform: translate(-50%, -50%);
  animation: closePulse 1s infinite;
  z-index: -1;
}

@keyframes closePulse {
  0% {
    width: 60px;
    height: 60px;
    opacity: 1;
  }
  100% {
    width: 100px;
    height: 100px;
    opacity: 0;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .lang-panel-box {
    width: 90%;
    max-width: 350px;
  }

  .lang-item {
    height: 60px;
  }

  .lang-close-btn {
    width: 35px;
    height: 35px;
    right: 15px;
  }

  .close-icon {
    width: 25px;
    height: 25px;
  }

  .lang-title {
    font-size: 20px;
  }
}

/* ========================= */
/* NAVBAR STYLES            */
/* ========================= */

:root {
  /* обновлённые переменные градиентов */
  --nav-bg: var(--light-color); /* фон для всего nav */
  --nav-top-gradient: linear-gradient(
    90deg,
    transparent,
    var(--light-gray)
  ); /* light -> light-gray */
  --nav-top-border-gradient: linear-gradient(
    90deg,
    transparent,
    var(--primary-light)
  ); /* линия: light -> primary-light */
  --nav-top-border-gradient-transparent: linear-gradient(
    270deg,
    var(--light-color),
    transparent
  ); /* линия: light -> transparent */
  --nav-link-color: var(--shadow-color);
  --nav-link-hover-bg: linear-gradient(
    90deg,
    var(--primary-color),
    var(--primary-light)
  );
}

.nav {
  height: 80px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  background: var(--nav-bg); /* основной фон навбара */
  box-shadow: 0 0px 10px var(--shadow-light); /* чуть более насыщенная тень для глубины */
  position: fixed;
  z-index: 50;
  width: 100vw;
  transition: 0.4s;
}

/* Homepage initial transparent state */
.nav.transparent {
  background: var(--shadow-light);
  box-shadow: none;
  transition: 0.4s;

  /* keep position and sizing same */
}

/* Logo */
.nav .logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 20px;
}
.nav .logo img {
  height: 56px; /* fits inside 80px with vertical spacing */
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.06));
  transition: transform 0.1s ease;
}

.nav .logo img:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* logo in transparent mode - use white logo (no heavy drop shadow) */
.nav.transparent .logo img {
  filter: none;
}

/* Main content (contacts + menu) */
.nav .main-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

/* Top contact items */
.nav-top {
  display: flex;
  height: 30px;
  width: 100%;
  gap: 18px;
  align-items: center;
  justify-content: flex-end;
  font-size: 13px;
  color: var(--text-color-main);
  background: var(--nav-top-gradient);
  padding: 0 50px;
  border-bottom: 3px solid transparent;
  border-image: var(--nav-top-border-gradient) 1;
}
.nav-top-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.nav-top-item i {
  color: var(--primary-color); /* акцентная иконка */
  width: 18px;
  text-align: center;
}
.nav-top-item span {
  color: var(--text-color-main);
}

/* top contact row becomes shadow-light background and white text */
.nav.transparent .nav-top {
  background: none;
  border-bottom: 3px solid transparent;
  border-image: var(--nav-top-border-gradient-transparent) 1;
}
.nav.transparent .nav-top-item span,
.nav.transparent .nav-top-item i {
  color: var(--white);
}

/* Main navigation links */

.nav-main {
  padding: 0 40px;
  display: flex;
  height: 100%;
  justify-content: flex-end;
  flex-direction: row;
  width: 100%;
  align-items: center;
}

.nav-items {
  height: 100%;
}

.nav-items ul {
  height: 100%;
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0 20px;
}

.nav-item {
  height: 100%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.nav-link {
  height: 100%;
  width: auto;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  color: var(--nav-link-color);
  transition: color 180ms ease, background 220ms ease, transform 120ms ease,
    letter-spacing 160ms ease;
  position: relative; /* для ::after underline */
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  /* подготовка для градиентного текста на hover */
  background: none;
}

/* эффект на тексте вместо фона: градиентный текст, подъём и тень */
.nav-link:hover {
  color: transparent; /* нужно, чтобы был виден фон-градиент */
  background: linear-gradient(
    90deg,
    var(--primary-light),
    var(--primary-color)
  );
  -webkit-background-clip: text;
  background-clip: text;
  transform: translateY(-2px);
  text-shadow: 0 6px 18px rgba(238, 10, 16, 0.12);
  letter-spacing: 0.4px;
}

/* анимированная gradient-линия под ссылкой */
.nav-link::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 15px;
  bottom: 14px;
  height: 2.5px;
  background: linear-gradient(
    90deg,
    var(--primary-light),
    var(--primary-color)
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
  opacity: 0.95;
  pointer-events: none;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

/* language button — градиент и белый текст, без изменения размеров/структуры */
.lang-btn {
  /* визуал: прозрачный фон, выделение бордером --shadow-light + слои для "сочности" */
  position: relative;
  overflow: hidden;
  height: 34px;
  min-width: 74px;
  padding: 0 12px;
  border-radius: 17px;
  background: transparent;
  color: var(--nav-link-color);
  border: 2px solid var(--nav-link-color);
  box-shadow: 0 8px 24px rgba(20, 20, 24, 0.06);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  text-transform: uppercase;
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 220ms ease, color 180ms ease, border-image 320ms ease;
  -webkit-tap-highlight-color: transparent;
  z-index: 0;
}

/* soft inner fill (becomes visible on hover) */
.lang-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 17px;
  background: linear-gradient(
    90deg,
    rgba(255, 48, 54, 0.04),
    rgba(238, 10, 16, 0.06)
  );
  opacity: 0;
  transition: opacity 260ms ease, transform 320ms ease;
  pointer-events: none;
  z-index: -2;
}

/* animated glossy sweep — убираем translateX, используем scaleX */
.lang-btn::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 100%
  );
  /* заменено: устраняем translateX */
  transform-origin: left center;
  transition: transform 780ms cubic-bezier(0.2, 0.9, 0.2, 1);
  pointer-events: none;
  opacity: 0.9;
  z-index: -1;
}

/* icon inherits currentColor */
.lang-btn i {
  color: currentColor;
  font-size: 14px;
  line-height: 1;
  transition: transform 220ms ease, color 180ms ease;
  display: inline-block;
}

/* language code text */
.lang-btn .lang-code {
  color: currentColor;
  font-size: 13px;
  line-height: 1;
}

/* hover: градиентный бордер, усиление тени, внутренняя заливка и блик проходит */

.lang-btn:hover {
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.lang-btn:hover::before {
  opacity: 1;
  transform: scale(1.01);
}
/* блеск смещается справа налево при hover */
.lang-btn:hover::after {
  transform: rotate(25deg) scaleX(3);
  /* укороченная длительность для плавности */
  transition-duration: 780ms;
}
/* иконка чуть анимируется */
.lang-btn:hover i {
  transform: translateY(-1px) rotate(-8deg) scale(1.03);
}

/* active/tap state — мягкий откат */
.lang-btn:active {
  transform: translateY(-2px) scale(0.995);
  box-shadow: 0 10px 24px rgba(20, 20, 24, 0.06);
}

/* focus for accessibility */
.lang-btn:focus {
  outline: 3px solid rgba(238, 48, 54, 0.08);
  outline-offset: 3px;
}

/* main nav links use white instead of light-color in transparent state */
.nav.transparent .nav-link {
  color: var(--white);
  /* keep hover gradient behavior but ensure baseline is white */
  background: none;
  text-shadow: none;
}

/* language button adapts to white color when transparent */
.nav.transparent .lang-btn {
  color: var(--white);
  border-color: var(--white);
  box-shadow: none;
}
.nav.transparent .lang-btn i,
.nav.transparent .lang-btn .lang-code {
  color: var(--white);
}

/* ensure underline gradient isn't visually intrusive on transparent */
.nav.transparent .nav-link::after {
  opacity: 0.9;
}

/* ========================= */
/* MOBILE NAVIGATION         */
/* ========================= */

/* Mobile header */
.nav-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 65px;
  background-color: var(--shadow-color);
  display: none;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  box-shadow: 0 2px 10px var(--shadow-light);
  border-bottom: 1px solid var(--primary-color);
  padding: 0 20px;
}

/* Mobile logo section */
.nav-mobile-logo {
  height: 45px;
  display: flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.nav-mobile-logo:hover {
  transform: scale(1.02);
}

.nav-mobile-logo img {
  height: 100%;
  width: auto;
}

/* Mobile actions - centered burger menu */
.nav-mobile-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-action-btn {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--light-color);
  font-size: 20px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.nav-action-btn:hover {
  background: var(--primary-color);
  color: var(--white);
  transform: scale(1.05);
}

.nav-action-btn:active {
  transform: scale(0.98);
}

/* Language toggle positioned on the right */
.nav-mobile-language {
  display: flex;
  align-items: center;
}

/* Burger menu button */
.burger-menu {
  position: relative;
  z-index: 1001;
}

.burger-icon {
  width: 28px;
  height: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.burger-line {
  width: 100%;
  height: 3px;
  background: var(--light-color);
  transition: all 0.3s ease;
  transform-origin: center;
  border-radius: 2px;
}

.burger-menu.active .burger-line:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
  background: var(--primary-color);
}

.burger-menu.active .burger-line:nth-child(2) {
  opacity: 0;
}

.burger-menu.active .burger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
  background: var(--primary-color);
}

/* Mobile menu overlay - fullscreen */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile menu panel - fullscreen */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--shadow-color);
  z-index: 999;
  transform: translateY(-100%);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mobile-menu.active {
  transform: translateY(0);
}

/* Mobile menu header */
.mobile-menu-header {
  background: var(--shadow-color);
  padding: 30px 20px;
  border-bottom: 2px solid var(--primary-color);
  text-align: center;
}

.mobile-menu-title {
  color: var(--light-color);
  font-size: 24px;
  font-weight: 300;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* Mobile menu content */
.mobile-menu-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
}

/* Navigation section */
.mobile-nav-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-nav-item {
  width: 100%;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 30px;
  color: var(--light-color);
  font-size: 22px;
  font-weight: 300;
  text-decoration: none;
  transition: all 0.3s ease;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 20px;
  min-height: 80px;
}

.mobile-nav-link:hover {
  background: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-light);
  transform: scale(1.02);
}

.mobile-nav-link:active {
  background: var(--primary-dark);
  transform: scale(0.98);
}

/* Contact section */
.mobile-contact-section {
  background: var(--shadow-color);
  padding: 30px 25px;
  border-top: 1px solid rgba(242, 245, 241, 0.1);
}

.mobile-contact-title {
  color: var(--light-color);
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 25px 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
}

.mobile-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.mobile-contact-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 15px 20px;
  color: var(--light-color);
  font-size: 16px;
  background: rgba(242, 245, 241, 0.05);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.mobile-contact-item:hover {
  background: rgba(242, 245, 241, 0.1);
}

.mobile-contact-item i {
  color: var(--primary-color);
  font-size: 18px;
  width: 25px;
  text-align: center;
}

.mobile-contact-text {
  flex: 1;
  line-height: 1.4;
  text-align: center;
}

/* Social links section */
.mobile-social-section {
  background: var(--shadow-color);
  padding: 25px;
  text-align: center;
}

.mobile-social-title {
  color: var(--light-color);
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 20px 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.mobile-social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.mobile-social-link {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  font-size: 20px;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.mobile-social-link:hover {
  background: var(--primary-color);
  color: var(--white);
  transform: translateY(-3px);
}

/* Show mobile nav at appropriate breakpoint */
@media (max-width: 1024px) {
  .nav-mobile {
    display: flex;
  }

  .nav {
    display: none;
  }
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .nav-mobile {
    height: 60px;
    padding: 0 15px;
  }

  .nav-mobile-logo {
    height: 40px;
  }

  .nav-action-btn {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }

  .burger-icon {
    width: 24px;
    height: 18px;
  }

  .mobile-menu-header {
    padding: 25px 15px;
  }

  .mobile-menu-title {
    font-size: 20px;
  }

  .mobile-nav-link {
    padding: 20px 25px;
    font-size: 20px;
    margin: 0 15px;
    min-height: 70px;
  }

  .mobile-contact-section,
  .mobile-social-section {
    padding: 20px 15px;
  }

  .mobile-contact-item {
    padding: 12px 15px;
    font-size: 15px;
  }

  .mobile-social-link {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }
}

@media (max-width: 360px) {
  .mobile-nav-link {
    font-size: 18px;
    padding: 18px 20px;
    min-height: 65px;
  }

  .mobile-social-links {
    gap: 15px;
  }

  .mobile-social-link {
    width: 45px;
    height: 45px;
    font-size: 16px;
  }
}

:root {
  --footer-background: var(--shadow-color);
  --footer-text-color: var(--light-color);
  --footer-title-color: var(--white);
  --footer-accent: var(--primary-color);
  --footer-hover: var(--primary-light);
  --footer-border: rgba(255, 255, 255, 0.1);
  --footer-icon-bg: var(--primary-dark);
  --footer-transition: all 0.3s ease;
}

/* Main Footer Structure */
.item {
  justify-content: flex-start !important;
}

footer {
  width: 100%;
  background-color: var(--footer-background);
  color: var(--footer-text-color);
  padding: 60px 0 20px;
  position: relative;
  border-top: 2px solid var(--primary-color);
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.1);
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 30px;
  flex: 1;
}

/* Footer Sections */
.footer-left,
.footer-right {
  width: 25%;
  display: flex;
  flex-direction: column;
}

.footer-center {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Footer Titles */
.footer-title {
  color: var(--footer-title-color);
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 25px;
  padding-bottom: 10px;
  position: relative;
  letter-spacing: 0.05em;
}

.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 40px;
  background: var(--footer-accent);
  transition: var(--footer-transition);
}

.footer-center .footer-title::after {
  left: 50%;
  transform: translateX(-50%);
}

/* Footer Links */
.footer-left ul,
.footer-right ul {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.footer-link-item {
  margin-bottom: 12px;
}

.footer-link {
  color: var(--footer-text-color);
  text-decoration: none;
  font-size: 16px;
  display: inline-block;
  transition: var(--footer-transition);
  position: relative;
  padding-left: 0;
}

.footer-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: var(--footer-hover);
  transition: var(--footer-transition);
}

.footer-link:hover {
  color: var(--footer-hover);
  transform: translateX(5px);
}

.footer-link:hover::after {
  width: 100%;
}

/* Logo Section */
.footer-logo {
  margin: 30px 0;
  transition: var(--footer-transition);
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}

.footer-logo img {
  height: 150px;
  width: auto;
  transition: var(--footer-transition);
}

.footer-logo:hover img {
  transform: scale(1.05);
}

/* Office Contacts */
.office-contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
}

.office-contact {
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 15px;
  width: 100%;
  transition: var(--footer-transition);
  border: 1px solid transparent;
}

.office-contact:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-3px);
  border-color: rgba(97, 193, 208, 0.2);
}

.office-contact h4 {
  color: var(--footer-title-color);
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 18px;
}

.office-contact p {
  color: var(--footer-text-color);
  margin: 5px 0;
  font-size: 14px;
  opacity: 0.9;
  line-height: 1.5;
}

/* Social Media Section */
.footer-social ul {
  display: flex;
  gap: 15px;
  padding: 0;
  margin: 25px 0;
  justify-content: flex-start;
}

.footer-social-item {
  list-style: none;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: var(--footer-icon-bg);
  color: var(--footer-text-color);
  border-radius: 50%;
  transition: var(--footer-transition);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.footer-social-link i {
  font-size: 18px;
  position: relative;
  z-index: 2;
}

.footer-social-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  border-radius: 50%;
  transform: scale(0);
  transition: var(--footer-transition);
}

.footer-social-link:hover {
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.footer-social-link:hover::before {
  transform: scale(1);
}

/* Footer Bottom */
.footer-bottom {
  width: 100%;
  max-width: 1400px;
  margin: 30px auto 0;
  padding: 15px 30px;
  border-top: 1px solid var(--footer-border);
}

.footer-bottom-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 5px;
}

.bottom-menu-item a,
.bottom-menu-item p {
  color: var(--footer-text-color);
  font-size: 13px;
  opacity: 0.7;
  transition: var(--footer-transition);
}

.bottom-menu-item a:hover {
  opacity: 1;
  color: var(--footer-hover);
}

.bottom-divider {
  color: var(--footer-text-color);
  opacity: 0.3;
}

/* Responsive Styles */
@media (max-width: 1200px) {
  .footer-container {
    padding: 0 20px;
  }

  .footer-left,
  .footer-right {
    width: 30%;
  }

  .footer-center {
    width: 40%;
  }

  .footer-logo img {
    height: 120px;
  }
}

@media (max-width: 992px) {
  .footer-container {
    flex-direction: column;
    padding: 0 30px;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    width: 100%;
    margin-bottom: 40px;
    align-items: center;
    text-align: center;
  }

  .footer-title {
    text-align: center;
  }

  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
  }

  .footer-social ul {
    justify-content: center;
  }

  .footer-link:hover {
    transform: translateY(-3px);
  }

  .footer-link-item {
    text-align: center;
  }

  .footer-logo {
    margin: 20px 0 30px;
  }

  .office-contact {
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  footer {
    padding: 40px 0 20px;
    min-height: auto;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    margin-bottom: 30px;
  }

  .footer-container {
    padding: 0 20px;
  }

  .office-contact {
    padding: 15px;
  }

  .footer-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }

  .footer-link {
    font-size: 15px;
  }

  .footer-logo img {
    height: 100px;
  }

  .footer-bottom {
    margin-top: 10px;
    padding: 15px 20px;
  }
}

@media (max-width: 576px) {
  footer {
    padding: 30px 0 15px;
  }

  .footer-title {
    font-size: 1.1rem;
    margin-bottom: 15px;
  }

  .footer-link {
    font-size: 14px;
  }

  .footer-logo img {
    height: 80px;
  }

  .office-contact {
    padding: 12px;
    margin-bottom: 10px;
  }

  .office-contact h4 {
    font-size: 16px;
  }

  .office-contact p {
    font-size: 13px;
  }

  .footer-social-link {
    width: 38px;
    height: 38px;
  }

  .footer-social-link i {
    font-size: 16px;
  }

  .bottom-menu-item a,
  .bottom-menu-item p {
    font-size: 12px;
  }

  .footer-bottom-menu {
    flex-direction: column;
    gap: 8px;
  }

  .bottom-divider {
    display: none;
  }
}

@media (max-width: 400px) {
  .footer-container {
    padding: 0 15px;
  }

  .footer-logo img {
    height: 70px;
  }

  .footer-social ul {
    gap: 10px;
  }

  .footer-social-link {
    width: 35px;
    height: 35px;
  }

  .office-contact {
    padding: 10px;
  }
}