.ring-wrapper
{
    width: 100%;
    overflow: hidden;
    height: 600px;
    background-image: url('../img/home/globe.webp');
    background-position: bottom;
    background-repeat: no-repeat;

}
.ring {
   
    position: relative;
    top: 210px;
    /* height: 1450px;
    width: 1450px; */

    height: 1400px;
    width: 1400px;
    left: -65px;

    border: 1px solid #ffad5f;
    border-radius: 50%;
    /* left: -77px; */
    
    /*position: relative;
    top: 150px;
    height: 1280px;
    width: 1280px;
    border: 1px solid #ffad5f;
    border-radius: 50%;
    */
}


.dot {
    cursor: pointer;
    position: absolute;
    height: 1470px;
    width: 24px;
    top: -12px;
    left: 50%;
    margin-left: -12px;
  
    

  &:before {
    display: block;
    content: '';
    height: 24px;
    width: 24px;
    border-radius: 50%;
    box-shadow: 0 2px 3px rgba(0,0,0,.1);
    background: #ffad5f;

  }
  &:after
  {
    
    border:1px solid #ffad5f;
    display: block;
    position: absolute;
    left:-7px;
    top:-7px;
    content: '';
    height: 38px;
    width: 38px;
   
    border-radius: 50%;
    
  }
}

.dot--one {
    transform: rotate(-40deg);


 
}

.dot--two {
  transform: rotate(-24deg);
  
}

.dot--three {

  transform: rotate(-8deg);
 
}

.dot--four {


  transform: rotate(9deg);
 
}

.dot--five {
   
  transform: rotate(24deg);
  
}


.dot--six {

  transform: rotate(40deg);
 
}

.dot:hover .container
{
    transition: all .5s;
    opacity: 1;   
    
}
.dot--one:hover .container, .dot--1--hover--container
{
    transform:  rotate(40deg)  scale(1) !important;
}

.dot--two .container
{
    transform:  rotate(23deg)  scale(.1)
}
.dot--two:hover .container, .dot--2--hover--container
{
    transform:  rotate(23deg)  scale(1) !important;
}

.dot--three .container
{
    transform:  rotate(7deg)  scale(.1) 
}
.dot--three:hover .container, .dot--3--hover--container
{
    transform:  rotate(7deg)  scale(1) !important;
}

.dot--four .container
{
    transform:  rotate(-9deg)  scale(.1) 
}
.dot--four:hover .container, .dot--4--hover--container
{
    transform:  rotate(-9deg)  scale(1) !important;
}

.dot--five .container
{
    transform:  rotate(-24deg)  scale(.1) 
}
.dot--five:hover .container, .dot--5--hover--container
{
    transform:  rotate(-24deg)  scale(1) !important;
}

.dot--six .container
{
    transform:  rotate(-41deg)  scale(.1) 
}
.dot--six:hover .container, .dot--6--hover--container
{
    transform:  rotate(-41deg)  scale(1) !important;
}


.dot .container
{
    
    transform: rotate(40deg) scale(0.01);
    position: absolute;
    padding: 20px;
    background-color: #27213c !important;
    border-radius: 2000px;
    height: 270px;
    width: 270px;
    left: -115px;
    top: -115px;
    opacity: 0;
    z-index: 1;
  
    transition: all .5s;
}
.dot .container .wrapper
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}
.dot .container .wrapper .title
{
    color:#FFAD5F;
   
    font-family: 'Greycliff CF Bold';
    font-size: 48px;
    font-weight: 400;
    line-height: 52.8px;
    text-align: center;
}
.dot .container .wrapper .content
{
    font-family: Mulish;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: center;
    color:#fff;
}