
.header {
    &.veterinary-header {
        background: $white !important;
        &.pharmacy-header {
            .veterinary-top-head {
                opacity: 0;
                height: 0;
                width: 0;
                display: none;
                transition: 0.5s all;
            }
        }
    }
    .veterinary-top-head {
        background: $cyan;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 40px;
        border-radius: 0 0 20px 20px;
        transition: 0.5s all;
        @include respond-below(custom991) {
            display: none;
        }
        ul {
            display: flex;
            align-items: center;
            li {
                color: $white;
                margin-right: 20px;
                display: flex;
                align-items: center;
                font-size: $font-size-14;
                font-weight: $font-weight-medium;
                &:last-child {
                    margin-right: 0;
                }
                a {
                    color: $white;
                    margin-right: 15px;
                    &:hover {
                        color: $primary;
                    }
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
    }
    &.header-fourteen {
        &.header-twelve {
            .header-nav {
                background-color: transparent;
                border-bottom: none;
                flex-wrap: wrap;
                justify-content: space-between;
                padding: 0;
                .logo {
                    @include respond-below(custom1199) {
                        margin-right: 0;
                    }
                }
                @include respond-below(custom1199) {
                    justify-content: start;
                }
                @include respond-below(custom991) {
                    justify-content: space-between;
                }
                .main-menu-wrapper {
                    @include respond-below(custom991) {
                        background-color: $__ghost_white;
                    }
                    .main-nav {
                        li {
                            @include respond-below(custom1199) {
                                margin-right: 10px;
                            }
                            @include respond-below(custom991) {
                                border-bottom: 1px solid $__white;
                            }
                            a {
                                color: $gray-900;
                                font-weight: $font-weight-medium;
                            }
                            .submenu {
                                @include respond-below(custom991) {
                                    background-color: $__ghost_white;
                                }
                                a {
                                    color: $gray-900;
                                    &:hover {
                                        color: $primary;
                                    }
                                }
                            }
                            &.active {
                                a {
                                    color: $primary;
                                    font-weight: $__bold;
                                }
                                .submenu {
                                    a {
                                        color: $__midnight_black;
                                        font-weight: $font-weight-medium;
                                        &.active {
                                            color: $__laysgreen;
                                            font-weight: $font-weight-medium;  
                                       }
                                    }
                                   
                                    a {
                                        color: $__midnight_black;  
                                    }
                                }
                            }
                        }
                    }
                }
                .header-navbar-rht {
                    padding: 0;
                    margin: 0;
                    li {
                        @include margin-padding(null, 0 10px 0 0);
                        &.login-link { 
                            display: none;
                        }
                        &.searchbar-fourteen {
                            @extend %flex-align-center;                 
                            @include margin-padding(null, 0);
                            transition: 0.5s;
                            color: $white;
                            width: 46px;
                            height: 46px;
                            a {
                                background: $warning;
                                border: 1px solid $warning;
                                color: $white;
                                width: 46px;
                                height: 46px;
                                border-radius: 10px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                &:hover {
                                    background: $dark;
                                    border-color: $dark;
                                    color: $white;
                                    transition: 0.5s;
                                    border-radius: 10px;
                                }
                            }
                            a {
                                background: $warning;
                            }
                        }
                        &.login-in-fourteen.log-in-vet-head {
                                background: $primary-gradient;
                                border-color: $primary-gradient;
                                color: $white;
                                box-shadow: none;
                                border-radius: 44px;
                                font-size: $font-size-15;
                                font-weight: $font-weight-semibold;
                                padding: 8px 16px;
                                transition: 0.5s;
                                display: flex;
                                align-items: center;
                                margin-right: 15px;
                                &:hover {
                                    background: $dark;
                                    border-color: $dark;
                                }
                                a {
                                    color: $white;
                                    font-size: $font-size-15;
                                }
                            .reg-btn {
                                background: $__sky-600;
                                color: $white;
                                box-shadow: none;
                                border-radius: 6px;
                                font-size: $font-size-15;
                                font-weight: $font-weight-semibold;
                                padding: 10px 15px;
                                transition: 0.5s;
                                display: flex;
                                align-items: center;
                                @include respond-below(custom1199) {
                                    padding: 10px 5px;
                                }
                                @include respond-below(custom991) {
                                    padding: 10px 12px;
                                }
                                &:hover {
                                    background: $primary;
                                    color: $white;
                                    transition: 0.5s;
                                }
                                &.reg-btn-fourteen {
                                    background: $primary;
                                    color: $white;
                                    transition: 0.5s;
                                    border: 1px solid $__blue__14;
                                    font-size: $font-size-15;
                                    font-weight: $font-weight-semibold;
                                    &:hover {
                                        background: $__white;
                                        color: $primary;
                                        transition: 0.5s;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        &.header-fixed {
            position: $__fixed;
            display: $__block;
            width: $__full__width;
            z-index: 9999;
            box-shadow: $__inherit;
            // background: rgb(14, 130, 253);
        }
    }
}