* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Montserrat", sans-serif;
   scroll-behavior: smooth;
   line-height: 1.4;
}

a {
   text-decoration: none;
}

.btn {
   border: 2px solid #BC2539;
   max-width: 192px;
   width: 100%;
   height: 44px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: 700;
   border-radius: 8px;
   transition: .4s;
   padding: 16px 0;
   cursor: pointer;
}

.btn:hover {
   background-color: #BC2539;
   color: white;
}

/* Оборудование для маркировки товаров  */

.hidden__mobile {
   display: block;
}

.hero {
   text-align: center;
   background: #F6F6F6;
}

.hero .container {
   max-width: 1920px;
   margin: auto;
   padding: 82px 6%;
}

.hero .container h1 {
   font-size: 48px;
}

.hero .container h2 {
   font-size: 36px;
   font-weight: 500;
   margin-bottom: 36px;
}

.hero .container .bio {
   max-width: 900px;
   width: 100%;
   margin: auto;
   font-size: 24px;
   font-weight: 500;
   margin-bottom: 32px;
}

.hero .container h3 {
   font-size: 36px;
   margin-bottom: 26px;
}

.hero .container .cards {
   display: flex;
   justify-content: center;
   gap: 38px;
   flex-wrap: wrap;
   margin: 42px auto 72px;
}

.hero .container .cards .card {
   max-width: 360px;
   width: 100%;
   height: 450px;
   color: black;
   box-shadow: 0px 4px 16px 4px #00000020;
   border-radius: 20px;
   padding: 36px 12px 40px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   transition: .4s all;
}

.hero .container .cards .card:hover {
   color: #BC2539;
   box-shadow: 0px 4px 16px 4px #00000040;
}

.hero .container .cards .card .header,
.hero .container .cards .prices {
   font-size: 24px;
   font-weight: 700;
   line-height: 1.1;
}

.hero .container .cards .card .examples {
   font-size: 18px;
   font-weight: 500;
}

.hero .container .btn {
   margin: auto;
}

/* Базовые онлайн-кассы с фискальным накопителем  */

.second {
   text-align: center;
   background: #F7F1F1;
}

.second .container {
   max-width: 1920px;
   margin: auto;
   padding: 72px 4%;
}

.second .container h1 {
   margin-top: 42px;
   color: #BC2539;
   font-size: 48px;
   margin-bottom: 28px;
}

.second .container h2 {
   font-size: 36px;
   font-weight: 500;
   margin-bottom: 32px;
}

.second .container p {
   font-size: 24px;
   font-weight: 500;
}

.second .container .cards {
   display: flex;
   flex-direction: column;
   gap: 48px;
   text-align: left;
   margin: 60px auto;
   max-width: 1245px;
   width: 100%;
}

.second .container .cards .card {
   border-radius: 12px;
   background-color: white;
   padding: 44px 24px;
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
   gap: 28px;
}

.second .container .cards .card .some__text {
   display: flex;
   flex-direction: column;
   gap: 28px;
   max-width: 500px;
   width: 100%;
}

.second .container .cards .card .some__text .header,
.second .container .cards .card .some__text .prices {
   font-size: 28px;
   font-weight: 700;
}

.second .container .cards .card .some__text .bio {
   font-size: 24px;
   font-weight: 500;
}

.second .container .cards .image {
   max-width: 460px;
   min-width: 260px;
   width: 100%;
   object-fit: contain;
}

.second .container .btn {
   margin-top: 36px;
   margin: 0px;
}

/* Сканеры штрихкода */

.third {
   text-align: center;
   background: #F6F6F6;
}

.third .container {
   max-width: 1920px;
   margin: auto;
   padding: 72px 4%;
}

.third .container h1 {
   margin-top: 42px;
   color: #BC2539;
   font-size: 48px;
   margin-bottom: 28px;
}

.third .container h2 {
   font-size: 36px;
   font-weight: 500;
   margin-bottom: 32px;
}

.third .container p {
   font-size: 24px;
   font-weight: 500;
}

.third .container .cards {
   display: flex;
   flex-direction: column;
   gap: 48px;
   text-align: left;
   margin: 60px auto;
   max-width: 1245px;
   width: 100%;
}

.third .container .cards .card {
   border-radius: 12px;
   background-color: white;
   padding: 44px 24px;
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
   gap: 28px;
}

.third .container .cards .card .some__text {
   display: flex;
   flex-direction: column;
   gap: 28px;
   max-width: 500px;
   width: 100%;
}

.third .container .cards .card .some__text .header,
.third .container .cards .card .some__text .prices {
   font-size: 28px;
   font-weight: 700;
}

.third .container .cards .card .some__text .bio {
   font-size: 24px;
   font-weight: 500;
}

.third .container .cards .image {
   max-width: 460px;
   min-width: 260px;
   width: 100%;
   object-fit: contain;
}

.third .container .btn {
   margin-top: 36px;
   margin: 0px;
}

/* popups */

.custom-radio {
   display: flex;
   align-items: center;
   position: relative;
   padding-left: 48px;
   cursor: pointer;
   font-size: 24px;
   font-weight: 500;
   user-select: none;
}



.custom-radio input[type="checkbox"] {
   position: absolute;
   opacity: 0;
   cursor: pointer;
}

.custom-radio input[type="radio"] {
   position: absolute;
   opacity: 0;
   cursor: pointer;
}




.custom-radio .checkmark {
   position: absolute;
   left: 0;
   top: 0;
   height: 36px;
   width: 36px;
   background-color: #eee;
   border-radius: 50%;
   border: 2px solid #ccc;
   transition: all 0.3s ease;
}

.option label{
   margin-bottom: 24px;
}

.custom-radio input:checked~.checkmark {
   background-color: #BC2539;
   /* Красный фон */
   border-color: #BC2539;
}

.custom-radio .checkmark::after {
   content: "";
   position: absolute;
   display: none;
}

.custom-radio input:checked~.checkmark::after {
   display: block;
}

.custom-radio .checkmark::after {
   top: 8px;
   left: 8px;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: white;
}


.overlay {
   position: fixed;
   inset: 0;
   z-index: 10000;
   padding: 32px 4%;
   display: none;
   justify-content: center;
   align-items: start;
   /* важно: чтобы box смещался вверх и позволял скролл */
   backdrop-filter: blur(24px);
   overflow-y: auto;
   /* здесь скроллим overlay */
}

.overlay .box {
   padding: 70px 140px;
   position: relative;
   max-width: 1212px;
   width: 100%;
   background: #F7F7F7;
   border-radius: 12px;
   box-shadow: 0px 4px 16px 4px #00000060;
   display: flex;
   flex-direction: column;
}


.overlay .box .container {
   width: 100%;
   box-sizing: border-box;
}

.overlay .fa-xmark {
   position: absolute;
   right: 36px;
   top: 36px;
   cursor: pointer;
}

.overlay .box h1 {
   text-align: center;
   font-size: 24px;
   line-height: 1.5;
}

.overlay .box h2 {
   text-align: center;
   font-size: 24px;
   line-height: 1.5;
}

.overlay form .input {
   height: 60px;
   padding: 12px;
   width: 100%;
   border: 1px solid #B3B3B3;
   margin-bottom: 11px;
   margin-top: 7px;
   font-size: 17px;
   border-radius: 8px;
   box-shadow: 0px 4px 16px 4px #00000020;
}

.label {
   font-size: 24px;
   font-weight: 500;
}

.radio-error-message {
   margin-top: 42px;
}

.option {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 12px 32px;
}



.option input[type="checkbox"] {
   min-width: 36px;
   min-height: 36px;
}


.option input[type="radio"] {
   min-width: 36px;
   min-height: 36px;
}




.option label {
   font-size: 24px;
   font-weight: 500;
}

.extra__options {
   display: flex;
   gap: 12px
}

.other-input {
   flex-grow: 1;
   margin-left: 26px;
   margin-top: 5px;
   min-width: 150px;
   /* display: none; */
}

.other-input input {
   padding: 8px 12px;
   border: 1px solid #ccc;
   border-radius: 6px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   font-size: 14px;
   width: 200px;
   font-size: 24px;
}

.other-input input::placeholder {
   font-size: 24px;
}

.overlay input.btn {
   padding: 12px;
   margin-top: 24px;
   height: auto;
}

.error-message {
   color: tomato;
   font-size: 14px;
   margin-top: 4px;
   display: block;
   min-height: 18px;
}

.overlay .fa-xmark {
   width: 20px;
}


/* responsives */
@media (max-width: 1700px) {
   .btn {
      font-size: 14px;
      max-width: 160px;
      height: 36px;
   }

   .hero .container {
      padding: 68px 6%;
   }

   .hero .container h1,
   .second .container h1,
   .third .container h1 {
      font-size: 40px;
   }

   .hero .container h2,
   .hero .container h3,
   .second .container h2,
   .third .container h2 {
      font-size: 30px;
   }

   .hero .container .cards .card .header,
   .hero .container .cards .prices,
   .hero .container .bio,
   .second .container p,
   .third .container p,
   .second .container .cards .card .some__text .bio,
   .third .container .cards .card .some__text .bio,
   .other-input input::placeholder,
   .other-input input,
   .option label,
   .label,
   .overlay .box h2,
   .overlay .box h1 {
      font-size: 20px;
   }

   .second .container .cards {
      max-width: 1040px;
   }

   .third .container .cards {
      max-width: 1040px;
   }


   
   .option input[type="checkbox"] {
      min-width: 30px;
      min-height: 30px;

   }

   .option input[type="radio"] {
      min-width: 30px;
      min-height: 30px;

   }




   .overlay form .input {
      height: 52px;
   }

   .overlay .box {
      padding: 56px 12%;
      height: fit-content;
   }

   .hero .container .cards .card .examples {
      font-size: 15px;
   }

   .hero .container .cards .card {
      max-width: 300px;
      height: 375px;
      padding: 30px 12px 34px;
   }

   .second .container .cards .card .some__text .header,
   .second .container .cards .card .some__text .prices,
   .third .container .cards .card .some__text .header,
   .third .container .cards .card .some__text .prices {
      font-size: 24px;
   }
}

@media (max-width: 676px) {
   .overlay .box {
      padding: 48px 24px;
   }

   .option .other-input {
      margin-left: 0;
   }

   .overlay .fa-xmark {
      width: 12px;
      right: 16px;
      top: 16px;
   }

   .overlay input.btn {
      margin: auto;
   }

   .extra__options {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
   }


   .radio-error-message {
      margin-top: 0;
   }

   
   
   .option input[type="checkbox"] {
      width: 28px;
      height: 28px;
   }


   .option input[type="radio"] {
      width: 28px;
      height: 28px;
   }





   .option label{
      margin-bottom: 12px;
   }

   .custom-radio .checkmark {
      width: 28px;
      height: 28px;
   }

   .custom-radio .checkmark::after {
      top: 4px;
      left: 4px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: white;
   }
}

@media (max-width: 450px) {
   .btn {
      font-size: 20px;
      max-width: 230px;
      height: 54px;
   }

   .hidden__mobile {
      display: none;
   }

   .option label {
      font-size: 16px;
   }

   .option {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 16px 12px;
      margin-bottom: 10px;
   }

   .hero .container h1 {
      font-size: 28px;
   }

   .hero .container h2,
   .hero .container h3,
   .second .container h1,
   .third .container h1,
   .hero .container .cards .card .header,
   .hero .container .cards .prices {
      font-size: 22px;
   }

   .hero .container .bio,
   .second .container h2,
   .third .container h2 {
      display: none;
   }

   .hero .container .cards .card .examples,
   .second .container .cards .card .some__text .bio,
   .third .container .cards .card .some__text .bio,
   .second .container p,
   .third .container p {
      font-size: 17px;
   }

   .second .container .cards,
   .third .container .cards {
      margin: 24px auto;
      gap: 24px;
   }

   .hero .container .cards .card {
      max-width: 340px;
      height: 425px;
      padding: 30px 12px 34px;
   }

   .second .container .cards .card .some__text .header,
   .second .container .cards .card .some__text .prices,
   .third .container .cards .card .some__text .header,
   .third .container .cards .card .some__text .prices {
      font-size: 22px;
   }


   .second .container .btn,
   .third .container .btn {
      margin: auto;
   }
}

@media (max-width: 340px) {
   .btn {
      font-size: 16px;
      max-width: 192px;
      height: 44px;
   }

   .hero .container .cards {
      gap: 24px;
   }

   .second .container .cards,
   .third .container .cards {
      gap: 24px;
   }

   .hero .container,
   .second .container,
   .third .container {
      padding: 64px 4%;
   }

   .hero .container h1,
   .second .container h1,
   .third .container h1 {
      font-size: 24px;
   }

   .hero .container h2,
   .hero .container h3,
   .second .container h2,
   .third .container h2,
   .hero .container .cards .card .header,
   .hero .container .cards .prices {
      font-size: 18px;
   }

   .hero .container .bio {
      display: none;
   }

   .hero .container .cards .card .examples,
   .second .container .cards .card .some__text .bio,
   .third .container .cards .card .some__text .bio,
   .second .container p,
   .third .container p {
      font-size: 14px;
   }

   .hero .container .cards .card {
      max-width: 280px;
      height: 350px;
      padding: 30px 12px 42px;
   }

   .second .container .cards .card .some__text .header,
   .second .container .cards .card .some__text .prices,
   .third .container .cards .card .some__text .header,
   .third .container .cards .card .some__text .prices {
      font-size: 18px;
   }


   .second .container .btn,
   .third .container .btn {
      margin: auto;
   }
}