@import "~/styles/partials/variables";
.utility {
    &--banner {
        &-download {
            bottom: 20px;
            right: 40px;
        }
        &-slider{
            img {
                transition: opacity 1s ease-in-out;
                opacity: 0;
                right: 0;    
                &.active {
                    opacity: 1;
                }
            }
        }
    }
}

.download {
    &--brochure {
        &-container {
            background: $blueGradient, url('/assets/images/download-bg.webp') no-repeat;
            background-size: cover;
            background-position-y: bottom;
        
        }
        &--form {
            .form-group {
                .input-field {
                    input {
                        border: solid 2px $whiteSecondary;
                        border-width: 0 0 2px 0;
                        color: $whiteSecondary;
    
                        &:not(:focus)::placeholder {
                            color: rgba($whiteSecondary, 0.5);
                        }
                        &:focus::placeholder {
                            color: rgba($whiteSecondary, 0.5);
                        }
                    }
                }
            }
        }
    }
}