/* =========================================================
   DMR Global Website Theme
   ICAR–Directorate of Mushroom Research, Solan
   Add this stylesheet to every existing HTML page:
   <link rel="stylesheet" href="/assets/css/dmr-global-theme.css">
   ========================================================= */

:root{
  --dmr-navy:#07507a;
  --dmr-navy-dark:#063b5c;
  --dmr-blue:#0b6696;
  --dmr-green:#176b45;
  --dmr-gold:#e1a900;
  --dmr-light:#f4f8fa;
  --dmr-border:#d6e0e5;
  --dmr-text:#24313a;
  --dmr-max:1320px;
}

/* Global page frame */
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--dmr-text);
  background:#eef2f4;
  line-height:1.55;
}
.site{
  max-width:var(--dmr-max);
  margin:0 auto;
  background:#fff;
  box-shadow:0 2px 18px #0002;
}

/* Government utility bar */
.utility{
  background:linear-gradient(90deg,#07507a,#063b5c);
  color:#fff;
  min-height:54px;
  padding:7px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}
.utility a{color:#fff}
.utility-goi{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#fff!important;
  text-decoration:none!important;
}
.utility-goi img{height:36px;width:auto;filter:brightness(0) invert(1)}
.utility-goi span{font-size:.78rem;line-height:1.1}
.utility-goi b{font-size:.9rem}

/* Institutional identity */
.identity-area{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  background:#fff;
  padding:9px 38px 10px;
  min-height:128px;
  border-bottom:1px solid #d9e1e5;
}
.identity-left{display:flex;align-items:center;gap:18px;min-width:0}
.icar-logo img{height:100px;width:auto;max-width:135px;object-fit:contain}
.identity-title{text-align:left;color:var(--dmr-navy-dark);line-height:1.16}
.identity-title strong{display:block;font-size:1.55rem;font-weight:800;white-space:nowrap}
.identity-title span{display:block;font-size:1.08rem;color:var(--dmr-green);font-weight:700;margin-top:5px}
.identity-title small{display:block;font-size:.92rem;color:#333;margin-top:6px}

/* Search + social */
.header-tools{display:flex;align-items:center;gap:12px}
.header-search{display:flex;height:42px;margin:0}
.header-search input{
  width:250px;border:1px solid #cbd8df;padding:8px 13px;
  font-size:.95rem;outline:none
}
.header-search input:focus{border-color:var(--dmr-blue);box-shadow:0 0 0 2px #0b669622}
.header-search button{
  width:50px;border:0;background:var(--dmr-navy);color:#fff;
  font-size:1.2rem;cursor:pointer
}
.social-links{display:flex;align-items:center;gap:8px}
.social-links a{
  width:38px;height:38px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:#fff;
  text-decoration:none;font-weight:700
}
.social-fb{background:#1877f2}.social-x{background:#111}
.social-yt{background:#e62117}.social-ig{background:#d62976}

/* Navigation: reference-image style */
nav{
  background:linear-gradient(90deg,#07507a,#063b5c);
  color:#fff;
  border-bottom:5px solid var(--dmr-gold);
}
.nav-list{
  max-width:100%;
  margin:0;
  padding:0 22px;
  display:flex;
  align-items:stretch;
  flex-wrap:nowrap;
  list-style:none;
}
.nav-list>li{position:relative}
.nav-list>li>a,
.nav-list>li>button{
  min-height:61px;
  display:flex;
  align-items:center;
  gap:4px;
  border:0;
  background:none;
  color:#fff;
  text-decoration:none;
  padding:0 18px;
  font-weight:700;
  font-size:.93rem;
  cursor:pointer;
}
.nav-list>li:first-child>a{
  min-width:76px;
  justify-content:center;
  background:#06466a;
  font-size:1.3rem;
}
.nav-list>li>a:hover,
.nav-list>li>button:hover,
.nav-list>li:focus-within>a,
.nav-list>li:focus-within>button{background:#0b6089}
.nav-list ul{
  display:none;
  position:absolute;
  z-index:100;
  top:61px;
  left:0;
  min-width:250px;
  background:#fff;
  border:1px solid #b8c8d1;
  box-shadow:0 7px 18px #0003;
  margin:0;
  padding:5px 0;
  list-style:none;
}
.nav-list li:hover>ul,.nav-list li:focus-within>ul{display:block}
.nav-list ul li a{
  display:block;
  padding:9px 14px;
  color:#17333f;
  text-decoration:none;
  font-size:.9rem;
}
.nav-list ul li a:hover{background:#eaf6fb;color:#07507a}

/* Hero / banner */
.hero{
  position:relative;
  background:#c6d4dc;
  min-height:350px;
  overflow:hidden;
  border-bottom:1px solid var(--dmr-border);
}
.hero figure{margin:0;display:none;height:350px}
.hero figure.active{display:block}
.hero img{
  display:block;
  width:100%;
  height:350px;
  object-fit:cover;
  object-position:center;
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.35) 32%,rgba(255,255,255,0) 58%);
}
.hero-caption{
  position:absolute;
  z-index:3;
  left:7%;
  right:auto;
  bottom:62px;
  max-width:510px;
  background:none;
  color:var(--dmr-navy-dark);
  padding:0;
  font-size:2.1rem;
  line-height:1.18;
  font-weight:800;
}
.hero-caption:after{
  content:"Know More  →";
  display:block;
  width:max-content;
  margin-top:22px;
  padding:13px 27px;
  border-radius:28px;
  background:#08659a;
  color:#fff;
  font-size:.98rem;
  font-weight:700;
}
.hero-controls{
  position:absolute;
  z-index:5;
  inset:0;
  pointer-events:none;
}
.hero-controls button{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  pointer-events:auto;
  width:43px;height:43px;
  border:0;
  border-radius:50%;
  background:#26343dcc;
  color:#fff;
  font-size:1.7rem;
  cursor:pointer;
}
.hero-controls button:first-child{left:22px}
.hero-controls button:last-child{right:22px}
.hero-controls #pause{
  left:50%;
  top:auto;
  bottom:16px;
  transform:translateX(-50%);
  width:auto;height:auto;
  border-radius:15px;
  padding:4px 11px;
  font-size:.72rem;
}

/* Important-links / latest updates ticker */
.noticebar{
  background:#fff;
  border:1px solid #e0e5e8;
  margin:14px 24px;
  padding:0;
  min-height:60px;
  display:flex;
  gap:0;
  align-items:stretch;
  overflow:hidden;
  box-shadow:0 2px 7px #0001;
}
.noticebar strong{
  display:flex;
  align-items:center;
  white-space:nowrap;
  color:#fff;
  background:var(--dmr-gold);
  padding:0 28px;
  font-size:1rem;
}
.notice-scroll{
  overflow:hidden;
  white-space:nowrap;
  display:flex;
  align-items:center;
  padding-left:20px;
}
.notice-scroll a{
  margin-right:30px;
  color:#124a72;
  text-decoration:none;
  font-weight:600;
}
.notice-scroll a:before{
  content:"▸";
  color:var(--dmr-gold);
  margin-right:7px;
}

/* Content cards to carry same visual language */
.section{padding:20px 28px}
.section-title{
  margin:0 0 15px;
  padding:10px 14px;
  border-left:0;
  background:transparent;
  color:var(--dmr-navy-dark);
  font-size:1.25rem;
  font-weight:800;
}
.grid{gap:18px}
.feature,.card{
  border:1px solid #e0e7eb;
  background:#fff;
  border-radius:7px;
  padding:18px;
  box-shadow:0 2px 8px #0000000d;
}
.feature:hover,.card:hover{box-shadow:0 5px 15px #0002;transform:translateY(-1px);transition:.18s}
.feature h3,.card h3{color:var(--dmr-navy-dark)}
.feature .icon{font-size:2rem}

/* Accessibility */
.skip:focus{left:10px;top:10px;background:#fff;padding:10px;z-index:9999}

/* Mobile */
@media(max-width:1000px){
  .identity-area{padding:9px 18px;gap:15px}
  .icar-logo img{height:78px;max-width:105px}
  .identity-title strong{font-size:1.2rem}
  .identity-title span{font-size:.88rem}
  .identity-title small{font-size:.75rem}
  .header-search input{width:165px}
  .nav-list>li>a,.nav-list>li>button{padding:0 11px;font-size:.82rem}
}
@media(max-width:760px){
  .utility{display:block;padding:7px 12px}
  .utility span{display:block;margin:2px 0}
  .identity-area{padding:9px 12px}
  .identity-left{gap:9px}
  .icar-logo img{height:60px;max-width:82px}
  .identity-title strong{font-size:1rem;white-space:normal}
  .identity-title span{font-size:.72rem}
  .identity-title small{font-size:.65rem}
  .header-tools{display:none}
  .nav-toggle{display:block;width:100%;padding:13px 15px;background:#07507a;color:#fff;border:0;text-align:left;font-weight:700}
  .nav-list{display:none;flex-direction:column;padding:0}
  .nav-list.open{display:flex}
  .nav-list>li>a,.nav-list>li>button{min-height:44px;padding:0 15px}
  .nav-list>li:first-child>a{min-width:auto;justify-content:flex-start}
  .nav-list ul{position:static;box-shadow:none;border:0;background:#082f45;padding-left:15px}
  .nav-list ul li a{color:#fff}
  .nav-list li:hover>ul,.nav-list li:focus-within>ul{display:none}
  .nav-list li.open>ul{display:block}
  .hero,.hero figure,.hero img{min-height:230px;height:230px}
  .hero-caption{left:25px;bottom:42px;max-width:70%;font-size:1.25rem}
  .hero-caption:after{margin-top:12px;padding:9px 17px;font-size:.8rem}
  .hero-controls button:first-child{left:10px}
  .hero-controls button:last-child{right:10px}
  .noticebar{margin:10px 12px;display:block}
  .noticebar strong{padding:11px 15px}
  .notice-scroll{padding:10px 15px;overflow:auto}
  .section{padding:15px 12px}
}