body {
     margin: 0;
     padding: 0;
     font-family: 'Helvetica Neue', Arial, sans-serif;
     # background: linear-gradient(135deg, #bbbbbb 0%, #eeeeee 80%);
     background-color: white;
     background-size: cover;
     background-attachment: fixed;
     color: white;
     overflow-x: hidden;
 }

.header {
     /* background: rgba(0, 0, 0, 0.5); */
     background: linear-gradient(135deg, #00416a 0%, #007ba7 100%);
     padding: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;
     z-order: 9999;
 }

.header-logo {
     font-size: 24px;
     font-weight: bold;
     color: white;
 }

.header-logo a {
    color: ivory;
}

.header-logo a:hover {
    text-decoration: none;
}

.header-menu {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     gap: 30px;
 }

.header-menu li {
     transition: all 0.3s;
 }

.header-menu li:hover {
     transform: translateY(-3px);
 }

.header-menu a {
     text-decoration: none;
     color: white;
     font-size: 18px;
     padding: 10px 15px;
     border-radius: 5px;
 }

.header-menu a:hover {
     background: rgba(255, 255, 255, 0.2);
 }

.content {
     max-width: 1200px;
     margin: 0 auto;
     padding: 50px 20px;
     display: grid;
     gap: 30px;
     grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
 }

.card {
     position: relative;
     padding: 30px;
     border-radius: 15px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     transform: translateX(-100%);
     opacity: 0;
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     overflow: hidden;
     min-height: 250px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     cursor: pointer;
     transform-origin: center;
 }

.card:hover {
     transform: scale(1.05) translateX(0);
     z-index: 3;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
 }

.card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.3));
     z-index: 1;
     transition: all 0.3s;
 }

.card:hover::before {
     background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.4));
 }

.card * {
     position: relative;
     z-index: 2;
     text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
 }

.card.visible {
     transform: translateX(0);
     opacity: 1;
 }

.card h2 {
     margin: 0 0 20px 0;
     color: white;
     font-size: 22px;
     transition: transform 0.3s;
 }

.card:hover h2 {
     transform: translateY(-5px);
 }

.card p {
     color: rgba(255,255,255,0.9);
     line-height: 1.6;
     transition: transform 0.3s;
 }

.card:hover p {
     transform: translateY(5px);
 }

/* Индивидуальные фоновые изображения для карточек */
.card_plastic {
     background: url('./img/1.jpg') center/cover;
 }

.card_biotech {
     background: url('./img/2.jpg') center/cover;
 }

.card_chemical {
     background: url('./img/4.jpg') center/cover;
 }

.card_bread {
     background: url('./img/3.jpg') center/cover;
 }

.card_build {
     background: url('./img/6.jpg') center/cover;
 }

.card_liquid {
     background: url('./img/5.jpg') center/cover;
 }

.hamburger {
     display: none;
     width: 30px;
     height: 20px;
     position: relative;
     cursor: pointer;
 }

.hamburger::before,
.hamburger::after {
     content: '';
     position: absolute;
     left: 0;
     width: 100%;
     height: 3px;
     background: white;
     transition: all 0.3s;
 }

.hamburger::before {
     top: 0;
 }

.hamburger::after {
     bottom: 0;
 }

.hamburger span {
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 100%;
     height: 3px;
     background: white;
 }

@media (max-width: 768px) {
    .header-logo {
         display: none;
     }

    .hamburger {
         display: block;
     }

    .header-menu {
         position: fixed;
         top: 70px;
         right: -100%;
         width: 200px;
         background: rgba(0, 0, 0, 0.9);
         flex-direction: column;
         padding: 20px;
         border-radius: 10px;
         transition: right 0.3s;
         z-index: 999;
     }

    .header-menu.active {
         right: 20px;
     }

    .content {
         grid-template-columns: 1fr;
         gap: 20px;
     }

    .card {
         padding: 25px;
         min-height: 200px;
     }

    .card:hover {
         transform: scale(1.03) translateX(0);
     }
 }

.vhead {
   width: 100%;
   height: 320px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   position: relative;
   padding: 40px;
   z-order: 9999;
}

.v_plastic {
   background-position: left bottom;
   background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(1,1,1,0)), url('./img/1b.jpg');
}

.v_liquid {
   height: 240px;
   background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(1,1,1,0)), url('./img/5b.jpg');
}

.vhead-nav {
   position: absolute;
   bottom: 20px;
   left: 0%;
}

.vhead-menu {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   gap: 40px;
   background: rgba(0, 65, 106, 0.8);
   padding: 15px 30px 15px 350px;
   border-radius: 0px 0px 0px 0px;
   backdrop-filter: blur(5px);
}

.vhead-menu::after {
 content: '';
 position: absolute;
 right: -50px;
 bottom: -15px;

 border: 50px solid transparent;

 border-right: 50px solid rgba(0, 65, 106, 0.8);
 border-bottom: 50px solid rgba(0, 65, 106, 0.8);
 transform: rotate(-45deg);
 transition: all 0.3s;
}

.vhead-menu li {
   position: relative;
   padding: 10px 0;
}

.vhead-menu a {
   color: white;
   text-decoration: none;
   font-weight: 800;
   transition: all 0.3s;
   padding: 10px 15px;
   position: relative;
}

.vhead-menu a.selected::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 0%;
   width: 100%;
   height: 2px;
   background: #00b4d8;
   transition: all 0.3s;
}

.vhead-menu a::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 50%;
   width: 0;
   height: 2px;
   background: #00b4d8;
   transition: all 0.3s;
}

.vhead-menu a:hover::after {
   width: 100%;
   left: 0;
}

.vhead-menu a:hover {
   color: #00b4d8;
}

@media (max-width: 768px) {
   .vhead {
       height: 250px;
   }

   .vhead-nav {
       display: none;
   }

   .vhead-menu {
       gap: 20px;
       padding: 10px 20px;
   }

   .vhead-menu a {
       font-size: 14px;
       padding: 8px 12px;
   }

   .vhead-menu::after {
     display: none;
   }
}

h1 {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  padding-top: 12px;
  color: #00416a;
}
.d h1:before {
  content: "";
  top: -1px;
  left: 0;
  width: 80%;
  height: 1px;
  background: #00416a;
}
h2 {
  margin-top: 20px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 22px;
  line-height: 22px;
}
.d h2 {
  text-align: left;
  color: #444140;
}
.d h2:before {
  content: "";
  display: block;
  margin-bottom: 25px;
  left: 0;
  width: 70%;
  height: 1px;
  background-color: #00416a;
}

h3 {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 17pt;
  text-align: left;
  padding-top: 30px;
  color: #00416a;
}
.d h3:before {
  content: "";
  top: -1px;
  left: 0;
  width: 80%;
  height: 1px;
  background: #00416a;
}

h4 {
  margin-top: 20px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
}
.d h4 {
  text-align: left;
  color: #444140;
}
.d h4:before {
  content: "";
  display: block;
  margin-bottom: 25px;
  left: 0;
  width: 70%;
  height: 1px;
  background-color: #00416a;
}




.sep-8 { width: 100%; height: 8px; }
.fullw { width: 100%; }
.tj { text-align: justify; }
.tl { text-align: left; }
.tr { text-align: right; }
.tc { text-align: center; }
.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.pl-20 { padding-left: 20px; }
.pl-25 { padding-left: 25px; }
.pl-30 { padding-left: 30px; }
.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }
.pr-20 { padding-right: 20px; }
.pr-25 { padding-right: 25px; }
.pr-30 { padding-right: 30px; }
.border-0 { border: 0px; }

.main_container {
  position: relative; /* Создает контекст позиционирования */
  min-height: 100vh; /* Минимальная высота родителя */
  background: transparent;
}

.content_block {
  padding-top: 50px;
  padding-left: 10px;
  padding-right: 15px;
  margin: 0 auto;
  margin-left: 20%;
  display: block;
  width: 70%;
  max-width: 1200px;
  color: #444140;
  background: transparent;
}

.content_block_with_sidebar {
  position: relative;
  padding-top: 50px;
  padding-left: 10px;
  padding-right: 15px;
  margin: 0 auto;
  margin-left: 20%;
  margin-top: -46%;
  display: block;
  width: 70%;
  max-width: 1200px;
  color: #444140;
  background-color: #fff;
}

@media screen and (max-width: 999px) {
.content_block {
      padding: 0px 0px;
      margin-top: 10px;
      margin-left: 10px;
      margin-right: 15px;
      display: block;
      width: 90%;
    }

.content_block_with_sidebar {
  padding: 0px 0px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 15px;
  display: block;
  width: 90%;
}

.table {
    font-size: 7pt;
}
}


.sidebar {
     background-color: #f1f1f1;
     width: 270px;
     padding: 1rem;
     position: sticky;
     top: 0;
     left: 0;
     overflow: auto;
     box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Стили меню */
nav ul {
 list-style: none;
 padding: 0;
}

nav ul li a {
 display: block;
 padding: 0.5rem;
 color: #333;
 text-decoration: none;
 transition: color 0.3s, background-color 0.3s;
}

nav ul li a.active {
 color: #007bff;
 font-weight: bold;
 background-color: #e9ecef;
 border-left: 3px solid #007bff;
}

/* Анимация указателя */
nav ul li a::before {
 content: "";
 display: block;
 height: 3px;
 background-color: #007bff;
 transform: scaleX(0);
 transition: transform 0.3s ease-in-out;
}

nav ul li a.active::before {
 transform: scaleX(1);
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
 .sidebar {
 position: static;
 width: 100%;
 height: auto;
 }

 .content-section {
 margin-left: 0;
 }
}

