/* Outer expanded menu container - remains solid and default */
.wrap {
  position: relative;
  width: 70vmin; 
  height: 70vmin;
  margin: 0 auto;
  top: -300px;
  left: 300px;
  background: inherit;
  -webkit-transform: scale(0.2) translatez(0px);
          transform: scale(0.2) translatez(0px);
  opacity: 0;
  -webkit-transition: opacity .5s, -webkit-transform .5s;
  transition: opacity .5s, -webkit-transform .5s;
}

/* Quadrant menu links */
.acircle {
  position: absolute;
  left: 0; 
  top: 0;
  width: 47.5%; 
  height: 47.5%;
  overflow: hidden;
  -webkit-transform: scale(.5) translateZ(0px);
          transform: scale(.5) translateZ(0px);
  background: #585247;
}

.acircle div {
  height: 100%;
  background-size: cover;
  opacity: .5;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
  border-radius: inherit;
}

.acircle:nth-child(1) {
  border-radius: 40vmin 0 0 0;
  -webkit-transform-origin: 110% 110%;
          transform-origin: 110% 110%;
  transition: transform .4s .15s, -webkit-transform .4s .15s;
}
.acircle:nth-child(1) div { background-image: url('http://gosofte.com/v5-auto/circlepic/4.jpg'); }

.acircle:nth-child(2) {
  border-radius: 0 40vmin 0 0;
  left: 52.5%;
  -webkit-transform-origin: -10% 110%;
          transform-origin: -10% 110%;
  transition: transform .4s .2s, -webkit-transform .4s .2s;
}
.acircle:nth-child(2) div { background-image: url('http://gosofte.com/v5-auto/circlepic/feedback.jpg'); }

.acircle:nth-child(3) {
  border-radius: 0 0 0 40vmin;
  top: 52.5%;
  -webkit-transform-origin: 110% -10%;
          transform-origin: 110% -10%;
  transition: transform .4s .25s, -webkit-transform .4s .25s;
}
.acircle:nth-child(3) div { background-image: url('http://gosofte.com/v5-auto/circlepic/instructor1.jpg'); }

.acircle:nth-child(4) {
  border-radius: 0 0 40vmin 0;
  top: 52.5%; 
  left: 52.5%;
  -webkit-transform-origin: -10% -10%;
          transform-origin: -10% -10%;
  transition: transform .4s .3s, -webkit-transform .4s .3s;
}
.acircle:nth-child(4) div { background-image: url('http://gosofte.com/v5-auto/circlepic/partner.jpg'); }

.acircle:nth-child(5) {
  width: 55%; 
  height: 55%;
  left: 22.5%; 
  top: 22.5%;
  border-radius: 50vmin;
  box-shadow: 0 0 0 5vmin #E3DFD2;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.acircle:nth-child(5) div { background-image: url('http://gosofte.com/v5-auto/circlepic/searchagain.jpg'); }

/* --- SMALL BUTTON TRANSPARENCY FIX --- */
span {
  position: relative;
  left: 80px;
  display: block;
  margin: 0 auto;
  top: -150px;
  width: 7vmin; 
  height: 7vmin;
  border-radius: 100%;
  /* Fully transparent outer trigger circle with faint white outline */
  background: transparent !important; 
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  -webkit-transform: translateZ(0px);
          transform: translateZ(0px);
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Middle line inside the trigger button - thin white stroke */
span span {
  position: absolute;
  width: 50%;                                   /* Slightly narrower width */
  height: 1px;                                  /* Reduced from 3px to 1px thickness */
  background: rgba(255, 255, 255, 0.8) !important; /* Semi-transparent white */
  left: 25%; 
  top: 50%;
  border-radius: 0;
}

/* Top and bottom lines */
span span:after, span span:before {
  content: '';
  position: absolute;
  left: 0; 
  top: -1.2vmin;                               /* Spacing adjusted for 1px line */
  width: 100%; 
  height: 100%;
  background: inherit;
}

span span:after {
  top: 1.2vmin;
}

/* Hover effects */
span:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

span:hover span {
  background: #ffffff !important;               /* Crisp white on hover */
}

span:hover + .wrap, .wrap:hover {
  -webkit-transform: scale(.8) translateZ(0px);
          transform: scale(.8) translateZ(0px);
  opacity: 1;
}

span:hover + .wrap a, .wrap:hover a {
  -webkit-transform: scale(1) translatez(0px);
          transform: scale(1) translatez(0px);
}

.acircle:hover div {
  opacity: 1;
  -webkit-transform: translatez(0px);
          transform: translatez(0px);
}