* {
  margin: 0;
  font-family: 'Bergen Sans';
}

body::-webkit-scrollbar {
  width: 8px;
  /* ширина scrollbar */
}

body::-webkit-scrollbar-track {
  background: #282828;
  /* цвет дорожки */
}

body::-webkit-scrollbar-thumb {
  background-color: #F26210;
  /* цвет плашки */
  border-radius: 5px;
  /* закругления плашки */
  /* border: 1px solid orange;  padding вокруг плашки */
}

body {
  margin-top: 80px;
}
#welcome, #slider, #job, #who, #slider, #reviews, #contactus {
  scroll-margin-top: 80px; /* Высота стандартного заголовка или желаемый отступ */
}

/* Стили для кнопки */
.glare-button {
  border: none;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  display: block;
  border-radius: 15px;
  padding: 5px 20px;
  background: #f26210;
  color: #fff;
  font-weight: 800;
  position: relative;
  overflow: hidden;
  width: 320px;
  font-size: 20px;
  padding: 14px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Стили для создания блика на кнопке */
.glare-button:before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(120deg,
      rgba(255, 255, 255, 0) 30%,
      /* Прозрачность начала блика */
      rgba(255, 255, 255, 0.5),
      /* Цвет блика */
      rgba(255, 255, 255, 0) 70%
      /* Прозрачность конца блика */
    );
  top: 0;
  left: -100px;
  animation: shine 4s infinite linear;
}

/* Ключевые кадры для анимации блика */
@keyframes shine {
  0% {
    left: -100px;
    /* Начальная позиция блика (левая сторона кнопки) */
  }

  20% {
    left: 100%;
    /* Позиция блика в конце (правая сторона кнопки) */
  }

  100% {
    left: 100%;
    /* Завершение анимации */
  }
}

.navbar {
  background: #ffffff;
  position: fixed;
  width: 100vw;
  box-shadow: 4px 3px 15px -3px rgba(80, 110, 133, 0.5);
  z-index: 999;
  top: 0;
}

.ham4 {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  user-select: none;
}

.ham4 path {
  fill: none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: #353535;
  stroke-width: 5.5;
  stroke-linecap: round;
}

.ham4.active {
  transform: rotate(45deg);
}

.ham4 .top {
  stroke-dasharray: 40 121;
}

.ham4 .bottom {
  stroke-dasharray: 40 121;
}

.ham4.active .top {
  stroke-dashoffset: -68px;
}

.ham4.active .bottom {
  stroke-dashoffset: -68px;
}

#btn-menu-mob {
  position: relative;
  z-index: 99999;
}

.btn-wrap {
  padding: 5px;
  border: 1px solid #77777733;
  width: max-content;
  border-radius: 20px;
}

.offcanvas-end {
  width: 100vw;
  justify-content: center;
  align-items: center;
}

a.nav-mob {
  color: #353535;
  text-decoration: none;
  font-size: 26px;
  font-weight: 800;
}

#block-forms span {
  font-size: 22px;
  max-width: 635px;
  text-align: center;
  line-height: 22px;
}

.navbar-brand img {
  height: 60px;
}

.navbar-brand {
  color: #353535 !important;
  font-size: 27px;
  font-weight: bolder;
  margin-right: 0px;
}

.nav-link {
  color: #353535;
  font-weight: 800;
  font-size: 20px;
}

.nav-link:hover {
  color: #f26210;
}

#prim-1,
#prim-2,
#prim-3 {
  height: -webkit-fill-available;
  width: -webkit-fill-available;
  background-size: cover;
  border-radius: 15px;
}

#welcome {
  background: #f5f9f7;
}

#welcome img {
  width: 100%; /* Fallback для старых браузеров */
  width: -moz-available; /* Firefox */
  width: -webkit-fill-available; /* Chrome, Safari, Edge */
  width: fill-available;
  box-sizing: border-box; /* Важно! */
  border-radius: 15px;
}

.bprl {
  border-radius: 15px 0 0 15px !important;
}
.bprr {
  border-radius: 0 15px 15px 0 !important;
}
#job {
  background-color: #f5f9f7;
}

.my-border {
  border-radius: 15px;
  overflow: hidden;
}

#job img {
  object-fit: cover;
  border-radius: 15px;
}

#materials-gallery {
  background-color: #f5f9f7;
}

#materials-gallery h2 {
  font-size: 20px;
  text-decoration: overline;
}

#materials-gallery a:hover {
  color: #fff;
}

.galery-scales {
  width: 100%; /* Fallback для старых браузеров */
  width: -moz-available; /* Firefox */
  width: -webkit-fill-available; /* Chrome, Safari, Edge */
  width: fill-available;
  box-sizing: border-box; /* Важно! */
  height: 350px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 4px 3px 15px -3px rgba(80, 110, 133, 0.5);
  cursor: pointer;
}

.title-desk {
  font-size: 22px;
  max-width: 635px;
  text-align: center;
  line-height: 22px;
  display: inline-block;
}

#who img {
  height: 70px;
}

#who h2 {
  font-size: 22px;
}

#who p {
  color: #000000c7;
  line-height: 17px;
}

#reviews {
  background-color: #f5f9f7;
}

#reviews img {
  height: 120px;
  width: 120px;
  border-radius: 50%;
}

#reviews h2 {
  font-size: 22px;
  margin-bottom: 0px;
}

#reviews h3 {
  font-size: 15px;
  color: #666;
}

#reviews h3 {
  font-size: 17px;
  text-align: center;
}

#reviews p {
  text-align: center;
  line-height: 19px;
}

#contant img {
  width: 60px;
  height: 40px;
}
.btn-primary {
  background: #f26210!important;
}
#contant a {
  color: #282828;
  width: auto;
  font-size: 22px;
  text-decoration: none;
  padding: 0;
}

#soc-img a {
  background: #f26210;
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  border-radius: 15px;
  margin: 0 8px;
}

#soc-img a img {
  height: 25px;
}

#bottom-form {
  border: 1px solid #ced4da;
  padding: 22px;
  border-radius: 15px;
}

footer {
  background: #353535;
  color: #fff;
  text-align: center;
  padding: 15px;
}

#slider img,
.swiper-wrapper,
.swiper {
  border-radius: 15px;
}

.swiper-button-next,
.swiper-button-prev {
  color: #f26210;
}

.swiper-pagination-bullet-active {
  background: #f26210;
}

.swiper {
  width: 70%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.autoplay-progress {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
  background: #474747;
  border-radius: 50%;
}

.autoplay-progress svg {
  --progress: 0;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 10;
  width: 100%;
  height: 100%;
  stroke-width: 4px;
  stroke: #f26210;
  fill: none;
  stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
  stroke-dasharray: 125.6;
  transform: rotate(-90deg);
}

@media screen and (max-width: 991px) {
  #job img {
    width: -webkit-fill-available;
  }

  .swiper {
    width: 100%;
    height: 100%;
  }
}