section{
scroll-margin-top: 80px;
}
html, body {
    overflow-x: hidden;
    width: 100%;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Inter',sans-serif;
line-height:1.6;
color:#333;
background:#ffffff;
}

/* CONTAINER */

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* HEADER */

.header{
background:#0b3d91;
color:white;
padding:20px 0;
}

.header-flex{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo-area h1{
font-size:20px;
}

.logo-area p{
font-size:13px;
opacity:.8;
}

.nav ul{
display:flex;
list-style:none;
}

.nav li{
margin-left:25px;
}

.nav a{
color:white;
text-decoration:none;
font-weight:500;
}

/* HERO */

.hero{
background:linear-gradient(120deg,#0b3d91,#2c6be0);
color:white;
padding:120px 0;
text-align:center;
}

.hero h2{
font-size:38px;
margin-bottom:10px;
}

.hero p{
margin-bottom:20px;
}

.btn{
background:white;
color:#0b3d91;
border:none;
padding:12px 28px;
font-weight:600;
cursor:pointer;
border-radius:5px;
}

/* SECTIONS */

.section{
padding:80px 0;
}

.light{
background:#f5f7fb;
}

.section-title{
text-align:center;
font-size:30px;
margin-bottom:40px;
color:#0b3d91;
}

/* GRID */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.card{
background:white;
padding:25px;
border-radius:8px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
}

/* EDITOR */

.editor-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:25px;
}

.editor-card{
background:white;
padding:25px;
border-radius:6px;
border:1px solid #eee;
text-align:center;
}

.editor-card h4{
color:#0b3d91;
margin-bottom:5px;
}

/* GUIDELINES */

.guidelines{
max-width:700px;
margin:auto;
}

.guidelines li{
margin-bottom:10px;
}

/* POLICIES */

.policy-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.policy{
background:#fff;
padding:25px;
border-left:4px solid #0b3d91;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

/* FOOTER */

.footer{
background:#0b3d91;
color:white;
text-align:center;
padding:20px;
}
/* HEADER */

.header{
position:sticky;
top:0;
width:100%;
background:#ffffff;
z-index:9999;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

/* HEADER FLEX */

.header-flex{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 0;
}

/* LOGO AREA */

.logo-area{
display:flex;
align-items:center;
gap:12px;
}

.logo-area img{
height:50px;
}

.logo-text h1{
font-size:16px;
font-weight:600;
color:#0b3d91;
line-height:1.2;
}

.logo-text p{
font-size:12px;
color:#555;
}

/* NAVIGATION */

.nav ul{
display:flex;
list-style:none;
gap:25px;
}

.nav a{
text-decoration:none;
font-weight:500;
color:#333;
font-size:14px;
transition:0.3s;
}

.nav a:hover{
color:#0b3d91;
}

/* MOBILE MENU BUTTON */

.menu-toggle{
display:none;
font-size:26px;
cursor:pointer;
}

/* MOBILE */

@media (max-width: 900px){

.menu-toggle{
display:block;
}

.nav{
position:absolute;
top:70px;
right:0;
width:100%;
background:white;
display:none;
box-shadow:0 5px 10px rgba(0,0,0,0.1);
}

.nav ul{
flex-direction:column;
padding:20px;
gap:15px;
}

.nav.active{
display:block;
}

.logo-text h1{
font-size:14px;
}

}
.hero{
background:
linear-gradient(rgba(11,61,145,0.75), rgba(11,61,145,0.75)),
url('../img/hero/journal-bg.png');

background-size:cover;
background-position:center;
background-repeat:no-repeat;

color:white;
/* padding:160px 0; */
padding: 40px 0;
text-align:center;
position:relative;
}

.hero h2{
font-size:42px;
font-weight:700;
margin-bottom:15px;
}

.hero p{
font-size:18px;
max-width:700px;
margin:auto;
margin-bottom:25px;
}

.hero .btn{
background:#ffffff;
color:#0b3d91;
padding:12px 28px;
border:none;
border-radius:6px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.hero .btn:hover{
background:#f0f0f0;
}

.about-journal{
background:#ffffff;
}

.about-journal p{
font-size:16px;
line-height:1.8;
color:#555;
margin-bottom:16px;
}

/* FEATURE BOXES */

.about-feature{
display:flex;
flex-direction:column;
gap:20px;
}

.feature-box{
display:flex;
align-items:flex-start;
gap:15px;
background:#f8fbff;
padding:20px;
border-radius:8px;
border-left:4px solid #0b3d91;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
}

.feature-box i{
font-size:28px;
color:#0b3d91;
}

.feature-box h5{
margin:0;
font-size:18px;
font-weight:600;
}

.feature-box p{
margin:4px 0 0;
font-size:14px;
color:#666;
}
/* Container Background */
.aim-scope-section {
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* Premium Aim Card */
.aim-card-premium {
    background: #ffffff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    border-bottom: 5px solid #0b3d91; /* Surana Blue */
}




.aim-card-premium_1 {
    background: #ffffff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    /* border-bottom: 5px solid #0b3d91; Surana Blue */
}

/* Modern Scope Cards */
.scope-card-modern {
    background: #ffffff;
    padding: 35px 25px;
    border-radius: 12px;
    transition: all 0.4s ease;
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
}

.scope-card-modern:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(11, 61, 145, 0.1);
    border-color: #0b3d91;
}

/* Icon Styling */
.icon-box {
    width: 60px;
    height: 60px;
    background: rgba(11, 61, 145, 0.05);
    color: #0b3d91;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 28px;
    margin-bottom: 20px;
}

/* Highlight the middle card slightly */
.highlight-card {
    background: linear-gradient(to bottom right, #ffffff, #f0f4ff);
}

.scope-card-modern h5 {
    color: #0b3d91;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.scope-card-modern ul {
    padding-left: 0;
    list-style: none;
}

.scope-card-modern li {
    padding-bottom: 10px;
    font-size: 14.5px;
    color: #444;
    position: relative;
    padding-left: 20px;
}

/* Custom bullet points */
.scope-card-modern li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #0b3d91;
    font-weight: bold;
}
.bi {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
}
/* Section Background */
.editorial-section {
    background-color: #ffffff;
}

/* Spotlight Card for Editor in Chief */
.chief-editor-card {
    background: #f8faff;
    border: 1px solid #e1e8f5;
    border-top: 5px solid #0b3d91; /* Surana Blue */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Individual Member Cards */
.member-card {
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
}

.member-card:hover {
    border-color: #0b3d91;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.member-card h5 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #333;
}

.text-primary {
    color: #0b3d91 !important; /* Force Surana Blue */
}

.bg-primary {
    background-color: #0b3d91 !important;
}
/* Background */
.guidelines-section {
    background-color: #fcfcfc;
}

/* Info Cards */
.guideline-info-card {
    border-radius: 10px;
}

/* Table Styling */
.table thead th {
    color: #0b3d91;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* Review Process Steps */
.step-box {
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.step-box span {
    background: #0b3d91;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 12px;
}

.step-box.highlight {
    background: #0b3d91;
    color: #fff;
    border-color: #0b3d91;
}

.step-box.highlight span {
    background: #fff;
    color: #0b3d91;
}

.step-arrow {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #0b3d91;
}
.policy-highlight-card {
    transition: transform 0.3s ease;
    border-radius: 12px;
}

.policy-highlight-card:hover {
    transform: translateY(-8px);
}

.accordion-button:not(.collapsed) {
    background-color: #f0f4ff;
    color: #0b3d91;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(11, 61, 145, 0.1);
}

.accordion-item {
    border: 1px solid #eee;
    margin-bottom: 10px;
    border-radius: 8px !important;
    overflow: hidden;
}

.text-primary { color: #0b3d91 !important; }

.contact-card {
    background: #fff;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
}

.icon-box-small {
    width: 45px;
    height: 45px;
    background: #0b3d91;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 20px;
}

.contact-item i {
    margin-top: 5px;
}

.text-primary {
    color: #0b3d91 !important;
}

/* Optional: Make the email link change color on hover */
.contact-item a:hover {
    color: #0b3d91 !important;
    text-decoration: underline !important;
}
/* About Text Styling */
.about-section .lead {
    font-size: 1.25rem;
    border-left: 4px solid #0b3d91;
    padding-left: 20px;
}

/* Feature Cards Grid */
.feature-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 15px;
    transition: all 0.3s ease-in-out;
}

.feature-card:hover {
    background: #0b3d91;
    transform: translateY(-5px);
}

/* Icon and Text Color Change on Hover */
.feature-card:hover i, 
.feature-card:hover h6, 
.feature-card:hover p {
    color: #ffffff !important;
}

.text-primary {
    color: #0b3d91 !important;
}

.badge {
    font-weight: 500;
}
/* .hero-section {
    min-height: 85vh; 
    background: linear-gradient(rgba(11, 61, 145, 0.85), rgba(0, 0, 0, 0.7)), 
                url('../img/hero/journal-bg.png') center/cover no-repeat fixed;
    padding-top: 40px;
} */
.hero-section {
    min-height: 85vh; /* Covers most of the screen */
    background: linear-gradient(rgba(11, 61, 145, 0.85), rgba(0, 0, 0, 0.7)), 
                url('../img/hero/bg.png') center/cover no-repeat fixed;
    padding-top: 40px;
}

.hero-section h1 {
    font-family: 'Playfair Display', serif; /* Gives an academic feel */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-section .btn-primary {
    background-color: #0b3d91;
    border-color: #0b3d91;
    transition: all 0.3s ease;
}

.hero-section .btn-primary:hover {
    background-color: #ffffff;
    color: #0b3d91;
    transform: scale(1.05);
}

/* Tracking-wider for badge */
.tracking-wider {
    letter-spacing: 0.1rem;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2rem;
    }
}
/* Sticky Header adjustments */
body {
    overflow-x: hidden; /* This is fine */
    position: relative; /* Add this to help the browser calculate positions */
}
.navbar.sticky-top {
    z-index: 9999 !important;
    top: 0; /* Ensures it starts at the very top */
}
/* Force the Bootstrap Navbar to stick */
.navbar.sticky-top {
    position: fixed !important; /* Changed from sticky to fixed for 100% reliability */
    top: 0;
    width: 100%;
    z-index: 1030; /* Standard Bootstrap z-index for fixed nav */
}

/* IMPORTANT: Since we used fixed, we must push the hero down 
   so the header doesn't cover the title */
.hero-section {
    margin-top: 70px; /* Adjust this to match your header's height */
}
.navbar {
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px); /* Glass effect */
}

.nav-link {
    color: #333 !important;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.nav-link:hover {
    color: #0b3d91 !important; /* Surana Blue */
}

.navbar-brand span {
    color: #0b3d91;
    letter-spacing: 0.5px;
}

/* Button Styling inside Nav */
.btn-primary {
    background-color: #0b3d91 !important;
    border: none;
    box-shadow: 0 4px 6px rgba(11, 61, 145, 0.2);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(11, 61, 145, 0.3);
}

/* Mobile Menu Fix */
@media (max-width: 991px) {
    .navbar-nav {
        padding: 20px 0;
        text-align: center;
    }
    .nav-item {
        margin-bottom: 10px;
    }
}
@media (max-width: 480px) {
    .hero-section .badge {
        font-size: 0.7rem !important; /* Smaller text on phones */
        letter-spacing: 0.5px !important;
        padding: 5px 10px !important;
    }
}
/* Update this specific block in your CSS */
.hero-section .btn-primary {
    background-color: #0b3d91;
    border-color: #0b3d91;
    display: inline-flex; /* Keeps icon and text perfectly aligned */
    align-items: center;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    white-space: nowrap; /* Prevents text from breaking into two lines */
    vertical-align: middle;
}

.hero-section .btn-primary:hover {
    background-color: #ffffff !important;
    color: #0b3d91 !important;
    transform: translateY(-3px); /* Moves up instead of scaling wide */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}

/* Fix the icon size so it doesn't push the text */
.hero-section .btn-primary i {
    font-size: 1.2rem;
    line-height: 0;
}