@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
body{ font-family: "Inter", sans-serif !important;    background-color: #f3fbf4 !important;}
h1,h2,h3,h4{ font-family: "Plus Jakarta Sans", sans-serif;font-weight:800;line-height:1.14;letter-spacing:-.02em}


/* ---------- intro section ---------- */
.intro {
    padding: 88px 0px 20px 0px;margin:0 auto;
    background-color: #f3fbf4;
}
.intro .lead {
    max-width: 800px;
    margin: 0 auto 64px;
    text-align: center;
}
.intro .lead p {
    font-family: var(--disp);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: -.01em;
}
.hl-g {
    color: #12a95c;
}
.feat {
text-align: center;
background: #fff;
border: 2px solid #d5e8dc;
border-radius: 20px;
padding: 34px 24px;
transition: .2s;}
.feat .ic {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
}
.feat h3 {
    font-size: 1.12rem;
    font-weight: 800;
}
.feat p {
    font-size: .86rem;
    color: #46594e;
    margin-top: 7px;
}
.feat .ic svg {
    width: 30px;
    height: 30px;
}
.feat.ic svg {
    stroke: #12a95c;
}
.feat .ic {
    background: #d6f4e2;
}
.second-feat .ic svg {
    stroke: #ff5a3c;
}
.second-feat .ic{background-color: #ffe2db;}
.third-feat .ic svg {
    stroke: #f2a900;
}
.third-feat .ic{background-color: #fff1cc;}

.forth-feat .ic{background-color: #d6f4e2;}
.forth-feat .ic svg {
    stroke: #12a95c;
}
.feat:hover {
    transform: translateY(-7px);
    border-color: transparent;
    box-shadow: 0 24px 44px -26px rgba(18, 169, 92, .5);
}
/*** CTA ***/
.cta {
    background: linear-gradient(120deg, #ff5a3c, #ffc233);
    color: #fff;
    padding: 30px 0px;
    text-align: center;
    }
.cta h2 {
    font-size: 30px;font-weight: 800;
    color: #fff;
    max-width: 22ch;
    margin: 0 auto 28px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .12);
}

.btn-green {
    background: #12a95c !important;
    color: #fff !important;
    font-weight: 700 !IMPORTANT;
    font-size: 14px !IMPORTANT;
    padding: 10px !IMPORTANT;
    border-radius: 10px !IMPORTANT;
    box-shadow: 0 8px 20px -8px rgba(18, 169, 92, .6);
}
 /* ---------- Quote banner ---------- */
  .quote{position: relative;color:#fff;overflow:hidden;text-align: center;padding: 60px 250px;}
  .quote img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .quote::after{content:"";position:absolute;z-index: -1;background:linear-gradient(90deg,rgba(10,125,67,.96) 0%,rgba(18,169,92,.78) 60%,rgba(18,169,92,.4) 100%);width: 100%;height: 100%;left: 0;top: 0;}
  .quote .wrap{position:relative;z-index:2;padding:104px 30px;max-width:900px}
  .quote .mark{font-family:var(--disp);font-size:4.5rem;color:var(--yellow);line-height:.6;font-weight:800}
  .quote blockquote{font-size:clamp(1.45rem,2.6vw,2.05rem);font-weight:700;line-height:1.42;margin:16px 0 28px;letter-spacing:-.01em;text-align: left;width: 90%;}
  .quote .who b{font-size:1.05rem;}
  .quote .who{text-align: left;}
  .quote .who small{display:block;color:#d6f4e2;font-size:.86rem;margin-top:3px}
  /* ---------- Open science ---------- */
  .os{background:#fff6e2;padding: 60px 0px 40px 0px;}
  .eyebrow {
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 800;
    color: #ff5a3c;
}
  
  .os h2{font-size:47px;margin:14px 0 18px;font-weight: 700;position: relative;color: #10241a;}
  .os p{color: #46594e;margin-bottom:16px;font-size: 15px;}
  .osfig{display:grid;place-items:center}
  .osfig svg{width:100%;max-width:470px;height:auto}
  
.hl {
    position: relative;
    white-space: nowrap;
    z-index: 0;
}
.os h2 ::after {
    content: "";display: none;
    position: absolute;
    left: -.1em;
    right: -.1em;
    bottom: .05em;
    height: .42em;
    background: #ffc233;
    z-index: -1;
    border-radius: 3px;
    transform: rotate(-1deg);
}
/* ---------- Publishing ---------- */
  .pub{background:#0b5e36;color:#fff;padding:60px 0px;}
  .pub .head-c{text-align: center;margin-bottom: 60px;}
  .pub .head-c h2{color:#fff;max-width:24ch;position:relative;margin-inline:auto;font-size: 45px;font-weight: 700;z-index: +9999;}
  .pub .head-c h2:after{
    content: "";display: none;
    position: absolute;
    left: 25%;
    right: -.1em;
    bottom: .05em;
    height: .42em;
    background: #ffc233;
    z-index: -1;
    border-radius: 3px;
    transform: rotate(-1deg);
    width: 50%;
    }
  .pub .head-c .eyebrow{color: #ffc233;}
  .pub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:10px}
  .pcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:36px 28px;transition:.2s;text-align:center}
  .pcard:hover{transform:translateY(-7px);background:#fff;color:var(--ink)}
  .pcard:hover h3{color:#12a95c;}
  .pcard:hover p{color:#000;}
  .pcard .ic{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px}
  .pcard .ic{background:#12a95c;} .pcard_2nd .ic{background:#ff5a3c;}
  .pcard_3rd .ic{background:#ffc233;} .pcard_4th .ic{background:#5bc98c;}
  .pcard .ic svg{width:34px;height:34px;stroke:#fff}
  .pcard:nth-child(3) .ic svg{stroke:var(--ink)}
  .pcard h3{font-size:1.16rem;margin-bottom:9px;color:#fff}
  .pcard p{font-size:.86rem;color:#cdeed9}
  .btn-yellow {
    background-color: #ffc233 !IMPORTANT;
    color: #000 !IMPORTANT;
    font-weight: 700 !IMPORTANT;
    font-size: 14px ! IMPORTANT;
    padding: 13px 25px ! IMPORTANT;
    border-radius: 10px ! IMPORTANT;
    box-shadow: 0 8px 20px -8px rgba(18, 169, 92, .6);
    }
    /* ---------- Editors ---------- */
    #editors{background-color: #f3fbf4;padding:60px 0px;}
    #editors .head-c{text-align: center;margin-bottom: 50px;}
    #editors .head-c h2{
    font-size: 47px;
    margin: 14px 0 18px;
    font-weight: 700;
    position: relative;
    color: #10241a;
    }
  .eds{display:grid;grid-template-columns:1fr 1fr;gap:28px}
  .ecard{display:flex;gap:26px;background: #fff;border: 2px solid #d5e8dc;border-radius:20px;padding:20px;align-items:center;transition:.2s;justify-content: space-around;}
  .ecard:hover{transform:translateY(-5px);box-shadow:0 26px 48px -30px rgba(18,169,92,.5)}
  .ecard .photo{width:200px;height:200px;border-radius:50%;flex-shrink:0;color:#fff;display:grid;place-items:center;font-family:var(--disp);font-size:2rem;font-weight:800;background: linear-gradient(140deg, #12a95c, #5bc98c);}
   .ecard .photo img{width:100%;border-radius:50%;}
  .ecard:nth-child(2) .photo{background: linear-gradient(140deg, #ff5a3c, #ff8a6e);}
  .ecard h3{font-size:1.42rem;margin-bottom:5px;display:flex;align-items:center;gap:8px;font-weight: 700;}
  .ecard h3 .orcid{width:17px;height:17px;border-radius:50%;background:#A6CE39;display:inline-grid;place-items:center;font-size:.5rem;color:#fff;font-weight:700;font-family:var(--body)}
  .ecard .inst{color: #46594e;font-size:.9rem}
  .ecard a{
    font-weight: 700;
    color: #12a95c;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-size: .9rem;
    text-decoration: none;
}
  .ecard .jname{font-size:.8rem;color: #ff5a3c;font-weight:800;margin:10px 0 14px;letter-spacing:.02em}

  /* ---------- Journals ---------- */
  #journals{background-color: #f3fbf4;padding: 60px 0px;}
  #journals .head-c{text-align: center;margin-bottom: 60px;}
  #journals .head-c h2{
    font-size: 47px;
    margin: 14px 0 18px;
    font-weight: 700;
    position: relative;
    color: #10241a;
    }
    .head-c p {
    color: #46594e;
    max-width: 60ch;
    text-align: center;
    margin: 0 auto;
}
  .jpanel{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(11,94,54,.5);margin-bottom:32px;background: #fff;border: 2px solid #0b5e362b;}
 
 
  .jvisual{position:relative;min-height:390px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;text-align:center;padding:48px;background: linear-gradient(150deg, #12a95c, #0a7d43);}
  .jpanel:nth-child(even) .jvisual{background: linear-gradient(150deg, #ff5a3c, #e8431f);}
  .jvisual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}
  .jvisual .v{position:relative;z-index:2}
  .jvisual .vk{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85);font-weight:800}
  .jvisual .vt{font-family:var(--disp);font-size:2.2rem;font-weight:800;line-height:1.12;margin-top:14px}
  .jvisual .vd{width:54px;height:5px;background: #ffc233;margin:20px auto 0;border-radius:3px}
  .jbody{padding:52px 48px;display:flex;flex-direction:column;justify-content:center}
  .jbody .ed{display:flex;align-items:center;gap:13px;margin:6px 0 24px}
  .jbody .ed .av{width:50px;height:50px;border-radius:50%;background: #12a95c;color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:800;flex-shrink:0}
  .jbody .ed b{font-size:1rem;font-family:var(--disp)}
  .jbody .ed small{display:block;color:var(--ink-soft);font-size:.8rem}
  .jbody h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color: #12a95c;margin-bottom:10px;font-weight:800}
  .jbody p{color: #46594e;font-size:.95rem;margin-bottom:28px}
  .jbody .acts{display:flex;gap:12px;flex-wrap:wrap}
  .btn-coral {
    background-color: #ff5a3c !IMPORTANT;
    color: #fff !IMPORTANT;
    transition: .18s ease !important;
    box-shadow: 0 8px 20px -8px rgba(255, 90, 60, .7);
    padding: 10px !IMPORTANT;
    font-weight: 700 !important;
}
.btn-out {
    border-color: #12a95c !important;
    border:2px solid;
    color: #12a95c !important;
    padding: .95em 1.8em !IMPORTANT;
    font-weight: 700 !important;    transition: .18s ease;
    gap:.55em;
}
.btn-out:hover{background-color: #12a95c !important;color:#fff !important;}
 .btn-coral:hover{transform: translateY(-3px);    transition: .18s ease;}

 /* ---------- Newsletter ---------- */
  .news{position:relative;overflow:hidden;color:#fff}
  .news img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .news::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(11,94,54,.95),rgba(10,125,67,.9))}
  .news .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding: 88px 130px;}
  .news .eyebrow{color: #ffc233;}
  .news h2{font-size: 45px;color:#fff;margin:12px 0 12px;font-weight: 700;}
  .news p{color:#d6f4e2}
  .nform{display:flex;flex-direction:column;gap:14px}
  .nrow{display: grid-lanes;gap:10px}
  .nrow input{flex:1;padding:1em 1.2em;border:2px solid rgba(255,255,255,.3);border-radius:10px;background:rgba(255,255,255,.12);color:#fff;margin-bottom: 15px;width: 46%;margin-right: 10px;}
  .nrow input::placeholder{color:#bfe6cf}
  .nrow input:focus{outline:2px solid var(--yellow);outline-offset:1px;border-color:transparent}
  .agree{font-size:.8rem;color:#d6f4e2;display:flex;gap:8px;align-items:flex-start}
  .agree a{color:var(--yellow);font-weight:700}
/* ---------- Footer ---------- */
  footer{background:#f1f7f4;color:#a7cdb6;font-size:.88rem;padding: 40px 0px;padding-bottom: 0px;}
  footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:42px;padding:76px 0 40px}
  footer .fb b{color: #106e3e;font-weight:800;font-size: 25px;}
  footer .fb p{margin:14px 0 20px;line-height:1.7;max-width:34ch;color: #000;}
  footer h4{
    color: #ff5a3c;
    font-size: 18px;
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:800;
    margin-bottom: 22px;
    }
  footer ul{list-style:none;padding: 0;}footer li{margin-bottom:10px}
  footer li a{color: #000;}
  footer ul a:hover{color: #106e3e;}
  .socials{display:flex;gap:10px}
.fb{padding-bottom:20px;}
  .socials a{width:38px;height:38px;border-radius:11px;background: #ffffff ! IMPORTANT;display:grid;place-items:center;color: #106e3e;transition:.18s;text-decoration: none;font-size: 18px;}
  .socials a:hover{background: #ff5a3c !IMPORTANT;color: #fff;}
  .addr{color:#000;line-height:1.7}
  .footbar{border-top:1px solid rgba(255,255,255,.14);background-color: #106e3e;}
  .footbar .wrap{display:flex;justify-content:space-between;padding:22px 30px;font-size:16px;color:#fff;flex-wrap:wrap;gap:10px}
.footer_menu{padding-left: 40px;}
/* ---------- Hero ---------- */
  .hero{position:relative;color:#fff;overflow:hidden;text-align:center}
  .hero .bgwrap{position:absolute;inset:0;overflow:hidden}
  .hero img.bg{width:100%;height:100%;object-fit:cover;animation:kb 22s ease-in-out infinite alternate}
  @keyframes kb{from{transform:scale(1)}to{transform:scale(1.12)}}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,125,67,.92) 0%,rgba(18,169,92,.82) 55%,rgba(11,94,54,.9) 100%)}
  .hero .blob{position:absolute;border-radius:50%;filter:blur(8px);z-index:1;opacity:.6}
  .hero .b1{width:260px;height:260px;background:var(--yellow);top:-80px;right:-60px}
  .hero .b2{width:200px;height:200px;background:var(--coral);bottom:-70px;left:-50px}
  .hero .wrap{position:relative;z-index:3;padding: 60px 30px 60px;text-align: center;}
  .hero .eyebrow{color: #ffc233;letter-spacing:.2em}
  .hero h1{font-size: 60px;color:#fff;position:relative;font-weight:800;margin:22px auto 0;max-width:20ch;text-shadow:0 2px 20px rgba(0,0,0,.15)}
  .hero h1:after{
    content: "";display: none;
    position: absolute;
    right: 36px;
    bottom: .05em;
    height: .42em;
    background: #ffc233;
    z-index: -1;
    border-radius: 3px;
    transform: rotate(-1deg);
    width: 70%;
    top: 119px;
    }
  .hero h1 .hl::after{background:var(--yellow);height:.36em}
  .hero p{font-size:1.2rem;color:#eafff1;max-width:56ch;margin:26px auto 40px;font-weight:500}
  .hero .acts{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
  .hero .scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;color:#fff;font-size:1.5rem;animation:bob 2s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
.btn-out-l {
    border-color: rgba(255, 255, 255, .7);
    color: #12a95c !IMPORTANT;
    background: #fff !important;
    font-weight: 700 !IMPORTANT;
    font-size: 14px ! IMPORTANT;
    padding: 13px 25px ! IMPORTANT;
    border-radius: 10px ! IMPORTANT;
    box-shadow: 0 8px 20px -8px rgba(18, 169, 92, .6);
}
.footer-second-logo{
    border-top: 1px solid;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
}
.footer-first{padding:20px 0px;}
.footer-second-logo img{}
.search-box{
    display:flex;
    align-items:center;
    width:440px;
    max-width:85%;
    border:2px solid #f3c66c;
    border-radius:3px;
    overflow:hidden;
    background:#fff;
}

.search-box input{
    flex:1;
    height: 28px;
    border:none;
    outline:none;
    padding:0 18px;
    font-size:14px;
    font-family:Arial, sans-serif;
    color:#333;
    width: 70%;
}

.search-box input::placeholder{
    color:#777;
}

.search-box button{
    width:85px;
    height: 40px;
    border:none;
    background:#f9a602;
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.search-box button:hover{
    background:#e59600;
}

.search-box button svg{
    width:22px;
    height:22px;
}


/**** responsive css ****/
/*** responsive start ***/
/***** responsive start *****/
/***** responsive start *****/
/***** responsive start *****/
@media only screen and (min-width: 767px) and (max-width: 1028px){}
@media only screen and (min-width: 320px) and (max-width: 767px){
    .jpanel{display: block;}
    .volume-card{display: block;}
    .quote{padding: 20px;}
    .footer_menu {
    padding-left: 0px;}
    .feat{margin-bottom: 20px;}
    .feat{padding: 20px;}
    .pcard{margin-bottom: 20px;}
    .eds{display: block;}
    .ecard .photo{width: 40%;
    margin: 0 auto;
    height: auto;margin-bottom: 20px;}
    .ecard {display: block;text-align: center;margin-bottom: 20px;}
    .ecard h3{text-align: center;display: block;}
    .news .wrap{display: block;padding:20px;}
    .hero h1{font-size: 30px;}
    .hero .wrap{padding: 20px;}
    
}