.footerLogo {
  position: absolute; 
  top: 90%;
}
.square {
    position: relative;
    z-index: 9;
    width: 90vw;
    height: 2px;
    background: white;

  }
  
  .square-animation {
      animation: wipe-enter 3s 1;
    }
  
  @keyframes wipe-enter {
      0% {
          transform: scale(0);
      }
      100% {
          transform: scale(1);
      }
  }

  .cavartLogo {
    position: relative;
    z-index: 9;
    margin-top: 10px;
    margin-left: 46%;
    height: 40px; 
  }
  .cavartLogo-animation {
    animation: appear 2s 1;
  }
  

  @keyframes appear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    50% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

   /* Extra small devices (phones, 600px and down) */
   @media only screen and (max-width: 375px) {
    .cavartLogo {
      margin-left: 5%; 
    }
  }
  
  @media only screen and (min-width: 376px) {
    .cavartLogo {
      margin-left: 35%; 
    }
  } 
  @media only screen and (min-width: 576px) {
    .cavartLogo {
      margin-left: 40%; 
    }
  } 
  @media only screen and (min-width: 768px) {
    .cavartLogo {
      margin-left: 44%; 
    }
  } 
  
  @media only screen and (min-width: 992px) {
    .cavartLogo {
      margin-left: 46%; 
    }
  } 

  @media only screen and (max-height: 768px) and (min-height: 240px) {
    .footerLogo {
      top: 90%;
    }
  } 
/*   @media only screen and (min-height: 500px) {
    .footerLogo {
      top: 90%;
    }
  }  */