/* ==========================================================================
   JDR DESIGN REFRESH — upload to public_html/css/jdr-design.css
   Load AFTER css/style.css (and after jdr-nav.css).

   A visual refresh of YOUR theme. It changes spacing, typography, cards,
   tables, buttons and mobile layout — never text or content.
   Colours are your theme's own:
     #00bd56 primary green   ·   #207dff -> #00bd55 brand gradient
     #1a1a1a / #000 footer   ·   Montserrat (already loaded)
   ========================================================================== */

/* ---------------------------------------------------------- typography */
body{color:#555;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
     text-rendering:optimizeLegibility}
.ftco-section h2,.ftco-section h3,.ftco-section h4{color:rgba(0,0,0,.85)}
.ftco-section p{line-height:1.8}
.heading-section h2{font-weight:700;letter-spacing:-.01em}
.heading-section .subheading{letter-spacing:.14em}
::selection{background:#00bd56;color:#fff}

/* ----------------------------------------------------- tighter spacing */
/* theme sections are 6-7em top and bottom; that reads as empty on laptops */
.ftco-section{padding:5em 0}
@media (max-width:767px){.ftco-section{padding:3.2em 0}}

/* ------------------------------------------------------------- images */
.ftco-section img,.container img{max-width:100%}
/* only unstyled images get automatic height; images with their own class
   (e.g. the theme's .module-image cards at 160px) keep their theme sizing */
main .ftco-section img:not([class]),main .container img:not([class]),.ftco-section img:not([class]){height:auto}
.module-box .module-image{height:160px;object-fit:cover}

/* ------------------------------------------------------------ buttons */
.btn{border-radius:4px;transition:all .18s ease;letter-spacing:.06em}
.btn.btn-primary{box-shadow:0 6px 16px -8px rgba(0,189,86,.7)}
.btn.btn-primary:hover{box-shadow:none}
.btn:focus-visible{outline:3px solid #207dff;outline-offset:2px}

/* -------------------------------------------------------------- cards */
.services-2,.card,.w3-card-4{
  border-radius:6px;transition:transform .2s ease,box-shadow .2s ease;
}
.services-2:hover,.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(0,0,0,.22)}
.card{border:1px solid #ececec}
.card-header{background:#f7faf8;border-bottom:1px solid #ececec;font-weight:600}

/* ------------------------------------------------------ content tables */
/* the guideline pages (products, banned products, rules, checklists, uses)
   carry large tables; give them clean borders, a theme header row and
   horizontal scrolling on phones instead of overflowing the screen. */
.ftco-section table{border-collapse:collapse;width:100%;background:#fff;font-size:14.5px;margin:10px 0 24px}
.ftco-section table th,.ftco-section table td{border:1px solid #e3e6e8;padding:10px 12px;vertical-align:top}
.ftco-section table th,
.ftco-section table thead td{background:#1a1a1a;color:#fff;font-weight:600;border-color:#1a1a1a}
.ftco-section table tbody tr:nth-child(even) td{background:#f7f9fa}
.ftco-section table tbody tr:hover td{background:#eefbf3}
.ftco-section table a{color:#207dff;font-weight:600}
.ftco-section table a:hover{color:#00bd56}
@media (max-width:991px){
  .ftco-section table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:normal}
  .ftco-section table td,.ftco-section table th{min-width:120px}
}

/* ------------------------------------------------- page banner (hero-2) */
.hero-wrap.hero-wrap-2 .slider-text h1{font-weight:600;letter-spacing:-.01em;text-shadow:0 2px 16px rgba(0,0,0,.18)}
@media (max-width:767px){
  .hero-wrap.hero-wrap-2,.hero-wrap.hero-wrap-2 .slider-text{height:240px}
  .hero-wrap.hero-wrap-2 .slider-text h1{font-size:26px;line-height:1.3}
  .hero-wrap .slider-text .breadcrumbs{font-size:13px;margin-bottom:8px}
  .hero-wrap .slider-text .col-md-9{padding-bottom:1.6rem !important}
}

/* --------------------------------------------------------------- footer */
.footer{padding:5em 0 2em}
.footer .footer-heading{letter-spacing:-.01em}
.footer p{line-height:1.8}
@media (max-width:767px){
  .footer{padding:3.2em 0 1.5em}
  .footer [class*="col-"]{margin-bottom:2rem}
}

/* ---------------------------------------------------- mobile essentials */
@media (max-width:767px){
  body{font-size:15px}
  .container{padding-left:18px;padding-right:18px}
  h2{font-size:1.45rem}
  .heading-section h2{font-size:1.6rem}
  .navbar-toggler{font-weight:700;letter-spacing:.06em}
  iframe,embed,object,video{max-width:100%}
}

/* ------------------------------------------- floating contact (all pages)
   Mobile: full-width Call / WhatsApp bar.  Desktop: round WhatsApp button. */
.jdr-float{position:fixed;z-index:1040;font-family:"Montserrat",Arial,sans-serif}
.jdr-float a{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;text-decoration:none;color:#fff}
.jdr-float .fa{font-size:18px}
@media (min-width:768px){
  .jdr-float{right:22px;bottom:22px}
  .jdr-float-call{display:none !important}
  .jdr-float-wa{width:58px;height:58px;border-radius:50%;background:#25d366;
    box-shadow:0 8px 22px -6px rgba(0,0,0,.35);font-size:0;transition:transform .15s ease}
  .jdr-float-wa .fa{font-size:30px}
  .jdr-float-wa:hover{transform:scale(1.07);color:#fff}
}
@media (max-width:767px){
  .jdr-float{left:0;right:0;bottom:0;display:flex;box-shadow:0 -6px 18px -6px rgba(0,0,0,.25)}
  .jdr-float a{flex:1;padding:13px 8px;font-size:15px}
  .jdr-float-call{background:linear-gradient(45deg,#207dff 0%,#00bd55 100%)}
  .jdr-float-wa{background:#25d366}
  body{padding-bottom:52px}                    /* keep footer clear of the bar */
}
@media print{.jdr-float{display:none}}

/* ------------------------------------------ guideline pages' subpage banner
   Major Uses, Banned Products, Products, Rules & Regulations keep their own
   banner block; restyled here in the theme gradient so every page opens the
   same way. (Overrides the pale grey inline style on those pages.) */
section.subpage-banner{
  background:linear-gradient(45deg,#207dff 0%,#00bd55 100%) !important;
  padding:58px 0 50px !important;border-bottom:0 !important;position:relative;
}
section.subpage-banner .breadcrumb-wrap{padding:0 15px}
section.subpage-banner .breadcrumbs{color:rgba(255,255,255,.75) !important;font-size:15px !important}
section.subpage-banner .breadcrumbs a{color:#fff !important;opacity:.85}
section.subpage-banner .breadcrumbs a:hover{opacity:1;text-decoration:underline}
section.subpage-banner .breadcrumbs .divider{color:rgba(255,255,255,.55) !important}
section.subpage-banner .breadcrumbs .current{color:#fff}
section.subpage-banner .subpage-title{color:#fff !important;font-size:34px !important;font-weight:600 !important;
  text-shadow:0 2px 16px rgba(0,0,0,.15)}
@media (max-width:767px){
  section.subpage-banner{padding:36px 0 32px !important}
  section.subpage-banner .subpage-title{font-size:25px !important}
}

/* ------------------------------------------------ layout safety nets
   Some pages carry pasted snippets that add "body{padding:20px/40px}", which
   inset the whole page including the header. Cancel it, and centre any
   content that was never placed inside a .container. */
html body{padding-top:0 !important;padding-left:0 !important;padding-right:0 !important}
@media (min-width:768px){html body{padding-bottom:0 !important}}
.jdr-contain > :not(section):not(script):not(style){
  max-width:1140px;margin-left:auto !important;margin-right:auto !important;
  padding-left:15px;padding-right:15px;box-sizing:border-box}
.jdr-contain > details{display:block}
/* never scroll sideways on a phone (clip does not break sticky elements) */
html,body{overflow-x:clip}

/* ---------------------------------------------------- loading-screen cap
   The theme removes its spinner only after every script has downloaded.
   If an internet-hosted script is slow, never keep the page hidden for
   more than ~1.2s. */
#ftco-loader.show{animation:jdrLoaderOff .25s ease 1.2s forwards}
@keyframes jdrLoaderOff{to{opacity:0;visibility:hidden}}

/* =====================================================================
   RESOURCE PAGES: document viewer, document cards, journals list
   ===================================================================== */
.jdr-res{padding:3.5em 0 4em}
.jdr-res .jdr-res-intro{max-width:880px;margin:0 auto 34px;font-size:16.5px;line-height:1.8;color:#444}
.jdr-res h2{font-size:1.45rem;font-weight:700;color:rgba(0,0,0,.85);margin:40px 0 14px}
.jdr-res h3{font-size:1.1rem;font-weight:700;color:rgba(0,0,0,.85);margin:24px 0 8px}
.jdr-res p{line-height:1.8}
.jdr-res .jdr-wrap-narrow{max-width:980px;margin:0 auto}
.jdr-answer-box{background:#f3faf6;border-left:5px solid #00bd56;border-radius:0 6px 6px 0;padding:20px 24px;margin:0 0 28px}
.jdr-answer-box h2{margin:0 0 6px;font-size:1.1rem}
.jdr-answer-box p{margin:0;color:#222}
.jdr-note{background:#fff8e6;border:1px solid #f0d99a;border-radius:6px;padding:14px 18px;font-size:14.5px;color:#5a4a16;margin:18px 0}
.jdr-note strong{color:#3d3000}

/* document card inside the theme's .module-grid */
.module-box .jdr-doc-art{height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(45deg,#207dff 0%,#00bd55 100%);color:#fff;text-align:center;padding:14px}
.module-box .jdr-doc-art .fa{font-size:44px;opacity:.95}
.module-box .jdr-doc-art small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.9;font-weight:600}
.module-box .module-label small{display:block;font-size:12.5px;color:#777;margin-top:4px;font-weight:400}

/* document viewer */
.jdr-viewer{border:1px solid #e3e6e8;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 10px 26px -14px rgba(0,0,0,.25);margin:10px 0 30px}
.jdr-viewer-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;background:#1a1a1a;color:#fff}
.jdr-viewer-bar .jdr-vtitle{font-weight:600;font-size:15px}
.jdr-viewer-bar .jdr-vmeta{font-size:12.5px;color:#bbb;display:block;font-weight:400}
.jdr-viewer-actions{display:flex;flex-wrap:wrap;gap:8px}
.jdr-btn-doc{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:4px;font-size:13.5px;font-weight:700;
  text-decoration:none !important;transition:.15s ease}
.jdr-btn-doc.primary{background:#00bd56;color:#fff !important}
.jdr-btn-doc.primary:hover{background:#00a14a}
.jdr-btn-doc.ghost{border:1px solid rgba(255,255,255,.5);color:#fff !important}
.jdr-btn-doc.ghost:hover{background:#fff;color:#1a1a1a !important}
.jdr-viewer-frame{display:block;width:100%;height:82vh;min-height:560px;border:0;background:#f4f4f4}
.jdr-viewer-mobile{display:none;padding:28px 22px;text-align:center;background:#f7f9fa}
.jdr-viewer-mobile .fa{font-size:46px;color:#00bd56;margin-bottom:10px}
.jdr-viewer-mobile p{margin:0 0 16px;color:#555}
.jdr-viewer-mobile .jdr-btn-doc{margin:4px}
.jdr-viewer-mobile .jdr-btn-doc.ghost{border-color:#1a1a1a;color:#1a1a1a !important}
@media (max-width:767px){
  .jdr-viewer-frame{display:none}
  .jdr-viewer-mobile{display:block}
}

/* key facts / tables on resource pages */
.jdr-res table{width:100%;border-collapse:collapse;margin:14px 0 24px;font-size:14.5px;background:#fff}
.jdr-res th,.jdr-res td{border:1px solid #e3e6e8;padding:10px 12px;vertical-align:top;text-align:left}
.jdr-res th{background:#1a1a1a;color:#fff;font-weight:600}
.jdr-res tr:nth-child(even) td{background:#f7f9fa}
.jdr-res ul.jdr-points{padding-left:20px}
.jdr-res ul.jdr-points li{margin-bottom:8px;line-height:1.7}
@media (max-width:991px){.jdr-res table{display:block;overflow-x:auto}}

/* journals list */
.jdr-journal-group{margin:34px 0 10px}
.jdr-journal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.jdr-article{display:flex;flex-direction:column;border:1px solid #e6e9ec;border-radius:8px;padding:20px;background:#fff;
  transition:border-color .15s,box-shadow .15s,transform .15s;text-decoration:none !important}
.jdr-article:hover{border-color:#00bd56;box-shadow:0 12px 26px -14px rgba(0,0,0,.25);transform:translateY(-2px)}
.jdr-article .jdr-a-meta{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#207dff;margin-bottom:8px}
.jdr-article h3{margin:0 0 8px !important;font-size:1rem !important;line-height:1.45;color:#111 !important}
.jdr-article p{margin:0 0 12px;font-size:14px;line-height:1.65;color:#555;flex:1}
.jdr-article .jdr-a-go{font-size:12.5px;font-weight:700;color:#00bd56;text-transform:uppercase;letter-spacing:.04em}

/* homepage counters: "+" added by CSS so the theme's number animation keeps it */
.block-18 .number.jdr-plus::after{content:"+"}

/* header logo - fixed size on every page (never affected by content image rules) */
#ftco-navbar.jdr-nav .navbar-brand img{height:72px !important;width:auto !important;max-width:260px}
@media (max-width:991px){#ftco-navbar.jdr-nav .navbar-brand img{height:54px !important}}