/* AR Other Courses for Elementor v1.0.0 — "Other Courses You May Like".
   Every control-written value arrives as a CSS var on {{WRAPPER}} and is
   consumed here with its default as the var() fallback — this stylesheet
   declares no control vars of its own, so Elementor's per-device values
   always win. Defaults reproduce the Digital Marketing redesign section:
   navy #0A083B / #2C4A70, amber #DB8927 / dark #C1751F, ink #13183F. */

/* ---------- Shared: section shell, heading, animations ---------- */
.arport-sec{margin:var(--arport-margin,0); padding:var(--arport-pad,64px 20px 64px);
  overflow-x:clip;}
.arport-inner{max-width:var(--arport-in-max,1200px); margin:0 auto;}
.arport-sec.arport-fit{display:flex; flex-direction:column; justify-content:center;
  min-height:calc(var(--arport-fit-h,100vh) - var(--arport-nav,0px));}
.arport-sec.arport-fit .arport-inner{zoom:var(--arport-scale,1); width:100%;}
.arport-num{font-family:var(--arport-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:var(--arport-num-fs,13px); font-weight:600; color:var(--arport-num-c,#DB8927);
  letter-spacing:.08em; margin:0 0 10px;}
.arport-head{font-family:var(--arport-hfont,"Bricolage Grotesque",Manrope,sans-serif);
  font-size:var(--arport-h-fs,30px); font-weight:800; line-height:1.08;
  letter-spacing:-.01em; color:var(--arport-h-c,#13183F); margin:0;}
.arport-intro{font-family:var(--arport-bfont,Manrope,system-ui,sans-serif);
  font-size:var(--arport-intro-fs,16.5px); line-height:1.6; color:var(--arport-intro-c,#4B5578);
  margin:14px 0 0; max-width:var(--arport-intro-max,720px);}
.arport-head-wrap{margin-bottom:var(--arport-head-gap,36px);}

/* Entrance animations: hidden state is JS-gated (.arport-anim-on is added
   by JS only), so content stays fully visible when JS is disabled. */
.arport-anim .arport-anim-item{transition:opacity var(--arport-in-speed,600ms) ease,
  transform var(--arport-in-speed,600ms) ease;}
.arport-anim.arport-anim-on .arport-anim-item{opacity:0;}
.arport-anim.arport-anim-on .arport-anim-item.anim-fade-up{transform:translateY(24px);}
.arport-anim.arport-anim-on .arport-anim-item.anim-slide-left{transform:translateX(-28px);}
.arport-anim.arport-anim-on .arport-anim-item.anim-slide-right{transform:translateX(28px);}
.arport-anim.arport-anim-on .arport-anim-item.anim-zoom{transform:scale(.94);}
.arport-anim.arport-anim-on .arport-anim-item.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .arport-anim .arport-anim-item{transition:none;}
  .arport-anim.arport-anim-on .arport-anim-item{opacity:1; transform:none;}
}

/* ---------- Other Courses You May Like ---------- */
.aroc-root{background:var(--aroc-sec-bg,#ffffff);}
.aroc-root .arport-head{color:var(--aroc-h-c,#13183F);}
.aroc-root .arport-intro{color:var(--aroc-intro-c,#4B5578);}
.aroc-grid{display:grid; grid-template-columns:repeat(var(--aroc-cols,4),1fr);
  gap:var(--aroc-gap,20px); align-items:stretch;}
.aroc-card{display:block; text-decoration:none;
  background:var(--aroc-card-bg,#ffffff); border:1px solid var(--aroc-card-bc,#E9E5DA);
  border-radius:var(--aroc-card-r,16px); overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
.aroc-card:hover{transform:translateY(calc(var(--arport-lift,6px) * -1));
  border-color:var(--aroc-chip-bg,#DB8927);
  box-shadow:0 18px 38px rgba(10,8,59,.12);}
.aroc-img{position:relative; display:block; height:var(--aroc-img-h,120px);
  background:linear-gradient(120deg,#0A083B,#2C4A70); overflow:hidden;}
.aroc-img img{width:100%; height:100%; object-fit:cover; display:block;}
.aroc-chip{position:absolute; left:12px; bottom:12px; display:inline-block;
  font-family:var(--arport-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--aroc-chip-c,#ffffff); background:var(--aroc-chip-bg,#DB8927);
  padding:5px 10px; border-radius:999px;}
.aroc-body{display:block; padding:var(--aroc-card-pad,16px);}
.aroc-title{display:block; font-family:var(--arport-hfont,"Bricolage Grotesque",Manrope,sans-serif);
  font-size:var(--aroc-title-fs,17px); font-weight:800; line-height:1.25;
  color:var(--aroc-title-c,#13183F); overflow-wrap:break-word;}
.aroc-fee{display:block; font-family:var(--arport-hfont,"Bricolage Grotesque",Manrope,sans-serif);
  font-size:var(--aroc-fee-fs,15px); font-weight:800;
  color:var(--aroc-fee-c,#C1751F); margin-top:6px;}
.aroc-meta{display:block; font-family:var(--arport-bfont,Manrope,system-ui,sans-serif);
  font-size:13.5px; color:var(--aroc-meta-c,#4B5578); margin-top:4px;}

/* ---------- Small screens: overflow guards ----------
   Grids stack via the per-device Columns controls (tablet/mobile defaults
   are set on the controls themselves), so no hardcoded column overrides
   live here — nothing here may fight an Elementor device value. */