.header{
    padding: 5px 0px;
    background-color: var(--primary-blue);
    color: var(--white);

}
.header .contact-details, .header .social-icons{
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.header .contact-details a, .header .social-icons a {
    color: var(--white);
    text-decoration: none;
}

.navbar{
    position: sticky;
    top: 0px;
    background: var(--white);
    z-index: 999;
}
.navbar .brand-logo .navbar-brand img{
    width: 200px;
}
.navbar .navigations{
    width: 100%;
}

.navbar .navigations .navbar-nav{
     width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 50px;
}
.navbar .navigations .nav-link{
    color:var(--text-primary);
    font-size:18px;
    font-weight: 400;
    transition: all 0.3s ease-in-out;
}

.navbar .navigations .nav-link:hover{
   border-bottom: 2px solid var(--primary-blue);
}
.navbar .navigations a.nav-link.active{
    color: var(--text-secondary);
    font-weight: 600;
}

/* toggle button  */
.navbar-toggler{
    background: var(--primary-blue) !important;
    border: 2px solid var(--primary-blue);
    padding: 6px 12px;
}
.navbar-toggler{
    color: var(--white);
    font-size: 22px;
}
.offcanvas-header .logo {
    width: 250px;
}
.offcanvas-body{
    background: linear-gradient(var(--primary-blue),var(--primary-green));
    padding: 0;
}

.offcanvas-body a{
   color: var(--white);
    text-decoration: none;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    display: block;
    padding: 10px;
}
.offcanvas-body>ul{
    padding: 0;
    margin-top: 20px;
    list-style: none;
}
.offcanvas-header .btn-close{
    border: 4px solid var(--primary-blue);
    border-radius: 22px;

}
@media  screen and (max-width:1199px) {
     .navbar .navigations .navbar-nav{
          gap: 15px;
     }
    
}
@media screen and (max-width:991px) {
    .navbar .navigations{
        display: flex;
        justify-content: flex-end;
    }
    
}
@media screen and (max-width:575px) {
    .header .contact-details a{
        font-size:14px;
    }
    .offcanvas-header .logo {
    width: 160px;
}
    
}