:root {
  --section-side-padding: 14vw;

  --mobile-side-padding: 17vw;
  --mobile-heading-font-size: 9vw;

  --orange: #ff7a2f;
  --grad-blue: rgba(68, 94, 255, 0.7);
}

body {
  font-family: "Poppins", sans-serif;
  overflow-x: clip;
  margin: 0;
  padding-top: 1vw;
  background-color: black;
  color: white;
}

section {
  display: flex;
  flex-direction: column;
  padding: 1vw var(--section-side-padding);
  min-height: 50vw;
}

hr {
  border: none;
  background-color: #445eff;
  height: 0.4vw;
  min-height: 4px;
  opacity: 0.7;
}

button:hover {
  cursor: pointer;
}

a:hover {
  cursor: pointer;
}

input:focus {
  outline: none;
}

img {
  pointer-events: none;
}

.orange-text {
  color: var(--orange);
}

.flex-container {
  display: flex;
  flex-direction: row;
}

.mobile-invisible {
  display: none;
}

.blur-nav-container {
  transition: filter 0.3s ease-in-out;
}

.blur-nav-container.blur {
  filter: blur(0.8vw);
  pointer-events: none;
}

.blank-butts {
  background: none;
  border: none;
}

.font-size-50 {font-weight: 50% }
.font-100 {font-weight: 100 }
.font-200 {font-weight: 200 }
.font-300 {font-weight: 300 }
.font-400 {font-weight: 400 }
.font-500 {font-weight: 500 }
.font-600 {font-weight: 600 }
.font-700 {font-weight: 700 }

/* Samll Navbar */

.expanded-navbar {
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-close-butt {
  position: absolute;
  margin: 5vw 1vw;
  z-index: 1;
}

.nav-close-butt > svg {
  width: 7vw;
  height: auto;
}

.nav-open-grad {
  position: absolute;
  width: 40vw;
  height: 130vh;
  left: 0;
  margin: 0;
}

.nav-toggler {
  display: none;
  position: absolute;
  margin: 6vw 0vw;
}

.small-navbar-link {
  display: block;
}

.small-nav-hr {
  background-color: white;
  margin-left: 4vw;
  height: 0.1vw;
}

/* Contact-Us Page */

.contact-us-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact-us-page > * {
  position: absolute;
  display: flex;
  flex-direction: column;
}

.contact-tbox-cont {
  align-items: center;
}

.input-container > .contact-info {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  font-weight: 400;
  border: none;
  border-radius: 100vw;
  font-size: 1.2vw;
  text-align: center;
  opacity: 0.9;
  margin: 1vw 0;
  display: block;
}

.input-container > *::placeholder {
  color: white;
  opacity: 1;
}

.input-container * {
  text-align: center;
}



#contact-submit-butt {
  font-size: 1vw;
  position: relative;
  top: 11vw;
  padding: 0.5vw 2vw;
}

.contact-submit-butt:hover {
  background-image: linear-gradient(
    to top,
    white 0%,
    #c8c8c8 80%,
    #a7a6a6 100%
  );
  color: #4152b3;
}

.translucent-textbox {
  padding: 1.2vw 1.1vw;
  width: 15vw;
  height: 0.4vw;
}

.translucent-dropdown {
  height: 2.9vw;
  width: 17.2vw;
}

.translucent-dropdown option {
  color: black;
  text-align: center;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("../images/custom-arrow.png");
  background-size: 0.8vw;
  background-position: 15.4vw center;
  background-repeat: no-repeat;
  text-align-last: center;
}

a {
  text-decoration: none;
}

.contact-us-bg {
  height: 36vw;
  width: 23vw;
  border-radius: 2.5vw;
}

.contact-us-logo-cont {
  position: absolute;
  opacity: 1;
  bottom: 18vw;
  text-align: center;
}

.contact-close-butt {
  position: absolute;
  left: 16vw;
  bottom: 21.8vw;
}

.contact-close-butt > svg {
  width: 2vw;
  height: auto;
}

/* Products page */

.products-page {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.products-containers {
  position: absolute;
}

.products-image {
  width: 40vw;
  border-radius: 2vw;
}

.products-close-butt {
  position: relative;
  left: 18vw;
  bottom: 15.5vw;
}

.products-close-butt-img {
  width: 2vw;
  height: auto;
}

/* Navbar */

nav {
  display: flex;
}

.nav-link {
  color: white;
  transition: 150ms;
  font-size: 0.95vw;
  font-weight: 500;
  opacity: 0.9;
  background: none;
  border: none;
  margin: auto 1.5vw;
}

.nav-link:hover {
  color: #536bff;
}

#navbar-section {
  justify-content: space-between;
  padding: 1.9vw 10vw;
}

#grad-logo-cont {
  display: flex;
  justify-content: center;
  align-items: center;
}

#grad-logo-cont > * {
  position: absolute;
}

.hero-grad {
  width: 75vw;
  z-index: -1;
  opacity: 0.9;
}

.logo {
  width: 3.9vw;
}

/* Hero Section */

#hero-section {
  min-height: 85vh;
}

.your-workforce {
  font-family: "Exo", sans-serif;
  font-size: 3.3vw;
  line-height: 122%;
  width: 39vw;
  text-align: center;
  margin: 10vw auto 0;
  align-self: center;
}

.turn-you {
  align-self: center;
  text-align: center;
  font-weight: 400;
  font-size: 1.5vw;
}

.why-button {
  background-image: linear-gradient(
    to bottom,
    white 0%,
    #c8c8c8 51%,
    #a7a6a6 100%
  );
  border: none;
  color: #4152b3;
  padding: 0.7vw 2vw;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 1.3vw;
  margin: 1.5vw;
  border-radius: 100vw;
  transition: 150ms;
}

.why-button:hover {
  background-image: linear-gradient(to top, #071149 0%, #596ddf 100%);
  color: white;
}

.butt-container-1 {
  display: flex;
  justify-content: center;
}
.hero-text {
  opacity: 0.82;
}
.why-button:hover #why-button-text {
  opacity: 0.8;
}

/* About Us */

#abt-us-grad {
  position: absolute;
  height: 7.5vw;
  z-index: -1;
}

#about-us-head {
  font-weight: 500;
  font-size: 4.2vw;
  opacity: 0.9;
  margin: 0;
  padding: 0.6vw 0;
}

.about-us-text {
  position: relative;
  left: 3vw;
}

#about-us-hr {
  margin-top: 3vw;
  width: 63.3vw;
}

.about-us-content {
  opacity: 0.9;
}

.welcome-text {
  font-weight: 600;
  font-size: 2.3vw;
  padding: 0;
}

.abt-us-para {
  margin-top: 0;
  font-weight: 400;
  line-height: 180%;
  width: 59vw;
  font-size: 1.4vw;
}

.we-believe {
  font-weight: 300;
  font-size: 1.7vw;
  width: 70vw;
}

.learn-more {
  font-size: 1.9vw;
  margin: 0;
  font-weight: 600;
}

/* Know your threats */

#threats-section {
  flex-direction: row;
}

.know-your-threats {
  margin: 0 auto;
  font-weight: 400;
  font-size: 4vw;
  opacity: 0.9;
  line-height: 130%;
}

.know-hr {
  height: 0.7vw;
  margin: 1vw 0 2vw;
  width: 22vw;
}

.know-para {
  font-weight: 300;
  opacity: 0.7;
  font-size: 1.6vw;
  line-height: 130%;
  width: 22vw;
  margin: 0;
}

.know-left {
  flex: 3;
  margin-right: 8vw;
}
.know-right {
  flex: 6;
  padding-left: 0;
}

#perc-grad {
  position: absolute;
  height: 24vw;
  z-index: -1;
  opacity: 0.9;
}

.percent {
  font-family: "Outfit", sans-serif;
  font-size: 9vw;
  margin: 0 2vw 0 3.2vw;
  opacity: 0.8;
  text-shadow: 0.1vw 0.3vw 0.5vw rgb(46, 46, 46);
  font-weight: 400;
}

.perc-para {
  font-weight: 300;
  font-size: 1.35vw;
  width: 19vw;
  position: relative;
  top: 3.5vw;
  left: 2.5vw;
  line-height: 125%;
  opacity: 0.9;
  margin: 0.5vw;
}

/* Training */

#training-section {
  padding-bottom: 12vw;
  opacity: 0.9;
}

.training-prog-col {
  padding: 0;
  flex: 7;
  background-image: url("../images/bottom-grad.png");
  background-repeat: no-repeat;
  background-size: contain;
}

#training-program-head {
  font-weight: 500;
  font-size: 3.7vw;
  margin-top: 8vw;
  margin-bottom: 2vw;
}

.training-all-text {
  margin: auto 3.4vw;
}

.training-para {
  font-weight: 300;
  font-size: 1.25vw;
  opacity: 0.9;
  line-height: 180%;
}

.training-bullets {
  color: var(--orange);
  font-weight: 600;
  font-size: 125%;
}

#what-youll-learn {
  font-size: 1.5vw;
  margin-top: 3.5vw;
  font-weight: 600;
  opacity: 0.95;
}

#learn-list {
  line-height: 160%;
  font-size: 1.2vw;
  font-weight: 400;
}

.appli-col {
  background-image: url("../images/top-grad.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  background-size: cover;
  background-color: rgba(0, 0, 00.1);
  padding: 0;
  flex: 5;
}

#appli-hr {
  background-color: var(--orange);
  opacity: 0.8;
  margin: 1vw 0 5vw;
}

.appli-form {
  padding: 0;
}

.appli-head {
  font-weight: 400;
  margin: 16vw 7% 0;
  font-size: 2vw;
}

.appli-content {
  font-size: 1.1vw;
  font-weight: 500;
  margin-left: 9%;
  margin-bottom: 0;
}

.appli-tbox {
  background-color: transparent;
  box-shadow: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  border-color: white;
  width: 23vw;
  margin-bottom: 1vw;
  color: white;
  font-weight: 300;
  font-size: 1.2vw;
}

.appli-butt {
  background-color: white;
  font-weight: 600;
  justify-self: center;
  font-size: 1.1vw;
  border: none;
  color: #4152b3;
  padding: 0.7vw 2.8vw;
  font-family: "Inter", sans-serif;
  border-radius: 2vw;
  transition: 150ms;
  margin: 2.3vw auto 10vw;
  box-shadow: 0.1vw 0.05vw 0.5vw rgba(0, 0, 0, 0.7);
}

.appli-butt:hover {
  background-color: #596ddf;
  color: white;
}

.appli-ast {
  color: #ff0303;
}

/* Footer */

#footer-section {
  flex-direction: row;
  height: 11.4vw;
  min-height: 0;
  padding-right: 17.4vw;
  padding-left: 17.4vw;
  background-color: rgb(16, 16, 16);
}

#footer-section > * {
  opacity: 0.75;
}

.footer-part {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5vw 0;
}

.foot-1 {
  flex: 8;
  padding-top: 1.2vw;
}

.foot-2 {
  flex: 5;
}

.foot-3 {
  flex: 5;
}

.foot-4 {
  flex: 5;
}

.verticle {
  width: 0.15vw;
  background-color: white;
  margin: 2vw 1.6vw;
}

#kosmonel-footer {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3.5vw;
  margin-top: 0;
  margin-bottom: 0.3vw;
  font-weight: 600;
  color: white;
  text-decoration: none;
}

#kosmonel-footer:hover {
  cursor: pointer;
}

#footer-hr {
  background-color: white;
  height: 0.1vw;
  width: 15vw;
}

.footer-img {
  width: 1.5vw;
  height: auto;
  margin: 0.8vw;
  margin-left: 0;
}

.copyright {
  font-size: 0.8vw;
}

.footer-small-text {
  display: block;
  color: white;
  font-size: 0.9vw;
  margin: 0.4vw;
  width: 10vw;
}

.footer-bold {
  font-weight: 700;
  font-size: 1.1vw;
  width: 10vw;
  margin-top: 0;
}

.meow {
  display: inline-flex;
}



/* Mobile */

@media (max-width: 768px) {
  body {
  }

  section {
    padding-left: var(--mobile-side-padding);
    padding-right: var(--mobile-side-padding);
  }

  .mobile-visible {
    display: block;
  }

  .blur-nav-container.blur {
    filter: blur(3vw);
  }

  /* Contact-Us Page */

  .mobile-contact-logo {
    top: 5.6vw;
    z-index: 2;
  }

  .contact-submit-butt {
    font-size: 1vw;
    position: relative;
    top: 15vw;
    padding: 2vw 2vw;
  }

  .contact-submit-butt:hover {
    background-image: linear-gradient(
      to top,
      white 0%,
      #c8c8c8 80%,
      #a7a6a6 100%
    );
    color: #4152b3;
  }

  .input-container {
    padding-top: 20vw;
    text-align: center;
  }


  .input-container > .contact-info {
    font-size: 4vw;
    margin-top: 4vw;
  }

  .translucent-textbox {
    padding: 4.5vw 2vw;
    width: 65vw;
    height: 0.4vw;
  }

  .translucent-dropdown {
    height: 9.5vw;
    width: 69vw;
  }
  select {
    background-size: 3vw;
    background-position: 62vw center;
  }

  #contact-butt-mobile {
    font-size: 4vw;
    margin-top: 12vw;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 1.8vw;
    padding-bottom: 1.8vw;
  }

  .contact-us-bg {
    height: 100vh;
    width: 100vw;
    border-radius: 0;
  }

  .contact-us-logo-cont {
    position: absolute;
    top: 0;
    opacity: 1;
    bottom: 18vw;
    text-align: center;
  }

  .contact-close-butt {
    position: absolute;
    left: -40vw;
    top: 0;
    align-self: flex-end;
  }

  .contact-close-butt > svg {
    width: 5vw;
    height: auto;
  }

  /* Products page */

  .products-page {
    background-color: black;
    height: 110vh;
  }

  .products-containers {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 35vw;
  }

  .products-image {
    width: 70vw;
    border-radius: 5vw;
  }

  .coming-soon {
    position: absolute;
    top: -7vw;
    width: 55vw;
    height: auto;
  }

  .products-close-butt {
    position: relative;
    left: 42vw;
    bottom: 30vw;
  }

  .products-close-butt-img {
    width: 10vw;
    height: auto;
  }

  /* Navbar */

  #contact-us {
    position: absolute;
    left: 72vw;
    margin: 7vw 0vw;
    font-weight: 600;
    font-size: 2.5vw;
  }

  .small-navbar-link {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.5vw;
    margin-top: 4vw;
    font-weight: 500;
    opacity: 1;
    top: 15vw;
    left: 8.5vw;
  }

  #grad-logo-cont {
    height: 18vw;
    overflow-x: clip;
  }

  .logo {
    width: 12vw;
  }

  .hero-grad {
    width: 100vw;
  }

  .nav-toggler {
    display: block;
  }

  .nav-toggler-img {
    width: 6vw;
    height: auto;
  }


  /* Hero Section */

  #hero-section {
    padding-left: 0;
    padding-right: 0;
    padding-top: 5vh;
  }

  .your-workforce {
    font-size: 6vw;
    width: 65vw;
    margin: 18vw auto 0;
  }

  .turn-you {
    font-size: 3.4vw;
    width: 55vw;
  }

  .why-button {
    padding: 1.7vw 5vw;
    font-size: 3.3vw;
    margin-top: 10vw;
    margin-bottom: 35vh;
  }


  /* About Us */

  #about-us-section {
    margin-bottom: 60vw;
  }

  #abt-us-grad {
    height: 15vw;
  }

  #about-us-head {
    font-size: var(--mobile-heading-font-size);
    left: 4vw;
  }

  .about-us-text {
    left: 1.5vw;
  }

  #about-us-hr {
    margin-top: 6vw;
    width: 59vw;
  }

  .welcome-text {
    font-size: 5vw;
  }

  .abt-us-para {
    width: 58vw;
    font-size: 3.9vw;
  }

  .we-believe {
    font-size: 3.8vw;
    width: 70vw;
  }

  .learn-more {
    padding-top: 4vw;
    font-size: 4vw;
  }

  /* Know your threats */

  #threats-section {
    flex-direction: column;
    margin-bottom: 35vw;
  }

  .know-your-threats {
    font-size: var(--mobile-heading-font-size);
  }

  .know-hr {
    height: 1vw;
    margin: 4vw 0 5vw;
    width: 66vw;
  }

  .know-para {
    font-size: 4vw;
    width: 65vw;
    margin-bottom: 13vw;
  }

  .perc-flex {
    flex-direction: column;
  }

  #perc-grad {
    height: 100vw;
    width: 50vw;
  }

  .perc-content {
    position: relative;
    left: 3vw;
  }

  .percent {
    font-size: 23vw;
    margin: 0 2vw 0 3.2vw;
    text-shadow: 0.3vw 0.5vw 0.5vw rgb(46, 46, 46);
  }

  .perc-para {
    font-size: 4vw;
    line-height: 140%;
    width: 56vw;
    top: 0;
    left: 3.8vw;
  }

  /* Training */

  #training-section {
    padding: 0vw;
    margin-bottom: 31.5vw;
    flex-direction: column;
  }

  .training-grad {
    z-index: -1;
    position: absolute;
    left: 0;
    width: 100vw;
  }

  .training-prog-col {
    background: none;
    padding: 0 14vw;
  }

  #training-program-head {
    font-size: 6.8vw;
    margin-top: 15vw;
    margin-bottom: 3vw;
  }

  .training-para {
    font-size: 3.8vw;
    width: 64vw;
  }

  .training-hr {
    margin: 6vw 0;
    width: 58vw;
    height: 0.7vw;
  }
  .training-bullets {
    font-size: 125%;
  }

  #what-youll-learn {
    font-size: 5vw;
  }

  #learn-list {
    font-size: 3.6vw;
    width: 70vw;
  }

  .appli-col {
    background: none;
  }

  .appli-grad {
    position: absolute;
    left: 0;
    width: 100vw;
    z-index: -2;
    margin-bottom: 0;
  }

  #appli-hr {
    margin-left: 17vw;
    margin-right: 19vw;
    margin-bottom: 13vw;
  }

  .appli-head {
    margin: 25vw 17vw 2.5vw;
    font-size: 6.3vw;
  }

  .appli-content {
    font-size: 4vw;
    margin-left: 17vw;
  }

  .appli-tbox {
    width: 57vw;
    margin-bottom: 6vw;
    margin-top: 3vw;
    font-size: 4vw;
  }

  .appli-butt {
    margin-top: 10vw;
    font-size: 4vw;
    padding: 2vw 7vw;
    box-shadow: 0.2vw 0.1vw 1vw rgba(0, 0, 0, 0.7);
    border-radius: 10vw;
  }

  .appli-butt:hover {
    background-color: #596ddf;
    color: white;
  }

  .appli-ast {
    color: #ff0303;
  }

  /* Footer */

  #footer-section {
    flex-direction: column;
    height: 75vw;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  #footer-section > * {
    flex: unset;
  }

  .footer-bg {
    height: 60vw;
  }

  .footer-part {
    justify-content: center;
    padding: 0;
    display: block;
    margin: 4vw 0;
  }

  .footer-part > * {
    display: block;
  }

  .foot-1 {
    margin-top: 3vw;
    border: none;
    margin-left: 4vw;
  }

  .foot-2,
  .foot-3,
  .foot-4 {
    width: 100%;
    padding-left: 3vw;

    height: 25vw;
  }

  .foot-4 {
    order: -1;
  }

  .foot-4 > * {
    margin-bottom: 3vw;
  }

  .verticle {
    width: 0.15vw;
    background-color: white;
    margin: 2vw 1.6vw;
  }

  #kosmonel-footer {
    font-size: 12vw;
    margin-bottom: 0.5vw;
    display: block;
  }

  #footer-hr {
    background-color: white;
    height: 0.7vw;
    width: 44vw;
  }

  .footer-img {
    width: 5vw;
    margin: 2vw;
  }

  .copyright {
    font-size: 2.6vw;
    text-align: center;
    margin-left: 0;
  }

  .footer-small-text {
    display: block;
    font-size: 2vw;
    margin: 1.5vw 0;
    width: 20vw;
  }

  .footer-bold {
    font-size: 2.8vw;
    width: 28vw;
  }

  .footer-legal,
  .footer-contact-info {
    margin-top: 0vw;
    margin-bottom: 6vw;
  }
}