:root {
        --navy:linear-gradient(180deg, #B7EBF2 0%, #FFFFFF 100%);
        --navy-700: #071a2d;
        --accent: #1e88e5;
        --accent-700: #1565c0;
        --accent-light: #e3f2fd;
        --text: #263238;
        --muted: #546e7a;
        --bg: #f5f7fa;
        --card: #ffffff;
        --success: #43a047;
        --warning: #fb8c00;
        --danger: #e53935;
        --radius: 12px;
        --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
      }
      
      * { box-sizing: border-box; }
      html, body { height: 100%; }
      body {
        margin: 0;
        font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
        color: var(--text);
        background: var(--bg);
        line-height: 1.6;
        font-weight: 400;
     
      }
      
      h1, h2, h4, h5, h6 {
        font-family: 'Playfair Display', serif;
        font-weight: 500;
        color: black;
      }
    .welcome-section  h3{
          font-family: 'Playfair Display', serif;
        font-weight: 500;
        color: black;
          font-size:16px;
      }
      
      a { color: var(--accent); text-decoration: none; transition: all 0.3s ease; }
      a:hover { color: var(--accent-700); }
      
      .container { width: min(1200px, 94vw); margin: 0 auto; }
      
      /* Top Navy Bar */
      .topbar {
        background: var(--navy);
        color: #e1f5fe;
        font-size: 0.95rem;
        padding: 8px 0;
      }
      
      .topbar-inner {
        display: flex; 
        align-items: center; 
        justify-content: space-between;
        gap: 12px;
      }
      
      .topbar .contacts { display: flex; gap: 18px; flex-wrap: wrap; }
      
      .pill {
        background: rgba(255,255,255,.12);
        padding: 6px 12px; 
        border-radius: 30px;
        display: inline-flex; 
        align-items: center; 
        gap: 8px;
        transition: all 0.3s ease;
      }
      
      .pill:hover {
        background: rgba(255,255,255,.2);
      }
      
      /* Banner */
      .banner { 
         /*background: linear-gradient(180deg, #8b86af 30%, #b7ebf2 50%, white 50%);*/
         background:  linear-gradient(180deg, #B7EBF2 0%, #FFFFFF 100%);
        color: #fff; 
        position: relative;
        overflow: hidden;
        color:black;
      }
      
      .banner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        opacity: 0.3;
      }
      
      .banner-inner { 
        display: grid; 
        grid-template-columns: 120px 1fr auto; 
        gap: 20px; 
        align-items: center; 
        padding: 30px 0;
        position: relative;
        z-index: 1;
      }
      
     
      
      .logo:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
      }
      
      .title h1 { 
        margin: 0; 
        font-size: clamp(1.8rem, 2.5vw + 0.6rem, 2.5rem); 
        letter-spacing: -0.5px;
        line-height: 1.2;
      }
      
      .title .issn { 
        opacity: .9; 
        margin-top: 8px; 
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      
      .title .indexing { 
        margin-top: 14px; 
        display: flex; 
        gap: 10px; 
        flex-wrap: wrap;
      }
      
      .badge { 
        background: rgba(255,255,255,.16); 
        padding: 6px 12px; 
        border-radius: 30px; 
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.3s ease;
      }
      
      .badge:hover {
        background: rgba(255,255,255,.25);
        transform: translateY(-2px);
      }
      
      .cta { 
        display: flex; 
        gap: 12px; 
        flex-wrap: wrap;
      }
      
      .btn {
        border: 0; 
        padding: 12px 18px; 
        border-radius: 30px; 
        font-weight: 600; 
        cursor: pointer;
        background: #fff; 
        color: var(--navy); 
        box-shadow: var(--shadow);
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      
      .btn:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
      }
      
      .btn.primary { 
        background: var(--accent); 
        color: #fff; 
      }
      
      .btn.primary:hover { 
        background: var(--accent-700); 
      }
      
      /* Header Nav */
      .header { 
        background: #fff; 
        box-shadow: var(--shadow); 
        position: sticky; 
        top: 0; 
        z-index: 50;
      }
      
      .nav { 
        display: flex; 
        gap: 6px; 
        align-items: center; 
        padding: 12px 0; 
        overflow-x: auto;
      }
      
      /*.nav::-webkit-scrollbar {*/
      /*  height: 4px;*/
      /*}*/
      
      /*.nav::-webkit-scrollbar-track {*/
      /*  background: var(--bg);*/
      /*}*/
      
      /*.nav::-webkit-scrollbar-thumb {*/
      /*  background: var(--muted);*/
      /*  border-radius: 4px;*/
      /*}*/
      
      .nav a, .nav .menu { 
        padding: 10px 14px; 
        border-radius: 30px; 
        color: var(--text); 
        white-space: nowrap;
        font-weight: 500;
        /*transition: all 0.3s ease;*/
        display: flex;
        align-items: center;
        gap: 6px;
      }
      
      .nav a:hover, .nav .menu:hover { 
      
      }
      
      .menu { 
        position: relative; 
      }
      
      
      
     /* Layout 20 / 60 / 20 */
      .layout { 
        display: grid; 
        grid-template-columns: 1fr 3fr 1fr; 
        gap: 5px; 
        padding:10px 0 0 0;
        margin: 15px ;
      }
      .card { 
        background: #fff; 
        border-radius: var(--radius); 
        box-shadow: var(--shadow); 
        padding: 12px;
        transition: all 0.3s ease;
        border: 1px solid rgba(0,0,0,0.03);
      }
      
      .card:hover {
        box-shadow: var(--shadow-hover);
        transform: translateY(-3px);
      }
      .publisher p{
          padding:0px;
          font-size:14px;
          margin:0px;
      }
      
      .card h3 { 
        margin: 0 0 10px; 
        display: flex;
        font-size:14px;
        align-items: center;
        gap: 10px;
      }
    
    
      .card li {
          font-size:14px;
      }
      
      .card-icon {
        background: var(--accent-light);
        color: var(--accent);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      /* Left Sidebar */
/*      .stack { */
/*        display: grid; */
/*        gap: 3px; */
/*      }*/
/*      .notice-track {*/
/*  overflow: hidden;*/
  /*height: 320px;/ */
/*  position: relative;*/
/*}*/

/*.notice-list {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  animation: scrollUp 35s linear infinite;*/
/*}*/

/*.notice-item {*/
/*  padding: 6px 0;*/
/*  font-size: 14px;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  gap: 8px;*/
/*}*/

/*@keyframes scrollUp {*/
/*  0%   { transform: translateY(0); }*/
/*  100% { transform: translateY(-100%); }*/
/*}*/

      
      /* Middle */
      
      .section { 
        margin-bottom: 10px; 
      }
      
     
      
      .grid-2 { 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        gap: 20px; 
      }
      
      .articles { 
        display: grid; 
        gap: 16px; 
      }
      
      .article { 
        border: 1px solid #e1f5fe; 
        border-radius: 12px; 
        padding: 16px;
        background: var(--accent-light);
        transition: all 0.3s ease;
      }
      
      .article:hover {
        border-color: var(--accent);
        transform: translateY(-3px);
        box-shadow: var(--shadow);
      }
      
      .article h4 { 
        margin: 0 0 8px; 
        color: var(--navy);
      }
      
      .article-meta {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 12px;
      }
      
      .article-meta .mini {
        display: flex;
        margin:2px;
        font-size:14px;
        align-items: center;
        gap: 2px;
      }
      
      .article-actions {
        display: flex; 
        gap: 10px; 
        flex-wrap: wrap;
      }
      
      .article-actions .btn {
        padding: 8px 12px;
        font-size: 0.9rem;
      }
      
      .filters { 
        display: flex; 
        gap: 12px; 
        flex-wrap: wrap;
      }
      
      .filters select, .filters input { 
        padding: 10px 14px; 
        border: 1px solid #cfd8dc; 
        border-radius: 30px; 
        background: #fff;
        font-family: inherit;
        transition: all 0.3s ease;
      }
      
      .filters select:focus, .filters input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.2);
      }
      
      /* Right Sidebar */
      .carousel { 
        position: relative; 
        overflow: hidden; 
        height: 180px; 
        border-radius: 12px;
      }
      
      .carousel-track { 
        display: flex; 
        position: absolute; 
        inset: 0; 
        animation: slideX 20s linear infinite;
      }
      
      .carousel img { 
        width: 100%; 
        height: 180px; 
        object-fit: cover; 
        flex: 0 0 100%; 
      }
      
      @keyframes slideX { 
        0% { transform: translateX(0); } 
        100% { transform: translateX(-300%); } 
      }
      

      .copyright {
        background: var(--navy-700);
        padding: 16px 0;
        text-align: center;
        font-size: 0.9rem;
      }
      
      /* Responsive */
      @media (max-width: 1000px) { 
        .layout { 
          grid-template-columns: 1fr; 
        } 
        .banner-inner { 
          grid-template-columns: 80px 1fr; 
        } 
        .cta { 
          justify-content: start; 
        }
        .footer-inner {
          grid-template-columns: 1fr;
          gap: 20px;
        }
      }
      
      @media (max-width: 600px) { 
        .nav { 
          gap: 4px; 
        } 
        .nav a, .nav .menu { 
          padding: 8px 10px; 
          font-size: 14px;
        }
        .grid-2 {
          grid-template-columns: 1fr;
        }
        .title h1 {
          font-size: 1.6rem;
        }
        .banner-inner {
          gap: 15px;
        }
      }
    .par p{
        margin:0px;
        
    }
     
      
      .container { width: min(1400px, 94vw); margin: 0 auto; }
      
      /* Top Navy Bar */
      .topbar {
        background: var(--navy);
        color: #e1f5fe;
        font-size: 0.95rem;
        padding: 8px 0;
      }
      
      .topbar-inner {
        display: flex; 
        align-items: center; 
        justify-content: space-between;
        gap: 12px;
      }
      
      .topbar .contacts { display: flex; gap: 18px; flex-wrap: wrap; }
      
      .pill {
        background: rgba(255,255,255,.12);
        padding: 6px 12px; 
        border-radius: 30px;
        display: inline-flex; 
        align-items: center; 
        gap: 8px;
        transition: all 0.3s ease;
      }
      
      .pill:hover {
        background: rgba(255,255,255,.2);
      }
      
      /* Banner */
      .banner { 
         /*background: linear-gradient(180deg, #8b86af 30%, #b7ebf2 50%, white 50%);*/
         background:  linear-gradient(180deg, #B7EBF2 0%, #FFFFFF 100%);
        color: #fff; 
        position: relative;
        overflow: hidden;
        color:black;
      }
      
      .banner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        opacity: 0.3;
      }
      
      .banner-inner { 
        display: grid; 
        grid-template-columns: 120px 1fr auto; 
        gap: 20px; 
        align-items: center; 
        padding: 30px 0;
        position: relative;
        z-index: 1;
      }

      .title h1 { 
        margin: 0; 
        font-size: clamp(1.8rem, 2.5vw + 0.6rem, 2.5rem); 
        letter-spacing: -0.5px;
        line-height: 1.2;
      }
      
      .title .issn { 
        opacity: .9; 
        margin-top: 8px; 
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      
      .title .indexing { 
        margin-top: 14px; 
        display: flex; 
        gap: 10px; 
        flex-wrap: wrap;
      }
      
      .badge { 
        background: rgba(255,255,255,.16); 
        padding: 6px 12px; 
        border-radius: 30px; 
        font-size: .9rem;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.3s ease;
      }
      
      .badge:hover {
        background: rgba(255,255,255,.25);
        transform: translateY(-2px);
      }
      
      .cta { 
        display: flex; 
        gap: 12px; 
        flex-wrap: wrap;
      }
      
      .btn {
        border: 0; 
        padding: 12px 18px; 
        border-radius: 30px; 
        font-weight: 600; 
        cursor: pointer;
        background: #fff; 
        color: var(--navy); 
        box-shadow: var(--shadow);
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      
      .btn:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
      }
      
      .btn.primary { 
        background: var(--accent); 
        color: #fff; 
      }
      
      .btn.primary:hover { 
        background: var(--accent-700); 
      }
      
      /* Header Nav */
      .header { 
        background: #fff; 
        box-shadow: var(--shadow); 
        position: sticky; 
        top: 0; 
        z-index: 50;
      }
      
      .nav { 
        display: flex; 
        gap: 6px; 
        align-items: center; 
        padding: 12px 0; 
        overflow-x: auto;
      }
      
      /*.nav::-webkit-scrollbar {*/
      /*  height: 4px;*/
      /*}*/
      
      /*.nav::-webkit-scrollbar-track {*/
      /*  background: var(--bg);*/
      /*}*/
      
      /*.nav::-webkit-scrollbar-thumb {*/
      /*  background: var(--muted);*/
      /*  border-radius: 4px;*/
      /*}*/
      
      .nav a, .nav .menu { 
        padding: 10px 14px; 
        border-radius: 30px; 
        color: var(--text); 
        white-space: nowrap;
        font-weight: 500;
        /*transition: all 0.3s ease;*/
        display: flex;
        align-items: center;
        gap: 6px;
      }
      
      .nav a:hover, .nav .menu:hover { 
      
      }
      
      .menu { 
        position: relative; 
      }
      
       .card { 
        background: #fff; 
        border-radius: var(--radius); 
        box-shadow: var(--shadow); 
        padding: 12px;
        transition: all 0.3s ease;
        border: 1px solid rgba(0,0,0,0.03);
      }
      
      .card:hover {
        box-shadow: var(--shadow-hover);
        transform: translateY(-3px);
      }
      

      
     
      .card-icon {
        background: var(--accent-light);
        color: var(--accent);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
   
      
      /* Middle */
       .section h2 { 
        margin: 0 0 16px; 
        font-size: 1.6rem;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      
       .section p { 
        margin: 0 0 9px; 
      }
       .section ul { 
        margin: 0 0 9px; 
      }
      
      .section-icon {
        background: var(--accent);
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
 
      .grid-2 { 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        gap: 20px; 
      }
      
      .articles { 
        display: grid; 
        gap: 16px; 
      }
      
      .article { 
        border: 1px solid #e1f5fe; 
        border-radius: 12px; 
        padding: 16px;
        background: var(--accent-light);
        transition: all 0.3s ease;
      }
      
      .article:hover {
        border-color: var(--accent);
        transform: translateY(-3px);
        box-shadow: var(--shadow);
      }
      
      .article h4 { 
        margin: 0 0 8px; 
        color: var(--navy);
      }
      
      .article-meta {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 12px;
      }
      
      .article-actions {
        display: flex; 
        gap: 10px; 
        flex-wrap: wrap;
      }
      
      .article-actions .btn {
        padding: 8px 12px;
        font-size: 0.9rem;
      }
      
      .filters { 
        display: flex; 
        gap: 12px; 
        flex-wrap: wrap;
      }
      
      .filters select, .filters input { 
        padding: 10px 14px; 
        border: 1px solid #cfd8dc; 
        border-radius: 30px; 
        background: #fff;
        font-family: inherit;
        transition: all 0.3s ease;
      }
      
      .filters select:focus, .filters input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.2);
      }
      
      /* Right Sidebar */
      .carousel { 
        position: relative; 
        overflow: hidden; 
        height: 280px; 
        border-radius: 12px;
      }
      
      .carousel-track { 
        display: flex; 
        position: absolute; 
        inset: 0; 
        animation: slideX 20s linear infinite;
      }
      
      .carousel img { 
        width: 100%; 
        height: 280px; 
        object-fit: cover; 
        flex: 0 0 100%; 
      }
      
      @keyframes slideX { 
        0% { transform: translateX(0); } 
        100% { transform: translateX(-300%); } 
      }
      
 
      @media (max-width: 600px) { 
        .nav { 
          gap: 4px; 
        } 
        .nav a, .nav .menu { 
          padding: 8px 10px; 
          font-size: 14px;
        }
        .grid-2 {
          grid-template-columns: 1fr;
        }
        .title h1 {
          font-size: 1.6rem;
        }
        .banner-inner {
          gap: 15px;
        }
      }
    
    /*submissionguidelines*/