/* Style for the red dot behind menu text */
.menu-item > a {
    position: relative;
    z-index: 1; /* Ensure menu text is above the red dot */
}

.menu-item > a::after {
    content: '';
    position: absolute;
    width: 10px; /* Size of the dot */
    height: 10px; /* Size of the dot */
    background-color: #FF5a62; /* Color of the dot */
    border-radius: 50%;
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
    opacity: 0; /* Initially hide the dot */
    transition: opacity 0.3s, left 0.3s, z-index 0s 0.3s; /* Add transition for smooth appearance */
}

/* Show red dot and adjust position when hovering */
.menu-item > a:hover::after {
    opacity: 1; /* Show the dot on hover */
    z-index: -1; /* Move the dot behind the menu text when hovering */
}

/* Adjust red dot position for specific menu items */
.menu-item.Home > a::after {
    left: 10px; /* Adjust distance for Home */
    top: 10px;
    bottom: 15px;
}

.menu-item.About > a::after {
    left: 30px; /* Adjust distance for About */
    top: 10px;
    bottom: 55px;
}

.menu-item.Calculator > a::after {
    left: 60px; /* Adjust distance for Calculator */
    top: 20px;
    bottom: 10px;
}

.menu-item.Services > a::after {
    left: 70px; /* Adjust distance for Services */
    top: 10px;
    bottom: 15px;
}

.menu-item.BPC > a::after {
    left: 10px; /* Adjust distance for Services */
    top: 30px;
    bottom: 25px;
}

.menu-item.RC > a::after {
    left: 50px; /* Adjust distance for Services */
    top: 20px;
    bottom: 15px;
}

.menu-item.SDC > a::after {
    left: 90px; /* Adjust distance for Services */
    top: 22px;
    bottom: 15px;
}

/* Hide red dots on mobile devices */
@media (max-width: 767px) {
    .menu-item > a::after {
        display: none;
    }
}

/* change sub-menu border radius */
.sub-menu {
	border-radius: 15px;
	overflow: hidden;
}

/* change sub-menu list background colour */
.sub-menu li{
	background-color: #e6e6e6;
}

/* remove menu outline when click */
a:focus {
outline: 0 !important;
}