@font-face {
  font-family: "Montserrat 400";
  src: url("./fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Montserrat 500";
  src: url("./fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "Montserrat 600";
  src: url("./fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
}

@font-face {
  font-family: "Montserrat 700";
  src: url("./fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
}

@font-face {
  font-family: "Montserrat 800";
  src: url("./fonts/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 800;
}

.regular-text {
  font-family: "Montserrat 400";
}

.medium-text {
  font-family: "Montserrat 500";
}

.semi-bold-text {
  font-family: "Montserrat 600";
}

.bold-text {
  font-family: "Montserrat 700";
}

.extra-bold-text {
  font-family: "Montserrat 800";
  font-size: 38px;
}

.title-name {
  font-family: "Montserrat 600";
  font-size: 28px;
  color: var(--dark, #333);
}

.white-title-text {
  font-family: "Montserrat 600";
  font-size: 28px;
  text-transform: uppercase;
}

.act__choose-us-card-text {
  font-family: "Montserrat 500";
  color: #ffffff99;
}

.link-text {
  color: var(--2, #7c95ae);
  font-family: "Montserrat 600";
  font-size: 14px;
  text-decoration-line: underline;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-family: "Montserrat 500";
  font-style: normal;
  color: #fff;
  text-decoration: none;
  list-style: none;
}

html {
  scroll-behavior: smooth;
}

p {
  margin: 0;
}

ul {
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

button {
  border: none;
}

img {
  width: 100%;
  height: 100%;
}

body {
  margin: 0 auto;
  min-width: 320px;
  font-family: "Montserrat 500";
  background: #fff;
  overflow-y: scroll;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.hidden {
  display: none !important;
}

.blue-color {
  background-color: #3a41df;
}

.red-color {
  background-color: #df3a3a;
}

.yellow-color {
  background-color: #eed23c;
}

/* header */
.act__header {
  background: var(--1, #303c48);
  display: flex;
  padding: 15px 7%;
  justify-content: space-between;
  align-items: center;
}

.act__header-links {
  display: flex;
  gap: 25px;
}

.act__logo-container {
  width: 85px;
  height: 33px;
}

.act__nav-list,
.act__header-container,
.act__header-right {
  display: flex;
  gap: 25px;
  align-items: center;
}

.light-button {
  font-family: "Montserrat 600";
  display: flex;
  width: 214px;
  height: 37px;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  background: var(--white, #fff);
  color: #333;
  cursor: pointer;
}

.dark-button {
  font-family: "Montserrat 600";
  display: flex;
  width: 214px;
  height: 37px;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  background: var(--2, #7c95ae);
  cursor: pointer;
}

.act__nav-item a {
  font-family: "Montserrat 600";
}

.act__header-contact-number {
  font-family: "Montserrat 600";
  cursor: pointer;
}

/* content */
.act__section {
  max-width: 1242px;
  margin: 80px auto 0 auto;
}

.view3d {
  border-radius: 8px;
  background: var(--1, #303c48);
  position: relative;
  width: 1242px;
  padding: 93.5px 105px;
}

.act__view3d-descr {
  display: flex;
  flex-direction: column;
  width: 505px;
  gap: 25px;
}

.act__view3d-buttons {
  display: flex;
  gap: 30px;
  margin-top: 25px;
}

.act__view3d-color-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
}

.act__view3d-color-selector input[type="radio"] {
  display: none;
}

.act__view3d-color-button {
  width: 31px;
  height: 31px;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  background-clip: padding-box;
}

.act__view3d-color-selector input[type="radio"]:checked + .act__view3d-color-button::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 4px solid var(--white, #fff);
  box-sizing: border-box;
}

.act__view3d-circle {
  position: absolute;
  top: 46px;
  left: 794px;
  width: 307px;
  height: 307px;
  border-radius: 307px;
  background: var(--gray, #ededed);
  cursor: pointer;
}

.act__view3d-korzina {
  position: absolute;
  top: -20px;
  left: 654px;
  width: 564px;
  height: 423px;
}

.act__title-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.act__title-container p,
.products p,
.act__equipment-title p,
.act__equipment-big-card-descr p,
.act__equipment-small-card-descr p,
.act__specification-descr p,
.act__delivery-point p,
.act__delivery-card p {
  color: var(--dark, #333);
}

.choose-us {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.act__choose-us-cards {
  display: flex;
  gap: 50px;
}

.act__choose-us-card {
  width: 273px;
  height: 184px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-radius: 8px;
  background: var(--2, #7c95ae);
  padding: 25px;
  align-items: flex-start;
}

.products {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.act__basket-cards-container,
.equipment {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.act__basket-cards {
  display: flex;
  gap: 50px;
}

.act__basket-directory {
  display: flex;
  gap: 20px;
}

.act__basket-card {
  display: flex;
  width: 463px;
  height: 309px;
  padding: 25px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border-radius: 8px;
  background: #ededed;
}

.act__basket-card-btn {
  display: flex;
  gap: 100px;
  align-items: center;
}

.act__basket-btn {
  width: 112px;
  height: 37px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  background: var(--1, #303c48);
  cursor: pointer;
}

.act__basket-card-semi-bold-text {
  font-family: "Montserrat 600";
  font-size: 16px;
  line-height: 28px;
}

.act__basket-img-container {
  width: 350px;
}

.act__basket-pictures,
.act__equipment-title {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.act__basket-pic-card {
  width: 113px;
  height: 147px;
  flex-direction: column;
  justify-content: center;
  border-radius: 8px;
  background: #ededed;
}

.act__equipment-directory {
  display: flex;
  gap: 50px;
}

.act__equipment-big-card {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.act__equipment-big-pic {
  width: 595.5px;
  height: 407px;
  padding: 25px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: #ededed;
}

.act__equipment-big-card-descr {
  display: flex;
  flex-direction: column;
  width: 595.5px;
  align-items: flex-start;
  gap: 15px;
}

.act__equipment-small-card-descr {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card-button {
  font-family: "Montserrat 600";
  display: flex;
  padding: 10px 23px;
  width: 112px;
  height: 37px;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  background: var(--2, #7c95ae);
  cursor: pointer;
}

.act__equipment-small-card {
  display: flex;
  flex-direction: column;
  width: 380px;
  gap: 25px;
}

.act__equipment-small-pic {
  display: flex;
  height: 250px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: #ededed;
}

.application {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.act__application-images {
  display: flex;
  height: 396px;
  gap: 25px;
}

.act__application-main-container {
  width: 608.5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.act__application-main-container img {
  object-fit: cover;
  border-radius: 8px;
}

.act__application-image-container img {
  border-radius: 8px;
}

.specification {
  display: flex;
  justify-content: space-between;
}

.act__specification-text {
  display: flex;
  flex-direction: column;
  width: 292px;
  gap: 50px;
}

.act__specification-descr {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.actions {
  display: flex;
  padding: 50px;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  border-radius: 8px;
  background: var(--1, #303c48);
}

.act__actions-steps {
  display: flex;
  align-items: center;
  gap: 50px;
}

.act__actions-step {
  display: flex;
  align-items: center;
  gap: 25px;
  width: 347px;
}

.act__actions-step-image {
  width: 72px;
  height: 72px;
}

.act__actions-step-text {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.delivery {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
}

.act__delivery-text,
.act__delivery-cards {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.act__delivery-points {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.act__delivery-point {
  display: flex;
  align-items: center;
  gap: 25px;
}

.act__delivery-point-svg {
  width: 27px;
  height: 27px;
  fill: var(--2, #7c95ae);
}

.act__delivery-images {
  display: flex;
  gap: 50px;
}

.act__delivery-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.act__delivery-image {
  width: 208px;
  height: 85px;
  border-radius: 8px;
}

.slider {
  display: flex;
  flex-direction: column;
  width: 1242px;
  gap: 25px;
}

.act__slider-container {
  display: flex;
  align-items: center;
  gap: 30px;
}

.map {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.act__map-contacts {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.act__map-contacts-info {
  display: flex;
  gap: 40px;
}

.act__map-contacts-content {
  display: flex;
  flex-direction: column;
  width: 387px;
  gap: 12px;
}

.contact-text {
  font-family: "Montserrat 400";
  font-size: 20px;
  line-height: 26px;
  color: var(--dark, #333);
}

.contact-bold-text {
  font-family: "Montserrat 600";
  line-height: 38px;
  font-size: 24px;
  color: var(--dark, #333);
}

.contact-pointer-text {
  font-family: "Montserrat 600";
  line-height: 38px;
  font-size: 24px;
  color: var(--dark, #333);
  cursor: pointer;
}

.act__application-image-container {
  width: 291.75px;
}

.act__ymap {
  width: 1242px;
  height: 560px;
}

.form {
  display: flex;
  padding: 50px;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  border-radius: 8px;
  background: var(--1, #303c48);
  margin-bottom: 72px;
}

.form p,
.act__modal-request p,
.act__modal-close p,
.act__modal-close h2 {
  color: var(--white, #fff);
}

.act__form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.act__form-inputs {
  display: flex;
  gap: 25px;
}

.act__input-field {
  display: flex;
  width: 364px;
  padding: 10px 25px;
  align-items: center;
  border-radius: 25px;
  border: 1px solid var(--2, #7c95ae);
  background: var(--white, #fff);
  outline: none;
  color: #333;
}

.act__modal-input {
  display: flex;
  width: 289px;
  padding: 10px 25px;
  align-items: center;
  border-radius: 25px;
  border: 1px solid var(--2, #7c95ae);
  background: var(--white, #fff);
  outline: none;
  color: #333;
}

.act__modal-input-field {
  display: flex;
  width: 100%;
  padding: 10px 25px;
  align-items: center;
  border-radius: 25px;
  border: 1px solid var(--2, #7c95ae);
  background: var(--white, #fff);
  outline: none;
  color: #333;
}

.input-field::placeholder {
  color: var(--dark-gray, #979797);
  font-size: 12px;
}

.act__form-checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14.25px;
}

.act__form-checkbox input {
  display: none;
}

.modal-form-checkbox {
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}

.act__modal-button {
  display: flex;
  padding: 10px 23px;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  background: var(--2, #7c95ae);
  cursor: pointer;
}

.act__form-checkbox label {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 10px;
}

.checkbox-circle {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 0.75px solid var(--gray, #ededed);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-circle svg {
  width: 15px;
  height: 15px;
  display: none;
}

.act__form-checkbox input:checked + label .checkbox-circle svg {
  display: flex;
}

.act__form-checkbox span {
  color: var(--gray, #ededed);
  font-size: 12px;
  font-family: "Montserrat 400";
}

.act__form-checkbox a {
  color: var(--2, #7c95ae);
  font-size: 12px;
  font-family: "Montserrat 400";
  text-decoration-line: underline;
}

.act__form-button {
  display: flex;
  padding: 10px 23px;
  justify-content: center;
  align-items: center;
  width: 513px;
  border-radius: 25px;
  background: var(--2, #7c95ae);
  cursor: pointer;
}

/* swiper */
.swiper {
  width: 1092px;
  height: 180px;
  display: flex;
  align-items: center;
  position: relative;
}

.swiper-slide {
  width: 225px !important;
  height: 180px !important;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
}

.swiper-button-next,
.swiper-button-prev {
  width: 44px !important;
  height: 44px !important;
  position: static !important;
  color: inherit !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 0 !important;
}

.swiper-slide img {
  border-radius: 8px;
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* footer */
.act__footer {
  position: static;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 50px 100px;
  gap: 108px;
  background: var(--1, #303c48);
  margin-top: auto;
}

.act__footer-info {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.act__footer-logo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.act__footer-info-data {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.act__footer-gray-text {
  font-family: "Montserrat 400";
  color: #858585;
}

.act__footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.act__footer-nav-item a,
.act__policy-link {
  font-family: "Montserrat 400";
  text-decoration: underline;
}

.act__policy-link {
  width: 236px;
}

.act__footer-hours {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.act__gray-text {
  font-family: "Montserrat 400";
  color: #898989;
}

.act__footer-time {
  height: 155px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.act__footer-phone {
  font-family: "Montserrat 400";
  font-size: 20px;
  cursor: pointer;
}

.act__footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.act__footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.act__footer-mail {
  font-family: "Montserrat 700";
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
}

.act__footer-adress {
  font-family: "Montserrat 400";
  font-size: 12px;
  cursor: pointer;
}

.act__footer-info,
.act__footer-nav,
.act__footer-time,
.act__footer-contact-info {
  width: 229px;
}

/* modal */
.act__modal-request-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

body.modal-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.act__modal-request,
.act__modal-success {
  display: flex;
  width: 703px;
  padding: 50px;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  border-radius: 8px;
  background: var(--1, #303c48);
}

.act__modal-close {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.act__modal-close-button {
  width: 34px;
  height: 34px;
  cursor: pointer;
}

.act__modal-button[disabled],
.act__form-button[disabled] {
  background-color: #bcc6d6;
  cursor: auto;
  opacity: 0.8;
}