[aria-label][role~=tooltip]:before,
[aria-label][role~=tooltip]:after {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    opacity: 0;
    pointer-events: none;
    transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
    position: absolute;
    box-sizing: border-box;
    z-index: 10;
    transform-origin: top;
    font-size: 16px !important;
    font-family: Mindset Slim, sans-serif
}

[aria-label][role~=tooltip]:before {
    background-size: 100% auto !important;
    content: ""
}

[aria-label][role~=tooltip]:after {
    background: #662351;
    border-radius: 4px;
    color: #fff;
    content: attr(aria-label);
    font-size: var(--microtip-font-size, 13px);
    font-weight: var(--microtip-font-weight, normal);
    text-transform: var(--microtip-text-transform, none);
    padding: .5em 1em;
    white-space: nowrap;
    box-sizing: content-box
}

[aria-label][role~=tooltip]:hover:before,
[aria-label][role~=tooltip]:hover:after,
[aria-label][role~=tooltip]:focus:before,
[aria-label][role~=tooltip]:focus:after {
    opacity: 1;
    pointer-events: auto
}

[role~=tooltip][data-microtip-position|=top]:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36px' height='12px'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' transform='rotate(0)' d='M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z' style='&%2310; fill: rgba(32, 127, 136, 1);&%2310;'/%3E%3C/svg%3E");
    height: 6px;
    width: 18px;
    margin-bottom: 5px
}

[role~=tooltip][data-microtip-position|=top]:after {
    margin-bottom: 11px
}

[role~=tooltip][data-microtip-position|=top]:before {
    transform: translate3d(-50%, 0, 0);
    bottom: 100%;
    left: 50%
}

[role~=tooltip][data-microtip-position|=top]:hover:before {
    transform: translate3d(-50%, -5px, 0)
}

[role~=tooltip][data-microtip-position|=top]:after {
    transform: translate3d(-50%, 0, 0);
    bottom: 100%;
    left: 50%
}

[role~=tooltip][data-microtip-position=top]:hover:after {
    transform: translate3d(-50%, -5px, 0)
}

[role~=tooltip][data-microtip-position=top-left]:after {
    transform: translate3d(calc(-100% + 16px), 0, 0);
    bottom: 100%
}

[role~=tooltip][data-microtip-position=top-left]:hover:after {
    transform: translate3d(calc(-100% + 16px), -5px, 0)
}

[role~=tooltip][data-microtip-position=top-right]:after {
    transform: translate3d(calc(0% - 16px), 0, 0);
    bottom: 100%
}

[role~=tooltip][data-microtip-position=top-right]:hover:after {
    transform: translate3d(calc(0% - 16px), -5px, 0)
}



[role~=tooltip][data-microtip-position|=bottom]:after {
    margin-top: 11px
}

[role~=tooltip][data-microtip-position|=bottom]:before {
    transform: translate3d(-50%, -10px, 0);
    bottom: auto;
    left: 50%;
    top: 100%
}

[role~=tooltip][data-microtip-position|=bottom]:hover:before {
    transform: translate3d(-50%, 0, 0)
}

[role~=tooltip][data-microtip-position|=bottom]:after {
    transform: translate3d(-50%, -10px, 0);
    top: 100%;
    left: 50%
}

[role~=tooltip][data-microtip-position=bottom]:hover:after {
    transform: translate3d(-50%, 0, 0)
}

[role~=tooltip][data-microtip-position=bottom-left]:after {
    transform: translate3d(calc(-100% + 16px), -10px, 0);
    top: 100%
}

[role~=tooltip][data-microtip-position=bottom-left]:hover:after {
    transform: translate3d(calc(-100% + 16px), 0, 0)
}

[role~=tooltip][data-microtip-position=bottom-right]:after {
    transform: translate3d(calc(0% - 16px), -10px, 0);
    top: 100%
}

[role~=tooltip][data-microtip-position=bottom-right]:hover:after {
    transform: translate3d(calc(0% - 16px), 0, 0)
}

[role~=tooltip][data-microtip-position=left]:before,
[role~=tooltip][data-microtip-position=left]:after {
    bottom: auto;
    left: auto;
    right: 100%;
    top: 50%;
    transform: translate3d(10px, -50%, 0)
}


[role~=tooltip][data-microtip-position=left]:after {
    margin-right: 11px
}

[role~=tooltip][data-microtip-position=left]:hover:before,
[role~=tooltip][data-microtip-position=left]:hover:after {
    transform: translate3d(0, -50%, 0)
}

[role~=tooltip][data-microtip-position=right]:before,
[role~=tooltip][data-microtip-position=right]:after {
    bottom: auto;
    left: 100%;
    top: 50%;
    transform: translate3d(-10px, -50%, 0)
}


[role~=tooltip][data-microtip-position=right]:after {
    margin-left: 11px
}

[role~=tooltip][data-microtip-position=right]:hover:before,
[role~=tooltip][data-microtip-position=right]:hover:after {
    transform: translate3d(0, -50%, 0)
}

[role~=tooltip][data-microtip-size=small]:after {
    white-space: initial;
    width: 80px
}

[role~=tooltip][data-microtip-size=medium]:after {
    white-space: initial;
    width: 150px
}

[role~=tooltip][data-microtip-size=large]:after {
    white-space: initial;
    width: 260px
}



   

/* chasma css  */
.con {
    position: relative;
    max-width:850px;
    margin: auto;
  }
  
  .dot {
    background: red;
    border-radius: 50%;
    height: 20px;
    width: 20px;
  }
  
.dot1 {
    position: absolute;
    top: 22%;
    left: 31%;
}
.dot2 {
    position: absolute;
    top: 42%;
    right: 39%;
}
  
.dot3 {
    position: absolute;
    top: 66%;
    left: 5%;
}
    
    .ring-container {
      position: absolute;
  }

.second-home-view-all .inner-shop .product-grid .product-image img {
    padding: 0px;
/*     transform: scale(1.4); */
}

.chasma-righttxt ul li {
    margin-bottom: 20px;
    font-weight: 500;
    color: #000;
}
.chasma-righttxt ul li img {
    width: 40px;
    margin-right: 10px;
    border-radius: 50%;
}
.chasma-righttxt {
  text-align: left;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 10px;
}
  
  .circle {
      width: 22px;
      height: 22px;
      background-color: #662351;
      border-radius: 50%;
      position: absolute;
      /*top: 22px;
      left: 22px;*/
  }
  
.ringring {
    border: 3px solid #ffffff;
    -webkit-border-radius: 30px;
    height: 36px;
    width: 36px;
    position: absolute;
    left: -7px;
    top: -7px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    opacity: 0.0;
}
.page-width.chasma-home {
    box-shadow: 0 5px 16px rgb(0 0 0 / 7%);
    width: fit-content;
    margin: auto;
    border-radius: 10px;
    padding: 30px 30px 0 0px;
    background: #fff;
}

  @-webkit-keyframes pulsate {
      0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
      50% {opacity: 1.0;}
      100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
  }
  .circle.dot {
    border: none;
  }