body {
    background-color: white !important;
    color: rgb(0, 0, 0) !important;
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Regular weight */
}

/* Navbar styling */
.navbar {
    background-color: rgb(255, 255, 255) !important;
    /* white background */
}

.navbar-brand,
.nav-link {
    color: #8c00ff !important;
    /* White text color */
    transition: color 0.3s ease-in-out;
    /* Smooth transition for color change */
}

.nav-link.active-link,
.nav-link:hover {
    color: rgba(0, 0, 0, 0.985) !important;
    /* Gold color on hover and when active */
}

.navbar-toggler {
    border-color: black !important;
    /* Gold border color for the toggler */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 1.0)' stroke-width='2' linecap='round' linejoin='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    /* Black icon for the toggler */
}

.dropdown-menu {
    background-color:#8c00ff !important;
    /* Black background for dropdown */
    border: none !important;
}

.dropdown-item {
    color: #ffffff !important;
    /* White text color for dropdown items */
    transition: background-color 0.3s ease-in-out !important;
    /* Smooth transition for background color */
}

.dropdown-item:hover {
    background-color: white !important;
    /* black background on hover */
    color: black !important;
}

.btn-outline-success {
    color: #8c00ff !important;
    /* Gold text color */
    border-color: #8c00ff !important;
    /* Gold border color */
}


.btn-outline-success:hover {
    background-color:black !important;
    /* Gold background on hover */
    color: #8c00ff !important;
    /* Black text color on hover */
    border-color: #8c00ff !important;
    /* Gold border color */
}

.btn {
    background-color: #8c00ff;
    color: white;
}

h1 span {
    color: #8c00ff;
}

p span {
    color: #8c00ff;
}

h2 span {
    color: #8c00ff;
}

.profile {
    padding-left: 35px;
    padding-right: 5px;
}

.profile-icon {
    margin-right: 6px; /* Add margin to the right of the profile icon */
  }
.profile-iconxl{
    color: #8c00ff !important;
}

.profile-iconsml{
    color: #8c00ff !important;
}
  

.nav-logo {
    padding-right: 25px;
}


.offcanvas.offcanvas-end {
    max-width: 200px;
    /* Ensures it does not exceed the body width */
    background-color: white;
    /* Ensures a consistent background color */
}

.offcanvas-body {
    padding: 0;
    /* Removes extra padding */
}

.nav-pills .nav-link {
    border-radius: 0;
    /* Removes border radius for a flat look */
}

.nav-pills .nav-link.active {
    background-color: #0d6efd;
    /* Customize active link color */
}

.dropdown-menu-dark {
    background-color: #343a40;
    /* Matches the sidebar background */
}

.dropdown-item {
    color: #adadad;
    /* Text color for dropdown items */
}

.dropdown-item:hover {
    background-color: #495057;
    /* Hover effect for dropdown items */
}

/* Smaller screens (adjust the height as needed) */
@media (max-width: 576px) {
    .nav-logo-img {
        height: 45px; /* Smaller size for mobile screens */
    }
}


@media (max-width: 300px) {
    .nav-logo-img {
        height: 20px; /* Smaller size for mobile screens */
    }
}

/* project img border */
.custom-border {
    border: 3px dashed #8c00ff;
    border-radius: 50%;
    padding: 4px; /* Optional: Adjust the padding to add some space between the image and the border */
    object-fit: cover;
    object-position: center;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); /* Soft shadow */
}

.img-border{
    border: 1.5px dashed #8c00ff;
    padding: 4px; /* Optional: Adjust the padding to add some space between the image and the border */
    object-fit: cover;
    object-position: center;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); /* Soft shadow */
}

/* search bar css */
.custom-search-bar {
    border: 2px solid #8c00ff;
    border-radius: 4px;
    padding: 6px 12px;
    outline: none;
}

.custom-search-button {
    border: 2px solid #8c00ff;
    background-color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    margin-left: -2px; /* To align with the search bar */
    cursor: pointer;
}

.custom-search-button:hover {
    background-color: white;
    color:#8c00ff;
}

.footer-text{
    color: #8c00ff !important;
}

.small-nav{
    display: flex !important;
    flex-direction: row !important;
}
.help{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    height: 500px;
    margin: 20px 0;
    z-index: 1000hv;
}

.help h1{
    color: #8c00ff;
}
.alert{
    z-index: 1000hv !important;
    transform: translateY(-17%);
    padding: 30px;
    color: #adadad;
}

.help_img{
    height: 300px;
    width: 300px;
}
.help_img img{
    height: 300px;
    width: 300px;
    border: dashed 2px #8c00ff;
    box-shadow: 0 8px 16px rgba(31, 35, 45, 0.4);
    transition: all 1s;
}

.Help_txt{
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    align-items: center;
}
.Help_txt span{
    font-size: 20px;
    font-style: italic;
    color: #8c00ff;

}
.btn_help{
    border: #8c00ff solid 3px;
    border-radius: 50px;
    padding: 4px 20px;
    background: transparent;
}
.btn_help a:hover{
    font-style: bold;
    font-size: 18px;
    cursor: pointer;
    color: #8c00ff;
}

.btn_help a{
    text-decoration: none;
    color: black;
}