/* ==== mission page ==== */

.main--mission {
  padding-top: 6.25rem;
  margin: 0 2.5rem;
}

.mission__img1 {
  border-radius: 0.125rem;
  background-image: url("/assets/img/mission1.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: auto;
}

.mission__h1 {
  font-size: 2.5rem;
  font-weight: 800;
  font-family: var(--secondary-font);
  letter-spacing: 0.4rem;
  margin-bottom: 2rem;
}

.mission__p {
  font-weight: 500;
  line-height: 1.875rem;
  letter-spacing: 0.04rem;
  margin-bottom: 3rem;
  opacity: 0.8;
}

.mission__text {
  display: flex;
  flex-direction: column;
}

section.mission {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 1.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 0.0625rem solid rgba(225, 224, 220, 0.6);
}

/* our mission section */

section.our-mission {
  margin: 6.25rem 0;
  background-image: url("/assets/img/mission2.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.mission__h2 {
  font-family: var(--secondary-font);
  text-transform: uppercase;
  font-size: 4.5rem;
  font-weight: 800;
  letter-spacing: 0.72rem;
}

.transition__h2 {
  font-family: var(--secondary-font);
  text-transform: uppercase;
  font-size: 4.5rem;
  font-weight: 800;
  letter-spacing: 0.72rem;
  margin-left: -25rem;
}

.our-mission__text {
  width: 40vw;
  padding: 2.5rem 0;
}

.text-btn {
  background: none;
  border: none;
  color: var(--off-white);
  font-family: var(--primary-font);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}

.text-btn:hover {
  color: var(--green);
}

.arrow-icon {
  width: 3rem;
  height: 3rem;
  background-image: url("/assets/icons/arrow-white.svg");
  background-repeat: no-repeat;
  background-position: center;
  border: 0.125rem solid var(--off-white);
  border-radius: 100%;
  cursor: pointer;
}

.arrow-green {
  width: 3rem;
  height: 3rem;
  background-image: url("/assets/icons/arrow-green.svg");
  background-repeat: no-repeat;
  background-position: center;
  border: 0.125rem solid var(--green);
  border-radius: 100%;
  cursor: pointer;
}

/* security imperative section */

.imperative__img {
  width: 100%;
  height: auto;
  background-image: url("/assets/img/mission3.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

section.imperative {
  margin: 6.25rem 0;
  margin-top: 18.75rem;
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 1.5rem;
  justify-content: flex-start;
}

.imperative__p {
  font-weight: 500;
  line-height: 1.875rem;
  letter-spacing: 0.04rem;
  margin: 2.5rem 0 3rem 0;
  opacity: 0.8;
}

/* our approach section */

.our-approach {
  background-image: url("/assets/img/mission4.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 6.25rem;
}

.to-top {
  width: 2.5rem;
  height: 2.5rem;
  background-image: url("/assets/icons/Arrow\ up.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border-radius: 100%;
  border: 0.125rem solid var(--off-white);
  margin: 2.5rem 2.5rem 2.5rem auto;
  cursor: pointer;
}

.to-top:hover {
  background-image: url("/assets/icons/Arrow-up-green.svg");
  border: 0.125rem solid var(--green);
  transition: all 0.4s ease;
}

/* ===== capabilities page ===== */

.main--capabilities {
  padding-top: 6.25rem;
  margin: 0 2.5rem;
}

.capabilities__h1 {
  font-size: 2.5rem;
  font-weight: 800;
  font-family: var(--secondary-font);
  letter-spacing: 0.4rem;
  margin-bottom: 2rem;
}

.capabilities__p {
  font-weight: 500;
  line-height: 1.875rem;
  letter-spacing: 0.04rem;
  margin-bottom: 3rem;
  opacity: 0.8;
}

.capabilities__text {
  padding-bottom: 2.5rem;
}

.capabilities__video1 {
  width: 100%;
  mix-blend-mode: hard-light;
}

section.capabilities {
  display: grid;
  grid-template-columns: 60% 40%;
  align-items: flex-start;
  gap: 1.5rem;
  border-bottom: 0.0625rem solid rgba(225, 224, 220, 0.6);
}

.stop-video {
  font-size: 0.75rem;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}

.stop-video:hover {
  color: #fff;
}

.video-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  padding-bottom: 1.5rem;
}

.jamming__video-wrapper {
  width: 100%;
}

.pause {
  width: 1.25rem;
  height: 1.25rem;
}

/* spectral / jamming section */

section.spectral,
section.jamming {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 1.5rem;
  margin: 5rem 0;
  justify-content: flex-start;
}

.capabilities__h2 {
  font-family: var(--secondary-font);
  text-transform: uppercase;
  font-size: 4.5rem;
  font-weight: 800;
  letter-spacing: 0.72rem;
  padding-bottom: 2.5rem;
}

.spectral__text {
  padding-bottom: 2.5rem;
}

.spectral__img {
  background-image: url("/assets/img/capabilities1.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  opacity: 0.4;
}

/* neural section */

section.neural {
  display: grid;
  grid-template-columns: 60% 40%;
  justify-content: flex-start;
  gap: 1.5rem;
  margin: 5rem 0;
}
.neural__img {
  background-image: url("/assets/img/capabilities2.webp");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.4;
}

/* moduluar section */

section.modular {
  display: grid;
  grid-template-columns: 60% 40%;
  justify-content: flex-start;
  gap: 1.5rem;
  margin: 5rem 0;
}

.modular__img {
  background-image: url("/assets/img/capabilities3.webp");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.4;
}

/* engineering section */
section.engineering {
  display: grid;
  grid-template-columns: 60% 40%;
  justify-content: flex-start;
  gap: 1.5rem;
  margin: 5rem 0 0 0;
}

.engineering__img {
  background-image: url("/assets/img/capabilities4.webp");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.4;
}

/* ===== applicagtions page ===== */

.main--applications {
  padding-top: 2.5rem;
  margin: 6.25rem 2.5rem;
}

section.applications {
  display: grid;
  grid-template-columns: 60% 40%;
  justify-content: flex-start;
  gap: 1.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 0.0625rem solid rgba(225, 224, 220, 0.6);
}

.applications__h1 {
  font-size: 2.5rem;
  font-weight: 800;
  font-family: var(--secondary-font);
  letter-spacing: 0.4rem;
  margin-bottom: 2rem;
}

.applications__p {
  font-weight: 500;
  line-height: 1.875rem;
  letter-spacing: 0.04rem;
  margin-bottom: 3rem;
  opacity: 0.9;
}

.applications__img {
  background-image: url("/assets/img/application1.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
}

.applications__h2 {
  font-family: var(--secondary-font);
  text-transform: uppercase;
  font-size: 4.5rem;
  font-weight: 800;
  letter-spacing: 0.72rem;
  padding: 6.25rem 0 2.5rem 0;
  opacity: 0.4;
}

#global__h2 {
  font-family: var(--secondary-font);
  text-transform: uppercase;
  font-size: 4.5rem;
  font-weight: 800;
  letter-spacing: 0.72rem;
  padding: 6.25rem 0 2.5rem 0;
  opacity: 0.3;
}

.applications__cardWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-left: 15%;
  gap: 1.5rem;
}

.applications__card___h3 {
  font-size: 2.25rem;
  font-family: var(--secondary-font);
  font-weight: 800;
  letter-spacing: 0.225rem;
  height: 5rem;
}

.applications__card__p {
  min-height: 7.5rem;
  font-weight: 400;
  line-height: 1.875rem;
  letter-spacing: 0.04rem;
  opacity: 0.8;
}

.applications__card {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 0.0313rem solid rgba(225, 224, 220, 0.5);
}

.applications__card:hover {
  border-bottom: 0.0313rem dashed var(--green);
}

.applications__card__img1 {
  width: 100%;
  height: 14.375rem;
  background-image: url("/assets/img/application2.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0.125rem;
}

.applications__card__img1:hover,
.applications__card__img2:hover,
.applications__card__img3:hover,
.applications__card__img4:hover,
.applications__card__img5:hover,
.applications__card__img6:hover,
.applications__card__img7:hover,
.applications__card__img8:hover,
.applications__card__img9:hover,
.applications__card__img10:hover {
  opacity: 0.6;
}

.applications__card__img2 {
  width: 100%;
  height: 14.375rem;
  background-image: url("/assets/img/application3.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0.125rem;
}

.applications__card__img3 {
  width: 100%;
  height: 14.375rem;
  background-image: url("/assets/img/application4.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0.125rem;
}

.applications__card__img4 {
  width: 100%;
  height: 14.375rem;
  background-image: url("/assets/img/application5.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0.125rem;
}

.applications__card__img5 {
  width: 100%;
  height: 14.375rem;
  background-image: url("/assets/img/application6.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0.125rem;
}

.applications__card__img6 {
  width: 100%;
  height: 14.375rem;
  background-image: url("/assets/img/application7.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0.125rem;
}

.applications__card__img7 {
  width: 100%;
  height: 14.375rem;
  background-image: url("/assets/img/application8.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0.125rem;
}

.applications__card__img8 {
  width: 100%;
  height: 14.375rem;
  background-image: url("/assets/img/application9.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0.125rem;
}

.applications__card__img9 {
  width: 100%;
  height: 14.375rem;
  background-image: url("/assets/img/application10.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0.125rem;
}

.applications__card__img10 {
  width: 100%;
  height: 14.375rem;
  background-image: url("/assets/img/application11.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0.125rem;
}

.applications__btn {
  display: flex;
  margin: 0 auto;
}

/* global reach section */

section.global-reach {
  width: 100%;
  background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 40.52%,
      #000 78.56%
    ),
    url("/assets/img/application12.webp");
  background-repeat: no-repeat no-repeat;
  background-size: cover cover;
  margin: 6.25rem 0 2.5rem 0;
}

.span--textShadow {
  text-shadow: 0.5rem 1.25rem 4.375rem hsla(167, 100%, 50%, 0.9);
}

.global-reach__p {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 2.5rem;
  letter-spacing: 0.125rem;
  width: 60vw;
  margin: 0rem auto 5rem auto;
  opacity: 0.8;
}

#global__h2 {
  padding: 1.5rem 0;
  mix-blend-mode: screen;
}

#contact-btn {
  display: flex;
  margin: 0 0 0 auto;
}

/* ===== contact page ===== */

.body--contact {
  background-image: url("/assets/img/dots-light.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
}

.main--contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20%;
  margin: 6.25rem 2.5rem;
}

/* left-side */

.contact__h1 {
  font-size: 4.5rem;
  font-family: var(--secondary-font);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5625rem;
  margin-bottom: 2.5rem;
}

.contact__p {
  font-weight: 300;
  line-height: 1.875rem;
  letter-spacing: 0.04rem;
  opacity: 0.8;
}

.contact__info__item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  letter-spacing: 0.06rem;
  font-weight: 500;
  padding: 1rem;
  border-radius: 0.125rem;
  border-left: 0.0625rem solid var(--green);
  background: var(--black-shade, #111717);
  backdrop-filter: blur(1.25rem);
}

.contact__info__item:hover {
  border-left: 0.0625rem dotted var(--green);
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 6.25rem 0 2.5rem 0;
}

.contact__h2 {
  font-family: var(--secondary-font);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: 0.225rem;
  display: flex;
  padding: 0.5rem 1.5rem;
  align-items: center;
  border-left: 0.125rem solid var(--green);
  margin-bottom: 2.5rem;
}

.contact__h2:hover {
  border-left: 0.125rem dotted var(--green);
}

/* right-side form*/

.contact__form {
  display: flex;
  flex-direction: column;
  position: relative;
}

#form--title {
  text-transform: uppercase;
  letter-spacing: 0.625rem;
}

label {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.04rem;
  margin: 1.5rem 0 0.5rem 0;
}

input {
  display: flex;
  height: 3.75rem;
  padding: 1rem;
  border-radius: 0.125rem;
  background: var(--black-shade);
  border: none;
  border-bottom: 0.0625rem solid var(--green);
  font-family: var(--primary-font);
  font-size: 1rem;
  color: var(--off-white);
  margin-bottom: 1rem;
}

.span--red {
  color: var(--red);
  padding-left: 0.125rem;
}

.error {
  display: none;
  font-size: 0.75rem;
  color: var(--red);
  margin-top: 0rem;
}

textarea {
  display: flex;
  height: 16.25rem;
  padding: 1rem;
  border-radius: 0.125rem;
  border: none;
  border-bottom: 0.0625rem solid var(--green);
  background: var(--black-shade);
  backdrop-filter: blur(1.25rem);
  font-family: var(--primary-font);
  font-size: 1rem;
  color: var(--off-white);
  margin-bottom: 1.5rem;
}

.submit-btn {
  font-family: var(--primary-font);
  color: var(--green);
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  font-weight: 700;
  background-color: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  border: 0.25rem solid transparent;
  position: relative;
  width: 20rem;
  height: 5rem;
  z-index: 1;
  cursor: pointer;
  gap: 1rem;
  margin: 2.5rem auto;
}

.submit-btn::before {
  content: "";
  position: absolute;
  width: 20rem;
  height: 5rem;
  background: var(--green-gradient);
  border-radius: 0.25rem;
  z-index: -10;
}

.submit-btn::after {
  content: "";
  position: absolute;
  width: 19.5rem;
  height: 4.5rem;
  background: var(--bg);
  z-index: -4;
}

.submit-btn:hover {
  box-shadow: var(--green-shadow);
  transition: all 0.6s ease;
}

#result {
  font-size: 1.5rem;
  color: var(--green);
  font-weight: 500;
  text-align: center;
}

/* ==== responsive ==== */

/* mission page responsive*/

@media (max-width: 68.75rem) {
  section.mission,
  section.imperative {
    grid-template-columns: 1fr 1fr;
  }

  .our-mission__text {
    width: 90%;
  }
  .mission__h2,
  .transition__h2 {
    font-size: 3.5rem;
  }
}

@media (max-width: 51.25rem) {
  section.mission,
  section.imperative {
    grid-template-columns: 1fr;
  }

  .mission__img1 {
    height: 15rem;
  }

  .imperative__img {
    height: 15rem;
  }
}

@media (max-width: 37.5rem) {
  .mission__h1 {
    font-size: 2.25rem;
  }

  .mission__h2,
  .transition__h2 {
    font-size: 3rem;
  }
  section.our-mission {
    background-image: linear-gradient(
        to right,
        var(--bg) 0%,
        rgba(0, 0, 0, 0) 100%
      ),
      url("/assets/img/mobile-mission2.webp");
  }

  .our-approach {
    background-image: linear-gradient(
        to right,
        var(--bg) 0%,
        rgba(0, 0, 0, 0) 100%
      ),
      url("/assets/img/mobile-mission4.webp");
  }

  .main--mission {
    margin: 0 1rem;
  }
}

@media (max-width: 30rem) {
  .mission__h1 {
    font-size: 1.875rem;
  }
  .mission__h2,
  .transition__h2 {
    font-size: 2.25rem;
  }

  .mission__p {
    font-size: 0.875rem;
    font-weight: 300;
  }

  section.our-mission,
  section.mission,
  section.imperative {
    margin-bottom: 2.5rem;
  }
}

/* capabilities page responsive*/

@media (max-width: 68.75rem) {
  section.capabilities,
  section.spectral,
  section.jamming,
  section.neural,
  section.modular,
  section.engineering {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 51.25rem) {
  section.capabilities,
  section.spectral,
  section.jamming,
  section.neural,
  section.modular,
  section.engineering {
    grid-template-columns: 1fr;
  }

  .spectral__img,
  .neural__img,
  .modular__img,
  .engineering__img {
    height: 20rem;
    background-size: cover;
    background-position: center;
    grid-row-start: 1;
  }

  .capabilities__h2 {
    font-size: 3.125rem;
  }
}

@media (max-width: 37.5rem) {
  .capabilities__h1 {
    font-size: 1.75rem;
  }
  .capabilities__h2 {
    font-size: 2.5rem;
  }

  .main--capabilities {
    margin: 0 1rem;
  }

  section.capabilities,
  section.spectral,
  section.jamming,
  section.neural,
  section.modular,
  section.engineering {
    margin: 1.25rem 0;
  }
}

@media (max-width: 30rem) {
  .capabilities__h1 {
    font-size: 1.5rem;
  }
  .capabilities__h2 {
    font-size: 1.5rem;
  }

  .capabilities__p {
    font-size: 0.875rem;
    font-weight: 300;
  }
}

/* applications page responsive */

@media (max-width: 68.75rem) {
  section.applications {
    grid-template-columns: 1fr 1fr;
  }
  .applications__cardWrapper {
    margin-left: 15%;
  }

  .applications__h2,
  #title-government {
    font-size: 3rem;
  }
}

@media (max-width: 55rem) {
  section.applications {
    grid-template-columns: 1fr;
  }

  .applications__img {
    background-size: cover;
    height: 25rem;
  }

  .applications__cardWrapper {
    margin-left: 0;
  }

  .applications__card___h3 {
    font-size: 1.875rem;
    height: 4.375rem;
  }

  .global-reach__p {
    width: 100%;
  }
}

@media (max-width: 43.75rem) {
  .main--applications {
    width: 90%;
    margin: 2.5rem auto;
  }

  .applications__h2,
  #global__h2,
  #title-government {
    font-size: 2.25rem;
  }
  .applications__card___h3 {
    font-size: 1.5rem;
    height: 3.5rem;
  }
  .applications__card__p {
    line-height: 1.75rem;
  }
}

@media (max-width: 37.5rem) {
  .applications__img {
    background-image: url("/assets/img/mobile-application1.webp");
  }

  section.global-reach {
    background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 40.52%,
        #000 78.56%
      ),
      url("/assets/img/mobile-application12.webp");
  }

  .applications__cardWrapper {
    grid-template-columns: 1fr;
    margin: 0;
  }

  section.global-reach {
    height: auto;
    margin: 1.5rem 0 0 0;
  }

  .global-reach__p {
    font-weight: 400;
    font-size: 1rem;
  }

  #contact-btn {
    margin: 0 auto;
  }
}

@media (max-width: 30rem) {
  .applications__h2,
  #global__h2,
  #title-government {
    font-size: 1.75rem;
    padding: 2.5rem 0 2.5rem 0;
  }

  .applications__card___h3 {
    font-size: 1.25rem;
    height: 2.5rem;
  }

  .applications__card__p {
    font-weight: 300;
    font-size: 0.875rem;
  }

  .global-reach__p {
    line-height: 1.875rem;
  }
}

/* === contact page responsive === */

@media (max-width: 62.5rem) {
  .main--contact {
    grid-template-columns: 40% 60%;
    gap: 2rem;
  }
}

@media (max-width: 50rem) {
  .main--contact {
    grid-template-columns: 1fr;
  }

  .contact__info {
    margin: 2.5rem 0;
  }

  .contact__form {
    margin-top: 5rem;
  }
}

@media (max-width: 37.5rem) {
  .main--contact {
    margin: 6.25rem 1rem;
  }
}