<a href="https://front.codes/" class="logo hover-target" target="_blank">
    <img src="https://assets.codepen.io/1462889/fcy.png" alt="">
  </a>  

  <div class="section"> 
    <div class="container">
      <div class="row full-height">
        <div class="col-12 align-self-center">
          <div class="section"> 
            <div class="left-side-shadow"></div>
            <div class="right-side-shadow"></div>
            <ul class="link-list">
              <li>
                <a href="#" class="hover-target">
                  <span>Case Studies -</span>
                  <span>Case Studies -</span>
                  <span>Case Studies -</span>
                  <span>Case Studies -</span>
                  <span>Case Studies -</span>
                </a>
              </li>
              <li>
                <a href="#" class="hover-target">
                  <span>What We Do -</span>
                  <span>What We Do -</span>
                  <span>What We Do -</span>
                  <span>What We Do -</span>
                  <span>What We Do -</span>
                </a>
              </li>
              <li>
                <a href="#" class="hover-target">
                  <span>Our Crew -</span>
                  <span>Our Crew -</span>
                  <span>Our Crew -</span>
                  <span>Our Crew -</span>
                  <span>Our Crew -</span>
                </a>
              </li>
              <li>
                <a href="#" class="hover-target">
                  <span>Our Stories -</span>
                  <span>Our Stories -</span>
                  <span>Our Stories -</span>
                  <span>Our Stories -</span>
                  <span>Our Stories -</span>
                </a>
              </li>
              <li>
                <a href="#" class="hover-target">
                  <span>Get In Touch -</span>
                  <span>Get In Touch -</span>
                  <span>Get In Touch -</span>
                  <span>Get In Touch -</span>
                  <span>Get In Touch -</span>
                </a>
              </li>
            </ul>
            <ul class="img-list">
              <li>
              </li>
              <li>
              </li>
              <li>
              </li>
              <li>
              </li>
              <li>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>      
  </div>
    
  <!-- Page cursor
  ================================================== -->
  
  <div class='cursor' id="cursor"></div>
  <div class='cursor2' id="cursor2"></div>
  <div class='cursor3' id="cursor3"></div> 

/* Please ❤ this if you like it! */


/* ========================================= * 
            BEST VIEWED FULLSCREEN
   https://codepen.io/ig_design/full/qBbdMRJ
 * ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,900;1,900&display=swap');


:root {
  --dark-blue: #102770;
  --white-gr: #c4c3ca;
  --yellow: #ffeba7;
}
body{
  color: var(--white-gr);
  background-color: var(--dark-blue);
  overflow-x: hidden;
}

/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3{
  position: fixed;
  border-radius: 50%; 
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
  left: -100px;
  top: 50%;
  mix-blend-mode: difference;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear; 
  z-index: 9999999;
}
.cursor{
  background-color: var(--white-gr);
  height: 0;
  width: 0;
  z-index: 9999999;
}
.cursor2,.cursor3{
  height: 36px;
  width: 36px;
  z-index:99998;
  -webkit-transition:all 0.3s ease-out;
  transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
  -webkit-transform:scale(2) translateX(-25%) translateY(-25%);
  transform:scale(2) translateX(-25%) translateY(-25%);
  border:none
}
.cursor2{
  border: 2px solid var(--white-gr);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
.cursor2.hover{
  background: rgba(255,255,255,1);
  box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);
}

.logo {
  position: absolute;
  top: 30px;
  right: 30px;
  display: block;
  z-index: 100;
  transition: all 250ms linear;
}
.logo img {
  height: 26px;
  width: auto;
  display: block;
}

a {
  font-size: 65px;
  line-height: 1;
    font-family: 'Roboto', sans-serif;
  margin-bottom: 0.6rem;
  font-weight: 900; 
  color: var(--white-gr);
  transition: all 250ms linear;
}
a:hover {
  color: var(--yellow);
  text-decoration: none;
}
a span {
  white-space: nowrap;
  padding: 0.3vw;
}

.section{
  position: relative;
  width: 100%;
  display: block;
  overflow-x: hidden;
}
.section {
  --initial: 0;
  --final: -20%;
  --initial-2: 30%;
  --final-2: 50%;
}
.full-height{
  height: 100vh;
}
.section ul,
.section li{
  position: relative;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.section ul{
  padding: 40px 0;
}
.section ul li a {
  width: fit-content;
  display: flex;
  position: relative;
  transform: translate3d(var(--initial), 0, 0);
  animation: slide 5s linear infinite;
  animation-play-state: running;
  opacity: 0.2;
}
.section ul li:nth-child(2) a,
.section ul li:nth-child(4) a {
  transform: translate3d(var(--initial-2), 0, 0);
  animation: slide-2 5s linear infinite;
  left: -100%;
}
.section ul li.active a, 
.section ul li a:hover {
  transition-duration: 0.4s;
  animation-play-state: paused;
  opacity: 1;
  color: var(--yellow);
  text-decoration: none;
}
@keyframes slide {
  0% {
    transform: translate3d(var(--initial), 0, 0);
  }

  100% {
    transform: translate3d(var(--final), 0, 0);
  }
}
@keyframes slide-2 {
  0% {
    transform: translate3d(var(--initial-2), 0, 0);
  }

  100% {
    transform: translate3d(var(--final-2), 0, 0);
  }
}


.left-side-shadow{
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  display: block;
  background-image: linear-gradient(to right, var(--dark-blue) , rgba(255,255,255,0));
  pointer-events: none;
}
.right-side-shadow{
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  display: block;
  background-image: linear-gradient(to left, var(--dark-blue) , rgba(255,255,255,0));
  pointer-events: none;
}

.section ul.img-list {
  position: absolute;
  padding: 0;
  top: 50%;
  left: 50%;
  margin-left: -180px;
  margin-top: -180px;
  z-index: -1;
}
.img-list li {
  position: absolute;
  display: block;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-image: url('https://assets.codepen.io/1462889/menu-1.jpg');
  opacity: 0;
  transform: scale(0.95) rotate(10deg);
  transition: all 350ms linear;
}
.img-list li.show {
  opacity: 0.5;
  transform: scale(1) rotate(0deg);
}
.img-list li:nth-child(2) {
  background-image: url('https://assets.codepen.io/1462889/menu-2.jpg');
}
.img-list li:nth-child(3) {
  background-image: url('https://assets.codepen.io/1462889/menu-3.jpg');
}
.img-list li:nth-child(4) {
  background-image: url('https://assets.codepen.io/1462889/menu-4.jpg');
}
.img-list li:nth-child(5) {
  background-image: url('https://assets.codepen.io/1462889/menu-5.jpg');
}




/* #Media
================================================== */

@media (max-width: 991px) { 
  .section {
    --initial-2: 20%;
    --final-2: 40%;
  }
  a {
    font-size: 60px;
  }
  .cursor,
  .cursor2,
  .cursor3{
    display: none;
  }
  .section ul.img-list {
    margin-left: -140px;
    margin-top: -140px;
  }
  .img-list li {
    width: 280px;
    height: 280px;
  }
}

@media (max-width: 767px) {
  .section {
    --initial-2: 10%;
    --final-2: 30%;
  }
}

@media (max-width: 575px) {
  .section {
    --initial-2: -20%;
    --final-2: 0;
  }
  a {
    font-size: 50px;
  }
}

/* Please ❤ this if you like it! */



  $(document).ready(function() {  
    
    /* Hero Case study images */      
    
    $('.link-list li:nth-child(1)').on('mouseenter', function() {
      $('.link-list li.active').removeClass('active');
      $('.img-list li.show').removeClass("show");
      $('.img-list li:nth-child(1)').addClass("show");
      $('.link-list li:nth-child(1)').addClass('active');
    })
    $('.link-list li:nth-child(2)').on('mouseenter', function() {
      $('.link-list li.active').removeClass('active');
      $('.img-list li.show').removeClass("show");
      $('.img-list li:nth-child(2)').addClass("show");
      $('.link-list li:nth-child(2)').addClass('active');
    })
    $('.link-list li:nth-child(3)').on('mouseenter', function() {
      $('.link-list li.active').removeClass('active');
      $('.img-list li.show').removeClass("show");
      $('.img-list li:nth-child(3)').addClass("show");
      $('.link-list li:nth-child(3)').addClass('active');
    })
    $('.link-list li:nth-child(4)').on('mouseenter', function() {
      $('.link-list li.active').removeClass('active');
      $('.img-list li.show').removeClass("show");
      $('.img-list li:nth-child(4)').addClass("show");
      $('.link-list li:nth-child(4)').addClass('active');
    })
    $('.link-list li:nth-child(5)').on('mouseenter', function() {
      $('.link-list li.active').removeClass('active');
      $('.img-list li.show').removeClass("show");
      $('.img-list li:nth-child(5)').addClass("show");
      $('.link-list li:nth-child(5)').addClass('active');
    })
    $('.link-list li:nth-child(1)').trigger('mouseenter')   
    
  });


  
  //Page cursors

    document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
      t.style.left = n.clientX + "px", 
    t.style.top = n.clientY + "px", 
    e.style.left = n.clientX + "px", 
    e.style.top = n.clientY + "px", 
    i.style.left = n.clientX + "px", 
    i.style.top = n.clientY + "px"
    });
    var t = document.getElementById("cursor"),
        e = document.getElementById("cursor2"),
        i = document.getElementById("cursor3");
    function n(t) {
        e.classList.add("hover"), i.classList.add("hover")
    }
    function s(t) {
        e.classList.remove("hover"), i.classList.remove("hover")
    }
    s();
    for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
        o(r[a])
    }
    function o(t) {
        t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
    }