:root{
    --purple:#5B4FE0;
    --navy:#0E3B36;
    --gold:#F4B400;
    --teal:#00C896;
    --ink:#111111;
    --paper:#FDFCFA;
    --muted:#6b6b6b;
  }
 
  *{box-sizing:border-box; margin:0; padding:0;}
/*  
  body{
    background:var(--paper);
    font-family:'Inter', sans-serif;
    color:var(--ink);
    padding:56px 24px 80px;
  } */
 
  /* .page{
    max-width:1180px;
    margin:0 auto;
  } */
.webinar-packages-section{
  background:var(--paper);
}
.page-webinar-pckg {
  font-family:'Inter', sans-serif;
  color:var(--ink);
  padding:56px 24px 80px;
  margin:0 auto;
  max-width: 1290px;
}
.page-title{
  font-family:"Young Serif";
  font-weight:900;
  font-size:clamp(34px, 5.2vw, 58px);
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:44px;
  letter-spacing:-0.5px;
}
 
.page-title svg{
  width:0.72em;
  height:0.72em;
  flex-shrink:0;
}
 
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px 36px;
}
 
.card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 10px 28px rgba(0,0,0,0.06);
}
 
.card-head{
  text-align:center;
  padding:20px 16px 16px;
}
 
.card-head strong{
  font-family:"Young Serif";
  font-size:14px;
  letter-spacing:0.2px;
  color: var(--Dark-Peacok);
}
 
.card-head p{
  font-size:14px;
  color:var(--muted);
  margin-top:4px;
  letter-spacing:0.2px;
  font-family: 'Poppins';
}
 
.card-media{
  position:relative;
  height:180px;
  overflow:hidden;
}
 
.card-media img{
  width:100%;
  height:100%;
  display:block;
}


 
.lessons{
  display:grid;
  grid-template-columns:1fr 1fr;
}
 
.lesson{
  position:relative;
  padding:16px 18px 36px;
  min-height:96px;
  color:#fff;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
 
.lesson.purple{background:var(--purple);}
.lesson.navy{background:var(--navy);}
.lesson.gold{background:var(--gold);}
.lesson.teal{background:var(--teal);}
 
.play-btn{
  width:30px;
  height:30px;
  border:2px solid #fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  text-decoration:none;
  cursor:pointer;
  transition:background 0.18s ease, transform 0.18s ease;
}
 
.play-btn:hover{
  background:rgba(255,255,255,0.22);
  transform:scale(1.06);
}
 
.play-btn:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
 
.play-btn svg{width:11px; height:11px;}
 
.lesson-text .t{
  font-size:13px;
  font-weight:700;
  line-height:1.3;
}
 
.lesson-text .p{
  font-size:11.5px;
  font-weight:500;
  opacity:0.92;
  margin-top:2px;
}
 
.quiz-icon{
  position:absolute;
  bottom:10px;
  left:16px;
  width:25px;
  height:25px;
  opacity:0.95;
  display:block;
  cursor:pointer;
  transition:opacity 0.18s ease, transform 0.18s ease;
}
 
.quiz-icon svg{
  width:100%;
  height:100%;
  display:block;
}
 
.quiz-icon:hover{
  opacity:1;
  transform:scale(1.08);
}
 
.quiz-icon:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
 
 
/* =====================================================================
   LAPTOP / SMALL DESKTOP  (≤ 1200px)
   ===================================================================== */
@media (max-width: 1200px){
  .page{
    padding: 50px 40px 70px;
  }
  .grid{
    gap:34px 28px;
  }
}
 
 
/* =====================================================================
   TABLET — LANDSCAPE  (768px – 1024px, orientation: landscape)
   e.g. iPad, iPad Air, iPad Pro 11" in landscape
   Wide enough to keep the 2-column grid and 2-column lesson quadrants.
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
  .page{
    padding:44px 24px 64px;
  }
  .grid{
    grid-template-columns:1fr 1fr;
    gap:30px 26px;
  }
  .card-media{
    height:150px;
  }
  .lessons{
    grid-template-columns:1fr 1fr;
  }
}
 
 
/* =====================================================================
   TABLET — GENERAL  (≤ 1024px)
   Covers tablets in either orientation that fall outside the
   landscape rule above (e.g. narrower tablets, split-screen views).
   ===================================================================== */
@media (max-width: 1024px){
  .page-title{
    margin-bottom:36px;
    gap:12px;
  }
  .card-media{
    height:160px;
  }
}
 
 
/* =====================================================================
   TABLET — PORTRAIT  (≤ 860px)
   Cards stack to a single column.
   ===================================================================== */
@media (max-width:860px){
  .grid{grid-template-columns:1fr;}
  .page{
    padding:48px 22px 70px;
  }
  .grid{
    gap:28px;
  }
}
 
 
/* =====================================================================
   TABLET/LARGE-PHONE — LANDSCAPE  (≤ 860px, orientation: landscape)
   Short viewport height — trim vertical spacing so content isn't
   pushed off-screen without scrolling.
   ===================================================================== */
@media (max-width:860px) and (orientation: landscape){
  .page{
    padding:32px 24px 48px;
  }
  .page-title{
    margin-bottom:28px;
  }
  .card-media{
    height:130px;
  }
  .lessons{
    grid-template-columns:1fr 1fr;
  }
  .lesson{
    padding:12px 16px 28px;
    min-height:80px;
  }
  
}
 
 
/* =====================================================================
   TABLET — SMALL / LARGE MOBILE  (≤ 768px)
   ===================================================================== */
@media (max-width: 768px) {
  .card-head strong{
    font-size: 14px;
  }
  .card-head{
    padding:18px 14px 14px;
  }
  .card-media {
    position: relative;
    height: 105px;
    overflow: hidden;
  }
  .lesson-text .t{
    font-size:12.5px;
  }
  .lesson-text .p{
    font-size:11px;
  }
}
 
 
/* =====================================================================
   MOBILE — LANDSCAPE  (≤ 767px, orientation: landscape)
   Phones rotated sideways: plenty of width, very little height.
   ===================================================================== */
@media (max-width: 767px) and (orientation: landscape){
  .page{
    padding:28px 20px 40px;
  }
  .page-title{
    font-size:clamp(26px, 4.4vw, 36px);
    margin-bottom:22px;
  }
  .grid{
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .card-media{
    height:110px;
  }
  .lessons{
    grid-template-columns:1fr 1fr;
  }
  .lesson{
    padding:10px 14px 26px;
    min-height:74px;
  }
  .play-btn{
    width:26px;
    height:26px;
  }
  .quiz-icon{
    width:20px;
    height:20px;
  }
}
 
 
/* =====================================================================
   MOBILE — PORTRAIT  (≤ 600px)
   ===================================================================== */
@media (max-width: 600px){
  .page-title{
    font-size:30px !important;
    gap:10px;
    justify-content: center;
    margin-bottom:28px !important;
  }
  .grid{
    gap:22px;
  }
  .card-head{
    padding:16px 14px 12px;
  }
  .card-head p{
    font-size:13px;
  }
  .card-media{
    height:150px;
  }
}
 
 
/* =====================================================================
   MOBILE — SMALL PORTRAIT  (≤ 480px)
   ===================================================================== */
@media (max-width: 480px){
  .card-media{
    height:99px;
  }
  .lesson{
    padding:14px 16px 32px;
    min-height:88px;
  }
  .play-btn{
    width:28px;
    height:28px;
  }
  .quiz-icon{
    width:22px;
    height:22px;
    left:14px;
  }
}
 
 
/* =====================================================================
   LESSON GRID — STACK TO SINGLE COLUMN  (≤ 420px)
   ===================================================================== */
@media (max-width:420px){
  .lessons{grid-template-columns:1fr;}
}
 
 
/* =====================================================================
   MOBILE — EXTRA SMALL  (≤ 375px)
   e.g. iPhone SE, older/compact Android devices
   ===================================================================== */
@media (max-width: 375px){
  .page{
    padding:28px 14px 48px;
  }
  .page-title{
    font-size:clamp(24px, 8.5vw, 32px);
    gap:8px;
    margin-bottom:22px;
  }
  .card-head strong{
    font-size:13px;
  }
  .card-head p{
    font-size:12px;
  }
  .card-media{
    height:100px;
  }
  .lesson{
    padding:12px 14px 30px;
  }
  .lesson-text .t{
    font-size:12px;
  }
  .lesson-text .p{
    font-size:10.5px;
  }
}
 
 
/* =====================================================================
   MOBILE — ULTRA SMALL  (≤ 320px)
   e.g. iPhone 5/SE (1st gen), legacy small-screen Android
   ===================================================================== */
@media (max-width: 320px){
  .page{
    padding:24px 12px 40px;
  }
  .card-media{
    height:100px;
  }
  .lesson{
    padding:10px 12px 26px;
  }
  .play-btn{
    width:24px;
    height:24px;
  }
  .quiz-icon{
    width:18px;
    height:18px;
    left:12px;
    bottom:8px;
  }
}

body.page-template-page-wibenars-packages .menu > .menu-item > a, body.page-template-page-wibenars-packages #gp-standard-header .menu > .menu-item .gp-more-menu-items-icon
,body.page-template-page-wibenars-packages #gp-standard-header .menu > .menu-item:last-child > a:hover 
{
  color: #ffffff !important;
}

body.page-template-page-wibenars-packages .gp-logo-image
{
  visibility: hidden;
}

body.page-template-page-wibenars-packages .gp-main-header .gp-logo a,
body.page-template-page-wibenars-packages #gp-mobile-header .gp-logo a
 {
  background: url(/wp-content/uploads/2024/08/Upopolis-logo-darkBG.svg) no-repeat !important;
  background-size: contain !important;
}

body.page-template-page-wibenars-packages .gp-header-button:before
{
  color: #fff !important;
}

body.page-template-page-wibenars-packages .wpb_single_image img {border-radius:0px !important;}
body.page-template-page-wibenars-packages #gp-page-title {display:none;}
body.page-template-page-wibenars-packages #gp-standard-header { background-color: var(--Dark-Peacok) !important;}
body.page-template-page-wibenars-packages #gp-mobile-header{
background: var(--Dark-Peacok);
}

body.page-template-page-wibenars-packages .gp-nav-button-icon, body.page-template-page-wibenars-packages .gp-nav-button-icon::before, body.page-template-page-wibenars-packages .gp-nav-button-icon::after{
  background-color: #ffffff;
}