.hero-section {
    background-image: url('/images/banner.jpg');
    background-size: cover;
    background-position: center;
    padding: 120px 0;
    text-align: center;
    position: relative;
    color: white;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Enhances text readability */
}
.hero-section .btn {
    margin-top: 20px;
}
.feature-icon {
font-size: 4rem; /* Increase font size as needed */
color: #E66A00;
margin-bottom: 15px; /* Add some space below the icon */
}

.bg-primary {
    background-color: #E66A00 !important;
    border-color: #E66A00;
}

.btn-primary {
    background-color: #E66A00;
    border-color: #E66A00;
}
.btn-secondary {
    background-color: #4A00E0;
    border-color: #4A00E0;
}
.btn-primary:hover {
    background-color: #4A00E0;
    border-color: #4A00E0;
}
.btn-outline-primary {
    border-color: peru !important;
    color: #E66A00;
    
}
.btn-outline-primary:hover {
    background-color: #E66A00;
    color: white !important;
}
.page-item.active .page-link {
    background-color: #E66A00; 
    border-color: #E66A00; 
}
.page-link{
    color: #E66A00 ;
}
.page-link:hover {
    color: #E66A00
}
.nav-link:active{
    color: #fff !important;
    background-color: #E66A00;
}
.nav-link:hover{
    color: #4A00E0 !important;
}
.nav-link{
    color: #E66A00;
}  
.nav-pills {
    /* color: #E66A00; */
    --bs-nav-pills-link-active-bg: #E66A00;
} 
/* ul.dropdown-menu.dropdown-menu-end.show li:focus {
    background-color: #E66A00 !important;
    color: fff;
} */

.login-container {
    max-width: 500px;
    width: 400px; 
    margin: auto;
    padding: 20px;
}
.app-logo {
    display: block;
    margin: 0 auto 20px;
    width: 60px; /* Adjust width as needed */
}
.register-container {
    max-width: 600px; /* Adjust the width as needed */
    width: 400px; /* Adjust the width as needed */
    margin: auto;
    padding: 20px;
}

a {
    color: #4A00E0
}