body
 {
    font-family: 'Mangal', sans-serif;
    background-color: #f1f5f9;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    
}

header {
  background: linear-gradient(90deg, #003366, #00509e); /* Deep blue gradient */
  padding: 15px 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* subtle shadow */
  position: relative;
  z-index: 1000;
}

header .logo img {
    height: 50px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 15px;
}

nav a {
    color: var(--text-light);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
}

nav a:hover {
    background-color: var(--secondary-blue);
}

.language-selector select {
    padding: 5px;
    border-radius: 5px;
}

main {
    padding: 20px;
}

.banner img {
    width: 100%;
    height: auto;
}

.services, .news {
    margin-top: 20px;
}

footer {
    background-color: var(--primary-blue);
    color: var(--text-light);
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}
 @media (max-width: 991px) {
    .offcanvas-start {
      width: 260px;
    }
     aside {
    margin-top: 40px;
  }
  }
    

    nav ul {
        flex-direction: column;
        gap: 10px;
    }

    .language-selector {
        margin-top: 10px;
    }
}
.navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}



aside .list-group, .offcanvas-body .list-group
{
     background-color: #003366 !important;
    color: #ffffff;
    padding-bottom: 50px;
}

aside .list-group > .list-group-item.active,
.offcanvas-body .list-group > .list-group-item.active {
    background-color: #001a33;
    color: #ffcc00;
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: 0.5px;
}

aside .list-group-item,
.offcanvas-body .list-group-item {
    background-color: #003366;
    color: #ffffff;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
    transition: background-color 0.3s, color 0.3s;
}

aside .list-group-item:hover,
.offcanvas-body .list-group-item:hover {
    background-color: #002244;
    color: #ffcc00;
    text-decoration: none;
}

aside .list-group-item i,
.offcanvas-body .list-group-item i {
    color: #ffcc00;
}