:root {
    --primary-color:#00356B;
    --secondary-color:#343434;
    --other-blue:#486787;
}
.bgblue{
    background-color: #00356B !important;
}
.mulish-font{
    font-family: 'Mulish', sans-serif;
}
.inter-font{
    font-family: 'Inter', sans-serif;
}
.tinos-font{
    font-family: 'Tinos', serif;
}
.bluetext{
    color: var(--primary-color);
}
.whitebtn{
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    padding: 7px 20px;
    background-color: #F9F9F9;
    color: var(--primary-color);
}
.bluebtn{
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    padding: 7px 20px;
    background-color: var(--primary-color);
    color: #F9F9F9;
}
.bluebtn:hover{
    background-color: var(--other-blue);
}
.lightbtn{
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    padding: 5px 10px;
    background-color: var(--other-blue);
    color: #F9F9F9;
}
.lightbtn:hover{
    background-color: var(--primary-color);
}

body{
    color: #343434;
    font-family: 'Mulish', sans-serif;
}

/* NAVBAR */
.navbar{
    box-shadow: 0px 4px 4px #3434341b;
    background-color: white;
}
.logo{
    font-size: 12px;
}
.logo-img {
    height: 100%;
}
.logo b{
    color: var(--primary-color);
}
#mynavbar>ul a{
    color:#283037;
}
#mynavbar > ul a:hover {
    color: var(--primary-color);
}
.nav-item{
    margin: 0px 4px;
}

/* HERO */
.hero-container {
    background: linear-gradient(180deg, rgba(3, 0, 78, 0.05) 0%, rgba(0, 33, 67, 0.87) 100%),
                url('../img/hero.png') center/cover no-repeat; /* Combine linear gradient and image */
    height: 516px;
    padding-bottom: 40px;
}

.hero-container h1{
    font-family: 'Tiro Kannada', serif;
    font-size: 400%;
}
@media only screen and (max-width: 600px) {
    .hero-container h1 {
        font-size: 300%;
    }
}
.hero-container p{
    font-family: 'Inter', sans-serif;
}

/* SEARCH BAR  */
.searchbar-container{
    background-color: var(--primary-color);
}
.searchbar-container p{
    font-family: 'Tiro Kannada', serif;
}
.searchbar-form input{
    border-radius: 7px 7px;
    box-shadow: 1px #E8DDDD;
}
.searchbar-form button{
    border:1px solid white;
}

/* MAIN SECTION  */
.main-section-head{
    font-family: 'Tinos', serif;
    color: var(--primary-color);
}
.main-section-head2{
    font-family: 'Tinos', serif;
    background-color: var(--primary-color);
    color: white;
}
.resources {
    background-color: #F9F9F9;
    font-family: 'Inter', sans-serif;
    color: var(--primary-color);
    height: 100%;
}
.resource-item a{
    color: inherit;
    text-decoration: initial;
    font-size: initial;
}
.resource-heading{
    border-bottom: 1px solid var(--primary-color);
    width: 100%;
    font-family: 'Tinos', serif;
}
.resources .author{
    font-weight: lighter;
    font-family: 'Mulish', sans-serif;
    color: var(--secondary-color);
}
.category-container button{
    margin: 5px;
}
.category-container button:hover{
    background-color: var(--primary-color);
    color: #F9F9F9;
}
.category2 b, .category2 a:hover{
    color: var(--primary-color);
}
.category2 a{
    color: var(--secondary-color);
    text-decoration: none;
}

/* FOOTER  */
.footer-container {
    font-family: 'Mulish', sans-serif;
    background-color: #222222;
    color: white;
    font-size: 80%;
}
.footer-container a{
    color: white;
    text-decoration: none;
}
.footer-container a:hover{
    color: var(--primary-color);
}
.copyright{
    background-color: #0B0B0B;
}

/* REGISTER PAGE  */
.register-img{
    width: 100%;
}

/* ARTICLE PAGE  */
.article-footer{
    background-color: #F2F8FF;
    width: 100%;
    margin-top: 120px;
}
.article-footer p{
    margin: 2px;
}

/* ADMIN */
.admin-container{
    display: flex;
    font-family: 'Poppins', sans-serif;
}
.admin-header-dropdown{
    color: var(--primary-color);
    border: none;
    background-color: white;
}
.admin-sidebar-container{
    background-color: var(--primary-color);
}
.admin-sidebar-list{
    width: 100%;
}
.admin-sidebar-list a{
    color: white;
    text-decoration: none;
}
.admin-sidebar-list div:hover, .admin-sidebar-list .active{
    background-color: var(--other-blue);
}
.stat {
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(52, 52, 52, 0.5);
    flex-grow: 1;
}
.stat .figure{
    color: var(--primary-color);
}
.stat .figure small{
    color: var(--secondary-color);
}
.admin-button{
    background-color: #7A7A7A;
    color: white;
    border-radius: 1px;
    border: none;
    font-size: 95%;
    margin: 1px;
}
.admin-button:hover{
    background-color: var(--other-blue);
}
.table{
    font-family: 'Mulish', sans-serif;
}
.table thead{
    background-color: var(--other-blue);
    color: white;
}