.social-part .fa {
    padding-right: 20px;
}

ul li a {
    margin-right: 20px;
}

#custom-search-form {
    margin: 0;
    padding: 0;
    width: 0px;
    transition: .5s;
}

    #custom-search-form:not(.active) * {
        display: none;
    }

    #custom-search-form .search-query {
        padding-right: 3px;
        padding-left: 30px;
        /* IE7-8 doesn't have border-radius, so don't indent the padding */

        margin-bottom: 0;
        border: 1px solid #E5E5E5;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        padding-top: .2rem;
        padding-bottom: .2rem;
    }

    #custom-search-form button {
        border: 0;
        background: none;
        /** belows styles are working good */
        padding: 2px 5px;
        margin-top: 2px;
        position: absolute;
        top: 0;
        /* IE7-8 doesn't have border-radius, so don't indent the padding */
        margin-bottom: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    #custom-search-form.active {
        width: 200px;
        margin-left: 1rem;
    }

.search-query:focus + button {
    z-index: 3;
}

#button-search.material-symbols-outlined {
    padding: 5px 5px;
    background-color: #E22D1C;
    color: #ffff;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    cursor: pointer;
}

#navbar-container {
    height: 56px;
}

#navbarToggler .nav-item.active a.nav-link {
    border-bottom: 2px solid #F62409;
    font-weight: bold;
    color: #F62409;
}

#navbarToggler .navbar-nav .nav-link {
    color: #08183B;
    position: relative;
    font-weight: bold;
}

    #navbarToggler .navbar-nav .nav-link::before {
        border-bottom: 2px solid #F62409;
        content: "";
        position: absolute;
        height: 2px;
        background-color: #F62409;
        left: 0;
        bottom: 0;
        width: 0px;
        transition: 0.5s;
    }

#navbarToggler .navbar-nav .nav-item:not(.active).dropdown.dmenu:hover .nav-link::before {
    width: 100%;
}

#navbarToggler .navbar-nav .nav-item:not(.active) .nav-link:hover::before {
    width: 100%;
}

.navbar-collapse {
    z-index: 100;
}

.navbar-logo img {
    max-height: 20px;
    max-width: 200px
}

.dropdown.dmenu:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
}