@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap");

:root {
  --white: #f9f9f9;
  --black: #000000;
  --grey: #85888c;
  --logoblue: #549bd4;
  --button-border: #359bff;
  --headerLarge: 58px;
  --large: 3em;
  --medium: 1.5em;
  --landing: 1.3rem;
  --small: 1em;
  --techpara: 16px;
  --xsmall: 12px;
  --xxsmall: 8px;
  --pointSize: 1.5em;
}

/* Reset styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
  scroll-behavior: smooth;
}
body {
  height: 100vh;
  width: 100%;
  background: #000;
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  overflow: hidden; /* Hide scrollbars */
  color: var(--white);
  position: relative;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
  /* margin: 9px 0px 0px 0px; */
  padding: 20px;
  /* text-align: center; */
  /* float: left;*/
}
.login-hidden-desktop {
  display: none;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 50%;
  width: 100%;
  height: auto;
}

.wrapper {
  height: calc(100% - 60px);
  /* height: 100vh; */
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  z-index: 99;
  scroll-behavior: smooth;
}
section {
  min-height: calc(100vh - 60px);
  scroll-snap-align: start; /* Snap each section to the viewport */
  overflow-y: hidden; /* Enable scrolling within each section */
  margin-bottom: 10px; /* Add margin-bottom for separation between*/
  margin-top: 50px;

  padding: 5px;
  scroll-snap-align: start;
  scroll-margin: 25px 0;
  position: relative;
  /* min-height: 100vh; */
  width: 100%;
  padding-bottom: 20px;
}

.subheading-image {
  max-width: 100%;
  /* height: fit-content; */
}
/* Fix for hidden center and right menus */
.hidden {
  display: block !important;
}
.hideForm {
  display: none;
}
.landing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.highlight,
.active {
  background: linear-gradient(to right, #773dbd, #962eff, #4e67ff, #2ea3ff);
  background: linear-gradient(
    90deg,
    rgba(119, 61, 189, 1) 0%,
    rgba(150, 46, 255, 1) 9%,
    rgba(46, 163, 255, 1) 21%,
    rgba(78, 103, 255, 1) 29%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.boldHighlight {
  font-weight: 300;
}
.landing-header {
  font-size: var(--headerLarge);
  line-height: normal;
  font-weight: 200;
  margin-bottom: 1em;
}
.landing-header span {
  font-size: 38px;
}
.landing-para {
  text-align: center;
  line-height: 2;
  font-weight: 200;
}
.content {
  z-index: 2;
  position: relative;
  color: white;
  width: 100%;
  padding: 7em;
}
.founder-content {
  z-index: 2;
  position: relative;
  color: white;
  width: 100%;
  padding: 5em;
}
.section-content {
  display: flex;
  align-items: center;
}
.two-row {
  display: flex;
  /* justify-content: center;
  align-items: center; */
  height: 100%;
}
.lside {
  flex: 1;
  display: flex;
  justify-content: center;
}
.rside {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rside p {
  font-size: var(--pointSize);
}
.mini-header {
  font-size: var(--medium);
  line-height: normal;
  display: flex;
  justify-content: left;
  font-weight: 200;
}
.mini-para {
  font-size: var(--small);
  text-align: left;
  font-weight: 200;
}
.tech-mini-para {
  font-size: var(--small);
  text-align: left;
  font-weight: 200;
}
.para-spacing {
  margin-bottom: 1em;
}
.read-more a {
  color: white;
  font-style: italic;
  font-weight: 200;
  display: flex;
  justify-content: right;
  font-size: var(--small);
}

.read-more img {
  transform: rotate(90deg);
  height: 25px;
  padding-left: 6px;
  /* margin-top: 7px; */
}

.read-more > img {
  height: 25px;
}
.read-more a:hover {
  background: linear-gradient(to right, #773dbd, #962eff, #4e67ff, #2ea3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 300;
}
.list-read-more {
  display: flex;
  align-items: center;
  justify-content: left;
}
.list-read-more a:hover {
  background: linear-gradient(to right, #773dbd, #962eff, #4e67ff, #2ea3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.scroller-icon {
  position: absolute;
  top: 50%;
  right: 0;
  padding-right: 10px;
  transform: translateY(-50%);
  z-index: 999;
}

.scroller-icon img {
  width: 50px;
}
.btnDiv {
  display: flex;
  justify-content: center;
}
.signUp {
  background: #000000;
  color: white;
  padding: 0.7em;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 50px;
  border: 1px solid #f7fafc;
  width: fit-content;
}

.signUp:hover,
.signUp:focus {
  background: linear-gradient(to right, #773dbd, #962eff, #4e67ff, #2ea3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.signUp:active {
  background: linear-gradient(to right, #773dbd, #962eff, #4e67ff, #2ea3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
  -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
  box-shadow: inset 0px 0px 5px #c1c1c1;
  outline: none;
}
/* two column in tech page */
.two-column {
  display: flex;
  align-items: center;
}
/* video {
  filter: grayscale(1);
} */
/* CSS for the video */
.video {
  position: absolute;
  top: 6vw;
  right: 5vw;
  width: 300px;
  height: 200px;
  margin-bottom: 1em;
  border-radius: 25px;
}
.video-img {
  position: absolute;
  top: 5vw;
  right: 5vw;
  width: 250px;
  height: 250px;
  margin-bottom: 1em;
  border-radius: 25px;
}

/* CSS for the heading and paragraph */
.video-content {
  padding: 0 20px 20px 0; /* top right bottom left */
  box-sizing: border-box;
}
/* CSS for the bio */
.aboutJosh {
  position: relative;
  padding-right: 200px;
}

/* CSS for the image */
.bio-image {
  position: fixed;
  top: 10vh;
  right: 5vw;
  width: 250px;
  height: auto;
  z-index: 999;
  border-radius: 25px;
}

/* CSS for the heading and paragraph */
.bio-content {
  margin-top: 10px;
  padding: 2em;
  padding-right: 5em;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 65px; /* Height of the footer */
  background: rgb(0, 0, 0);
  z-index: 999;
  padding: 20px;
  font-size: 0.6em;
  display: flex;
  justify-content: space-between;
}
/* .r-menu {
  flex: 1;
} */
.l-menu {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1em;
}
.l-menu a {
  font-size: 1.5em;
  color: white;
  background: black;
}
.l-menu a:hover {
  background: linear-gradient(to right, #773dbd, #962eff, #4e67ff, #2ea3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* icon scroll  */
#icon-scroll,
#icon-scroll:before {
  display: block;
  position: absolute;
  left: 50%;
}

#icon-scroll {
  width: 40px;
  height: 70px;
  margin-left: -20px;
  top: 85%;
  left: 95%;
  margin-top: -35px;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 25px;
}

#icon-scroll:before {
  content: "";
  width: 8px;
  height: 8px;
  background: #fff;
  margin-left: -4px;
  top: 8px;
  border-radius: 4px;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: scroll;
}
.hide-arrow {
  display: none;
}
.mobile-landing-para {
  display: none;
}
.subheading {
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  padding: 0px 0px 2px 0px;
  text-align: left;
}
.home-logo {
  text-align: center;
}
@keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(46px);
  }
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 694px) {
  ul {
    padding: 0;
    font-size: 16px;
  }
  .img-logo {
    width: 450px;
  }
  .video {
    display: none;
  }
  .video-img {
    display: none;
  }
  .section-content {
    padding-top: 1em;
    position: relative;
  }
  /* .long-content {
    display: block;
  } */

  .landing-header {
    font-size: var(--small);
    line-height: normal;
    font-weight: 300;
  }
  .landing-para {
    font-size: var(--xsmall);
    text-align: left;
    line-height: 1;
    font-weight: 300;
  }
  .content {
    position: initial;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em;
  }
  .bullet-content {
    padding-bottom: 5em;
  }
  .founder-content {
    padding: 1em;
  }
  .two-row {
    flex-direction: column;
  }
  .lside {
    flex: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* margin-bottom: 1em; */
  }
  .rside p {
    font-size: var(--techpara);
    text-align: center;
  }
  .read-more a {
    font-size: var(--xxsmall);
  }
  .read-more > img {
    margin-bottom: 0;
  }
  .signUp {
    font-size: var(--xsmall);
  }
  .founderBtn {
    padding: 0.5em;
  }
  .l-menu {
    font-size: var(--xsmall);
  }

  .mini-header {
    font-size: var(--small);
    justify-content: left;
    font-weight: 300;
  }
  .mini-para {
    font-size: var(--techpara);
    text-align: left;
    font-weight: 300;
  }
  .tech-mini-para {
    font-size: var(--techpara);
    text-align: left;
    font-weight: 300;
  }
  .two-column {
    flex-direction: column;
  }
  .video {
    position: initial;
    height: auto;
    margin: 0;
  }
  .video-img {
    position: absolute;
    width: 25%;
    height: 50%;
    top: -30px;
    right: 0;
    margin-bottom: 4em;
  }

  .video-content {
    padding: 0;
  }
  .video-content p {
    font-size: var(--techpara);
  }
  .bio-image {
    position: relative;
    width: 100%;
    /* height: auto; */
    margin-left: 20px;
    margin-bottom: 3em;
  }
  .bio-content {
    padding: 1em;
  }
  .aboutJosh {
    padding-right: 0;
    padding-bottom: 1em;
    overflow: scroll;
  }
  .scroller-icon {
    position: absolute;
    right: 0;
    z-index: 999;
  }

  .scroller-icon img {
    width: 20px;
  }
  .read-more img {
    transform: rotate(90deg);
    height: 15px;
    padding-left: 0;
    margin-top: 3.5px;
  }
  .landing-para {
    display: none;
  }
  .mobile-landing-para {
    display: block;
    font-size: var(--techpara);
    /* word-spacing: 5px; */
    padding: 10px;
  }
}
/* Medium devices (landscape tablets, 600px and up) */
@media only screen and (min-width: 695px) and (max-width: 1180px) {
  .video {
    display: none;
  }
  .video-img {
    display: none;
  }
  .content {
    padding: 2em;
  }
  .landing-header {
    font-size: var(--medium);
    line-height: normal;
    font-weight: 300;
  }
  .landing-para {
    font-size: var(--small);
    text-align: left;
    line-height: 2;
    margin-bottom: 1em;
    font-weight: 300;
  }
  .content {
    padding: 2em;
  }
  .founder-content {
    padding: 1em;
  }
  .rside p {
    font-size: var(--small);
  }
  .video {
    position: relative;
    width: 100%;
    height: auto;
    margin-left: 20px;
    margin-bottom: 3em;
  }
  .video-img {
    position: absolute;
    width: 25%;
    height: 50%;
    top: 0px;
    right: 0;
    margin-bottom: 4em;
  }
  .video-content {
    padding: 0;
  }
  .video-content p {
    font-size: var(--small);
  }
  .bio-image {
    position: relative;
    /* width: 100%; */
    /* height: auto; */
    margin-left: 3em;
    margin-bottom: 3em;
  }
  .bio-content {
    padding: 1em;
  }
  .aboutJosh {
    padding-right: 0;
  }
  .scroller-icon img {
    width: 20px;
  }
  .mini-header {
    font-weight: 300;
  }
  .mini-para {
    font-weight: 300;
  }
  .tech-mini-para {
    font-weight: 300;
  }
}
@media only screen and (max-width: 390px) {
  section {
    margin: auto;
  }
  .img-logo {
    width: 250px;
  }
  .landing-header {
    font-size: var(--small);
    margin-bottom: 0;
  }
  .landing-header > span {
    font-size: var(--xsmall);
  }
  .landing-para {
    display: none;
  }
  /* .para-spacing {
    margin-bottom: 1em;
  } */
  .remove-padding {
    padding-top: 0;
  }
  .add-padding {
    padding-top: 2em;
  }
  .mobile-landing-para {
    display: block;
    font-size: var(--techpara);
    /* word-spacing: 5px; */
    padding: 10px;
  }
  .read-more a {
    font-size: 12px;
  }
  /* .bullet-points {
    letter-spacing: 4px;
  } */
  .para-letter {
    letter-spacing: 1px;
  }
  .l-menu a {
    font-size: var(--xsmall);
  }
}

#one-a-column-1 img {
  width: 220px;
  text-align: center;
}

.video-wrapper video {
  width: 320px !important;
  height: auto;
  position: relative;

  object-fit: cover;
  z-index: -1;
  opacity: 50%;
}

.video-wrapper {
  width: 320px !important;
  /* float: right; */
  padding: 16px 0px 0px 0px;
}

/* h1 {
  font-size: 28px;
  line-height: 26px;
  font-weight: 600;
  padding: 6px 0px 20px 0px;
}

h2 {
  font-size: 20px;
  line-height: 22px;
  font-weight: 600;
  padding: 5px 0px 6px 0px;
}

h3 {
  font-size: 18px;
  color: #e5e5e5;
  font-weight: 600;
  padding: 6px 0px 5px 0px;
  margin: auto 5px;
} */

/* 
body {
  font-size: 2.7vh; /* Adjust as needed */
/* } */
*/ .button {
  background: #000000;
  color: white;
  padding: 8px 26px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 26px;
  border: 1px solid #359bff;
  width: fit-content;
}

.button:hover,
.button:focus {
  background: linear-gradient(to right, #773dbd, #962eff, #4e67ff, #2ea3ff);
  color: white;
}

.left-menu > .button {
  padding: 3px 9px 3px 9px;
  font-size: 12px;
  margin: 4px 2px;
  border-radius: 26px;
  border: 1px solid #359bff;
}

@media screen and (min-width: 600px) and (max-width: 799px) {
  .video-wrapper {
    width: 423px !important;
    /* float: right; */
    padding: 0px 0px 0px 0px;
  }

  .home-logo img {
    height: 180px;
  }

  /* h1 {
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
    padding: 6px 0px 5px 0px;
  }

  h2 {
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
    padding: 5px 0px 6px 0px;
  }

  h3 {
    font-size: 18px;
    color: #e5e5e5;
    font-weight: 600;
    padding: 6px 0px 5px 0px;
    margin: auto 5px;
  } */
  .subheading {
    color: #ffffff;
    font-size: 24px;
    font-weight: 300;
    padding: 0px 0px 2px 0px;
    text-align: left;
  }

  /* body {
    font-size: 2.7vh; /* Adjust as needed */
  /* } */
  */ #one-a-column-1 img {
    width: 220px;
    text-align: center;
  }
}

@media screen and (min-width: 800px) and (max-width: 1199px) {
  .video-wrapper {
    width: 364px !important;
    float: right;
    padding: 0px 0px 0px 20px;
  }
  .home-logo img {
    height: 220px;
  }
  /* 
  h1 {
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
    padding: 6px 0px 5px 0px;
  }

  h2 {
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
    padding: 5px 0px 6px 0px;
  }

  h3 {
    font-size: 18px;
    color: #e5e5e5;
    font-weight: 600;
    padding: 6px 0px 5px 0px;
    margin: auto 5px;
  } */
  .subheading {
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    padding: 0px 0px 2px 0px;
    text-align: left;
  }

  body {
    font-size: 2.7vh; /* Adjust as needed */
  }

  #one-a-column-1 img {
    width: 220px;
    text-align: center;
  }
}

@media screen and (min-width: 1200px) {
  */ .video-wrapper {
    width: 364px !important;
    float: right;
    padding: 0px 0px 0px 20px;
  }
  .home-logo img {
    height: 240px;
  }

  h1 {
    font-size: 50px;
    line-height: 53px;
    font-weight: 600;
    padding: 6px 5px 23px 0px;
  }

  h2 {
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
    padding: 5px 0px 6px 0px;
  }

  h3 {
    font-size: 18px;
    color: #e5e5e5;
    font-weight: 600;
    padding: 6px 0px 5px 0px;
    margin: auto 5px;
  }
  .subheading {
    color: #ffffff;
    font-size: 28px;
    font-weight: 300;
    padding: 0px 0px 12px 0px;
    text-align: left;
  }

  body {
    font-size: 2.7vh; /* Adjust as needed */
  }

  .subheading {
    color: #ffffff;
    font-size: 32px;
    padding: 0px 58px 10px 0px;
    text-align: left;
    font-weight: 200;
  }

  /* p {
    font-weight: 350;
  } */

  #one-a-column-1 img {
    width: 220px;
    text-align: center;
  }
}

svg path {
  stroke: #ffffff;
  stroke-width: 3px;
}

/* .row {
  width: 100%;
} */
.coloumn {
  width: 50%;
  display: table-row;
}

.one {
  /* background: url(grayscale-vid/stock-01.mp4) center/cover no-repeat; */
  scroll-snap-align: top;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-content {
  position: relative;
  /* top: 100px; */
  z-index: 8;
  max-width: 900px;

  max-height: 600px;
}

#one-a-column-1,
#two-a-column-1,
#three-a-column-1,
#four-a-column-1,
#five-a-column-1,
#six-a-column-1 {
  justify-content: center;
}

#one-a-column-2,
#two-a-column-2,
#three-a-column-2,
#four-a-column-2,
#five-a-column-2,
#six-a-column-2 {
  justify-content: center;
}

/* section li {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  vertical-align: middle;
}

section li img {
  padding: 0px 0px 0px 0px;
  margin: 0px 20px 0px 0px;
  vertical-align: middle;
} */

.first {
  background: url(bg-2.jpg4) center/cover no-repeat;
  z-index: 1;
  padding-top: 124px;
}

.div-li {
  margin: -152px 7px 0px 221px;
  padding: 0px 0px 0px 0px;
}

.one-a {
  display: flex;
  z-index: 3;
  background: url(../img-icons/blackBack.png) center/cover no-repeat;
}

.two {
  background: url(bg-2.jpg4) center/cover no-repeat;
  z-index: 4;
}
.two-a {
  z-index: 5;
  background: url(../img-icons/blackBack.png) center/cover no-repeat;
}

.three {
  background: url(bg-3.jpg) center/cover no-repeat;
  z-index: 6;
}
.three-a {
  z-index: 7;
  background: url(../img-icons/blackBack.png) center/cover no-repeat;
}

.four {
  background: url(bg-4.jpg) center/cover no-repeat;
  z-index: 8;
}

.four-a {
  z-index: 9;
  background: url(../img-icons/blackBack.png) center/cover no-repeat;
}

.five {
  background: url(bg-4.jpg) center/cover no-repeat;
  z-index: 10;
}

.five-a {
  z-index: 11;
  background: url(../img-icons/blackBack.png) center/cover no-repeat;
}
.six {
  background: url(bg-4.jpg) center/cover no-repeat;
  z-index: 12;
}

.six-a {
  z-index: 13;
  background: url(../img-icons/blackBack.png) center/cover no-repeat;
}

.seven {
  background: url(../img-icons/blackBack.png) center/cover no-repeat;
  z-index: 14;
}
.doodle-container {
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
}
/*  ----------------------------------------------------------- style.css     */

.logo img {
  max-height: 80px;
  margin: 0px 0px 0px 0px;
}

.nav {
  display: none;
}

.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.menu-item {
  margin: 0 10px;
}

.menu-item a {
  color: white;
  text-decoration: none;
}

.menu-item.active a {
  background-color: blue;
  padding: 5px 10px;
  border-radius: 3px;
}

.social a {
  color: white;
  margin: 0 5px;
  text-decoration: none;
}

.hamburger {
  display: none;
  color: white;
  cursor: pointer;
}

/*------------------team grid------------------------*/

.coloumn img {
  height: 100px;
  width: 100%;
}

h3 {
  text-align: left;
}

/* Hide scrollbar for WebKit-based browsers (e.g. Safari, Chrome) */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for non-WebKit-based browsers (e.g. Firefox) */
html {
  scrollbar-width: none; /* Firefox */
}

.fs img {
  float: right;
  /* width: 100%; */
  padding: 9px;
  height: 200px;
}

@media screen and (min-width: 601px) {
  .fs img {
    width: 400px;
    height: 400px;
  }
}

.tech-images {
  width: 150px;
  padding: 9px;
  border-radius: 5%;
  float: right;
}

@media screen and (max-width: 600px) {
  .tech-images {
    width: 400px;
    float: right;
    padding: 9px;
    border-radius: 5%;
  }
}

.delay-tech > .read-more img {
  transform: rotate(90deg);
  /* height: 15px;
  padding-left: 6px;
  padding-bottom: 4px; */
}

.privacy {
  width: 100%;
}

@media screen and (min-width: 600px) {
  .privacy {
    width: 600px;
    margin: auto;
    font-weight: 200;
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

/*Header */

.logo img {
  max-height: 60px;
  margin: 0px 0px 0px 0px;
}

.nav {
  display: none;
}

.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.menu-item {
  margin: 0 10px;
}

.menu-item a {
  color: white;
  text-decoration: none;
}

.menu-item.active a {
  background-color: blue;
  padding: 5px 10px;
  border-radius: 3px;
}

.social a {
  color: white;
  margin: 0 5px;
  text-decoration: none;
}

.hamburger {
  display: none;
  color: white;
  cursor: pointer;
}

/* Logo */
.logo {
  display: inline-block;
  margin-left: 0px;
  padding: 0px 0px 0px 0px;
}

.header-inner {
  display: flex;
  justify-content: right;
}

.header-nav {
  display: flex;
  justify-content: right;
  align-items: center;
  min-width: 900px;
}

ul a {
  color: #fff;
}

/* Left menu styles */
.left-menu {
  display: flex;
  align-items: center;
  /* margin-right: 1rem; */
  /* float: left; */
}

.font-smaller {
  font-size: 1em !important;
}

/* Right menu styles */
.right-menu li {
  display: inline-block;
  margin-left: 1rem;
  font-size: 0.8em;
}

.right-menu {
  display: inline-block;
  margin-right: 1rem;
}

/* Hamburger menu styles */
.menu-toggle {
  display: none;
  cursor: pointer;
  position: fixed;
  right: 24px;
  top: 26px;
  z-index: 100;
}

.menu-toggle span {
  display: block;
  height: 2px;
  width: 25px;
  margin-bottom: 5px;
  background-color: #fff;
}

.mobile-show {
  display: none;
}
.mobile-hide {
  display: block;
}

.active {
  font-weight: 700;
}

/* Media queries */
@media screen and (max-width: 1050px) {
  /* Header styles */
  header {
    background-color: #fff;
    color: #333;
  }

  ul a {
    color: #eaeaea;
  }

  /* Center menu styles */
  .center-menu li {
    display: block;
    margin: 0;
  }

  /* Right menu styles */
  .right-menu li {
    display: block;
    margin: 0;
  }

  /* Center and Right menu styles */
  .center-menu,
  .right-menu {
    display: none;
    background-color: #fff;
    padding: 1rem;
    z-index: 99;
  }

  .center-menu li,
  .right-menu li {
    margin-bottom: 1rem;
  }

  /* Hamburger menu styles */
  .menu-toggle {
    display: block;
  }

  .menu-toggle span {
    transition: all 0.3s ease-in-out;
    background-color: #ccc4c4;
  }

  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Grid styles */
  .menu-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1rem;
  }

  .right-menu {
    margin-top: 1rem;
  }

  .center-menu,
  .right-menu {
    background-color: #fff;
    padding: 1rem;
  }

  .nav {
    display: block;
  }

  .hamburger {
    display: none;
  }

  .center-menu {
    position: fixed;
    right: 0;
    top: 0px;
    width: 100%;
    margin-top: 0px;
    padding-top: 53px;
    padding-bottom: 1px;
  }
  .mobile-show {
    display: block !important;
  }
  .mobile-hide {
    display: none !important;
  }
}

/* .fixed-header,
.fixed-footer {
  width: 100%;
  position: fixed;
  background: #000000;
  padding: 0px 0;
  color: #fff;
  z-index: 999;
  height: 60px;
}
.fixed-header {
  top: 0;
}
.fixed-footer {
  bottom: 0;
} */

ul a:hover {
  background: linear-gradient(to right, #773dbd, #962eff, #4e67ff, #2ea3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.shadow {
  filter: drop-shadow(0px 0px 10px rgba(125, 97, 114, 0.5));
  margin: 8px;
}