/* ==========================================================================
   Table of Contents:
   --------------------------------------------------------------------------
   1.  General Styles
       1.1. Nav Container
       1.2. Circle Navigation Wrapper
       1.3. Circle Navigation Button
       1.4. Circle Navigation List Items
       1.5. Active List Item Style
       1.6. Hover & Focus Effects
   2.  Overlay Styles
   3.  Responsiveness
   ========================================================================== */

/* ==========================================================================
    1. General Styles
   ========================================================================== */

/* 1.1 Nav Container */
.nav-container * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

/* 1.2 Circle Navigation Wrapper */
.csstransforms .cn-wrapper {
  font-size: 1em;
  width: 26em;
  height: 26em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  left: -13em; /* Position it at the left side of the page */
  top: 50%; /* Position it vertically centered */
  margin-top: -13rem; /* Adjust this to center the circle vertically */
  -webkit-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  transform: scale(0.1);
  pointer-events: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.csstransforms .opened-nav {
  border-radius: 50%;
  pointer-events: auto;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

/* 1.3 Circle Navigation Button */
.cn-button {
  border: none;
  background: none;
  bottom: 100.5px !important;
  color: #007bff;
  text-align: center;
  font-size: 1.8em;
  padding-bottom: 1em;
  height: 3.5em;
  width: 3.5em;
  background-color: #fff;
  position: fixed;
  left: 0; /* Position the button on the left side */
  margin-left: -1.75em;
  top: 50%; /* Position it vertically centered */
  margin-top: -1.75em; /* Adjust this to center the button vertically */
  border-radius: 50%;
  cursor: pointer;
  z-index: 11;
  transform: rotate(90deg); /* Tilt the button to the right */
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 150, 255, 0.6); /* Neon glow */
}

/* Optional: Add a pseudo-element for an extra glossy effect */
.cn-button::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); /* Inset shadow for depth */
  pointer-events: none; /* Make sure it doesn't interfere with clicks */
}

/* Hover & Active Effects */
.cn-button:hover {
  transform: rotate(90deg) translateY(2px); /* Moves down slightly */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 150, 255, 0.9); /* Brighter glow */
  color: #0056b3;
}

.cn-button:active {
  transform: rotate(90deg) translateY(4px); /* Press down effect */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 150, 255, 1); /* Dim glow */
  color: #003f7f;
}

.cn-button:focus {
  color: #004a99;
}

/* 1.4 Circle Navigation List Items */
.csstransforms .cn-wrapper li {
  position: absolute;
  font-size: 1.5em;
  width: 10em;
  height: 10em;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  margin-top: -1.3em;
  margin-left: -10em;
  -webkit-transition: border 0.3s ease;
  -moz-transition: border 0.3s ease;
  transition: border 0.3s ease;
}

.csstransforms .cn-wrapper li a {
  display: block;
  font-size: 1.18em;
  height: 14.5em;
  width: 14.5em;
  position: absolute;
  bottom: -7.25em;
  right: -7.25em;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  padding-top: 1.8em;
  text-align: center;
  -webkit-transform: skew(-50deg) rotate(-70deg) scale(1);
  -ms-transform: skew(-50deg) rotate(-70deg) scale(1);
  -moz-transform: skew(-50deg) rotate(-70deg) scale(1);
  transform: skew(-50deg) rotate(-70deg) scale(1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transition: opacity 0.3s, color 0.3s, box-shadow 0.3s ease;
  -moz-transition: opacity 0.3s, color 0.3s, box-shadow 0.3s ease;
  transition: opacity 0.3s, color 0.3s, box-shadow 0.3s ease;
}

.csstransforms .cn-wrapper li a span {
  font-size: 1.1em;
  opacity: 0.7;
}

/* Adjust positions to align the items with the left-aligned circle */
.csstransforms .cn-wrapper li:first-child {
  -webkit-transform: rotate(80deg) skew(50deg);
  -ms-transform: rotate(80deg) skew(50deg);
  -moz-transform: rotate(80deg) skew(50deg);
  transform: rotate(80deg) skew(50deg);
  left: 50%;
}

.csstransforms .cn-wrapper li:first-child a i {
  transform: rotate(-10deg); /* Rotate the icon by 45 degrees */
  -webkit-transform: rotate(-10deg); /* Safari/Chrome */
  -ms-transform: rotate(-10deg); /* IE */
  -moz-transform: rotate(-10deg); /* Firefox */
}

.csstransforms .cn-wrapper li:nth-child(2) {
  -webkit-transform: rotate(120deg) skew(50deg);
  -ms-transform: rotate(120deg) skew(50deg);
  -moz-transform: rotate(120deg) skew(50deg);
  transform: rotate(120deg) skew(50deg);
  left: 50%;
}

.csstransforms .cn-wrapper li:nth-child(2) a i {
  transform: rotate(-50deg); /* Rotate the icon by 45 degrees */
  -webkit-transform: rotate(-50deg); /* Safari/Chrome */
  -ms-transform: rotate(-50deg); /* IE */
  -moz-transform: rotate(-50deg); /* Firefox */
}

.csstransforms .cn-wrapper li:nth-child(3) {
  -webkit-transform: rotate(160deg) skew(50deg);
  -ms-transform: rotate(160deg) skew(50deg);
  -moz-transform: rotate(160deg) skew(50deg);
  transform: rotate(160deg) skew(50deg);
  left: 50%;
}

.csstransforms .cn-wrapper li:nth-child(3) a i {
  transform: rotate(-90deg); /* Rotate the icon by 45 degrees */
  -webkit-transform: rotate(-90deg); /* Safari/Chrome */
  -ms-transform: rotate(-90deg); /* IE */
  -moz-transform: rotate(-90deg); /* Firefox */
}

.csstransforms .cn-wrapper li:nth-child(4) {
  -webkit-transform: rotate(200deg) skew(50deg);
  -ms-transform: rotate(200deg) skew(50deg);
  -moz-transform: rotate(200deg) skew(50deg);
  transform: rotate(200deg) skew(50deg);
  left: 50%;
}

.csstransforms .cn-wrapper li:nth-child(4) a i {
  transform: rotate(-130deg); /* Rotate the icon by 45 degrees */
  -webkit-transform: rotate(-130deg); /* Safari/Chrome */
  -ms-transform: rotate(-130deg); /* IE */
  -moz-transform: rotate(-130deg); /* Firefox */
}

.csstransforms .cn-wrapper li:nth-child(5) {
  -webkit-transform: rotate(240deg) skew(50deg);
  -ms-transform: rotate(240deg) skew(50deg);
  -moz-transform: rotate(240deg) skew(50deg);
  transform: rotate(240deg) skew(50deg);
  left: 50%;
}

.csstransforms .cn-wrapper li:nth-child(5) a i {
  transform: rotate(-170deg); /* Rotate the icon by 45 degrees */
  -webkit-transform: rotate(-170deg); /* Safari/Chrome */
  -ms-transform: rotate(-170deg); /* IE */
  -moz-transform: rotate(-170deg); /* Firefox */
}

/* 1.5 Active List Item Style */
.csstransforms .cn-wrapper li:nth-child(odd) a {
  background-color: #008cff; /* Lighter blue shade  */
  background-color: hsla(207, 71%, 54%, 1); /* Use HSL for easy adjustment */
}

.csstransforms .cn-wrapper li:nth-child(even) a {
  background-color: #00a1e4; /* Primary blue shade  */
  background-color: hsla(207, 55%, 45%, 1); /* Use HSL for easy adjustment */
}

/* 1.6 Hover & Focus Effects */
.csstransforms .cn-wrapper li a:active {
  box-shadow: 0 0 12px rgba(173, 216, 230, 0.8); /* Blue glow effect */
  opacity: 0.4; /* Opacity change for a pressed feel */
}

.csstransforms .cn-wrapper li:not(.active) a:hover,
.csstransforms .cn-wrapper li:not(.active) a:active,
.csstransforms .cn-wrapper li:not(.active) a:focus {
  background-color: #87ceeb; /* Darker blue for active state  */
  background-color: hsla(207, 60%, 32%, 1); /* Use HSL for easy adjustment */
}

.csstransforms .cn-wrapper li:not(.active) a:focus {
  position: fixed;
}

/* ==========================================================================
    2. Overlay Styles
   ========================================================================== */

.cn-overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 2;
}

.cn-overlay.on-overlay {
  visibility: visible;
  opacity: 1;
}

/* ==========================================================================
    3. Responsiveness
   ========================================================================== */

@media screen and (max-width: 480px) {
  .csstransforms .cn-wrapper {
    font-size: 0.68em;
    margin-top: -9rem;
  }

  .cn-button {
    font-size: 1em;
  }

  .csstransforms .cn-wrapper li {
    font-size: 1.52em;
  }
}