.contact-bar { background-image: url(https://bibhutisolutions.com.au/assets/images/bg/4.jpg); color: #fff; font-size: 14px; padding: 10px 20px; } .contact-bar a { color: #fff; text-decoration: none; } .contact-bar a:hover { color: #ccc; } .logo { width: 100px; } .navbar-nav a { color: white; font-weight: bold; } .nav-item a { font-size: small; } .nav-item a { position: relative; display: inline-block; text-decoration: none; color: white; /* Adjust to your desired text color */ transition: color 0.3s ease; } .nav-item a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; /* Adjust the underline thickness */ background-color: white; /* Adjust to your desired underline color */ transition: width 0.3s ease; } .nav-item a:hover { color: black; /* Adjust to your desired hover text color */ } .nav-item a:hover::after { width: 100%; } .custom-navbar { background-image: url(../images/cover.png); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Style for the quote button */ .quotebtn { color: #C52903; font-weight: bold; font-size: small; padding: 12px; border: none; transition: background-color 0.3s, color 0.3s; background-color: white; border-radius: 5px; } .quotebtn:hover { background-color: #F5A637; color: white; cursor: pointer; } @media (max-width: 768px) { .navbar-brand { text-align: left; margin: 0 ; padding: 20px; } .logo { width: 60px; } .navbar-nav { flex-direction: column; margin-top: 10px; } .navbar-nav .nav-item { margin-bottom: 5px; padding: 0px 20px; } .quotebtn { font-size: x-small; padding: 0px 20px; margin-top: 10px; } .contact-bar { flex-direction: column; text-align: center; } .social-icons { margin-top: 10px; } .navbar-nav { text-align: center; width: 100%; } .navbar-nav .nav-item { margin: 5px 0; } .quotebtn { width: 100%; margin-top: 10px; } .navbar-collapse { justify-content: center; } } @media (max-width: 576px) { .logo { width: 70px; } .navbar-toggler { font-size: 1.2rem; } .navbar-toggler-icon { color: white; } .navbar-nav a { font-size: smaller; } .quotebtn { font-size: xx-small; padding: 5px; } } @media (min-width: 769px) and (max-width: 1024px) { .custom-navbar { background-size: cover; /* Keep it covering the navbar */ background-position: center; /* Center it for tablets */ } }