.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
    url("./images/bg.jpg");
  background-size: cover;
  height: 800px;
}

/* left small images starts */

.smallimg-1left {
  outline: 3px solid rgb(101, 179, 199);
  height: 6.500541711809317vw;
  width: 6.500541711809317vw;
  border-radius: 50%;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}

.smallimg-1left:hover {
  transform: scale(1.1);
  /* transform-origin: left top; */
  transition: all 0.5s;
  background: linear-gradient(
      rgba(101, 179, 199, 0.5),
      rgba(101, 179, 199, 0.5)
    ),
    url("./images/1.jpg");
  background-size: cover;
  background-position: center;
  background-clip: content-box;
  padding: 5px;
}

.smallimg-2left {
  outline: 3px solid rgb(249, 252, 111);
  height: 10vw;
  width: 10vw;
  border-radius: 50%;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  position: absolute;
  bottom: 0;
}

.smallimg-2left:hover {
  transform: scale(1.1);
  /* transform-origin: left top; */
  transition: all 0.5s;
  background: linear-gradient(
      rgba(249, 252, 111, 0.5),
      rgba(249, 252, 111, 0.5)
    ),
    url("./images/2.jpg");
  background-size: cover;
  background-position: center;
  background-clip: content-box;
  padding: 5px;
}

/* left small images starts  ends*/

/* center images starts */
.image_1,
.image_2 {
  height: 20vw;
  width: 20vw;
  border-radius: 50%;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}

.image_1 {
  outline: 5px solid rgb(199, 101, 101);
}

.image_2 {
  outline: 5px solid rgb(101, 179, 199);
}

.image_1:hover {
  transform: scale(1.1);
  /* transform-origin: left top; */
  transition: all 0.5s;
  background: linear-gradient(
      rgba(199, 101, 101, 0.5),
      rgba(199, 101, 101, 0.5)
    ),
    url("./images/1.jpg");
  background-size: cover;
  background-position: center;
  background-clip: content-box;
  padding: 10px;
}

.image_2:hover {
  transform: scale(1.1);
  /* transform-origin: left top; */
  transition: all 0.5s;
  background: linear-gradient(
      rgba(101, 179, 199, 0.5),
      rgba(101, 179, 199, 0.5)
    ),
    url("./images/2.jpg");
  background-size: cover;
  background-position: center;
  background-clip: content-box;
  padding: 10px;
}

/* center images ends */

/* right small images starts */
.smallimg-1right {
  outline: 3px solid rgb(199, 101, 101);
  height: 6vw;
  width: 6vw;
  border-radius: 50%;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  position: absolute;
  right: 15%;
  top: -34px;
}

.smallimg-1right:hover {
  transform: scale(1.1);
  /* transform-origin: left top; */
  transition: all 0.5s;
  background: linear-gradient(
      rgba(199, 101, 101, 0.5),
      rgba(199, 101, 101, 0.5)
    ),
    url("./images/2.jpg");
  background-size: cover;
  background-position: center;
  background-clip: content-box;
  padding: 5px;
}

.smallimg-2right {
  outline: 3px solid rgb(249, 252, 111);
  height: 9vw;
  width: 9vw;
  border-radius: 50%;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  position: absolute;
  right: 0;
  top: 120px;
}

.smallimg-2right:hover {
  transform: scale(1.1);
  /* transform-origin: left top; */
  transition: all 0.5s;
  background: linear-gradient(
      rgba(249, 252, 111, 0.5),
      rgba(249, 252, 111, 0.5)
    ),
    url("./images/2.jpg");
  background-size: cover;
  background-position: center;
  background-clip: content-box;
  padding: 5px;
}

.smallimg-3right {
  outline: 3px solid rgb(199, 101, 101);
  height: 7vw;
  width: 7vw;
  border-radius: 50%;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  position: absolute;
  right: 50px;
  bottom: 0;
}

.smallimg-3right:hover {
  transform: scale(1.1);
  /* transform-origin: left top; */
  transition: all 0.5s;
  background: linear-gradient(
      rgba(199, 101, 101, 0.5),
      rgba(199, 101, 101, 0.5)
    ),
    url("./images/2.jpg");
  background-size: cover;
  background-position: center;
  background-clip: content-box;
  padding: 5px;
}

/* right small image ends */

/* curve line starts */
.curve-line {
  width: 16.5vw;
}

.big-text {
  font-size: 1.5vw;
  color: white;
}

/* curve line ends */

/* second design box */
.circle-container {
  position: relative;
  display: inline-block;
}

.main-circle {
  width: 32vw;
  height: 32vw;
  border-radius: 50%;
}

.small-images {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.small-image {
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  position: absolute;
}

.small-image:nth-child(1) {
  top: -16%;
  left: 90%;
}

.small-image:nth-child(2) {
  top: 13%;
  left: 111%;
}

.small-image:nth-child(3) {
  top: 46%;
  left: 114%;
}

.small-image:nth-child(4) {
  top: 77%;
  left: 104%;
}

.small-image:nth-child(5) {
  top: 101%;
  left: 80%;
}

/* active image */
.small-image.active {
  border: 4px solid black;
  transform: scale(1.1);
  transition: all 1s;
}

@media (max-width: 800px) {
  .small-image {
    width: 10vw;
    height: 10vw;
  }

  .main-circle {
    width: 50vw;
    height: 50vw;
  }
}