.banner {
  position: relative; }
  .banner img {
    width: 100%;
    display: block;
    height: 32.2916666667vw;
    object-fit: cover; }
  .banner .text {
    position: absolute;
    left: 5%;
    width: 90%;
    top: 14.53125vw;
    z-index: 5;
    color: white;
    text-align: center; }
    .banner .text .p1 {
      font-weight: 700;
      text-transform: capitalize;
      margin-bottom: 1.5625vw; }
    .banner .text .link {
      display: flex;
      justify-content: center;
      line-height: 1.875;
      align-items: center; }
      .banner .text .link a {
        border-bottom: 2px solid transparent;
        transition: all 600ms; }
        .banner .text .link a:hover {
          border-color: white; }
      .banner .text .link span {
        width: 0.2604166667vw;
        height: 0.2604166667vw;
        background: white;
        border-radius: 50%;
        margin: 0 0.78125vw; }
  .banner .waterBox {
    z-index: 10;
    pointer-events: none;
    width: 100%;
    height: 4.1666666667vw;
    position: absolute;
    bottom: 0;
    left: 0; }
    .banner .waterBox svg {
      width: 100%;
      height: 100%;
      max-height: 100vh;
      margin: 0;
      display: block; }
    .banner .waterBox .water .parallax > use {
      transition: fill .5s ease-in-out;
      animation: 5s linear infinite move-forever; }
@keyframes move-forever {
  0% {
    transform: translate(-90px); }
  100% {
    transform: translate(85px); } }
@media screen and (max-width: 768px) {
  .banner img {
    height: 300px; }
  .banner .text {
    left: 5%;
    top: 50%;
    transform: translateY(-50%); }
    .banner .text .p1 {
      margin-bottom: 15px; }
    .banner .text .link span {
      width: 3px;
      height: 3px;
      margin: 0 8px; }
  .banner .waterBox {
    height: 60px; } }

/*# sourceMappingURL=banner.css.map */