.box1
{
  height: 200px;
    width: 200px;
   background-image: linear-gradient(to right bottom, #fd4617, #ff6d12, #ff8d19, #ffaa2c, #ffc445);
    border-radius: 50%;
    border: 10px solid white;
  overflow:hidden;
  margin:auto;
  box-shadow: 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
}

.box2
{
  height: 200px;
    width: 200px;
background-image: linear-gradient(to right bottom, #fff05a, #ffde56, #ffcc55, #ffbb57, #ffaa5a);
  box-shadow: 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
    border-radius: 50%;
    border: 10px solid white;
  overflow:hidden;
  margin:auto;
}

.box3
{
  height: 200px;
    width: 200px;
background: #00b09b;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #96c93d, #00b09b);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #96c93d, #00b09b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

box-shadow: 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
    border-radius: 50%;
    border: 10px solid white;
  overflow:hidden;
  margin:auto;
}

.box4
{
  height: 200px;
    width: 200px;
background-image: linear-gradient(to right bottom, #3da5d9, #2eb9e4, #29ccec, #38dff1, #54f2f2);
box-shadow: 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
    border-radius: 50%;
    border: 10px solid white;
  overflow:hidden;
  margin:auto;
}



.box1-inner
{
      background-color: #ffffff;
    height: 120px;
    width: 120px;
    border-radius: 50%;
    margin: 31px auto;
    background-image: linear-gradient(to right bottom, #ffffff, #fffefe, #fbfbfb, #f1ecec, #d2d2d2);
    box-shadow: 36px 27px 11px -5px rgba(27, 14, 0, 0.16);
    border: 1px solid #e6e5e4;
  transition:1s;
  cursor:pointer;
  animation: swing ease-in-out 0s infinite alternate;
    transform-origin: top;
    transform-box: fill-box;
    left: calc(42% - .0rem);
}


.box1-inner:hover
{
  box-shadow: -25px 50px 11px -5px rgba(27, 14, 0, 0.16);
  transition:1s;
}

.icon-set
{
      text-align: center;
    width: 100%;
    margin: auto;
    padding-top: 40px;
    float: left;
	font-family: Impact , sans-serif;
	color: #222F5A;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.5;
	font-size: 1.5rem;
}

.text-heading
{
  position: absolute;
    top: 230%;
    left: 22%;
}
.text-heading h3
{
  text-transform: uppercase;
    text-align: center;
    font-size: 18px;
}
.text-heading p
{
  text-transform: uppercase;
    text-align: center;
    font-size: 10px;
}
.color1 h3
{
  color: #ff6a00;
}

.color2 h3
{
  color: #ffbc00;
  
}

.color3 h3
{
  color: #06af23;
  
}

.color4 h3
{
  color: #06a7af;
}






.color1 div
{
   background-image: linear-gradient(to right bottom, #fd4617, #ff6d12, #ff8d19, #ffaa2c, #ffc445);
}

.color2 div
{
   background-image: linear-gradient(to right bottom, #fff05a, #ffde56, #ffcc55, #ffbb57, #ffaa5a);
}

.color3 div
{
       background: #00b09b;
    background: -webkit-linear-gradient(to right, #96c93d, #00b09b);
    background: linear-gradient(to right, #96c93d, #00b09b);
}

.color4 div
{
      background-image: linear-gradient(to right bottom, #3da5d9, #2eb9e4, #29ccec, #38dff1, #54f2f2);
}




.circle3
{
     height: 10px;
    width: 10px;
    position: absolute;
    background-color: white;
    border-radius: 50%;
    right: -10%;
    top: 50%;
  border: 1px solid #cecbcb;
    box-shadow: 5px 5px 7px 1px rgba(0, 0, 0, 0.12);
}



/*************swing************/
@keyframes swing {
    0% { transform: rotate(8deg); }
    100% { transform: rotate(-8deg); }
}


/*************responsive**************/

@media only screen and (max-width: 1024px)
{
  
  .box1:after, .box2:after, .box3:after, .box4:after
  {
        height: 172px;
  }
  
  .small-box1:after
  {
    left: 29.5%;
  }
  .small-box1
  {
        left: calc(40% - .0rem);
  }
  
  .box1 {
   height: 150px;
    width: 150px;
  }
  
  .box2 {
  height: 150px;
    width: 150px;
  }
  
  .box3 {
    height: 150px;
    width: 150px;
  }
  .box4 {
   height: 150px;
    width: 150px;
  }
  
  .box1-inner
  {
    height: 100px;
    width: 100px;
    margin: 14px auto;
  }
  
  svg
  {
    width:60%;
  }
  
  .icon-set
  {
    padding-top: 10px;
  }
  
  .small-box1
  {
        bottom: -142%;
  }
  
  .text-heading
  {
    top: 251%;
  }
}




@media only screen and (max-width: 768px)
{
  .small-box1
  {
        left: calc(37% - .0rem);
    bottom: -144%;
  }
  
  .box1 {
     height: 120px;
    width: 120px;
  }
  
  .box2 {
        height: 120px;
    width: 120px;
  }
  
  .box3 {
       height: 120px;
    width: 120px;
  }
  .box4 {
        height: 120px;
    width: 120px;
  }
  
  .box1-inner
  {
   height: 70px;
    width: 70px;
    margin: 14px auto;
  }
  
  svg
  {
    width:50%;
  }
  
  .icon-set
  {
    padding-top: 0px;
  }
  
  .text-heading h3
  {
        font-size: 14px;
  }
  
  .box1:after, .box2:after, .box3:after, .box4:after
  {
        height: 140px;
  }
  
  .text-heading p
  {
    font-size: 8px;
  }
  
  .text-heading
  {
    top: 251%;
  }
}




@media only screen and (max-width: 425px)
{
  
  .box
  {
    height: 300px;
        margin-bottom: 30px;
  }
  .small-box1
  {
        left: calc(44% - .0rem);
    bottom: 15%;
  }
  
  .box1:before, .box2:before, .box3:before, .box4:before
  {
    bottom: 145px;
    left: 48.8%;
  }
  .box1 {
        height: 150px;
    width: 150px;
  }
  
  .box2 {
        height: 150px;
    width: 150px;
  }
  
  .box3 {
        height: 150px;
    width: 150px;
  }
  .box4 {
        height: 150px;
    width: 150px;
  }
  
  .box1-inner
  {
   height: 80px;
    width: 80px;
    margin: 26px auto;
  }
  
  svg
  {
    width:60%;
  }
  
  .icon-set
  {
    padding-top: 0px;

  }
  
  .text-heading h3
  {
        font-size: 14px;
  }
  
  .box1:after, .box2:after, .box3:after, .box4:after
  {
    height: 60px;
  }
  
  .text-heading p
  {
    font-size: 8px;
  }
  
  .text-heading {
    top: 88%;
    left: 35%;
}
  
  .circle1
  {
        right: 25%;
  }
  
  .circle2
  {
        right: 16%;
  }
  
  .circle3
  {
        right: 9%;
  }
  
}


@media only screen and (max-width: 425px)
{
  
  .box1:before, .box2:before, .box3:before, .box4:before
  {
        left: 48.7%;
  }
  
  .small-box1:after
  {
    left: 37%;
  }
}


@media only screen and (max-width: 425px)
{
  
  @media only screen and (max-width: 425px)
  {
    body
    {
      height: 903vh;
    }
.text-heading {
  left: 30%;
  }
  
  .small-box1 {
left: calc(43.8% - .0rem);
  }
  
}