.elementor-1746 .elementor-element.elementor-element-ea04885{--display:flex;}/* Start custom CSS for html, class: .elementor-element-315d254 */@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap");


/* ==========================================================
   REON SKILLS — GREEN JOBS
   60-Day Professional Program
   ========================================================== */

.reon-greenjobs{

  /* REON */
  --indigo:#5D4CE3;
  --blue:#55A8DC;

  /* GREEN JOBS */
  --green:#168A68;
  --green-dark:#0C644C;
  --green-light:#EAF7F1;

  /* SUPPORT */
  --teal:#00A79D;
  --orange:#F7941D;
  --red:#ED1C24;

  /* NEUTRALS */
  --dark:#0F172A;
  --text:#121528;
  --muted:#60677A;
  --border:rgba(18,21,40,.11);

  --bg:#F8FAFC;
  --card:#FFFFFF;

  --shadow:
    0 18px 45px rgba(18,21,40,.08);

  --shadow-soft:
    0 10px 25px rgba(18,21,40,.055);

  --radius:22px;

  font-family:
    "Open Sans",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  background:#fff;
  color:var(--text);

  padding:40px 16px 60px;

  overflow-x:hidden;
}


.reon-greenjobs *{
  box-sizing:border-box;
}


.reon-greenjobs a{
  text-decoration:none;
  color:inherit;
}


.reon-greenjobs .reon-container{
  max-width:1140px;
  margin:0 auto;
}



/* ==========================================================
   ICON SYSTEM
   ========================================================== */

.reon-greenjobs .ico{
  display:inline-block;

  vertical-align:middle;

  flex:0 0 auto;

  background-color:var(--indigo);

  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;

  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}


.reon-greenjobs .ico-16{
  width:16px;
  height:16px;
}

.reon-greenjobs .ico-18{
  width:18px;
  height:18px;
}

.reon-greenjobs .ico-24{
  width:24px;
  height:24px;
}

.reon-greenjobs .ico-32{
  width:32px;
  height:32px;
}

.reon-greenjobs .ico-56{
  width:56px;
  height:56px;
}



/* ICON COLOURS */

.reon-greenjobs .c-indigo{
  background-color:var(--indigo);
}

.reon-greenjobs .c-blue{
  background-color:var(--blue);
}

.reon-greenjobs .c-green{
  background-color:var(--green);
}

.reon-greenjobs .c-teal{
  background-color:var(--teal);
}

.reon-greenjobs .c-orange{
  background-color:var(--orange);
}



/* ICON SOURCES */

.reon-greenjobs .i-leaf{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/leaf.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/leaf.png");
}

.reon-greenjobs .i-calendar{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/calendar.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/calendar.png");
}

.reon-greenjobs .i-training,
.reon-greenjobs .i-learning{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/training.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/training.png");
}

.reon-greenjobs .i-expert{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/classroom.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/classroom.png");
}

.reon-greenjobs .i-case{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/briefcase.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/briefcase.png");
}

.reon-greenjobs .i-career{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/goal.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/goal.png");
}

.reon-greenjobs .i-esg{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/earth-planet.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/earth-planet.png");
}

.reon-greenjobs .i-energy{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/lightning-bolt.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/lightning-bolt.png");
}

.reon-greenjobs .i-safety{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/shield.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/shield.png");
}

.reon-greenjobs .i-user{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/user.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/user.png");
}

.reon-greenjobs .i-science{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/test-tube.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/test-tube.png");
}

.reon-greenjobs .i-engineering{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/settings.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/settings.png");
}

.reon-greenjobs .i-business{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/business.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/business.png");
}

.reon-greenjobs .i-finance{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/accounting.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/accounting.png");
}

.reon-greenjobs .i-growth{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/combo-chart.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/combo-chart.png");
}

.reon-greenjobs .i-help{
  -webkit-mask-image:url("https://img.icons8.com/ios-filled/100/help.png");
  mask-image:url("https://img.icons8.com/ios-filled/100/help.png");
}



/* ==========================================================
   HERO
   ========================================================== */

.reon-greenjobs .hero{

  position:relative;

  border-radius:26px;

  border:
    1px solid rgba(22,138,104,.16);

  background:
    radial-gradient(
      750px 420px at 90% 10%,
      rgba(22,138,104,.16),
      transparent 62%
    ),
    radial-gradient(
      700px 380px at 10% 0%,
      rgba(93,76,227,.10),
      transparent 58%
    ),
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #F8FCFA 70%,
      #F2FAF6 100%
    );

  box-shadow:var(--shadow);

  padding:46px 38px 28px;

  overflow:hidden;
}


.reon-greenjobs .hero-content{

  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(300px,.65fr);

  align-items:center;

  gap:42px;
}


.reon-greenjobs .hero-copy{
  position:relative;
  z-index:2;
}



/* HERO TAG */

.reon-greenjobs .hero-tag{

  display:inline-flex;

  align-items:center;

  gap:9px;

  padding:8px 14px;

  border-radius:999px;

  background:
    rgba(22,138,104,.08);

  border:
    1px solid rgba(22,138,104,.22);

  font-size:12px;

  font-weight:700;

  letter-spacing:.06em;

  text-transform:uppercase;

  color:var(--green-dark);
}


.reon-greenjobs .sep{
  opacity:.45;
}



/* HERO HEADLINE */

.reon-greenjobs .hero h1{

  margin:18px 0 10px;

  max-width:720px;

  font-family:
    "Muller",
    "Open Sans",
    sans-serif;

  font-size:
    clamp(34px,4.4vw,57px);

  line-height:1.03;

  letter-spacing:-.045em;

  font-weight:900;

  color:var(--indigo);
}


.reon-greenjobs .hero h1 span{
  color:var(--green);
}


.reon-greenjobs .hero h3{

  margin:0 0 14px;

  font-family:
    "Muller",
    "Open Sans",
    sans-serif;

  font-size:18px;

  font-weight:800;

  color:var(--blue);

  letter-spacing:-.01em;
}


.reon-greenjobs .lead{

  margin:0;

  max-width:700px;

  font-size:15.5px;

  line-height:1.75;

  color:var(--muted);
}



/* ==========================================================
   HERO VISUAL
   ========================================================== */

.reon-greenjobs .hero-visual{

  position:relative;

  width:310px;
  height:310px;

  justify-self:end;
}


.reon-greenjobs .visual-core{

  position:absolute;

  width:124px;
  height:124px;

  border-radius:50%;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  display:flex;

  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      145deg,
      #FFFFFF,
      var(--green-light)
    );

  border:
    1px solid rgba(22,138,104,.20);

  box-shadow:
    0 20px 50px rgba(22,138,104,.16);

  z-index:3;
}


.reon-greenjobs .orbit{

  position:absolute;

  left:50%;
  top:50%;

  border-radius:50%;

  transform:
    translate(-50%,-50%);

  border:
    1px dashed rgba(22,138,104,.30);
}


.reon-greenjobs .orbit-one{
  width:210px;
  height:210px;
}


.reon-greenjobs .orbit-two{
  width:290px;
  height:290px;

  border-color:
    rgba(93,76,227,.18);
}



/* FLOATING LABELS */

.reon-greenjobs .floating-tag{

  position:absolute;

  background:#fff;

  border:
    1px solid rgba(18,21,40,.10);

  border-radius:12px;

  padding:8px 12px;

  font-size:11px;

  font-weight:800;

  box-shadow:
    0 10px 25px rgba(18,21,40,.08);

  color:var(--dark);

  z-index:4;
}


.reon-greenjobs .tag-esg{
  left:8px;
  top:56px;
}


.reon-greenjobs .tag-energy{
  right:0;
  top:74px;
}


.reon-greenjobs .tag-safety{
  right:15px;
  bottom:52px;
}


.reon-greenjobs .tag-sustainability{
  left:0;
  bottom:70px;
}



/* ==========================================================
   BUTTONS
   ========================================================== */

.reon-greenjobs .cta-row{

  margin-top:22px;

  display:flex;

  flex-wrap:wrap;

  gap:10px;
}


.reon-greenjobs .btn{

  all:unset;

  box-sizing:border-box;

  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  padding:
    11px 20px !important;

  min-width:145px !important;

  min-height:42px !important;

  border-radius:
    12px !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  cursor:pointer !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}


.reon-greenjobs .btn:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 20px rgba(18,21,40,.10);
}


.reon-greenjobs .btn-primary{

  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      var(--green),
      var(--green-dark)
    ) !important;

  border:
    1px solid var(--green) !important;
}


.reon-greenjobs .btn-outline{

  color:
    var(--indigo) !important;

  background:
    rgba(255,255,255,.92) !important;

  border:
    1px solid rgba(93,76,227,.28) !important;
}



/* ==========================================================
   QUICK FACTS
   ========================================================== */

.reon-greenjobs .quick-grid{

  margin-top:34px;

  padding-top:22px;

  border-top:
    1px solid rgba(18,21,40,.08);

  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:12px;
}


.reon-greenjobs .pill{

  background:
    rgba(255,255,255,.90);

  border:
    1px solid var(--border);

  border-radius:15px;

  padding:12px 13px;

  min-height:74px;

  box-shadow:
    var(--shadow-soft);
}


.reon-greenjobs .pill .k{

  display:flex;

  align-items:center;

  gap:7px;

  margin-bottom:7px;

  font-size:10.5px;

  line-height:1;

  text-transform:uppercase;

  letter-spacing:.08em;

  font-weight:700;

  color:var(--muted);
}


.reon-greenjobs .pill .v{

  font-family:
    "Muller",
    "Open Sans",
    sans-serif;

  font-size:14px;

  line-height:1.3;

  font-weight:800;

  color:var(--dark);
}



/* ==========================================================
   SECTIONS
   ========================================================== */

.reon-greenjobs .section{

  margin-top:34px;

  padding:30px;

  border-radius:22px;

  background:
    var(--bg);

  border:
    1px solid var(--border);
}


.reon-greenjobs .section-head{
  margin-bottom:18px;
}


.reon-greenjobs .badge-title{

  display:inline-flex;

  align-items:center;

  gap:9px;

  width:fit-content;

  padding:7px 12px;

  border-radius:999px;

  border:
    1px solid rgba(22,138,104,.17);

  background:
    rgba(22,138,104,.07);

  color:
    var(--green-dark);

  font-size:12px;

  font-weight:800;

  letter-spacing:.02em;
}


.reon-greenjobs .section h2{

  margin:
    11px 0 0;

  max-width:800px;

  font-family:
    "Muller",
    "Open Sans",
    sans-serif;

  font-size:
    clamp(21px,2.3vw,28px);

  line-height:1.18;

  letter-spacing:-.025em;

  font-weight:900;

  color:
    var(--indigo);
}


.reon-greenjobs .sub{

  margin:
    10px 0 0;

  max-width:900px;

  font-size:14.5px;

  line-height:1.7;

  color:var(--muted);
}



/* ==========================================================
   KEY AREA CARDS
   ========================================================== */

.reon-greenjobs .grid{

  margin-top:20px;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:15px;
}


.reon-greenjobs .card{

  padding:18px;

  background:#fff;

  border:
    1px solid var(--border);

  border-radius:18px;

  box-shadow:
    0 8px 20px rgba(18,21,40,.035);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}


.reon-greenjobs .card:hover{

  transform:
    translateY(-3px);

  box-shadow:
    0 16px 32px rgba(18,21,40,.075);

  border-color:
    rgba(22,138,104,.20);
}


.reon-greenjobs .card-icon{

  width:44px;
  height:44px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:13px;

  margin-bottom:14px;
}


.reon-greenjobs .c-bg-green{
  background:rgba(22,138,104,.10);
}

.reon-greenjobs .c-bg-blue{
  background:rgba(85,168,220,.12);
}

.reon-greenjobs .c-bg-orange{
  background:rgba(247,148,29,.11);
}

.reon-greenjobs .c-bg-teal{
  background:rgba(0,167,157,.10);
}

.reon-greenjobs .c-bg-indigo{
  background:rgba(93,76,227,.09);
}


.reon-greenjobs .card h3{

  margin:
    0 0 8px;

  font-family:
    "Muller",
    "Open Sans",
    sans-serif;

  font-size:16px;

  font-weight:800;

  color:var(--dark);
}


.reon-greenjobs .card p{

  margin:0;

  font-size:14px;

  line-height:1.65;

  color:var(--muted);
}



/* ==========================================================
   AUDIENCE
   ========================================================== */

.reon-greenjobs .audience-grid{

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:12px;

  margin-top:18px;
}


.reon-greenjobs .audience-item{

  display:flex;

  align-items:center;

  gap:13px;

  padding:15px 16px;

  border-radius:15px;

  border:
    1px solid var(--border);

  background:#fff;

  font-size:14px;

  font-weight:700;

  color:var(--dark);
}


.reon-greenjobs .audience-wide{
  grid-column:1 / -1;
}



/* ==========================================================
   WHY / BENEFITS
   ========================================================== */

.reon-greenjobs .benefit-grid{

  margin-top:18px;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:15px;
}


.reon-greenjobs .benefit{

  display:flex;

  align-items:flex-start;

  gap:14px;

  padding:19px;

  background:#fff;

  border:
    1px solid var(--border);

  border-radius:18px;
}


.reon-greenjobs .benefit h3{

  margin:0 0 7px;

  font-family:
    "Muller",
    "Open Sans",
    sans-serif;

  font-size:16px;

  font-weight:800;

  color:var(--dark);
}


.reon-greenjobs .benefit p{

  margin:0;

  font-size:13.5px;

  line-height:1.6;

  color:var(--muted);
}


.reon-greenjobs .featured-benefit{

  background:
    linear-gradient(
      145deg,
      rgba(22,138,104,.075),
      #fff
    );

  border-color:
    rgba(22,138,104,.20);
}


.reon-greenjobs .mini-label{

  display:inline-block;

  margin-bottom:6px;

  color:var(--green);

  font-size:10px;

  font-weight:800;

  letter-spacing:.08em;

  text-transform:uppercase;
}



/* ==========================================================
   REON × REDEFINE
   ========================================================== */

.reon-greenjobs .collaboration{

  position:relative;

  margin-top:34px;

  overflow:hidden;

  padding:32px;

  text-align:center;

  border-radius:22px;

  background:
    radial-gradient(
      500px 180px at 50% 0%,
      rgba(22,138,104,.10),
      transparent 70%
    ),
    #fff;

  border:
    1px solid rgba(22,138,104,.20);

  box-shadow:
    var(--shadow-soft);
}


.reon-greenjobs .collab-label{

  margin-bottom:12px;

  color:var(--muted);

  font-size:11px;

  font-weight:800;

  letter-spacing:.12em;

  text-transform:uppercase;
}


.reon-greenjobs .collab-brands{

  display:flex;

  align-items:center;

  justify-content:center;

  flex-wrap:wrap;

  gap:16px;

  font-family:
    "Muller",
    "Open Sans",
    sans-serif;

  font-size:
    clamp(22px,3vw,31px);

  font-weight:900;

  letter-spacing:-.02em;

  color:var(--indigo);
}


.reon-greenjobs .collab-brands span:last-child{
  color:var(--green);
}


.reon-greenjobs .collab-brands .cross{

  color:var(--muted);

  font-weight:400;
}


.reon-greenjobs .collaboration p{

  max-width:700px;

  margin:14px auto 0;

  color:var(--muted);

  font-size:14px;

  line-height:1.65;
}



/* ==========================================================
   FAQ
   ========================================================== */

.reon-greenjobs .faq{

  margin-top:18px;

  display:grid;

  gap:10px;
}


.reon-greenjobs details{

  background:#fff;

  border:
    1px solid var(--border);

  border-radius:16px;

  padding:14px 16px;
}


.reon-greenjobs summary{

  list-style:none;

  cursor:pointer;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  color:var(--dark);

  font-size:14px;

  font-weight:800;
}


.reon-greenjobs summary::-webkit-details-marker{
  display:none;
}


.reon-greenjobs .chev{

  width:9px;
  height:9px;

  flex:0 0 auto;

  border-right:
    2px solid rgba(100,116,139,.9);

  border-bottom:
    2px solid rgba(100,116,139,.9);

  transform:
    rotate(45deg);

  transition:
    transform .18s ease;
}


.reon-greenjobs details[open] .chev{
  transform:
    rotate(-135deg);
}


.reon-greenjobs .answer{

  margin-top:11px;

  padding-top:10px;

  border-top:
    1px solid rgba(18,21,40,.06);

  font-size:14px;

  line-height:1.65;

  color:var(--muted);
}



/* ==========================================================
   FINAL CTA
   ========================================================== */

.reon-greenjobs .final-cta{

  margin-top:34px;

  padding:26px 28px;

  border-radius:22px;

  display:grid;

  grid-template-columns:
    minmax(0,1.4fr)
    auto;

  align-items:center;

  gap:30px;

  background:
    linear-gradient(
      120deg,
      var(--green-dark),
      var(--green)
    );

  box-shadow:
    0 18px 40px rgba(22,138,104,.18);
}


.reon-greenjobs .cta-eyebrow{

  margin-bottom:6px;

  color:
    rgba(255,255,255,.72);

  font-size:10px;

  font-weight:800;

  letter-spacing:.13em;

  text-transform:uppercase;
}


.reon-greenjobs .final-cta h3{

  margin:0 0 7px;

  font-family:
    "Muller",
    "Open Sans",
    sans-serif;

  font-size:21px;

  font-weight:900;

  color:#fff;
}


.reon-greenjobs .final-cta p{

  margin:0;

  font-size:13px;

  line-height:1.55;

  color:
    rgba(255,255,255,.78);
}


.reon-greenjobs .final-actions{

  display:flex;

  gap:9px;

  flex-wrap:wrap;

  justify-content:flex-end;
}


.reon-greenjobs .final-cta .btn-primary{

  background:#fff !important;

  color:
    var(--green-dark) !important;

  border-color:#fff !important;
}


.reon-greenjobs .final-cta .btn-outline{

  background:
    rgba(255,255,255,.08) !important;

  color:#fff !important;

  border-color:
    rgba(255,255,255,.45) !important;
}



/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */

@media(max-width:1000px){

  .reon-greenjobs .hero-content{
    grid-template-columns:1fr;
  }

  .reon-greenjobs .hero-visual{
    display:none;
  }

  .reon-greenjobs .quick-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

  .reon-greenjobs .grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .reon-greenjobs .benefit-grid{
    grid-template-columns:1fr;
  }

}



/* ==========================================================
   RESPONSIVE — SMALL TABLET
   ========================================================== */

@media(max-width:760px){

  .reon-greenjobs .quick-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .reon-greenjobs .audience-grid{
    grid-template-columns:1fr;
  }

  .reon-greenjobs .audience-wide{
    grid-column:auto;
  }

  .reon-greenjobs .final-cta{
    grid-template-columns:1fr;
  }

  .reon-greenjobs .final-actions{
    justify-content:flex-start;
  }

}



/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:640px){

  .reon-greenjobs{
    padding:22px 12px 40px;
  }


  .reon-greenjobs .hero{

    padding:24px 17px 18px;

    border-radius:19px;
  }


  .reon-greenjobs .hero-tag{

    font-size:10px;

    padding:7px 10px;
  }


  .reon-greenjobs .hero h1{

    font-size:31px;

    line-height:1.07;
  }


  .reon-greenjobs .hero h3{

    font-size:15px;

    line-height:1.4;
  }


  .reon-greenjobs .lead{

    font-size:14px;

    line-height:1.68;
  }


  .reon-greenjobs .btn{

    width:100% !important;

    min-width:0 !important;
  }


  .reon-greenjobs .quick-grid{

    grid-template-columns:1fr;

    gap:9px;

    margin-top:24px;
  }


  .reon-greenjobs .pill{
    min-height:auto;
  }


  .reon-greenjobs .section{

    margin-top:22px;

    padding:18px 15px;

    border-radius:18px;
  }


  .reon-greenjobs .grid{
    grid-template-columns:1fr;
  }


  .reon-greenjobs .collaboration{

    margin-top:22px;

    padding:25px 16px;

    border-radius:18px;
  }


  .reon-greenjobs .collab-brands{
    gap:10px;
  }


  .reon-greenjobs .final-cta{

    margin-top:22px;

    padding:21px 17px;

    border-radius:18px;
  }


  .reon-greenjobs .final-actions .btn{
    width:100% !important;
  }

}/* End custom CSS */