@font-face {
  font-family: "ConthraxSb-1";
  src: local("☺"), url("../fonts/ConthraxSb-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

.ff-Con {
  font-family: "ConthraxSb-1";
}

.hide {
  display: none !important;
}
.p-0 {
  padding: 0px 0px 56px 0px !important;
}

.table-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1%;
  grid-row-gap: 2%;
  padding: 0px 0px 30px 0px;
}

@media (max-width: 759px) {
  .table-main {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .table-main {
    grid-template-columns: repeat(1, 1fr);
  }
}
.tm-card {
  position: relative;
  max-width: 475px;
  width: 100%;
  border-radius: 10px;
  display: flex;
  justify-content: flex-end;
}

.tm-card-btn {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 238px;
  width: 50%;
  height: 115px;
  color: var(--white);
  border-radius: 10px;
  background: linear-gradient(135deg, #242424 0%, #242424 100%);
  font-size: clamp(16px, 5vw, 48px);
  font-weight: 600;
  border: 2px solid #242424;
  z-index: 4;
}
.tm-card-btn.relevant {
  border: 2px solid rgb(251, 145, 21);
  background: linear-gradient(135deg, var(--orange-1) 0%, var(--red-1) 100%);
}

.tm-card-cont {
  position: relative;
  max-width: 423px;
  width: 92%;
  margin: 2% 0px 0px 0%;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: space-between;
  gap: 10px;
}
.tm-card-cont.bc {
  background-color: #000;
}

.tm-card-cont::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(to bottom, #242424, #ffffff00);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.tm-card-cont__pr {
  height: 115px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transform: translateX(20%);

  font-size: clamp(16px, 5vw, 24px);
  font-weight: 600;
}

.tm-card-cont__t {
  font-size: clamp(10px, 1vw, 12px);
  text-align: center;
  margin-top: 10px;
}

.tm-card-timer {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: clamp(16px, 5vw, 24px);
  font-weight: 600;
  gap: 4px;
  width: 100%;
}

.tm-card-timer p {
  position: relative;
  max-width: 69px;
  width: 100%;
  height: 70px;
  margin-top: 5px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.tm-card-timer p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  padding: 1px;
  background: linear-gradient(to bottom, #242424, #ffffff00);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.tm-card-load {
  position: relative;
  width: 90%;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #2c2c2c;
  background-color: #2c2c2c40;
  font-size: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.tm-card-load span {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--orange-1) 0%, var(--red-1) 100%);
  height: 100%;
}
.tm-card-load p {
  z-index: 4;
}

.tm-card-profit {
  position: relative;
  width: 90%;
  height: 70px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  justify-content: center;
  color: #7a7a7a;
}
.tm-card-profit.relevant {
  color: #3cbd2b;
}

.tm-card-profit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  padding: 1px;
  background: linear-gradient(to bottom, #7a7a7a, #ffffff00);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.tm-card-profit.relevant::before {
  background: linear-gradient(to bottom, #3cbd2b, #ffffff00);
}

.tm-card-profit span {
  font-size: 12px;
  font-weight: 600;
}
.tm-card-profit p {
  font-size: 24px;
  font-weight: 600;
}

.rows-g {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
}

.rows-g > :nth-child(3n + 1) {
  margin-top: 10px;
}

.rows-g > :nth-child(3n + 2) {
  margin-top: 30px;
}

.rows-g > :nth-child(3n) {
  margin-top: 50px;
}

@media (max-width: 759px) {
  .rows-g {
    grid-template-columns: repeat(2, 1fr);
  }

  .rows-g > :nth-child(2n) {
    margin-top: 10px;
  }

  .rows-g > :nth-child(2n + 1) {
    margin-top: 30px;
  }
}

@media (max-width: 540px) {
  .rows-g {
    grid-template-columns: repeat(1, 1fr);
  }

  .rows-g > * {
    margin-top: 10px;
  }
}

.hov {
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавность эффекта */
}

.hov:hover {
  transform: translate(3px, -3px);
  box-shadow: -5px 15px 13px var(--orange-1);
}
.hov-lin {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleX(0); /* Изначально скрыт, сжат по оси X */
  bottom: 8px;
  height: 7px;
  width: 88%;
  background-color: var(--orange-1);
  border-radius: 4px;
  opacity: 0; /* Изначально скрыт */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Плавное изменение прозрачности и трансформации */
}

.hov:hover .hov-lin {
  opacity: 1; /* Становится непрозрачным */
  transform: translateX(-50%) scaleX(1); /* Раскрывается по оси X */
}

@media (max-width: 992.98px) {
    .filled-decor {
        padding: 16px 16px 140px 16px;
        overflow: auto;
    }
}