@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
} 

body {
  margin: 0;
  padding: 0;
  color: #fff;
  background: #000000;
  font-family: "Play", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 12pt;
}

@font-face {
    font-family: 'Conthrax'; 
    src: url('/fonts/conthraxsemibold.otf') format('truetype');
    font-weight: normal; 
    font-style: normal; 
}

a {
  font-size: 16pt;
  color: #fff;
  transition: 0.5s;
  text-decoration: none;
}

a:hover {
  color: #467932;
}

h2 {
  font-weight: normal;
  font-weight: 600;
  margin-top: 0;
}

input:focus {
  outline: 2px solid #467932;
}

textarea:focus {
  outline: 2px solid #467932;
}

textarea, .form-control-modal, .form-control-massage-modal {
  font-family: "Play", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 11pt;
}

textarea {
  resize: none;
}

p {
  margin: 10px 0px;
}


/* Menu */
.menu {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: #181818;
  box-shadow: 0px 0px 20px #467932;
  z-index: 20;
}

.nav {
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px;
}

.nav-close,
.nav-open {
  display: flex;
  align-items: center;
  font-size: 35px;
  color: #b9e769;
  cursor: pointer;
  display: none;
}

.nav-menu {
  display: flex;
  gap: 20px;
  list-style: none;
}

.nav-menu .nav-link {
  color: #fff;
  font-size: 14pt;
  position: relative;
  font-weight: 700;
}

.nav-menu .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0%;
  height: 2px;
  background: #467932;
  transition: 0.5s;
}

.nav-menu .nav-link:hover::after {
  width: 100%;
}

@media screen and (max-width: 1220px) {
  .nav-menu {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    background: #181818;
    box-shadow: 0px 0px 20px #467932;
    padding: 80px 0px 30px 0px;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .nav-close {
    position: absolute;
    top: 28px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0px 0px 20px #467932;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav-close:hover {
    transform: rotate(90deg);
  }

  .nav-open {
    width: 40px;
    height: 40px;
    box-shadow: 0px 0px 20px #467932;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.show-menu {
  top: 0;
}

.mobileButtons {
  display: none;
}

/* End Menu */

.neon-text {
    color: #fff;
    text-shadow: 0 0 5px #b9e769, 0 0 10px #b9e769, 0 0 15px #b9e769, 0 0 20px #b9e769, 0 0 20px #b9e769;
    animation: glow 1.5s infinite alternate;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 5px #b9e769, 0 0 5px #b9e769, 0 0 10px #b9e769, 0 0 15px #b9e769, 0 0 20px #b9e769;
    }
    100% {
        text-shadow: 0 0 5px #467932, 0 0 5px #467932, 0 0 10px #467932, 0 0 15px #467932, 0 0 20px #467932;
    }
}

/* Modal window */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  display: none;
  padding: 30px;
  overflow-y: auto;
  z-index: 1;
}

.modal-window {
  position: relative;
  max-width: 230px;
  border-radius: 10px;
  margin: auto;
  background: linear-gradient(#2c2c2c, #141414);
  color: #fff;
  padding: 30px;
  text-align: center;
}

@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.modal-window::after, .modal-window::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(var(--angle), transparent 30%, #467932);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 2px;
  border-radius: 10px;
  animation: 3s spin linear infinite;
}

.modal-window::before {
  filter: blur(1.5rem);
  opacity: 0.9;
}

.popup::after, .popup::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(var(--angle), transparent 30%, #467932);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 2px;
  border-radius: 10px;
  animation: 3s spin linear infinite;
}

.popup::before {
  filter: blur(1.5rem);
  opacity: 0.9;
}

@keyframes spin {
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
} 

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

.modal-close-btn {
  font-size: 25px;
  position: absolute;
  top: 10px;
  right: 10px;
  transition: 0.5s;
  cursor: pointer;
}

.modal-close-btn:hover {
  color: #467932;
}

.modalForm {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  display: none;
  padding: 30px;
  overflow-y: auto;
  z-index: 1;
}

.modal-windowForm {
  position: relative;
  max-width: 650px;
  border-radius: 10px;
  margin: auto;
  background: linear-gradient(#2c2c2c, #141414);
  color: #fff;
  padding: 30px;
  text-align: center;
}

.modal-windowForm::after, .modal-windowForm::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(var(--angle), transparent 30%, #467932);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 2px;
  border-radius: 10px;
  animation: 3s spin linear infinite;
}

.modal-windowForm::before {
  filter: blur(1.5rem);
  opacity: 0.9;
}

.modal-titleForm {
  margin-bottom: 30px;
}

.modalForm-close-btn {
  font-size: 25px;
  position: absolute;
  top: 10px;
  right: 10px;
  transition: 0.5s;
  cursor: pointer;
}

.modalForm-close-btn:hover {
  color: #467932;
}
/* End modal window */



.name-h1 {
  font-size: 72pt;
  color: #b9e769;
  text-align: center;
}

.name-h2 {
  font-size: 62pt;
  color: #b9e769;
  text-align: center;
}

.name-h3 {
  font-size: 52pt;
  color: #b9e769;
  text-align: center;
}

.connection-buttons {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.bg-section-main {
  padding: 0px 20px 0px 20px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

.bg-section-welcome {
  background: url('/img/dvg_bg_welcome.webp') no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100vh;
}

.bg-section-main-assem {
  background: url('/img/dvg_bg_assem.webp') no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100vh;
}

.bg-section-main-configurator {
  background: url('/img/dvg_bg_configurator.webp') no-repeat;
  background-size: cover;
  background-position: center center;
}

.bg-section-main-serv {
  background: url('/img/dvg_bg_serv.webp') no-repeat;
  background-size: cover;
  background-position: center center;
}

.block-1 {
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
  pointer-events: none; 
  user-select: none;
}

.block-1-item-1 {
  height: 100vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.block-1-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.block-1-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  gap: 20px;
}

.block-1-assem {
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.block-1-item-assem {
  text-align: center;
  margin: 0 auto;
  max-width: 1200px;
}

.block-1-item-config {
  text-align: center;
  margin: 0 auto;
  max-width: 1200px;
}

.pc-block-1-bg {
  background: #141414;
  padding: 20px;
}

.pc-block-1-main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 30% 70%;
  align-items: center;
  justify-items: center;
}

.pc-block-2-bg {
  background: #1e1e1e;
  padding: 20px;
}

.pc-block-2-main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 70% 30%;
  align-items: center;
  justify-items: center;
}

.pc-block-3-bg {
  background: #141414;
  padding: 20px;
}

.pc-block-3-main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 30% 70%;
  align-items: center;
  justify-items: center;
}

.pc-block-4-bg {
  background: #1e1e1e;
  padding: 20px;
}

.pc-block-4-main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 70% 30%;
  align-items: center;
  justify-items: center;
}

.pc-serv-1-bg {
  background: #141414;
  padding: 20px;
}

.pc-serv-1-main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 30% 70%;
  align-items: center;
  justify-items: center;
}

.pc-serv-2-bg {
  background: #1e1e1e;
  padding: 20px;
}

.pc-serv-2-main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 70% 30%;
  align-items: center;
  justify-items: center;
}

.pc-serv-3-bg {
  background: #141414;
  padding: 20px;
}

.pc-serv-3-main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 30% 70%;
  align-items: center;
  justify-items: center;
}

.pc-serv-4-bg {
  background: #1e1e1e;
  padding: 20px;
}

.pc-serv-4-main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 70% 30%;
  align-items: center;
  justify-items: center;
}


.pc-welcome {
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-items: center;
}

.welcome-title {
  font-size: 40pt; 
  font-weight: 800; 
  color: #b9e769;
}

.pc-block-img{
  padding: 10px;
}

.pc-block-content {
  padding: 10px;
  min-width: 300px;
}

.pc-title-size {
  font-size: 35px;
}

.pc-text-size {
  font-size: 20px; 
  color: #fff;
}

.pc-text-size-welcome {
  font-size: 20px; 
  color: #fff;
}

#works {
  scroll-margin-top: 70px;
}

#config {
  scroll-margin-top: 70px;
}

#model, #service, #about {
  scroll-margin-top: 70px;
}

#whyus, #consultation, #contacts {
  scroll-margin-top: 90px;
}

.slogan {
  display: flex;
  font-size: 24px;
  justify-content: center;
  align-items: center;
}

.block-2 {
  max-width: 1300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 0 auto;
}

.block-1-item-2 {
  text-align: center;
}

.block-2-item {
  background: #141414;
  border-radius: 10px;
  min-height: 650px;
  width: 350px;
  padding: 15px;
  border: 1px solid #353535;
}

.bg-section {
  background: #1e1e1e;
  padding: 0px 20px 20px 20px;
}

.bg-section-service {
  background: url('/img/service_bg.webp') no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 0px 20px;
}

.bg-section-about {
  background: url('/img/about_bg.webp') no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 0px 20px;
}

.bg-section-works {
  background: #141414;
  padding: 0px 20px;
}

.bg-section-kaspi {
  background: #141414;
  padding: 0px 20px;
}

.bg-section-contacts {
  background: #141414;
  padding: 0px 20px;
}

.bg-call-form {
  background: #1e1e1e;
}

.kaspi-body {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
  padding-bottom: 30px;
}

.kaspi-img img {
  width: 100%;
  border-radius: 10px;
}

.text-prew {
  font-size: 26pt;
  color: #fff;
  text-align: center;
  padding: 0px 20px 0px 20px;
}

.text-about {
  color: #fff;
  line-height: 30px;
  font-size: 12pt;
  padding: 20px 0px 0px 30px;
}

.pc-var {
  background: #141414;
  padding: 15px 0px;
  margin: 0 auto;
  text-align: center;
}

.pc-var2 {
  padding: 15px 0px;
  margin: 0 auto;
  text-align: center;
}

.pc-name {
  display: inline-block;
  max-width: 1200px;
  font-size: 25px;
  padding: 10px;
  text-wrap: balance;
}

.about-table {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
}


.about-col-2 {
  min-height: 300px;
  background: #141414;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #353535;
}

.serve-table {
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
}

.serve-col {
  width: 280px;
  min-height: 300px;
  background: #141414;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid #353535;
}

.int-table {
  display: grid;
  grid-template-columns: 35px 1fr;
  align-items: center;
  gap: 10px;
  padding: 20px 0px;
}

.icon-1 {
  background: url('/img/cpu.png') no-repeat;
  width: 32px;
  aspect-ratio: 1;
}

.icon-2 {
  background: url('/img/ram.png') no-repeat;
  width: 32px;
  aspect-ratio: 1;
}

.icon-3 {
  background: url('/img/ssd.png') no-repeat;
  width: 32px;
  aspect-ratio: 1;
}

.icon-4 {
  background: url('/img/vga.png') no-repeat;
  width: 32px;
  aspect-ratio: 1;
}

.formBtn {
  border: 1px solid #b9e769;
  background: transparent;
  border-radius: 10px;
  font-size: 20px;
  font-family: "Play", Tahoma, Geneva, Verdana, sans-serif;
  padding: 10px 15px;
  color: #fff;
  cursor: pointer;
  transition: 0.5s;
}

.formBtn:hover {
  box-shadow: 0px 0px 15px #b9e769;
  background: #467932;
  transform: scale(1.1);
}

.modelBtn {
  border: 1px solid #b9e769;
  background: transparent;
  border-radius: 10px;
  font-size: 20px;
  padding: 10px 15px;
  color: #fff;
  cursor: pointer;
  transition: 0.5s;
}

.modelBtn:hover {
  box-shadow: 0px 0px 15px #b9e769;
  background: #467932;
  color: #fff;
  transform: scale(1.1);
}

.container {
  max-width: 1600px;
  margin: 0 auto;
}

.container2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contacts-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1000px;
  align-items: center;
  margin: 0 auto;
  gap: 10px;
  padding-bottom: 20px;
}

.google-map iframe {
  border-radius: 10px; 
  border: 0px;
  width: 100% !important;
} 

.contacts-date {
  padding: 20px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  font-weight: 500;
  font-size: 20px;
}

.kaspi-list {
  padding: 10px 25px;
}

.kaspi-list>li {
  margin-bottom: 5px;
}

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

.call-button {
  display: block;
  position: fixed;
  width: 65px;
  height: 65px;
  bottom: 100px;
  right: 20px;
  transition: all .7s ease-in-out;
  z-index: 3;
  cursor: pointer;
}

.call-button:hover {
  transform: scale(1.2);
}

.const-text {
  text-align: center;
  font-size: 12pt;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 5px;
}


/* Button Up */
.upbtn {
  z-index: 80;
  width: 60px;
  height: 60px;
  color: #fff;
  position: fixed;
  bottom: 190px;
  right: 20px;
  cursor: pointer;
  border: 3px solid #b9e769;
  border-radius: 50%;
  transform: scale(0);
  transition: all .7s ease-in-out;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #467932;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ5MS44NTggNDkxLjg1OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDkxLjg1OCA0OTEuODU4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQ5MS44NTgsNDQyLjQ2MWMwLDEzLjkzMS0xMS4yOTMsMjUuMjI0LTI1LjIyNCwyNS4yMjRMMjQ1LjkzLDM3My4wOTdMMjUuMjI0LDQ2Ny42ODYgICAgQzExLjI5Miw0NjcuNjg2LDAsNDU2LjM5MiwwLDQ0Mi40NjFMMjI3LjAxMSwzMi41OGMwLDAsMTguOTE4LTE4LjkxOCwzNy44MzQsMEMyODMuNzY0LDUxLjQ5OSw0OTEuODU4LDQ0Mi40NjEsNDkxLjg1OCw0NDIuNDYxeiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)
}

.upbtn:hover {
  transform: scale(1.2) !important;
}

/* End button up */

/* Slider */
.slide-wrapper {
  max-width: 1024px;
  margin: 0 auto;
  padding: 20px 0px 50px 0px;
}

.slider {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
  position: relative;
}

.slide img {
  width: 100%;
  vertical-align: middle;
}

.caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  font-size: 1.5em;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
}

.navigation .prev, .navigation .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border: none;
}

.navigation .prev { left: 10px; }
.navigation .next { right: 10px; }

.indicators {
  text-align: center;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.indicators .dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: inline-block;
}

.indicators .dot.active {
  background-color: #fff;
}
/* End slider */

/* Telegram form */
.form {
  padding: 20px;
  min-width: 200px;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  color: #000000;
}

.form2 {
  padding: 20px;
  min-width: 200px;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  color: #000000;
}

.form-body {
  display: grid;
  grid-template-columns: 360px 360px 360px;
  justify-items: center;
  justify-content: center;
}

.legend {
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  padding-bottom: 10px;
  color: #fff;
}

.form-control {
  background-color: #2d2d2d;
  border-radius: 5px;
  border: #444 1px solid;
  height: 30px;
  width: 280px;
  color: #ddd;
  padding: 0px 5px 0px 5px;
}

.form-control-massage {
  background-color: #2d2d2d;
  border-radius: 5px;
  border: #444 1px solid;
  height: 30px;
  width: 280px;
  color: #ddd;
  padding: 0px 5px 0px 5px;
}

.form-control-modal {
  background-color: #2d2d2d;
  border-radius: 5px;
  border: #444 1px solid;
  height: 30px;
  width: 100%;
  color: #ddd;
  padding: 0px 5px 0px 5px;
}

.form-control-massage-modal {
  background-color: #2d2d2d;
  border-radius: 5px;
  border: #444 1px solid;
  min-height: 100px;
  width: 100%;
  color: #ddd;
  padding: 0px 5px 0px 5px;
  resize: none;
}

.form-group {
  color: #fff;
  font-weight: 500;
  padding-bottom: 15px;
}

.form__send-result {
  text-align: center;
  margin: 0 auto;
  max-width: 600px;
  padding-top: 15px;
}

.form__send-result-modal {
  text-align: center;
  margin: 0 auto;
  max-width: 220px;
  padding-top: 15px;
}

.btn {
  border: 1px solid #b9e769;
  background: transparent;
  border-radius: 10px;
  font-family: "Play", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 20px;
  padding: 10px 15px;
  color: #fff;
  cursor: pointer;
  transition: 0.5s;
}

.btn:hover {
  box-shadow: 0px 0px 15px #b9e769;
  background: #467932;
}

.btn-position {
  text-align: center;
  padding-top: 20px;
}

.btn-position-modal {
  text-align: center;
  padding-top: 20px;
}

.btn{
  margin-bottom: 15px;
} 
/* End telegram form */

/* Popup */
  #overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
  }

  #popup {
    max-width: 500px;
    max-height: 250px;
    background: linear-gradient(#2c2c2c, #141414);
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    text-align: center;
    position: relative;
  }

  #close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 28px;
    border: none;
    background: none;
    color: #fff;
    transition: 0.5s;
  }
  #close-btn:hover {
    color: #467932;
  }
/* End popup */


/* Configurator Styles */
.config-container {
  max-width: 1200px;
  margin: auto;
  background: #1e1e1e;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Мобильная адаптация контейнера конфигуратора: на всю ширину, как шапка */
@media (max-width: 750px) {
  .config-container {
    max-width: 100%;
    margin: 0;          /* убираем auto-отступы, чтобы не было "узкой колонки" */
    padding: 12px;      /* компактнее внутренние поля */
    border-radius: 10px;
  }
}

.config-names {
  text-align: center;
  margin: 10px 0px 10px 0px;
}

.checkout-name {
  color: #b9e769;
  text-align: center;
  background: #1e1e1e;
  border-radius: 10px;
  padding: 20px;
  font-size: 30pt;
}

.component {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center;
}

.component-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 10px;
}

.component-body {
  max-width: 600px;
  margin: 0 auto;
}

select {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 10px;
  color: #fff;
  background: #141414;
  border: 1px solid #353535;
}

.result {
  text-align: center;
  margin: 40px 0px 40px 0px;
  font-size: 24px;
}

button {
  background-color: #4CAF50;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #45a049;
}

.specs {
  margin-top: 10px;
  padding-left: 10px;
  list-style-type: none;
}
.specs li {
  margin-bottom: 5px;
}

.card {
  width: 550px;
  border: 1px solid #353535;
  border-radius: 10px;
  padding: 10px;
}

.modal-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-pc.hidden {
  display: none;
}

.modal-pc-content {
  background: linear-gradient(#2c2c2c, #141414);
  padding: 20px;
  margin: 20px;
  border-radius: 10px;
  text-align: center;
  position: relative;
}

.modal-pc-content::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(var(--angle), transparent 30%, #467932);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 2px;
  border-radius: 10px;
  animation: 3s spin linear infinite;
}

.modal-pc-content::before {
  filter: blur(1.5rem);
  opacity: 0.9;
}

.modal-pc-content h2 {
  margin: 0 0 10px;
}

.modal-pc-content ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.modal-pc-content ul li {
  padding: 10px;
  margin: 5px 0;
  background-color: #383838;
  border: 1px solid #353535;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  color: #45a049;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.modal-pc-content ul li:hover {
  background-color: #467932;
  color: #fff;
}

.modal-pc-content button {
  border: 1px solid #b9e769;
  background: transparent;
  border-radius: 10px;
  font-size: 18px;
  padding: 5px 15px;
  color: #fff;
  cursor: pointer;
  transition: 0.5s;
  margin-top: 10px;
}

.modal-pc-content button:hover {
  box-shadow: 0px 0px 15px #b9e769;
  background: #467932;
}

.error-pc {
  color: #fff;
  font-weight: 700;
}

.error-pcred {
  color: #ff0000;
  font-weight: 700;
}

.checkout {
  padding: 20px;
  max-width: 1000px;
  margin: auto;
  margin-top: 90px;
  border-radius: 10px;
}

.checkout-bg {
  background: url('/img/checkout_bg.webp') no-repeat;
  background-size: cover;
  background-position: center center;
}

.checkout-body {
  background: #1e1e1e;
  border-radius: 10px 10px 0px 0px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  justify-content: center;
  justify-items: center;
  margin-top: 10px;
  padding: 20px;
}

.checkout-body-form {
  background: #1e1e1e;
  border-radius: 0px 0px 10px 10px;
  padding: 20px;
}

.pc-list-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pc-list-conteiner {
  margin: 20px 0px 40px 0px;
}

.check-button {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 30px 0px 30px 0px;
}

.check-form {
  display: grid;
  grid-template-columns: 370px;
  gap: 20px;
  justify-content: center;
  justify-items: center;
  margin: 20px 0px 20px 0px;
  font-weight: 500;
  font-size: 20px;
}

.check-form-2 {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  justify-items: center;
  margin: 20px 0px 20px 0px;
  font-weight: 500;
  font-size: 20px;
}

.price-total {
  display: flex;
  justify-content: center;
  margin: 20px 0px 50px 0px;
  font-size: 24px;
}

.modal-error {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
  z-index: 9999;
}

.modal-content-error {
  background: linear-gradient(#2c2c2c, #141414);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #fff;
  position: relative;
}

.modal-content-error::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(var(--angle), transparent 30%, #467932);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 2px;
  border-radius: 10px;
  animation: 3s spin linear infinite;
}

.modal-content-error::before {
  filter: blur(1.5rem);
  opacity: 0.9;
}

.modal-error button {
  border: 1px solid #b9e769;
  background: transparent;
  border-radius: 10px;
  font-size: 18px;
  padding: 5px 15px;
  color: #fff;
  cursor: pointer;
  transition: 0.5s;
  margin-top: 10px;
}

.modal-error button:hover {
  box-shadow: 0px 0px 15px #b9e769;
  background: #467932;
}

.modal-error.hidden {
  visibility: hidden;
  opacity: 0;
}

.modal-error.visible {
  visibility: visible;
  opacity: 1;
}

.success {
  background: url('/img/success_bg.webp') no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  align-content: center;
  overflow: auto;
}

.success-content {
  max-width: 800px;
  background: #141414;
  border-radius: 10px;
  margin: auto;
  padding: 20px;
  box-shadow: 0px 0px 20px #467932;
}

.custom-check {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-check+label {
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.custom-check+label::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #adb5bd;
  border-radius: 0.25em;
  margin-right: 0.25em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

.custom-check:checked+label::before {
  border-color: #45a049;
  background-color: #45a049;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

/* стили при наведении курсора на checkbox */
.custom-check:not(:disabled):not(:checked)+label:hover::before {
  border-color: #45a049;
}
/* стили для активного состояния чекбокса (при нажатии на него) */
.custom-check:not(:disabled):active+label::before {
  background-color: #285f2b;
  border-color: #285f2b;
}
/* стили для чекбокса, находящегося в фокусе */
.custom-check:focus+label::before {
  box-shadow: 0 0 0 0.2rem rgba(79, 182, 32, 0.25);
}
/* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
.custom-check:focus:not(:checked)+label::before {
  border-color: #285f2b;
}
/* стили для чекбокса, находящегося в состоянии disabled */
.custom-check:disabled+label::before {
  background-color: #285f2b;
}

.custom-radio {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-radio+label {
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.custom-radio+label::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #adb5bd;
  border-radius: 0.25em;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

.custom-radio:checked+label::before {
  border-color: #45a049;
  background-color: #45a049;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

/* стили при наведении курсора на checkbox */
.custom-radio:not(:disabled):not(:checked)+label:hover::before {
  border-color: #45a049;
}

/* стили для активного состояния чекбокса (при нажатии на него) */
.custom-radio:not(:disabled):active+label::before {
  background-color: #285f2b;
  border-color: #285f2b;
}

/* стили для чекбокса, находящегося в фокусе */
.custom-radio:focus+label::before {
  box-shadow: 0 0 0 0.2rem rgba(79, 182, 32, 0.25);
}

/* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
.custom-radio:focus:not(:checked)+label::before {
  border-color: #285f2b;
}

/* стили для чекбокса, находящегося в состоянии disabled */
.custom-radio:disabled+label::before {
  background-color: #285f2b;
}

/* Стили для модального окна новостей */
.modal-window-news {
  position: relative;
  max-width: auto;
  border-radius: 10px;
  margin: auto;
  background: linear-gradient(#2c2c2c, #141414);
  color: #fff;
  padding: 30px;
  text-align: center;
  box-shadow: 0 0 30px #00000099;
}

.modal-window-news::after, .modal-window-news::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(var(--angle), transparent 30%, #467932);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 2px;
  border-radius: 10px;
  animation: 3s spin linear infinite;
}

.modal-window-news::before {
  filter: blur(1.5rem);
  opacity: 0.9;
}

.modal-close-btn-news {
  font-size: 25px;
  position: absolute;
  top: 10px;
  right: 10px;
  transition: 0.5s;
  cursor: pointer;
}

.modal-close-btn-news:hover {
  color: #467932;
}

.scroll-down-arrow {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.5s;
  opacity: 1;
  animation: arrow-bounce 1.5s infinite;
}

@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0);}
  50% { transform: translateY(10px);}
}

.lang-btn {
  background: #b9e769;
  color: #000;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s;
}

.lang-btn:hover {
  background: #688339;
}

.animate-col {
  opacity: 0;
  transform: translateY(60px) scale(0.95);
  transition: opacity 0.7s cubic-bezier(.77,0,.18,1), transform 0.7s cubic-bezier(.77,0,.18,1);
}

.animate-col.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Gallery Styles */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 90%; 
  margin: 0 auto;
  gap: 20px;
}

.gallery a {
  width: 8rem;
  height: 8rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

.gallery a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery a:hover img {
  transform: scale(1.2);
}

.gallery-contain {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 50px;
}

/* Mobile adaptive */
@media screen and (max-width:1360px) {
  .block-1 {
    grid-template-columns: 1fr;
  }

  .serve-col {
    width: 450px;

  }

  .name-h1 {
    font-size: 45pt;
  }

  .name-h2 {
    font-size: 45pt;
  }

  .text-prew {
    font-size: 20pt;
  }
}

@media screen and (max-width:1100px) {
  .block-2-item {
    width: 800px;
  }

  .serve-col {
    width: 800px;

  }

  .kaspi-body {
    grid-template-columns: 1fr;
  }

  .about-table {
    grid-template-columns: 1fr;
  }

  .contacts-table {
    grid-template-columns: 1fr;
  }

  .pc-block-1-main {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pc-block-2-main {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pc-block-3-main {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pc-block-4-main {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pc-serv-1-main {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pc-serv-2-main {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pc-serv-3-main {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pc-serv-4-main {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .contacts-date {
    max-width: 900px;
  }

  .form {
    max-width: 900px;
  }

  .form-body {
    grid-template-columns: 1fr;
  }

  .pc-welcome {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width:1220px) {
  .mobileButtons {
    display: flex;
    gap: 10px;
    padding-top: 5px;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width:740px) {
  .pc-name {
    font-size: 20px;
  }

  .text-prew {
    font-size: 20px;
  }

  .text-about {
    font-size: 16px;
  }

  .imaginer {
    width: 100%;
  }

  .serve-table {
    grid-template-columns: 1fr;
  }

  .block-1 {
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .block-2 {
    grid-template-columns: 1fr;
  }

  .block-1-item-1 {
    padding-bottom: 20px;
  }

  .name-h1 {
    text-align: center;
    font-size: 40px;
    padding: 0px 20px 0px 20px;
  }

  .name-h2 {
    text-align: center;
    font-size: 40px;
    padding: 0px 20px 0px 20px;
  }

  .name-h3 {
    text-align: center;
    font-size: 30px;
    padding: 0px 20px 0px 20px;
  }

  .about-table {
    grid-template-columns: 1fr;
  }

  .welcome-title {
    text-align: center;
    font-size: 30pt;
  }

  .checkout-body {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width:490px) {
  .mobileButtons {
    display: flex;
    gap: 10px;
    padding-top: 5px;
    justify-content: center;
    align-items: center;
  }

  .block-1 {
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .block-2 {
    grid-template-columns: 1fr;
  }

  .block-1-item-1 {
    padding-bottom: 20px;
  }

  .name-h1 {
    text-align: center;
  }

  .name-h2 {
    text-align: center;
  }

  .form-control-2 {
    width: 250px;
  }

  .form-control-massage-2 {
    width: 250px;
  }

  .pc-title-size {
    font-size: 30px;
  }
  
  .pc-text-size {
    font-size: 20px; 
  }

  .slogan {
    font-size: 20px;
    padding: 0px 10px 0px 10px;
  }

}
/* End mobile adaptive */