* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
   overflow-x: hidden;
}


.nav {
    display: flex;
    background-color: #000;
    padding: 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.nav ul {
    list-style: none;
}

.nav li a {
    color: #fff;
    text-decoration: none;
    margin: 25px;
    font-size: 20px;
    transform: translateX(5%);
}

.nav li:hover {
    opacity: 0.8;
    cursor: pointer;
}

.navbar {
  display: flex;
  margin-left: 500px;
}

.logo {
  font-weight: 900;
}


.image {
   width: 100%;
   height: 600px;
   position: fixed;
   top: 0;
   left: 0;
   opacity: 0.1;
   background: url('https://images.unsplash.com/photo-1473625247510-8ceb1760943f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=811&q=80');
   background-repeat: no-repeat;
   background-size: cover;
 }
 

.wrapper {
   width: 100%;
   height: 600px;
   display: flex;
}

.wrapper .split {
   width: 50%;
}

.wrapper .halfy {
   width: 50%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   line-height: 1.5;
   background-color: #f1f1f1;
   padding: 40px;
}

.wrapper .helfy p {
   line-height: 1.5;
   width: 80%;
}

.halfy a {
   background-color: rgb(43, 168, 168);
   color: #fff;
   margin-top: 35px;
   padding: 10px 35px;
   text-decoration: none;
   border-radius: 10px;
   cursor: pointer;
   font-weight: bolder;
   transition: transform 0.3s ease;
}

.halfy a:hover {
 transform: scale(0.95);
}

.halfy h3 {
   margin: 20px 0;
}

 .wrapper {
     transform: translateX(-1500px);
     transition: transform 0.5s ease;
 }

 .wrapper:nth-of-type(even) {
   transform: translateX(1500px);
}

.wrapper, .wrapper:nth-of-type(even) {
   transition: transform 0.8s ease-in, opacity 1.5s ease-in;
   opacity: 0;
}



.wrapper.show, .wrapper:nth-of-type(even).show {
   transform: translateX(0);
   opacity: 1;
}