@charset "utf-8";
/* One Bay Stair Unit Bootstrap 5 Navbar Override CSS Document */

.navbar {
    font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: 16px;
	background-color: #ffffff;
	text-align: center;
}

@media (max-width: 991.98px) {
.navbar {
	color: #ffffff;
	text-align: left;
}
}

@media (max-width: 991.98px) {
.navbar-nav {
	padding: 0 32px;
}
}

.nav-link.enquiry {
	font-weight: 700;
	color: #2752a0!important;
}

@media (max-width: 991.98px) {
.nav-link.enquiry  {
	color: #ffffff!important;
}
}

@media (max-width: 991.98px) {
.navbar {
	font-size: 1.1em;
}
}

@media (max-width: 991.98px) {
.navbar-brand img  {
	max-height: 60px;
}
}

/* Change the link color and padding*/
.navbar .navbar-nav .nav-link {
	color: #000000;
	padding: 32px 20px;
}

@media (max-width: 991.98px) {
.navbar .navbar-nav .nav-link  {
	color: #ffffff;
	padding: 8px 0;
}
}

/* Change the hovered links */
.navbar .nav-item.active .nav-link,
.navbar .nav-item:hover .nav-link {
	color: #2752a0;
	text-decoration: none;
}

@media (max-width: 991.98px) {
.navbar .nav-item.active .nav-link,
.navbar .nav-item:hover .nav-link {
	color: #ffffff;
}
}

.navbar .dropdown-divider {
	background-color: #ffffff!important;
}

.navbar .dropdown-menu {
    background-color: #083173;
    border: none;
    border-top: 4px solid #ffde02;
    padding: 0; 
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
    top: 75px;
    min-width: 210px;

}

@media (max-width: 991.98px) {
.navbar .dropdown-menu{
	border-top: none;
}
}

/* Dropdown items */
.navbar .dropdown-menu .dropdown-item {
    padding: 10px 20px; 
    color: #ffffff;
    background-color: #2752a1;
}

/* Hover Effect for Dropdown Items */
.navbar .dropdown-menu .dropdown-item:hover {
    background-color: #ffde02;
    color: #2752a1;
    background-position: 0;
    transition: background-color 0.3s ease-in-out, background-position 0.7s ease-in-out;
}

@media (max-width: 991.98px) {
.navbar .dropdown-menu .dropdown-item:hover {
	background-color: #2752a1;
	color: #ffffff;
}
}

.navbar .dropdown-menu::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ffde02;
    position: absolute;
    top: -12px; /* Positioning the triangle at the top */
    left: 18px; /* Adjust as needed to align with your design */
}

@media (max-width: 991.98px) {
    .navbar .dropdown-menu::before {
        content: none;
        border: none;
    }
}

.navbar .dropdown-toggle::after {
    display: none;
}

@media (max-width: 991.98px) {
.navbar .dropdown-toggle::after {
    display: inline-block;
    margin-left: 152px;
}
}



/* Dropdown menu remove outline */
a#navbarDropdown1.nav-link:active,
a#navbarDropdown1.nav-link:focus{
outline: 0;
}

/* Desktop drop-down on hover */
@media all and (min-width: 991.98px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{ color: #2752a0;  }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top: 0px; }
}

/* Navbar toggler styles */

.navbar .navbar-toggler {
	border: none;
	outline: none;
	padding-right: 0px;

}

/* Base styles for the toggler button */
.custom-toggler {
  display: inline-block; /* Ensure it behaves like a button */
  cursor: pointer; /* Change cursor to pointer on hover */
}

/* Closed State */
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' stroke='rgba(39,82,161,1)' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size: 36px 36px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Open State */
.navbar-toggler.toggler-open .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M4 4l16 16M4 20L20 4' stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  position: fixed;
  top: 40px;
  right: 20px;
  background-size: 28px 28px;
  background-repeat: no-repeat;
  background-position: center;
}

.custom-toggler:focus {
  box-shadow: none;
}

/* Navbar Slide-In on Mobile */
@media (max-width: 991.98px) {
    .navbar-slide {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 100%;
        max-width: 300px; /* Adjust the width as needed */
        background-color: #2752a1; /* Matching the dropdown background */
        transition: right 0.4s ease;
        z-index: 1050;
        overflow-y: auto;
        padding-top: 120px;
    }

}

    .navbar-slide.show {
        right: 0;
    }

    /* Ensure the navbar-toggler is on top */
    .custom-toggler {
        z-index: 1060;
    }