.blog .carousel-indicators {
	left: 0;
	top: auto;
    bottom: -40px;

}
.carousel-innerr
{
    width: 120% !important;
}
/* The colour of the indicators */
.blog .carousel-indicators li {
    background: #a3a3a3;
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

.blog .carousel-indicators .active {
background: #707070;
}
.letter
{
    /* padding-left: 3% !important; */
    text-align: center;
  
}
.heading
{
    text-align: center;
    font-weight: bold;
    color: teal;
}
/*image css*/
.image_outer_container{
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 50%;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.image_inner_container{
    border-radius: 50%;
    padding: 5px;
 background: #833ab4; 
 background: -webkit-linear-gradient(to bottom, #fcb045, #fd1d1d, #833ab4); 
 background: linear-gradient(to bottom, #fcb045, #fd1d1d, #833ab4);
}
.image_inner_container img{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 5px solid white;
}

.image_outer_container .green_icon{
  position: absolute;
  right: 30px;
  bottom: 10px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
/*--------- progress----- */
.tile-progress {
    background-color: #303641;
    color: #fff;
    }
    .tile-progress {
    background: #00a65b;
    color: #fff;
    margin-bottom: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    }
    .tile-progress .tile-header {
    padding: 15px 20px;
    padding-bottom: 40px;
    }
    .tile-progress .tile-progressbar {
    height: 2px;
    background: rgba(0,0,0,0.18);
    margin: 0;
    }
    .tile-progress .tile-progressbar span {
    background: #fff;
    }
    .tile-progress .tile-progressbar span {
    display: block;
    background: #fff;
    width: 0;
    height: 100%;
    -webkit-transition: all 1.5s cubic-bezier(0.230,1.000,0.320,1.000);
    -moz-transition: all 1.5s cubic-bezier(0.230,1.000,0.320,1.000);
    -o-transition: all 1.5s cubic-bezier(0.230,1.000,0.320,1.000);
    transition: all 1.5s cubic-bezier(0.230,1.000,0.320,1.000);
    }
    .tile-progress .tile-footer {
    padding: 20px;
    text-align: right;
    background: rgba(0,0,0,0.1);
    -webkit-border-radius: 0 0 3px 3px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 0 0 3px 3px;
    -moz-background-clip: padding;
    border-radius: 0 0 3px 3px;
    background-clip: padding-box;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    }
    .tile-progress.tile-red {
    background-color: #334d5c;
    color: #fff;
    }
    .tile-progress {
    background-color: #5b7065;
    color: #fff;
    }
    .tile-progress.tile-blue {
    background-color: #792048;
    color: #fff;
    }
    .tile-progress.tile-aqua {
    background-color: #283655;
    color: #fff;
    }
    .tile-progress.tile-green {
    background-color: #00a65a;
    color: #fff;
    }
    .tile-progress.tile-cyan {
    background-color: #00b29e;
    color: #fff;
    }
    .tile-progress.tile-purple {
    background-color: #ba79cb;
    color: #fff;
    }
    .tile-progress.tile-pink {
    background-color: #ec3b83;
    color: #fff;
    }
    /* =-------------------- */
   
    :root {
        --progress-bar-color: #cfd8dc;
        --progress-value-color: #4b461e;
        --progress-empty-color-h: 4.1;
        --progress-empty-color-s: 89.6;
        --progress-empty-color-l: 58.4;
        --progress-filled-color-h: 122.4;
        --progress-filled-color-s: 39.4;
        --progress-filled-color-l: 49.2;
      }
    progress[value] {
      display: block;
      position: relative;
      appearance: none;
      width: 100%;
      height: 6px;
      border: 0;
      --border-radius: 10px;
      border-radius: var(--border-radius);
      counter-reset: progress var(--progress-value);
      --progress-value-string: counter(progress) '%';
      --progress-max-decimal: calc(var(--value, 0) / var(--max, 0));
      --progress-value-decimal: calc(var(--progress-value, 0) / var(--max, 0));
      animation: calc(5s * var(--progress-max-decimal)) linear 0.5s 1 normal both progress; 
    
      @supports selector(::-moz-progress-bar) {
        --progress-value-decimal: calc(var(--value, 0) / var(--max, 0));
      }
      --progress-value-percent: calc(var(--progress-value-decimal) * 100%);
      --progress-value-color: hsl(
        calc((var(--progress-empty-color-h) + (var(--progress-filled-color-h) - var(--progress-empty-color-h)) * var(--progress-value-decimal)) * 1deg)
        calc((var(--progress-empty-color-s) + (var(--progress-filled-color-s) - var(--progress-empty-color-s)) * var(--progress-value-decimal)) * 1%)
        calc((var(--progress-empty-color-l) + (var(--progress-filled-color-l) - var(--progress-empty-color-l)) * var(--progress-value-decimal)) * 1%)
      );
      
    }
    
    
    progress[value]::-webkit-progress-bar {
      background-color: var(--progress-bar-color);
      border-radius: var(--border-radius);
      overflow: hidden;
    }
    
    progress[value]::-webkit-progress-value {
      width: var(--progress-value-percent) !important;
      background-color: var(--progress-value-color);
      border-radius: var(--border-radius);
    }
    
    progress[value]::-moz-progress-bar {
      width: var(--progress-value-percent) !important;
      background-color: var(--progress-value-color);
      border-radius: var(--border-radius);
    }
    
    progress[value]::after {
      display: flex;
      align-items: center;
      justify-content: center;
      --size: 32px;
      width: var(--size);
      height: var(--size);
      position: absolute;
      left: var(--progress-value-percent);
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: var(--progress-value-color);
      border-radius: 50%;
      content: attr(value);
      content: var(--progress-value-string, var(--value));
      font-size: 12px;
      font-weight: 700;
      color: #fff;
    }
    
    @keyframes progress {
        from {
            --progress-value: 0;
        } to {
            --progress-value: var(--value);
        }
    }
    
    /* banner design */