@import url(https://fonts.googleapis.com/css?family=Open+Sans:800,300);
@import url('https://fonts.googleapis.com/css?family=Yesteryear');



body {
font-family: 'Arial', sans-serif;
background-color: #e5ddb8;


}

header {
background-color: #2a2735;
color: #ffffff;
padding: 20px;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
}

img.profile-img {
max-width: 300px;
height: auto;
/* border-radius: 50%; */
/* margin-left: 20px; */
/* Adjust the margin as needed */
}

section {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.heading{
font-size:20px;
font-weight:600;
color:#e94a22;

}

.line1{
color:#000;
font-size:12px;

}
.line2{
color:#000;
font-size:12px;

}
.line3{
color:#000;
font-size:12px;

}

.cards{

transition: all 0.2s ease;
cursor: pointer;
 
}


 
.cards:hover{

box-shadow: 5px 6px 6px 2px #467d94;
transform: scale(1.1);
}

#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(29, 52, 78);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}

#loading-text {
font-size: 20px;
}


 

/*  ====================================== */

:root {
    --color-1: #186cb8;
    --color-2: #2a9a9f;
    --color-3: #f1b211;
    --color-4: #e83611;
    --color-5: #f9002f;
  }
  
  
  .wrapper {
    background: #000;
    line-height: 1;
    min-height: 100%;
    display: grid;
    place-items: center;
    min-height: calc(100vh - 16px);
  }
  
  h2 {
    font-family: "Exo", sans-serif;
    font-size: 15vw;
    font-weight: 200;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    margin: auto;
    text-transform: uppercase;
    background: linear-gradient(219deg, 
      var(--color-1) 19%, 
      transparent 19%,transparent 20%, 
      var(--color-2) 20%, var(--color-2)  39%,
      transparent 39%,transparent 40%, 
      var(--color-3) 40%,var(--color-3) 59% ,
      transparent 59%,transparent 60%, 
      var(--color-4) 60%, var(--color-4) 79%,
      transparent 79%, transparent 80%, 
      var(--color-5) 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  
  .containerIntro {
    padding: 1.5rem;   
    text-align: center;
    background: radial-gradient(circle at 1.4% 1.4% ,var(--color-1) .8%,transparent  .8% ), 
      radial-gradient(circle at 5.5% 3%,var(--color-2) .45% ,transparent .45% ), 
      radial-gradient(circle at 2.5% 3.5%,var(--color-3) .5% ,transparent .5% ), 
      radial-gradient(circle at 4.5% 1.2%,var(--color-4) .25%,transparent .25% ),
  
      radial-gradient(circle at 98% 98% ,var(--color-1) .8%,transparent  .8% ), 
      radial-gradient(circle at 95% 95%,var(--color-2) .45% ,transparent .45% ), 
      radial-gradient(circle at 94.5% 97.5%,var(--color-3) .5% ,transparent .5% ), 
      radial-gradient(circle at 98.5% 95.5%,var(--color-4) .25%,transparent .25% );
  
  
  }
  
  @media screen and (min-width: 768px) {
    h2 {
      font-size: 2.5rem;
    }
  }

 

/* ------------- */


.wordCarousel {
  font-size: 20px;
  font-weight: 100;
  

  color: #eee;
  div {
      overflow: hidden;
      position: relative;
      /* float: left; */
      height: 65px;
      padding-top: 10px;
      margin-top: -10px;
      li {
        font-family: "Montserrat", bold;
          color: #e37230ce;
          font-weight: 700;
          padding: 0 5px;
          height: 45px;
          margin-bottom: 45px;
          display: block;
      }
  }
}

.flip2 { animation: flip2 2s cubic-bezier(0.23, 1, 0.32, 1.2) infinite; }
.flip3 { animation: flip3 3s cubic-bezier(0.23, 1, 0.32, 1.2) infinite; }
.flip4 { animation: flip4 4s cubic-bezier(0.23, 1, 0.32, 1.2) infinite; }
.flip5 { animation: flip5 5s cubic-bezier(0.23, 1, 0.32, 1.2) infinite; }

@keyframes flip2 {
  0% { margin-top: -180px; }
  5% { margin-top: -90px;  }
  50% { margin-top: -90px; }
  55% { margin-top: 0px; }
  99.99% { margin-top: 0px; }
  100% { margin-top: -180px; }
}

@keyframes flip3 {
  0% { margin-top: -270px; }
  5% { margin-top: -180px; }
  33% { margin-top: -180px; }
  38% { margin-top: -90px; }
  66% { margin-top: -90px; }
  71% { margin-top: 0px; }
  99.99% { margin-top: 0px; }
  100% { margin-top: -270px; }
}

@keyframes flip4 {
  0% { margin-top: -360px; }
  5% { margin-top: -270px; }
  25% { margin-top: -270px; }
  30% { margin-top: -180px; }
  50% { margin-top: -180px; }
  55% { margin-top: -90px; }
  75% { margin-top: -90px; }
  80% { margin-top: 0px; }
  99.99% { margin-top: 0px; }
  100% { margin-top: -360px; }
}

@keyframes flip5 {
  0% { margin-top: -450px; }
  5% { margin-top: -360px; }
  20% { margin-top: -360px; }
  25% { margin-top: -270px; }
  40% { margin-top: -270px; }
  45% { margin-top: -180px; }
  60% { margin-top: -180px; }
  65% { margin-top: -90px; }
  80% { margin-top: -90px; }
  85% { margin-top: 0px; }
  99.99% { margin-top: 0px; }
  100% { margin-top: -450px; }
}

 /* -----------------sdsd */
.scrollsec {
  background: #333;
  /* height: 100vh; */
  position: relative;
  /* width: 100%; */
  
}


.scrollsec::before {
  animation: bounce 1s ease infinite;
  bottom: 2rem;
  /* text-orientation: mixed; */
  /* writing-mode: vertical-lr; */
  /* border: solid black 1px; */
  /* display: inline-block; */
  color: black;
  content: "╲╱";/* content: '╲╱'; */
  font-size: 1rem;
  font-weight: bolder;
  height: 2rem;
  right: 0%;
  letter-spacing: -1px;
  line-height: 1rem;
  margin-left: -3rem;
  opacity: 0.8;
  position: absolute;
  text-align: center;
  width: 6rem;
}

@keyframes bounce {
  50% {
    transform: translateY(-50%);
  }
}

.hidden {
  display: none;
}



/* body,
html {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
} */

/* body {
  font-family: "Roboto Condensed", cursive;
  display: flex;
  align-items: center;
  justify-content: center;
  background: darkorange; 
  &::after {
      content:"";
      display: block;
      width: 110%;
      height: 125vh;
      background: radial-gradient(#222, #000);
      position: absolute;
      z-index: -1;
      transform: rotate(20deg);
      border-radius: 50%;
  }
} */

@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

.footer {
  position: relative;
  width: 100%;
  background: #3586ff;
  min-height: 100px;
  padding: 20px 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.social-icon,
.menu {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
}

.social-icon__item,
.menu__item {
  list-style: none;
}

.social-icon__link {
  font-size: 2rem;
  color: #fff;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
  text-align: center;
}
.social-icon__link:hover {
  transform: translateY(-10px);
}

.menu__link {
  font-size: 1.2rem;
  color: #fff;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
  text-decoration: none;
  opacity: 0.75;
  font-weight: 300;
  text-align: center;
}

.menu__link:hover {
  opacity: 1;
}

.footer p {
  color: #fff;
  margin: 15px 0 10px 0;
  font-size: 1rem;
  font-weight: 300;
  text-align: center;
}

.wave {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("/assets/wave.png");
  background-size: 1000px 100px;
}

.wave#wave1 {
  z-index: 1000;
  opacity: 1;
  bottom: 0;
  animation: animateWaves 4s linear infinite;
}

.wave#wave2 {
  z-index: 999;
  opacity: 0.5;
  bottom: 10px;
  animation: animate 4s linear infinite !important;
}

.wave#wave3 {
  z-index: 1000;
  opacity: 0.2;
  bottom: 15px;
  animation: animateWaves 3s linear infinite;
}

.wave#wave4 {
  z-index: 999;
  opacity: 0.7;
  bottom: 20px;
  animation: animate 3s linear infinite;
}

@keyframes animateWaves {
  0% {
    background-position-x: 1000px;
  }
  100% {
    background-positon-x: 0px;
  }
}

@keyframes animate {
  0% {
    background-position-x: -1000px;
  }
  100% {
    background-positon-x: 0px;
  }
}
 /* -------------------Social Media------------------------------------- */

 .social-icons{
  
  /* padding:30px;   */
  /* background-color:#00506b; */
  text-align: center;
}
.social-icons a{
  color:#fff;
  line-height:30px;
  font-size:30px;
  margin: 0 5px;
  text-decoration:none;
  
}
.social-icons a i{
  line-height:30px;
  font-size:30px;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1); 
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1); 
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
}
.social-icons a:hover i{
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);   
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.5);
}

#myLink2 {
  position: relative;
  /* display: inline-block; */
  
  /* padding: 1%; */
   
  /* margin: 40px 0; */
  color: #03e9f4;
  text-decoration: none;
  /* text-transform: uppercase; */
  transition: 0.5s;
  letter-spacing: 2px;
  overflow: hidden;
  /* margin-right: 50px; */
}

#myLink2:hover {
  background: #03e9f4;
  color: #050801;
  box-shadow: 0 0 0 #03e9f4, 0 0 0 #03e9f4, 0 0 0 #03e9f4, 0 0 0 #03e9f4;  /* -webkit-box-reflect: below 1px linear-gradient(transparent, #0005); */
}

#myLink2 span {
  position: absolute;
  display: block;
}

#myLink2 span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: animate1 1s linear infinite;
}

@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

#myLink2 span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}

@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

#myLink2 span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}

@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

#myLink2 span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}

@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  height: 10vh;
  list-style: none;
}
.menu li {
  width:40px;
  height: 10px;
  transition: background-position-x 0.9s linear;
  text-align: center;
}
.menu li a {
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.45s;
}
.menu li:hover {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEi%0D%0AIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhs%0D%0AaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0%0D%0AaD0iMzkwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDM5MCA1MCIgZW5hYmxlLWJhY2tn%0D%0Acm91bmQ9Im5ldyAwIDAgMzkwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0i%0D%0Abm9uZSIgc3Ryb2tlPSIjZDk0ZjVjIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGlt%0D%0AaXQ9IjEwIiBkPSJNMCw0Ny41ODVjMCwwLDk3LjUsMCwxMzAsMAoJYzEzLjc1LDAsMjguNzQtMzgu%0D%0ANzc4LDQ2LjE2OC0xOS40MTZDMTkyLjY2OSw0Ni41LDI0My42MDMsNDcuNTg1LDI2MCw0Ny41ODVj%0D%0AMzEuODIxLDAsMTMwLDAsMTMwLDAiLz4KPC9zdmc+Cg==");
  animation: line 1s;
}
.menu li:hover a {
  color: #68d94f;
}
.menu li:not(:last-child) {
  margin-right: 30px;
}
@keyframes line {
  0% {
    background-position-x: 390px;
 }
}