Mvc ActionLink HighLight Color - html

Question

I have a problem with Actionlink Highlight color where on Navbar.
I am using bootstrap for styling and i identified a navbar style like that in bootstrap.css file:
.navbar-custom {
background-color: #e74c3c;
border-color: #c0392b;
}
.navbar-custom .navbar-brand {
color: #ecf0f1;
}
.navbar-custom .navbar-brand:hover, .navbar-custom .navbar-brand:focus {
color: #ffbbbc;
}
.navbar-custom .navbar-text {
color: #ecf0f1;
}
.navbar-custom .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus {
color: #ffbbbc;
}
.navbar-custom .navbar-nav > li > .dropdown-menu {
background-color: #e74c3c;
}
.navbar-custom .navbar-nav > li > .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-custom .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-custom .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-custom .navbar-nav > li > .dropdown-menu > li > .divider {
background-color: #e74c3c;
}
.navbar-custom .navbar-nav > .active > a, .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-custom .navbar-nav > .open > a, .navbar-custom .navbar-nav > .open > a:hover, .navbar-custom .navbar-nav > .open > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
.navbar-custom .navbar-toggle {
border-color: #c0392b;
}
.navbar-custom .navbar-toggle:hover, .navbar-custom .navbar-toggle:focus {
background-color: #c0392b;
}
.navbar-custom .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
border-color: #ecf0f1;
}
.navbar-custom .navbar-link {
color: #ecf0f1;
}
.navbar-custom .navbar-link:hover {
color: #ffbbbc;
}
#media (max-width: 767px) {
.navbar-custom .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffbbbc;
}
.navbar-custom .navbar-nav .open .dropdown-menu > .active > a, .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffbbbc;
background-color: #c0392b;
}
}
Cshtml:
<div class="navbar-custom container">
<div class="container">
<div class=" navbar-header">
<button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("FluffyMunchies", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Ana Sayfa", "Index", "Home")</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Ürünler <span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="Products">
<li>#Html.ActionLink("Cupcakes", "CupCakes", "Home")</li>
<li>#Html.ActionLink("Özel Günler", "SpecialDays", "Home")</li>
<li>#Html.ActionLink("Paket Seçenekleri", "Packages", "Home")</li>
</ul>
</li>
<li>#Html.ActionLink("Hakkında", "About", "Home")</li>
<li>#Html.ActionLink("İletişim", "Contact", "Home")</li>
</ul>
<div class="navbar-right pSet">
<a class="btn btn-social-icon btn-facebook" href="https://www.facebook.com/fluffymunchiescupcakes" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="btn btn-social-icon btn-instagram" href="https://instagram.com/fluffymunchies" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</div>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
So; ActionLinks highlight color are gray. But; it should be red.
What is the problem?
My reference site is: http://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0