
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>Услуги</title>

    <link rel="stylesheet" href="css/safari-optimizations.css?v=1.0">
    <link rel="stylesheet" href="css/styles.css?v=7.5">
    <link rel="stylesheet" href="css/components.css?v=7.3">
    <link rel="stylesheet" href="css/mobile-all.css?v=24.2">
    <style>
    @font-face {
        font-family: 'Gilroy-Bold';
        src: url('assets/fonts/Gilroy-Bold.ttf') format('truetype');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    @font-face {
        font-family: 'Gilroy-Black';
        src: url('assets/fonts/Gilroy-Black.ttf') format('truetype');
        font-weight: 1000;
        font-style: normal;
        font-display: swap;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    @font-face {
        font-family: 'Gilroy-Medium';
        src: url('assets/fonts/Gilroy-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    @font-face {
        font-family: 'Gilroy-Regular';
        src: url('assets/fonts/Gilroy-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    @font-face {
        font-family: 'Gilroy-Semibold';
        src: url('assets/fonts/Gilroy-Semibold.ttf') format('truetype');
        font-weight: 650;
        font-style: normal;
        font-display: swap;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

html {
  scroll-behavior: smooth;
}

    .text_box_yuslugi[id] {
        scroll-margin-top: 10px;
}

body {
  font-family: 'Gilroy-Regular', Arial, sans-serif;
  margin: 0;
  line-height: 1.6;
  background-color: #F0F0F0 !important;
}

h1 {
  position: relative;
  display: inline-block;
}

.rental-text h1::after,
.text-content_seif h1::after {
  display: none;
}

.main-container {
  background-color: #F0F0F0 !important;
  padding: 0 !important;
}

.welcome_yuslugi,
.text_box_yuslugi,
.services_yuslugi_obertka,
.rental-container,
.soon-budet-container {
  background-color: transparent !important;
}

.welcome_yuslugi {
  background-color: #ffffff !important;
  height: 100%;
  width: 100%;
}

 .text_box_yuslugi {
   padding: 40px 100px !important;
 }

.back-button_yuslugi {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: black;
  opacity: 50%;
  font-weight: 500;
  size: 20px;
  margin-bottom: 20px;
}

 .h1-yslygi {
   font-size: 32px;
   margin-bottom: 15px;
   font-family: 'Gilroy-Bold';
 }

.links_yuslugi {
  display: flex;
  flex-wrap: wrap;
margin-top: px;
}

.links_yuslugi a {
  text-decoration: none;
  color: black;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  font-family: 'Gilroy-Regular';
}

.links_yuslugi a svg {
  margin: 0 20px;
  width: 12px;
  height: 12px;
}

.tabs-container {
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 5px;
  background: white;
  z-index: 10;
  transition: all 0.3s ease;
}

.tabs-container.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
}

.tabs_yuslugi {
  display: inline-flex;
  gap: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

.tabs_yuslugi button {
  border-color: #000;
  border-width: 1px;
  background: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-family: 'Gilroy-Regular';
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}

.tabs_yuslugi button.active {
  background: #4CAC26;
  color: white;
  
}

.tabs_yuslugi button:hover {
  background-color: #000;
  color: #fff;
}

.header_yuslugi {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 50px;
  margin-bottom: 20px;
}


#safe-protection {
  margin-bottom: 30px !important;
}

#equipment-rental {
  margin-top: 30px !important;
}


.text_box_yuslugi:has(.soon-budet-container) {
  margin-top: 50px 
}


 .header_yuslugi .title {
   font-size: 32px;
   font-family: 'Gilroy-Bold';
   font-weight: bold;
   color: #333;
 }

.header_yuslugi .tag {
  background-color: #4CAC26;
  color: white;
  padding: 4px 20px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 18px;
  font-family: 'Gilroy-Regular';
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
}

.header_yuslugi .tag:hover {
  background-color: #28a55b;
  transform: scale(1.1);
}

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

.service_yuslugi {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.service_yuslugi:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.service_yuslugi img {
  width: 100%;
  height: 350px;
  display: block;
  object-fit: cover;
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.service_yuslugi:hover img {
  transform: scale(1.05);
}

.service_yuslugi .text {
  position: absolute;
  bottom: 10%;
  left: 5%;
  color: white;
  font-size: 24px;
  font-weight: 600;
  font-family: 'Gilroy-Medium';
}

.obertka {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('../assets/images/Group 1822 (2).png');
  border-radius: 50px;
  padding: 50px 20px;
  margin-bottom: 50px;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;

  margin: 0 auto;
  justify-content: center;
}

.package-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background-color: #000;
  transition: transform 0.3s, box-shadow 0.3s;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 280px;
}

.package-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.package-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.package-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20px;
  color: white;
}

.package-card .card-title {
  font-size: 16px;
  font-weight: 500;
}

.package-card .card-price {
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 50px;
}

.package-card .top-label {
  position: absolute;
  top: 10px;
  left: 5px;
  display: flex;
  align-items: center;
  color: white;
  font-size: 12px;
  font-weight: 500;
  padding: 15px 5px;
  white-space: nowrap;
}

.package-card .top-label img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 20px;
}

.cta-section {
  text-align: left;
  color: white;
}

.cta-section h3 {
  font-family: 'Gilroy-Medium';
  font-size: 48px;
  font-weight: 300;
  line-height: 45px;
  margin-bottom: 30px;
}

.cta-section button {
  background-color: #ffffff;
  color: black;
  border: none;
  border-radius: 30px;
  padding: 15px 50px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-family: 'Gilroy-Medium';
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.02em;
}

.cta-section button:hover {
  background-color: #3a9920;
}

.hikvision-text {
  font-family: 'Gilroy-Medium';
  font-size: 16px;
  font-weight: 400;
  color: white;
  text-align: left;
  margin-bottom: 20px;
}

.hikvision-text .hikvision-line {
  display: block;
  margin-bottom: 5px;
}

 .container_seif {
   height: 500px;
   background: url('../assets/images/Group 1897.svg') no-repeat center center;
   background-size: cover;
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   padding: 0;
   position: relative;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a:hover .container_seif {
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   box-shadow: 0 15px 40px rgba(76, 172, 38, 0.3);
   overflow: hidden;
   margin: 0 0 20px 0;
}

.container_seif > * {
  position: relative;
}

 .text-content_seif {
   padding: 60px 50px;
   color: white;
   text-align: left;
   z-index: 2;
   position: relative;
   border-radius: 20px;
   margin: 20px 0;
 }

.text-content_seif h1 {
  font-size: 48px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #fff;
  line-height: 1.2;
}

.text-content_seif .main-text {
  font-size: 18px;
  color: #fff;
  margin-bottom: 40px;
  max-width: 100%;
  line-height: 1.6;
}

.text-content_seif .sub-text {
  font-size: 14px;
  color: #fff;
  margin-top: 10px;
  max-width: 100%;
  line-height: 1.5;
}

.btn {
  display: inline-block;
  background: #ffffff;
  color: #333333;
  padding: 15px 30px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.4s ease;
  margin-bottom: 30px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-transform: none;
  letter-spacing: 0.5px;
}

.btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
  background: #f8f9fa;
  color: #333333;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

@media (max-width: 768px) {
   .container_seif {
       height: auto;
       min-height: 400px;
       flex-direction: column;
       padding: 0;
       margin: 0 0 20px 0;
       background: url('../assets/images/Group 1897.svg') no-repeat right center;
       background-size: cover;
   }

  .text-content_seif {
      text-align: left;
      padding: 50px 40px;
      border-radius: 25px;
      margin: 30px 20px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  }

  .text-content_seif h1 {
      font-size: 32px;
      margin-bottom: 15px;
      line-height: 1.2;
  }

  .text-content_seif .main-text {
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 25px;
  }

  .text-content_seif .sub-text {
      font-size: 14px;
      opacity: 0.8;
  }

  .btn {
      padding: 16px 30px;
      font-size: 14px;
      margin-bottom: 20px;
      border-radius: 30px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
}

@media (max-width: 480px) {
   .container_seif {
       height: auto;
       min-height: 350px;
       flex-direction: column;
       padding: 0;
       margin: 0 0 20px 0;
       background: url('../assets/images/Group 1897.svg') no-repeat right center;
       background-size: cover;
   }

  .text-content_seif {
      padding: 40px 25px;
      border-radius: 25px;
      margin: 25px 15px;
      box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
  }

  .text-content_seif h1 {
      font-size: 24px;
      margin-bottom: 12px;
      line-height: 1.3;
  }

  .text-content_seif .main-text {
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 20px;
  }

  .text-content_seif .sub-text {
      font-size: 12px;
      opacity: 0.9;
  }

  .btn {
      padding: 14px 25px;
      font-size: 13px;
      margin-bottom: 15px;
      border-radius: 25px;
      box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
  }
}

.rental-container {
  height: 600px;
  margin: 20px auto;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(76, 175, 80, 0.1);
  margin-bottom: 100px;
}

.rental-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  position: relative;
  overflow: hidden;
}

.rental-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 2.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.rental-image:hover img {
  transform: scale(1.05);
}

 .rental-content {
   flex: 2;
   padding: 20px 40px 20px 30px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .rental-text h1 {
   font-size: 60px;
   font-family: 'Gilroy-Bold';
   margin: 0;
   line-height: 1.2;
   margin-top: 40px;
   margin-bottom: 20px;
 }

 .rental-text p {
   opacity: 50%;
   font-size: 16px;
   line-height: 1.6;
   margin-bottom: 30px;
 }

.rental-details {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.rental-details ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.rental-details ul li {
  opacity: 50%;
  font-size: 16px;
  margin-bottom: 0;
}

.rental-button {
  background-color: #000;
  color: #fff;
  padding: 15px 80px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 20px;
}

.rental-tags {
  display: flex;
  gap: 10px;
}

.rental-tags a {
  background-color: #fff;
  color: #000;
  padding: 15px 20px;
  border: 1px solid #000;
  border-radius: 25px;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.rental-image .rental-tags {
  display: none;
}

.soon-budet-container {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  
  margin: 20px 0;
  flex-wrap: wrap;
  background-color: transparent !important;
  max-width: 100%;
}

.text_box_yuslugi:last-of-type {
  margin-bottom: 20px !important;
}

.header_yuslugi {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 30px !important;
  margin-bottom: 20px;
}

.header_yuslugi .title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #2c3e50 !important;
  text-align: left !important;
  margin: 0 !important;
  position: relative !important;
  display: inline-block !important;
}

.header_yuslugi .title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  border-radius: 2px;
}

.header_yuslugi .tag {
  background: #4CAF50;
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.soon-budet-item {
  background: transparent !important;
  border-radius: 25px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  text-align: center;
  width: calc(50% - 8px);
  max-width: 900px;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
  margin-bottom: 20px;
  height: 380px !important;
  min-height: 380px !important;
  border: 2px solid rgba(76, 175, 80, 0.1);
  flex: 1;
}

.soon-budet-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}

.soon-budet-item:nth-child(1)::before {
  background-image: url('../assets/images/Frame 902.png') !important;
}

.soon-budet-item:nth-child(2)::before {
  background-image: url('../assets/images/soon_2.png') !important;
}

.soon-budet-item:hover::before {
  transform: scale(1.05);
}

.soon-budet-item:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  border-color: rgba(76, 175, 80, 0.3);
}

.soon-budet-item img {
  display: none;
}

.soon-budet-item:nth-child(1) {
  background-image: url('../assets/images/Frame 902.png') !important;
}

.soon-budet-item:nth-child(1) p {
  color: #ffffff !important;
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  z-index: 2;
  text-align: left;
}

.soon-budet-item:nth-child(2) {
  background-image: url('../assets/images/soon_2.png') !important;
}

.soon-budet-label {
  position: relative;
  z-index: 2;
}

.soon-budet-label {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: #fff;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 12px;
  border-radius: 20px;
  display: inline-block;
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 3;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.5);
}

.soon-budet-label:hover {
  transform: scale(1.1);
  background-color: #45a049;
}

.soon-budet-label.secondary {
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 100px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.soon-budet-label.secondary:hover {
  transform: scale(1.1);
  background-color: #f0f0f0;
}

.soon-budet-item p {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  color: #ffffff !important;
  z-index: 2;
  text-align: left;
  line-height: 1.3;
}

.soon-budet-item:first-child p {
  color: #333;
}

.soon-budet-item:last-child p {
  color: #ffffff;
}

@media (min-width: 1200px) and (max-width: 1599px) {
 .text_box_yuslugi {
   padding: 0px 100px !important;
 }

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

  .rental-container {
      height: 600px;
  }

  .container_seif {
      height: 500px;
  }

  .service_yuslugi img {
      height: 320px;
  }

  h1 {
      font-size: 32px;
  }

  .header_yuslugi .title {
      font-size: 24px !important;
  }

  .text-content_seif h1 {
      font-size: 46px;
  }

  .text-content_seif .main-text {
      font-size: 18px;
  }

  .text-content_seif .sub-text {
      font-size: 15px;
  }

  .btn {
      font-size: 16px;
      padding: 16px 32px;
  }

  .service_yuslugi .text {
      font-size: 24px;
  }

  .rental-text h1 {
      font-size: 60px;
  }

  .rental-text p {
      font-size: 16px;
  }

  .rental-button {
      font-size: 16px;
      padding: 14px 70px;
  }

  .rental-details ul li {
      font-size: 16px;
  }

  .soon-budet-container {
      
      gap: 15px;
      margin: 20px 0;
  }

  .soon-budet-item {
      height: 360px !important;
      min-height: 360px !important;
      width: calc(50% - 8px);
      max-width: 800px;
  }

  .soon-budet-item p {
      font-size: 20px;
      bottom: 25px;
      left: 25px;
      right: 25px;
      text-align: left;
  }
}

@media (min-width: 1600px) {
 .text_box_yuslugi {
   padding: 0px 100px !important;
 }

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

  .rental-container {
      height: 750px;
  }

  .container_seif {
      height: 650px;
  }

  .service_yuslugi img {
      height: 450px;
  }

  h1 {
      font-size: 48px;
  }

  .header_yuslugi .title {
      font-size: 32px !important;
  }

  .soon-budet-container {
      
      gap: 15px;
      margin: 20px 0;
  }

  .soon-budet-item {
      height: 400px !important;
      min-height: 400px !important;
      width: calc(50% - 8px);
      max-width: 950px;
  }

  .soon-budet-item p {
      font-size: 24px;
      bottom: 35px;
      left: 35px;
      right: 35px;
      text-align: left;
  }

  .text-content_seif h1 {
      font-size: 64px;
  }

  .text-content_seif .main-text {
      font-size: 24px;
  }

  .text-content_seif .sub-text {
      font-size: 20px;
  }

  .btn {
      font-size: 20px;
      padding: 22px 45px;
  }

  .service_yuslugi .text {
      font-size: 32px;
  }

  .rental-text h1 {
      font-size: 80px;
  }

  .rental-text p {
      font-size: 22px;
  }

  .rental-button {
      font-size: 20px;
      padding: 20px 100px;
  }

  .rental-details ul li {
      font-size: 20px;
  }

  .soon-budet-item {
      height: 380px !important;
      min-height: 380px !important;
  }

  .header_yuslugi .title {
      text-align: left !important;
  }

  .soon-budet-item p {
      font-size: 26px;
      padding: 15px 20px;
  }
}

@media (max-width: 1200px) and (min-width: 1025px) {
  .text_box_yuslugi {
      padding: 0px 80px !important;
  }

  .header_yuslugi .title {
      font-size: 24px !important;
  }

  .soon-budet-container {
      
      gap: 15px;
      margin: 20px 0;
  }

  .soon-budet-item {
      width: calc(50% - 8px);
      max-width: 750px;
      height: 340px !important;
      min-height: 340px !important;
  }

  .soon-budet-item p {
      font-size: 20px;
      bottom: 25px;
      left: 25px;
      right: 25px;
      text-align: left;
  }

  h1 {
      font-size: 32px;
  }

  .header_yuslugi .title {
      font-size: 28px;
  }
}

@media (max-width: 1024px) {
  .text_box_yuslugi {
      padding: 0px 50px !important;
  }

  .header_yuslugi .title {
      font-size: 22px !important;
  }

  .soon-budet-container {
      
      flex-direction: column;
      align-items: center;
      gap: 20px;
      margin: 20px 0;
  }

  .soon-budet-item {
      width: 100%;
      max-width: 650px;
      height: 320px !important;
      min-height: 320px !important;
  }

  .soon-budet-item p {
      font-size: 18px;
      bottom: 20px;
      left: 20px;
      right: 20px;
      text-align: left;
  }

  .container_seif {
      margin: 20px 0;
  }

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

  .rental-container {
      height: auto;
      padding: 30px;
  }

  h1 {
      font-size: 28px;
  }

  .header_yuslugi .title {
      font-size: 24px;
  }

  .rental-text h1 {
      font-size: 28px;
  }
}

@media (max-width: 900px) and (min-width: 769px) {
  .text_box_yuslugi {
      padding: 0px 40px !important;
  }

  .container_seif {
      margin: 20px 0;
  }

  h1 {
      font-size: 26px;
  }

  .header_yuslugi .title {
      font-size: 22px;
  }
}

@media (max-width: 768px) {
  .text_box_yuslugi {
      padding: 40px 30px !important;
  }

  h1 {
      font-size: 24px;
      margin-bottom: 20px;
  }

  .links_yuslugi {
  
      justify-content: center;
  }

  .links_yuslugi a {
      font-size: 16px;
  }

  .tabs-container {
      margin-bottom: 30px;
  }

  .tabs_yuslugi {
      gap: 10px;
      margin-bottom: 20px;
      justify-content: center;
  }

  .tabs_yuslugi button {
      padding: 12px 16px;
      font-size: 14px;
      white-space: nowrap;
  }

  .header_yuslugi {
      margin-top: 30px !important;
      margin-bottom: 30px;
  }

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

  .header_yuslugi .tag {
      padding: 6px 20px;
      font-weight: 600;
      font-size: 14px;
  }

  .services_yuslugi_obertka {
      grid-template-columns: 1fr;
      gap: 20px;
      margin-bottom: 50px;
  }

  .service_yuslugi {
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
  }

  .service_yuslugi:hover {
      transform: translateY(-5px);
  }

  .service_yuslugi img {
      width: 100%;
      height: 200px !important;
      object-fit: cover;
  }

  .service_yuslugi .text {
      font-size: 16px;
      padding: 15px;
      text-align: center;
      font-weight: 500;
  }

  .rental-container {
      flex-direction: column;
      height: auto;
      padding: 30px 25px 20px 25px;
      border-radius: 25px;
      margin: 20px 15px;
      box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
  }

   .rental-image {
       height: 200px;
       margin-bottom: 20px;
       border-radius: 15px;
       overflow: hidden;
   }

  .rental-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .rental-content {
      text-align: center;
  }

  .rental-text h1 {
      font-size: 28px;
      margin-bottom: 20px;
      line-height: 1.3;
  }

  .rental-text p {
      font-size: 16px;
      margin-bottom: 20px;
      line-height: 1.6;
  }

  .rental-button {
      padding: 15px 40px;
      font-size: 16px;
      border-radius: 30px;
  }

  .soon-budet-container {
      flex-direction: column;
      gap: 30px;
      padding: 30px 20px;
  }

  .soon-budet-item {
      text-align: center;
  }

  .soon-budet-item img {
      width: 100%;
      height: 200px !important;
      object-fit: cover;
      border-radius: 15px;
  }

  .soon-budet-item p {
      font-size: 18px;
      padding: 8px 12px;
      margin-top: 15px;
      font-weight: 500;
  }

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

  .package-card {
      max-width: 100%;
  }

  .content-wrapper {
      width: 100%;
      align-items: center;
  }

  .cta-section {
      text-align: center;
  }

  .cta-section h3 {
      font-size: 32px;
  }

  .hikvision-text {
      font-size: 16px;
      text-align: center;
  }

  .rental-container {
      flex-direction: column;
      margin: 15px 10px;
      padding: 25px 20px 15px 20px;
      justify-content: center;
  }

  .rental-image {
      height: 180px !important;
      margin-bottom: 15px;
      overflow: hidden;
  }

  .rental-image img {
      height: 200%;
      object-position: center top;
  }

  .rental-content {
      padding: 10px;
  }

  .rental-text h1 {
      font-size: 32px;
      margin-top: 30px;
      margin-bottom: 10px;
      text-align: center;
  }

  .rental-text p {
      margin-bottom: 30px;
      text-align: center;
  }

  .rental-details {
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
  }

  .rental-button {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 30px;
  }

  .rental-image .rental-tags {
      display: flex;
      position: absolute;
      top: 20px;
      right: 20px;
      margin-top: 0;
  }

  .rental-tags a {
      background-color: transparent;
      color: #fff;
      border: 1px solid #fff;
      padding: 10px 15px;
      font-size: 12px;
  }

  .soon-budet-item:nth-child(1) {
      order: 2;
  }
  .soon-budet-item:nth-child(2) {
      order: 1;
  }
  .soon-budet-item {
      width: 100%;
      margin-bottom: 20px;
      border-radius: 20px;
  }
  .soon-budet-label {
      top: 20px;
      left: 15px;
      font-size: 12px;
      padding: 5px 15px;
  }
  .soon-budet-item p {
      bottom: 20px;
      left: 15px;
      right: 15px;
      font-size: 18px;
      padding: 8px 12px;
  }
}

@media (max-width: 768px) {
  .text_box_yuslugi {
      padding: 0px 20px !important;
  }

  .header_yuslugi {
      flex-direction: row;
      align-items: center;
      gap: 10px;
      justify-content: center;
      margin-top: 30px !important;
  }

  .header_yuslugi .title {
      text-align: center !important;
      font-size: 20px !important;
  }

  .header_yuslugi .title::after {
      left: 50% !important;
      transform: translateX(-50%) !important;
  }

  .soon-budet-container {
      padding: 20px 20px;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      margin: 20px 0;
  }

  .soon-budet-item {
      width: 100%;
      max-width: 550px;
      height: 280px !important;
      min-height: 280px !important;
  }

  .soon-budet-item p {
      font-size: 16px;
      bottom: 15px;
      left: 15px;
      right: 15px;
      text-align: left;
  }
}

@media (max-width: 480px) {
  .text_box_yuslugi {
      padding: 0px 20px !important;
  }

  h1 {
      font-size: 20px;
  }

  .tabs_yuslugi button {
      padding: 10px 12px;
      font-size: 12px;
  }

  .header_yuslugi {
      flex-direction: row;
      align-items: center;
      gap: 8px;
      justify-content: center;
      margin-top: 30px !important;
  }

  .header_yuslugi .title {
      font-size: 18px;
  }

  .header_yuslugi .tag {
      padding: 4px 15px;
      font-size: 12px;
  }

  .soon-budet-item {
      max-width: 480px;
      height: 250px !important;
      min-height: 250px !important;
  }

  .soon-budet-item p {
      font-size: 14px;
      bottom: 12px;
      left: 12px;
      right: 12px;
      text-align: left;
  }

  .service_yuslugi .text {
      font-size: 14px;
      padding: 12px;
  }

  .rental-text h1 {
      font-size: 24px;
  }

  .rental-text p {
      font-size: 14px;
  }

  .rental-button {
      padding: 12px 30px;
      font-size: 14px;
  }

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

  .soon-budet-label {
      top: 15px;
      left: 10px;
      font-size: 10px;
      padding: 3px 8px;
  }

  .soon-budet-item p {
      bottom: 15px;
      left: 10px;
      font-size: 18px;
  }
}

.tabs_yuslugi button.active {
  background-color: #000000;
  color: white;
  font-weight: bold;
}


@media (max-width: 480px) {
  .pcn-header-inner {
    padding: 10px 15px;
  }

  .pcn-logo {
    height: 35px;
  }

  .pcn-phone {
    font-size: 12px;
  }

  .pcn-mobile-dropdown-header {
    padding: 12px 15px;
  }

  .pcn-mobile-link {
    padding: 12px 15px;
  }
}


  .pcn-header {
    padding: 20px 100px 15px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    font-family: 'Gilroy-Regular', Arial, sans-serif;
  }

  .pcn-header-inner {
    display: flex;
    gap: 80px;
}

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

.pcn-logo {
    height: 70px;
  }

  .pcn-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
  }

.pcn-header-top,
.pcn-header-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .pcn-nav {
    display: flex;
    gap: 40px;
    font-size: 16px;
    align-items: center;
}

.pcn-link {
    text-decoration: none;
    color: #000;
    transition: color 0.2s ease;
    font-family: 'Gilroy-Regular', Arial, sans-serif;
}

.pcn-link:hover {
    color: #4CAC26;
}

.pcn-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #000;
    text-decoration: none;
    transition: color 0.2s ease;
    font-family: 'Gilroy-Regular', Arial, sans-serif;
}

.pcn-dropdown:hover {
    color: #4CAC26;
}

.pcn-dropdown svg {
    width: 16px;
    height: 16px;
    stroke: #000;
    stroke-width: 2;
    fill: none;
    transition: transform 0.3s ease;
}

.pcn-dropdown.active svg {
    transform: rotate(180deg);
}

.pcn-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 10px 0;
    display: none;
    min-width: 300px;
    z-index: 10;
  }

.pcn-dropdown:hover .pcn-dropdown-menu {
    display: block;
  }

.pcn-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: #000;
    text-decoration: none;
    font-size: 15px;
    transition: background 0.2s ease;
    font-family: 'Gilroy-Regular', Arial, sans-serif;
}

.pcn-dropdown-menu a:hover {
    background-color: #f5f5f5;
}

  .pcn-header-right {
    display: flex;
    align-items: center;
    gap: 25px;
  }

  .pcn-phone {
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-family: 'Gilroy-Regular', Arial, sans-serif;
  }

  .pcn-phone svg {
    width: 16px;
    height: 16px;
    stroke: #000;
    stroke-width: 2;
    fill: none;
  }

.pcn-lang {
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Gilroy-Regular', Arial, sans-serif;
}

.pcn-lang svg {
    width: 16px;
    height: 16px;
    stroke: #000;
    stroke-width: 2;
    fill: none;
}

.pcn-search-wrapper {
    position: relative;
    max-width: 590px;
    width: 100%;
}

.pcn-search-input {
    width: 100%;
    padding: 12px 0px 12px 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
    background: #f9f9f9;
    font-family: 'Gilroy-Regular', Arial, sans-serif;
}

.pcn-search-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.pcn-search-icon svg {
    width: 18px;
    height: 18px;
    stroke: #999;
    stroke-width: 2;
    fill: none;
}

.pcn-icons {
    display: flex;
    gap: 35px;
    align-items: center;
}

.pcn-icon-item {
    position: relative;
    font-size: 14px;
    color: #444;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: 'Gilroy-Regular', Arial, sans-serif;
}

.pcn-icon-item:hover {
    color: #4CAC26;
}

.pcn-icon-item img {
    height: 38px;
    margin-bottom: 4px;
}

.pcn-mobile-header {
    display: none;
    padding: 15px 20px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.pcn-mobile-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pcn-mobile-logo .pcn-logo {
    height: 50px;
}

.pcn-mobile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

.pcn-mobile-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px;
    border-radius: 12px;
    transition: all 0.3s ease;
  }

.pcn-mobile-menu-btn:hover {
    background: #f8f9fa;
    transform: scale(1.05);
}

.pcn-mobile-menu-btn svg {
    width: 32px;
    height: 32px;
    stroke: #333;
    stroke-width: 2;
    fill: none;
    transition: all 0.3s ease;
  }

.pcn-mobile-menu-btn:hover svg {
    stroke: #4CAC26;
}

.pcn-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
  }

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

.pcn-mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
    color: #333;
    border-bottom: 1px solid #eee;
  }

.pcn-mobile-menu-logo {
    position: relative;
    z-index: 1;
}

.pcn-mobile-menu-logo .pcn-logo {
    height: 40px;
  }

.pcn-mobile-menu-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    padding: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
  }

.pcn-mobile-menu-close:hover {
    background: #e9ecef;
    color: #333;
}

.pcn-mobile-menu-close svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2.5;
}

.pcn-mobile-nav {
    padding: 15px 20px;
  }

  .pcn-mobile-dropdown {
    margin-bottom: 8px;
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pcn-mobile-dropdown:hover {
    border-color: #ddd;
  }

  .pcn-mobile-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    background: white;
    transition: all 0.3s ease;
    border: none;
    width: 100%;
    text-align: left;
    font-family: 'Gilroy-Medium', Arial, sans-serif;
}

.pcn-mobile-dropdown-header:hover {
    background: #f8f9fa;
}

.pcn-mobile-dropdown-header-left {
    display: flex;
    align-items: center;
}

.pcn-mobile-dropdown-icon {
    width: 40px;
    height: 40px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.pcn-mobile-dropdown-icon svg {
    width: 20px;
    height: 20px;
    stroke: #666;
    stroke-width: 2;
}

.pcn-mobile-dropdown-arrow {
    width: 24px;
    height: 24px;
    color: #dc3545;
    transition: all 0.3s ease;
}

.pcn-mobile-dropdown.active .pcn-mobile-dropdown-arrow {
    transform: rotate(180deg);
    color: #4CAC26;
  }

  .pcn-mobile-dropdown-content {
    display: none;
    background: #f8f9fa;
    border-top: 1px solid #eee;
  }

  .pcn-mobile-dropdown.active .pcn-mobile-dropdown-content {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
  }

  .pcn-mobile-dropdown-content a {
    display: block;
    padding: 14px 20px;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    font-family: 'Gilroy-Regular', Arial, sans-serif;
    transition: all 0.3s ease;
}

.pcn-mobile-dropdown-content a:hover {
    background: #e9ecef;
    color: #4CAC26;
  }

  .pcn-mobile-dropdown-content a:last-child {
    border-bottom: none;
  }

  .pcn-mobile-link {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 8px;
    font-family: 'Gilroy-Medium', Arial, sans-serif;
    transition: all 0.3s ease;
}

.pcn-mobile-link:hover {
    background: #f8f9fa;
    border-color: #ddd;
  }

  .pcn-mobile-link-icon {
    width: 40px;
    height: 40px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.pcn-mobile-link-icon svg {
    width: 20px;
    height: 20px;
    stroke: #666;
    stroke-width: 2;
  }

.pcn-mobile-quick-icons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px 20px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.pcn-mobile-quick-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    padding: 10px;
    font-family: 'Gilroy-Medium', Arial, sans-serif;
}

.pcn-mobile-quick-icon img {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
}

.pcn-mobile-address {
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-top: 1px solid #eee;
}

.pcn-mobile-address h4 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 15px 0;
    text-align: center;
    font-family: 'Gilroy-Semibold', Arial, sans-serif;
}

.pcn-mobile-address-content {
    display: flex;
    align-items: flex-start;
    background: white;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid #e9ecef;
  }

.pcn-mobile-address-icon {
    width: 44px;
    height: 44px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.pcn-mobile-address-icon svg {
    width: 22px;
    height: 22px;
    stroke: #4CAC26;
    stroke-width: 2;
  }

.pcn-mobile-address-text {
    flex: 1;
}

.pcn-mobile-address-main {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    font-family: 'Gilroy-Semibold', Arial, sans-serif;
}

.pcn-mobile-address-sub {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    margin-bottom: 4px;
    font-family: 'Gilroy-Medium', Arial, sans-serif;
  }

.pcn-mobile-address-time {
    font-size: 13px;
    color: #4CAC26;
    font-weight: 600;
    font-family: 'Gilroy-Semibold', Arial, sans-serif;
}

.pcn-mobile-social {
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-top: 1px solid #eee;
}

.pcn-mobile-social h4 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px 0;
    text-align: center;
    font-family: 'Gilroy-Semibold', Arial, sans-serif;
}

.pcn-mobile-social-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pcn-mobile-social-link {
    display: flex;
    align-items: center;
    padding: 14px 12px;
    background: white;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid #e9ecef;
    font-family: 'Gilroy-Semibold', Arial, sans-serif;
  }

.pcn-mobile-social-link svg {
    width: 28px;
    height: 28px;
    margin-right: 12px;
}

@media (max-width: 1600px) {
    .pcn-header {
        padding: 20px 80px 15px;
    }
}

@media (max-width: 1450px) {
    .pcn-header {
        padding: 20px 60px 15px;
    }
    .pcn-header-inner {
        gap: 40px;
    }
    .pcn-nav {
        gap: 30px;
        font-size: 15px;
    }
    .pcn-header-right {
        gap: 20px;
    }
    .pcn-phone {
        font-size: 16px;
    }
    .pcn-icons {
        gap: 25px;
    }
    .pcn-icon-item {
        font-size: 13px;
    }
    .pcn-icon-item img {
        height: 32px;
    }
    .pcn-search-wrapper {
        max-width: 420px;
    }
}

@media (max-width: 1300px) {
    .pcn-header {
        padding: 20px 40px 15px;
    }
    .pcn-header-inner {
        gap: 40px;
    }
    .pcn-nav {
        gap: 24px;
        font-size: 14px;
    }
    .pcn-phone {
        font-size: 15px;
    }
    .pcn-icon-item img {
        height: 30px;
    }
    .pcn-search-wrapper {
        max-width: 420px;
    }
}

@media (max-width: 1200px) {
    .pcn-header {
        padding: 20px 40px 15px;
    }
    .pcn-header-inner {
        flex-wrap: wrap;
        gap: 30px;
    }
    .pcn-nav {
        gap: 20px;
        flex-wrap: wrap;
        font-size: 14px;
    }
    .pcn-search-wrapper {
        max-width: 420px;
    }
}

@media (max-width: 1100px) {
    .pcn-header-inner {
        flex-wrap: wrap;
        gap: 30px;
    }
    .pcn-nav {
        flex-wrap: wrap;
        gap: 20px;
        font-size: 14px;
    }
    .pcn-header-right {
        flex-wrap: wrap;
    }
    .pcn-icons {
        gap: 20px;
    }
    .pcn-header {
        padding: 20px 30px;
  }
}

@media (max-width: 768px) {
    .pcn-header {
        display: none !important;
    }
    
    .pcn-mobile-header {
        display: block;
    }
}

@media (max-width: 480px) {
    .pcn-mobile-header {
        padding: 12px 15px;
    }
    
    .pcn-mobile-logo .pcn-logo {
        height: 45px;
    }
    
    .pcn-mobile-menu-btn {
        padding: 10px;
    }
    
    .pcn-mobile-menu-btn svg {
        width: 28px;
        height: 28px;
    }
}

  .pcn-footer {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: #ffffff;
    padding: 60px 0 0 0;
    position: relative;
    overflow: hidden;
    font-family: 'Gilroy-Regular', Arial, sans-serif;
}

.pcn-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #4CAC26, transparent);
  }

.pcn-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
  }

  .pcn-footer-section {
    margin-bottom: 40px;
  }

  .pcn-footer-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #4CAC26;
    position: relative;
    padding-bottom: 10px;
    font-family: 'Gilroy-Semibold', Arial, sans-serif;
}

.pcn-footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: #4CAC26;
}

.pcn-footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pcn-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: transform 0.2s ease;
}

.pcn-footer-contact-item:hover {
    transform: translateX(5px);
}

.pcn-footer-icon {
    width: 20px;
    height: 20px;
    color: #4CAC26;
    flex-shrink: 0;
    margin-top: 2px;
}

.pcn-footer-contact-text {
    flex: 1;
    font-family: 'Gilroy-Regular', Arial, sans-serif;
}

.pcn-footer-contact-text a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.pcn-footer-contact-text a:hover {
    color: #4CAC26;
}

.pcn-footer-subtext {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 2px;
  }

  .pcn-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pcn-footer-links li {
    margin-bottom: 12px;
  }

  .pcn-footer-links a {
    color: #cccccc;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    position: relative;
    padding-left: 0;
    font-family: 'Gilroy-Regular', Arial, sans-serif;
}

.pcn-footer-links a::before {
    content: '→';
    position: absolute;
    left: -15px;
    opacity: 0;
    transition: all 0.2s ease;
    color: #4CAC26;
}

.pcn-footer-links a:hover {
    color: #4CAC26;
    padding-left: 15px;
}

.pcn-footer-links a:hover::before {
    opacity: 1;
}

.pcn-footer-social {
    margin-top: 30px;
}

.pcn-footer-social h4 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #ffffff;
    font-family: 'Gilroy-Semibold', Arial, sans-serif;
}

.pcn-footer-social-links {
    display: flex;
    gap: 15px;
}

.pcn-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(76, 172, 38, 0.08);
    border: 1px solid rgba(76, 172, 38, 0.2);
    border-radius: 50%;
    color: #4CAC26;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pcn-social-link:hover {
    background: #4CAC26;
    color: #ffffff;
    transform: translateY(-3px) scale(1.05);
}

.pcn-social-link svg {
    width: 20px;
    height: 20px;
  }

  .pcn-footer-bottom {
    margin-top: 50px;
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.pcn-footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pcn-footer-copyright p {
    margin: 0;
    color: #999;
    font-size: 14px;
    font-family: 'Gilroy-Regular', Arial, sans-serif;
}

.pcn-footer-legal {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pcn-footer-legal a {
    color: #999;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
    font-family: 'Gilroy-Regular', Arial, sans-serif;
}

.pcn-footer-legal a:hover {
    color: #4CAC26;
}

.pcn-footer-separator {
    color: #666;
}

@media (max-width: 1024px) {
    .pcn-footer-container {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px;
    }
    
    .pcn-footer-section:first-child {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 768px) {
    .pcn-footer {
        padding: 40px 0 0 0;
    }
    
    .pcn-footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 15px;
    }
    
    .pcn-footer-section {
        margin-bottom: 30px;
    }
    
    .pcn-footer-title {
        font-size: 16px;
        margin-bottom: 20px;
    }
    
    .pcn-footer-contact-item {
        gap: 10px;
    }
    
    .pcn-footer-icon {
        width: 18px;
        height: 18px;
    }
    
    .pcn-footer-links a {
        font-size: 13px;
    }
    
    .pcn-footer-bottom-container {
    flex-direction: column;
    gap: 15px;
    text-align: center;
        padding: 0 15px;
    }
    
    .pcn-footer-legal {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .pcn-footer {
        padding: 30px 0 0 0;
    }
    
    .pcn-footer-container {
        padding: 0 10px;
  }

    .pcn-footer-contact-text {
        font-size: 14px;
  }

    .pcn-footer-subtext {
        font-size: 11px;
    }
    
    .pcn-footer-social-links {
    gap: 10px;
  }

    .pcn-social-link {
        width: 35px;
        height: 35px;
    }
    
    .pcn-social-link svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
  .pcn-footer {
    padding: 30px 15px 15px 15px;
  }

  .pcn-footer-title {
    font-size: 16px;
  }

  .pcn-footer-links a {
    font-size: 13px;
  }

  .pcn-footer-copyright {
    font-size: 11px;
  }

  .pcn-footer-links-bottom a {
    font-size: 11px;
  }
}

    /* Feedback Widget Styles */
    .feedback-widget {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 9999;
      font-family: 'Gilroy-Regular', Arial, sans-serif;
    }

    @media (min-width: 1200px) {
      .feedback-widget {
        bottom: 40px;
        right: 40px;
      }
      
      .feedback-button {
        width: 100px;
        height: 100px;
        box-shadow: none;
      }
      
      .feedback-button:hover {
        transform: scale(1.15);
        box-shadow: none;
      }
      
      .feedback-button .animated-icon {
        width: 32px;
        height: 32px;
      }
      
      .feedback-message {
        width: 400px;
        bottom: 120px;
      }
      
      .feedback-panel {
        width: 400px;
        bottom: 110px;
      }
    }

    @media (min-width: 1600px) {
      .feedback-widget {
        bottom: 50px;
        right: 50px;
      }
      
      .feedback-button {
        width: 120px;
        height: 120px;
        box-shadow: none;
      }
      
      .feedback-button .animated-icon {
        width: 40px;
        height: 40px;
      }
      
      .feedback-message {
        width: 450px;
        bottom: 140px;
      }
      
      .feedback-panel {
        width: 450px;
        bottom: 130px;
      }
    }

    .feedback-message {
      position: absolute;
      bottom: 90px;
      right: 0;
      width: 360px;
      background: linear-gradient(135deg, #ffffff, #f8f9fa);
      border-radius: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border: 2px solid #4CAC26;
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .feedback-message::after {
      content: '';
      position: absolute;
      bottom: -12px;
      right: 20px;
      width: 0;
      height: 0;
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
      border-top: 12px solid #4CAC26;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }

    .feedback-message::before {
      content: '';
      position: absolute;
      bottom: -10px;
      right: 22px;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #ffffff;
    }

    .feedback-message.hidden {
      opacity: 0;
      visibility: hidden;
      transform: translateX(20px);
    }

    .message-content {
      display: flex;
      align-items: center;
      padding: 18px 20px;
      position: relative;
    }

    .message-logo {
      width: 40px;
      height: 40px;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .logo-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    .message-text {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .message-title {
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 2px;
      line-height: 1.2;
    }

    .message-subtitle {
      font-size: 14px;
      color: #666;
      line-height: 1.3;
    }

    .message-close {
      position: absolute;
      top: 8px;
      right: 8px;
      background: none;
      border: none;
      color: #999;
      cursor: pointer;
      padding: 4px;
      border-radius: 50%;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .message-close:hover {
      background: #f0f0f0;
      color: #666;
    }

    .feedback-button {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, #4CAC26, #3b9d20);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: none;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .feedback-button:hover {
      transform: scale(1.1);
      box-shadow: none;
    }

    .feedback-button .animated-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      animation: iconSwitch 3s infinite;
    }

    .feedback-button .phone-icon {
      animation-delay: 0s;
    }

    .feedback-button .whatsapp-icon {
      animation-delay: 1.5s;
    }

    @keyframes iconSwitch {
      0%, 45% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
      }
      5%, 40% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
      50%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
      }
    }

    .feedback-panel {
      position: absolute;
      bottom: 80px;
      right: 0;
      width: 360px;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px) scale(0.95);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid #e0e0e0;
      overflow: hidden;
    }

    .feedback-panel::after {
      content: '';
      position: absolute;
      bottom: -12px;
      right: 20px;
      width: 0;
      height: 0;
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
      border-top: 12px solid #fff;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }

    .feedback-panel.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }

    .feedback-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 20px 15px 20px;
      border-bottom: 1px solid #f0f0f0;
    }

    .feedback-header h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;
    }

    .close-feedback {
      background: none;
      border: none;
      font-size: 24px;
      color: #999;
      cursor: pointer;
      padding: 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.2s ease;
    }

    .close-feedback:hover {
      background: #f0f0f0;
      color: #666;
    }

    .feedback-options {
      padding: 15px 20px 20px 20px;
    }

    .feedback-option {
      display: flex;
      align-items: center;
      padding: 16px 20px;
      margin-bottom: 12px;
      border-radius: 16px;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid transparent;
      position: relative;
      overflow: hidden;
    }

    .feedback-option::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s;
    }

    .feedback-option:hover::before {
      left: 100%;
    }

    .feedback-option:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .phone-option {
      background: linear-gradient(135deg, #4CAC26, #3b9d20);
      color: white;
    }

    .phone-option:hover {
      background: linear-gradient(135deg, #3b9d20, #2e7d17);
    }

    .whatsapp-option {
      background: linear-gradient(135deg, #25D366, #128C7E);
      color: white;
    }

    .whatsapp-option:hover {
      background: linear-gradient(135deg, #128C7E, #0d6b5f);
    }

    .option-icon {
      width: 28px;
      height: 28px;
      margin-right: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .option-icon svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
    }

    .option-text {
      flex: 1;
    }

    .option-title {
      display: block;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 2px;
    }

    .option-subtitle {
      display: block;
      font-size: 14px;
      opacity: 0.9;
    }

    @media (max-width: 768px) {
      .feedback-widget {
        bottom: 20px;
        right: 20px;
      }
      
      .feedback-message {
        width: 340px;
        bottom: 90px;
        right: 0;
      }
      
      .feedback-message::after {
        right: 20px;
      }
      
      .feedback-message::before {
        right: 22px;
      }
      
      .message-content {
        padding: 16px 18px;
      }
      
      .message-logo {
        width: 36px;
        height: 36px;
        margin-right: 10px;
      }
      
      .message-title {
        font-size: 13px;
      }
      
      .message-subtitle {
        font-size: 11px;
      }
      
      .feedback-button {
        width: 70px;
        height: 70px;
      }
      
      .feedback-panel {
        width: 340px;
        right: 0;
      }
      
      .feedback-panel::after {
        right: 20px;
      }
      
      .option-icon {
        width: 26px;
        height: 26px;
        margin-right: 12px;
      }
      
      .feedback-option {
        padding: 14px 16px;
        margin-bottom: 10px;
      }
    }

    @media (max-width: 480px) {
      .feedback-widget {
        bottom: 15px;
        right: 15px;
      }
      
      .feedback-message {
        width: 320px;
        bottom: 85px;
        right: 0;
      }
      
      .feedback-message::after {
        right: 20px;
      }
      
      .feedback-message::before {
        right: 22px;
      }
      
      .message-content {
        padding: 14px 16px;
      }
      
      .message-logo {
        width: 32px;
        height: 32px;
        margin-right: 8px;
      }
      
      .message-title {
        font-size: 12px;
      }
      
      .message-subtitle {
        font-size: 10px;
      }
      
      .feedback-button {
        width: 65px;
        height: 65px;
      }
      
      .feedback-panel {
        width: 320px;
        bottom: 75px;
        right: 0;
      }
      
      .feedback-panel::after {
        right: 20px;
      }
      
      .feedback-header {
        padding: 15px 15px 10px 15px;
      }
      
      .feedback-header h3 {
        font-size: 15px;
      }
      
      .feedback-options {
        padding: 12px 15px 15px 15px;
      }
      
      .feedback-option {
        padding: 12px 14px;
        margin-bottom: 8px;
      }
      
      .option-icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }
      
      .option-title {
        font-size: 13px;
      }
      
      .option-subtitle {
        font-size: 11px;
      }
    }

    @media (max-width: 360px) {
      .feedback-widget {
        bottom: 10px;
        right: 10px;
      }
      
      .feedback-message {
        width: 300px;
        right: 0;
        bottom: 80px;
      }
      
      .feedback-message::after {
        right: 20px;
      }
      
      .feedback-message::before {
        right: 22px;
      }
      
      .message-logo {
        width: 30px;
        height: 30px;
        margin-right: 8px;
      }
      
      .feedback-button {
        width: 60px;
        height: 60px;
      }
      
      .feedback-panel {
        width: 300px;
        right: 0;
        bottom: 70px;
      }
      
      .feedback-panel::after {
        right: 20px;
      }
      
      .option-icon {
        width: 22px;
        height: 22px;
        margin-right: 8px;
      }
      
      .feedback-option {
        padding: 10px 12px;
      }
    }
    </style>
    <script src="https://unpkg.com/imask"></script>

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();
   for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
   k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(104277126, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/104277126" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</head>
<body>
    <header class="pcn-header">
        <div class="pcn-header-inner">
            <div class="pcn-logo-block">
                <a href="/" class="pcn-logo-link">
                    <img src="/assets/images/wh5we6x559s3hj1szlm51tyo55ovahz6.png" alt="ЦОМ" class="pcn-logo">
                </a>
            </div>

            <div class="pcn-header-content">
                <div class="pcn-header-top">
                    <nav class="pcn-nav">
                        <div class="pcn-dropdown">
                            Каталог товаров
                            <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9" /></svg>
                            <div class="pcn-dropdown-menu">
                                <a href="/vtorjenie.html">Решения от вторжения</a>
                                <a href="/napadenie.html">Решения от нападения</a>
                                <a href="/antipotop.html">Система Антипотоп</a>
                                <a href="/services">Фоновый и Ландшафтный Звук</a>
                                <a href="/videonabludenie.html">Видеонаблюдение</a>
                                <a href="/domofon.html">Домофония</a>
                            </div>
                        </div>
                        <div class="pcn-dropdown">
                            Услуги
                            <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9" /></svg>
                            <div class="pcn-dropdown-menu">
                                <a href="/services">Все услуги</a>
                                <a href="/services#security-services">Охранные услуги</a>
                                <a href="/calculator.html">Собрать систему безопасности</a>
                                <a href="/armed-escort.html">Вооруженное Сопровождение</a>
                                <a href="/vtorjenie.html">Охранная сигнализация с выездом "Кузет"</a>
                                <a href="/napadenie.html">Тревожная кнопка с выездом "Кузет"</a>
                                <a href="/services#safe-protection">Защита сейфов</a>
                                <a href="/services#equipment-rental">Аренда оборудования</a>
                                <a href="/services#coming-soon">В скором времени</a>
                            </div>
                        </div>
                        <div class="pcn-dropdown">
                            Компания
                            <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9" /></svg>
                            <div class="pcn-dropdown-menu">
                                <a href="#main">О нас</a>
                                <a href="#achievements">Наши Достижения</a>
                                <a href="/certificate.html">Сертификаты</a>
                                <a href="#partners">Сотрудничество</a>
                                <a href="/vacancies">Вакансии</a>
                                <a href="/news">Новости</a>
                            </div>
                        </div>
                        <a href="#form-wrapper" class="pcn-link">Оплата</a>
                        <a href="/prices.json" class="pcn-link">Прайс</a>
                    </nav>

                    <div class="pcn-header-right">
                        <div class="pcn-phone">
                            <svg viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.72c.1.81.3 1.6.57 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.74-1.74a2 2 0 0 1 2.11-.45c.74.27 1.53.47 2.34.57a2 2 0 0 1 1.72 2z"/></svg>
                            +7 727 339 77 00 <small>( с 08:00 – 17:00 )</small>
                        </div>
                        <div class="pcn-lang">
                            Ru
                            <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9" /></svg>
                        </div>
                    </div>
                </div>

                <div class="pcn-header-bottom">
                    <div class="pcn-search-wrapper">
                        <input type="text" class="pcn-search-input" placeholder="Поиск...">
                        <span class="pcn-search-icon">
                            <svg viewBox="0 0 24 24">
                                <circle cx="11" cy="11" r="7" />
                                <line x1="16.5" y1="16.5" x2="22" y2="22" />
                            </svg>
                        </span>
                    </div>

                    <div class="pcn-icons">
                        <div class="pcn-icon-item">
                            <img src="/assets/icons/Group 1900.svg" alt="Сравнение">
                            <div>Сравнение</div>
                        </div>
                        <div class="pcn-icon-item">
                            <img src="/assets/icons/Group 1902.svg" alt="Избранное">
                            <div>Избранное</div>
                        </div>
                        <div class="pcn-icon-item">
                            <img src="/assets/icons/Group 1903.svg" alt="Корзина">
                            <div>Корзина</div>
                        </div>
                        <div class="pcn-icon-item">
                            <img src="/assets/icons/Group 1904.svg" alt="Войти">
                            <div>Войти</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <header class="pcn-mobile-header">
        <div class="pcn-mobile-header-inner">
            <div class="pcn-mobile-logo">
                <a href="/" class="pcn-logo-link">
                    <img src="/assets/images/wh5we6x559s3hj1szlm51tyo55ovahz6.png" alt="ЦОМ" class="pcn-logo">
                </a>
            </div>

            <div class="pcn-mobile-actions">
                <button class="pcn-mobile-menu-btn" onclick="toggleMobileMenu()">
                    <svg viewBox="0 0 24 24">
                        <line x1="12" y1="6" x2="21" y2="6"></line>
                        <line x1="3" y1="12" x2="21" y2="12"></line>
                        <line x1="3" y1="18" x2="21" y2="18"></line>
                    </svg>
                </button>
            </div>
        </div>

        <div class="pcn-mobile-menu" id="pcnMobileMenu">
            <div class="pcn-mobile-menu-header">
                <div class="pcn-mobile-menu-logo">
                    <img src="/assets/images/wh5we6x559s3hj1szlm51tyo55ovahz6.png" alt="ЦОМ" class="pcn-logo">
                </div>
                <button class="pcn-mobile-menu-close" onclick="toggleMobileMenu()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>

            <nav class="pcn-mobile-nav">
                <div class="pcn-mobile-dropdown">
                    <div class="pcn-mobile-dropdown-header">
                        <div class="pcn-mobile-dropdown-header-left">
                            <div class="pcn-mobile-dropdown-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M3 3h18v18H3z"></path>
                                    <path d="M9 9h6v6H9z"></path>
                                </svg>
                            </div>
                            <span>Каталог товаров</span>
                        </div>
                        <svg class="pcn-mobile-dropdown-arrow" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5z" fill="currentColor"/>
                        </svg>
                    </div>
                    <div class="pcn-mobile-dropdown-content">
                        <a href="/vtorjenie.html">Решения от вторжения</a>
                        <a href="/napadenie.html">Решения от нападения</a>
                        <a href="/antipotop.html">Система Антипотоп</a>
                        <a href="/services">Фоновый и Ландшафтный Звук</a>
                        <a href="/videonabludenie.html">Видеонаблюдение</a>
                        <a href="/domofon.html">Домофония</a>
                    </div>
                </div>

                <div class="pcn-mobile-dropdown">
                    <div class="pcn-mobile-dropdown-header">
                        <div class="pcn-mobile-dropdown-header-left">
                            <div class="pcn-mobile-dropdown-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                                </svg>
                            </div>
                            <span>Услуги</span>
                        </div>
                        <svg class="pcn-mobile-dropdown-arrow" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5z" fill="currentColor"/>
                        </svg>
                    </div>
                    <div class="pcn-mobile-dropdown-content">
                        <a href="/services">Все услуги</a>
                        <a href="/services#security-services">Охранные услуги</a>
                        <a href="/calculator.html">Собрать систему безопасности</a>
                        <a href="/armed-escort.html">Вооруженное Сопровождение</a>
                        <a href="/vtorjenie.html">Охранная сигнализация с выездом "Кузет"</a>
                        <a href="/napadenie.html">Тревожная кнопка с выездом "Кузет"</a>
                        <a href="/services#safe-protection">Защита сейфов</a>
                        <a href="/services#equipment-rental">Аренда оборудования</a>
                        <a href="/services#coming-soon">В скором времени</a>
                    </div>
                </div>

                <div class="pcn-mobile-dropdown">
                    <div class="pcn-mobile-dropdown-header">
                        <div class="pcn-mobile-dropdown-header-left">
                            <div class="pcn-mobile-dropdown-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                </svg>
                            </div>
                            <span>Компания</span>
                        </div>
                        <svg class="pcn-mobile-dropdown-arrow" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5z" fill="currentColor"/>
                        </svg>
                    </div>
                    <div class="pcn-mobile-dropdown-content">
                        <a href="#main">О нас</a>
                        <a href="#achievements">Наши Достижения</a>
                        <a href="/certificate.html">Сертификаты</a>
                        <a href="#partners">Сотрудничество</a>
                        <a href="/vacancies">Вакансии</a>
                        <a href="/news">Новости</a>
                    </div>
                </div>

                <a href="#form-wrapper" class="pcn-mobile-link">
                    <div class="pcn-mobile-link-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
                            <line x1="1" y1="10" x2="23" y2="10"></line>
                        </svg>
                    </div>
                    <span>Оплата</span>
                </a>
                <a href="/prices.json" class="pcn-mobile-link">
                    <div class="pcn-mobile-link-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                            <line x1="16" y1="13" x2="8" y2="13"></line>
                            <line x1="16" y1="17" x2="8" y2="17"></line>
                            <polyline points="10 9 9 9 8 9"></polyline>
                        </svg>
                    </div>
                    <span>Прайс</span>
                </a>
            </nav>

            <div class="pcn-mobile-quick-icons">
                <a href="#" class="pcn-mobile-quick-icon">
                    <img src="/assets/icons/Group 1900.svg" alt="Сравнение">
                    <span>Сравнение</span>
                </a>
                <a href="#" class="pcn-mobile-quick-icon">
                    <img src="/assets/icons/Group 1902.svg" alt="Избранное">
                    <span>Избранное</span>
                </a>
                <a href="#" class="pcn-mobile-quick-icon">
                    <img src="/assets/icons/Group 1903.svg" alt="Корзина">
                    <span>Корзина</span>
                </a>
                <a href="#" class="pcn-mobile-quick-icon">
                    <img src="/assets/icons/Group 1904.svg" alt="Войти">
                    <span>Войти</span>
                </a>
            </div>

            <div class="pcn-mobile-address">
                <h4>Наш адрес</h4>
                <div class="pcn-mobile-address-content">
                    <div class="pcn-mobile-address-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                            <polyline points="9,22 9,12 15,12 15,22"/>
                        </svg>
                    </div>
                    <div class="pcn-mobile-address-text">
                        <div class="pcn-mobile-address-main">Республика Казахстан, г. Алматы, ул. Ударная, 21А офис 1</div>
                        <div class="pcn-mobile-address-sub">(ул. Байзакова, уг. ул. Жамбыла)</div>
                        <div class="pcn-mobile-address-time">с 08:00 – 17:00</div>
                    </div>
                </div>
            </div>

            <div class="pcn-mobile-social">
                <h4>Мы в социальных сетях</h4>
                <div class="pcn-mobile-social-links">
                    <a href="https://www.instagram.com/pcn.kz?igsh=MTczamJ5cGoxbWVueQ==" target="_blank" class="pcn-mobile-social-link" title="Instagram">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                        </svg>
                        <span>Instagram</span>
                    </a>

                    <a href="https://www.facebook.com/pcnkz?mibextid=ZbWKwL" target="_blank" class="pcn-mobile-social-link" title="Facebook">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                        <span>Facebook</span>
                    </a>

                    <a href="https://www.tiktok.com/@pcn.kz" target="_blank" class="pcn-mobile-social-link" title="TikTok">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
                        </svg>
                        <span>TikTok</span>
                    </a>

                    <a href="https://t.me/pcnkz" target="_blank" class="pcn-mobile-social-link" title="Telegram">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M9.78 18.65l.29-2.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.78 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.7L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/>
                        </svg>
                        <span>Telegram</span>
                    </a>
                </div>
            </div>

        </div>

    </header>

    <div class="welcome_yuslugi">
        <div class="text_box_yuslugi">

            <div class="links_yuslugi">
                <a href="/">Главная
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </a>
                <a href="#">Услуги</a>
            </div>

            <h1>Услуги нашей компании</h1>

            <div class="tabs-container">
                <div class="tabs_yuslugi">
                    <button>Все услуги</button>
                    <button>Охранные услуги</button>
                    <button>Защита сейфов</button>
                    <button>Аренда оборудования</button>
                    <button>В релизе</button>
                </div>
            </div>
        </div>
    </div>

    <div class="main-container">
        <div class="text_box_yuslugi" id="security-services">
            <div class="header_yuslugi">
                <span class="title">Охранные услуги</span>
                <span class="tag">Услуга</span>
            </div>

            <div class="services_yuslugi_obertka">
                <a href="https://www.pcn.kz/pcn.kz/lp/sobrat_komplect/" class="service_yuslugi">
                    <img src="assets/images/image1.png" alt="Система безопасности">
                    <div class="text">Создать свою систему безопасности</div>
                </a>
                <a href="armed-escort.html" class="service_yuslugi">
                    <img src="assets/images/image2.jpg" alt="Вооружённое сопровождение">
                    <div class="text">Вооружённое сопровождение</div>
                </a>
                <a href="vtorjenie.html" class="service_yuslugi">
                    <img src="assets/images/image3.png" alt="Сигнализация Кузет">
                    <div class="text">Охранная сигнализация с выездом "Кузет"</div>
                </a>
                <a href="napadenie.html" class="service_yuslugi">
                    <img src="assets/images/image4.png" alt="Тревожная кнопка">
                    <div class="text">Тревожная кнопка с выездом "Кузет"</div>
                </a>
            </div>

        </div>

        <div class="text_box_yuslugi" id="safe-protection">
            <div class="header_yuslugi">
                <span class="title">Защита сейфов</span>
                <span class="tag">Услуга</span>
            </div>

            <a href="/safe.html" style="text-decoration: none; color: inherit; display: block;">
                <div class="container_seif" style="cursor: pointer;">
                <div class="text-content_seif">
                    <h1>Сейф под охраной...</h1>
                    <p class="main-text">
                            Комплексная защита сейфа: круглосуточный мониторинг, датчики и мгновенное<br>
                        реагирование для безопасности ваших ценностей.
                    </p>
                        <span class="btn">Узнать подробнее</span>
                    <p class="sub-text">
                        Круглосуточный контроль обеспечивает безопасность ваших документов и ценностей.
                    </p>
                </div>
            </div>
            </a>
        </div>

        <div class="text_box_yuslugi" id="equipment-rental">
            <div class="header_yuslugi">
                <span class="title">Аренда оборудования</span>
                <span class="tag">Услуга</span>
            </div>

        <div class="rental-container">
            <div class="rental-image">
                <img src="assets/images/rent.png" alt="Оборудование">
                <div class="rental-tags">
                    <a href="#">удобно</a>
                    <a href="#">доступно</a>
                </div>
            </div>
            <div class="rental-content">
                <div class="rental-text">
                    <h1>Не покупайте - арендуйте </h1>
                    <p>Теперь на нашем сайте вы можете арендовать оборудование для охраны, защищая свой дом или бизнес без покупки техники.</p>
                    <a href="#" class="rental-button">Узнать подробнее</a>
                    <div class="rental-details">
                        <ul>
                            <li>(В аренду доступны все основные устройства)</li>
                        </ul>
                        <div class="rental-tags rental-tags-desktop">
                            <a href="#">удобно</a>
                            <a href="#">доступно</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        
            <div class="header_yuslugi">
                <span class="title">В скором времени...</span>

            </div>
        <div class="soon-budet-container">
            <div class="soon-budet-item">
                <img src="assets/images/soon_1.png" alt="Мобильная охранная башня">
                <button class="soon-budet-label">скоро</button>
                <p>Мобильная охранная башня</p>
            </div>
            <div class="soon-budet-item">
                <img src="assets/images/soon_2.png" alt="Мобильная тревожная кнопка">
                <button class="soon-budet-label secondary">скоро</button>
                <p>Мобильная тревожная кнопка</p>
            </div>
            </div>
        </div>
    </div>
</div>

    <div id="feedback-widget-container"></div>

    <script src="js/main.js"></script>

    <script src="components/widget/feedback-widget.js"></script>

    <script>

            document.addEventListener('DOMContentLoaded', function() {

                document.querySelectorAll('a[href*="#"]').forEach(link => {
                    link.addEventListener('click', function(e) {
                        const href = this.getAttribute('href');
                        if (href.includes('#') && href.includes('services')) {
                            e.preventDefault();
                            const targetId = href.split('#')[1];
                            const targetElement = document.getElementById(targetId);
                            if (targetElement) {
                                targetElement.scrollIntoView({
                                    behavior: 'smooth',
                                    block: 'start'
                                });
                            }
                        }
                    });
            });
        });
    </script>

    <script>

       document.addEventListener("DOMContentLoaded", function (){
           const tabsContainer = document.querySelector(".tabs-container");
           const tabs = document.querySelectorAll(".tabs_yuslugi button");
           const sections = {
               "Все услуги": document.querySelector("#security-services"),
               "Охранные услуги": document.querySelector("#security-services"),
               "Защита сейфов": document.querySelector("#safe-protection"),
               "Аренда оборудования": document.querySelector("#equipment-rental"),
               "В релизе": document.querySelector("#coming-soon")
           };

           if (!tabsContainer || !tabs || tabs.length === 0) {
               console.error("Tabs container or tabs not found");
               return;
           }

           function setActiveTab(tabName) {
               tabs.forEach(tab => {
                   tab.classList.remove("active");
                   if (tab.innerText.trim() === tabName) {
                       tab.classList.add("active");
                   }
               });
           }

           const welcomeSection = document.querySelector(".welcome_yuslugi");
           if (welcomeSection) {
           const observer = new IntersectionObserver(
               ([entry]) => {
                   if (!entry.isIntersecting) {
                       tabsContainer.classList.add("sticky");
                   } else {
                       tabsContainer.classList.remove("sticky");
                   }
               },
               {rootMargin: "-10px 0px 0px 0px", threshold: 0}
           );
               observer.observe(welcomeSection);
           }

           const sectionObserver = new IntersectionObserver(
               (entries) => {
                   entries.forEach(entry => {
                       if (entry.isIntersecting && entry.target.dataset.section) {
                           setActiveTab(entry.target.dataset.section);
                       }
                   });
               },
               {threshold: 0.5}
           );

           Object.keys(sections).forEach(section => {
               if (sections[section]) {
               sections[section].dataset.section = section;
               sectionObserver.observe(sections[section]);
               } else {
                   console.warn("Section not found:", section);
               }
           });

           tabs.forEach(tab => {
               tab.addEventListener("click", function () {
                   const tabName = this.innerText.trim();
                   if (sections[tabName]) {
                       const element = sections[tabName];
                       const headerOffset = 100;
                       const elementPosition = element.getBoundingClientRect().top;
                       const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

                       window.scrollTo({
                           top: offsetPosition,
                           behavior: "smooth"
                       });
                       setActiveTab(tabName);
                   }
               });
           });

           if (tabs[0]) {
           tabs[0].classList.add("active");
           }
       });

    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const mobileMenuToggle = document.querySelector('.pcn-mobile-menu-toggle');
            const mobileMenu = document.querySelector('.pcn-mobile-menu');
            const mobileDropdowns = document.querySelectorAll('.pcn-mobile-dropdown');

            if (mobileMenuToggle && mobileMenu) {
                mobileMenuToggle.addEventListener('click', function() {
                    mobileMenu.classList.toggle('active');
                });
            }

            mobileDropdowns.forEach(dropdown => {
                const header = dropdown.querySelector('.pcn-mobile-dropdown-header');
                if (header) {
                    header.addEventListener('click', function() {
                        dropdown.classList.toggle('active');
                    });
                }
            });

            document.addEventListener('click', function(event) {
                if (!mobileMenu.contains(event.target)) {
                    mobileMenu.classList.remove('active');
                }
            });
        });
    </script>

    <footer class="pcn-footer">
        <div class="pcn-footer-container">
            <div class="pcn-footer-section">
                <h3 class="pcn-footer-title">ТОО «ЦЕНТР ОХРАННОГО МОНИТОРИНГА»</h3>
                <div class="pcn-footer-contact-list">
                    <div class="pcn-footer-contact-item">
                        <div class="pcn-footer-icon">
                            <svg viewBox="0 0 24 24" fill="none">
                                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <polyline points="9,22 9,12 15,12 15,22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="pcn-footer-contact-text">
                            Республика Казахстан, г. Алматы, ул. Ударная, 21А офис 1<br>
                            <span class="pcn-footer-subtext">(ул. Байзакова, уг. ул. Жамбыла)</span>
                        </div>
                    </div>

                    <div class="pcn-footer-contact-item">
                        <div class="pcn-footer-icon">
                            <svg viewBox="0 0 24 24" fill="none">
                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.72c.1.81.3 1.6.57 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.74-1.74a2 2 0 0 1 2.11-.45c.74.27 1.53.47 2.34.57a2 2 0 0 1 1.72 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="pcn-footer-contact-text">
                            <a href="tel:+77273397700">+7 727 339 77 00</a>
                            <span class="pcn-footer-subtext">Офис</span>
                        </div>
                    </div>

                    <div class="pcn-footer-contact-item">
                        <div class="pcn-footer-icon">
                            <svg viewBox="0 0 24 24" fill="none">
                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.72c.1.81.3 1.6.57 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.74-1.74a2 2 0 0 1 2.11-.45c.74.27 1.53.47 2.34.57a2 2 0 0 1 1.72 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="pcn-footer-contact-text">
                            <a href="tel:+77003397700">+7 700 339 77 00</a>
                            <span class="pcn-footer-subtext">Офис</span>
                        </div>
                    </div>

                    <div class="pcn-footer-contact-item">
                        <div class="pcn-footer-icon">
                            <svg viewBox="0 0 24 24" fill="none">
                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.72c.1.81.3 1.6.57 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.74-1.74a2 2 0 0 1 2.11-.45c.74.27 1.53.47 2.34.57a2 2 0 0 1 1.72 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="pcn-footer-contact-text">
                            <a href="tel:+77273397711">+7 727 339 77 11</a>
                            <span class="pcn-footer-subtext">ПЦН + Техподдержка</span>
                        </div>
                    </div>

                    <div class="pcn-footer-contact-item">
                        <div class="pcn-footer-icon">
                            <svg viewBox="0 0 24 24" fill="none">
                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.72c.1.81.3 1.6.57 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.74-1.74a2 2 0 0 1 2.11-.45c.74.27 1.53.47 2.34.57a2 2 0 0 1 1.72 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="pcn-footer-contact-text">
                            <a href="tel:+77003397711">+7 700 339 77 11</a>
                            <span class="pcn-footer-subtext">ПЦН</span>
                        </div>
                    </div>

                    <div class="pcn-footer-contact-item">
                        <div class="pcn-footer-icon">
                            <svg viewBox="0 0 24 24" fill="none">
                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="pcn-footer-contact-text">
                            <a href="https://t.me/CentrOhrannogoMonitoringa_bot" target="_blank">CentrOhrannogoMonitoringa_bot</a>
                            <span class="pcn-footer-subtext">Telegram бот</span>
                        </div>
                    </div>

                    <div class="pcn-footer-contact-item">
                        <div class="pcn-footer-icon">
                            <svg viewBox="0 0 24 24" fill="none">
                                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <polyline points="22,6 12,13 2,6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="pcn-footer-contact-text">
                            <a href="mailto:sales@pcn.kz">sales@pcn.kz</a>
                            <span class="pcn-footer-subtext">Email</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pcn-footer-section">
                <h3 class="pcn-footer-title">КАТАЛОГ</h3>
                <ul class="pcn-footer-links">
                    <li><a href="#">Автоматизация и умный дом</a></li>
                    <li><a href="#">Периметровая сигнализация</a></li>
                    <li><a href="#">Видеонаблюдение</a></li>
                    <li><a href="#">Тревожная сигнализация</a></li>
                    <li><a href="#">Контроль доступа</a></li>
                    <li><a href="#">Видеодомофоны</a></li>
                    <li><a href="#">Пожарная сигнализация</a></li>
                    <li><a href="#">Охрано-тревожная сигнализация</a></li>
                </ul>
            </div>

            <div class="pcn-footer-section">
                <h3 class="pcn-footer-title">ДОКУМЕНТЫ</h3>
                <ul class="pcn-footer-links">
                    <li><a href="/documents/user-agreement.html">Пользовательское соглашение и условия использования</a></li>
                    <li><a href="/documents/public-offer.html">Публичная оферта</a></li>
                </ul>
            </div>

            <div class="pcn-footer-section">
                <h3 class="pcn-footer-title">FAQ</h3>
                <ul class="pcn-footer-links">
                    <li><a href="#">Как купить</a></li>
                    <li><a href="#">Гарантия</a></li>
                    <li><a href="#">Доставка</a></li>
                </ul>

                <div class="pcn-footer-social">
                    <h4>Мы в социальных сетях</h4>
                    <div class="pcn-footer-social-links">
                        <a href="https://t.me/CentrOhrannogoMonitoringa_bot" target="_blank" class="pcn-social-link" title="Telegram">
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.05-.2-.06-.06-.14-.04-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/>
                            </svg>
                        </a>
                        <a href="https://wa.me/77003397700" target="_blank" class="pcn-social-link" title="WhatsApp">
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
                            </svg>
                        </a>
                        <a href="https://www.instagram.com/pcn.kz?igsh=MTczamJ5cGoxbWVueQ==" target="_blank" class="pcn-social-link" title="Instagram">
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                            </svg>
                        </a>
                        <a href="https://www.facebook.com/pcnkz?mibextid=ZbWKwL" target="_blank" class="pcn-social-link" title="Facebook">
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="pcn-footer-bottom">
            <div class="pcn-footer-bottom-container">
                <div class="pcn-footer-copyright">
                    <p>&copy; 2025 ТОО «ЦЕНТР ОХРАННОГО МОНИТОРИНГА». Все права защищены.</p>
                </div>
                <div class="pcn-footer-legal">
                    <a href="/documents/user-agreement.html">Пользовательское соглашение и условия использования</a>
                    <span class="pcn-footer-separator">|</span>
                    <a href="/documents/public-offer.html">Публичная оферта</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        function toggleMobileMenu() {
            const menu = document.getElementById('pcnMobileMenu');
            if (menu) {
                menu.classList.toggle('active');
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            const mobileDropdowns = document.querySelectorAll('.pcn-mobile-dropdown');
            mobileDropdowns.forEach(dropdown => {
                const header = dropdown.querySelector('.pcn-mobile-dropdown-header');
                if (header) {
                    header.addEventListener('click', function() {
                        dropdown.classList.toggle('active');
                    });
                }
            });
        });
    </script>

</body>
</html>