.wow {
    visibility: hidden;
  }

.masked-container {
     overflow: hidden;
      }

  .holderCircle {
    position: relative;
    width: 360px;
    height: 360px;
    margin: 0 auto;
  }

.dotCircle {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: 50%;
  border: 1.6px dashed #0466ab;
  animation: spin 30s linear infinite;
  transform-origin: center center;
}



  .itemDot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    position: absolute;
    background: #fff;
    border-radius: 12px; 
    border: 1px solid #e5e5e5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    box-shadow: 0px 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
  }

  .itemDot img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .itemDot:hover,
  .itemDot.active {
    box-shadow: 0 0 10px rgba(1,154,214,0.4);
    border-color: #019ad6;
    background: #f8f8f8;
  }

  /* Upright positioned items */
  .itemDot1  { transform: translate(-50%, -50%) rotate(0deg) translateX(180px) rotate(0deg); }
  .itemDot2  { transform: translate(-50%, -50%) rotate(60deg) translateX(180px) rotate(-60deg); }
  .itemDot3  { transform: translate(-50%, -50%) rotate(120deg) translateX(180px) rotate(-120deg); }
  .itemDot4  { transform: translate(-50%, -50%) rotate(180deg) translateX(180px) rotate(-180deg); }
  .itemDot5  { transform: translate(-50%, -50%) rotate(240deg) translateX(180px) rotate(-240deg); }
  .itemDot6  { transform: translate(-50%, -50%) rotate(300deg) translateX(180px) rotate(-300deg); }

  .contentCircle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    text-align: center;
  }

  .CirItem {
    display: none;
    animation: fadeIn 0.8s ease-in-out;
  }

  .CirItem.active {
    display: block;
  }

  /* icon above title */
  .cir-icon {
    width: 35px;
    height: 35px;
    margin: 0 auto 10px auto;
    display: block;
    object-fit: contain;
    opacity: 0.3;
  }

  .CirItem h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #202020;
  }

  .CirItem p {
    font-size: 14px;
    color: #6b6b6b;
    line-height: 1.5;
    padding: 0 10px;
  }

 
  @media (max-width: 480px) {
    .holderCircle {
      width: 250px;
      height: 250px;
    }

    .itemDot {
      width: 42px;
      height: 42px;
      border-radius: 10px;
    }

    .itemDot img {
      width: 22px;
      height: 22px;
    }

    .itemDot1 { transform: translate(-50%, -50%) rotate(0deg) translateX(120px) rotate(0deg); }
    .itemDot2 { transform: translate(-50%, -50%) rotate(60deg) translateX(120px) rotate(-60deg); }
    .itemDot3 { transform: translate(-50%, -50%) rotate(120deg) translateX(120px) rotate(-120deg); }
    .itemDot4 { transform: translate(-50%, -50%) rotate(180deg) translateX(120px) rotate(-180deg); }
    .itemDot5 { transform: translate(-50%, -50%) rotate(240deg) translateX(120px) rotate(-240deg); }
    .itemDot6 { transform: translate(-50%, -50%) rotate(300deg) translateX(120px) rotate(-300deg); }

    .cir-icon {
      width: 34px;
      height: 34px;
      margin-bottom: 5px;
    }

    .CirItem h2 {
      font-size: 22px;
    }

    .CirItem p {
      font-size: 16px;
      padding: 0 5px;
    }
    .contentCircle{
      width: 400px;
      padding: 0 15px;
    }
  }
  @media (max-width: 320px){
    .contentCircle{
      width: 300px;
      padding: 0 10px;
      
    }
    .CirItem h2 {
      font-size: 18px;
    }

    .CirItem p {
      font-size: 14px;
      padding: 0 5px;
    }
    
  }

 @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


  @keyframes fadeIn {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
  }