* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}

body {
   /* background: var(--bg-primary); */
   overflow-x: hidden;
   max-width: 100vw;
   /* background: url('../img/bg.jpg'); */
   background: linear-gradient(0deg, #E7F1FD 10%, #E7F1FD 20%,#fff 0%);
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;

   /* background: var(--white); */
   
}

:root {
    --bg-primary: #E7F1FD;
    --primary-color: #5D3BCD;
    --white: #ffffff;
    --dark: #1C1C1C;
    --secondary-text: #505050;
}

.bg-primary {
   background: var(--bg-primary);
}

.white {
   background: var(--white);
}

.dark {
   background: var(--dark);
}

.primary-color {
   background-color: var(--primary-color);
}

/* DESKTOP TYPOGRAPHY  */

span {
    color: var(--white);
    font-family: Chakra Petch;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 100% */
    letter-spacing: 0.365px;
}

/* Desktop/H1 */
h1 {
   font-family: Chakra Petch;
   font-size: 80px;
   font-style: normal;
   font-weight: 700;
   line-height: 88px; /* 110% */
   letter-spacing: 0.912px;

   color: var(--dark);
}

h2 {
    font-size: 64px;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 600;
    letter-spacing: 0.73px;
    word-wrap: break-word;

    color: var(--dark);
}

/* Desktop/H3 */
h3 {
   font-family: Chakra Petch;
   font-size: 56px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
   letter-spacing: 0.638px;

   color: var(--dark);
}

/* Desktop/H4 */
h4 {
   font-family: Chakra Petch;
   font-size: 32px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
   letter-spacing: 0.365px;

   color: var(--dark);
}

/* Desktop/Subtitle */
.subtitle {
   font-family: Chakra Petch;
   font-size: 24px;
   font-style: normal;
   font-weight: 500;
   line-height: 32px; /* 133.333% */
   letter-spacing: 0.274px;

   color: var(--dark);
}


/* Desktop/highlight */


/* Desktop/P */
p {
   font-family: Chakra Petch;
   font-size: 20px;
   font-style: normal;
   font-weight: 300;
   line-height: 32px; /* 160% */
   letter-spacing: 0.228px;
   color: var(--secondary-text);
}

a {
    font-size: 16px;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0.18px;
    word-wrap: break-word;
}

button {
    font-size: 16px;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0.18px;
    word-wrap: break-word;
}

.white-button {
   padding: 8px 24px;
   border-right: 1px solid var(--white);
   border-left: 1px solid var(--white);
   border-top: none;
   border-bottom: none;
   color: var(--white);
   cursor: pointer;
   
   background: linear-gradient(to right, #fff 50%, #ffffff00 0%);
   background-size: 200% 100%;
   background-position: right bottom;
   transition: all .2s ease-out;
}

.white-button:hover {
  background-position: left bottom;
  color: var(--primary-color);
}


.accent-button {
   padding: 8px 24px;
   border-right: 1px solid var(--secondary-text);
   border-left: 1px solid var(--secondary-text);
   border-top: none;
   border-bottom: none;
   color: var(--secondary-text);
   cursor: pointer;
   
   background: linear-gradient(to right, var(--primary-color) 50%, #ffffff00 0%);
   background-size: 200% 100%;
   background-position: right bottom;
   transition: all .2s ease-out;
}

.accent-button:hover {
  background-position: left bottom;
  color: var(--white);
}


 /* NAVBAR BEGINS */

.logo a {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1em;
   text-decoration: none;
}

header .navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  height: 10vh;
  min-width: 100%;
  z-index: 10;
  padding: 2% 10% 2% 8%;
  /* mix-blend-mode: color-dodge; */
}

header .navigation .logo{
  margin-left: 20px;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

header .navigation .logo h1{
  color: var(--white);
}

header .navigation .menu-list {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  margin: auto 20px auto 0;
}

header .navigation .hamburger {
  margin-right: 20px;
  display: none;
 }
 
header .navigation .hamburger .bar{
  width: 30px;
  height: 2px;
  margin: 7px;
  background: var(--white);
 }

header .navigation .menu-list li a {
  color: var(--white);
  cursor: pointer;
  text-decoration: none;
}

/* NAVBAR ENDS */

.hero {
   width: 100%;
   height: 100vh;
   background: url('../img/bg-hero.jpg');
   background-position: right;
   background-repeat: no-repeat;
   background-size: cover;
   z-index: 0 !important;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
}

.svg-overlay {
   opacity: 0.5;
   background: linear-gradient(327deg, rgba(93, 59, 205, 0.00) 0%, #5D3BCD 100%);
   backdrop-filter: blur(2px);
   z-index: 1 !important;
   width: 100%;
   height: 100vh;
   position: absolute;
}

.spacer {
   height: 5%;
}

.line {
   background: linear-gradient(92deg, rgba(255, 255, 255, 0.00) 0%, #FFF 50.09%, rgba(255, 255, 255, 0.00) 100%);
   height: 1px;
   width: 100%;
   z-index: 9 !important;
}

.hero-content-wrapper {
   z-index: 9 !important;
   width: 70%;
   align-self: flex-start;
   padding: 5vh 9vw;
}

.hero-content-wrapper p,
.hero-content-wrapper h1 {
   color: var(--white);
   padding-bottom: 1em;
}

/* DESKTOP WEB 2.0 SECTION BEGINS */

.main-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.grid-gap-large {
   gap: 10em;
}

.top-padding {
   padding-top: 8vh;
}

.bottom-padding {
   padding-bottom: 8vh;
}

.top-bottom-padding {
   padding-top: 2%;
   padding-bottom: 2%;
}

.left-right-padding {
   padding-left: 10vw;
   padding-right: 10vw;
}

.left-padding {
   padding-left: 10vw;
}

.content-wrapper {
   width: 98%;
   max-width: 1800px;
   display: grid;
   grid-gap: 4em;
   grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
   align-items: center;
   justify-content: center;
   /* background: red; */
}

.section-img,
.section-content {
   width: 100%;
   /* background: blue; */
}

.section-img {
   text-align: center;
   height: 100%;
}

.section-img img {
   width: 100%;
}

.section-content {
   display: flex;
   flex-direction: column;
   gap: 2em;
}

.overflow-hidden {
   overflow: hidden;
}

.grid-wrapper {
   width: 98%;
   max-width: 1800px;
   display: grid;
   grid-gap: 4em;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   align-items: flex-start;
   justify-content: center;
}

.card {
   display: flex;
   flex-direction: column;
   gap: 1em;
}

.card-top {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 1em;
}

.card-top img {
   width: 32px;
}

.skewed {
   -webkit-transform: skewY(10deg);
   -moz-transform: skewY(10deg);
   -ms-transform: skewY(10deg);
   -o-transform: skewY(10deg);
   /* transform: skew788899899987deg; */
   height: 32vh;
   margin-top: 15vh;
   z-index: 8 !important;
   /* position: relative; */
   z-index: 0;
}

.no-skew {
   -webkit-transform: skewY(-10deg);
   -moz-transform: skewY(-10deg);
   -ms-transform: skewY(-10deg);
   -o-transform: skewY(-10deg);
   -o-transform: skewX(-10deg);
   transform: skew788899899987deg);

   background: var(--white);
   /* height: 100px; */
}

.highlight {
   font-family: Chakra Petch;
   font-size: 168px;
   font-style: normal;
   font-weight: 500;
   line-height: 81%; /* 136.08px */
   letter-spacing: -6.72px;
   text-align: center;
   font-feature-settings: 'dlig' on;

   color: var(--white);

   width: 100%;

   mix-blend-mode: exclusion;

   margin-top: -30vh;

   text-align: center;
}

.negative-top-margin {
   margin-top: -6px;
}

/* DESKTOP WEB 2.0 SECTION ENDS */

.wrapper-section img {
   width: 100vw;
}

.gaming {
   height: 100%;
   width: 100%;
   background: url('../img/gaming.png');
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

.prism {
   height: 100%;
   width: 100%;
   background: url('../img/prism.png');
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
}

.blocks {
   height: 100%;
   width: 100%;
   background: url('../img/blocks.png');
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

.ownership {
   height: 100%;
   width: 100%;
   background: url('../img/ownership.png');
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

/* DESKTOP CYBER SECURITY SECTION BEGINS */
.intro-section {
   text-align: center;
   max-width: 60%;
   padding-top: 10vh;
}

.cyber-security {
   height: 100%;
   width: 100%;
   background: url('../img/cyber-security.png');
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}
/* DESKTOP CYBER SECURITY SECTION ENDS */

/* DESKTOP CAREERS SECTION BEGINS */
.careers p, 
.careers h3 {
   color: var(--white);
}

.careers-wrapper {
   background: url('../img/careers.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   /* min-height: 100vh; */
   
   display: grid;
   grid-gap: 4em;
   grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
   align-items: center;
   /* justify-content: center; */
}

.careers-content {
   display: flex;
   flex-direction: column;
   gap: 2em;
}

.careers-content p,
.careers-content h3 {
   color: var(--white);
}

.careers-img {
   height: 100vh;
   background: url('../img/careers-img.png');
   background-size: cover;
   background-position: right top;
   background-repeat: no-repeat;
   mix-blend-mode: lighten;
}

/* DESKTOP CAREERS SECTION ENDS */

/* DESKTOP FOOTER SECTION BEGINS  */
.footer-wrapper {
   display: flex;
   padding: 4% 8%;
   justify-content: space-between;
   background: var(--bg-primary);
 }

 .footer-section {
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .footer-section ul li {
   padding: 0 0 1em 0;
   color: var(--primary-color);
   font-family: Chakra Petch;
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
   line-height: 20px; /* 100% */
   letter-spacing: 0.228px;
   list-style: none;
 }

 .footer-section ul li a {
   text-decoration: none;
 }

 .footer-section span {
   color: var(--primary-color);
 }

 .footer-section p {
   color: var(--secondary-text, #505050);

   /* Mobile/P */
   font-family: Chakra Petch;
   font-size: 8px;
   font-style: normal;
   font-weight: 400;
   line-height: 24px; /* 150% */
   letter-spacing: 0.182px;
 }

 .footer-section img {
   width: 40%;
 }
/* DESKTOP FOOTER SECTION ENDS  */
 
 /* ====================
  Responsive Section
=======================*/

/* Tablet desktop :768px. */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    header .navigation .menu-list {
      width: 60%;
    }
  
    header .navigation .menu-list li a{
      font-size: 1rem;
    }
  
  }
  
  /* Large Mobile :480px. */
  
  @media only screen and (max-width: 767px) {
  
      /* MOBILE TYPOGRAPHY  */
  
  h1 {
      font-size: 36px;
      font-family: 'Chakra Petch', sans-serif;
      font-weight: 700;
      line-height: 36px;
      letter-spacing: 0.41px;
      word-wrap: break-word;
      text-align: center;
   }
  
   h2 {
      font-size: 40px;
      font-family: Chakra Petch;
      font-weight: 600;
      line-height: 40px;
      letter-spacing: 0.46px;
      word-wrap: break-word;
      text-align: center;
   }
  
   h3 {
      font-size: 32px;
      font-family: 'Chakra Petch', sans-serif;
      font-weight: 700;
      line-height: 32px;
      letter-spacing: 0.36px;
      word-wrap: break-word;
      text-align: center;
   }
  
   p {
      font-size: 16px;
      font-family: 'Chakra Petch', sans-serif;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 0.18px;
      word-wrap: break-word;
      text-align: center;
   }
  
    header .navigation .menu-list {
      position: absolute;
      top: 12vh;
      min-width: 100%;
      background: rgba(15, 20, 35, 0.99);
      text-align: center;
      display: none;
    }
  
    header .navigation .menu-list li {
      display: block;
    }
  
    header .navigation .menu-list li a {
      display: block;
      padding: 20px;
      transition: color 1s ease, padding 1s ease, background-color 1s ease;
  
    }
  
    header .navigation .menu-list li a:hover{
      color: #b1d4e0;
      padding-left: 30px;
      background: rgba(177, 212, 224, 0.2);
    }
  
  
    header .navigation .hamburger {
      display: block;
    }
  
  }
  
  
  /* small mobile :320px. */
  
  @media only screen and (max-width: 479px) {

/* Mobile/H1 */
   h1 {
      font-family: Chakra Petch;
      font-size: 36px;
      font-style: normal;
      font-weight: 700;
      line-height: 36px; /* 100% */
      letter-spacing: 0.41px;
   }

/* Mobile/H2 */
   h2 {
      font-family: Chakra Petch;
      font-size: 40px;
      font-style: normal;
      font-weight: 600;
      line-height: 40px; /* 100% */
      letter-spacing: 0.456px;
   }

/* Mobile/H3 */
   h3 {
      font-family: Chakra Petch;
      font-size: 32px;
      font-style: normal;
      font-weight: 700;
      line-height: 40px; /* 125% */
      letter-spacing: 0.365px;
   }

/* Mobile/H4 */
   h4 {
      font-family: Chakra Petch;
      font-size: 24px;
      font-style: normal;
      font-weight: 600;
      line-height: 24px; /* 100% */
      letter-spacing: 0.274px;
   }

/* Mobile/Subtitle */
   .subtitle {
      font-family: Chakra Petch;
      font-size: 20px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px; /* 100% */
      letter-spacing: 0.228px;
   }

/* Mobile/highlight */
   .highlight {
      font-family: Chakra Petch;
      font-size: 68px;
      font-style: normal;
      font-weight: 500;
      line-height: 100%; /* 136.08px */
      letter-spacing: -1.72px;
      text-align: center;
      font-feature-settings: 'dlig' on;

      color: var(--white);

      width: 90%;

      mix-blend-mode: exclusion;

      margin-top: -20vh;
   }


   .grid-gap-large {
      gap: 2em;
   }

   .top-padding {
      padding-top: 4em;
   }

   .bottom-padding {
      padding-bottom: 4em;
   }

   .top-bottom-padding {
      padding-top: 2em;
      padding-bottom: 2%;
   }

   .left-right-padding {
      padding-left: 2vw;
      padding-right: 2vw;
   }

   .left-padding {
      padding-left: 2vw;
   }

/* Mobile/P */
   p {
      font-family: Chakra Petch;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px; /* 150% */
      letter-spacing: 0.182px;
   }
  
   header .navigation {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      height: 10vh;
      min-width: 100%;
      z-index: 10;
      padding: 2%;
      /* mix-blend-mode: color-dodge; */
   }

   .hero {
      width: 100%;
      height: 100vh;
      background: url('../img/bg-hero-mobile.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      z-index: 0 !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
   }

   .hero-content-wrapper {
      z-index: 9 !important;
      width: 100%;
      align-self: flex-start;
      justify-content: flex-end;
      
      padding: 50vh 5% 0;
      margin-top: -15vh;
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .content-wrapper {
      width: 98%;
      max-width: 1800px;
      display: grid;
      grid-gap: 4em;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      align-items: center;
      justify-content: center;
      /* background: red; */
   }

   .mobile-flip {
      display: flex;
      flex-direction: column-reverse;
   }

   .section-content {
      display: flex;
      flex-direction: column;
      
      gap: 1em;
      align-items: flex-start;
   }

   .section-content p,
   .section-content h3 {
      text-align: left;
   }

   .section-img {
      text-align: center;
      height: 50vh !important;
   }

   .grid-wrapper {
      width: 98%;
      max-width: 1800px;
      display: grid;
      grid-gap: 2em;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      align-items: flex-start;
      justify-content: center;
   }
   
   .card {
      display: flex;
      flex-direction: column;
      gap: 1em;
   }
   
   .card-top {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 1em;
   }

   .card-bottom p {
      text-align: left;
   }
   
   .card-top img {
      width: 32px;
   }

   .skewed {
      -webkit-transform: skewY(10deg);
      -moz-transform: skewY(10deg);
      -ms-transform: skewY(10deg);
      -o-transform: skewY(10deg);
      /* transform: skew788899899987deg; */
      height: 18vh;
      margin-top: 10vh;
      z-index: 8 !important;
      /* position: relative; */
      z-index: 0;
   }

   .no-skew {
      -webkit-transform: skewY(-10deg);
      -moz-transform: skewY(-10deg);
      -ms-transform: skewY(-10deg);
      -o-transform: skewY(-10deg);
      -o-transform: skewX(-10deg);
      transform: skew788899899987deg);

      background: var(--white);
      /* height: 100px; */
   }

   .highlight {
      font-family: Chakra Petch;
      font-style: normal;
      font-weight: 500;
      line-height: 100%; /* 136.08px */
      text-align: center;
      font-feature-settings: 'dlig' on;

      color: var(--white);

      width: 100%;

      mix-blend-mode: exclusion;

      margin-top: -22vh;
      font-size: 68px;
      letter-spacing: 1.14px;
   }

   .intro-section {
      text-align: center;
      max-width: 80%;
      padding-top: 2em;
   }

   /* MOBIILE CAREERS SECTION BEGINS */

   .careers-wrapper {
      overflow: hidden;
      gap: 1em;
   }

   .careers-content {
      align-items: flex-start;
   }

   .careers-content p {
      text-align: left;
   }

   .careers-img {
      height: 50vh;
      width: 100%;
      background: url('../img/mobile-careers.png');
      background-size: cover;
      background-position: left top;
      background-repeat: no-repeat;
      mix-blend-mode: lighten;
   }

   /* MOBILE CAREERS SECTION ENDS */

   .footer-wrapper {
      display: flex;
      padding: 8% 8%;
      justify-content: space-between;
      background: var(--bg-primary);

      flex-direction: column;
   }

   .footer-section {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin: 1em 0;
   }

   .footer-section ul li {
      padding: 0 0 1em 0;
      color: var(--primary-color);
      font-family: Chakra Petch;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px; /* 100% */
      letter-spacing: 0.228px;
      list-style: none;
   }

   .footer-section ul li a {
      text-decoration: none;
   }

   .footer-section p {
      color: var(--secondary-text, #505050);

      /* Mobile/P */
      font-family: Chakra Petch;
      font-size: 8px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px; /* 150% */
      letter-spacing: 0.182px;
   }

   .footer-section img {
      max-width: 40%;
   }

  }