/* Wingo Blog — what Tailwind utilities cannot express.
   Keyframes, frosted scrims, duotone education cards, reveal states. */

:root{
  --wg-black:#010101;
  --wg-ink:#0f0f0f;
  --wg-paper:#f9fafc;
  --wg-mint:#28e8be;
  --wg-green:#00b991;
  --wg-deep:#009c7a;
  --wg-line:#e3e3e3;
  --wg-chip:#f1f1f1;
}

html{ -webkit-text-size-adjust:100%; }
body{ background:var(--wg-paper); color:var(--wg-ink); overflow-x:hidden; }
img{ display:block; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(15,15,15,.18); border-radius:10px; }

/* ── Poster / feature scrim ─────────────────────────────────────────
   The signature move: a blurred, masked gradient plate at the foot of
   every photo card. mask-image fades the blur in, so the top of the
   photo stays sharp. */
.wg-scrim{
  position:absolute; left:3px; right:3px; bottom:2px;
background: linear-gradient(180deg, rgba(1, 1, 1, 0) 0%, rgba(1, 1, 1, 0.3) 100%);
  backdrop-filter: blur(10px);
  border-radius: 0px 0px 20px 20px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 42%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 42%);
  pointer-events:none;
}
.wg-scrim--deep{ left:5px; right:5px; border-radius:0 0 20px 20px; }

/* ── Glow hairline ── newsletter foot, CTA foot, expert card top ──── */
.wg-glowline{
  position:absolute; left:0; right:0; height:4px; border-radius:2px;
  background:linear-gradient(90deg, rgba(40,232,190,0) 0%, rgba(129,255,225,.95) 50%, rgba(40,232,190,0) 100%);
  box-shadow:0 0 26px rgba(40,232,190,.55);
  pointer-events:none;
}

/* ── Nav slash separators (15px rules rotated 120°) ───────────────── */
.wg-slash{
  width:15px; height:1px; background:#01b990; opacity:.6;
  transform:rotate(120deg); flex:none;
}

/* ── Ambient gradient blobs (hero + newsletter + CTA) ─────────────── */
.wg-blobs{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.wg-blob{ position:absolute; border-radius:50%; filter:blur(90px); will-change:transform; }
.wg-blob--mint{ background:linear-gradient(-26deg,#2cffae 10%, transparent 78%); }
.wg-blob--red{ background:linear-gradient(-41deg,#ff2c30 18%, transparent 76%); }
.wg-blob--yellow{ background:linear-gradient(-41deg,#ffe32c 20%, transparent 74%); }
.wg-blob--cyan{ background:linear-gradient(-90deg,#2adbff 30%, #2a6aff 80%); }
.wg-blob--pink{ background:linear-gradient(230deg, transparent 30%, #f348e4 78%); }

@keyframes wg-drift-a{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); }
  50%    { transform:translate3d(6%,-5%,0) rotate(8deg) scale(1.08); }
}
@keyframes wg-drift-b{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); }
  50%    { transform:translate3d(-7%,4%,0) rotate(-6deg) scale(1.12); }
}
@keyframes wg-drift-c{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(4%,7%,0) scale(.92); }
}
.wg-anim-a{ animation:wg-drift-a 28s ease-in-out infinite; }
.wg-anim-b{ animation:wg-drift-b 34s ease-in-out infinite; }
.wg-anim-c{ animation:wg-drift-c 22s ease-in-out infinite; }

/* ── Education card duotone ──────────────────────────────────────────
   photo → #6a8e86 `color` layer → 45% multiply of the same → dark
   gradient → scrim. Reproduced with stacked absolute layers. */
.wg-duo-color{ position:absolute; inset:0; background:#6a8e86; mix-blend-mode:color; }
.wg-duo-mult { position:absolute; inset:0; background:#6a8e86; mix-blend-mode:multiply; opacity:.45; }
.wg-duo-dark { position:absolute; inset:0; background:linear-gradient(180deg, rgba(1,1,1,0) 30%, rgba(1,1,1,.55) 100%); }

/* ── Discipline tile: base photo + screen-blended glow ────────────── */
.wg-glow-layer{ mix-blend-mode:screen; }

/* ── Motion: scroll reveal ───────────────────────────────────────────
   Elements start VISIBLE. main.js adds .wg-off to what is below the
   fold and removes it on the way in — if JS never runs the page is
   still fully readable. */
.wg-off{ opacity:0; transform:translateY(28px); }
.wg-reveal{ transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }

/* ── Hover primitives ────────────────────────────────────────────── */
.wg-lift{ transition:transform .45s cubic-bezier(.22,.61,.36,1), background-color .45s ease, box-shadow .45s ease; }
.wg-lift:hover{ transform:translateY(-6px); }
.wg-zoom{ overflow:hidden; }
.wg-zoom img,.wg-zoom .wg-img{ transition:transform .9s cubic-bezier(.22,.61,.36,1); }
.wg-zoom:hover img,.wg-zoom:hover .wg-img{ transform:scale(1.06); }

/* ── Rails: carousel + ticker ────────────────────────────────────── */
.wg-rail{ display:flex; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  scroll-behavior:auto; cursor:grab; }
.wg-rail::-webkit-scrollbar{ display:none; }
.wg-rail.is-dragging{ cursor:grabbing; user-select:none; }
.wg-ticker{ display:flex; overflow:hidden; }
.wg-ticker-track{ display:flex; gap:20px; will-change:transform; }

/* ── Footer wordmark ─────────────────────────────────────────────── */
.wg-wordmark{
  font-family:Rubik,sans-serif; font-weight:600; font-size:270px; line-height:248px;
  letter-spacing:-.01em; color:#fff; opacity:.07; white-space:nowrap; user-select:none;
}

/* ══ Imported with the swapped-in sections ═══════════════════════════
   Explore Disciplines, Trending now, Stay Ahead of the Markets and
   Expert Insights come from the previous conversion. They hook on
   data attributes and reference these keyframes from inline
   `animation:` shorthands. */

@keyframes wgDriftA{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg); }
  50%    { transform:translate3d(60px,-40px,0) rotate(4deg); }
}
@keyframes wgDriftB{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(-70px,50px,0) scale(1.08); }
}
@keyframes wgPulse{
  0%,100%{ opacity:.55; }
  50%    { opacity:.9; }
}

/* drag rails: hide the scrollbar, keep the scrolling */
[data-drag]{ scrollbar-width:none; -ms-overflow-style:none; }
[data-drag]::-webkit-scrollbar{ display:none; }

/* reveal, data-attribute flavour */
[data-reveal]{
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].wg-off{ opacity:0; transform:translateY(28px); }

@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-reveal].wg-off{ opacity:1; transform:none; transition:none; }
  [style*="animation"]{ animation:none !important; }
}

@media (prefers-reduced-motion: reduce){
  .wg-anim-a,.wg-anim-b,.wg-anim-c{ animation:none !important; }
  .wg-reveal,.wg-lift,.wg-zoom img,.wg-zoom .wg-img{ transition:none !important; }
  .wg-off{ opacity:1 !important; transform:none !important; }
}


.single .wg-content figure.wp-block-image{
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  aspect-ratio: 880/500;
  overflow: hidden;
   border-radius: 20px;
     margin-bottom: 20px;
}
.single .wg-content figure.wp-block-image img{
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
  border-radius: 20px;

 
}
.single .wg-content figure.wp-block-image img:hover{
  transform: scale(1.06);
}
.single .wg-content figure table{
  margin:20px 0;
}
.single .wg-content figure table tr {
  border-bottom: 1px solid #C6C6CD4D;
}
.single .wg-content figure table tr:nth-child(1) td{
  background: #EDF0F5;

}
.single .wg-content figure table tr td{
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  color: rgb(25, 28, 30);
  text-align: center;
  border:0;
  
}

.single .wg-content .green-box{
background-color: rgb(0, 185, 145);
border-radius: 20px;
margin:20px 0;

}
.single .wg-content .green-box .wp-block-group__inner-container{
  background: #E1F3F1;
  padding-top: 34px;
  padding-bottom: 34px;
  padding-left: 48px;
  padding-right: 48px;
  border-radius: 20px;
  margin-left: 5px;
}
.single .wg-content .green-box  .wp-block-paragraph{

font-weight: 600;
font-size: 18px;
line-height: 28px;
margin-bottom: 10px;

color: #00B991;


}
.single .wg-content img{
	max-width:100%;
	margin: 20px auto;
	border-radius:20px;
}
.single .wg-content .green-box ul li{
  align-items: flex-start;
  display: flex;
  gap: 12px;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;

}
.single .wg-content .green-box ul li:before{
 background: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.4167 9.08329C17.4167 4.48092 13.6857 0.74996 9.08333 0.74996C4.48096 0.74996 0.75 4.48092 0.75 9.08329C0.75 13.6857 4.48096 17.4166 9.08333 17.4166C13.6857 17.4166 17.4167 13.6857 17.4167 9.08329Z' stroke='%2300B991' stroke-width='1.5'/%3E%3Cpath d='M5.75 9.49992L7.83333 11.5833L12.4167 6.58325' stroke='%2300B991' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center left;
content:"";

  width: 20px;
  height: 20px;

}