/* ====== Global ====== */
body { font-family: Arial, sans-serif; }

/* Brand helpers */
.text-brand { color: #003A5D; }
.bg-brand { background-color: #003A5D !important; }
.container--narrow { max-width: 900px; margin: 0 auto; }

/* Anchor scroll offset (for sticky navbar) */
#home, #about, #editorial, #peer-review, #policy, #contact, #author, #submission, #ethics, #copyright { scroll-margin-top: 80px; }

/* ====== Navbar ====== */
header.navbar { background-color: #003A5D; }
header .navbar-nav .nav-link, header .dropdown-item { color: #fff; font-weight: 600; }
header .navbar-nav .nav-link:hover, header .dropdown-item:hover { color: #BD2E2B; }
header .navbar-nav .nav-link.active, header .dropdown-item.active { color: #BD2E2B !important; }
/* underline hover */
header .navbar-nav .nav-link { position: relative; padding: 8px 15px; }
header .navbar-nav .nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background-color: #BD2E2B; transition: width 0.3s ease; }
header .navbar-nav .nav-link:hover::after { width: 100%; }
/* dropdown menu styling */
.dropdown-menu { background-color: #003A5D; border: none; }

/* ====== Sections ====== */
section { padding-top: 5rem; padding-bottom: 5rem; }
.bg-light { background-color: #f8f9fa !important; }
.border-bottom { border-bottom: 1px solid #dee2e6 !important; }
.border-top { border-top: 1px solid #dee2e6 !important; }
.text-justify { text-align: justify; }

/* ====== Cards ====== */
.card-footer { background-color: #f8f9fa; border-top: 1px solid #dee2e6; }
.card { border-radius: 10px; }
.card-body { padding: 1.5rem; }

/* ====== Footer ====== */
footer { background-color: #003A5D; color: #fff; }
footer p { margin: 0; }






    /* ======================== */
    /* General Styles           */
    /* ======================== */
    body { 
      font-family: Inter, sans-serif; 
    }

    .container{
      max-width:1000px; 
      margin: auto;
     }
   

    /* ======================== */
    /* Navbar Styles             */
    /* ======================== */
    body { font-family: Arial, sans-serif; }
    header.navbar { background-color: #003A5D; }
    header .navbar-nav .nav-link, .dropdown-item { color: #fff; font-weight: 600; }
    header .navbar-nav .nav-link:hover, .dropdown-item:hover { color: #BD2E2B; }
    header .navbar-nav .nav-link.active, .dropdown-item.active { color: #BD2E2B !important; }
    header .navbar-nav .nav-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background-color: #BD2E2B; transition: width 0.3s ease; }
    header .navbar-nav .nav-link:hover::after { width: 100%; }
    .dropdown-menu { background-color: #003A5D; border: none; }

    /* ======================== */
    /* Text Styles       */
    /* ======================== */
    .justified-text {
    text-align: justify;
    line-height: 1.6;
    }

    .editorial-text { 
      text-align: justify; 
      line-height: 1.6; 
    }

    h3 {
      font-weight: bold;
    }

    h2 {
      font-weight: bold;
    }

    /* ======================== */
    /* Hero Section Styles       */
    /* ======================== */
    .hero { padding:100px 0; text-align:center; background:#f8fafc; }
    .hero h1 { font-size:clamp(32px,4vw,56px); font-weight:700; }
    .hero p { font-size:18px; color:#64748b; }

    /* Hero section with stock background */
    .hero {
    position: relative;
    padding:120px 0;
    text-align:center;
    min-height:60vh;
    background-image:url('image/banner-bg.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    color:#fff;
    }
    .hero::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,0.45); }
    .hero > .container { position:relative; z-index:1; }
    .hero h1 { font-size:clamp(32px,4vw,56px); font-weight:700; color:#fff; }
    .hero p { font-size:18px; color:#f1f5f9; }
    .hero .btn-outline-primary { border-color:#fff; color:#fff; }
    .hero .btn-outline-primary:hover { background:#fff; color:#003A5D; }


    footer { background:#003A5D; color:#fff; padding:20px 0; text-align:center; }
    .author-grid { display:grid; grid-template-columns:30% 70%; gap:20px; }
    .sidebar .list-group-item { cursor:pointer; position:relative; transition: all 0.3s ease; }
    .sidebar .list-group-item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background-color: #BD2E2B; transition: width 0.3s ease; }
    .sidebar .list-group-item:hover { color:#BD2E2B; }
    .sidebar .list-group-item:hover::after { width: 100%; }
    .sidebar .list-group-item.active { background:#003A5D; border-color:#003A5D; color:#fff; }
    .card { padding: 10px; }
    .table-rounded { border-radius: 10px; overflow: hidden; }

    /* ======================== */
    /* Footer Styles             */
    /* ======================== */
    footer { background:#003A5D; color:#fff; padding:20px 0; text-align:center; }

    /* ======================== */
    /* Author Section Grid       */
    /* ======================== */
    .author-grid { display:grid; grid-template-columns:30% 70%; gap:20px; }

    /* ======================== */
    /* Sidebar Items Styles      */
    /* ======================== */
    .sidebar .list-group-item { 
      cursor:pointer; 
      position:relative; 
      transition: all 0.3s ease; 
    }
    /* Sidebar underline effect */
    .sidebar .list-group-item::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0%;
      height: 2px;
      background-color: #BD2E2B; /* underline color */
      transition: width 0.3s ease;
    }
    /* Hover state for sidebar */
    .sidebar .list-group-item:hover { color:#BD2E2B; }
    .sidebar .list-group-item:hover::after { width: 100%; }
    /* Active sidebar item */
    .sidebar .list-group-item.active { background:#003A5D; border-color:#003A5D; color:#fff; }

    /* Contact Cards Styles      */
    .card {
      padding: 10px;
    }

    /* Table Rounded Corners     */
    .table-rounded {
      border-radius: 10px;
      overflow: hidden;
    }

    /* nav bar logo     */
    .logo {
    width: 100px;
    height: 50px;
    }

    .my-span {
      width: 20%; /* Set a fixed width */
    }

    .heading{
      font-size: 50px !important;
      font-weight: 600 !important;
    }

    .sub-heading{
      font-size: 25px !important; 
      font-weight: 200 !important;
    }