/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop

$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1em = 16px
*/
@keyframes navbrandAppear {
  0% {
    opacity: 0; }
  50% {
    transform: rotateY(60deg); }
  100% {
    opacity: 1; } }

@keyframes navAppear {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes primaryAppear {
  0% {
    opacity: 0;
    transform: translateX(100%);
    background-position: 2000px 0; }
  90% {
    transform: rotate(30deg);
    opacity: 0.5;
    background-position: 1000px 0; }
  100% {
    opacity: 1;
    background-position: 0 0; } }

@keyframes secondaryAppear {
  0% {
    opacity: 0; }
  50% {
    transform: translateX(-10rem) rotateY(60deg); }
  100% {
    opacity: 1; } }

@keyframes buttonAppear {
  0% {
    opacity: 0;
    transform: translateY(10rem); }
  100% {
    opacity: 1; } }

.back {
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  font-size: 8rem;
  color: transparent;
  -webkit-text-stroke: 1px #ffffff;
  margin: 10rem 0 5rem;
  letter-spacing: 1rem;
  font-family: "Courier New", Courier, monospace;
  background-image: linear-gradient(115deg, transparent 15%, transparent 60%, #ffffff 40%);
  -webkit-background-clip: text;
  background-clip: text;
  background-position: 0 0;
  animation: back 20s linear infinite; }
  @media only screen and (max-width: 37.5em) {
    .back {
      font-size: 5rem; } }

@keyframes back {
  100% {
    background-position: 2000px 0; } }

@keyframes icon {
  0% {
    opacity: 0; }
  50% {
    opacity: 1;
    transform: rotate(0) skew(0); }
  100% {
    opacity: 1; } }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  max-width: 100%; }

body {
  padding: 0 3rem;
  min-height: 100dvh;
  overflow-x: hidden; }

@media only screen and (max-width: 37.5em) {
  .contact {
    padding: 0; } }

.ind {
  background-image: url(/images/blockchain.jpg);
  padding: 0 3rem 0; }
  @media only screen and (max-width: 56.25em) {
    .ind {
      padding: 0 1rem 0; } }
  @media only screen and (max-width: 37.5em) {
    .ind {
      padding: 0 0.5rem; } }

.bodyabout {
  background-color: #2696e9;
  position: relative; }
  @media only screen and (max-width: 37.5em) {
    .bodyabout {
      padding: 0 1rem; } }

html {
  font-size: 62.5%; }
  @media only screen and (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media only screen and (max-width: 56.25em) {
    html {
      font-size: 50%; } }
  @media only screen and (max-width: 56.25em) {
    html {
      font-size: 75%; } }

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif; }

.header__primary {
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  font-size: 8rem;
  color: transparent;
  -webkit-text-stroke: 1px #ffffff;
  margin: 10rem 0 5rem;
  letter-spacing: 1rem;
  background-image: linear-gradient(115deg, transparent 15%, transparent 60%, #ffffff 40%);
  -webkit-background-clip: text;
  background-clip: text;
  background-position: 0 0;
  font-family: "Courier New", Courier, monospace;
  animation: primaryAppear 2s; }
  @media only screen and (max-width: 37.5em) {
    .header__primary {
      font-size: 5rem; } }

.header__secondary {
  font-size: 6rem;
  color: #ffffff;
  text-align: center;
  margin-bottom: 6rem;
  font-weight: 400;
  letter-spacing: 0.6rem;
  font-family: "Courier New", Courier, monospace;
  animation: secondaryAppear 2s 2s backwards; }
  @media only screen and (max-width: 56.25em) {
    .header__secondary {
      letter-spacing: 0;
      font-size: 4rem; } }
  @media only screen and (max-width: 37.5em) {
    .header__secondary {
      letter-spacing: 0;
      font-size: 3rem;
      text-align: left; } }

.pro {
  color: #2997ff;
  font-weight: 700;
  transition: all 0.2s; }

.pro:hover {
  color: aliceblue; }

.main__primary {
  font-weight: 400;
  text-align: center;
  font-size: 5rem;
  background-image: linear-gradient(to right bottom, #2997ff, #5542fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: all 0.2s; }
  .main__primary:hover {
    transform: skewX(30deg) skewY(2deg); }

.paragraph {
  line-height: 2;
  flex: wrap;
  margin: 0 auto;
  text-align: center;
  font-size: 1.6rem; }

.__paragraph {
  line-height: 2;
  flex: wrap;
  margin: 0 auto;
  font-size: 1.6rem; }

.heading__primary {
  font-size: 6rem;
  color: #ffffff;
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 700;
  letter-spacing: 1rem;
  font-family: "Courier New", Courier, monospace;
  transition: all 0.2s; }
  @media only screen and (max-width: 37.5em) {
    .heading__primary {
      font-size: 4rem; } }
  .heading__primary:hover {
    transform: skewX(30deg);
    color: #5542fa; }

.heading__secondary {
  font-size: 3rem;
  background-image: linear-gradient(to right bottom, #2997ff, #5542fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 400;
  letter-spacing: 2px; }
  .heading__secondary span {
    color: white; }

.u-center-text {
  text-align: center !important; }

.u-margin-bottom-big {
  margin-bottom: 8rem !important; }

.u-margin-bottom-medium {
  margin-bottom: 4rem !important; }

.u-margin-bottom-small {
  margin-bottom: 1.5rem !important; }

.u-margin-top-big {
  margin-top: 8rem !important; }

.u-margin-top-huge {
  margin-top: 10rem !important; }

.section-about {
  background-color: #ffffff;
  display: flex;
  border-radius: 3px;
  justify-content: center;
  padding: 10rem 20rem 0; }
  @media only screen and (max-width: 56.25em) {
    .section-about {
      padding: 5rem 10rem 0; } }
  @media only screen and (max-width: 37.5em) {
    .section-about {
      padding: 2rem 5rem 0; } }

.section__skills {
  padding: 10rem; }
  @media only screen and (max-width: 56.25em) {
    .section__skills {
      padding: 6rem; } }
  @media only screen and (max-width: 37.5em) {
    .section__skills {
      padding: 2rem; } }

.section__contact {
  background-color: #ffffff;
  padding: 10rem 20rem 10rem;
  border-radius: 3px;
  text-align: center;
  margin: 10rem; }
  @media only screen and (max-width: 56.25em) {
    .section__contact {
      padding: 6rem 12rem 6rem;
      margin: 0; } }
  @media only screen and (max-width: 37.5em) {
    .section__contact {
      padding: 2rem 4rem 2rem;
      margin: 0; } }

.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 0.4s; }

.hidden:nth-child(1) {
  transition: all 2s 1, 0, 0, 1; }

.hidden2 {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%) rotate(45deg);
  transition: all 1s; }

.hidden2:nth-child(1) {
  transition-delay: 0.5s; }

.hidden2:nth-child(2) {
  transition-delay: 1s; }

.hidden2:nth-child(3) {
  transition-delay: 1.5s; }

.hidden2:nth-child(4) {
  transition-delay: 2s; }

.hidden2:nth-child(5) {
  transition-delay: 2.5s; }

.hidden2:nth-child(6) {
  transition-delay: 3s; }

.hidden2:nth-child(7) {
  transition-delay: 3.5s; }

.hidden2:nth-child(8) {
  transition-delay: 4s; }

.hidden3 {
  opacity: 0;
  transform: scale(0.1);
  transition: all 1s; }

  .image {
    width: 150px; /* Adjust to your desired size */
    height: 150px;
    object-fit: cover; /* Ensures the image fits the container */
  }

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0) scale(1); }

.Home {
  padding: 0 20rem;
  display: flex;
  justify-content: center;
  flex-direction: column; }
  @media only screen and (max-width: 75em) {
    .Home {
      padding: 0 2rem; } }
  @media only screen and (max-width: 37.5em) {
    .Home {
      padding: 0; } }
  .Home::before {
    content: "";
    z-index: 2;
    background-color: rgba(3, 96, 251, 0.3);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }
    @media only screen and (max-width: 37.5em) {
      .Home::before {
        height: 150vh; } }
  @media only screen and (max-width: 340px) {
    .Home::before {
      height: 205vh; } }
  .Home .content h1 {
    font-size: 4em;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5rem;
    margin-bottom: 4rem;
    line-height: 7.5rem;
    letter-spacing: 1rem;
    background-image: linear-gradient(115deg, transparent 15%, transparent 60%, #ffffff 40%);
    -webkit-background-clip: text;
    background-clip: text;
    background-position: 100 0;
    animation: back 20s linear infinite; }
    .Home .content h1 span {
      font-size: 7rem;
      font-weight: 900;
      -webkit-text-stroke: 1px #fff;
      color: transparent; }
      @media only screen and (max-width: 56.25em) {
        .Home .content h1 span {
          font-size: 2em; } }
      @media only screen and (max-width: 37.5em) {
        .Home .content h1 span {
          font-size: 1em; } }
    @media only screen and (max-width: 56.25em) {
      .Home .content h1 {
        font-size: 3rem;
        margin-bottom: 1rem; } }
    @media only screen and (max-width: 37.5em) {
      .Home .content h1 {
        font-size: 2rem;
        margin-bottom: 1rem; } }
  .Home .content p {
    margin-bottom: 4rem;
    font-size: 1.6rem; }
  .Home video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -5; }

.content {
  z-index: 999;
  color: #fff;
  width: 70%;
  margin-top: 5rem; }
  @media only screen and (max-width: 56.25em) {
    .content {
      margin-top: 0; } }

.aboutheadicon {
  display: flex;
  flex-direction: column;
  top: 40%;
  position: absolute;
  right: 3rem;
  padding-left: 5rem; }

.slider-navigation {
  z-index: 888;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(8rem);
  margin-bottom: 1.2rem; }

.slider-btn {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 0.2rem rgba(255, 255, 255, 0.5);
  transition: 0.3s ease; }
  .slider-btn:not(:last-child) {
    margin-right: 2rem; }
  .slider-btn:hover {
    transform: scale(1.3); }

.slider-btn.active {
  background: #2696e9; }

.content-slide {
  display: none; }

.content-slide.active {
  display: block; }

.btn, .btn:link, .btn:visited {
  padding: 1.7rem 3rem;
  text-transform: uppercase;
  border-radius: 4rem;
  border: none;
  transition: all 0.2s;
  cursor: pointer;
  position: relative; }
  @media only screen and (max-width: 56.25em) {
    .btn, .btn:link, .btn:visited {
      padding: 1.7rem 2rem; } }
  @media only screen and (max-width: 37.5em) {
    .btn, .btn:link, .btn:visited {
      padding: 1rem 2rem; } }
  .btn:hover, .btn:link:hover, .btn:visited:hover {
    transform: translateY(-0.8rem);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4); }
  .btn:active, .btn:link:active, .btn:visited:active {
    transform: translateY(-0.4rem);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); }
  .btn:focus, .btn:link:focus, .btn:visited:focus {
    outline: none; }

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4rem;
  z-index: -1;
  transition: all 0.4s; }

.btn:hover::after {
  transform: scaleY(1.4) scaleX(1.4);
  opacity: 0; }

.btn--link {
  text-decoration: none;
  color: #ffffff;
  font-weight: 400;
  font-size: 1.6rem; }

.btn-tertiary {
  background-image: linear-gradient(to bottom, #2997ff, #5542fa); }
  .btn-tertiary::after {
    content: "";
    background-image: linear-gradient(to bottom, #2997ff, #5542fa); }

.btn-animated {
  animation: buttonAppear 2s 4s backwards; }

.section-holder {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex: 1 1 0; }
  @media only screen and (max-width: 37.5em) {
    .section-holder {
      flex-direction: column;
      align-items: center; } }

.img-holder {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 2rem;
  width: 15%; }
  @media only screen and (max-width: 37.5em) {
    .img-holder {
      width: 50%; } }

.image {
  width: 100%;
  transition: all 0.2s;
  shape-outside: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%); }
  .image:hover {
    transform: scale(1.2) translateY(-0.3rem); }

.image__text {
  text-decoration: none;
  font-size: 1.6rem;
  color: #ffffff;
  margin-top: 2rem;
  font-weight: 700; }

.iconmoon-holder {
  display: flex;
  padding: 20rem;
  justify-content: center;
  align-items: center; }
  @media only screen and (max-width: 56.25em) {
    .iconmoon-holder {
      padding: 5rem 0; } }

.icon__nav {
  display: flex;
  justify-content: space-around;
  position: relative; }
  @media only screen and (max-width: 56.25em) {
    .icon__nav {
      flex-direction: column;
      gap: 5rem; } }

.icon__item {
  list-style: none;
  position: relative;
  width: 15rem;
  height: 15rem;
  margin: 0 6rem;
  transform: rotate(-30deg) skew(25deg);
  animation: icon 2s; }

.icon {
  width: 8rem;
  height: 8rem;
  fill: #fff; }

.icon__span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  fill: #fff;
  background-color: #000;
  transition: all 0.2s; }

.icon__item:hover .icon__span:nth-child(5) {
  transform: translate(10rem, -10rem);
  opacity: 1; }

.icon__item:hover .icon__span:nth-child(4) {
  transform: translate(8rem, -8rem);
  opacity: 0.8; }

.icon__item:hover .icon__span:nth-child(3) {
  transform: translate(6rem, -6rem);
  opacity: 0.6; }

.icon__item:hover .icon__span:nth-child(2) {
  transform: translate(4rem, -4rem);
  opacity: 0.4; }

.icon__item:hover .icon__span:nth-child(1) {
  transform: translate(2rem, -2rem);
  opacity: 0.2; }

.icon__item:nth-child(1) .icon__span {
  background-color: #3b5999; }

.icon__item:nth-child(2) .icon__span {
  background-color: #e4405f; }

.icon__item:nth-child(3) .icon__span {
  background-color: #0077b5; }

.icon__item:nth-child(4) .icon__span {
  background-color: #3b59; }

.icon__item:nth-child(5) .icon__span {
  background-color: #0077b5;}
  
.intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; }

.introparagraph {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translate(-20%, -25%);
  z-index: 10;
  color: #ffffff;
  font-size: 4rem;
  opacity: 0;
  transition: all 0.5s;
  text-transform: uppercase; }
  @media only screen and (max-width: 37.5em) {
    .introparagraph {
      display: none; } }

.cvprofile {
  width: 50%;
  overflow: hidden;
  border-radius: 50%;
  z-index: 2;
  transition: all 0.5s; }
  @media only screen and (max-width: 56.25em) {
    .cvprofile {
      width: 100%; } }
  .cvprofile:hover {
    filter: blur(3px) brightness(80%); }
    @media only screen and (max-width: 56.25em) {
      .cvprofile:hover {
        filter: none; } }
  .cvprofile:hover ~ .introparagraph {
    transform: translate(-50%, -50%);
    opacity: 1; }

.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  opacity: 0.35;
  z-index: -1;
  width: 100%;
  height: 100%;
  animation: navAppear 5s; }
  .bg-video__content {
    object-fit: cover;
    height: 100%;
    width: 100%; }

.bg-video2 {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  opacity: 1;
  z-index: -1;
  width: 100%;
  height: 100%; }
  .bg-video2__content {
    height: 100%;
    width: 100%;
    object-fit: cover; }

.video-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: circle(0% at 0 50%);
  object-fit: cover; }

.video-slide.active {
  clip-path: circle(150% at 0 50%);
  transition: 2s ease-in-out;
  transition-property: clip-path; }
  @media only screen and (max-width: 37.5em) {
    .video-slide.active {
      height: 150vh; } }

@media only screen and (max-width: 340px) {
  .video-slide.active {
    height: 205vh;
    object-fit: cover; } }

.header {
  height: 90vh;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background-size: cover;
  margin-bottom: 4rem; }
  @media only screen and (max-width: 75em) {
    .header {
      height: auto; } }
  @media only screen and (max-width: 37.5em) {
    .header {
      height: 85vh; } }

.header__social {
  display: flex;
  flex-direction: column;
  justify-content: center; }

.icon-2 {
  width: 2rem;
  height: 2rem;
  fill: #fff;
  margin-bottom: 2rem;
  animation: navAppear 2s;
  transition: all .2s; }
  .icon-2:hover {
    transform: scale(1.2); }

/* Your existing footer styles remain unchanged */
.footer {
  padding: 5rem 2rem; /* Adjust padding for responsiveness */
  background-color: #333;
  opacity: 0.9;
  text-align: center;
}

@media only screen and (max-width: 56.25em) {
  .footer {
    padding: 4rem 1rem;
  }
}

.footer__logo-box {
  text-align: center;
  margin-bottom: 8rem;
}

@media only screen and (max-width: 56.25em) {
  .footer__logo-box {
    margin-bottom: 6rem;
  }
}

.footer__logo {
  font-size: 10rem;
  letter-spacing: -2rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-weight: 400;
  color: #5542fa;
  text-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.3);
  transition: all 0.2s;
  display: inline-block;
}

.footer__logo:hover {
  letter-spacing: 1.5rem;
  color: #ffffff;
}

.footer__navigation {
  border-top: 1px solid #ffffff;
  display: inline-block;
}

@media only screen and (max-width: 56.25em) {
  .footer__navigation {
    width: 100%;
    text-align: center;
  }
}

.footer__list {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.footer__link {
  text-decoration: none;
  color: #ffffff; /* White text */
  text-transform: uppercase;
  font-size: 1.6rem;
  transition: all 0.2s;
}

.footer__link:hover {
  color: #5542fa;
}

.footer__item {
  color: #ffffff; /* White text */
  margin-top: 4rem;
  transition: all 0.2s;
}

.footer__item:hover {
  color: #5542fa;
  transform: rotate(5deg) scale(1.3);
  box-shadow: 0 1.5rem 2rem rgba(0, 0, 0, 0.4);
}

.footer__item:not(:last-child) {
  margin-right: 4rem;
}

@media only screen and (max-width: 37.5em) {
  .footer__item:not(:last-child) {
    margin-right: 2rem;
  }
}

/* Add your new styles here */
.footer__contact-info {
  font-size: 1.5rem; /* Adjust size as needed */
  font-weight: bold; /* Makes the text bold */
  color: #ffffff; /* White text */
}

.footer__contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #ffffff; /* White text */
}

.footer__contact-item i {
  font-size: 2rem; /* Increases icon size */
  margin-right: 10px; /* Adds space between icon and text */
  color: #ffffff; /* White icon */
}

.footer__link {
  color: #ffffff; /* White text */
  text-decoration: none;
}

.footer {
  padding: 10rem;
  background-color: #333;
  opacity: 0.9;
  position: relative; /* Ensure the footer is a positioned element */
}

.footer__copyright {
  color: #ffffff; /* White text */
  font-size: 1.4rem; /* Adjust font size as needed */
  text-align: center; /* Center-align the text */
  position: absolute; /* Position it absolutely */
  bottom: 1rem; /* Adjust this value as needed to position it above the bottom */
  left: 50%; /* Move to the center */
  transform: translateX(-50%); /* Center it horizontally */
  margin-top: 2rem; /* Add space above if needed */
}


.row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

.navbar {
  display: flex;
  justify-content: space-between;
  position: sticky;
  z-index: 100000; }
  .navbar .navbrand {
    display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 10px; /* Adjust based on your layout */
  left: 10px; /* Adjust based on your layout */
    animation: navbrandAppear 2s 2s backwards;
    margin-right: auto;
    transition: all 0.2s; }
     .navbrand img {
      width: 40px;  /* Reducing the width to make the logo smaller */
  height: auto; /* Keeps the image proportional */
  display: block;
  border-radius: 50%; /* Optional: if you want a circular logo */
}
    
    
  .navbar .navbrand:hover {
    letter-spacing: 1.5rem;
    color: #ffffff; }
  .navbar .nav-icon__checkbox {
    display: none; }
  .navbar__nav {
    list-style: none;
    display: flex;
    gap: 1rem;
    flex-direction: row;
    justify-content: space-evenly;
    align-self: center;
    animation: navAppear 2s;
    animation-iteration-count: 2; }
    .navbar__nav .navItemBox {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      align-self: center; }
  .navbar__item {
    font-size: 2rem;
    margin: 1rem 0 1rem 3rem;
    letter-spacing: 0.2rem;
    text-align: center; }
    .navbar__item:not(:last-child) {
      margin-right: 3rem; }
  @media only screen and (max-width: 56.25em) {
    .navbar .navbtns {
      margin-top: 0.5rem;
      height: 6rem;
      width: 6rem;
      padding: 1rem;
      background-color: #ffffff;
      cursor: pointer;
      box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
      transition: 0.3s;
      align-self: center;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 100000; }
    .navbar .navbar__nav {
      display: none; }
    .navbar .navbar__nav.active {
      position: fixed;
      width: 100vw;
      height: 100dvh;
      background-color: rgba(1, 1, 1, 0.8);
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center; }
    .navbar .navItemBox {
      display: flex;
      flex-direction: column;
      background: #ffffff;
      width: 60rem;
      max-width: 60rem;
      margin: 2rem;
      padding: 4rem;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      box-shadow: 0 0.5rem 2.5rem rgba(1, 1, 1, 0.2); }
    .navbar .navbar__item {
      margin: 1rem 0 4rem; }
    .navbar .nav-icon {
      position: relative; }
      .navbar .nav-icon, .navbar .nav-icon:before, .navbar .nav-icon:after {
        height: 2px;
        width: 3rem;
        background-color: #777;
        display: inline-block; }
      .navbar .nav-icon::before, .navbar .nav-icon::after {
        content: "";
        position: absolute;
        left: 0;
        transition: all 0.2s; }
      .navbar .nav-icon::before {
        top: -0.8rem; }
      .navbar .nav-icon::after {
        top: 0.8rem; }
      .navbtns:hover .navbar .nav-icon::before {
        top: -1rem; }
      .navbtns:hover .navbar .nav-icon::after {
        top: 1rem; }
    .navbar .nav-icon__checkbox:checked + .navbtns .nav-icon {
      background-color: transparent; }
    .navbar .nav-icon__checkbox:checked + .navbtns .nav-icon::before {
      top: 0;
      transform: rotate(135deg); }
    .navbar .nav-icon__checkbox:checked + .navbtns .nav-icon::after {
      top: 0;
      transform: rotate(-135deg); }
    .navbar .navbar__link,
    .navbar .navbar__link:visited,
    .navbar .navbar__link:link {
      font-style: 1.2em;
      margin: 2rem;
      margin-bottom: 3rem;
      color: #222; }
      .navbar .navbar__link::before,
      .navbar .navbar__link:visited::before,
      .navbar .navbar__link:link::before {
        background-color: #222; }
      .navbar .navbar__link:hover,
      .navbar .navbar__link:visited:hover,
      .navbar .navbar__link:link:hover {
        color: #222; } }
  .navbar__link, .navbar__link:visited, .navbar__link:link {
    text-decoration: none;
    color: #5542fa;
    position: relative;
    padding: 1rem 0 1rem 0;
    transition: all 0.2s;
    text-transform: uppercase;
    position: relative; }
    .navbar__link::before, .navbar__link:visited::before, .navbar__link:link::before {
      content: "";
      position: absolute;
      top: 0;
      width: 0;
      background-color: #ffffff;
      height: 0.4rem;
      transition: all 0.3s; }
    .navbar__link:hover::before, .navbar__link:visited:hover::before, .navbar__link:link:hover::before {
      width: 100%; }
    .navbar__link:hover, .navbar__link:visited:hover, .navbar__link:link:hover {
      color: #ffffff;
      transform: translateX(1rem) translateY(-0.8rem); }

hr {
  border-style: dotted none none;
  border-color: #5542fa;
  border-width: 0.5rem;
  height: 0;
  width: 3%;
  margin: 10rem auto 10rem auto; }




  .mission-vision-footer {
    background-color: #f9f9f9; /* Light background for contrast */
    padding: 4rem 2rem; /* Padding for spacing */
    border-top: 2px solid #e0e0e0; /* Top border for separation */
    text-align: center; /* Center text alignment */
    margin-top: 2rem; /* Space above the footer */
}

.mission-section, .vision-section {
    margin-bottom: 2rem; /* Space between mission and vision sections */
}

.mission-vision-footer h2 {
    font-size: 28px; /* Heading size */
    color: #333; /* Dark color for the heading */
    margin-bottom: 1rem; /* Space below the heading */
}

.mission-vision-footer p {
    font-size: 16px; /* Adjust font size */
    color: #555; /* Color for the paragraph */
    line-height: 1.6; /* Improved readability */
}

/* Responsive Styles */
@media only screen and (max-width: 56.25em) {
    .mission-vision-footer {
        padding: 3rem 1rem; /* Less padding on smaller screens */
    }
    .mission-vision-footer h2 {
        font-size: 24px; /* Adjust heading size */
    }
    .mission-vision-footer p {
        font-size: 14px; /* Adjust paragraph size */
    }
}

@media only screen and (max-width: 37.5em) {
    .mission-vision-footer {
        padding: 2rem; /* Further reduce padding */
    }
    .mission-vision-footer h2 {
        font-size: 20px; /* Further adjust heading size */
    }
    .mission-vision-footer p {
        font-size: 12px; /* Further adjust paragraph size */
    }
}


.popup {
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 300000;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}
.popup__content {
  background-color: #ffffff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 75%;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  display: table;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s 0.2s;
}
@media (max-width: 56.25em) {
  .popup__content {
    width: 100%;
  }
}
@media (max-width: 37.5em) {
  .popup__content {
    width: 100%;
    display: block;
    position: absolute;
  }
}
.popup__left {
  width: 33.3333333%;
  display: table-cell;
}
@media (max-width: 37.5em) {
  .popup__left {
    display: none;
  }
}
.popup__right {
  width: 66.66666667%;
  display: table-cell;
  vertical-align: middle;
  padding: 3rem 5rem;
  position: relative;
}
.popup__img {
  display: block;
  width: 100%;
}
.popup__text {
  font-size: larger;
  font-weight: 300;
  margin-bottom: 4rem;
  column-count: 1;
  column-gap: 4rem;
  column-rule: 1px solid #f7f7f7;
  hyphens: auto;
}
@media (max-width: 37.5em) {
  .popup__text {
    column-count: auto;
  }
}
.popup:target {
  opacity: 1;
  visibility: visible;
}
.popup__close:link,
.popup__close:visited {
  color: #777;
  position: absolute;
  top: 2.5rem;
  right: 2.5rem;
  text-decoration: none;
  font-size: 3rem;
  display: inline-block;
  transition: all 0.2s;
  line-height: 1;
}
.popup__close:hover {
  color: #5542fa;
}
.popup:target .popup__content {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}