/* Open Sans CDN link */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

* {
  font-family: 'open sans';
}

.navbar-brand img {
  width: 150px;
  /* Adjust the width as needed */
  height: auto;
  /* Maintain aspect ratio */
}

.navbar-toggler.collapsed .navbar-toggler-icon::after {
  content: '\2715';
  /* Unicode 'x' symbol */
  font-size: 20px;
  font-weight: bold;
}


#typewriter-text {
  border-right: .15em solid #7A3B73;
  /* Blinking cursor effect */
  white-space: nowrap;
  /* Prevents text from wrapping */
  margin: 0;
  /* Removes default margin */
  padding: 0;
  /* Removes default padding */
  animation: typing 3s steps(7, end), blink-caret .75s step-end infinite;
}

.line {
  position: relative;
  border-top: 2px solid #7A3B73;
  width: 50%;
  margin: 0 auto;
  animation: pulse 2s infinite;
}


.owl-carousel {
  display: flex;
  overflow: hidden;
}

.small-line {
  position: relative;
  border-top: 2px solid #f8904b;
  /* Specify the width, style, and color of the line */
  width: 20%;
  /* Set the width of the line */
}


/* Styles for the iframe */
iframe {
  width: 100%;
  /* Set the width of the iframe */
  height: 100%;
  /* Set the height of the iframe */
  border: none;
  /* Remove border from the iframe */
  overflow: hidden;
}

.bg-glass {
  background-color: hsla(0, 0%, 100%, 0.9) !important;
  backdrop-filter: saturate(200%) blur(15px);
}

svg #freepik_stories-nerd:not(.animated) .animable {
  opacity: 0;
}

svg #freepik_stories-nerd.animated #freepik--Floor--inject-1--inject-52 {
  animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) fadeIn;
  animation-delay: 0s;
}

svg #freepik_stories-nerd.animated #freepik--Shadows--inject-1--inject-52 {
  animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) lightSpeedRight;
  animation-delay: 0s;
}

svg #freepik_stories-nerd.animated #freepik--Pencil--inject-1--inject-52 {
  animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) slideLeft;
  animation-delay: 0s;
}

svg #freepik_stories-nerd.animated #freepik--Backpack--inject-1--inject-52 {
  animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) lightSpeedLeft;
  animation-delay: 0s;
}

svg #freepik_stories-nerd.animated #freepik--game-console--inject-1--inject-52 {
  animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) slideRight;
  animation-delay: 0s;
}

svg #freepik_stories-nerd.animated #freepik--Cloud--inject-1--inject-52 {
  animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) zoomIn;
  animation-delay: 0s;
}

svg #freepik_stories-nerd.animated #freepik--Character--inject-1--inject-52 {
  animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) lightSpeedLeft;
  animation-delay: 0s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes lightSpeedRight {
  from {
    transform: translate3d(50%, 0, 0) skewX(-20deg);
    opacity: 0;
  }

  60% {
    transform: skewX(10deg);
    opacity: 1;
  }

  80% {
    transform: skewX(-2deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes lightSpeedLeft {
  from {
    transform: translate3d(-50%, 0, 0) skewX(20deg);
    opacity: 0;
  }

  60% {
    transform: skewX(-10deg);
    opacity: 1;
  }

  80% {
    transform: skewX(2deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Typing animation */
@keyframes typing {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

/* Blinking cursor animation */
@keyframes blink-caret {

  from,
  to {
    border-color: transparent
  }

  50% {
    border-color: orange
  }
}

@keyframes pulse {
  0% {
    width: 100%;
  }

  /*you can change this back to 100*/
  50% {
    width: 50%;
  }

  100% {
    width: 100%;
  }
}