/*======= Google fonts =======*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@-ms-viewport {
  width: device-width;
  height: device-height;
}

.container {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

/*======= Main Css =======*/
* {
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;

}

body {
  overflow-x: hidden;
  /* Hide horizontal scrollbar */
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

}

body>div.menu,
body>header>div.LogoForMobile,
.mobile-nav {
  display: none;
}



/*======= Scroll bar =======*/
::-webkit-scrollbar {
  position: fixed;
  background: black;
  width: 0.7vw;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background: white;
  width: 100vw;
  border-radius: 2em;
}

/* ::-webkit-scrollbar-thumb:hover {
    background: #4A628A;
  } */

/*======= Scroll indicator bar =======*/
.scroll-indicator-container {
  z-index: 1;
  position: fixed;
  width: 100%;
  height: 1vh;
}

.scroll-indicator-bar {
  margin-top: 4em;
  height: 0.7vh;
  width: 0vw;
  background: #ffffff;
  box-shadow: 0 0.3125em 3.125em #5d70c4, 0 0.3125em 3.125em #190ee2;
}

/*======= Header navigation bar =======*/

.navigation {
  align-items: center;
  position: fixed;
  z-index: 9999;
  width: 100vw;
  background: rgba(112, 112, 112, 0.5);
  backdrop-filter: blur(20px);
  height: 4em;
  display: flex;
  justify-content: space-between;
  padding: 0 10vw;
  transition: 0.5s ease;
}

.navigation a {
  color: rgb(255, 255, 255);
  font-size: 1em;
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
}

.navigation a:hover {
  text-decoration: none;
  font-weight: 1000;
  filter: drop-shadow(8px 8px 8px #0087);

}

body>header>div.nav-bar>div.navigation>a:nth-child(1) {
  margin-right: 8em;
}

/*======= Video =======*/

#myVideo {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100vw;
  min-height: 100vh;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*======= Language =======*/

.language {
  float: right;
  padding-right: 9vw;
  padding-top: 6em;
}

.language a {
  background-color: white;
  color: rgb(0, 0, 0);
  text-decoration: none;
  margin-left: 0.625em;
  padding: 0.25em;
  font-weight: 500;
  font-size: 0.9375em;
}

.language a:hover {
  color: white;
  background-color: #000000;
}

/*======= Home =======*/

section {
  transition: 0.5s ease;
}

.home {
  z-index: 1;
  min-height: 100vh;
  display: grid;
  align-items: center;
}

.box {
  border-radius: 9.375em 2.5em 9.375em 0em;
  width: 40vw;
  height: 40vh;
  padding: 3.125em;
  background: rgb(0, 0, 0);
  opacity: 0.85;
  margin-left: 10em;
}

.home h2 {
  font-size: 1.875em;
  color: #fff;
  text-decoration: none;
}

.home a {
  font-size: 1.875em;
  color: white;
  text-decoration: none;
}

/*======= Typing animation =======*/

.typewrite {
  font-family: Courier New;
}

/*======= About =======*/

.about {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F8FAFC;
  padding: 2em 1em;
  width: 100%;
  gap: 2em;
  /* space between img & text */
}

.about-img {
  flex: 1 1 40%;
  /* each takes ~50% width */
  padding: 1em 1em 1em 30vh;
  box-sizing: border-box;
}


.about-text {
  flex: 1 1 60%;
  /* each takes ~50% width */
  padding: 1em 30vh 1em 1em;
  box-sizing: border-box;
}

.about-img img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  /* keep image centered in its box */
}

.missionvision {
  background-color: #F8FAFC;
  padding: 1em;
  width: 100%;
  height: auto;
  display: flex;
  margin: 0;
  justify-content: center;
}

.mission-text,
.vision-text {
  width: 35vw;
  margin: 3em;
  background-color: rgb(181, 203, 214);
  padding: 1vw 5vw 3vw 5vw;
  border-radius: 1em;
}

.mission-text:hover,
.vision-text:hover {
  background-color: rgb(98, 124, 134);

}

/*======= About Us Wave =======*/

.custom-shape-divider-top-1737799715 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-top-1737799715 svg {
  position: relative;
  display: block;
  width: calc(150% + 1.3px);
  height: 78px;
  background-color: #BCCCDC;
}

.custom-shape-divider-top-1737799715 .shape-fill {
  fill: #F8FAFC;
}

/*======= Solutions =======*/

.solutions {
  padding-top: 2em;
  padding-bottom: 0em;
  box-sizing: border-box;
  background-color: white;
}

.solutions>p {
  border-radius: 1em;
  width: 100vw;
  padding-left: 25vw;
  padding-right: 25vw;

}

h1 {
  padding-bottom: 0;
  font-size: 1.875em;
  font-weight: 600;
  text-align: center;
  margin-top: 0;
}

hr {
  display: block;
  margin-block-start: 0.5em;
  margin-block-end: 0em;
  margin-inline-start: auto;
  margin-inline-end: auto;
  unicode-bidi: isolate;
  overflow: hidden;
  border-style: inset;
  border-width: 2.5px;
}

/* Sliding Section Wrapper */
.sliding-section {
  display: flex;
  width: 100vw;
  overflow: hidden;
  /* Ensures only one slide is visible at a time */
  position: relative;
}

/* Slides Container */
.slides-container {
  display: flex;
  width: calc(100vw * 10);
  /* Adjust width based on the number of slides */
}

/* Individual Slide */
.slide {
  max-width: 100vw;
  background-color: #BCCCDC !important;
  /* Each slide takes up the full visible area */
  display: flex;
  align-items: flex-start;
  /* Center-aligns content vertically */
  justify-content: space-between;
  /* Keeps text and video separate */
  padding: 3em 10em 0em 10em;
  box-sizing: border-box;
  /* Includes padding in width calculations */
  flex: 0 0 100%;
  color: rgb(0, 0, 0);
  flex-wrap: nowrap;
  flex-direction: row;
  max-height: 90vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.slide>video {
  width: 40vw;
}

/* Navigation Buttons Styling */
.nav-buttons {
  position: relative;
  bottom: 0px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  padding: 1em 30em 1em 0em;
}

.nav-buttons button {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1em;
}

/* Progress Bar Styling */
.progress-bar {
  position: relative;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 1em;
  background-color: transparent;
  background: transparent;
  box-shadow: 0 0.3125em 3.125em #5d70c4, 0 0.3125em 3.125em #190ee2;
}


.progress {
  height: 100%;
  width: 1em;
  background-color: #ffffff;
  transition: width 1s;
}

.nav-buttons button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}


/*======= Team =======*/

section .cards {
  padding: 5em;
  width: 100%;
  height: 80vh;
  display: flex;
  justify-content: space-evenly;
}

section .cards .text-card {
  margin: 1.25em;
  padding: 1.25em;
}

.team {
  backdrop-filter: blur(10px);
  padding: 5em;
  height: 90vh;
}


/*======= Flipping Cards (Team) =======*/

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  justify-content: space-evenly;
  background-color: transparent;
  width: 18.75em;
  height: 18.75em;
  perspective: 62.5em;
  /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  filter: brightness(85%)
}

/* Style the back side */
.flip-card-back {
  padding: 5em 0;
  text-decoration: none;
  text-align: center;
  transform: rotateY(180deg);
  background-color: #6D9886;
}

.flip-card-back a,
.flip-card-back p,
.flip-card-back h2 {
  margin-bottom: 0.625em;
  text-decoration: none;
  color: #000000;
}

/*======= contact us =======*/
.contact {
  background-color: #4A628A;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-evenly;
}

.contact-in {
  align-items: center;
  width: 60vw;
  background-color: #4A628A;
  padding: 3vw 5vw 3vw 5vw;
}

.contact-in h1 {
  font-size: 1.5em;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
}

.contact-in p {
  font-size: 1.25em;
  color: #fff;
  font-weight: 500;
  padding-bottom: 1.875em;
}

.contact-in-input {
  color: #fff;
  width: 100%;
  height: 2.5em;
  border: 0;
  outline: 0;
  border-bottom: 0.125em solid #fff;
  padding-left: 0.3125em;
  background: transparent;
  font-size: 0.75em;
  font-weight: 300;
}

.contact-in-input::placeholder {
  color: #fff;
}

.contact-in-textarea {
  width: 100%;
  height: 17em;
  border: 0;
  outline: 0;
  margin-bottom: 1.25em;
  border-bottom: 0.125em solid #fff;
  padding-left: 0.3125em;
  background: transparent;
  color: #fff;
  font-size: 0.75em;
  font-weight: 300;
}

.contact-in-textarea::placeholder {
  color: #fff;
}

.contact-in-btn {
  width: 100%;
  height: 2.5em;
  border: 0.0625em solid #fff;
  background: transparent;
  color: rgb(255, 255, 255);
  font-size: 0.75em;
  font-weight: 300;
  cursor: pointer;
}

.iti {
  width: 100%;
  font-weight: 500;
  font-size: small;
}

.iti input {
  width: 100%;
  height: 2.5em;
  border: 0;
  outline: 0;
  border-bottom: 0.125em solid #fff;
  background: transparent;
  font-size: 0.9em;
  font-weight: 300;
  padding-left: 3em;
  /* space for flag */
}


/*======= Footer Waves ======= */

.custom-shape-divider-top-1737802584 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-top-1737802584 svg {
  position: relative;
  display: block;
  width: calc(143% + 1.3px);
  height: 62px;
  background-color: black;
}

.custom-shape-divider-top-1737802584 .shape-fill {
  fill: #4A628A;
}


/*======= Footer =======*/

.footer-distributed {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  background: black;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  width: 100%;
  padding: 1em 10em;
  /* centers horizontally */
}

.footer-distributed>div {
  flex: 1;
  text-align: left;
  min-width: 200px;
  padding: 1em;
}

.footer-distributed .footer-right {
  text-align: right;
}

.footer-distributed h3 {
  font: normal 30px "Open Sans", sans-serif;
  color: #ffffff;
  font-weight: 500;
  margin: 0 0 10px;
}

/* Footer links */

.footer-distributed .footer-links {
  background-color: #4A628A;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 20px 0 20px;
}

.footer-distributed .footer-links a {
  display: inline-block;
  color: white;
  padding: 8px 10px;
  text-decoration: none;
}

.footer-distributed .footer-links a:hover {
  background: white;
  color: #4A628A;
  border-radius: 4px;
}

.footer-distributed .footer-company-name {
  color: white;
  font-size: 10px;
  font-weight: normal;
  margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center i {
  background-color: #4A628A;
  color: #ffffff;
  font-size: 15px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  text-align: center;
  line-height: 38px;
  margin-right: 10px;
}

.footer-distributed .footer-center div {
  display: flex;
  align-items: center;
  /* vertically align icon with text */
  margin: 10px 0;
}

.footer-distributed .footer-center i {
  margin-right: 10px;
  /* keep small spacing between icon and text */
}


.footer-distributed .footer-center p {
  display: inline-block;
  color: #ffffff;
}

.footer-distributed .footer-center p span {
  display: block;
  font-weight: normal;
}

.footer-distributed .footer-center p a {
  color: white;
  text-decoration: none;
}

.footer-distributed .footer-links .link-1:before {
  content: none;
}

/* Footer Right */

.footer-distributed .footer-right {
  width: 20%;
}

.footer-distributed .footer-company-about {
  line-height: 20px;
  color: white;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
}

.footer-distributed .footer-icons a {
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  background-color: #4A628A;
  border-radius: 2px;
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  line-height: 35px;
  margin-right: 5px;
}

.footer-distributed .footer-icons a:hover {
  color: #525e75;
  background-color: white;
}


/* ==================== Mobile Navigation ==================== */

.mobile-nav {
  top: 0;
  left: 0;
  z-index: 9999;
  /* put it above everything */
  position: fixed;
  width: 100vw;
  border-bottom: none;
  background: #000;
  padding: 0em 1em 0em 1em;
  border-bottom: 1px solid #333;

  display: none;
  /* enable flexbox */
  align-items: center;
  /* vertical center */
  justify-content: space-between;
  /* logo left, hamburger right */
}

.LogoForMobile img {
  height: 8vh;
  width: auto;
}

.nav-links {
  top: 60px;
  /* adjust based on your header height */
  left: 0;
  z-index: 9999;
  position: fixed;
  width: 100%;
  background: #000;
  border-top: none;
}

.hamburger-icon {
  cursor: pointer;
  display: inline-block;
  width: 30px;
  height: 22px;
  position: relative;
}

.hamburger-icon span {
  background: #fff;
  height: 4px;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.hamburger-icon span:nth-child(1) {
  top: 0;
}

.hamburger-icon span:nth-child(2) {
  top: 9px;
}

.hamburger-icon span:nth-child(3) {
  bottom: 0;
}

input[type="checkbox"] {
  display: none;
}

/* Nav Links */
.nav-links {
  position: fixed;
  left: 0;
  width: 100%;
  background: #000;
  list-style: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.nav-links li {
  border-bottom: 1px solid #ddd;
}

.nav-links a {
  display: block;
  padding: 15px 20px;
  color: #ddd;
  text-decoration: none;
  font-weight: 600;
}

.nav-links a:hover {
  background: #222;
  color: #50ffe8;
}

/* Toggle Menu */
input[type="checkbox"]:checked~.nav-links {
  max-height: 300px;
}

input[type="checkbox"]:checked+.hamburger-icon span:nth-child(1) {
  transform: rotate(45deg);
  top: 9px;
}

input[type="checkbox"]:checked+.hamburger-icon span:nth-child(2) {
  opacity: 0;
}

input[type="checkbox"]:checked+.hamburger-icon span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 9px;
}

/* ==================== Responsive Styles ==================== */

/* General fix for overflow */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Desktop */
@media (min-width: 1350px) {

  .footer-distributed .footer-left,
  .footer-distributed .footer-center,
  .footer-distributed .footer-right {
    flex: 1;
    margin-bottom: 0;
  }
}

/* Tablet: 768px to 1350px */
@media (min-width: 768px) and (max-width: 1350px) {

  /* Make navigation links distribute evenly */
  body>header>div.nav-bar>div.navigation {
    display: flex;
    justify-content: space-evenly;
    /* distributes links evenly */
    gap: 0;
    /* optional: removes extra gaps */
    padding: 0;
    width: 100%;
  }

  /* Remove manual margin on first link */
  body>header>div.nav-bar>div.navigation>a {
    margin: 0;
    flex: 1;
    /* optional: makes all links take equal width */
    text-align: center;
    /* center text inside each link */
  }

  .language {
    padding: 0;
  }

  .box {
    height: auto;
  }


  .about-img {
    flex: 1 1 50%;
    /* each takes ~50% width */
    padding: 0;
    box-sizing: border-box;
  }


  .about-text {
    flex: 1 1 50%;
    /* each takes ~50% width */
    padding: 0;
    box-sizing: border-box;
  }

  .navigation>a:first-child img {
    width: 100% !important;
    /* override inline width */
    height: auto;
    padding-left: 2em;
  }


  .footer-distributed {
    text-align: center;

    flex-direction: column;
    /* stack items */
    justify-content: center;
    /* vertical center in footer */
    align-items: center;
    /* horizontal center */
    padding: 2em 1em;

  }

  .footer-distributed>div.footer-center {
    flex: 1;
    text-align: left;
  }


  .footer-distributed>div.footer-left,
  .footer-distributed>div.footer-right {
    flex: 1;
    text-align: center;
  }

}

/* Mobile */
@media (max-width: 768px) {

  .aboutus-wave-section,
  .footer-wave-section,
  .language,
  .nav-bar {
    display: none;
  }

  .container {
    width: 100%;
    padding: 10px;
  }

  .header,
  .footer {
    text-align: center;
  }

  .sidebar {
    display: none;
  }

  .content {
    width: 100%;
  }

  img {
    height: auto;
  }

  .navigation {
    display: none;
    flex-direction: column;
  }

  .mobile-nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9990;
    width: 100vw;
    background: #000;
    padding: 0 1em;
    justify-content: space-between;
    align-items: center;
  }


  .box {
    z-index: -1;
    width: 80%;
    height: auto;
    justify-self: center;
    margin: 0;
  }

  .about {
    flex-direction: column;
    padding: 2em 1em;
  }

  .about-text,
  .about-img {
    width: 100%;
    padding: 1em;
  }

  .missionvision {
    flex-direction: column;
  }

  .mission-text,
  .vision-text {
    width: 100%;
    margin: 1em auto;
    padding: 1em;
  }

  .solutions>p {
    width: 100%;
    padding: 1em;
    margin: auto;
  }

  .slide {
    flex-direction: column;
    padding: 2em 1em;
    overflow-y: visible;
  }

  .slide img,
  .slide video {
    width: 100% !important;
    margin-top: 1em;
    padding: 0em !important;
  }

  #solutions>div.nav-buttons {
    padding: 1em 1em 1em 1em;
  }

  .contact-in {
    width: 100vw;
    height: auto;
    background-color: #4A628A;
    padding: 2em 1em;
  }

  .footer-distributed {
    text-align: center;

    flex-direction: column;
    /* stack items */
    justify-content: center;
    /* vertical center in footer */
    align-items: center;
    /* horizontal center */
    padding: 2em 1em;

  }

  .footer-distributed>div.footer-center {
    flex: 1;
    text-align: left;
  }


  .footer-distributed>div.footer-left,
  .footer-distributed>div.footer-right {
    flex: 1;
    text-align: center;
  }
}