.svg-comp-main{
	max-width: 847px;
	width: 100%;
	position: relative;
	 overflow: hidden;
	direction: rtl;
  }
  
  .svg-bg{
	z-index: 0;
  }
  .circles{
	cursor: pointer;
	z-index: 1;
  }
  .location{
	cursor: pointer;
  }
  .location:hover .circle1:before{
	animation: ripple 1s ease-out infinite;
	z-index: 1;
  }
  
  .circle1 {
	display: inline-block;
	background-color:#372B65;
	height: 18px;
	width: 18px;
	border-radius: 50%;
	margin: 0 5px;
	position: relative;
	display: flex;
	justify-content: center;
  }
  
  .circle1:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: inherit;
	border-radius: 50%;
	z-index: -1;
   
  }
  
  
  .circle2{
	Background:#726AFB;
	height: 7px;
	width: 7px;
	border-radius: 50%;
	margin: auto;
	z-index: 2;
  }
  
  @keyframes ripple {
	from {
	  opacity: 1;
	  transform: scale(0);
	}
	to {
	  opacity: 0;
	  transform: scale(3);
	}
  }
  
  .location-name{
	color: #000;
	font-family: Inter;
	font-size: 11.998px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-align: center;
	width: 100%;
	position: absolute;
  }
  
  .location .circles:before{
	content: "";
	width: 2px;
	display: inline-block;
	position: relative;
	background: #000;
  }
  
  /* Townsend UI changes */
  
  .location.townsend{
	position:absolute;
	right: 265px;
	bottom: 103px;
  }
  .location.townsend .location-name{
	right: -17px;
        top: -43px;
  }
  
  .location.townsend .circles:before { 
	height: 20px;
        right: 14px;
        bottom: 15px;
        position: absolute;
  }
  
  /* Pigeon Forge UI changes */
  
  .location.pigeon-forge{
	position:absolute;
	right: 205px;
	bottom: 164px;
  }
  
  .location.pigeon-forge .location-name{
	right: 50px;
	top: -30px;
	width: 77px;
  }
  
  .location.pigeon-forge .circles:before {
	  height: 11px;
	  width: 76px;
	  right: 11px;
	  bottom: 9px;
	  position: absolute;
	  background: transparent;
	  border-bottom: 2px solid;
	  border-left: 2px solid;
          border-color: #000;
  }
  
  /* sevierville UI changes */
  
  .location.sevierville{
	position:absolute;
	right: 209px;
	bottom: 199px;
  }
  
  .location.sevierville .location-name{
	right: 27px;
	top: -40px;
	width: 77px;
  }
  
  .location.sevierville .circles:before {
	  height: 25px;
	  width: 17px;
	  right: 14px;
	  bottom: 12px;
	  position: absolute;
	  background: transparent;
	  border-right: 2px solid #000;
	  border-top: 2px solid #000;
  }
  
  /* cocke-county UI changes */
  
  .location.cocke-county{
	position:absolute;
	right: 153px;
	bottom: 181px;
  }
  
  .location.cocke-county .location-name{
	right: -30px;
	top: -46px;
	width: 84px;
  }
  
  .location.cocke-county .circles:before {
	  height: 25px;
	  width: 17px;
	  right: 14px;
	  bottom: 12px;
	  position: absolute;
	  background: transparent;
	  border-right: 2px solid #000;
	  
  }
  
  /* gatlinburg UI changes */
  
  .location.gatlinburg{
	position:absolute;
	right: 189px;
	bottom: 143px;
  }
  
  .location.gatlinburg .location-name{
	  right: -82px;
	  bottom: -33px;
	  width: 84px;
	  color: #fff;
  }
  
  .location.gatlinburg .circles:before {
	  height: 15px;
	  width: 19px;
	  right: -15px;
	  bottom: -6px;
	  position: absolute;
	  border-right: 2px solid #000;
	  border-top: 2px solid;
	  background: transparent;  
          border-color: #000;
  }
  
  /* hartford UI changes */
  
  .location.hartford{
	position:absolute;
	right: 137px;
	bottom: 163px;
  }
  
  .location.hartford .location-name{
	  right: -82px;
	  bottom: -30px;
	  width: 84px;
	  color: #fff;
  }
  
  .location.hartford .circles:before {
	  height: 11px;
	  width: 55px;
	  right: -40px;
	  bottom: -2px;
	  position: absolute;
	  border-right: 2px solid #000;
	  border-top: 2px solid;
	  background: transparent; 
          border-color: #000;
  }
  
  /* newport UI changes */
  
  .location.newport{
	position:absolute;
	right: 124px;
	bottom: 194px;
  }
  
  .location.newport .location-name{
	  right: -124px;
	  bottom: -8px;
	  width: 84px;
	  color: #fff;
  }
  
  .location.newport .circles:before {
	 height: 11px;
	  width: 60px;
	  right: -54px;
	  bottom: -2px;
	  position: absolute;
	  /* border-right: 2px solid #000; */
	  border-top: 2px solid;
	  background: transparent;
          border-color: #000;
  }

  @media screen and (max-width: 360px){
	.location-name{
		font-size: 9px;
	}
	.location.sevierville .location-name {
		right: 20px;
		top: -33px;
	}
	.location.pigeon-forge .location-name {
		right: 42px;
		top: -22px;
	}
	.location.townsend .location-name {
		right: -13px;
		top: -38px;
	}
	.location.cocke-county .location-name {
		right: -31px;
		top: -40px;
	}
	location.newport .location-name {
		right: -120px;
		bottom: -5px;
	}
	.location.hartford .location-name {
		right: -84px;
		bottom: -23px;
	}
	.location.gatlinburg .location-name {
		right: -63px;
		bottom: -27px;
	}
  }