/* hero Section Start */
main {
  position: relative;
  top: 100%;
  margin-top: 10vh;
}

/* Hero Heading */
.section-hero-data {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Top Heading */
.hero-top-data {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.5rem;
  color: #f46711;
  letter-spacing: 10px;
}

/* Sub-Heading */
.hero-sub-heading {
  text-transform: uppercase;
  font-weight: 100;
  font-size: 1.4rem;
}
.hero-sub-heading-letter {
  color: black;
  text-decoration: none;
  font-weight: 1000;
  border: 2px solid;
  font-size: 50px;
  padding: 7px;
  border-radius: 100vh;
  background-color: #f46711;
}
.hero-sub-heading-letter:hover {
  color: black;
  text-decoration: none;
}

/* Main-Heading */
.hero-heading {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 2.4rem;
}

.hero-para {
  margin-top: 1.5rem;
  margin-bottom: 5rem;
  max-width: 60rem;
  border-left: 2px solid #f46711;
  padding-left: 20px;
}

/* Input Box */
.hero-input-right {
  background-color: #f46711;
  border: #f46711;
  color: white;
  font-size: 25px;
}

.section-hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero-img {
  max-width: 80%;
}

/* Hero Button */
.btn-color{
  background: #f46711;
}

.btn-color:hover{
  border: 1px solid #f46711;

}

.btn-color:hover  a{
  color: #f46711;
  background-color: black;
}
.btn-color > a{
  text-decoration: none;


}

/* Animation */

.animation {
  width: 25vw;
  height: 50vh;
  border: 2px solid rgba(100, 100, 100, 0.3);
  position: absolute;
  top: 20;
  left: 10;
  right: 10%;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
}

.circle {
  width: 15px;
  height: 15px;
  background-color: #f46711;
  border-radius: 50%;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
  margin: auto;
  -webkit-animation: circle 5s linear infinite;
  animation: circle 15s linear infinite;
}

.sec-circle {
  width: 15px;
  height: 15px;
  background-color: #f46711;
  border-radius: 50%;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
  margin: auto;
  -webkit-animation: sec-circle 5s linear infinite;
  animation: sec-circle 15s linear infinite;
}

/* Animation KeyFrames */

@-webkit-keyframes circle {
  /* Starting Point */
  0% {
    transform: rotate(0deg) translate(-190px) rotate(0deg);
  }
  /* Ending Point */
  100% {
    transform: rotate(360deg) translate(-190px) rotate(360deg);
  }
}

@-webkit-keyframes sec-circle {
  /* Starting Point */
  0% {
    transform: rotate(180deg) translate(-190px) rotate(180deg);
  }
  /* Ending Point */
  100% {
    transform: rotate(540deg) translate(-190px) rotate(540deg);
  }
}

/* Responsive Design */
@media (max-width: 1285px) {
  main {
    margin-top: 5vh;
  }
  .animation {
    border: none;
    top: 10%;
    left: 5%;
    right: 0%;
  }
  /* HERO IMG */
  .hero-img{
    margin-left: -30px;
    width: 100%;
    margin-top: -20px;
  }

  /* Responsive Animation KeyFrames */

  @-webkit-keyframes circle {
    /* Starting Point */
    0% {
      transform: rotate(0deg) translate(-150px) rotate(0deg);
    }
    /* Ending Point */
    100% {
      transform: rotate(360deg) translate(-150px) rotate(360deg);
    }
  }

  @-webkit-keyframes sec-circle {
    /* Starting Point */
    0% {
      transform: rotate(180deg) translate(-150px) rotate(180deg);
    }
    /* Ending Point */
    100% {
      transform: rotate(540deg) translate(-150px) rotate(540deg);
    }
  }
}

/* Hero Section End */