@font-face {
    font-family: 'Geist';
    src: url('static/fonts/Geist-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}





html.ipad-landscape,
body.ipad-landscape {
  height: 100vh;
  overflow: hidden;
}



body.ipad-landscape #page {
  height: 100%;
  overflow-y: auto;
}


body.ipad-landscape #page {
  width: 1920px;
  margin: 0 auto;
  transform-origin: top left !important;
  overflow-y: auto;
  zoom: unset !important;
}



body.ipad-portrait #page {
  height: 100%;
  overflow-y: auto;
}


body.ipad-portrait #page {
  width: 820px;
  transform-origin: top left !important;
  overflow-y: auto;
  overflow-x: hidden !important;
  zoom: unset !important;
}

body.ipad-landscape #page header,
body.ipad-portrait #page header {
  position: sticky;
  top: 0;
  z-index: 999;
}



html, body {
  overflow-x: clip;
}

body {
    background-color: rgba(23, 23, 23, 1);
    color: white;
    font-family: "Geist", sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


.container {
  width: 100%;
  width: 100%;
  margin: 0 0px;
  padding: 0 90px;
  box-sizing: border-box;
}

.bg-decoration-tablet,
.bg-decoration-mobile {
  display: none;
}

.bg-decoration {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.bg-decoration__pattern,
.bg-decoration__ellipse {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
}



/* HEADER */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(23, 23, 23, 1);
  z-index: 998;
}

.header-container {
    margin: 0 auto;
    position: relative; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 90px;
    z-index: 10;
}

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

.logo img {
    height: 28px;
    user-select: none;
    -webkit-user-drag: none;
}

.main-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 30px;
}

.main-nav a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;   
    letter-spacing: 0;   
    transition: opacity 0.3s;
}

.main-nav a:hover {
    opacity: 0.7;
}


.header-contacts {
    display: flex;
    align-items: center;
    gap: 20px;
}

.phone {
    white-space: nowrap;
    font-size: 14px;
    line-height: 1;   
    letter-spacing: 0;   
    font-weight: 300;
}

.callback-btn {
  font-family: 'Geist', sans-serif;
    background-color: rgba(22, 117, 101, 1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.366);
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s;
}

.callback-btn:hover {
    background-color: rgb(17, 92, 79);
}




/* SECTION HERO */
.hero {
    display: flex;
    position: relative;
}

.hero-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.hero-left-side {
    width: 800px;
    z-index: 2;
    margin-top: 0px;
}

.hero-text {
    max-width: 880px;
    margin-top: 400px;
}

.hero-text h1 {
    font-size: 58px;
    font-weight: 400;
    line-height: 1;   
    letter-spacing: 0;  
    margin-bottom: 20px;
}

.hero-text p {
    font-size: 18px;
    font-weight: 200;
    max-width: 500px;
    letter-spacing: 0;  
    color: #aaa;
    margin-top: 10px;
}




.hero-progress {
    margin: 130px 0 100px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 370px;
}


.progress-label-wrapper {
    width: auto;
    text-align: center;
}

.progress-label {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 300;
}

.progress-steps {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.progress-steps li{
    width: 80px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    position: relative;
}

.progress-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: 40%;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.3s;
}

.progress-steps li span {
    font-size: 12px;
    margin-top: 5px;
}


.check-mark {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
}

  

.progress-steps li.done .progress-icon {
    background-color: rgba(22, 117, 101, 1);
    border: 1px solid rgba(22, 117, 101, 1);
}

.progress-steps li.done span {
    color: rgba(22, 117, 101, 1);
}


.progress-steps li.current .progress-icon {
    background-color: rgba(2, 45, 36, 1);
    border: 1px solid rgba(2, 45, 36, 1);
}

.progress-steps li.current span {
    color: white;
}

.progress-steps li.next .progress-icon {
    background-color: rgba(23, 23, 23, 1);
    border: 1px solid rgba(2, 45, 36, 1);
}

.progress-steps li.next span {
    color: rgba(255, 255, 255, 0.5);
}

.progress-steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 25px; 
    left: calc(50% + 25px); 
    width: 50px;
    height: 2px;
    background-color: rgba(22, 117, 101, 1);
}

.progress-steps li.done ~ li::after {
    background-color: rgba(2, 45, 36, 1);
}


.hero-cable-image {
    position: absolute;
    top: 55%; 
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    user-select: none;
    -webkit-user-drag: none;
  
}

.hero-cable-image img {
  height: 850px;
  user-select: none;
  -webkit-user-drag: none;
}

.hero-map {
    position: absolute;
    bottom: 10%;
    left: 50%;
    z-index: -1;
    pointer-events: none;
  
}

.hero-map img {
    width: 90%;
}







/* SECTION FEATURES-LINE */
.features-line {
    background-color: rgba(5, 57, 46, 1);
    position: relative;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    z-index: 100;
}

.features-wrapper {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 30px;
  position: relative;
}


.feature {
  flex: 1;
  min-height: 220px; 
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.feature-divider {
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  align-self: stretch;
}


.feature-name {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.feature img {
    width: 22px;
    height: 22px;
}

.feature h3 {
    font-size: 28px;
    font-weight: 200;
    margin: 0;
}

.feature p {
    font-size: 14px;
    color: #ccc;
    line-height: 1.6;
}

.feature-logo {
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.feature-logo img {
    width: 224px;
    height: auto;
    z-index: 2;
}







/* SECTION PRODUCTS */
.products {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 100px 0;
}

.products-mobile-container {
  display: none;
}


.products .bg-decoration--alt {
  position: absolute;
  bottom: -200px !important;
  left: 0 !important;
  right: auto !important;
  width: 1200px;
  height: 1200px;
  pointer-events: none;
  z-index: 0;
}

.products .bg-decoration--alt .alt-pattern,
.products .bg-decoration--alt .alt-ellipse {
  position: absolute;
  width: 1200px;
  height: 1200px;
  background-size: contain;
  background-repeat: no-repeat;
  left: 0 !important;
  right: auto !important;
  background-position: center left !important;
}

.products .bg-decoration--alt .alt-pattern {
  background-image: url('static/images/background/GridLeftProd.svg');
  bottom: -100px;
}

.products .bg-decoration--alt .alt-ellipse {
  background-image: url('static/images/background/EllipseGlowLeftProd.svg');
}


.products .bg-decoration {
  bottom: 100px;
  right: 0px;
  left: auto;
  width: 1000px;
  height: 1000px;
  z-index: -1;
}

.products .bg-decoration__pattern,
.products .bg-decoration__ellipse {
  width: 1000px;
  height: 1000px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  right: 0;
  bottom: 0;
}

.products .bg-decoration__pattern {
  background-image: url('static/images/background/GridRightProd.svg');
  z-index: -2;
  width: 800px;
  height: 800px;
  opacity: 0.6;
  bottom: 100px;
}

.products .bg-decoration__ellipse {
  background-image: url('static/images/background/EllipseGlowRightProd.png');
  z-index: -1;
}




.products-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 25px;
  margin-bottom: 32px;
}

.products-number {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: rgba(22, 117, 101, 1);
  line-height: 1;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 50px;
  top: 142px;
  justify-content: space-between;
  align-items: stretch;
}



.products-title {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 58px;
  color: #fff;
  margin: 0;
}

.products-main {
  display: flex;
  flex-direction: row;
  margin-top: 40px;
  z-index: 100;
}

.products-cable-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 75%;
}

.products-sort {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 12px;
  margin-bottom: 30px;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: white;
}

.products-sort-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
}

.products-sort span {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 400;
}




.custom-select-wrapper {
  width: 160px;
  position: relative;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  user-select: none;
  height: auto;
}

.custom-select-label {
  font-size: 13px;
  font-weight: 300;
  color: #fff;
  margin: 0;
}



.custom-select-trigger {
  background: transparent;
  border: 1px solid rgba(22, 117, 101, 1);
  color: white;
  padding: 12px 16px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.custom-arrow {
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.custom-options {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  background: #121212;
  border: 1px solid rgba(22, 117, 101, 1);
  border-radius: 10px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
  padding: 0px 0px;
}

.custom-option {
  display: flex;
  justify-content: space-between;
  padding: 0px 16px;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease;
}

.custom-option:hover {
  background-color: rgba(22, 117, 101, 0.2);
}

.custom-option span:first-child {
  font-size: 14px;
  font-weight: 400;
}

.option-count {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
}

.custom-select-wrapper.open .custom-options {
  display: flex;
}

.custom-select-wrapper.open .custom-arrow {
  transform: rotate(180deg);
}















.products-cable-types {
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  margin-bottom: 60px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;   
  width: 80%;
  overflow-y: hidden;
}

.products-cable-types::-webkit-scrollbar {
  display: none;
}

.products-type-title,
.products-type-code {
  white-space: nowrap;
  word-break: keep-all;
}

.products-type {
  transition: opacity 0.3s;
  cursor: pointer;
}

.products-type:hover {
  opacity: 0.6;
}

.products-type.active {
  opacity: 1;
}

.products-type-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 4px;
}

.products-type-code {
  font-size: 18px;
  font-weight: 300;
  color: white;
  margin: 0;
  line-height: 1;
  letter-spacing: 0;
}



.products-cable {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 220px 0;
  height: auto;
}


.products-cable img {
  position: absolute;
  height: 920px;
  transform: rotate(90deg);
  display: block;
  left: 230px;
  user-select: none;
  -webkit-user-drag: none;
}

.cable-label {
  position: absolute;
  color: rgb(255, 255, 255);
  font-size: 14px;
  font-weight: 300;
  font-family: 'Geist', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.cable-label p {
  margin: 2px;
}

.cable-label .line {
  width: 1px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.3);
  margin-top: 4px;
}

.cable-label--inner {
  top: 490px;
  left: 340px;
}

.cable-label--outer {
  top: 645px;
  left: 180px;
}

.cable-label--isolation {
  top: 645px;
  left: 540px;
}

.cable-label--copper {
  top: 490px;
  left: 700px;
}

.cable-label--sluda {
  top: 605px;
  left: 740px;
}

.cable-label--sluda .line{
  height: 100px;
}


/* ВВГнг(A)-FRLS */
.products-cable--vvgn_frls .cable-label--copper {
  top: 485px;
  left: 750px;
}




/* ВВГЭнг(A)-FRLS */

.products-cable--vvgen_frls .cable-label--screen {
  top: 645px;
  left: 370px;
}

.products-cable--vvgen_frls .cable-label--copper {
  left: 740px;
}

.products-cable--vvgen_frls .cable-label--inner {
  left: 370px;
}

.products-cable--vvgen_frls .cable-label--isolation {
  left: 540px;
}

.products-cable--vvgen_frls .cable-label--sluda {
  top: 605px;
  left: 750px;
}


/* ВВГ-Пнг(A) */
.products-cable--vvg_png .cable-label--copper {
  top: 470px;
  left: 700px;
}

.products-cable--vvg_png .cable-label--isolation {
  left: 540px;
}

.products-cable--vvg_png .cable-label--inner {
  top: 450px;
  left: 370px;
}


/* ВБШвнг(A)-LS */
.products-cable--vbshng_ls .cable-label--copper {
  left: 730px;
}

.products-cable--vbshng_ls .cable-label--isolation {
  left: 540px;
}

.products-cable--vbshng_ls .cable-label--inner {
  left: 360px;
}

.products-cable--vbshng_ls .cable-label--screen {
  top: 645px;
  left: 370px;
}



/* ВБШвнг(A)-FRLS */
.products-cable--vbshng_frls .cable-label--copper {
  left: 740px;
}

.products-cable--vbshng_frls .cable-label--isolation {
  left: 540px;
}

.products-cable--vbshng_frls .cable-label--inner {
  left: 360px;
}

.products-cable--vbshng_frls .cable-label--screen {
  top: 645px;
  left: 370px;
}

.products-cable--vbshng_frls .cable-label--sluda {
  left: 750px;
}



/* КВВГЭнг(А)-LS */
.products-cable--kvvgen_ls .cable-label--inner {
  left: 435px;
}

.products-cable--kvvgen_ls .cable-label--screen {
  top: 645px;
  left: 420px;
}

.products-cable--kvvgen_ls .cable-label--copper {
  left: 700px;
}

.products-cable--kvvgen_ls .cable-label--isolation {
  left: 540px;
}



/* КВВГЭнг(А)-FRLS */
.products-cable--kvvgen_frls .cable-label--inner {
  top: 490px;
  left: 435px;
}

.products-cable--kvvgen_frls .cable-label--screen {
  top: 645px;
  left: 420px;
}

.products-cable--kvvgen_frls .cable-label--copper {
  top: 490px;
  left: 700px;
}

.products-cable--kvvgen_ls .cable-label--isolation {
  top: 645px;
  left: 540px;
}


/* ПуВ */

.products-cable--puv_hb .cable-label--copper{
  top: 445px;
  left: 660px;
}
.products-cable--puv_hb .cable-label--copper .line {
  height: 100px;
}



.products-cable--puv_hb .cable-label--inner {
  top: 445px;
  left: 275px;
}
.products-cable--puv_hb .cable-label--inner .line {
  height: 100px;
}




.products-footer {
  display: flex;
  flex-direction: row;
  align-items: center;

}

.products-slider {
  display: flex;
  gap: 50px;
  margin-right: 25%;
  user-select: none;
  -webkit-user-drag: none;

}

.products-slider-left,
.products-slider-right {
  width: 40px;
  height: 40px;
  background-color: rgba(22, 117, 101, 1);
  border: 1px solid rgba(255, 255, 255, 0.366);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s ease;
}

.products-slider button:hover {
  background-color: rgb(17, 92, 79);
}

.products-slider button.disabled {
  background-color: rgba(2, 45, 36, 1);
  border-color: rgba(255, 255, 255, 0.15);
  cursor: default;
  pointer-events: none;
}

.products-slider button.disabled:hover {
  background-color: rgba(2, 45, 36, 1);
}

.products-slider button.disabled img {
  opacity: 0.5;
}


.products-slider-left img{
  transform: rotate(180deg);
}

.products-details {
  display: flex;
  gap: 20px;
}

.products-cert,
.products-price {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  border: 1px solid rgba(250, 250, 250, 0.367);
  border-radius: 8px;
  background-color: rgba(22, 117, 101, 1);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.products-cert img,
.products-price img {
  width: 16px;
  height: 16px;
  margin-right: 0px;
  vertical-align: middle;
  user-select: none;
  -webkit-user-drag: none;
}


.products-availability {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.availability-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  margin: 0;
}

.availability-status {
  font-size: 14px;
  color: white;
  font-weight: 400;
  margin: 0;
}


.products-info-section {
  font-family: 'Geist', sans-serif;
  padding-left: 40px;
  border-left: none;
  max-width: 750px;
  align-content: center;
}

.products-info-title {
  font-size: 32px;
  font-weight: 400;
}

.products-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.products-info-item {
  border-bottom: 1px solid rgba(2, 45, 36, 1);
  padding: 20px 0;
  cursor: pointer;
}

.products-info-item.active {
  border-bottom: 1px solid rgba(22, 117, 101, 1);
}


.products-toggle-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.products-question {
  font-weight: 200;
  font-size: 16px;
  color: white;
  transition: color 0.3s ease;
}

.products-info-item.active .products-question {
  color: rgba(22, 117, 101, 1);
}


.products-plus {
  display: flex;
  align-items: center;
}

.products-plus img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.products-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

.products-info-item.active .products-answer {
  max-height: 1000px;
  opacity: 1;
  margin-top: 10px;
}

.products-answer p {
  margin: 0;
  padding: 4px 0;
  font-size: 14px;
  color: rgb(255, 255, 255);
  font-weight: 200;
}











/* REVIWES SECTION */
.reviews {
  overflow: hidden;
  padding: 100px 0;
}

.reviews-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 60px;
  position: relative;
}

.reviews-number {
  position: absolute;
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: rgba(22, 117, 101, 1);
  line-height: 1;
  margin: 0;
  padding: 0;
  left: -40px;
  top: 40px;
}

.reviews-title {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 58px;
  line-height: 120%;
  color: #fff;
  margin: 0;
  padding: 0;
}

.reviews-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.reviews-cards {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}


.reviews-cards::-webkit-scrollbar {
  display: none;
}

.review-card {
  width: 550px;
  height: 180px;
  padding: 28px 40px;
  border-radius: 20px;
  background-color: rgba(5, 45, 36, 1);
  border: 1px solid rgba(22, 117, 101, 1);
  scroll-snap-align: start;
  flex-shrink: 0;
  color: #fff;
  font-family: 'Geist', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1px;
  flex-shrink: 0;
  scroll-snap-align: start;
}


.review-card .name {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 18px;
  margin: 0;
}

.review-card .text {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 120%; 
  letter-spacing: 0%; 
  color: rgba(255, 255, 255, 0.7);
}

.review-card .date {
  position: absolute;
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 16px;
  bottom: 28px;
  color: rgba(255, 255, 255, 0.4);
}

.reviews-slider {
  display: flex;
  gap: 48px;
}

.reviews-slider button {
  width: 40px;
  height: 40px;
  background-color: rgba(22, 117, 101, 1);
  border: 1px solid rgba(255, 255, 255, 0.366);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s ease;
}

.reviews-slider button img {
  display: block;
  width: 18px;
  height: 18px;
  user-select: none;
  -webkit-user-drag: none;
}

.reviews-next img {
  transform: translateY(1px);
}

.reviews-back img {
  transform: rotate(180deg) translateY(-1px);;
}

.reviews-slider button:hover {
  background-color: rgb(17, 92, 79);
}



.reviews-slider button.disabled {
  background-color: rgba(2, 45, 36, 1);
  border-color: rgba(255, 255, 255, 0.15);
  cursor: default;
  pointer-events: none;
}

.reviews-slider button.disabled:hover {
  background-color: rgba(2, 45, 36, 1);
}

.reviews-slider button.disabled img {
  opacity: 0.5;
}









/* SECTION GUIDE */
.guide {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  padding: 100px 0;
}


.guide .bg-decoration--alt {
  position: absolute;
  bottom: -100px !important;
  left: 0 !important;
  right: auto !important;
  width: 1100px;
  height: 1100px;
  pointer-events: none;
  z-index: 0;
}

.guide .bg-decoration--alt .alt-pattern,
.guide .bg-decoration--alt .alt-ellipse {
  position: absolute;
  width: 1100px;
  height: 1100px;
  background-size: contain;
  background-repeat: no-repeat;
  left: 0 !important;
  right: auto !important;
  background-position: center left !important;
}

.guide .bg-decoration--alt .alt-pattern {
  background-image: url('static/images/background/GridLeftGuide.svg');
  bottom: 100px;
}

.guide .bg-decoration--alt .alt-ellipse {
  background-image: url('static/images/background/EllipseGlowLeftGuide.svg');
}


.guide .bg-decoration {
  bottom: 0px;
  right: 0px;
  left: auto;
  width: 1000px;
  height: 1000px;
}

.guide .bg-decoration__pattern,
.guide .bg-decoration__ellipse {
  width: 1000px;
  height: 1000px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  right: 0;
  bottom: 0;
}

.guide .bg-decoration__pattern {
  background-image: url('static/images/background/GridRightGuide.svg');
  z-index: 1;
  bottom: -100px;
}

.guide .bg-decoration__ellipse {
  background-image: url('static/images/background/EllipseGlowRightGuide.svg');
  z-index: 2;
  bottom: 100px;
}



.guide-container {
  display: flex;
  flex-direction: row;
  gap: 6.5%;
}

.guide-mini-card-section {
  gap: 16%;
}

.guide-container,
.guide-mini-card-section {
}

.guide-number {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: rgba(22, 117, 101, 1);
  line-height: 1;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 50px;
  top: 145px;
}

.guide-title-mob {
  display: none;
}


.guide-card-large {
  background: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 450px;
  z-index: 100;
}

.guide-card-mini {
  background: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 400px;
  z-index: 100;
}


.photo-frame-large {
  position: relative;
  overflow: hidden;
  width: 380px;
  height: 475px;
  border-radius: 20px;
  margin-bottom: 15px;
}

.photo-frame-large img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  object-fit: cover;
}

.photo-frame-mini {
  position: relative;
  overflow: hidden;
  width: 320px;
  height: 320px;
  border-radius: 20px;
  margin-bottom: 15px;
}

.photo-frame-mini img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  object-fit: cover;
}

.guide-card-mini img {
  width: 97%;
  border-radius: 20px;
  margin-bottom: 15px;
  user-select: none;
  -webkit-user-drag: none;
}

.guide-card-large h1,
.guide-card-mini h1 {
  font-size: 18px;
  font-weight: 400;
  margin: 4px 0;
}

.guide-card-large p,
.guide-card-mini p {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.75);
  margin: 2px 0;
}

.guide-mini-card-section {
  display: flex;
}

.guide-title {
  
  font-weight: 300;
  font-size: 58px;
  max-width: 400px;
  margin-bottom: 40px;
}

.guide-title h1 {
  width: 400px;
  font-family: 'Geist', sans-serif;
  font-size: 58px;
  font-weight: 300;
  margin-top: 0px;
  margin-bottom: 10px;
  line-height: 1;
}

.guide-title p {
  width: 400px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.see-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  text-decoration: none;
}

.see-more p {
  font-size: 13px;
  color: rgba(22, 117, 101, 1);
  font-weight: 400;
}

.see-more img {
  align-content: center;
  width: 14px;
  height: 14px;
  margin: 0;
  user-select: none;
  -webkit-user-drag: none;
}









/* SECTION VACANCY */
.vacancy {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background-color: #000;
  height: 650px;
  width: 100%;
  position: relative;
  overflow: visible;
  padding: 0px 0;
}

.vacancy-text {
  width: 52%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  position: relative;
  row-gap: 30px;
  padding: 100px 0;
  margin-left: 0px;
}

.vacancy-number {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: rgba(22, 117, 101, 1);
  line-height: 1;
  margin: 0;
  padding: 0;
  position: absolute;
  left: -40px;
  top: 145px;
}

.vacancy-title {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 58px;
  color: #fff;
  margin: 0;

}

.vacancy-info {
  display: flex;
  flex-direction: row;
  gap: 60px;
}

.vacancy-info p {
  max-width: 350px;
  font-size: 14px;
  font-weight: 100;
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 20px;
}

.vacancy-btn {
  font-family: 'Geist', sans-serif;
  background-color: rgba(22, 117, 101, 1);
  color: #fff;
  width: 350px;
  height: 45px;
  font-size: 14px;
  font-weight: 500;
  padding: 0px 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.366);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.vacancy-btn:hover {
  background-color: rgba(14, 85, 72, 1);
}

.vacancy-photo {
  position: absolute;
  top: 0;
  right: 0px;
  height: 100%;
  z-index: 1;
}

.vacancy-photo img {
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}



/* модалка */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal {
  background-color: rgba(23, 23, 23, 1);
  border-radius: 16px;
  padding-top: 10px;
  width: 480px;
  height: 550px;
  position: relative;
  color: #fff;
  font-family: 'Geist', sans-serif;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  font-weight: 10;
  cursor: pointer;
}

.modal-title {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 30px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.modal-form label {
  font-size: 16px;
  color: #fff;
  margin-left: 45px;
}

.modal-form input,
.modal-form select {
  background-color: rgba(23, 23, 23, 1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  color: #fff;
  font-size: 16px;
  outline: none;
  width: 370px;
  margin: 0 auto;
  display: block;
}

.modal-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg width='10' height='5' viewBox='0 0 10 5' xmlns='http://www.w3.org/2000/svg'><path d='M0 0L5 5L10 0H0Z' fill='white'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 5px;
}

.modal-form select option {
  background-color: #111;
  color: #fff;
  font-size: 14px;
  padding: 12px 14px;
}
.modal-form select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #fff;
}


/* телефон*/
.phone-wrapper {
  background-color: rgba(23, 23, 23, 1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 48px;
  gap: 10px;
  position: relative;
  width: 370px;
  margin: 0 auto;
}

.phone-select {
  display: flex;
  align-items: center;
  gap: 1px;
  cursor: pointer;
}

.phone-flag {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
}

.phone-arrow {
  display: inline-block;
  width: 10px;
  height: 5px;
  background-image: url("data:image/svg+xml;utf8,<svg width='10' height='5' viewBox='0 0 10 5' xmlns='http://www.w3.org/2000/svg'><path d='M0 0L5 5L10 0H0Z' fill='white'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 0 5px;
}

.phone-code {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
}

.phone-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent;
  color: #fff;
  font-size: 16px;
  box-shadow: none;
  appearance: none;
  margin-left: 0 !important;
  padding-left: 5px !important;
  width: 200px !important;
}


.phone-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.phone-country-list {
  position: absolute;
  top: 40px;
  left: 0;
  width: 50%;
  background: #111;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  list-style: none;
  padding-left: 0;
}

.phone-country-list li {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  color: #fff;
}

.phone-country-list li:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.hidden {
  display: none;
}





/* вакансии */
.job-select-wrapper {
  position: relative;
  width: 370px;
  margin: 0 auto;
  margin-left: 40px;
}

.job-select {
  background-color: rgba(23, 23, 23, 1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  height: 48px;
  padding: 0px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  color: #ffffff;
  width: 100%;
}

.job-selected-option {
  font-size: 16px;
  font-family: 'Geist', sans-serif;
}

.job-arrow {
  display: inline-block;
  width: 10px;
  height: 5px;
  background-image: url("data:image/svg+xml;utf8,<svg width='10' height='5' viewBox='0 0 10 5' xmlns='http://www.w3.org/2000/svg'><path d='M0 0L5 5L10 0H0Z' fill='white'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.job-options {
  position: absolute;
  top: 46px;
  left: 0;
  width: 100%;
  background: #111;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  list-style: none;
  padding-left: 0;
  font-family: 'Geist', sans-serif;
}

.job-options li {
  padding: 12px 14px;
  font-size: 14px;
  cursor: pointer;
  color: #fff;
}

.job-options li:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.job-selected-option.placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 150;
  font-family: 'Geist', sans-serif;
  opacity: 1;
}

.job-select.active .job-selected-option {
  color: #fff;
}

.submit-btn {
  width: 400px;
  margin: 8px auto 0;
  margin-left: 40px;
  margin-right: 40px;
  background-color: rgba(22, 117, 101, 1);
  color: #fff;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.366);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background-color: rgb(17, 92, 79);
}

















/* CERTIFICATES SECTION */
.certificates {
  position: relative;
  z-index: 1;
  padding: 100px 0;
}

.certificates-container {
  position: relative;
  z-index: 2;
  padding: 0;
  margin: 0;
}

.cert-slider {
  display: none;
}

.certificates .bg-decoration--alt {
  position: absolute;
  bottom: 50px !important;
  left: 0 !important;
  right: auto !important;
  width: 1000px;
  height: 1000px;
  pointer-events: none;
  z-index: 0;
}

.certificates .bg-decoration--alt .alt-pattern,
.certificates .bg-decoration--alt .alt-ellipse {
  position: absolute;
  width: 1000px;
  height: 1000px;
  background-size: contain;
  background-repeat: no-repeat;
  left: 0 !important;
  right: auto !important;
  background-position: bottom left !important;
}

.certificates .bg-decoration--alt .alt-pattern {
  background-image: url('static/images/background/GridLeftCert.svg');
}

.certificates .bg-decoration--alt .alt-ellipse {
  background-image: url('static/images/background/EllipseGlowLeftCert.svg');
}




.certificates .bg-decoration {
  bottom: -160px;
  right: 0px;
  left: auto;
  width: 1200px;
  height: 1200px;
}

.certificates .bg-decoration__pattern,
.certificates .bg-decoration__ellipse {
  width: 1200px;
  height: 1200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  right: 0;
  bottom: 0;
}

.certificates .bg-decoration__pattern {
  background-image: url('static/images/background/GridRightCert.svg');
  z-index: 1;
}

.certificates .bg-decoration__ellipse {
  background-image: url('static/images/background/EllipseGlowRightCert.svg');
  z-index: 2;
}



.certificates-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 32px;
}


.certificates-number {
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: rgba(22, 117, 101, 1);
    line-height: 1;
    margin: 0;
    padding: 0;
    position: absolute;
    left: -40px;
    top: 40px;
}
  
.certificates-title {
    font-family: 'Geist', sans-serif;
    font-weight: 300;
    font-size: 58px;
    line-height: 120%;
    color: rgba(255, 255, 255, 1);
    margin: 0;
    padding: 0;
}


.certificates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
  grid-auto-flow: dense;
}




.certificates-card {
    background-color: rgba(23, 23, 23, 1);
    border: 1px solid rgba(22, 117, 101, 1);
    padding: 5px 20px 20px 20px;
    border-radius: 12px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

.certificates-text {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.3;
    color: rgba(255, 255, 255, 1);
  }

.certificates-date {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 100%;
    color: rgba(255, 255, 255, 0.5);
  }

.certificates-button {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    width: 120px;
    height: 40px;
    background-color: rgba(2, 45, 36, 1);
    color: #ffffff;
    border: 1px solid rgba(22, 117, 101, 1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: auto;
  }

.certificates-button:hover {
    background-color: rgba(22, 117, 101, 1);
    color: #000;
  }


.certificates-card--short {
    height: 260px;
    border-radius: 15px;
  }
  
.certificates-card--long {
    height: 260px;
    border-radius: 15px;
    grid-column: span 2;
  }
  








/* FAQ SECTION */
.faq {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
}

.faq-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0;
  margin: 0;
  gap: 50px;
}

.faq-left,
.faq-right {
  height: 630px;
}

.faq-left {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.faq-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 25px;
  margin-bottom: 32px;
}

.faq-number {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: rgba(22, 117, 101, 1);
  line-height: 1;
  margin: 0;
  padding: 0;
  position: absolute;
  left: -40px;
  top: 40px;
}



.faq-title {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 58px;
  line-height: 120%;
  color: rgba(255, 255, 255, 1);
  margin: 0;
  padding: 0;
}


.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0px;
  margin-top: 30px;
  width: 100%;
  margin-left: 0px;
  padding: 0;
}



.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 0px;
  font-size: 16px;
  font-weight: 200;
  font-family: 'Geist', sans-serif;
  color: rgb(255, 255, 255);
  line-height: 140%;
  transition: all 0.3s ease;
  opacity: 0;
  width: 95%;
}


.faq-item-clean .faq-plus {
  transition: transform 0.3s ease;
}

.faq-item-clean.active .faq-answer {
  opacity: 1;
  max-height: 500px;
  padding: 10px 0px;
  padding-left: 0;
  width: 95%;
}

.faq-toggle-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px 0 0;
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 200;
  color: #fff;
  margin-top: 0px;
}



.faq-item-clean {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(2, 45, 36, 1);
  transition: color 0.2s ease;
  box-sizing: border-box;
  cursor: pointer;
  padding-top: 0px;
  padding-bottom: 10px;
  margin: 0;
}


.faq-item-clean.active {
  border-bottom: 1px solid rgba(22, 117, 101, 1);
}

.faq-item-clean.active .faq-question {
  color: rgba(22, 117, 101, 1);
}

.faq-item-clean:hover {
  color: rgba(22, 117, 101, 1);
}

.faq-question {
  user-select: none;
  font-size: 17px;

  padding-top: 0px;
  margin-top: 0px;
  line-height: 1;
}

.faq-plus {
  color: rgba(22, 117, 101, 1);
  font-size: 28px;
  font-weight: 400;
  transition: transform 0.3s ease;
}

.faq-plus img {
  width: 15px;
  height: 15px;
  display: block;
  padding: 12px 0;
  user-select: none;
  -webkit-user-drag: none;
}

.faq-button {
  background-color: rgba(22, 117, 101, 1);
  color: #fff;
  padding: 16px 32px;
  border: 1px solid rgba(255, 255, 255, 0.366);
  border-radius: 10px;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 350;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: auto;
  transition: background-color 0.3s ;
  
}

.faq-button:hover {
  background-color: rgb(17, 92, 79);
}

.faq-right {
  position: relative;
  height: auto;
  display: flex;
  align-items: stretch;
}

.faq-right img {
  width: auto;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}





/* МОДАЛКА */
.faq-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.faq-modal-window {
  background-color: rgba(23, 23, 23, 1);
  border-radius: 16px;
  padding-top: 10px;
  width: 480px;
  height: 430px;
  position: relative;
  color: #fff;
  font-family: 'Geist', sans-serif;
}

.faq-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  font-weight: 10;
  cursor: pointer;
}

.faq-modal-title {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 30px;
}

.faq-modal-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.faq-label {
  font-size: 16px;
  color: #fff;
  margin-left: 45px;
}

.faq-input {
  background-color: rgba(23, 23, 23, 1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  color: #fff;
  font-size: 16px;
  outline: none;
  width: 370px;
  margin: 0 auto;
  display: block;
}

.faq-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.faq-phone-wrapper {
  background-color: rgba(23, 23, 23, 1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 48px;
  gap: 10px;
  position: relative;
  width: 370px;
  margin: 0 auto;
}

.faq-phone-select {
  display: flex;
  align-items: center;
  gap: 1px;
  cursor: pointer;
}

.faq-phone-flag {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
}

.faq-phone-arrow {
  display: inline-block;
  width: 10px;
  height: 5px;
  background-image: url("data:image/svg+xml;utf8,<svg width='10' height='5' viewBox='0 0 10 5' xmlns='http://www.w3.org/2000/svg'><path d='M0 0L5 5L10 0H0Z' fill='white'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 0 5px;
}

.faq-phone-code {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
}

.faq-phone-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent;
  color: #fff;
  font-size: 16px;
  box-shadow: none;
  appearance: none;
  margin-left: 0 !important;
  padding-left: 5px !important;
  width: 200px !important;
}

.faq-phone-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.faq-country-list {
  position: absolute;
  top: 40px;
  left: 0;
  width: 50%;
  background: #111;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  list-style: none;
  padding-left: 0;
}

.faq-country-list li {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  color: #fff;
}

.faq-country-list li:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.faq-submit-btn {
  width: 400px;
  margin: 8px auto 0;
  margin-left: 40px;
  margin-right: 40px;
  background-color: rgba(22, 117, 101, 1);
  color: #fff;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.366);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-submit-btn:hover {
  background-color: rgb(17, 92, 79);
}

.hidden {
  display: none;
}











/* FOOTER */
.footer {

  padding: 0 90px;
  color: #fff;
  font-family: 'Geist', sans-serif;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  align-items: stretch;
  margin: 0 auto;
}

.footer-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
}

.footer-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 2;
}

.footer-menu a {
  cursor: pointer;
  color: #fff;
  opacity: 0.85;
  text-decoration: none;
  width: 100px;
}

.footer-menu .active-link {
  color: rgba(22, 117, 101, 1);
  font-weight: 500;
}



.footer-column:nth-child(2) {
  margin-left: -200px;
}


.footer-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
  margin-top: 0px;
}

.footer-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin: 0;
}

.footer-contacts {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
}

.footer-contacts-label {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0px;
}

.footer-contacts-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}


.footer-phone {
  font-size: 26px;
  font-weight: 300;
  margin: 0;
  color: white;
  text-decoration: none;
}

.footer-email {
  font-size: 26px;
  text-transform: uppercase;
  margin: 0px;
  font-weight: 300;
}

.footer-convert::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: rgba(2, 45, 36, 1);
}




.footer-bottom-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  align-items: stretch;
  margin: 0 auto;
  margin-bottom: 20px;
}

.footer-logo {
  display: flex;
  align-items: center;
}

.footer-policy-privacy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: -560px;
}

.footer-policy-privacy a{
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 300;
}


.footer-creator {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 300;
}

.footer-creator a{
  color: rgb(255, 255, 255);
  text-decoration: none;
}

















/* ОПТИМИЗАЦИЯ МОБИЛЬНЫЕ УСТРОЙСТВА/ПЛАНШЕТЫ */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 10px;
  border-radius: 6px;
  transition: background 0.3s;
  margin-left: auto;
  z-index: 2000;
}

.burger span {
  width: 25px;
  height: 3px;
  background-color: white;
  display: block;
  border-radius: 2px;
}

.mobile-menu-inner {
  display: none;
}



/* ОПТИМИЗАЦИЯ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА */
@media (max-width: 767px) {

  .container {
    padding: 0 20px !important;
  }

  .bg-decoration {
    display: none;
  }

  .burger {
    display: flex;
    margin-right: 0;
    margin-left: auto;
  }



  /* HEADER */
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }

  .header-container {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 20px;
    gap: 10px;
    position: relative;
    width: 100%;
    margin: 0;
    box-sizing: border-box;

  }

  .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .logo img {
    height: 30px;
    max-width: 100%;
  }

  .burger {
    display: flex;
    transition: transform 0.4s ease;
  }

  .burger.open {
    transform: rotate(90deg);
  }

  .main-nav {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }

  .main-nav.open,
  .header-contacts.open {
    display: flex;
  }


  .header-contacts {
    display: none;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
  }
  

  .mobile-menu-container {
    display: none;
    width: 100%;
    background-color: rgba(23, 23, 23, 1);
    margin-top: 12px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
  }

  .mobile-menu-container.open {
    display: flex;
    max-height: 500px;
  }

  .mobile-menu-inner {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
  }

  .mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .mobile-menu-links a {
    color: white;
    font-size: 16px;
    text-decoration: none;
    font-weight: 300;
  }

  .mobile-menu-contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  .mobile-menu-contacts .phone {
    font-size: 16px;
    font-weight: 300;
  }

  .mobile-menu-contacts .callback-btn {
    margin-top: 8px;
    padding: 10px 18px;
    font-size: 14px;
  }




  /* HERO */
  .hero {
    flex-direction: column;
    padding: 40px 0;
    margin-top: 120px;
  }

  .hero-content {
    flex-direction: column;
    gap: 40px;
  }

  .hero-left-side {
    width: 100%;
  }

  .hero-text {
    margin-top: 200px;
    margin-left: 120px;
  }

  .hero-text h1 {
    font-size: 52px;
  }

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

  .hero-cable-image {
    display: block;
    position: absolute;
    top: 15%;
    left: -90px;
    transform: translateY(-50%);
    width: auto;     
    height: 300px;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(10px 0px 20px rgba(0, 0, 0, 0.5));
  }

  .hero-cable-image img {
    width: auto;
    height: 700px;
    object-fit: contain;
    user-select: none;
  }

  .hero-progress {
    margin-top: 200px;
    max-width: none;
  }
  
  .progress-steps{
    justify-content: space-between;
  }

  .progress-steps li:not(:last-child)::after {
    width: 55px;
  }

  .hero-map {
    position: absolute;
    bottom: 30%;
    left: -300px;
    z-index: -1;
    pointer-events: none;
  }

  .hero-map img {
    width: 95%;
    clip-path: inset(0 0 0 350px);
  }





  /* FEATURES */
  .features-cont {
    width: 100%;
    padding: 0;
  }

  .features-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    width: 100%;
  }

  .feature {
    padding: 30px 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .feature-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
  }

  .feature-divider.fullwidth {
    width: calc(100% + 180px);
    margin: 0 -90px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
  }


  .feature-logo,
  .features-wrapper .feature-divider:last-of-type {
    display: none;
  }

















 
  /* PRODUCTS */
  .products {
    overflow: hidden;
  }

  .products-cable-container,
  .products-info-section {
    display: none;
  }

  .products-main-mob {
    display: flex;
  }

  .products-title {
    font-size: 34px;
    margin-left: 30px;
    width: 100%;
    padding-right: 40px;
  }

  .products-number {
    font-size: 20px;
    left: 18px;
    top: 117px;
  }


  .products-mobile-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 80px;
  }



  .products-cable-container-mob {
    display: flex;
    background-color: rgba(23, 23, 23, 1);
    width: 100%;
    height: 100px;
    position: relative;
    border-radius: 20px;
    transition: height 0.4s ease;

    cursor: pointer;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Градиентовая обводка*/
  .products-cable-container-mob::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(
      -45deg,
      rgba(201, 201, 201, 1),
      rgba(177, 177, 177, 0.26),
      rgba(177, 177, 177, 1)
    );
    z-index: -1;
    border-radius: 20px;
    pointer-events: none;
  }

  .products-cable-container-mob.open {
    height: 600px;
  }

  .cable-closed {
    height: 100px;
  }

  .cable-img {
    height: auto;
    height: 380px;
    transform: rotate(80deg);
    object-fit: contain;
    margin-top: -170px;
    margin-left: 90px;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
  }

  .cable-title {
    font-family: 'Geist', sans-serif;
    color: white;
    font-size: 18px;
    font-weight: 300;
    margin: 0;
    white-space: nowrap;
    position: absolute;
    right: 20px;
    top: 70%;
    transform: translateY(-50%);
  }


  /* Закрытая карточка */
  .cable-opened {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color: white;
  }

  .opened-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: start;
  }

  .opened-title {
    display: flex;
    flex-direction: column;
  }

  .opened-type {
    color: #a0a0a0;
    font-size: 14px;
    margin: 0;
  }

  .opened-name {
    color: white;
    font-size: 18px;
    font-weight: 300;
    margin: 0;
  }

  .opened-info {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    z-index: 1;
  }

  .opened-image {
    position: absolute;
    max-height: 480px;
    object-fit: contain;
    margin-top: 40px;
  }




  .opened-footer {
    max-width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    box-sizing: border-box;
    overscroll-behavior-x: contain;
  }


  .opened-footer::-webkit-scrollbar {
    display: none;
  }

  .opened-footer p {
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    cursor: pointer;
  }






  .opened-footer p.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .opened-name-active {
    font-weight: bold;
    color: white;
    opacity: 1;
    font-size: 16px !important;
  }

  .opened-name-inactive {
    color: #777;
    font-size: 16px !important;
  }

  .opened-footer p.animating {
    opacity: 0 !important;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }














  .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    z-index: 5;
    user-select: none;
    transition: color 0.2s ease;
  }

  .slider-arrow:hover {
    color: rgba(255, 255, 255, 0.8);
  }

  .slider-left {
    left: 70px;
  }

  .slider-right {
    right: 70px;
  }




  /* оверлей с информаций */
  .cable-opened {
    position: relative;
    overflow: hidden;
  }

  .cable-description-overlay {
    position: absolute;
    inset: 0;
    background: rgba(40, 40, 40, 1);
    z-index: 10;
    border-radius: 20px;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    padding: 24px;
    box-sizing: border-box;
    pointer-events: none;
    transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
  }

  .cable-description-overlay.active {
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
  }

  .desc-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
    align-self: flex-end;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
  }


  /* вопросы ответы */
  .products-info-section-mob {
    padding: 0px 0px;
    font-family: 'Geist', sans-serif;
  }

  .products-info-title-mob {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 16px;
    margin-top: 0;
  }

  .products-info-list-mob {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .products-info-item-mob {
    border-bottom: 1px solid rgba(2, 70, 56, 1);
    padding-top: 12px;
    padding-bottom: 8px;
    cursor: pointer;
  }

  .products-info-item-mob.active {
    border-bottom: 1px solid rgba(22, 117, 101, 1);
  }

  .products-toggle-wrapper-mob {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .products-question-mob {
    font-size: 20px;
    font-weight: 400;
    color: white;
  }

  .products-info-item-mob.active .products-question-mob {
    color: rgba(22, 117, 101, 1);
  }


  .products-plus-mob img {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
  }

  .products-answer-mob {
    display: flex;
    flex-direction: column;
    margin-top: 6px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    gap: 4px;
  }

  .products-info-item-mob.active .products-answer-mob {
    max-height: 1000px;
    opacity: 1;
  }

  .products-answer-mob p {
    margin: 2px 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: white;
  }


  .products-cable-name-mob {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
  }

  .products-cable-name-mob b {
    font-weight: 600;
    color: #ffffff;
  }



  .opened-image,
  .slider-arrow {
    opacity: 0;
    transition: opacity 0.4s ease;
  }




  












  /* REVIEWS */
  .reviews {
    position: relative;
    overflow: visible;
  }

  .reviews-title{
    font-size: 34px;
    margin-left: 30px;
    width: 100%;
    padding-right: 40px;
  }

  .reviews-number {
    font-size: 20px;
    left: -3px;
    top: 14px;
  }

  .reviews-content {
    align-items: stretch !important;
  }

  .reviews-cards {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 0 11px;
  }

  .reviews-cards::-webkit-scrollbar {
    display: none;
  }
  .review-card {
    height: auto !important;
    min-height: 260px !important;
    padding: 20px 30px;
    flex: 0 0 calc(100% - 40px) !important;
    max-width: none !important;
  }
  .reviews-back,
  .reviews-next {
    display: none;
  }

  .review-card .name {
    font-size: 16px;
  }

  .review-card .text {
    font-size: 14px;
    line-height: 1.5;
  }

  .review-card .date {
    position: static;
    margin-top: 20px;
  }

  .reviews-slider {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .reviews-slider button {
    width: 36px;
    height: 36px;
  }

  
  .reviews .bg-decoration-mobile {
    display: block;
    position: absolute;
    bottom: -40%;
    right: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: -2;
  }

  .reviews .bg-decoration-mobile .bg-decoration__pattern {
    width: 100%;
    height: 100%;
    background: url('static/images/mobile_bg/MobileReviewsPattern.svg') no-repeat center center;
    background-size: contain;
  }







  /* GUIDE */
  .guide {
    position: relative;
    overflow: visible;
    flex-direction: column;
    padding: 80px 0;
  }

  .guide-container {
    flex-direction: column;
    gap: 40px;
  }

  .guide-title-mob {
    display: flex;
    padding-left: 30px;
    font-size: 34px;
    font-weight: 300;
    margin: 0;
  }

  .guide-number {
    font-size: 20px;
    left: -2px;
    top: 97px;
    padding: 0 20px;
  }

  .guide-title {
    display: none;
  }

  .guide-mini-card-section {
    flex-direction: column;
    gap: 30px;
  }

  .guide-card-mini,
  .guide-card-large {
    max-width: 100%;
    justify-content: center;
    align-items: center;
  }

  .guide-card-mini p,
  .guide-card-large p {
    text-align: center;
  }

  .photo-frame-mini,
  .photo-frame-large {
    width: 200px;
    height: 240px;
  }


  .guide .bg-decoration-mobile {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
  }

  .guide .bg-decoration-mobile .bg-decoration__pattern {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  .deco-1 .bg-decoration__pattern {
    background-image: url('static/images/mobile_bg/MobileGuide1Pattern.svg');
  }

  .deco-2 .bg-decoration__pattern {
    background-image: url('static/images/mobile_bg/MobileGuide2Pattern.svg');
  }

  .deco-3 .bg-decoration__pattern {
    background-image: url('static/images/mobile_bg/MobileGuide3Pattern.svg');
  }

  .deco-4 .bg-decoration__pattern {
    background-image: url('static/images/mobile_bg/MobileGuide4Pattern.svg');
  }

  .deco-1,
  .deco-2,
  .deco-3,
  .deco-4 {
    position: absolute;
  }

  .deco-1 {
    top: -37%;
    left: -00%;
  }

  .deco-2 {
    top: -15%;
    right: 5%;
  }

  .deco-3 {
    top: 10%;
    left: 0%;
  }

  .deco-4 {
    top: 30%;
    right: 0%;
  }








  /* VACANCY */
  .vacancy {
    height: auto;
    padding: 0;
    margin-bottom: 50px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    overflow: hidden;
  }

  .vacancy-number {
    font-size: 20px;
    left: -2px;
    top: 57px;
  }

  .vacancy-text {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin: 0 0 0 0;
    padding: 40px 0 20px;
  }

  .vacancy-name {
    flex-direction: row;
  }
  
  .vacancy-text p {
    width: 100%;
    max-width: 1000px;
    margin: 0 0 16px 0;
  }

  .vacancy-text p:last-child {
    margin-bottom: 0;
  }

  .vacancy-photo {
    position: static;
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }

  .vacancy-photo img {
    max-width: 200%;
    height: auto;
    object-fit: cover;
  }

  .vacancy-title {
    font-size: 34px;
    margin-left: 30px;
    width: 100%;
    padding-right: 40px;
  }

  .vacancy-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
  }


  .vacancy-button {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .vacancy-btn {
    width: 100%;
    max-width: 600px;
    text-align: center;
    padding: 0px;
    font-size: 16px;
  }

  .vacancy-photo {
    position: static;
    width: 100%;
    height: auto;
  }
  .vacancy-photo img {
    width: 200%;
    height: auto;
    object-fit: cover;
  }

  /* modalka */
  .modal {
    width: 90%;
    max-width: 320px;
    height: auto;
    padding: 20px 16px;
  }

  .modal-title {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .modal-form input,
  .modal-form select,
  .phone-wrapper,
  .job-select-wrapper,
  .submit-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .modal-form .field-wrapper {
    margin: 0 0 12px;
  }

  .modal-form label {
    margin-left: 3px;
    font-size: 14px;
  }

  .modal-close {
    top: 12px;
    right: 12px;
    font-size: 28px;
  }

  .job-select-wrapper {
    width: 100%;
    margin: 0 auto 16px;
  }

  .job-select {
    width: 100%;
    box-sizing: border-box;
  }

  .job-options {
    width: 100% !important;
    max-height: 180px;
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 2000;
  }

  .job-options li {
    font-size: 14px;
    padding: 10px 12px;
  }

  .submit-btn {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px;
    font-size: 16px;
    margin: 0;
  }
  





  /* CERTIFICATES */
  .certificates .container {
    padding: 0 !important;
  }

  .certificates-title {
    padding-left: 30px;
    padding: 0 50px;
    font-size: 34px;
    margin-left: 00px;
    width: 100%;
  }

  .certificates-number {
    font-size: 20px;
    left: -2px;
    top: 15px;
    padding: 0 20px;
  }

  .certificates-grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 0 20px;
    margin-left: 20px;
  }
  .certificates-grid::-webkit-scrollbar {
    display: none;
  }
  .certificates-card {
    flex: 0 0 calc(100% - 40px);
    scroll-snap-align: start;
  }

  .certificates-grid::-webkit-scrollbar {
    display: none;
  }

  .certificates-container {
    position: relative;
  }

  .cert-slider {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    margin-top: 20px;
    gap: 50px;
  }
  
  .cert-slider button {
    width: 36px;
    height: 36px;
    background-color: rgba(22, 117, 101, 1);
    border: 1px solid rgba(255, 255, 255, 0.366);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s ease;
  }
  
  .cert-slider button img {
    display: block;
    width: 18px;
    height: 18px;
    user-select: none;
    -webkit-user-drag: none;
  }
  
  .cert-next img {
    transform: translateY(1px);
  }
  
  .cert-back img {
    transform: rotate(180deg) translateY(-1px);;
  }
  
  .cert-slider button:hover {
    background-color: rgb(17, 92, 79);
  }
  
  
  
  .cert-slider button.disabled {
    background-color: rgba(2, 45, 36, 1);
    border-color: rgba(255, 255, 255, 0.15);
    cursor: default;
    pointer-events: none;
  }
  
  .cert-slider button.disabled:hover {
    background-color: rgba(2, 45, 36, 1);
  }
  
  .cert-slider button.disabled img {
    opacity: 0.5;
  }

  
  .certificates .bg-decoration-mobile {
    display: block;
    position: absolute;
    top: -60%;
    right: -65%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 0;
  }

  .certificates .bg-decoration-mobile .bg-decoration__pattern {
    width: 100%;
    height: 100%;
    background: url('static/images/mobile_bg/MobileCertPattern.svg') no-repeat center center;
    background-size: contain;
  }



  





  /* FAQ */
  .faq {
    padding: 0;
    margin-bottom: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .faq-container {
    flex-direction: column;
    width: 100%;
    gap: 30px;
  }

  .faq-number {
    font-size: 20px;
    left: -2px;
    top: 15px;
  }

  .faq-item-clean {
    width: 100%;
    margin-left: 0px;
  }

  .faq-toggle-wrapper {
    padding: 0;
  } 
  .faq-question {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;   
    letter-spacing: 0;
    padding-right: 50px; 

  }

  .faq-left {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
  }


  .faq-title{
    font-size: 34px;
    margin-left: 30px;
    width: 100%;
    padding-right: 40px;
  }


  .faq-button {
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px; 
    margin-bottom: 10px;
  }

  .faq-right img {
    width: 100%;

    display: block;
    margin-right: 0;
  }


  /* modalka */
  .faq-modal-window {
    width: 90%;
    max-width: 320px;
    height: auto;
    padding: 20px 16px;
  }
  .faq-modal-title {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .faq-modal-form-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .faq-modal-form .faq-input,
  .faq-phone-wrapper,
  .faq-submit-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .faq-label {
    margin-left: 3px;
    font-size: 14px;

    justify-content: center;
    text-align: left;
    
  }
  .faq-modal-close {
    top: 12px;
    right: 12px;
    font-size: 28px;
  }
  .faq-country-list {
    width: 100% !important;
  }

  .faq-submit-btn {
    margin: 15px 0 0 0;
  }





  /* FOOTER */
  .footer {
    margin-top: 120px;
    padding: 0 20px;
  }

  .footer-container {
    display: flex;
    flex-direction: column;
  }

  .footer-column:nth-child(2) {
    margin: 0;
  }

  .footer-contacts {
    text-align: left;
  }

  .footer-contacts-label {
    font-size: 28px;
  }

  .footer-phone {
    font-size: 38px;
  }

  .footer-email {
    font-size: 38px;
  }

  .footer-bottom-container {
    flex-direction: column;
    gap: 20px;
  }

  .footer-policy-privacy {
    margin-left: 0px;
  }

}







/* ОПТИМИЗАЦИЯ ПЛАНШЕТОВ */
@media (min-width: 768px) and (max-width: 1194px) {
  .container {
    padding: 0 60px !important;
  }

  .bg-decoration {
    display: none;
  }

  .burger {
    display: flex;
    margin-right: 0;
    padding: 0;
    margin-left: auto;
    display: flex;
  }



  /* HEADER */
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }

  .header-container {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 60px;
    gap: 10px;
    position: relative;
    margin: 0;
    box-sizing: border-box;

  }

  .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .logo img {
    height: 30px;
    max-width: 100%;
  }

  .burger.open {
    transform: rotate(90deg);
  }

  .main-nav {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }

  .main-nav.open,
  .header-contacts.open {
    display: flex;
  }


  .header-contacts {
    display: none;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
  }

  .mobile-menu-container {
    display: none;
    width: 100%;
    background-color: rgba(23, 23, 23, 1);
    margin-top: 12px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
  }

  .mobile-menu-container.open {
    display: flex;
    max-height: 500px;
  }

  .mobile-menu-inner {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
  }

  .mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .mobile-menu-links a {
    color: white;
    font-size: 16px;
    text-decoration: none;
    font-weight: 300;
  }

  .mobile-menu-contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  .mobile-menu-contacts .phone {
    font-size: 16px;
    font-weight: 300;
  }

  .mobile-menu-contacts .callback-btn {
    margin-top: 8px;
    padding: 10px 18px;
    font-size: 14px;
  }








  /* HERO */
  .hero-cable-image {
    display: block;
    position: absolute;
    top: 25%;
    left: -60px;
    transform: translateY(-50%);
    width: auto;     
    height: 300px;
    z-index: 1;
    pointer-events: none;
    filter:
      drop-shadow(-15px 0 100px rgba(0,0,0,0.4))
      drop-shadow(15px 0 100px rgba(0,0,0,0.4));  
  }

  .hero-cable-image img {
    width: auto;
    height: 850px;
    object-fit: contain;
    user-select: none;
  }


  .hero-left-side {
    width: 100%;
  }

  .hero-text {
    margin-top: 500px;
    margin-left: 170px;
  }

  .hero-text h1 {
    font-size: 48px;
  }

  .hero-text p {
    font-size: 16px;
    opacity: 0.8;
  }

  .hero-progress {
    margin-top: 400px;
    max-width: 100%;
  }

  .progress-steps {
    justify-content: space-between;
    gap: 15px;
  }
  .progress-steps li {
    flex: 1;
    width: auto; 
  }
  .progress-steps li:not(:last-child)::after {
    left: 50%;
    width: 100%;
    z-index: -1;
  }


  .hero-map {
    position: absolute;
    bottom: 25%;
    left: 0px;
    z-index: -1;
    pointer-events: none;
  }

  .hero-map img {
    width: 95%;
    clip-path: inset(0 0 0 100px);
  }









  /* FEATURES LINE */
  .features-cont {
    padding: 0;
  }

  .features-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    position: relative;
  }

  .features-wrapper .feature-divider {
    display: none;
  }

  .features-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
  }

  .features-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
  }

  .features-wrapper .feature {
    padding: 30px 30px;
  }


  .features-line .features-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    position: relative;
    margin: 0;
    padding: 0;
  }

  .features-line .features-wrapper .feature-divider {
    display: none !important;
  }

  .features-line .features-wrapper {
    border-left: 1px solid rgba(255,255,255,0.2);
    border-right: 1px solid rgba(255,255,255,0.2);
  }









  /* PRODUCTS */
  .products {
    overflow: hidden;
  }

  .products-title {
    font-size: 44px;
  }

  .products-number {
    font-size: 18px;
    left: 0px;
    top: 130px;
    padding: 0 20px;
  }

  .products-cable-types {
    margin: 0;
  }

  .products-main {
    display: flex;
    flex-direction: row;
    margin: 0;
  }

  .products-cable-container {
    width: 100%;
  }


  .products-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .products-cable img {
    height: 50%;
    left: 200px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    will-change: transform, opacity;
  }

  .products-cable-types {
    width: 100%;
  }


  .products-info-item {
    padding: 10px 0;
  }
  
  .products-info-block p{
  }

  .products-slider {
    margin-right: 0;
  }

  .products-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
    margin-top: -90px;
  }
  
  .products-slider {
    justify-self: start;
  }

  .products-details {
    justify-self: center;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    min-width: 320px;
    margin-bottom: 50px;
  }

  .products-details button {
    white-space: nowrap;
    min-width: 120px;
  }

  .products-availability {
    white-space: nowrap;
    min-width: 100px;
  }

  .products-info-section {
    max-width: 240px;
    padding-left: 10px;
  }
  
  .products-info-title {
    font-size: 22px;
  }
  
  .products-plus {
    display: none;
  }
  

  .products-info-section {
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }




  .products-info-container .info-slider-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    z-index: 2;
  }

  .products .bg-decoration-tablet {
    display: block;
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }

  .products .bg-decoration-tablet .bg-decoration__pattern {
    background-image: url('static/images/tablet_bg/TabletProductsPattern.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
  }


  .products-info-block.info-active {
    position: relative;
    z-index: 1;
  }
  
  .products-info-block.info-active::after {
    content: "";
    position: absolute;
    top: -22px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: white;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  
  .products-info-block.info-active::after {
    opacity: 1;
  }




  



  /* LABELS */
  .cable-label p {
    font-size: 10px;
  }
  
  .cable-label--copper {
    top: 435px;
  }

  .cable-label--inner {
    top: 435px;
  }

  .cable-label--isolation {
    top: 530px;
  }

  .cable-label--outer {
    top: 530px;
  }

  .cable-label--screen {
    top: 530px;
  }

  .cable-label--sluda {
    top: 520px;
    left: 370px;
  }
  
  .cable-label--sluda .line{
    height: 70px;
  }


  /* ВВГнг(A)-LS */
  .products-cable--vvgn .cable-label--copper {
    left: 360px;
  }

  .products-cable--vvgn .cable-label--isolation {
    left: 265px;
  }

  .products-cable--vvgn .cable-label--outer {
    left: 65px;
  }

  .products-cable--vvgn .cable-label--inner {
    left: 135px;
  }


  /* ВВГнг(A)-FRLS */
  .products-cable--vvgn_frls .cable-label--copper {
    top: 435px;
    left: 375px;
  }

  .products-cable--vvgn_frls .cable-label--isolation {
    left: 235px;
  }

  .products-cable--vvgn_frls .cable-label--outer {
    left: 50px;
  }


  .products-cable--vvgn_frls .cable-label--inner {
    left: 140px;
  }


  /* ВВГЭнг(A)-FRLS */
  .products-cable--vvgen_frls .cable-label--screen {
    top: 530px;
    left: 185px;
  }

  .products-cable--vvgen_frls .cable-label--copper {
    left: 385px;
  }

  .products-cable--vvgen_frls .cable-label--inner {
    left: 175px;
  }

  .products-cable--vvgen_frls .cable-label--outer {
    left: 50px;
  }

  .products-cable--vvgen_frls .cable-label--isolation {
    left: 265px;
  }

  .products-cable--vvgen_frls .cable-label--sluda {
    top: 520px;
    left: 370px;
  }



  /* ВВГ-Пнг(A) */
  .products-cable--vvg_png .cable-label--copper {
    top: 430px;
    left: 355px;
  }

  .products-cable--vvg_png .cable-label--isolation {
    top: 530px;
    left: 225px;
  }

  .products-cable--vvg_png .cable-label--outer {
    top: 530px;
    left: 50px;
  }


  /* ВБШвнг(A)-LS */

  .products-cable--vbshng_ls .cable-label--screen {
    top: 530px;
    left: 185px;
  }

  .products-cable--vbshng_ls .cable-label--copper {
    left: 385px;
  }

  .products-cable--vbshng_ls .cable-label--inner {
    left: 175px;
  }

  .products-cable--vbshng_ls .cable-label--outer {
    left: 50px;
  }

  .products-cable--vbshng_ls .cable-label--isolation {
    left: 255px;
  }




  /* ВБШвнг(A)-FRLS */

  .products-cable--vbshng_frls .cable-label--screen {
    top: 530px;
    left: 185px;
  }

  .products-cable--vbshng_frls .cable-label--copper {
    left: 385px;
  }

  .products-cable--vbshng_frls .cable-label--inner {
    left: 175px;
  }

  .products-cable--vbshng_frls .cable-label--outer {
    left: 50px;
  }

  .products-cable--vbshng_frls .cable-label--isolation {
    left: 255px;
  }

  .products-cable--vbshng_frls .cable-label--sluda {
    top: 520px;
    left: 370px;
  }



  /* КВВГЭнг(А)-LS */


  .products-cable--kvvgen_ls .cable-label--screen {
    top: 530px;
    left: 215px;
  }

  .products-cable--kvvgen_ls .cable-label--copper {
    top: 430px;
    left: 360px;
  }

  .products-cable--kvvgen_ls .cable-label--inner {
    top: 430px;
    left: 210px;
  }

  .products-cable--kvvgen_ls .cable-label--outer {
    top: 530px;
    left: 50px;
  }

  .products-cable--kvvgen_ls .cable-label--isolation {
    top: 530px;
    left: 285px;
  }



  /* КВВГЭнг(А)-FRLS */
  .products-cable--kvvgen_frls .cable-label--screen {
    top: 530px;
    left: 215px;
  }

  .products-cable--kvvgen_frls .cable-label--copper {
    top: 430px;
    left: 360px;
  }

  .products-cable--kvvgen_frls .cable-label--inner {
    top: 430px;
    left: 215px;
  }

  .products-cable--kvvgen_frls .cable-label--outer {
    top: 530px;
    left: 50px;
  }

  .products-cable--kvvgen_frls .cable-label--isolation {
    top: 530px;
    left: 285px;
  }
  .products-cable--kvvgen_frls .cable-label--sluda {
    top: 520px;
    left: 370px;
  }


  /* ПуВ */

  .products-cable--puv_hb .cable-label--copper {
    top: 430px;
    left: 340px;
  }

  .products-cable--puv_hb .cable-label--inner {
    top: 430px;
    left: 160px;
  }

  .products-cable--puv_hb .cable-label--copper .line {
    height: 50px;
  }






  /* REVIEWS */
  .reviews {
    position: relative;
    overflow: visible !important;
  }

  .reviews .container {
    overflow: hidden !important;
  }
  
  .reviews-header {
    margin-bottom: 40px;
  }

  .reviews-number {
    font-size: 18px;
    left: -60px;
    top: 25px;
    padding: 0 20px;
  }

  .reviews-title {
    font-size: 44px;
  }

  .reviews .bg-decoration-tablet {
    display: block !important;
    position: absolute;
    top: 40%;
    right: -170px;
    width: 768px;
    height: 768px;
    pointer-events: none;
    z-index: -2;
  }
  .reviews .bg-decoration-tablet .bg-decoration__pattern {
    width: 100%;
    height: 100%;
    background-image: url('static/images/tablet_bg/TabletReviewsPattern.svg');
    background-repeat: no-repeat;
    background-size: contain;
  }


  
  /* GUIDE */
  .guide {
    padding: 0 0 150px 0;
  }
  .guide-title {
    display: none;
  }

  .guide-title-mob {
    display:  block;
  }

  .guide-title-mob {
    font-family: "Geist", sans-serif;
    font-size: 44px;
    font-weight: 300;
    display: block !important;
    grid-column: 1 / -1;
    margin-bottom: 20px;
  }

  .guide-number {
    font-size: 18px;
    left: 0px;
    top: 68px;
    padding: 0 20px;
  }

  .guide-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 20px;
  }


  .guide-second-section,
  .guide-mini-card-section {
    display: contents !important;
  }

  .guide-card-large,
  .guide-card-mini {
    width: 100% !important;
    max-width: none !important;
  }


  .guide .bg-decoration-tablet {
    display: block;
    position: absolute;
    bottom: 1;
    right: 0%;
    width: 100%;
    pointer-events: none;
    z-index: 0;
  }

  .guide .bg-decoration-tablet .bg-decoration__pattern {
    background-image: url('static/images/tablet_bg/TabletGuidePattern.svg');
    background-repeat: no-repeat;
    background-size: contain;
  }

  .photo-frame-large {
    width: 340px;
    height: 435px;
}

.photo-frame-mini {
  width: 280px;
  height: 280px;
}


  /* VACANCY */
  .vacancy {
    overflow: hidden;
  }

  .vacancy-number {
    font-size: 18px;
    left: -60px;
    top: 125px;
    padding: 0 20px;
  }


  .vacancy-text {
    width: 100%;
  }

  .vacancy-title {
    font-size: 44px;
    max-width: 550px;
  }

  .vacancy-info {
    flex-direction: column;
    gap: 0;
  }


  .vacancy-info p {
    max-width: 370px;
    font-weight: 300;
    opacity: 0.8;
  }


  .vacancy-photo {
    position: absolute;
    width: 90%;
    right: -30%;
    overflow: hidden;
  }
  .vacancy-photo img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
  }





  /* CERTIFICATES */

  .certificates {
    overflow: hidden;
  }
  .certificates .bg-decoration-tablet {
    display: block;
    position: absolute;
    top: 60%;
    left: 60%;
    width: 500px;
    height: 500px;
    pointer-events: none;
    z-index: -1;
  }
 
  .certificates .bg-decoration-tablet .bg-decoration__pattern {
    background-image: url('static/images/tablet_bg/TabletCertPattern.svg');
    background-repeat: no-repeat;
    background-size: contain;
  }






  /* FAQ */
  .faq {
    padding: 0;
    margin-bottom: 200px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .faq-container {
    flex-direction: column;
    width: 100%;
    gap: 30px;
  }

  .faq-number {
    font-size: 18px;
    left: -60px;
    top: 25px;
    padding: 0 20px;
  }

  .faq-title{
    font-size: 44px;
    max-width: 100%;
  }

  .faq-item-clean {
    width: 100%;
    margin-left: 2’0px;
  }

  .faq-toggle-wrapper {
    padding: 0;
  } 
  .faq-question {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;   
    letter-spacing: 0;
    padding-right: 50px; 

  }

  .faq-left {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
  }



  .faq-button {
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100%;
    margin-top: 10px; 
    margin-bottom: 10px;
  }

  .faq-right img {
    width: 100%;

    display: block;
    margin-right: 0;
  }






  /* FOOTER */
  .footer {
    padding: 0 60px;
  }
  .footer-container {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
  }

  .footer-column {
    flex-direction: column-reverse;
    margin: 0 !important;
    box-sizing: border-box;
    gap: 20px;
  }

  .footer-column:nth-child(1),
  .footer-column:nth-child(2) {
    order: 1;
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
  }

  .footer-contacts-label {
    margin-top: 50px;
  }


  .footer-phone {
    font-size: 36px;
    color: white;
    text-decoration: none;
  }

  .footer-email {
    font-size: 36px;
  }

  .footer-column:nth-child(2) {
    margin-left: 0 !important;
  }
  .footer-column:nth-child(2) > div {
    display: flex;
    flex-direction: column;
  }

  .footer-column:nth-child(3) {
    flex-direction: column;
    order: 2;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    gap: 10px;
    text-align: left !important;
  }


  .footer-bottom-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }

  .footer-logo {
    order: 1;
    flex: 0 0 auto;
  }

  .footer-creator {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .footer-policy-privacy {
    order: 3;
    flex: 0 0 100%;
    margin-top: 12px;
    display: flex;
    flex-direction: column;    
    align-items: flex-start;
    gap: 6px;
    margin-left: 0; 
  }

}