/* Apply Ubuntu font across the website */
body {
    background-color: #f8f9fa;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px; /* Adjust base font size as needed */
    line-height: 1.6;
    color: #333; /* Ensure text color is readable */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700; /* Use bold font weight for headings */
}

.navbar, .footer, .card, .list-group-item, p, a, button, input, textarea {
    font-family: 'Ubuntu', sans-serif;
}

.card-text {
    font-size: 1.1rem;
}

/* Horizontal Divider */
.hr-divider {
    border: 0;
    height: 0.7px;
    background: linear-gradient(to right, #007bff, #00c6ff, #007bff); /* Gradient effect */
    margin: 5px 0; /* Space above and below the divider */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

/* Navbar Styling */
header.navbar {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

header .nav-link:hover {
    color: #ffc107; /* Highlighted color (yellow) */
}

/* Navbar Logo */
header .navbar-brand img {
    border-radius: 50%; /* Circular logo */
    border: 2px solid white; /* White border around the logo */
}

.highlight {
    background-color: yellow;
    font-weight: bold;
}


/* Dropdown Menu */
.navbar .dropdown-menu {
    background-color: #343a40; /* Dark background */
    border: none; /* Remove border */
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease-in-out;
}

.navbar .dropdown-menu .dropdown-item {
    color: #ffffff; /* White text */
}

.navbar .dropdown-menu .dropdown-item:hover {
    background-color: #495057; /* Slightly lighter background on hover */
	color: #f8c210;
}

/* Dropdown Menu Visibility on Hover */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1; /* Fully visible on hover */
}

/* Mobile Dropdown Behavior */
@media (max-width: 768px) {
    .nav-item.dropdown .dropdown-menu {
        display: none; /* Initially hidden */
        opacity: 1; /* Visible when clicked */
    }

    .nav-item.dropdown.show .dropdown-menu {
        display: block; /* Show the menu when parent has class 'show' */
    }
}

/* Journal name styling */
.journal-name {
    font-size: 1.3rem; /* Default font size */
    font-weight: bold;
    word-wrap: break-word; /* Allow text to wrap within the container */
    max-width: calc(100% - 60px); /* Prevent the journal name from expanding beyond the available width */
}

/* Journal acronym styling */
.journal-acronym {
    font-size: 1rem; /* Adjust font size for acronym */
    font-weight: bold;
}

/* Adjust font size on smaller screens */
@media (max-width: 768px) {
    .journal-name {
        display: none; /* Hide journal name on mobile */
    }
    .journal-acronym {
        display: inline; /* Show journal acronym on mobile */
    }
}

/* Further adjustments for very small screens */
@media (max-width: 480px) {
    .journal-acronym {
        font-size: 0.9rem; /* Slightly smaller font for very small screens */
    }
}

/* Search Bar Section */
.search-bar-section {
    background-color: #f8f9fa; /* Light background */
    border-bottom: 2px solid #e9ecef; /* Subtle border for separation */
}

/* Search Bar Input */
.search-bar-section .form-control {
    border: 2px solid #ced4da;
    border-radius: 0.375rem;
    height: 50px;
    font-size: 1rem;
}

/* Search Button */
.search-bar-section .btn-primary {
    border-radius: 0.375rem;
    font-size: 1rem;
    height: 50px;
    padding: 0 20px;
}

/* Button Styling */
.search-bar-section .btn {
    font-size: 1rem;
    padding: 10px 20px;
}

/* Button Hover Effects */
.search-bar-section .btn-outline-secondary:hover {
    background-color: #6c757d;
    color: #fff;
}

.search-bar-section .btn-outline-primary:hover {
    background-color: #007bff;
    color: #fff;
}
/* Hero Section */
.hero-section {
    padding: 20px 0 50px;
    background: #f8f9fa;
}

.carousel-container {
    height: 100%;
}

.carousel-inner img {
    max-height: 400px;
    object-fit: cover;
}

.carousel-caption {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 15px;
    border-radius: 8px;
}

/* Call for Submissions Section */
.call-for-submissions {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
	height: 100%;
}

.call-for-submissions h4 {
    font-size: 24px;
    margin-bottom: 15px;
}

.call-for-submissions p {
    font-size: 16px;
}

.call-for-submissions .btn-submit {
    background: #ffc107;
    color: #000;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 20px;
    margin-top: 10px;
    text-decoration: none;
}

.call-for-submissions .btn-submit:hover {
    background: #e0a800;
    color: #000;
}

/* Grid Section */
.grid-section {
    margin-top: 30px;
}

.grid-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.grid-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

/* Section Title */
.section-title {
    text-align: center;
    margin-bottom: 40px;
}

/* Article Card */
.article-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 20px;
}

/* Filter Section */
.filter-section {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
}

/* Sidebar Styling */
.sidebar {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    padding: 20px;
    position: sticky;
    top: 20px;
}

.sidebar h4 {
    color: #007bff;
    font-weight: bold;
}

/* Volume Header */
.volume-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
}

.volume-header:hover {
    color: #0056b3;
}

/* Issue List */
.issue-list {
    padding-left: 20px;
    margin-top: 10px;
    list-style-type: none;
}

/* Issue Link */
.issue-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #007bff;
    padding: 5px 0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.issue-link i {
    margin-left: 10px; /* Space between issue name and arrow */
}

.issue-link:hover {
    color: #0056b3;
}

.issue-link:hover i {
    color: #0056b3; /* Change arrow color on hover */
}

/* View All Button */
.view-all-btn {
    display: block;
    margin-top: 20px;
    text-align: center;
    color: #ffffff;
    background-color: #007bff;
    border: none;
    padding: 10px 20px;
    border-radius: 0.375rem;
    text-decoration: none;
}

.view-all-btn:hover {
    background-color: #0056b3;
}
/* Page Header */
.page-header {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.page-header h2 {
    font-size: 1.75rem;
    font-weight: bold;
    color: #007bff;
}

.page-header p {
    color: #6c757d;
}

/* Filter Dropdown */
.filter-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.filter-container select {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.375rem;
}

/* Article List Styling */
.article-item {
    padding: 15px 0;
}

/* Article Title */
.article-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #1f1f1f;
    text-decoration: none;
    transition: color 0.3s ease;
}

.article-title:hover {
    color: #0056b3;
	text-decoration: underline;
}

/* PDF View Button */
.view-pdf-btn {
    color: #007bff;
    text-decoration: none;
}

.view-pdf-btn:hover {
    color: #0056b3;
}

/* Abstract Full */
.abstract-full {
    display: none;
    font-size: 1rem;
    margin: 10px 0;
    text-align: justify;
}

/* View Abstract Button */
.view-abstract-btn {
    font-size: 1rem;
    color: #007bff;
    cursor: pointer;
    text-decoration: none;
}

.view-abstract-btn:hover {
    color: #0056b3;
}

/* Article Info and Abstract Full */
.article-info, .abstract-full {
    font-size: 1rem;
    color: #1f1f1f;
}

/* PDF Icon */
.fas.fa-file-pdf {
    color: #d32f2f;
}

.view-pdf-btn:hover .fas.fa-file-pdf {
    color: #b71c1c;
}

/* Chevron Rotation for Abstract Button */
.view-abstract-btn i {
    transition: transform 0.3s ease;
}

/* Footer Main Section */
.footer-main {
    background-color: #343a40; /* Dark background */
    color: #ffffff; /* White text */
    text-align: left; /* Left-align the text for better readability */
    padding-top: 30px;
    padding-bottom: 30px;
}

.footer-main h5 {
    font-weight: 700;
    font-size: 1.1rem; /* Slightly larger text for section headings */
    margin-bottom: 15px;
}

.footer-main p,
.footer-main ul {
    text-align: left; /* Align text to the left */
    color: #b0b0b0; /* Lighter text color for body content */
}

.footer-main ul {
    padding: 0;
    list-style: none;
}

.footer-main ul li {
    margin-bottom: 8px;
}

.footer-main ul li a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-main ul li a:hover {
    color: #f8c210; /* Highlight color on hover */
}

/* Footer Copyright Section */
.footer-copyright {
    background-color: #212529; /* Slightly darker background */
    color: #ffffff;
    text-align: center;
    padding-top: 10px; /* Adjusted padding to make it less conflicting */
    padding-bottom: 10px;
}

.footer-copyright h4,
.footer-copyright h5 {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 0.9rem;
}

.footer-copyright h5 {
    font-size: 1rem;
    margin-top: 5px;
}

.footer-copyright a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-copyright a:hover {
    color: #f8c210; /* Highlight color on hover */
}

/* Style for emphasized 'SayPeaceNG' */
.footer-copyright .font-weight-bold {
    font-weight: 700; /* Bold font weight */
    color: #f8c210; /* Highlighted color to match the theme */
}

.footer-copyright .font-weight-bold:hover {
    color: #f1b000; /* Slightly darker on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer-main h5 {
        font-size: 1rem; /* Smaller heading size on mobile */
    }

    .footer-main ul li a {
        font-size: 0.9rem; /* Smaller link font size on mobile */
    }
    
    .footer-copyright h4,
    .footer-copyright h5 {
        font-size: 0.8rem; /* Smaller text on mobile */
    }
}

/* Scroll Up Button */
.scroll-up-btn {
    position: fixed;
    bottom: 20px;  /* Distance from the bottom */
    right: 20px;   /* Distance from the right */
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;  /* Makes the button a circle */
    font-size: 1.2rem;  /* Adjusted font size */
    width: 50px;   /* Smaller width */
    height: 50px;  /* Smaller height */
    display: none;  /* Initially hidden */
    z-index: 1000;  /* Ensure it stays on top */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center; /* Center the icon inside the circle */
    line-height: 50px;  /* Vertically center the icon */
}

.scroll-up-btn:hover {
    background-color: #0056b3;
}

.scroll-up-btn i {
    margin: 0;  /* Remove any default margin */
    font-size: 1.2rem; /* Adjusted icon size */
}

/* Smooth Scroll Up Button */
.scroll-up-btn:focus {
    outline: none;
}