/* .sand{
  position:absolute;
  bottom:0;
  width:100%;
    height: 180px; 
  min-height: 8rem;
  overflow: hidden;

}

.pendulums{
  position:absolute;
  width:50px;
  height:200px;
  right: 5vw;
  top:-60px;
  perspective:400px;
}

.pendulum{
  position:absolute;
  width:50px;
  height:200px;
  right:44%;
  top:0;
  left:50%;
  transform: translateZ(-300px) translateX(-50%);
}

.pendulum.shadow{
  top:263%;
  left:-65%;
  bottom:0;
  transform-origin: 50% 0;
transform:translateX(-50%) scaleY(-1) scaleZ(2) rotateY(-30deg) rotateX(-75deg) translateZ(300px);
}

.pendulum .bar{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  display:block;
  width: 20px;
  height:200px;
  background:#333;
}

.pendulum .string{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  height:150px;
  background:#333;
}

.pendulum .weight{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:10px;
  width:50px;
  height:50px;
  border-radius:50%;
  background:#333;
}

.pendulum .motion{
  position:absolute;
  height:200px;
  width:50px;
  transform-origin:50% 10px;
  animation: swing 1600ms infinite ease-in-out;
}

.pendulum.shadow .bar, .pendulum.shadow .string, .pendulum.shadow .weight{
  background:#3d3a34;
}

@keyframes swing{
  0%{    
  transform:rotate(-45deg);
  }
  50%{
    
  transform:rotate(45deg);
  }
  100%{
    
  transform:rotate(-45deg);
  }
} */

@media only screen and (orientation: portrait) {
  .text{
    right: 50%;
    top: 10%;
    transform: translateX(50%);
    font-size: 2vw;
  }
  .title{ 
    font-size: 1em;
  }
} 

.mb-custom {
  margin-bottom: 5rem !important;
}

.body-bg {
    background: #0061C8;background: linear-gradient(174deg, rgba(0, 97, 200, 1) 0%, rgba(0, 97, 200, 1) 35%, rgba(169, 196, 225, 1) 82%, rgba(235, 235, 235, 1) 97%, rgba(213, 222, 232, 1) 99%, rgba(233, 241, 250, 1) 100%, rgba(255, 255, 255, 1) 100%, rgba(196, 218, 242, 1) 100%);
}

/* .container-fluid > .row ul li {
    color: #fff !important;
} */

/* H1 Wave header ANIMATION */
h1 {
  color: white;
  font-family: 'Oswald', sans-serif;
  padding-right: 1em;
  font-size: 2em;
}

h1 span {
  display: inline-block;
  text-shadow: 2px 2px 3px #3D6366;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

h1 span:nth-child(1)  { animation-name: wave1;  animation-delay: 0.2s; }
h1 span:nth-child(2)  { animation-name: wave2;  animation-delay: 0.4s; }
h1 span:nth-child(3)  { animation-name: wave3;  animation-delay: 0.6s; }
h1 span:nth-child(4)  { animation-name: wave4;  animation-delay: 0.8s; }
h1 span:nth-child(5)  { animation-name: wave5;  animation-delay: 1.0s; }
h1 span:nth-child(6)  { animation-name: wave6;  animation-delay: 1.2s; }
h1 span:nth-child(7)  { animation-name: wave7;  animation-delay: 1.4s; }
h1 span:nth-child(8)  { animation-name: wave8;  animation-delay: 1.6s; }
h1 span:nth-child(9)  { animation-name: wave9;  animation-delay: 1.8s; }
h1 span:nth-child(10) { animation-name: wave10; animation-delay: 2.0s; }
h1 span:nth-child(11) { animation-name: wave11; animation-delay: 2.2s; }
h1 span:nth-child(12) { animation-name: wave12; animation-delay: 2.4s; }
h1 span:nth-child(13) { animation-name: wave13; animation-delay: 2.6s; }
h1 span:nth-child(14) { animation-name: wave14; animation-delay: 2.8s; }
h1 span:nth-child(15) { animation-name: wave15; animation-delay: 3.0s; }
h1 span:nth-child(16) { animation-name: wave16; animation-delay: 3.2s; }
h1 span:nth-child(17) { animation-name: wave17; animation-delay: 3.4s; }
h1 span:nth-child(18) { animation-name: wave18; animation-delay: 3.6s; }
h1 span:nth-child(19) { animation-name: wave19; animation-delay: 3.8s; }
h1 span:nth-child(20) { animation-name: wave20; animation-delay: 4.0s; }

@keyframes wave1  { 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }
@keyframes wave2  { 0%,100%{transform:translateY(0);} 50%{transform:translateY(9px);} }
@keyframes wave3  { 0%,100%{transform:translateY(0);} 50%{transform:translateY(10px);} }
@keyframes wave4  { 0%,100%{transform:translateY(0);} 50%{transform:translateY(11px);} }
@keyframes wave5  { 0%,100%{transform:translateY(0);} 50%{transform:translateY(12px);} }
@keyframes wave6  { 0%,100%{transform:translateY(0);} 50%{transform:translateY(13px);} }
@keyframes wave7  { 0%,100%{transform:translateY(0);} 50%{transform:translateY(14px);} }
@keyframes wave8  { 0%,100%{transform:translateY(0);} 50%{transform:translateY(15px);} }
@keyframes wave9  { 0%,100%{transform:translateY(0);} 50%{transform:translateY(16px);} }
@keyframes wave10 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(17px);} }
@keyframes wave11 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(18px);} }
@keyframes wave12 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(19px);} }
@keyframes wave13 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(20px);} }
@keyframes wave14 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(21px);} }
@keyframes wave15 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(22px);} }
@keyframes wave16 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(23px);} }
@keyframes wave17 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(24px);} }
@keyframes wave18 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(25px);} }
@keyframes wave19 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(26px);} }
@keyframes wave20 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(27px);} }

/* H1 Wave  Header ends */

/* Content animation starts */
@keyframes grow-shrink {
  25%,
  75% {
    scale: 100%;
  }

  50% {
    scale: 200%;
    color: magenta;
  }
}


.container-fluid > .row ul li, p  {
  animation-duration: 3s;
  animation-name: slide-in;
  color: #f9fafc;
  text-align: justify;
  font-size: 1em;
}

 .glass-card {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  box-shadow: 0 4px 32px 0 rgba(0,0,0,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
}

h5 {
  font-size: 1.5em !important;
  color:#CCE !important;
  display: inline-block;
  animation-duration: 3s;
  animation-name: grow-shrink;
}

@keyframes slide-in {
  from {
    translate: 150vw 0;
    scale: 200% 1;
  }

  to {
    translate: 0 0;
    scale: 100% 1;
  }
}

@keyframes grow-shrink {
  25%,
  75% {
    scale: 100%;
  }

  50% {
    scale: 150%;
    color: black;
  }
}
/* Content animation ends */

/* Animated background starts */
/* .background {
  background-image: linear-gradient(#000203 0%, #00345e 85%, #004d89 100%);
} */

.illustration {
  display: block;
  position: relative;
  width: auto;
  height: 90%;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

.hover {
  width: 100%;
  height: 100%;
  animation: hover 5s ease-in-out infinite;
  animation-fill-mode: forwards;
}

.number-one {
  transform: translateY(-10px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-10 4551ms ease-in-out infinite;
  animation-fill-mode: forwards;
}

.number-two {
  transform: translateY(-20px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-20 5413ms ease-in-out infinite;
  animation-delay: 1868ms;
  animation-fill-mode: forwards;
}

.number-three {
  transform: translateY(-30px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-30 4658ms ease-in-out infinite;
  animation-delay: 5023ms;
  animation-fill-mode: forwards;
}

.number-four {
  transform: translateY(-50px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-50 3951ms ease-in-out infinite;
  animation-delay: 5966ms;
  animation-fill-mode: forwards;
}

.number-five {
  transform: translateY(-60px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-60 5994ms ease-in-out infinite;
  animation-delay: 2310ms;
  animation-fill-mode: forwards;
}

.number-six {
  transform: translateY(-70px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-70 3785ms ease-in-out infinite;
  animation-delay: 3952ms;
  animation-fill-mode: forwards;
}

.number-seven {
  transform: translateY(-80px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-80 4522ms ease-in-out infinite;
  animation-delay: 3574ms;
  animation-fill-mode: forwards;
}

.number-eight {
  transform: translateY(-90px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-90 3845ms ease-in-out infinite;
  animation-delay: 392ms;
  animation-fill-mode: forwards;
}

.number-nine {
  transform: translateY(-100px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-100 2937ms ease-in-out infinite;
  animation-delay: 660ms;
  animation-fill-mode: forwards;
}

.number-ten {
  transform: translateY(-110px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-110 2717ms ease-in-out infinite;
  animation-delay: 832ms;
  animation-fill-mode: forwards;
}

.number-eleven {
  transform: translateY(-120px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-120 3660ms ease-in-out infinite;
  animation-delay: 3822ms;
  animation-fill-mode: forwards;
}

.number-twelve {
  transform: translateY(-150px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-150 2477ms ease-in-out infinite;
  animation-delay: 2631ms;
  animation-fill-mode: forwards;
}

.number-thirteen {
  transform: translateY(-160px) translateZ(0);
  opacity: 0;
  animation: fadeNumberDown-160 5850ms ease-in-out infinite;
  animation-delay: 2233ms;
  animation-fill-mode: forwards;
}

@keyframes hover {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
  75% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes fadeNumberDown-10 {
  0% {
    transform: translateY(-10px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(140px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-20 {
  0% {
    transform: translateY(-20px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(140px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-30 {
  0% {
    transform: translateY(-30px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(130px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-50 {
  0% {
    transform: translateY(-50px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(110px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-60 {
  0% {
    transform: translateY(-60px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(90px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-70 {
  0% {
    transform: translateY(-70px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(80px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-80 {
  0% {
    transform: translateY(-80px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(80px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-90 {
  0% {
    transform: translateY(-90px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(60px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-100 {
  0% {
    transform: translateY(-100px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(60px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-110 {
  0% {
    transform: translateY(-110px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(30px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-120 {
  0% {
    transform: translateY(-120px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(20px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-150 {
  0% {
    transform: translateY(-150px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(10px) translateZ(0);
    opacity: 0;
  }
}
@keyframes fadeNumberDown-160 {
  0% {
    transform: translateY(-160px) translateZ(0);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(10px) translateZ(0);
    opacity: 0;
  }
}
/* Animated background ends */

/* Mobile responsive font sizes */
@media (max-width: 767px) {
  h1 {
    font-size: 1.5em;
  }

  h5 {
    font-size: 1.2em !important;
  }

  .container-fluid > .row ul li, p {
    font-size: 0.9em;
  }

  .text {
    font-size: 1.5vw;
  }

  .title {
    font-size: 0.9em;
  }
}
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  box-shadow: 0 4px 32px 0 rgba(0,0,0,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
}