.blob {
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(225, 225, 225, 1);
  transform: scale(1);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(225, 225, 225, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(225, 225, 225, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(225, 225, 225, 0);
  }
}









.glowing-element {
  /* width: 100px;
  height: 100px; */
  /* background-color: #3498db; */
  /* Example color */
  /* border-radius: 50%; */
  background: transparent;
  box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
  /* Initial glow */
  animation: pulse-glow 2s infinite alternate;
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
  }

  70% {
    box-shadow: 0 0 20px rgba(52, 152, 219, 1);
  }

  100% {
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
  }
}








.glowing-rotating-element {
  /* width: 100px;
  height: 100px;
  background-color: #007bff; */
  /* Example background color */
  border-radius: 10px;
  /* Optional: for a rounded element */
  animation: glowRotate 3s infinite linear;
  /* Apply the animation */
}

@keyframes glowRotate {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.7);
    /* Initial glow */
  }

  50% {
    transform: rotate(180deg);
    box-shadow: 0 0 30px rgba(0, 123, 255, 1);
    /* Stronger glow at midpoint */
  }

  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.7);
    /* Return to initial glow */
  }
}



.highlight-image-embos {
  background: url("../img/bg-50-embos.png") no-repeat top left !important;
  background-size: contain;
  animation: pulse-opacity 1.5s infinite alternate;
}

.highlight-image-200 {
  background: url("../img/logo-embos-200.png") no-repeat top center !important;
  background-size: contain;
  width: 200px;
  height: 200px;
  animation: pulse-opacity 1.5s infinite alternate;
}

.highlight-image-300 {
  background: url("../img/logo-embos-300.png") no-repeat top center !important;
  background-size: contain;
  width: 300px;
  height: 300px;
  animation: pulse-opacity 1.5s infinite alternate;
}

.highlight-image-300-glow {
  background: url("../img/logo-embos-300.png") no-repeat top center !important;
  background-size: contain;
  border-radius: 50%;
  width: 300px;
  height: 300px;

  animation: heroglow 7s infinite;
  /* animation: pulse-opacity 1.5s infinite alternate; */
}

@keyframes pulse-opacity {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1.5;
  }

  100% {
    opacity: 0.5;
  }
}

@-webkit-keyframes heroglow {
  0% {
    opacity: 0.5;
    background: transparent;
    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  }

  70% {
    opacity: 1.5;
    background: transparent;
    -webkit-box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
  }

  100% {
    opacity: 0.5;
    background: transparent;
    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}

@keyframes heroglow {
  0% {
    opacity: 0.5;
    background: transparent;
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  }

  70% {
    opacity: 1.5;
    background: transparent;
    -moz-box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
  }

  100% {
    opacity: 0.5;
    background: transparent;
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}













.myfulse {
  /* margin: 100px; */
  display: block;
  /* width: 22px;
  height: 22px; */
  /* border-radius: 50%; */
  background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
  animation: myfulse 3s infinite;
}

.myfulse:hover {
  animation: none;
}

@-webkit-keyframes myfulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  }

  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}

@keyframes myfulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  }

  70% {
    -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
  }

  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}









.link-effect:hover {
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
  animation: btn-effect 0.5s infinite;
}

.btn-effect:hover {
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
  color: #000;
  animation: btn-effect 0.5s infinite;
}

.btn-effect-2:hover {
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
  background: url("../img/bg/r-blue-2.png") repeat bottom left !important;
  color: #000;
  animation: btn-effect 0.5s infinite;
}

@-webkit-keyframes btn-effect {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  }

  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}

@keyframes btn-effect {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  }

  70% {
    -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
  }

  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}




.bg-gradient {
  background: linear-gradient(45deg, transparent, transparent, transparent, transparent, transparent, #2195f37c, transparent, transparent, transparent, transparent);
  color: #ffffff;
  background-size: 400% 400%;
  animation: gradient 10s ease infinite;
}

.bg-gradient:hover {
  color: #ffffff;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}





.parallax {
  background-image: url('background.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.parallax-content {
  transform: translateZ(0);
  display: inline-block;
}

.parallax h1 {
  font-size: 4rem;
  margin: 0;
}

.parallax p {
  font-size: 1.5rem;
  margin: 20px 0;
}







.loading-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #FF5722;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.text-gradient {
  background: linear-gradient(to right, #ffffff, #44a9d7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-gradient-animation 2s linear infinite;
}

@keyframes text-gradient-animation {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}




.scaling-button {
  /* padding: 10px 20px; */
  background-color: #FF5722;
  color: #FFF;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.scaling-button {
  transform: scale(1.1);
}




.wrapper-text {
  text-align: center;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #fff;
    background: linear-gradient(to left, #f8b537d7 1%, #095fab 10%, #25abe8 50%, #ffffffef 60%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
  }
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}




/* DEMO-SPECIFIC STYLES */
.typewriter p {
  color: #fff;
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid rgba(255, 189, 68, 0.781);
  /* The typwriter cursor */
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;
  /* Adjust as needed */
  animation:
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {

  from,
  to {
    border-color: transparent
  }

  50% {
    border-color: orange
  }
}



.gradient-border {
  --borderWidth: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}

.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}


@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}