.hero-banner {
 position: relative;
 overflow: hidden;
 background-size: cover;
 background-position: center center;
 padding: 20% 0; /* Adjust the padding as needed */
 }

 .hero-banner img {
 width: 100%;
 max-width: 600px;
 height: auto;
 display: block;
 margin: 0 auto 10px; /* Adjust the margin as needed */
 }

 .btn-primary {
 display: inline-block;
 font-size: 16px;
 font-weight: bold;
 text-decoration: none;
 padding: 10px 20px;
 color: #fff;
 background-color: #007bff;
 border-radius: 5px;
 }

 /* Desktop background */
 @media only screen and (min-width: 768px) {
 .hero-banner {
 background-image: url('https://www.sefiles.net/merchant/5570/images/site/MTB-3907_E-MTB_BestBrand_Homepage_Desktop_2880x1620.jpg');
 }
 }

 /* Mobile background */
 @media only screen and (max-width: 767px) {
 .hero-banner {
 background-image: url('https://www.sefiles.net/merchant/5570/images/site/MTB-3907_E-MTB_BestBrand_Homepage_Mobile_750x750.jpg');
 }
 }