/* ==========================================================
   JACS | CLEAN FINAL CSS (OJS 3.x)
   Header + Nav + Dropdown + Sidebar + Additional Content + Footer
   (NO SLIDER) ✅ NO DUPLICATION ✅ NO column-count footer
   ========================================================== */

/* =============== 0) VARIABLES ================= */
:root{
  --bg0:#040814;
  --bg1:#071228;
  --bg2:#0b1b34;

  --text:#ffffff;
  --muted:rgba(255,255,255,.75);
  --dim:rgba(255,255,255,.55);

  --line:rgba(255,255,255,.12);

  --accent:#38bdf8;
  --accent2:#22c55e;
  --accent3:#a78bfa;
  --gold:#d4af37;

  --radius:20px;
  --radius2:26px;

  --shadow:0 20px 60px rgba(0,0,0,.35);
  --shadow2:0 34px 110px rgba(0,0,0,.55);
}

html,body{ overflow-x:hidden !important; }

/* ==========================================================
   1) FIX GAP UNDER MENU
   ========================================================== */
.pkp_structure_head{ margin-bottom:0 !important; padding-bottom:0 !important; }
.pkp_structure_head .pkp_head_wrapper{ padding-bottom:0 !important; }
.pkp_navigation_primary_wrapper{ margin-top:0 !important; padding-top:0 !important; padding-bottom:0 !important; }

.pkp_structure_main{ padding-top:10px !important; }

.pkp_page_index .pkp_structure_content,
.pkp_page_index .pkp_page_content{
  margin-top:10px !important;
  padding-top:0 !important;
}

/* ==========================================================
   2) HEADER (PREMIUM)
   ========================================================== */
.pkp_structure_head{
  position: sticky;
  top:0;
  z-index:9999;
  background:transparent !important;
}
.pkp_structure_head, .pkp_structure_head *{ overflow:visible !important; }

.pkp_structure_head .pkp_head_wrapper{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;

  background:
    radial-gradient(900px 480px at 20% -30%, rgba(56,189,248,.16), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(34,197,94,.12), transparent 62%),
    radial-gradient(1000px 560px at 70% 110%, rgba(167,139,250,.12), transparent 55%),
    linear-gradient(180deg,var(--bg1),var(--bg0)) !important;

  border-bottom:1px solid var(--line) !important;
  padding:10px 0 0 !important;
}

.pkp_head_wrapper .pkp_site_name_wrapper{
  width:min(1320px,94%) !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
}

/* hide default text */
.pkp_site_name .is_text{display:none !important;}

/* logo */
.pkp_site_name img{
  width:78px !important;
  height:78px !important;
  object-fit:contain !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.03) !important;
  outline:1px solid rgba(212,175,55,.28) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.55) !important;
  transition:.18s ease;
}
.pkp_site_name a:hover img{
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.06);
}

/* journal title */
.pkp_site_name_wrapper{ position:relative !important; }
.pkp_site_name_wrapper::after{
  content:"Journal of Advanced Computer Science" !important;
  display:block !important;
  color:var(--gold) !important;
  font-size:24px !important;
  font-weight:1000 !important;
  letter-spacing:1px !important;
  font-family:"Montserrat","Poppins","Segoe UI",Arial,sans-serif !important;
  line-height:1.12 !important;
  text-transform: uppercase !important;
  text-shadow:0 2px 12px rgba(0,0,0,.60) !important;
  padding-bottom:18px !important;
}

/* ISSN */
.pkp_site_name_wrapper::before{
  content:"e-ISSN: XXXX-XXXX | p-ISSN: XXXX-XXXX" !important;
  position:absolute !important;
  left:95px !important;
  top:68px !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:1.1px !important;
  color:rgba(212,175,55,.78) !important;
  white-space:nowrap !important;
}

/* ==========================================================
   3) NAVIGATION + WORKING DROPDOWN
   ========================================================== */
.pkp_navigation_primary_wrapper{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;

  background:
    linear-gradient(180deg,rgba(255,255,255,.03),transparent),
    linear-gradient(180deg,var(--bg1),var(--bg0)) !important;

  border-top:1px solid rgba(255,255,255,.08) !important;
  border-bottom:1px solid rgba(0,0,0,.24) !important;
  overflow: visible !important;
}

.pkp_navigation_primary_wrapper .pkp_navigation_primary{
  width:min(1320px,94%) !important;
  margin:0 auto !important;
  padding:10px 0 !important;
  display:flex !important;
  gap:6px !important;
  overflow: visible !important;
  white-space:nowrap !important;
}

.pkp_navigation_primary > li{ position:relative !important; }

.pkp_navigation_primary > li > a{
  color:rgba(255,255,255,.92) !important;
  font-weight:900 !important;
  font-size:12.6px !important;
  padding:9px 12px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.03) !important;
  border:1px solid transparent !important;
  transition:.16s ease;
}
.pkp_navigation_primary > li > a:hover{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(56,189,248,.28) !important;
  transform:translateY(-1px);
}

/* dropdown */
.pkp_navigation_primary li ul{
  display:none !important;
  position:absolute !important;
  top: calc(100% + 8px) !important;
  left:0 !important;
  min-width:230px !important;

  background:rgba(7,18,40,.97) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;

  padding:10px 8px !important;
  box-shadow:0 22px 60px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(12px);
  z-index:99999 !important;
}
.pkp_navigation_primary li:hover > ul,
.pkp_navigation_primary li:focus-within > ul{ display:block !important; }

.pkp_navigation_primary li ul a{
  display:block !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  font-weight:900 !important;
  color:rgba(255,255,255,.84) !important;
  white-space: normal !important;
}
.pkp_navigation_primary li ul a:hover{
  background:rgba(255,255,255,.09) !important;
  color:rgba(255,255,255,.98) !important;
}

/* ==========================================================
   4) SIDEBAR BLOCKS
   ========================================================== */
.pkp_block{
  border-radius: var(--radius2) !important;
  overflow:hidden !important;
  border:1px solid rgba(0,0,0,.08) !important;
  background: #ffffff !important;
  box-shadow:0 22px 70px rgba(0,0,0,.12) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pkp_block:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow:0 35px 100px rgba(0,0,0,.18) !important;
  border-color: rgba(56,189,248,.25) !important;
}
.pkp_block .title{
  font-weight:1000 !important;
  font-size:14px !important;
  color:#071228 !important;
  padding:14px 16px !important;
  border-bottom:1px solid rgba(0,0,0,.06) !important;
  background:
    radial-gradient(600px 160px at 15% 0%, rgba(56,189,248,.14), transparent 60%),
    radial-gradient(600px 160px at 80% 10%, rgba(212,175,55,.12), transparent 65%),
    linear-gradient(180deg, rgba(7,18,40,.04), rgba(255,255,255,1)) !important;
}

/* ==========================================================
   5) ADDITIONAL CONTENT (FOOTER STYLE ✅)
   ========================================================== */
.pkp_page_index .additional_content{
  background:
    radial-gradient(900px 420px at 12% 20%, rgba(56,189,248,.18), transparent 65%),
    radial-gradient(900px 460px at 85% 18%, rgba(212,175,55,.14), transparent 70%),
    radial-gradient(850px 440px at 55% 120%, rgba(34,197,94,.11), transparent 72%),
    linear-gradient(180deg, #061427, #030711) !important;

  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:34px !important;
  box-shadow:0 28px 95px rgba(0,0,0,.45) !important;
  padding:0 !important;
  margin-top:18px !important;
  position:relative !important;
  overflow:hidden !important;
}

.pkp_page_index .additional_content::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:4px;
  background: linear-gradient(90deg,#38bdf8,#d4af37,#22c55e,#a78bfa);
  background-size:300% 100%;
  animation: footerLineMove 6s linear infinite;
  z-index:2;
}

.pkp_page_index .additional_content > *{
  position:relative !important;
  z-index:3 !important;
  padding:34px 34px 30px !important;
}

.pkp_page_index .additional_content h2,
.pkp_page_index .additional_content h3{
  font-weight:1000 !important;
  color:#fff !important;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}

.pkp_page_index .additional_content p{
  font-size:15px !important;
  line-height:1.95 !important;
  color: rgba(255,255,255,.80) !important;
  font-weight:700;
}

.pkp_page_index .additional_content a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:11px 16px !important;
  margin:10px 10px 0 0 !important;
  border-radius:16px !important;
  text-decoration:none !important;
  font-size:13.2px !important;
  font-weight:1000 !important;

  background: rgba(255,255,255,.06) !important;
  border:1px solid rgba(212,175,55,.22) !important;
  color:rgba(255,255,255,.92) !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:.18s ease;
}
.pkp_page_index .additional_content a:hover{
  transform: translateY(-3px);
  background: rgba(56,189,248,.10) !important;
  border-color: rgba(56,189,248,.35) !important;
  box-shadow:0 18px 55px rgba(0,0,0,.35) !important;
}

/* ==========================================================
   6) FOOTER (HTML Cards ✅ FINAL)
   ========================================================== */
.pkp_structure_footer_wrapper,
.pkp_structure_footer{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.pkp_structure_footer{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;

  position:relative !important;
  overflow:hidden !important;
  border-top:1px solid rgba(255,255,255,.10) !important;

  background:
    radial-gradient(1100px 560px at 12% 20%, rgba(56,189,248,.16), transparent 65%),
    radial-gradient(1100px 600px at 85% 18%, rgba(212,175,55,.12), transparent 70%),
    radial-gradient(1000px 560px at 55% 120%, rgba(34,197,94,.10), transparent 72%),
    linear-gradient(180deg,#061427,#030711) !important;
}

/* animated top line */
.pkp_structure_footer::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background: linear-gradient(90deg,#38bdf8,#d4af37,#22c55e,#a78bfa);
  background-size:300% 100%;
  animation: footerLineMove 6s linear infinite;
  z-index:1;
}

/* footer container */
.pkp_structure_footer .pkp_footer_content{
  width:min(1320px,94%) !important;
  margin:0 auto !important;
  padding:55px 0 28px !important;
  position:relative !important;
  z-index:2 !important;
  background:transparent !important;

  display:block !important;
  column-count: initial !important;
  column-gap: initial !important;
  column-rule: none !important;
}

/* floating animation */
@keyframes floatCard{
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}

/* Cards */
.pkp_structure_footer .jacsFooter{ width:100% !important; }

.pkp_structure_footer .jacsFooter__grid{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}

@media(max-width:1100px){
  .pkp_structure_footer .jacsFooter__grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
}
@media(max-width:560px){
  .pkp_structure_footer .jacsFooter__grid{
    grid-template-columns:1fr !important;
  }
}

.pkp_structure_footer .jacsFooter__card{
  min-width:0 !important;
  border-radius:28px !important;
  padding:20px 20px 18px !important;

  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.13) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 22px 70px rgba(0,0,0,.35);
  overflow:hidden !important;
  position:relative !important;
  min-height:260px;

  animation: floatCard 6s ease-in-out infinite;
}

.pkp_structure_footer .jacsFooter__card:nth-child(2){ animation-delay:.7s; }
.pkp_structure_footer .jacsFooter__card:nth-child(3){ animation-delay:1.4s; }
.pkp_structure_footer .jacsFooter__card:nth-child(4){ animation-delay:2.1s; }

.pkp_structure_footer .jacsFooter__card:hover{
  transform: translateY(-14px) scale(1.02) !important;
  border-color: rgba(212,175,55,.26) !important;
  box-shadow: 0 38px 110px rgba(0,0,0,.55) !important;
}

.pkp_structure_footer .jacsFooter__card h3{
  margin:0 0 12px !important;
  font-weight:1000 !important;
  font-size:14px !important;
  color:#fff !important;
  position:relative;
  padding-bottom:10px;
}

.pkp_structure_footer .jacsFooter__card h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:74px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,#38bdf8,#d4af37,#22c55e);
  background-size:200% 100%;
  animation: headLine 4s linear infinite;
}
@keyframes headLine{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

.pkp_structure_footer .jacsFooter__card p{
  margin:0 0 12px !important;
  color: rgba(255,255,255,.78) !important;
  line-height:1.8 !important;
  font-weight:700;
}

.pkp_structure_footer .jacsFooter__card ul{
  margin: 12px 0 0 !important;
  padding-left: 18px !important;
}
.pkp_structure_footer .jacsFooter__card li{
  margin: 7px 0 !important;
  font-weight:900;
  color: rgba(255,255,255,.86);
}

.pkp_structure_footer .jacsFooter__card a{
  color: rgba(255,255,255,.80) !important;
  font-weight:900 !important;
  text-decoration:none !important;
  transition:.2s ease;
}
.pkp_structure_footer .jacsFooter__card a:hover{
  color:#fff !important;
  padding-left:6px;
}

.pkp_structure_footer .jacsFooter__bottom{
  margin-top:18px !important;
  padding-top:18px !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  text-align:center !important;
  font-size:12px !important;
  font-weight:900;
  color: rgba(255,255,255,.65);
  letter-spacing:.2px;
}

/* reduce motion */
@media(prefers-reduced-motion: reduce){
  .pkp_structure_footer::after,
  .pkp_structure_footer .jacsFooter__card,
  .pkp_page_index .additional_content::before{
    animation:none !important;
    transition:none !important;
  }
}
/* ==========================================================
   JACS ADDITIONAL CONTENT (6 CARDS) ✅ FOOTER STYLE
   ========================================================== */

.pkp_page_index .additional_content{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* main wrapper */
.jacsAdd{
  border-radius:34px;
  padding:36px 32px 34px;
  overflow:hidden;
  position:relative;

  background:
    radial-gradient(900px 420px at 12% 20%, rgba(56,189,248,.18), transparent 65%),
    radial-gradient(900px 460px at 85% 18%, rgba(212,175,55,.14), transparent 70%),
    radial-gradient(850px 440px at 55% 120%, rgba(34,197,94,.11), transparent 72%),
    linear-gradient(180deg,#061427,#030711);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 95px rgba(0,0,0,.45);
}

/* top animated line */
.jacsAdd::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background:linear-gradient(90deg,#38bdf8,#d4af37,#22c55e,#a78bfa);
  background-size:300% 100%;
  animation:jacsLine 6s linear infinite;
}
@keyframes jacsLine{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

.jacsAdd__title{
  margin:0 0 8px !important;
  font-size:22px !important;
  font-weight:1000 !important;
  color:#fff !important;
}
.jacsAdd__subtitle{
  margin:0 0 24px !important;
  font-size:14px !important;
  line-height:1.8 !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.78) !important;
  max-width:850px;
}

/* grid cards */
.jacsAdd__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}

@media(max-width:1100px){
  .jacsAdd__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(max-width:560px){
  .jacsAdd__grid{ grid-template-columns:1fr; }
}

/* card */
.jacsAdd__card{
  border-radius:26px;
  padding:18px 18px 16px;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  box-shadow:0 18px 60px rgba(0,0,0,.35);
  transition:.2s ease;
  overflow:hidden;
}

.jacsAdd__card:hover{
  transform:translateY(-10px) scale(1.02);
  border-color:rgba(212,175,55,.28);
  box-shadow:0 36px 110px rgba(0,0,0,.55);
}

.jacsAdd__icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;

  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-size:20px;
  margin-bottom:12px;
}

.jacsAdd__card h3{
  margin:0 0 8px !important;
  font-weight:1000 !important;
  font-size:14px !important;
  color:#fff !important;
}

.jacsAdd__card p{
  margin:0 0 14px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.78) !important;
  line-height:1.75 !important;
  font-size:13.2px !important;
}

/* button */
.jacsAdd__card a{
  display:inline-flex;
  padding:10px 14px;
  border-radius:14px;
  font-weight:1000;
  font-size:12.5px;
  text-decoration:none;

  color:#fff !important;
  background:rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.28);

  transition:.18s ease;
}

.jacsAdd__card a:hover{
  background:rgba(212,175,55,.12);
  border-color:rgba(212,175,55,.35);
  transform:translateY(-2px);
}
/* ==========================================================
   JACS ADDITIONAL CONTENT (ULTRA PREMIUM) ✅
   - Colors same as footer
   - Glow / Glass / Animated Lines / Floating Cards
   ========================================================== */

/* remove default additional_content style */
.pkp_page_index .additional_content{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* main block */
.jacsHero{
  position:relative;
  overflow:hidden;
  border-radius:36px;
  padding:44px 38px 40px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 110px rgba(0,0,0,.55);

  background:
    radial-gradient(1000px 520px at 12% 20%, rgba(56,189,248,.18), transparent 66%),
    radial-gradient(1000px 560px at 88% 18%, rgba(212,175,55,.14), transparent 70%),
    radial-gradient(1000px 520px at 55% 120%, rgba(34,197,94,.11), transparent 72%),
    linear-gradient(180deg,#061427,#030711);
}

/* animated top gradient line */
.jacsHero::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background:linear-gradient(90deg,#38bdf8,#d4af37,#22c55e,#a78bfa);
  background-size:320% 100%;
  animation:jacsLineMove 6s linear infinite;
  z-index:1;
}
@keyframes jacsLineMove{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

/* animated grid overlay */
.jacsHero::after{
  content:"";
  position:absolute;
  inset:-240px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 90px);
  mask-image: radial-gradient(circle at 45% 30%, #000 45%, transparent 78%);
  opacity:.16;
  animation: jacsGridMove 14s linear infinite;
  pointer-events:none;
  z-index:1;
}
@keyframes jacsGridMove{
  0%{ transform: translate(0,0); }
  50%{ transform: translate(-16px, 10px); }
  100%{ transform: translate(0,0); }
}

/* ensure content on top */
.jacsHero > *{
  position:relative;
  z-index:2;
}

/* header */
.jacsHero__head h2{
  margin:0 0 12px !important;
  font-size:26px !important;
  font-weight:1000 !important;
  color:#fff !important;
  letter-spacing:.3px;
  text-shadow:0 16px 40px rgba(0,0,0,.55);
}

/* animated underline under title */
.jacsHero__head h2::after{
  content:"";
  display:block;
  margin-top:12px;
  width:110px;
  height:4px;
  border-radius:99px;
  background:linear-gradient(90deg,#38bdf8,#d4af37,#22c55e);
  background-size:220% 100%;
  animation:jacsUnderline 4s linear infinite;
}
@keyframes jacsUnderline{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

.jacsHero__head p{
  margin:0 0 26px !important;
  max-width:820px;
  font-size:14.5px !important;
  line-height:1.9 !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.78) !important;
}

/* grid 6 cards */
.jacsHero__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
@media(max-width:1100px){
  .jacsHero__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(max-width:560px){
  .jacsHero__grid{ grid-template-columns:1fr; }
}

/* floating animation */
@keyframes jacsFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}

/* card style */
.jacsHero__card{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  padding:18px 18px 16px;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow:0 20px 80px rgba(0,0,0,.38);
  transition:.22s ease;

  animation:jacsFloat 6s ease-in-out infinite;
}

.jacsHero__card:nth-child(2){ animation-delay:.6s; }
.jacsHero__card:nth-child(3){ animation-delay:1.2s; }
.jacsHero__card:nth-child(4){ animation-delay:1.8s; }
.jacsHero__card:nth-child(5){ animation-delay:2.4s; }
.jacsHero__card:nth-child(6){ animation-delay:3s; }

/* glow bubble inside card */
.jacsHero__card::before{
  content:"";
  position:absolute;
  inset:-130px;
  background:
    radial-gradient(circle at 20% 20%, rgba(56,189,248,.18), transparent 62%),
    radial-gradient(circle at 80% 25%, rgba(212,175,55,.13), transparent 70%),
    radial-gradient(circle at 50% 120%, rgba(34,197,94,.10), transparent 72%);
  filter: blur(35px);
  opacity:.65;
  transition:.25s ease;
}

/* hover */
.jacsHero__card:hover{
  transform:translateY(-14px) scale(1.03);
  border-color:rgba(212,175,55,.28);
  box-shadow:0 42px 140px rgba(0,0,0,.65);
}
.jacsHero__card:hover::before{
  opacity:.95;
}

/* icon */
.jacsHero__icon{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;

  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-size:20px;

  box-shadow:0 18px 55px rgba(0,0,0,.35);
  margin-bottom:12px;
}

/* titles */
.jacsHero__card h3{
  margin:0 0 8px !important;
  color:#fff !important;
  font-weight:1000 !important;
  font-size:14px !important;
  letter-spacing:.25px;
  position:relative;
  padding-bottom:10px;
}

/* animated tiny underline under card title */
.jacsHero__card h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:62px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,#38bdf8,#d4af37,#22c55e);
  background-size:200% 100%;
  animation:jacsUnderline 4s linear infinite;
  opacity:.9;
}

.jacsHero__card p{
  margin:0 0 14px !important;
  color:rgba(255,255,255,.78) !important;
  font-weight:700;
  font-size:13.2px !important;
  line-height:1.75 !important;
}

/* button */
.jacsHero__card a{
  display:inline-flex;
  padding:10px 14px;
  border-radius:14px;
  font-weight:1000;
  font-size:12.5px;
  text-decoration:none;

  color:#fff !important;
  background:rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.28);
  transition:.18s ease;
}

.jacsHero__card a:hover{
  background:rgba(212,175,55,.12);
  border-color:rgba(212,175,55,.35);
  transform:translateY(-2px);
}

/* reduced motion */
@media(prefers-reduced-motion: reduce){
  .jacsHero::before,
  .jacsHero::after,
  .jacsHero__card,
  .jacsHero__head h2::after,
  .jacsHero__card h3::after{
    animation:none !important;
    transition:none !important;
  }
}
/* ==========================================================
   JACS ADDITIONAL CONTENT (ULTRA PREMIUM) ✅
   - Colors same as footer
   - Glow / Glass / Animated Lines / Floating Cards
   ========================================================== */

/* remove default additional_content style */
.pkp_page_index .additional_content{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* main block */
.jacsHero{
  position:relative;
  overflow:hidden;
  border-radius:36px;
  padding:44px 38px 40px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 110px rgba(0,0,0,.55);

  background:
    radial-gradient(1000px 520px at 12% 20%, rgba(56,189,248,.18), transparent 66%),
    radial-gradient(1000px 560px at 88% 18%, rgba(212,175,55,.14), transparent 70%),
    radial-gradient(1000px 520px at 55% 120%, rgba(34,197,94,.11), transparent 72%),
    linear-gradient(180deg,#061427,#030711);
}

/* animated top gradient line */
.jacsHero::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background:linear-gradient(90deg,#38bdf8,#d4af37,#22c55e,#a78bfa);
  background-size:320% 100%;
  animation:jacsLineMove 6s linear infinite;
  z-index:1;
}
@keyframes jacsLineMove{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

/* animated grid overlay */
.jacsHero::after{
  content:"";
  position:absolute;
  inset:-240px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 90px);
  mask-image: radial-gradient(circle at 45% 30%, #000 45%, transparent 78%);
  opacity:.16;
  animation: jacsGridMove 14s linear infinite;
  pointer-events:none;
  z-index:1;
}
@keyframes jacsGridMove{
  0%{ transform: translate(0,0); }
  50%{ transform: translate(-16px, 10px); }
  100%{ transform: translate(0,0); }
}

/* ensure content on top */
.jacsHero > *{
  position:relative;
  z-index:2;
}

/* header */
.jacsHero__head h2{
  margin:0 0 12px !important;
  font-size:26px !important;
  font-weight:1000 !important;
  color:#fff !important;
  letter-spacing:.3px;
  text-shadow:0 16px 40px rgba(0,0,0,.55);
}

/* animated underline under title */
.jacsHero__head h2::after{
  content:"";
  display:block;
  margin-top:12px;
  width:110px;
  height:4px;
  border-radius:99px;
  background:linear-gradient(90deg,#38bdf8,#d4af37,#22c55e);
  background-size:220% 100%;
  animation:jacsUnderline 4s linear infinite;
}
@keyframes jacsUnderline{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

.jacsHero__head p{
  margin:0 0 26px !important;
  max-width:820px;
  font-size:14.5px !important;
  line-height:1.9 !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.78) !important;
}

/* grid 6 cards */
.jacsHero__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
@media(max-width:1100px){
  .jacsHero__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(max-width:560px){
  .jacsHero__grid{ grid-template-columns:1fr; }
}

/* floating animation */
@keyframes jacsFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}

/* card style */
.jacsHero__card{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  padding:18px 18px 16px;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow:0 20px 80px rgba(0,0,0,.38);
  transition:.22s ease;

  animation:jacsFloat 6s ease-in-out infinite;
}

.jacsHero__card:nth-child(2){ animation-delay:.6s; }
.jacsHero__card:nth-child(3){ animation-delay:1.2s; }
.jacsHero__card:nth-child(4){ animation-delay:1.8s; }
.jacsHero__card:nth-child(5){ animation-delay:2.4s; }
.jacsHero__card:nth-child(6){ animation-delay:3s; }

/* glow bubble inside card */
.jacsHero__card::before{
  content:"";
  position:absolute;
  inset:-130px;
  background:
    radial-gradient(circle at 20% 20%, rgba(56,189,248,.18), transparent 62%),
    radial-gradient(circle at 80% 25%, rgba(212,175,55,.13), transparent 70%),
    radial-gradient(circle at 50% 120%, rgba(34,197,94,.10), transparent 72%);
  filter: blur(35px);
  opacity:.65;
  transition:.25s ease;
}

/* hover */
.jacsHero__card:hover{
  transform:translateY(-14px) scale(1.03);
  border-color:rgba(212,175,55,.28);
  box-shadow:0 42px 140px rgba(0,0,0,.65);
}
.jacsHero__card:hover::before{
  opacity:.95;
}

/* icon */
.jacsHero__icon{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;

  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-size:20px;

  box-shadow:0 18px 55px rgba(0,0,0,.35);
  margin-bottom:12px;
}

/* titles */
.jacsHero__card h3{
  margin:0 0 8px !important;
  color:#fff !important;
  font-weight:1000 !important;
  font-size:14px !important;
  letter-spacing:.25px;
  position:relative;
  padding-bottom:10px;
}

/* animated tiny underline under card title */
.jacsHero__card h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:62px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,#38bdf8,#d4af37,#22c55e);
  background-size:200% 100%;
  animation:jacsUnderline 4s linear infinite;
  opacity:.9;
}

.jacsHero__card p{
  margin:0 0 14px !important;
  color:rgba(255,255,255,.78) !important;
  font-weight:700;
  font-size:13.2px !important;
  line-height:1.75 !important;
}

/* button */
.jacsHero__card a{
  display:inline-flex;
  padding:10px 14px;
  border-radius:14px;
  font-weight:1000;
  font-size:12.5px;
  text-decoration:none;

  color:#fff !important;
  background:rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.28);
  transition:.18s ease;
}

.jacsHero__card a:hover{
  background:rgba(212,175,55,.12);
  border-color:rgba(212,175,55,.35);
  transform:translateY(-2px);
}

/* reduced motion */
@media(prefers-reduced-motion: reduce){
  .jacsHero::before,
  .jacsHero::after,
  .jacsHero__card,
  .jacsHero__head h2::after,
  .jacsHero__card h3::after{
    animation:none !important;
    transition:none !important;
  }
}

/* ==========================================================
   JACS | Animated underline under journal NAME only
   (NOT under the logo image)
   ========================================================== */

/* 1) نتأكد ماكو خط تحت صورة اللوكو */
.pkp_site_name a img,
.pkp_site_name img{
  position: relative !important;
}
.pkp_site_name a img::after,
.pkp_site_name img::after{
  content: none !important;
}

/* 2) استهداف النص فقط (اسم المجلة) */
.pkp_site_name .is_text{
  position: relative;
  display: inline-block;
  padding-bottom: 10px; /* مساحة للخط */
}

/* 3) الخط المتحرك تحت النص */
.pkp_site_name .is_text::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  border-radius:999px;

  background: linear-gradient(90deg,
    #d4af37,
    #38bdf8,
    #22c55e,
    #a78bfa,
    #d4af37
  );
  background-size: 300% 100%;
  animation: jacsLineMove 3.5s linear infinite;

  box-shadow: 0 0 10px rgba(212,175,55,.35),
              0 0 18px rgba(56,189,248,.25);
}

/* Animation */
@keyframes jacsLineMove{
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Reduce Motion support */
@media (prefers-reduced-motion: reduce){
  .pkp_site_name .is_text::after{
    animation: none;
    background-size: 100% 100%;
  }
}