: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, h3, h4, h5, h6 {
        font-family: 'Playfair Display', serif;
        font-weight: 500;
        color: black;
      }
      
      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 {
        width: 100%; 
        aspect-ratio: 1/1; 
        border-radius: 16px; 
        background: #fff;
        display: grid; 
        place-items: center; 
        color: var(--navy);
        font-weight: 700; 
        box-shadow: var(--shadow);
        font-size: 1.5rem;
        transition: all 0.3s ease;
      }
      
      .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: .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; 
      }
     /* 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: 20px;
        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 h3 { 
        margin: 0 0 16px; 
       
        display: flex;
        align-items: center;
        gap: 10px;
      }
      
      .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: 20px; 
      }
      .notice-track {
  overflow: hidden;
  height: 320px; /* adjust */
  position: relative;
}

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

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

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

      
      /* Middle */
      
      .section { 
        margin-bottom: 10px; 
      }
      
      .section h2 { 
        margin: 0 0 16px; 
        font-size: 1.6rem;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      
      .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-meta .mini {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      
      .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: 0.9rem;
        }
        .grid-2 {
          grid-template-columns: 1fr;
        }
        .title h1 {
          font-size: 1.6rem;
        }
        .banner-inner {
          gap: 15px;
        }
      }
    .par p{
        margin:0px;
        
    }
      /*: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);*/
      /*}*/
      
     
      
      h1, h2, h3, h4, h5, h6 {
        font-family: 'Playfair Display', serif;
        font-weight: 500;
        color: black;
      }
      
      a { color: var(--accent); text-decoration: none; transition: all 0.3s ease; }
      a:hover { color: var(--accent-700); }
      
      .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;
      }
      
      .logo {
        width: 100%; 
        aspect-ratio: 1/1; 
        border-radius: 70%; 
        background: #fff;
        display: grid; 
        place-items: center; 
        color: var(--navy);
        font-weight: 700; 
        box-shadow: var(--shadow);
        font-size: 1.5rem;
        transition: all 0.3s ease;
      }
      
      .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: .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: 20px;
        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 h3 { 
        margin: 0 0 16px; 
        
        display: flex;
        align-items: center;
        gap: 10px;
      }
      
      .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: 20px; 
      }
      .notice-track {
  overflow: hidden;
  height: 320px; /* adjust */
  position: relative;
}

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

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

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

      
      /* Middle */
     
      .section h2 { 
        margin: 0 0 16px; 
        font-size: 1.6rem;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      
      .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-meta .mini {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      
      .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%); } 
      }
      
 
      .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: 0.9rem;
        }
        .grid-2 {
          grid-template-columns: 1fr;
        }
        .title h1 {
          font-size: 1.6rem;
        }
        .banner-inner {
          gap: 15px;
        }
      }