.htx {
  font-size: 50px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  color: var(--new-main) !important;
}

.stx {
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: inherit !important;
}

.dsx,
.icx {
  font-size: 16px !important;
  font-weight: normal !important;
  text-transform: inherit !important;
}

.icx {
  font-weight: 100 !important;
}

h3.stx {
  color: var(--new-main) !important;
}

/* Mobile (max-width: 767px) */
@media only screen and (max-width: 767px) {
  .htx {
    font-size: 28px !important;
  }

  .stx {
    font-size: 14px !important;
  }

  .dsx,
  .icx {
    font-size: 14px !important;
  }
}

/* Tablet Portrait (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .htx {
    font-size: 38px !important;
  }

  .stx {
    font-size: 15px !important;
  }

  .dsx,
  .icx {
    font-size: 15px !important;
  }
}

/* Tablet Landscape (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .htx {
    font-size: 42px !important;
  }

  .stx {
    font-size: 15px !important;
  }

  .dsx,
  .icx {
    font-size: 15px !important;
  }
}

/* Small Desktop (1200px - 1300px) */
@media (min-width: 1200px) and (max-width: 1300px) {
  .htx {
    font-size: 46px !important;
  }
}

/* Medium Desktop (1300px - 1400px) */
@media (min-width: 1300px) and (max-width: 1400px) {
  .htx {
    font-size: 48px !important;
  }
}

/* Large Desktop (1400px - 1500px) */
@media (min-width: 1400px) and (max-width: 1500px) {
  .htx {
    font-size: 50px !important;
  }
}