@charset "utf-8";
/* CSS Document */

	
		.step:hover {
  --scale: 1.15; /* smooth zoom */
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  filter: brightness(1.1);
}
	

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    width: 30% !important;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}







body {
  margin: 0;
  height: 85vh;
  overflow: hidden;   /* 🔥 stops scrolling */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  font-family: Arial, sans-serif;
}	
		
.circle {
      position: relative;
    width: 60%;
    height: 60%;
    border-radius: 50%;
}
		.center {
			
			    box-shadow: 1px 2px 3px 1px #999999;
			
			border: 10px solid white;
  position: absolute;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, #222, #000);
  color: #fff;
  border-radius: 50%;

  display: flex;
  flex-direction: column;   /* STACK logo + text */
  justify-content: center;
  align-items: center;      /* CENTER horizontally */
  text-align: center;

  gap: 10px;

  top: 50%;
  left: 50%;
  transform: translate(-30%, -30%);
}

/* Logo */
.logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
	  animation: floatLogo 4s ease-in-out infinite;
  transition: transform 0.4s ease;
}

		@keyframes floatLogo {
  0%   { transform: translateY(0px) scale(1); }
  50%  { transform: translateY(-1px) scale(1.05); }
  100% { transform: translateY(0px) scale(1); }
}
/* Text */
.center-text {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
	  /* Gradient text */
  background: linear-gradient(90deg, #ffffff, #00f2ff, #6a11cb, #ffffff);
  background-size: 300%;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: textGradient 5s linear infinite;
}
		
		@keyframes softTextMove {
  0%   { background-position: 0%; }
  50%  { background-position: 100%; }
  100% { background-position: 0%; }
}
		
.step {
 position: absolute;
   width: 110px;
    height: 110px;
    background: #368d39;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    top: 50%;
left: 50%;
transform-origin: 0 0;
    transition: 0.3s;
    padding: 6px;
       border: 5px solid #ececec;
	
	  /* Smooth animation */
  transition: transform 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;

  /* Default scale */
  --scale: 1;
}
		.step:hover {
  --scale: 1.15; /* smooth zoom */

  /* combine both shadows */
  box-shadow: 
    0 10px 25px rgba(0,0,0,0.3),
    0 0 20px rgba(255,255,255,0.6);

  filter: brightness(1.1);
}	
		
		/* glowing ring */
.center::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: linear-gradient(45deg, #00f2ff, #6a11cb, #ff6b6b, #00f2ff);
  background-size: 300% 300%;
  z-index: -1;

  animation: rotateGlow 6s linear infinite;
}

/* animation */
@keyframes rotateGlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}


		
		
/* 19 different colors */
.step:nth-child(2)  { background: linear-gradient(135deg, #ff6a6a, #e74c3c); }
.step:nth-child(3)  { background: linear-gradient(135deg, #ff9a44, #e67e22); }
.step:nth-child(4)  { background: linear-gradient(135deg, #ffe259, #f1c40f); }
.step:nth-child(5)  { background: linear-gradient(135deg, #56ab2f, #2ecc71); }
.step:nth-child(6)  { background: linear-gradient(135deg, #00c9a7, #1abc9c); }
.step:nth-child(7)  { background: linear-gradient(135deg, #36d1dc, #3498db); }
.step:nth-child(8)  { background: linear-gradient(135deg, #c471f5, #9b59b6); }
.step:nth-child(9)  { background: linear-gradient(135deg, #a18cd1, #8e44ad); }
.step:nth-child(10) { background: linear-gradient(135deg, #485563, #34495e); }
.step:nth-child(11) { background: linear-gradient(135deg, #1abc9c, #16a085); }
.step:nth-child(12) { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.step:nth-child(13) { background: linear-gradient(135deg, #2980b9, #6dd5fa); }
.step:nth-child(14) { background: linear-gradient(135deg, #f7971e, #d35400); }
.step:nth-child(15) { background: linear-gradient(135deg, #ff5f6d, #c0392b); }
.step:nth-child(16) { background: linear-gradient(135deg, #bdc3c7, #7f8c8d); }
.step:nth-child(17) { background: linear-gradient(135deg, #2c3e50, #4ca1af); }


/* 16 steps evenly spaced */
.step:nth-child(2)  { transform: rotate(0deg) translate(280px) rotate(0deg); }
.step:nth-child(3)  { transform: rotate(22.5deg) translate(280px) rotate(-22.5deg); }
.step:nth-child(4)  { transform: rotate(45deg) translate(280px) rotate(-45deg); }
.step:nth-child(5)  { transform: rotate(67.5deg) translate(280px) rotate(-67.5deg); }
.step:nth-child(6)  { transform: rotate(90deg) translate(280px) rotate(-90deg); }
.step:nth-child(7)  { transform: rotate(112.5deg) translate(280px) rotate(-112.5deg); }
.step:nth-child(8)  { transform: rotate(135deg) translate(280px) rotate(-135deg); }
.step:nth-child(9)  { transform: rotate(157.5deg) translate(280px) rotate(-157.5deg); }
.step:nth-child(10) { transform: rotate(180deg) translate(280px) rotate(-180deg); }
.step:nth-child(11) { transform: rotate(202.5deg) translate(280px) rotate(-202.5deg); }
.step:nth-child(12) { transform: rotate(225deg) translate(280px) rotate(-225deg); }
.step:nth-child(13) { transform: rotate(247.5deg) translate(280px) rotate(-247.5deg); }
.step:nth-child(14) { transform: rotate(270deg) translate(280px) rotate(-270deg); }
.step:nth-child(15) { transform: rotate(292.5deg) translate(280px) rotate(-292.5deg); }
.step:nth-child(16) { transform: rotate(315deg) translate(280px) rotate(-315deg); }
.step:nth-child(17) { transform: rotate(337.5deg) translate(280px) rotate(-337.5deg); }
		
		
		.step span {
  display: inline-block;
  transition: transform 0.35s ease, letter-spacing 0.35s ease;
}
		
		
		.step:hover span {
  transform: scale(1.0);
  letter-spacing: 0.5px;
}
		
		.main-wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;  /* horizontal center */
  align-items: center;      /* vertical center */
  
}