body {height: auto; margin: 0; padding: 0; font-size: max(1em, min(1em, calc(var(--base-scale) * 4)));  box-sizing: border-box;}
:root { --base-scale: 0.1vw;}
@supports not (font-size: clamp(1em, 1vw, 2em)) { .responsive-text {font-size: 1.5em;}}
.navbar {background-color: #ffffff !important; height: 100px; padding-top: 10px;padding-bottom: 10px; }
.site-navbar {background-color: #ffffff !important; height: 100px; padding-top: 10px;padding-bottom: 10px;position: fixed;  top: 0;   left: 0;  margin-bottom: 0px;  z-index: 1999;  width: 100%; }
.navbar-brand img {height: 80px; }
.navbar-toggler {border: none; font-size: 1.5rem; padding: 0.25rem 0.75rem;cursor: pointer;}
.nav-link, .navbar-brand {color: #000000; cursor: pointer; }
.nav-link {margin-right: 20px !important; font-size: 1.2rem; }
.nav-link:hover {color: #808000;}
.navbar-collapse.collapse {display: flex !important;}
.navbar-collapse.collapse.show {display: flex !important;}
.cards-container {display: grid;  grid-template-columns: repeat(2, 1fr); gap: 15px; padding: 15px;  padding: 15px; margin-top: 100px;  }
.marketing{margin-bottom: 1.5rem;text-align: center;}
.rw_m{width:70%; margin:0 0 0 15%;}
.ten{box-shadow:0 1px 1px rgba(0, 0, 0, .3), -1px 0 1px -1px rgba(0, 0, 0, .8),   1px 0 2px -1px rgba(0, 0, 0, .8),   0 0 4px rgba(0, 0, 0, .1) inset}
.marketing p {margin-right: .75rem;margin-left: .75rem;}
.circle-container {border: 1px solid #808000;border-radius: 50%;height: 250px; width: 250px; position: relative;margin:0 auto;}
.circle-content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.featurette-heading {font-weight: 300;line-height: 1;}
.list-inline-item {margin-bottom: 1rem;}
.lead_gl {font-size: 1.0rem;font-weight: 300;font-style: oblique;}
.top_nul{padding-top: 0 !important;}
.btn-outline-osn{color: #808000 !important;border-color: #808000 !important;}
/* Обертка для каждой карточки, позволяющая управлять отступами */
.card-wrapper {
  background-color: white; /* Фон для карточки */
  border-radius: 8px; /* Скругленные углы */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Легкая тень */
  padding: 10px; /* Внутренние отступы обертки */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Распределяет пространство */
}

/* Основной элемент карточки */
.card-item {
  display: flex;
  flex-direction: column; /* Содержимое расположено вертикально */
  height: 100%; /* Растягиваем по высоте обертки */
  padding: 15px; /* Отступы контента внутри */
}

/* Заголовки */
.card-item h3, .card-item h4, .card-item h5 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}

/* Параграфы */
.card-item p {
  margin-bottom: 0; /* Убираем нижний отступ у последнего параграфа */
  line-height: 1.5; /* Межстрочный интервал */
 
}

/* Футер карточки (для первой и четвертой) */
.card-item-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* Расстояние между элементами футера */
  margin-top: 15px; /* Отступ сверху */
  padding-top: 10px; /* Отступ сверху */
  border-top: 1px solid #eee; /* Разделительная линия */
}

/* Изображения в футере */
.avatar, .qrcode {
  width: 150px;
  height: 150px;
  border-radius: 50%; /* Круглое изображение */
  object-fit: cover; /* Масштабирование изображения */
}
.list-unstyled li a{
	color:#000000;
	text-decoration:none;
}
/* Галерея сертификатов */
.certifications-gallery {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap; /* Перенос на новую строку при нехватке места */
}

.cert-img {
  height: 40px; /* Высота сертификата */
  width: auto; /* Автоматическая ширина */
  border-radius: 4px; /* Скругленные углы */
}

/* Отступы между изображениями */
.row.gx-1 > * { padding: 0.25rem; }
.bg-dark{background-color:#343a40!important}
.bg-primary{background-color:#343a40!important}
.header{ background-image: url('../images/worktable.jpg'); background-size: cover; -webkit-background-size: cover; min-width: 100%;}
.header_services{min-width: 100%;}
.overlay{ position: absolute; min-height: 70%; min-width: 100%; left: 0; top: 0; background: rgba(244, 244, 244, 0.25);}
.btn-outline-secondary {white-space: normal !important;word-wrap: break-word; text-align: center;  padding: 0.75rem 1rem;line-height: 1.5; min-height: 48px; width: 100%;max-width: 500px; }
.btn-outline-secondary {hyphens: auto;overflow-wrap: anywhere; }
.description{position: absolute;top: 40%;width: 70%;padding:0 0 0 20%;}
.description h1{ color:#000000;}
.description p{color:#666;font-size: 1em;width: 100%;line-height: 1.5;}
.description button{border:1px  solid #808000;background:#808000;color:#fff;}
.container{min-height: 100%;padding-top:100px;}
.about-section {margin: 2em 0;padding: 1em; position: relative;display: flex;ustify-content: center;align-items: flex-start;flex-wrap: wrap;}
.about-section .profile-pic {
    flex: 0 0 200px; /* Ограничиваем ширину картинки, делаем ее фиксированной */
    margin-right: 2em; /* Отступ справа от картинки */
    text-align: center; /* Центрируем картинку внутри блока */
}

.about-section .profile-pic img {
    width: 100%;
    max-width: 150px; /* Максимальная ширина картинки, чтобы она не была слишком большой */
    height: auto; /* Сохраняем пропорции */
    border-radius: 50%;
    display: block; /* Чтобы margin auto работал */
    margin: 0 auto; /* Центрируем картинку */
}

.about-section .profile-pic .name {
    display: block;
    color: #888;
    margin-top: 0.5em; /* Отступ от картинки */
    text-align: center; /* Центрируем текст */
}

.about-section .des_onas {
    flex: 1; /* Позволяем блоку описания занять оставшееся пространство */
    max-width: 600px; /* Ограничиваем максимальную ширину описания */
    padding-left: 0; /* Убираем левый паддинг, если он есть */
    border-left: none; /* Убираем левую границу, т.к. выравниванием занимаемся через flexbox */
    margin-top: 1em; /* Отступ сверху для мобильных устройств */
}

.about-section .des_onas h3 {
    color: #808000; /* Цвет как в исходном коде */
    margin-top: 0; /* Убираем верхний отступ у заголовка */
}

.about-section .des_onas p {
    line-height: 1.6; /* Уменьшаем межстрочный интервал */
    color: #888;
}
.fonsnow{background-color: rgba(237, 237, 237, 0.75);}
.site-footer{ 
position: relative;  
  bottom: 0;
  left: 0;
  right: 0;
 }
/* Медиа-запросы для адаптивности */
@media (min-width: 768px) {
    .about-section {
        justify-content: center; /* Центрируем на больших экранах */
        align-items: center; /* Центрируем по вертикали */
    }

    .about-section .profile-pic {
        margin-right: 3em; /* Больше отступа на средних экранах */
        flex-basis: 200px; /* Фиксированная ширина */
    }

    .about-section .profile-pic img {
         max-width: 180px; /* Немного увеличиваем картинку */
    }

    .about-section .des_onas {
        padding-left: 2em; /* Добавляем паддинг слева на средних экранах */
        border-left: 4px solid #808000; /* Возвращаем левую границу */
        margin-top: 0; /* Убираем верхний отступ */
    }
	 .featurette-heading {
            font-size: 3rem;
        }
}

@media (max-width: 767px) {
    .about-section {
        flex-direction: column; /* Столбец на мобильных */
        align-items: center; /* Центрируем всё по центру */
        text-align: center; /* Центрируем текст */
    }

    .about-section .profile-pic {
        margin-right: 0; /* Убираем правый отступ */
        margin-bottom: 1em; /* Отступ снизу */
        flex-basis: auto; /* Автоматическая ширина */
    }

    .about-section .profile-pic img {
        max-width: 150px; 
        float: none; /* Убираем float */
    }

    .about-section .profile-pic .name {
        position: static; /* Убираем абсолютное позиционирование */
    }

    .about-section .des_onas {
        border-left: none; /* Убираем границу */
        padding: 0 1em; /* Добавляем горизонтальный паддинг */
        text-align: center; /* Центрируем текст описания */
        max-width: 100%; /* Ширина на весь экран */
    }

    .about-section .des_onas h3 {
        text-align: center; /* Центрируем заголовок */
    }
}

@media only screen and (max-width: 1024px){
.navbar-expand-lg{width:90%;}
.description{top: 30%;width: auto;}
.rw_m{width:98%; margin:0 0 0 1%;}
}
@media (max-width: 812px) {
    .header {width:100% !important; }          
  }
}

@media (max-width: 768px) {
.btn-outline-secondary {
    font-size: clamp(0.875rem, 4vw, 1rem); 
    padding: 0.625rem 0.75rem;    
  }
  .description{
padding:0 0 0 0;
}
 .cards-container {
    grid-template-columns: 1fr;
    margin-top: 80px; /* Уменьшенный отступ сверху */
  }
  .card-wrapper {
    padding: 8px;
  }
  .card-item {
    padding: 12px;
  }
  .card-item-footer {
    margin-top: 10px;
    padding-top: 8px;
  }
  .avatar, .qrcode {
    width: 50px;
    height: 50px;
  }
  .cert-img {
    height: 35px;
  }
  
}
@media (max-width: 576px) {

  .wi {
    height: 35px; /* Еще меньше на маленьких экранах */
  }
}
@media (max-width: 480px) {
	.navbar-expand-lg{width:80%;}
  .btn-outline-secondary {
    font-size: clamp(0.75rem, 3.5vw, 0.875rem);  
  }
  .description{padding:0 0 0 0;width: 90%;margin:0 0 0 5%;}
.description p{font-size: 0.8em; }
.btn-outline-secondary {width: 100%; max-width: 100%;}
.description h2{font-size:1.5rem}
 .cards-container {
    margin-top: 60px; /* Еще меньший отступ сверху */
  }
  .card-item-footer {
    flex-direction: column;
  }
  .avatar, .qrcode {
    margin-bottom: 5px;
  }
  .cert-img {
    height: 30px;
  }
}