/* =======================
    First
======================= */
.first {
  background: transparent;
  width: 100dvw;
  height: 100dvh;
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.first::before {
  content: "";
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

.first-background {
  display: flex;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}

.first-background .first-background-video {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.first-content {
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.first-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.first-head h1 {
  margin-bottom: 1rem;
  font-family: Darkness;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  line-height: 3rem;
  text-transform: uppercase;
  letter-spacing: 1rem;
  color: transparent;
  -webkit-text-stroke: 0.01rem #fff;
  background: url(https://cdn.darknesscity.com/bWFpbl93ZWI=/aW1hZ2U=/YmFja3RleHR1cmVfdGV4dA==.webp);
  background-size: 41.666667vw;
  -webkit-background-clip: text;
  background-position: 0 0;
  animation: textback 30s linear infinite;
  will-change: background-position;
}

@keyframes textback {
  100% {
    background-position: 400px 0;
  }
}

.first-head h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 2rem;
  font-size: 1.5rem;
}

.first-head h2 span {
  filter: drop-shadow(0 0 1.388889vh #fff);
}

.first-head h2 img {
  margin-inline-start: 0.5rem;
  height: 3rem;
  filter: drop-shadow(0 0 0.2rem #800000) drop-shadow(0 0 0.4rem #800000);
}

.first-buttons {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

.btn-starter {
  height: 1rem;
  -webkit-appearance: none;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1rem;
  letter-spacing: 0.2rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 1rem 1.5rem;
  margin: 0.5rem 0vw;
  border-radius: 50px;
  border: 0.2rem solid #fff;
  color: #fff;
  background: none;
  text-decoration: none;
  filter: drop-shadow(0 0 2rem #ffffff00);
  transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
  animation: btnShadow 2.5s ease-in-out infinite;
  will-change: filter;
}

.btn-starter a {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: auto 0;
  color: #fff;
  text-decoration: none;
}

.btn-starter i {
  width: 2rem;
  scale: 1.5;
  margin-inline-end: 1rem;
}

.btn-starter-play {
  display: none;
}

.btn-starter-app {
  display: none;
}

@keyframes btnShadow {
  0% {
    filter: drop-shadow(0 0 1rem #fff);
  }

  50% {
    filter: drop-shadow(0 0 1rem #ffffff00);
  }

  100% {
    filter: drop-shadow(0 0 1rem #fff);
  }
}

.btn-starter:hover {
  background: #ff00ec;
  border: 0.2rem solid #ff00ec;
}

.btn-starter-discord:hover {
  background: #5865F2;
  border: 0.2rem solid #5865F2;
}

/* =======================
    Better
======================= */
.better-content {
  color: #fff;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.better-content h2 {
  color: var(--text-color-secondary);
  text-align: center;
  font-size: 1.5rem;
  font-family: title;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1.3rem;
  position: relative;
  padding: 2rem 0 1rem 0;
}

.better-container {
  padding: 0;
  margin: 0;
  font-size: 1rem;
  text-transform: capitalize;
  position: relative;
  display: flex;
  flex-direction: column;
}

.row-group {
  width: 80vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}

.rows {
  position: relative;
  display: block;
  justify-content: center;
  align-items: center;
  text-align: start;
  padding: 1rem 2rem;
  border-radius: 25px;
  margin: 0rem 1.5rem;
  margin-top: 1.5rem;
  flex: 1;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  border: 0.3rem solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0.5rem 2rem 0 rgba(0, 0, 0, 0.37);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: flex 0.3s ease-in-out, flex-basis 0.3s ease;
}

.rows::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: 3rem;
  opacity: 0.2;
  z-index: 1;
  transition: all 0.3s ease-in-out;
  transform: scale(1.1);
}

.rows * {
  z-index: 2;
}

.security::before {
  background-image: url('https://cdn.darknesscity.com/bWFpbl93ZWI=/aW1hZ2U=/c2VjdXJpdHktcGF0dGVybg==.webp');
}

.ping::before {
  background-image: url('https://cdn.darknesscity.com/bWFpbl93ZWI=/aW1hZ2U=/c2VydmVyLXBhdHRlcm4=.webp');
}

.Support::before {
  background-image: url('https://cdn.darknesscity.com/bWFpbl93ZWI=/aW1hZ2U=/c3VwcG9ydC1wYXR0ZXJu.webp');
}

.performance::before {
  background-image: url('https://cdn.darknesscity.com/bWFpbl93ZWI=/aW1hZ2U=/cGVyZm9ybWFuY2UtcGF0dGVybg==.webp');
}

.affordability::before {
  background-image: url('https://cdn.darknesscity.com/bWFpbl93ZWI=/aW1hZ2U=/YWZmb3JkYWJpbGl0eS1wYXR0ZXJu.webp');
}

.innovation::before {
  background-image: url('https://cdn.darknesscity.com/bWFpbl93ZWI=/aW1hZ2U=/aW5ub3ZhdGlvbi1wYXR0ZXJu.webp');
}

.rows.center-hover::before {
  opacity: 0;
}

.row-group.center-hover .rows {
  flex: 0.9;
}

.row-group.center-hover .rows.center-hover {
  flex: 2;
}

.texts h3 {
  transition: all 0.3s ease-in-out;
  position: absolute;
  white-space: nowrap;
  font-size: 1.5rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.texts .head-mobile {
  position: absolute;
  white-space: nowrap;
  opacity: 0;
  font-size: 1.5rem;
  top: 7%;
  left: 10%;
  font-weight: bold;
  color: #ff00ef;
  transition: all 0.3s ease-in-out;
}

.texts p {
  position: relative;
  opacity: 0;
  padding-top: 6vh;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}

.rows.center-hover .texts h3 {
  opacity: 0;
}

.rows.center-hover .texts .head-mobile {
  opacity: 1;
}

.rows.center-hover .texts p {
  display: block;
  opacity: 1;
}

.better .icons {
  display: none !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  color: #86868673;
  z-index: -1;
  font-size: 5rem;
  transition: filter 0.3s ease-in-out;
}

/* =======================
    Statistics
======================= */
.statistics-content {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.statistics-content h2 {
  color: var(--text-color-secondary);
  text-align: center;
  font-size: 1.5rem;
  font-family: title;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1.3rem;
  position: relative;
  padding: 2rem 0 1rem 0;
}

.statistics-content p {
  font-size: 1.1rem;
  line-height: 1.2rem;
  text-transform: capitalize;
  position: relative;
  padding: 0% 5%;
}

.statistics-row {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 2% 0%;
  margin-top: 0.8rem;
}

.statistics-rows {
  width: 70%;
  padding: 0.2rem 0%;
  margin: 0.8rem;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  background-color: var(--color-neutral-300);
  box-shadow: -4px -4px 10px rgba(255, 255, 255, 0.2), inset 4px 4px 10px rgba(0, 0, 0, 0.2), inset -4px -4px 10px rgba(255, 255, 255, 0.1), 4px 4px 10px rgba(0, 0, 0, 0.1);
}

.statistics-rows .head {
  font-size: 1rem;
}

.statistics-rows .countUP {
  font-size: 1.7rem;
  font-weight: 500;
  color: #ff00ef;
}

/* =======================
    Jobs
======================= */
.jobs-content {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.jobs-content h2 {
  color: var(--text-color-secondary);
  text-align: center;
  font-size: 1.3rem;
  font-family: title;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.8rem;
  position: relative;
  padding: 2rem 0 1rem 0;
}

.jobs-content p {
  font-size: 1.2rem;
  line-height: 1.4rem;
  text-transform: capitalize;
  position: relative;
}

.jobs-row {
  margin-top: 1.7rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.jobs-rows {
  width: 90%;
  height: fit-content;
  position: relative;
  padding: 1.2rem 0.7rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  box-shadow: none;
  background-color: transparent;
}

.jobs-detail {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  margin: 1rem 0;
  padding: 1rem 2rem;
  box-shadow: -4px -4px 3px rgba(255, 255, 255, 0.2), inset 4px 4px 3px rgba(0, 0, 0, 0.2), inset -4px -4px 3px rgba(255, 255, 255, 0.1), 4px 4px 3px rgba(0, 0, 0, 0.1);
  border-radius: 25px;
  background-color: var(--color-neutral-300);
  transition: translate 1.2s ease, opacity 0.3s ease;
}

.prev,
.next {
  display: none;
  position: absolute;
  cursor: pointer;
  z-index: 2;
  color: #fff;
  font-weight: bold;
  font-size: 1.8rem;
  transition: all 0.3s ease-in-out;
}

.prev {
  left: 5dvw;
}

.next {
  right: 5dvw;
}

.prev:hover,
.next:hover {
  cursor: pointer;
  color: var(--text-color-secondary);
  filter: drop-shadow(0 0 8px rgba(var(--text-color-secondary), 0.5));
}

.jobs-image {
  outline: none;
  border: none;
  display: none;
  align-items: end;
  justify-content: end;
  padding: 0 0 0 1rem;
  width: 30%;
  transition: all 1.2s ease;
}

.jobs-image img {
  outline: none;
  border: none;
  width: 100%;
}

.police-image img {
  filter: drop-shadow(0 0 25px #0c549481);
}

.ems-image img {
  filter: drop-shadow(0 0 25px #ff00008a);
}

.mechanic-image img {
  filter: drop-shadow(0 0 25px #c3b6ab7e);
}

.jobs-texts {
  text-wrap: nowrap;
  text-align: center;
  font-size: 1.5rem;
  padding: 1rem;
  font-weight: 700;
  width: 100%;
  display: block;
  transition: all 1.2s ease-in-out;
}

.jobs-texts p {
  font-weight: 400;
  text-wrap: wrap;
  font-size: 1rem;
  display: block;
  padding-top: 2%;
}

/* =======================
    About Us
======================= */
.aboutus-content {
  color: #fff;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: 11vh;
}

.aboutus-content h2 {
  color: var(--text-color-secondary);
  text-align: center;
  font-size: 1.5rem;
  font-family: title;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1.3rem;
  position: relative;
  padding: 2rem 0 1rem 0;
}

.aboutus-content p {
  font-size: 1.1rem;
  line-height: 1.2rem;
  text-transform: capitalize;
  position: relative;
  padding: 0% 5%;
}

.aboutus-content p b {
  font-weight: 800;
}

.aboutus-content p img {
  pointer-events: painted;
  cursor: pointer;
  width: 1.3rem;
}

.about-darkness,
.about-darkflame {
  color: #ffffff;
  text-decoration: underline;
}

.row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 2% 3%;
}

.card {
  position: relative;
  width: 70dvw;
  margin: 2% 3%;
  aspect-ratio: 4/3;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: block;
  overflow: hidden !important;
  filter: drop-shadow(0 0 15px #000000);
  transition: filter 0.3s ease-in-out;
  border-radius: 2.2rem;
}


.card img {
  position: relative;
  border-radius: 2.2rem;
  width: 100%;
  object-fit: cover;
  filter: saturate(80%) brightness(80%);
  transition: scale 0.3s ease, filter 0.3s ease;
}

.card:hover {
  filter: drop-shadow(0 0 15px #00000050);
}

.card:hover img {
  scale: 1.05;
  filter: saturate(120%) brightness(110%);
}

.about-data {
  background: #ffffff;
  color: #000000;
  position: absolute;
  width: 100%;
  bottom: -3.5rem;
  padding-top: 1.2rem;
  transition: all 0.3s ease-in-out;
}

.card:hover .about-data {
  bottom: 0rem;
}

.card:hover .about-data a {
  pointer-events: all;
}

.about-data h3 {
  font-family: title;
  text-transform: uppercase;
  color: #000;
  background-position: 0 0;
  font-size: 1.5rem;
  margin: 3% 5%;
}

.about-data p {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.2rem;
  margin: 2% 0%;
}

.about-data a {
  position: relative;
  text-decoration: none;
  pointer-events: none;
  font-size: 2.2rem;
  color: #000000;
  margin: 0 0.5rem;
  transition: color 0.3s ease-in-out;
}

.about-data a:hover {
  color: #ff00ee;
}












/* =======================
  Responsive
======================= */
/* tablet */
@media screen and (max-width: 767px) and (min-width: 576px) {

  /* =======================
    First
======================= */
  .first-head h1 {
    font-size: 2.2rem;
  }

  @keyframes textback {
    100% {
      background-position: 700px 0;
    }
  }

  .first-head h2 {
    font-size: 1.8rem;
  }

  .first-head h2 img {
    height: 3.5rem;
  }

  .btn-starter {
    font-size: 0.8rem;
    padding: 1rem 2.2rem;
  }

  /* =======================
    Better
======================= */
  .better-content h2 {
    font-size: 1.8rem;
  }

  .rows {
    max-width: 50vw;
  }

  /* =======================
    Statistics
======================= */
  .statistics-content h1 {
    font-size: 1.8rem;
  }

  .statistics-content p {
    font-size: 1.2rem;
    line-height: 1.7rem;
  }

  .statistics-rows {
    width: 40%;
  }

  /* =======================
    Jobs
======================= */
  .jobs-content h1 {
    font-size: 1.8rem;
  }

  .jobs-image {
    width: 40%;
  }

  .jobs-texts {
    text-align: start;
  }

  .jobs-texts p {
    font-size: 1.1rem;
  }

  /* =======================
    About Us
======================= */
  .aboutus-content h1 {
    font-size: 1.8rem;
  }

  .aboutus-content p {
    font-size: 1.2rem;
    line-height: 1.7rem;
  }

  .card {
    margin: 11% 3% 5% 3%;
    width: 45dvw;
  }

  .about-data h3 {
    font-size: 1.2rem;
  }

  .about-data p {
    font-size: 0.8rem;
  }
}

/* laptop */
@media screen and (max-width: 991px) and (min-width: 768px) {

  /* =======================
    First
======================= */
  .first-head h1 {
    font-size: 2.3rem;
  }

  @keyframes textback {
    100% {
      background-position: 1000px 0;
    }
  }

  .first-head h2 {
    font-size: 1.8em;
  }

  .first-head h2 img {
    height: 4rem;
  }

  .first-buttons {
    flex-direction: row;
  }

  .btn-starter {
    font-size: 0.8rem;
    padding: 1rem 1.3rem;
    margin: 0.5rem 0.8rem;
  }

  .btn-starter i {
    scale: 1.5;
  }

  .btn-starter-play {
    display: flex;
  }


  /* =======================
    Better
======================= */
  .better-content h2 {
    font-size: 1.9rem;
  }

  .row-group {
    width: 100vw;
    flex-direction: row;
  }

  .rows {
    height: 13rem
  }

  .rows:hover::before {
    opacity: 0;
  }

  .rows .texts p {
    padding-top: 4vh;
  }

  .rows .texts .head-mobile {
    display: none;
  }

  .row-group:hover .rows:hover {
    flex-basis: 25%;
  }

  .rows:hover .texts h3 {
    top: 5%;
    left: 7%;
    transform: none;
    color: #ff00ef;
  }

  .rows:hover .texts p {
    opacity: 1;
  }

  /* =======================
    Statistics
======================= */
  .statistics-content h1 {
    font-size: 1.9rem;
  }

  .statistics-content p {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }

  .statistics-row {
    justify-content: space-around;
  }

  .statistics-rows {
    width: 38%;
  }

  .statistics-rows .head {
    font-size: 1.3rem;
  }

  /* =======================
    Jobs
======================= */
  .jobs-content h1 {
    font-size: 1.9rem;
  }

  .jobs-content p {
    font-size: 1.4rem;
    line-height: 1.7rem;
  }

  .jobs-rows {
    width: 100%;
    height: fit-content;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .jobs-image {
    width: 25%;
  }

  .jobs-texts {
    text-align: start;
    font-size: 1.3rem;
  }

  .jobs-texts p {
    font-size: 1.1rem;
  }

  /* =======================
    About Us
======================= */
  .aboutus-content h1 {
    font-size: 1.9rem;
  }

  .aboutus-content p {
    font-size: 1.2rem;
    line-height: 1.7rem;
  }

  .aboutus-content p img {
    width: 1.4rem;
  }

  .card {
    width: 32dvw;
  }

  .about-data h3 {
    font-size: 1.2rem;
  }

  .about-data p {
    font-size: 0.8rem;
  }
}

/* desktop */
@media screen and (max-width: 1199px) and (min-width: 992px) {

  /* =======================
    First
======================= */
  .first-content {
    flex-direction: row;
    justify-content: space-around;
  }

  .first-head h1 {
    font-size: 2.0rem;
  }

  @keyframes textback {
    100% {
      background-position: 1300px 0;
    }
  }

  .first-head h2 {
    font-size: 1.5rem;
  }

  .first-head h2 img {
    height: 3.3rem;
  }

  .first-buttons {
    flex-direction: row;
  }

  .btn-starter {
    font-size: 1.0rem;
    padding: 0.8rem 1.5rem;
    margin: 0.5rem 0.7rem;
  }

  .btn-starter svg {
    width: 1.2rem;
    scale: 1.2;
    margin-inline-end: 1rem;
  }

  .btn-starter-play {
    display: flex;
  }

  /* =======================
    Better
======================= */
  .better-content h2 {
    font-size: 1.8rem;
  }

  .better-container {
    font-size: 1.2rem;
  }

  .row-group {
    width: 90vw;
    flex-direction: row;
  }

  .rows {
    height: 20rem
  }

  .rows .texts .head-mobile {
    display: none;
  }

  .rows:hover::before {
    opacity: 0;
  }


  .row-group:hover .rows:hover {
    flex-basis: 25%;
  }

  .rows:hover .texts h3 {
    top: 5%;
    left: 7%;
    transform: none;
    color: #ff00ef;
  }

  .rows:hover .texts p {
    opacity: 1;
  }

  /* =======================
    Statistics
======================= */
  .statistics-content h1 {
    font-size: 1.8rem;
  }

  .statistics-content p {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }

  .statistics-row {
    justify-content: space-around;
  }

  .statistics-rows {
    width: 35%;
  }

  .statistics-rows .head {
    font-size: 1.3rem;
  }

  .statistics-rows .countUP {
    font-size: 1.9rem;
  }

  /* =======================
    Jobs
======================= */
  .jobs-content h1 {
    font-size: 1.8rem;
  }

  .jobs-content p {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }

  .jobs-rows {
    height: 48dvh;
  }

  .jobs-detail {
    overflow: hidden;
    height: fit-content;
    position: absolute;
    width: 70dvw;
  }

  .prev,
  .next {
    display: block;
  }

  .jobs-image {
    display: block;
    width: 35%;
  }

  .jobs-texts {
    text-align: start;
    font-size: 1.2rem;
    width: 65%;
  }

  .jobs-texts p {
    font-size: 1.1rem;
  }

  /* =======================
    About Us
======================= */
  .aboutus-content h1 {
    font-size: 1.8rem;
  }

  .aboutus-content p {
    font-size: 1.2rem;
    line-height: 1.9rem;
  }

  .aboutus-content p img {
    width: 1.4rem;
  }

  .card {
    width: 30dvw;
  }

  .about-data h3 {
    font-size: 1.4rem;
    letter-spacing: 0.6rem;
  }

  .about-data p {
    font-size: 0.9rem;
  }
}

/* larg desktop */
@media screen and (max-width: 1399px) and (min-width: 1200px) {

  /* =======================
    first
======================= */
  .first-content {
    flex-direction: row;
    justify-content: space-around;
  }

  .first-head h1 {
    font-size: 2.2rem;
  }

  @keyframes textback {
    100% {
      background-position: 1300px 0;
    }
  }

  .first-head h2 {
    font-size: 1.7rem;
  }

  .first-head h2 img {
    height: 3.5rem;
  }

  .first-buttons {
    flex-direction: row;
  }

  .btn-starter {
    font-size: 1.1rem;
    padding: 1.0rem 2.2rem;
    margin: 0.5rem 0.8rem;
  }

  .btn-starter i {
    width: 1.3rem;
    scale: 1.3;
    margin-inline-end: 1rem;
  }

  .btn-starter-play {
    display: flex;
  }

  /* =======================
    Better
======================= */
  .better-content h2 {
    font-size: 1.9rem;
  }

  .better-container {
    font-size: 1.3rem;
  }

  .row-group {
    width: 90vw;
    flex-direction: row;
  }

  .rows {
    height: 20rem;
    display: flex;
  }

  .rows .texts .head-mobile {
    display: none;
  }

  .rows::before {
    background-size: 10vw;
  }

  .rows:hover::before {
    opacity: 0;
  }

  .row-group:hover .rows {
    flex: 0.9;
  }


  .row-group:hover .rows:hover {
    flex: 2;
    flex-basis: 25%;
  }

  .rows:hover .texts h3 {
    top: 5%;
    left: 7%;
    transform: none;
    color: #ff00ef;
  }

  .rows:hover .texts p {
    display: block;
    opacity: 1;
  }

  /* =======================
    Statistics
======================= */
  .statistics-content h1 {
    font-size: 1.9rem;
  }

  .statistics-content p {
    font-size: 1.3rem;
    line-height: 1.8rem;
  }

  .statistics-row {
    justify-content: space-around;
  }

  .statistics-rows {
    width: 35%;
  }

  .statistics-rows .head {
    font-size: 1.5rem;
  }

  .statistics-rows .countUP {
    font-size: 2.1rem;
  }

  /* =======================
    Jobs
======================= */
  .jobs-content h1 {
    font-size: 1.9rem;
  }

  .jobs-content p {
    font-size: 1.5rem;
    line-height: 1.9rem;
  }

  .jobs-rows {
    height: 40dvh;
  }

  .jobs-detail {
    overflow: hidden;
    height: fit-content;
    position: absolute;
    width: 70dvw;
  }

  .prev,
  .next {
    display: block;
  }

  .jobs-image {
    display: block;
    width: 35%;
  }

  .jobs-texts {
    text-align: start;
    font-size: 1.4rem;
    width: 65%;
  }

  .jobs-texts p {
    font-size: 1.3rem;
  }

  /* =======================
    About Us
======================= */
  .aboutus-content h1 {
    font-size: 1.9rem;
  }

  .aboutus-content p {
    font-size: 1.3rem;
    line-height: 2.1rem;
  }

  .aboutus-content p img {
    width: 1.6rem;
  }

  .card {
    width: 26dvw;
  }

  .about-data h3 {
    font-size: 1.6rem;
    letter-spacing: 0.6rem;
  }

  .about-data p {
    font-size: 1.1rem;
  }
}

/* tv */
@media screen and (min-width: 1400px) {

  /* =======================
    First
======================= */
  .first-content {
    flex-direction: row;
    justify-content: space-around;
  }

  .first-head h1 {
    font-size: 2.2rem;
  }

  @keyframes textback {
    100% {
      background-position: 1300px 0;
    }
  }

  .first-head h2 {
    font-size: 1.7rem;
  }

  .first-head h2 img {
    height: 3.5rem;
  }

  .first-buttons {
    flex-direction: row;
  }

  .btn-starter {
    font-size: 1.1rem;
    padding: 1.0rem 2.2rem;
    margin: 0.5rem 0.8rem;
  }

  .btn-starter i {
    width: 1.3rem;
    scale: 1.3;
    margin-inline-end: 1rem;
  }

  .btn-starter-play {
    display: flex;
  }

  /* =======================
    Better
======================= */
  .better-content h2 {
    font-size: 1.9rem;
  }

  .better-container {
    font-size: 1.3rem;
  }

  .row-group {
    width: 80vw;
    flex-direction: row;
  }

  .rows {
    height: 13rem;
  }

  .rows .texts .head-mobile {
    display: none;
  }

  .rows::before {
    background-size: 5rem;
  }

  .rows:hover::before {
    opacity: 0;
  }

  .row-group:hover .rows:hover {
    flex-basis: 25%;
  }

  .rows:hover .texts h3 {
    top: 5%;
    left: 7%;
    transform: none;
    color: #ff00ef;
  }

  .rows:hover .texts p {
    display: block;
    opacity: 1;
  }

  /* =======================
    Statistics
======================= */
  .statistics-content h2 {
    font-size: 1.9rem;
  }

  .statistics-content p {
    font-size: 1.3rem;
    line-height: 1.8rem;
  }

  .statistics-row {
    justify-content: space-around;
  }

  .statistics-rows {
    width: 30%;
  }

  .statistics-rows .head {
    font-size: 1.5rem;
  }

  .statistics-rows .countUP {
    font-size: 2.1rem;
  }

  /* =======================
    Jobs
======================= */
  .jobs-content h2 {
    font-size: 1.9rem;
  }

  .jobs-content p {
    font-size: 1.5rem;
    line-height: 1.9rem;
  }

  .jobs-rows {
    height: 35dvh;
  }

  .jobs-detail {
    overflow: hidden;
    height: fit-content;
    position: absolute;
    width: 70dvw;
  }

  .prev,
  .next {
    display: block;
  }

  .jobs-image {
    display: block;
    width: 20%;
  }

  .jobs-texts {
    text-align: start;
    font-size: 1.4rem;
    width: 65%;
  }

  .jobs-texts p {
    font-size: 1.3rem;
  }

  /* =======================
    About Us
======================= */
  .aboutus-content h2 {
    font-size: 1.9rem;
  }

  .aboutus-content p {
    font-size: 1.3rem;
    line-height: 2.1rem;
  }

  .aboutus-content p img {
    width: 1.6rem;
  }

  .card {
    width: 20rem;
  }

  .about-data h3 {
    font-size: 1.6rem;
    letter-spacing: 0.6rem;
  }

  .about-data p {
    font-size: 1.1rem;
  }
}

/* =======================
  Optional Responsive
======================= */