.banner-home {
    position: relative;
}

.banner-gradient-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to right, var(--blue) 20%, rgba(8, 33, 48, 0.8) 50%, rgba(8, 33, 48, 0));

    @media (max-width:991px) {
        background-image: linear-gradient(to right, var(--blue) 20%, rgba(8, 33, 48, 0.8) 50%, rgba(8, 33, 48, 0.5));
    }
}

.banner-landing {
    position: relative;

    @media (min-width:576px) {
        min-height: 32em;
    }

    @media (min-width:992px) {
        min-height: 36em;
    }

    @media (min-width:1200px) {
        min-height: 38em;
    }

    @media (min-width:1440px) {
        min-height: 42em;
    }
}


.pause-play {
    position: absolute;
    width: 3em;
    height: 3em;
    bottom: 1em;
    right: 1em;
    color: var(--blue) !important;
    z-index: 2;
  
    .btn-pause, .btn-play {
      position: absolute;
      width: 3em;
      height: 3em;
      color: var(--blue) !important;
  
      i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.6em;
        color: var(--blue) !important;
      }
    }
  
    .btn-play {
      display: none;
    }
  
    &.paused {
      .btn-pause {
        display: none;
      }
  
      .btn-play {
        display: block;
      }
    }
  }

.home-content {
    position: relative;
    overflow: hidden;
    .wave {
        position: absolute;
        top: 0;
        right: 0;
    }
}

.two-images {
    position: relative;
    padding-bottom: 100%;

    .big-image {
        position: absolute;
        top: 0;
        right: 0;
        width:65%;
    }

    .small-image {
        position: absolute;
        bottom: 0;
        left: 0;
        width:35%;
    }

    .image-wrap {
        position: relative;
        padding-bottom: 100%;
        border-radius: .5rem;
        overflow: hidden;

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; 
        }
    }
}

.bg-gradient-rainbow {
    position: relative;

    &:before {
        content:"";
        position: absolute;
        height: 100%;
        right: 0;
        bottom: -0.4rem;
        left: 0;
        background-image: linear-gradient(to right, var(--teal), var(--orange));
        border-radius: .5rem;
    }
}

.page-cta {
    position: relative;

    img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }

    @media (max-width:991px) {
        .overlay {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(3,86,91,0.5)
        }
    }

    &.bg-blue {
        @media (max-width:991px) {
            .overlay {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: rgba(8,33,48,0.5)
            }
        }
    }
}

.banner-interior {
    .wave {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        min-height: 100%;
        max-width: 90%;

        @media (min-width:1280px) {
            max-width:80%;
        }
    }
}

.team-image-wrap {
    .crop-image100 {
        position: relative;
        overflow: hidden;

        .overlay {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-image: linear-gradient(var(--blue), var(--teal));
            border-radius: .5rem;
            opacity: 0.18;
            transition: all 0.35s;
        }

        img {
            transition: all 0.35s; 
        }
    }
}

.team-tile {
    display: flex;
    flex-direction:column;
    text-decoration: none;
    height: 100%;
    .bg-gradient-rainbow:before {
        border-radius: .75rem;
    }

    .btn-wrap {
        margin-top: auto;
    }

    .btn {
        width: max-content;
        text-decoration: none;
    }

    &:hover {
        .overlay {
            opacity: 0;
        }
        img {
            transform: scale(1.06);
        }
        .btn {
            transform: scale(1.06);
        }
    }
}

.number-item {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--sand);

    p:last-child {
        margin-bottom: 0;
    }

    h3 {
        text-wrap: balance;
    }
}

.number-block-wrap {
    width: 9.5em;
}

.number-block {
    position: relative;
    padding-bottom: 100%;
    border-radius: .25rem;
    overflow: hidden;

    img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        object-fit: cover;
    }

    span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: var(--white);
        font-size: 6.25rem;
    }
}

@media (max-width:1199px) {
    .number-block-wrap {
        width: 8em;
    }
    .number-block span {
        font-size: 5.25rem;
    }
}

@media (max-width:991px) {
    .number-block-wrap {
        width: 6em;
    }
    .number-block span {
        font-size: 4rem;
    }
}

@media (max-width:575px) {
    .number-block-wrap {
        width: 5em;
    }
    .number-block span {
        font-size: 3rem;
    }
}