/* font */
@import url("https://fonts.googleapis.com/css2?family=Akshar&display=swap");

* {
  font-family: "Akshar", sans-serif;
}

body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #090030 !important; }
.bg-hero { background-color: #090030; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }




/* background */
html,
body {
  margin: 0;
  padding: 0%;
  overflow-x: hidden;
}

main {
  overflow: hidden;
}

body {
  background-image: linear-gradient(
    to bottom,
    #090030 0%,
    #090030 60%,
    #470a51 80%,
    #ac2074 100%
  );
  background-repeat: no-repeat;
  background-attachment: local;
  height: 100%;
}

.bg {
  background-color: #ac207418;
  position: fixed;
  height: 15%;
  width: 100%;
  bottom: 0;
}








/* navbar */

.logo {
  /* object-fit: contain; */
  position: fixed;
  left: 0;
  top: 0;
  height: 55px;
  z-index: 1001;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #090030;
  /* overflow: hidden; cannot use as will hide dropdown buttons*/

  /* positioning */
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  /* cannot use drop shadow */

  z-index: 1000;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px auto;
  text-decoration: none;
  font-size: 20px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #090030;
  color: white;
  padding: 14px 16px;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 20px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  width: 170px;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  width: 138px;
}

.floating {
  float: right;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav .dropdown:hover .dropbtn {
  background-color: #5b2a78;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ac2074;
  color: #ffffff;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 1000 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1000px) {
  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
    padding: 14px 16px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1000px) {
  .topnav.responsive {
    /* position: relative; */
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
  .topnav.responsive a.icon {
    position: absolute;
    width: 18px;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    width: 100%;
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
  .topnav.responsive .floating {
    float: left;
    width: 100%;
  }
}






/* start of content */
main {
  display: flex;
  flex-direction: column;
}

.video-container {
  height: fit-content;
  width: 100%;
  position: relative;
  background-color: #090030;
  box-shadow: 0px 10px 100px 100px #090030;
}

.video-container video {
  width: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}

.content-group {
  position: relative;
  z-index: 2;
  width: 100%;
}

#content1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  left: 20%;
}

#content2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  right: 15%;
}

#content3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  right: 10%;
}







@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}





.image {
  object-fit: contain;
  width: 70%;
  position: relative;
  top: 40px;
}

.separator {
  height: 50px;
}

.banner {
  position: relative;
  z-index: 5;
  display: flex;
}

/* .banner video {
  vertical-align: bottom;
} */


/* .banner img {
  vertical-align: bottom;
} */

#human_practice {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  z-index: 5;
}

.bottom {
  padding: 0 0 0 0;
}




.botinfo {
  width: 100%;
  padding: 10px;
  background-color: #010333;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.botlogo {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}



.botword {
  color: #ffffff;
  text-align: justify;
  font-size: 15px;
}


.littlegap {
  width: 5px;
}





.slide-right {
  -webkit-animation: slide-right 1s ease-in-out infinite alternate both;
  animation: slide-right 1s ease-in-out infinite alternate both;
}

.slide-left {
  -webkit-animation: slide-right 1s ease-in-out infinite alternate-reverse
    backwards;
  animation: slide-right 1s ease-in-out infinite alternate-reverse backwards;
}

@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@-webkit-keyframes flicker-1 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}
@keyframes flicker-1 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}

@-webkit-keyframes flicker-3 {
  0%,
  100% {
    opacity: 1;
  }
  32.98% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  34% {
    opacity: 0;
  }
  34.02% {
    opacity: 1;
  }
  34.98% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
  35.9% {
    opacity: 0;
  }
  35.92% {
    opacity: 1;
  }
  38.98% {
    opacity: 1;
  }
  39% {
    opacity: 0;
  }
  39.8% {
    opacity: 0;
  }
  39.82% {
    opacity: 1;
  }
  83.98% {
    opacity: 1;
  }
  84% {
    opacity: 0;
  }
  84.9% {
    opacity: 0;
  }
  84.92% {
    opacity: 1;
  }
}
@keyframes flicker-3 {
  0%,
  100% {
    opacity: 1;
  }
  32.98% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  34% {
    opacity: 0;
  }
  34.02% {
    opacity: 1;
  }
  34.98% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
  35.9% {
    opacity: 0;
  }
  35.92% {
    opacity: 1;
  }
  38.98% {
    opacity: 1;
  }
  39% {
    opacity: 0;
  }
  39.8% {
    opacity: 0;
  }
  39.82% {
    opacity: 1;
  }
  83.98% {
    opacity: 1;
  }
  84% {
    opacity: 0;
  }
  84.9% {
    opacity: 0;
  }
  84.92% {
    opacity: 1;
  }
}

@-webkit-keyframes flicker-2 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  45.99% {
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  46.9% {
    opacity: 0;
  }
  46.91% {
    opacity: 1;
  }
  51.99% {
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
  52.8% {
    opacity: 0;
  }
  52.81% {
    opacity: 1;
  }
}
@keyframes flicker-2 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  45.99% {
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  46.9% {
    opacity: 0;
  }
  46.91% {
    opacity: 1;
  }
  51.99% {
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
  52.8% {
    opacity: 0;
  }
  52.81% {
    opacity: 1;
  }
}

@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}







/* flipcard */

/* 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 {
  background-color: transparent;
  width: 200px;
  height: 250px;
  border: none;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  padding: 50px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  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: relative;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: transparent;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #ac2074;
  color: white;
  transform: rotateY(180deg);
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  bottom: 232px;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.card-container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}


/* step animation */
.zoom { 
  transition: all 0.3s ease-in-out; 
}

.zoom:hover {
  transform: scale(1.1);
  z-index: 50;
}

.zoom-left {
  transition: all 0.2s ease-in-out;
}

.zoom-left:hover {
  transform: scale(1.1) translateX(-5%);
}

.zoom-right {
  transition: all 0.2s ease-in-out;
}

.zoom-right:hover {
  transform: scale(1.1) translateX(5%);
}


/* side bar */


html{
  scroll-behavior: smooth;
}

.sec{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 3em;
  color:#777;
  letter-spacing: 2px;
  margin: 0 0;
}

.sec:nth-child(odd){

}



.sidebar{
  position: fixed;
  top:50%; right: 1%;
  transform: translateY(-50%);
  z-index: 999;
}

.sidebar ul{
  list-style: none;
  padding:0; margin: 0;
}

.sidebar ul li{
  width: 250px;
  position: relative;
  text-align: right;
}

.sidebar ul li .dot{
  color:#fff;
  display: block;
  padding:5px 0;
  background: rgba(0, 0, 0, 0);
  transition: all .2s linear;
}

.sidebar ul li .dot span{
  display: inline-block;
  letter-spacing: 1px;
  padding: 0 15px 0 0;
  margin-right: 30px;
  border-radius: 3px;
  transform: translateX(30px);
  opacity: 0;
}

.sidebar ul li:hover .dot span{
  transform: translateX(0px);
  opacity: 1;
}

.sidebar ul li .dot span::before{
  content: '';
  position: absolute;
  top:50%; right:0;
  transform: translate(7px, -50%);
  border-left: 7px solid #ffffff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  display: block;
}

.sidebar ul li .dot::before,
.sidebar ul li .dot::after{
  content: '';
  position: absolute;
  top:50%;
  border-radius: 50%;
  display: block;
  transition: .2s ease-out;
}

.sidebar ul li .dot::before{
  height:5px;
  width: 5px;
  border: 2px solid rgb(120, 120, 120);
  right:0;
  transform: translateY(-50%);
}

.sidebar ul li .dot.active::before,
.sidebar ul li:hover .dot::before{
  border-color: #ffffff;
  background: #ffffff;
}

.sidebar ul li .dot::after{
  height:15px;
  width: 15px;
  /* border: 2px solid #ffffff; */
  right:-5px;
  transform: translateY(-50%) scale(0);
}

.sidebar ul li .dot.active::after,
.sidebar ul li:hover .dot::after{
  transform: translateY(-50%) scale(1);
}


.subpage-section {
  width: 100%;
}