.banner-my-button {
	background-color: transparent; /* Transparent background */
    color: #734f95ff; /* Dark purple shade */
    line-height: 1.5;
    border: 3px solid #734f95ff; /* 2px solid border with dark purple shade */
    border-radius: 10px; /* No border radius */
    padding: 14px 20px;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    margin: 0;
	font-weight: bold;
	font-size:large;
	box-shadow: 1px 1px 4px black;
}
.banner-my-button:hover,
.banner-my-button:active {
    background-color: #734f95ff; /* Dark purple shade */
    color: #fefefe;
}

@media (max-width: 767px), (min-width: 768px) and (max-width: 991px) {
    
        .banner-my-button {
    padding: 10px !important; /* Optional: Adjust padding to center the text vertically */
    font-size: 12px; /* Adjust font size as needed */
    text-align: center; /* Center the text horizontally */
    line-height: 2! important; /* Adjust line height to vertically center the text */
    overflow: hidden; /* Hide overflowed text */
    display: flex; /* Use flexbox to center content */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    border: 2px solid #734f95ff; /* Example border */
    background-color: transparent; /* Maintain a transparent background */
    color: #734f95ff; /* Text color */
    text-decoration: none; /* Remove underline from links */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
    }
}