/* Custom CSS for B.N Automotive website */ /* Hero Section */ .hero-image { background-image: url('images/mechanic hands.webp'); height: 600px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; text-align: center; color: rgb(247, 232, 232); padding-top: 150px; } .hero-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Logo */ .logo { width: 200px; /* Adjust the width to your desired size */ height: auto; /* Automatically adjust height to maintain aspect ratio */ padding: 24px; } /* How It Works Section */ .how-it-works-section .card-img-top { width: 100%; height: 280px; /* Adjust the height to your desired size */ object-fit: contain; } /* Our Rates Section */ #our-rates { background-color: #f5f5f5; padding: 50px 0; } #our-rates .card { background-color: #ffffff; border: none; transition: all 0.3s ease; } #our-rates .card:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } #our-rates .card-title { font-weight: bold; } #our-rates .card-text { font-size: 16px; } /* Navigation Bar */ .navbar { background-color: #F6D997; /* New background color */ } .navbar-toggler-icon { color: #2A2217; /* Change this to the color you want */ } .navbar { position: fixed; top: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .navbar-dark .navbar-toggler-icon { filter: invert(1); /* Change the color of the toggler icon */ } .hero-text h1, .hero-text h3 { color: white; /* Ensure text is white */ text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } /* Responsive design for all devices */ @media (max-width: 576px) { /* Adjust styles for small devices */ .navbar-nav .nav-link { font-size: 14px; /* Adjust font size for smaller screens */ } } /* Add this CSS to your existing stylesheet or in a