.divDot{
    height:15px;
    width:15px;
    margin: 2px 5px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--remasMainColor) 50%, transparent);
}

.divDot.active{
    background-color: var(--remasMainColor);
}

.divDotCon{
    display: flex; 
    align-items: center; 
    border-radius: 100vh; 
    padding: 5px 15px;
    color: color-mix(in srgb, var(--remasMainColor) 10%, transparent);
}

#featuresDots{
    display: flex; 
    justify-content: center;
}

.scrollableFeatures{
      display: flex;
      flex-wrap: nowrap;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      
      -ms-overflow-style: none;
      scrollbar-width: none;
}

.scrollableFeatures::-webkit-scrollbar {
      display: none;
}

.featuresContentDiv {
      flex: 0 0 100%;
      max-width: 100%;
      height: auto;
      scroll-snap-align: start;
      text-align: left;
      padding-bottom: 10px;
      
}

.featuresContentDiv.rtl {
    text-align: right;
}