.landing{
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; 
    background: url(../images/logo_background.png); 
    background-size: 80%; 
    background-position: center; 
    background-repeat: no-repeat;
}

.landing-title{
    font-size: 3em; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
}

.landing-label{
    font-size: 1em; 
    position: absolute; 
    top: 55%; 
    left: 50%; 
    transform: translate(-50%, -50%);
}

.arrow-container {
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateZ(0deg);
 }
  .arrow-container:hover {
    cursor: pointer;
 }
  .arrow-container:hover .arrow {
    top: 50%;
 }
  .arrow-container:hover .arrow:before {
    transform: translate(-50%, -50%) rotateZ(-30deg);
 }
  .arrow-container:hover .arrow:after {
    transform: translate(-50%, -50%) rotateZ(30deg);
 }
  .arrow {
    position: absolute;
    left: 50%;
    transition: all 0.4s ease;
 }
  .arrow:before, .arrow:after {
    transition: all 0.4s ease;
    content: '';
    display: block;
    position: absolute;
    transform-origin: bottom right;
    background: #fff;
    width: 4px;
    height: 50px;
    border-radius: 10px;
    transform: translate(-50%, -50%) rotateZ(-45deg);
 }
  .arrow:after {
    transform-origin: bottom left;
    transform: translate(-50%, -50%) rotateZ(45deg);
 }
  .arrow:nth-child(1) {
    opacity: 0.3;
    top: 35%;
 }
  .arrow:nth-child(2) {
    opacity: 0.6;
    top: 55%;
 }
  .arrow:nth-child(3) {
    opacity: 0.9;
    top: 75%;
 }

@media screen and (max-width: 768px){
    .landing-title{
        font-size:1.5em;
        left:50%;
        transform: translateX(-50%);
    }
    .landing-label{
        font-size: 0.6em;
        left:50%;
        transform: translateX(-50%);
    }
    
    .arrow-container{
        display:none;
    }
}