#header {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* header custom header */
#header .header-body {
  width: 100% !important;
}

#header .header-body .header-container {
  width: 80% !important;
}
/* end header custom */

.main {
  width: 100%;
  margin: 0;
  padding: 0;
}

.main-top,
.main-buttom,
.intro-body {
  width: 80%;
  margin: auto;
}

/* Animated Circles */
.img-hero {
  position: relative;
  z-index: 1;
}
.custom-animated-circles {
  position: absolute;
  left: 100%;
  top: 100%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.custom-animated-circles .circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  border-radius: 100%;
  border: 1px solid #c92727;
  transform: translate3d(-50%, -50%, 0);
  animation-name: customAnimatedCircles;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-duration: 2.5s;
  animation-delay: 500ms;
}

.custom-animated-circles .circle:nth-child(2) {
  width: 40%;
  height: 40%;
  animation-delay: 1000ms;
}

.custom-animated-circles .circle:nth-child(3) {
  width: 70%;
  height: 70%;
  animation-delay: 1500ms;
}

.custom-animated-circles .circle:nth-child(4) {
  width: 90%;
  height: 90%;
  animation-delay: 2000ms;
}

.custom-animated-circles.custom-animated-circles-pos-2 {
  bottom: auto;
  top: 0;
  transform: translate3d(-55%, -25%, 0);
}

.custom-animated-circles.custom-animated-circles-pos-3 {
  bottom: auto;
  left: auto;
  right: 0;
  transform: translate3d(65%, -50%, 0);
  top: 0;
}

@keyframes customAnimatedCircles {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.8);
  }
  50% {
    opacity: 0.5;
    transform: translate3d(-50%, -50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.1);
  }
}

/* Skin */
/* Animated Circles */
.custom-animated-circles-primary .circle {
  border-color: var(--primary) !important;
}

/* footer custom 80% width */
#footer {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

#footer .footer-head {
  width: 80%;
}

@media (max-width: 991px) {
  #header .header-body .header-container {
    width: 100% !important;
    padding-inline: 5%;
  }
  #header .header-body {
    width: 100% !important;
    padding-inline: 5%;
  }

  .main-top {
    width: 100% !important;
    padding-inline: 5% !important;
  }

  .main-buttom,
  .intro-body {
    width: 100% !important;
    padding-inline: 5% !important;
  }

  #footer .footer-head {
    width: 100% !important;
    padding-inline: 5%;
  }
}

/* btn custom*/
a.btn {
  border-radius: 6px;
}

/* footer */
.footer-head .container-fluid,
.footer-copyright .container-fluid {
  padding: 0;
  margin: 0;
}
