@keyframes animate-contact {
  0% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(-10deg);
  }
  10% {
    transform: rotate(5deg);
  }
  15% {
    transform: rotate(-10deg);
  }
  20% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  35% {
    transform: rotate(-10deg);
  }
  40% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
@keyframes pulseLight {
  0% {
    box-shadow: 0 0 0 0 rgb(210, 210, 210);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(154, 150, 149, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(119, 114, 113, 0);
  }
}
.animate-contact {
  animation: animate-contact 1.75s infinite;
}

.bg-main {
  background-image: url(../../Image/design/back-gray-circle-left.png),
    url(../../Image/design/back-stairs.png);
  background-position: top left, bottom right;
  background-size: 290px, 960px 650px;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
  .bg-main {
    background-image: url(../../Image/design/back-gray-circle-left.png),
      url(../../Image/design/back-stairs.png);
    background-position: top left, bottom right;
    background-size: 150px, 800px 400px;
    background-repeat: no-repeat;
  }
}

.slider.owl-carousel .owl-nav button.owl-next,
.slider.owl-carousel .owl-nav button.owl-prev,
.big-slider.owl-carousel .owl-nav button.owl-next,
.big-slider.owl-carousel .owl-nav button.owl-prev {
  background: var(--color-theme-primary);
  color: #ffff;
  width: 40px;
  height: 40px;
  font-size: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-theme-second-primary);
}


/* .owl-carousel .owl-stage-outer {
  padding: 0.5rem 0;
} */

.owl-theme .owl-dots .owl-dot span,
.owl-theme .owl-dots .owl-dot.active span {
  transition: width 0.5s;
}
.owl-theme .owl-dots .owl-dot.active span {
  width: 1.75rem;
}

.slider.owl-carousel .owl-nav button.owl-next,
.big-slider.owl-carousel .owl-nav button.owl-next {
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-100%);
  opacity: 0;
  transition: all 0.4s ease;
}

.slider.owl-carousel .owl-nav button.owl-prev,
.big-slider.owl-carousel .owl-nav button.owl-prev {
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-100%);
  opacity: 0;
  transition: all 0.4s ease;
}

.slider.owl-carousel:hover .owl-nav button.owl-next,
.big-slider.owl-carousel:hover .owl-nav button.owl-next {
  left: -10px;
  opacity: 1;
}

.slider.owl-carousel:hover .owl-nav button.owl-prev,
.big-slider.owl-carousel:hover .owl-nav button.owl-prev {
  right: -10px;
  opacity: 1;
}
.owl-theme .owl-dots .owl-dot span {
  background-color: var(--color-theme-forth-primary);
  transition: width 0.5s;
}

.owl-theme .owl-dots .owl-dot.active span {
  background-color: var(--color-theme-fifth-primary);
  width: 2rem;
  transition: width 0.5s;
}
.inverted-radius {
  --r: 22px; /* the radius */
  --s: 22px; /* size of inner curve */
  --x: 20px; /* horizontal offset (no percentane) */
  --y: 10px; /* vertical offset (no percentage) */

  width: 400px;
  height: 510px;
  aspect-ratio: 1;
  background-color: var(--color-theme-primary);
  border-radius: var(--r);
  --_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000
        72%);
  --_g: conic-gradient(
    from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),
    #0000 25%,
    #000 0
  );
  --_d: (var(--s) + var(--r));
  mask: calc(100% - var(--_d) - var(--x)) 100% var(--_m),
    100% calc(100% - var(--_d) - var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 calc(100% + 1px))
      calc(-1 * var(--r) - var(--x)) calc(-1 * var(--r) - var(--y)),
    var(--_g) calc(-1 * var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(-1 * var(--_d) - var(--y));
  mask-repeat: no-repeat;
}
.bg-footer {
  background-image: url(../../Image/index/footer-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--color-theme-primary);
}
.style-btn {
  border: none;
}

.style-btn:hover {
  background-position: right center;
  background-size: 200% auto;
  -webkit-animation: pulse 2s infinite;
  animation: pulseLight 1.5s infinite;
}
@media screen and (max-width: 1024px) {
  .inverted-radius {
    --r: 22px; /* the radius */
    --s: 22px; /* size of inner curve */
    --x: 20px; /* horizontal offset (no percentane) */
    --y: 10px; /* vertical offset (no percentage) */

    width: 350px;
    height: 510px;
    aspect-ratio: 1;
    background-color: var(--color-theme-primary);
    border-radius: var(--r);
    --_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000
          72%);
    --_g: conic-gradient(
      from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),
      #0000 25%,
      #000 0
    );
    --_d: (var(--s) + var(--r));
    mask: calc(100% - var(--_d) - var(--x)) 100% var(--_m),
      100% calc(100% - var(--_d) - var(--y)) var(--_m),
      radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 calc(100% + 1px))
        calc(-1 * var(--r) - var(--x)) calc(-1 * var(--r) - var(--y)),
      var(--_g) calc(-1 * var(--_d) - var(--x)) 0,
      var(--_g) 0 calc(-1 * var(--_d) - var(--y));
    mask-repeat: no-repeat;
  }
  .bg-footer {
    background-image: url(../../Image/index/footer-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--color-theme-primary);
  }
  .style-btn {
    border: none;
  }

  .style-btn:hover {
    background-position: right center;
    background-size: 200% auto;
    -webkit-animation: pulse 2s infinite;
    animation: pulseLight 1.5s infinite;
  }
}
.shadow-inset {
  box-shadow: inset 0 0 70px rgba(235, 235, 235, 0.5);
}
.gradiant-gray {
  background: #f0f0f0;
  background: linear-gradient(
    90deg,
    rgba(240, 240, 240, 1) 0%,
    rgba(237, 237, 237, 1) 33%,
    rgba(240, 240, 240, 1) 67%,
    rgba(237, 237, 237, 1) 100%
  );
}
.gradiant-blue {
  background: #2c98eb;
  background: linear-gradient(
    90deg,
    rgba(44, 152, 235, 1) 0%,
    rgba(9, 110, 186, 1) 35%,
    rgba(44, 152, 235, 1) 70%,
    rgba(9, 110, 186, 1) 100%
  );
}
.bg-slogan{
  background-image: url(../../Image/design/bg-slogan.png) , linear-gradient(90deg, rgba(120, 194, 250, 1) 0%, rgb(39, 147, 231) 50%);
  background-position: right ,center ;
  background-size: 550px , auto;
  background-repeat: no-repeat;
}