/* ==========================================================
   SEA LICENSING
   STCW 2010 GUIDE — AS AMENDED
   PREMIUM DESKTOP V1
   ========================================================== */

.stcw1-main{
  --navy:#002B49;
  --deep:#052C43;
  --deep2:#073651;
  --ocean:#004E7C;
  --blue:#0084D1;
  --cyan:#55CAF7;
  --pale:#F4F8FB;
  --line:#D9E6ED;
  --text:#10364D;
  --muted:#587486;

  background:#fff;
  color:var(--text);
  overflow:hidden;
}

.stcw1-main *,
.stcw1-main *::before,
.stcw1-main *::after{
  box-sizing:border-box;
}

.stcw1-shell{
  width:min(calc(100% - 96px),var(--shell,1440px));
  margin-inline:auto;
}

.stcw1-eyebrow{
  display:block;
  margin:0 0 14px;
  color:var(--blue);
  font-size:10px;
  line-height:1;
  font-weight:850;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.stcw1-title{
  margin:0;
  color:var(--deep);
  font-size:43px;
  line-height:1.03;
  font-weight:800;
  letter-spacing:-.045em;
}

.stcw1-rule{
  display:block;
  width:48px;
  height:2px;
  margin-top:18px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}


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

.stcw1-hero{
  position:relative;
  min-height:590px;
  display:flex;
  align-items:center;
  isolation:isolate;
  background:#032338;
}

.stcw1-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;

  background:
    linear-gradient(
      90deg,
      rgba(2,29,47,.985) 0%,
      rgba(2,34,54,.93) 31%,
      rgba(2,37,57,.69) 54%,
      rgba(2,31,48,.29) 77%,
      rgba(2,28,43,.10) 100%
    ),
    url("/assets/images/hero-advisory-compliance.jpg")
    center center / cover no-repeat;
}

.stcw1-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;

  background:
    radial-gradient(circle at 78% 40%,rgba(38,164,222,.11),transparent 30%),
    linear-gradient(
      180deg,
      rgba(0,43,73,.02),
      transparent 58%,
      rgba(0,20,34,.34)
    );
}

.stcw1-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(350px,.82fr);
  gap:90px;
  align-items:center;
  padding:50px 0;
}

.stcw1-hero-copy{
  max-width:800px;
}

.stcw1-hero .stcw1-eyebrow{
  color:#68CEF7;
  margin-bottom:18px;
}

.stcw1-hero h1{
  margin:0;
  max-width:790px;
  color:#fff;
  font-size:66px;
  line-height:.98;
  font-weight:800;
  letter-spacing:-.055em;
}

.stcw1-hero h1 span{
  display:block;
  color:#68CEF7;
  font-size:.48em;
  line-height:1.2;
  margin-top:9px;
  letter-spacing:-.025em;
}

.stcw1-hero-copy > p{
  max-width:700px;
  margin:24px 0 0;
  color:rgba(255,255,255,.81);
  font-size:15px;
  line-height:1.75;
}

.stcw1-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:31px;
}

.stcw1-btn{
  min-height:45px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 21px;
  border:1px solid transparent;
  border-radius:4px;
  text-decoration:none;
  font-size:10px;
  line-height:1;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:.25s ease;
}

.stcw1-btn-primary{
  color:#fff;
  background:var(--blue);
  border-color:var(--blue);
}

.stcw1-btn-primary:hover{
  background:#0395E5;
  transform:translateY(-1px);
}

.stcw1-btn-ghost{
  color:#fff;
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(7px);
}

.stcw1-btn-ghost:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.60);
}

.stcw1-hero-panel{
  width:100%;
  max-width:410px;
  justify-self:end;
  padding:29px;

  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;

  background:
    linear-gradient(
      145deg,
      rgba(4,47,73,.79),
      rgba(3,34,54,.53)
    );

  box-shadow:
    0 24px 65px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06);

  backdrop-filter:blur(12px);
}

.stcw1-panel-label{
  display:block;
  color:#68CEF7;
  font-size:9px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.stcw1-hero-panel h2{
  margin:12px 0 0;
  color:#fff;
  font-size:22px;
  line-height:1.16;
  letter-spacing:-.025em;
}

.stcw1-hero-panel p{
  margin:11px 0 0;
  color:rgba(255,255,255,.68);
  font-size:11px;
  line-height:1.68;
}

.stcw1-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:21px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
}

.stcw1-meta span{
  display:block;
  margin-bottom:5px;
  color:rgba(255,255,255,.43);
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.stcw1-meta b{
  color:#fff;
  font-size:11px;
  line-height:1.4;
}


/* ==========================================================
   QUICK NAVIGATION
   ========================================================== */

.stcw1-nav{
  padding:38px 0;
  background:#fff;
  border-bottom:1px solid #E4EDF2;
}

.stcw1-nav-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}

.stcw1-nav-card{
  min-height:84px;
  padding:17px 16px;
  border:1px solid #DFE9EE;
  border-radius:6px;
  background:#FAFCFD;
  text-decoration:none;

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.stcw1-nav-card:hover{
  transform:translateY(-2px);
  border-color:#BBDCEB;
  background:#F4FAFD;
}

.stcw1-nav-card span{
  display:block;
  margin-bottom:8px;
  color:#0084D1;
  font-size:8px;
  font-weight:850;
  letter-spacing:.11em;
}

.stcw1-nav-card b{
  display:block;
  color:#123A51;
  font-size:11px;
  line-height:1.35;
}


/* ==========================================================
   INTRODUCTION
   ========================================================== */

.stcw1-intro{
  padding:88px 0;
  background:#fff;
}

.stcw1-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:105px;
  align-items:start;
}

.stcw1-intro-copy{
  max-width:610px;
}

.stcw1-intro-text{
  position:relative;
  padding-left:36px;
}

.stcw1-intro-text::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  bottom:4px;
  width:1px;

  background:
    linear-gradient(
      180deg,
      rgba(0,132,209,.07),
      rgba(0,132,209,.55),
      rgba(0,132,209,.07)
    );
}

.stcw1-intro-text p{
  margin:0;
  color:#526F80;
  font-size:13px;
  line-height:1.82;
}

.stcw1-intro-text p + p{
  margin-top:17px;
}


/* ==========================================================
   CURRENT STATUS CALLOUT
   ========================================================== */

.stcw1-current{
  padding:0 0 88px;
  background:#fff;
}

.stcw1-current-box{
  position:relative;
  overflow:hidden;
  padding:30px 34px;

  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:34px;
  align-items:center;

  border:1px solid #CDE2ED;
  border-radius:8px;

  background:
    linear-gradient(135deg,#F7FBFD,#EEF7FB);
}

.stcw1-current-tag{
  padding-right:30px;
  border-right:1px solid #CFE2EB;
}

.stcw1-current-tag span{
  display:block;
  color:#0084D1;
  font-size:9px;
  font-weight:850;
  letter-spacing:.15em;
}

.stcw1-current-tag b{
  display:block;
  margin-top:8px;
  color:#073852;
  font-size:24px;
  line-height:1.05;
}

.stcw1-current-text h3{
  margin:0;
  color:#0B334A;
  font-size:19px;
}

.stcw1-current-text p{
  margin:9px 0 0;
  max-width:920px;
  color:#526E7E;
  font-size:11.5px;
  line-height:1.72;
}


/* ==========================================================
   CHAPTERS
   ========================================================== */

.stcw1-chapters{
  padding:84px 0 90px;

  background:
    radial-gradient(circle at 86% 15%,rgba(0,132,209,.11),transparent 31%),
    linear-gradient(135deg,#052E47 0%,#00395B 52%,#042A42 100%);
}

.stcw1-chapters-head{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:center;
  margin-bottom:40px;
}

.stcw1-chapters-copy{
  grid-column:1;
}

.stcw1-chapters .stcw1-eyebrow{
  color:#61CDF7;
}

.stcw1-chapters .stcw1-title{
  color:#fff;
  font-size:40px;
}

.stcw1-chapters-intro{
  position:relative;
  grid-column:2 / 4;
  margin:0;
  padding-left:36px;

  color:rgba(255,255,255,.76);
  font-size:13px;
  line-height:1.72;
}

.stcw1-chapters-intro::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:50px;
  transform:translateY(-50%);

  background:
    linear-gradient(
      180deg,
      rgba(73,197,247,.10),
      rgba(73,197,247,.78),
      rgba(73,197,247,.10)
    );
}

.stcw1-chapter-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.stcw1-chapter{
  min-height:180px;
  padding:25px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:7px;

  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.066),
      rgba(255,255,255,.025)
    );

  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease;
}

.stcw1-chapter:hover{
  transform:translateY(-3px);
  border-color:rgba(81,202,247,.28);
  background:rgba(255,255,255,.075);
}

.stcw1-chapter span{
  display:block;
  color:#59CDF8;
  font-size:9px;
  font-weight:850;
  letter-spacing:.13em;
}

.stcw1-chapter h3{
  margin:20px 0 0;
  color:#fff;
  font-size:18px;
  line-height:1.18;
}

.stcw1-chapter p{
  margin:10px 0 0;
  color:rgba(255,255,255,.61);
  font-size:10.5px;
  line-height:1.65;
}


/* ==========================================================
   CAREER PATHWAYS
   ========================================================== */

.stcw1-pathways{
  padding:86px 0 92px;
  background:#F7FAFC;
}

.stcw1-section-head{
  max-width:760px;
  margin-bottom:39px;
}

.stcw1-path-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.stcw1-path{
  position:relative;
  overflow:hidden;
  min-height:330px;
  padding:30px;

  border:1px solid #D9E6ED;
  border-radius:8px;
  background:#fff;
}

.stcw1-path-label{
  display:block;
  margin-bottom:23px;
  color:#0084D1;
  font-size:9px;
  font-weight:850;
  letter-spacing:.13em;
}

.stcw1-path h3{
  margin:0 0 20px;
  color:#0B334A;
  font-size:22px;
}

.stcw1-reg-list{
  margin:0;
  padding:0;
  list-style:none;
}

.stcw1-reg-list li{
  display:grid;
  grid-template-columns:94px minmax(0,1fr);
  gap:14px;
  align-items:start;

  padding:10px 0;
  border-top:1px solid #E8EFF3;

  color:#38596B;
  font-size:11px;
  line-height:1.55;
}

.stcw1-reg-list li:first-child{
  border-top:0;
}

.stcw1-reg{
  display:inline-flex;
  justify-content:center;
  align-items:center;

  min-height:23px;
  padding:3px 7px;

  border:1px solid #B9DAE9;
  border-radius:999px;

  color:#0079BB;
  background:#F0F9FD;

  font-size:8px;
  font-weight:850;
  white-space:nowrap;
}


/* ==========================================================
   SAFETY TRAINING
   ========================================================== */

.stcw1-safety{
  padding:85px 0 90px;
  background:#fff;
}

.stcw1-table-wrap{
  overflow:hidden;
  border:1px solid #D8E5EC;
  border-radius:8px;
  background:#fff;
}

.stcw1-table{
  width:100%;
  border-collapse:collapse;
}

.stcw1-table th{
  padding:15px 18px;
  text-align:left;
  color:#fff;
  background:#073B59;

  font-size:9px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.stcw1-table td{
  padding:15px 18px;
  vertical-align:top;
  border-top:1px solid #E5EDF1;

  color:#496779;
  font-size:11px;
  line-height:1.55;
}

.stcw1-table tr:first-child td{
  border-top:0;
}

.stcw1-table td:first-child{
  color:#123A51;
  font-weight:750;
}

.stcw1-table td:nth-child(2){
  width:190px;
}

.stcw1-table tr:hover td{
  background:#F8FBFD;
}


/* ==========================================================
   SPECIAL SHIP TRAINING
   ========================================================== */

.stcw1-special{
  padding:84px 0 90px;

  background:
    radial-gradient(circle at 12% 100%,rgba(0,132,209,.10),transparent 28%),
    linear-gradient(135deg,#052D45,#003653);
}

.stcw1-special .stcw1-eyebrow{
  color:#61CDF7;
}

.stcw1-special .stcw1-title{
  color:#fff;
}

.stcw1-special .stcw1-rule{
  background:#58CAF6;
}

.stcw1-special-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:39px;
}

.stcw1-special-card{
  min-height:210px;
  padding:25px;

  border:1px solid rgba(255,255,255,.11);
  border-radius:7px;

  background:rgba(255,255,255,.045);
}

.stcw1-special-card span{
  display:inline-block;
  padding:4px 8px;

  border:1px solid rgba(84,202,247,.28);
  border-radius:999px;

  color:#65D0F8;
  font-size:8px;
  font-weight:850;
}

.stcw1-special-card h3{
  margin:22px 0 0;
  color:#fff;
  font-size:19px;
  line-height:1.2;
}

.stcw1-special-card p{
  margin:10px 0 0;
  color:rgba(255,255,255,.65);
  font-size:10.5px;
  line-height:1.65;
}


/* ==========================================================
   CERTIFICATES
   ========================================================== */

.stcw1-certs{
  padding:86px 0 90px;
  background:#fff;
}

.stcw1-cert-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:39px;
}

.stcw1-cert{
  min-height:220px;
  padding:28px;
  border:1px solid #DCE7ED;
  border-radius:7px;
  background:linear-gradient(180deg,#fff,#F9FCFD);
}

.stcw1-cert span{
  display:block;
  color:#0084D1;
  font-size:9px;
  font-weight:850;
  letter-spacing:.12em;
}

.stcw1-cert h3{
  margin:22px 0 0;
  color:#0B334A;
  font-size:20px;
}

.stcw1-cert p{
  margin:11px 0 0;
  color:#587486;
  font-size:11px;
  line-height:1.68;
}


/* ==========================================================
   REVALIDATION
   ========================================================== */

.stcw1-revalidation{
  padding:84px 0 90px;
  background:#F4F8FB;
}

.stcw1-revalidation-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:82px;
  align-items:start;
}

.stcw1-reval-list{
  display:grid;
  gap:13px;
}

.stcw1-reval-item{
  padding:21px 23px;
  border:1px solid #D7E5EC;
  border-radius:6px;
  background:#fff;
}

.stcw1-reval-item b{
  display:block;
  color:#123A51;
  font-size:13px;
}

.stcw1-reval-item p{
  margin:7px 0 0;
  color:#5C7686;
  font-size:10.5px;
  line-height:1.62;
}


/* ==========================================================
   FITNESS / WATCHKEEPING
   ========================================================== */

.stcw1-watch{
  padding:84px 0 90px;
  background:#fff;
}

.stcw1-watch-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin-top:39px;
}

.stcw1-watch-card{
  padding:30px;
  border:1px solid #D8E5EC;
  border-radius:8px;
  background:#fff;
}

.stcw1-watch-card span{
  color:#0084D1;
  font-size:9px;
  font-weight:850;
  letter-spacing:.12em;
}

.stcw1-watch-card h3{
  margin:18px 0 0;
  color:#0A344C;
  font-size:21px;
}

.stcw1-watch-card p{
  margin:10px 0 0;
  color:#597485;
  font-size:11px;
  line-height:1.72;
}


/* ==========================================================
   2026 UPDATE
   ========================================================== */

.stcw1-update{
  padding:84px 0 90px;

  background:
    radial-gradient(circle at 80% 10%,rgba(0,132,209,.14),transparent 31%),
    linear-gradient(135deg,#052E47,#003958);
}

.stcw1-update-grid{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:80px;
  align-items:center;
}

.stcw1-update .stcw1-eyebrow{
  color:#62CEF7;
}

.stcw1-update .stcw1-title{
  color:#fff;
}

.stcw1-update-copy{
  padding-left:35px;
  border-left:1px solid rgba(85,202,247,.33);
}

.stcw1-update-copy h3{
  margin:0;
  color:#fff;
  font-size:23px;
  line-height:1.25;
}

.stcw1-update-copy p{
  margin:13px 0 0;
  color:rgba(255,255,255,.72);
  font-size:11.5px;
  line-height:1.72;
}


/* ==========================================================
   PRACTICAL CHECKLIST
   ========================================================== */

.stcw1-check{
  padding:86px 0 90px;
  background:#F7FAFC;
}

.stcw1-check-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:39px;
}

.stcw1-check-card{
  min-height:115px;
  padding:22px;

  border:1px solid #DCE7ED;
  border-radius:6px;

  background:#fff;
}

.stcw1-check-card span{
  display:block;
  margin-bottom:12px;
  color:#0084D1;
  font-size:9px;
  font-weight:850;
}

.stcw1-check-card b{
  color:#123A51;
  font-size:13px;
  line-height:1.4;
}


/* ==========================================================
   DISCLAIMER
   ========================================================== */

.stcw1-disclaimer{
  padding:46px 0;
  background:#fff;
}

.stcw1-disclaimer-box{
  padding:23px 26px;

  border:1px solid #D6E5ED;
  border-radius:7px;
  border-left:3px solid #0084D1;

  background:#F8FBFD;
}

.stcw1-disclaimer-box b{
  display:block;
  color:#0D3850;
  font-size:12px;
}

.stcw1-disclaimer-box p{
  margin:7px 0 0;
  color:#5B7585;
  font-size:10.5px;
  line-height:1.65;
}


/* ==========================================================
   MOBILE/TABLET BASIC FALLBACK
   Desktop remains current priority
   ========================================================== */

@media(max-width:1100px){

  .stcw1-shell{
    width:min(calc(100% - 48px),var(--shell,1440px));
  }

  .stcw1-nav-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .stcw1-chapter-grid,
  .stcw1-special-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .stcw1-hero h1{
    font-size:52px;
  }

}


/* ==========================================================
   STCW 2010 — PREMIUM MARITIME TEXTURE SYSTEM
   DESKTOP ONLY
   Lightweight CSS / inline SVG — no external image requests
   ========================================================== */

@media (min-width:1101px){


  /* ========================================================
     GLOBAL DEPTH
     ======================================================== */

  .stcw1-main{
    position:relative !important;
    isolation:isolate !important;
  }


  /* ========================================================
     HERO — NAVIGATION / CHART TEXTURE
     ======================================================== */

  .stcw1-main .stcw1-hero::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:-2 !important;
    pointer-events:none !important;

    background-image:

      /* original hero depth */
      radial-gradient(
        circle at 78% 40%,
        rgba(38,164,222,.11),
        transparent 30%
      ),

      linear-gradient(
        180deg,
        rgba(0,43,73,.02),
        transparent 58%,
        rgba(0,20,34,.34)
      ),

      /* subtle maritime navigation grid */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='420' viewBox='0 0 920 420'%3E%3Cg fill='none' stroke='%237ED7F8' stroke-width='1'%3E%3Cpath opacity='.13' d='M0 80C110 25 190 132 310 79s210-53 330 0 190 43 280-2'/%3E%3Cpath opacity='.09' d='M0 145c105-50 198 48 310 0s205-47 317 0 194 47 293 0'/%3E%3Cpath opacity='.07' d='M0 218c103-45 196 44 301 0s207-44 314 0 195 42 305 0'/%3E%3Ccircle opacity='.10' cx='730' cy='190' r='112'/%3E%3Ccircle opacity='.07' cx='730' cy='190' r='72'/%3E%3Cpath opacity='.09' d='M730 78v224M618 190h224M730 190l74-64'/%3E%3C/g%3E%3C/svg%3E") !important;

    background-repeat:
      no-repeat,
      no-repeat,
      repeat !important;

    background-size:
      auto,
      auto,
      920px 420px !important;
  }



  /* ========================================================
     LIGHT SECTIONS — COMMON POSITIONING
     ======================================================== */

  .stcw1-main .stcw1-intro,
  .stcw1-main .stcw1-current,
  .stcw1-main .stcw1-pathways,
  .stcw1-main .stcw1-safety,
  .stcw1-main .stcw1-certs,
  .stcw1-main .stcw1-revalidation,
  .stcw1-main .stcw1-watch,
  .stcw1-main .stcw1-check,
  .stcw1-main .stcw1-disclaimer{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
  }


  .stcw1-main .stcw1-intro > .stcw1-shell,
  .stcw1-main .stcw1-current > .stcw1-shell,
  .stcw1-main .stcw1-pathways > .stcw1-shell,
  .stcw1-main .stcw1-safety > .stcw1-shell,
  .stcw1-main .stcw1-certs > .stcw1-shell,
  .stcw1-main .stcw1-revalidation > .stcw1-shell,
  .stcw1-main .stcw1-watch > .stcw1-shell,
  .stcw1-main .stcw1-check > .stcw1-shell,
  .stcw1-main .stcw1-disclaimer > .stcw1-shell{
    position:relative !important;
    z-index:3 !important;
  }


  /* fine nautical contour / wave texture */
  .stcw1-main .stcw1-intro::before,
  .stcw1-main .stcw1-current::before,
  .stcw1-main .stcw1-pathways::before,
  .stcw1-main .stcw1-safety::before,
  .stcw1-main .stcw1-certs::before,
  .stcw1-main .stcw1-revalidation::before,
  .stcw1-main .stcw1-watch::before,
  .stcw1-main .stcw1-check::before,
  .stcw1-main .stcw1-disclaimer::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:0 !important;
    pointer-events:none !important;

    opacity:.10 !important;

    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='980' height='300' viewBox='0 0 980 300'%3E%3Cg fill='none' stroke='%23004E7C' stroke-width='1'%3E%3Cpath opacity='.22' d='M0 65C95 22 184 108 285 65S475 22 575 65 770 108 980 57'/%3E%3Cpath opacity='.17' d='M0 104c99-42 188 43 290 0s190-42 294 0 197 42 396-4'/%3E%3Cpath opacity='.13' d='M0 148c96-39 188 39 284 0s192-39 291 0 197 39 405 0'/%3E%3Cpath opacity='.10' d='M0 194c94-36 185 36 279 0s190-36 286 0 198 37 415-1'/%3E%3Cpath opacity='.08' d='M0 240c91-33 182 34 274 0s187-34 283 0 196 34 423 0'/%3E%3C/g%3E%3C/svg%3E") !important;

    background-repeat:repeat !important;
    background-size:980px 300px !important;
  }



  /* ========================================================
     INTRO — LARGE COMPASS ROSE
     ======================================================== */

  .stcw1-main .stcw1-intro::after{
    content:"" !important;

    position:absolute !important;

    width:510px !important;
    height:510px !important;

    right:-145px !important;
    top:-125px !important;

    z-index:1 !important;
    pointer-events:none !important;

    opacity:.055 !important;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23004E7C'%3E%3Ccircle cx='260' cy='260' r='205' stroke-width='1.2'/%3E%3Ccircle cx='260' cy='260' r='145'/%3E%3Ccircle cx='260' cy='260' r='65'/%3E%3Cpath d='M260 32v456M32 260h456M99 99l322 322M421 99L99 421' stroke-width='.8'/%3E%3Cpath d='M260 86l23 151 151 23-151 23-23 151-23-151-151-23 151-23 23-151z' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E")
      center / contain no-repeat !important;
  }



  /* ========================================================
     PATHWAYS — NAUTICAL ROUTE / COORDINATES
     ======================================================== */

  .stcw1-main .stcw1-pathways::after{
    content:"" !important;

    position:absolute !important;

    width:640px !important;
    height:360px !important;

    left:-120px !important;
    bottom:-115px !important;

    z-index:1 !important;
    pointer-events:none !important;

    opacity:.060 !important;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 360'%3E%3Cg fill='none' stroke='%230084D1' stroke-width='1.5'%3E%3Cpath stroke-dasharray='7 9' d='M40 275C128 145 224 293 312 165S480 55 602 116'/%3E%3Ccircle cx='40' cy='275' r='8'/%3E%3Ccircle cx='312' cy='165' r='8'/%3E%3Ccircle cx='602' cy='116' r='8'/%3E%3Cpath d='M312 130v70M277 165h70' opacity='.6'/%3E%3C/g%3E%3C/svg%3E")
      center / contain no-repeat !important;
  }



  /* ========================================================
     SAFETY — RADAR GEOMETRY
     ======================================================== */

  .stcw1-main .stcw1-safety::after{
    content:"" !important;

    position:absolute !important;

    width:560px !important;
    height:560px !important;

    right:-190px !important;
    bottom:-200px !important;

    z-index:1 !important;
    pointer-events:none !important;

    opacity:.050 !important;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23004E7C'%3E%3Ccircle cx='280' cy='280' r='225'/%3E%3Ccircle cx='280' cy='280' r='165'/%3E%3Ccircle cx='280' cy='280' r='105'/%3E%3Ccircle cx='280' cy='280' r='45'/%3E%3Cpath d='M280 55v450M55 280h450M121 121l318 318M439 121L121 439' stroke-width='.8'/%3E%3Cpath d='M280 280L424 161' stroke='%230084D1' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E")
      center / contain no-repeat !important;
  }



  /* ========================================================
     CERTIFICATES — ABSTRACT MARITIME DOCUMENT WATERMARK
     ======================================================== */

  .stcw1-main .stcw1-certs::after{
    content:"" !important;

    position:absolute !important;

    width:460px !important;
    height:460px !important;

    left:-110px !important;
    top:-100px !important;

    z-index:1 !important;
    pointer-events:none !important;

    opacity:.050 !important;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 460'%3E%3Cg fill='none' stroke='%23004E7C' stroke-width='1.5'%3E%3Crect x='100' y='62' width='230' height='300' rx='14'/%3E%3Cpath d='M142 126h146M142 165h146M142 204h108M142 243h132'/%3E%3Ccircle cx='274' cy='303' r='48'/%3E%3Cpath d='M253 303l14 14 28-35'/%3E%3C/g%3E%3C/svg%3E")
      center / contain no-repeat !important;
  }



  /* ========================================================
     REVALIDATION — COMPASS / TIME MOTIF
     ======================================================== */

  .stcw1-main .stcw1-revalidation::after{
    content:"" !important;

    position:absolute !important;

    width:470px !important;
    height:470px !important;

    right:-115px !important;
    top:-95px !important;

    z-index:1 !important;
    pointer-events:none !important;

    opacity:.055 !important;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 470 470'%3E%3Cg fill='none' stroke='%23004E7C' stroke-width='1.5'%3E%3Ccircle cx='235' cy='235' r='165'/%3E%3Ccircle cx='235' cy='235' r='105'/%3E%3Cpath d='M235 105v25M235 340v25M105 235h25M340 235h25'/%3E%3Cpath d='M235 235v-72M235 235l61 37' stroke='%230084D1' stroke-width='2.2'/%3E%3Ccircle cx='235' cy='235' r='8'/%3E%3C/g%3E%3C/svg%3E")
      center / contain no-repeat !important;
  }



  /* ========================================================
     WATCHKEEPING — OCEAN / SONAR LINES
     ======================================================== */

  .stcw1-main .stcw1-watch::after{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:1 !important;
    pointer-events:none !important;

    opacity:.040 !important;

    background-image:
      repeating-radial-gradient(
        ellipse at 92% 50%,
        transparent 0 36px,
        rgba(0,78,124,.55) 37px 38px,
        transparent 39px 73px
      ) !important;
  }



  /* ========================================================
     PRACTICAL CHECK — SUBTLE ANCHOR WATERMARK
     ======================================================== */

  .stcw1-main .stcw1-check::after{
    content:"" !important;

    position:absolute !important;

    width:390px !important;
    height:390px !important;

    left:-75px !important;
    bottom:-135px !important;

    z-index:1 !important;
    pointer-events:none !important;

    opacity:.050 !important;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23004E7C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='200' cy='74' r='24'/%3E%3Cpath d='M200 98v188M145 150h110M200 286l-74-57M200 286l74-57M126 229c0 54 33 94 74 94s74-40 74-94'/%3E%3C/g%3E%3C/svg%3E")
      center / contain no-repeat !important;
  }



  /* ========================================================
     DARK SECTIONS — COMMON TEXTURE
     CHAPTERS + SPECIAL + 2026 UPDATE
     ======================================================== */

  .stcw1-main .stcw1-chapters,
  .stcw1-main .stcw1-special,
  .stcw1-main .stcw1-update{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
  }


  .stcw1-main .stcw1-chapters > .stcw1-shell,
  .stcw1-main .stcw1-special > .stcw1-shell,
  .stcw1-main .stcw1-update > .stcw1-shell{
    position:relative !important;
    z-index:3 !important;
  }


  .stcw1-main .stcw1-chapters::before,
  .stcw1-main .stcw1-special::before,
  .stcw1-main .stcw1-update::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:0 !important;
    pointer-events:none !important;

    opacity:.13 !important;

    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='950' height='330' viewBox='0 0 950 330'%3E%3Cg fill='none' stroke='%2384D9F9' stroke-width='1'%3E%3Cpath opacity='.22' d='M0 70C110 18 190 124 302 70s207-52 321 0 195 47 327-3'/%3E%3Cpath opacity='.15' d='M0 124c110-48 195 48 307 0s207-48 319 0 198 47 324-2'/%3E%3Cpath opacity='.10' d='M0 184c104-43 193 43 300 0s205-43 316 0 199 42 334 1'/%3E%3Cpath opacity='.07' d='M0 247c101-38 188 38 292 0s203-38 310 0 198 38 348 0'/%3E%3C/g%3E%3C/svg%3E") !important;

    background-repeat:repeat !important;
    background-size:950px 330px !important;
  }



  /* Chapters — large compass/radar */
  .stcw1-main .stcw1-chapters::after{
    content:"" !important;

    position:absolute !important;

    width:620px !important;
    height:620px !important;

    right:-190px !important;
    top:-170px !important;

    z-index:1 !important;
    pointer-events:none !important;

    opacity:.070 !important;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 620'%3E%3Cg fill='none' stroke='%237ED7F8'%3E%3Ccircle cx='310' cy='310' r='250'/%3E%3Ccircle cx='310' cy='310' r='180'/%3E%3Ccircle cx='310' cy='310' r='110'/%3E%3Cpath d='M310 40v540M40 310h540M120 120l380 380M500 120L120 500' stroke-width='.8'/%3E%3Cpath d='M310 310L472 162' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E")
      center / contain no-repeat !important;
  }



  /* Special ships — wave / navigation bearings */
  .stcw1-main .stcw1-special::after{
    content:"" !important;

    position:absolute !important;

    width:580px !important;
    height:430px !important;

    left:-140px !important;
    bottom:-130px !important;

    z-index:1 !important;
    pointer-events:none !important;

    opacity:.065 !important;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 580 430'%3E%3Cg fill='none' stroke='%237ED7F8' stroke-width='1.5'%3E%3Cpath d='M32 310c58-45 112 45 170 0s112-45 170 0 112 45 176 0'/%3E%3Cpath opacity='.7' d='M32 344c58-45 112 45 170 0s112-45 170 0 112 45 176 0'/%3E%3Ccircle cx='372' cy='130' r='80'/%3E%3Ccircle cx='372' cy='130' r='47'/%3E%3Cpath d='M372 50v160M292 130h160M372 130l55-46'/%3E%3C/g%3E%3C/svg%3E")
      center / contain no-repeat !important;
  }



  /* 2026 update — modern route/chart lines */
  .stcw1-main .stcw1-update::after{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:1 !important;
    pointer-events:none !important;

    opacity:.055 !important;

    background-image:
      linear-gradient(
        115deg,
        transparent 0 61%,
        rgba(126,215,248,.38) 61.1% 61.2%,
        transparent 61.3% 100%
      ),
      linear-gradient(
        65deg,
        transparent 0 79%,
        rgba(126,215,248,.24) 79.1% 79.2%,
        transparent 79.3% 100%
      ) !important;
  }



  /* ========================================================
     QUICK NAV — VERY LIGHT CHART GRID
     ======================================================== */

  .stcw1-main .stcw1-nav{
    position:relative !important;
    overflow:hidden !important;

    background:
      linear-gradient(
        180deg,
        #FFFFFF 0%,
        #FAFCFD 100%
      ) !important;
  }


  .stcw1-main .stcw1-nav::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    pointer-events:none !important;

    opacity:.035 !important;

    background-image:
      linear-gradient(rgba(0,78,124,.8) 1px,transparent 1px),
      linear-gradient(90deg,rgba(0,78,124,.8) 1px,transparent 1px) !important;

    background-size:42px 42px !important;
  }


  .stcw1-main .stcw1-nav > .stcw1-shell{
    position:relative !important;
    z-index:2 !important;
  }

}


/* ==========================================================
   STCW 2010 — MARITIME TEXTURE CONTRAST REFINEMENT
   Stronger visibility while remaining premium/subtle
   ========================================================== */

@media (min-width:1101px){

  /* --------------------------------------------------------
     LIGHT SECTIONS
     Nautical contour / wave texture
     -------------------------------------------------------- */

  .stcw1-main .stcw1-intro::before,
  .stcw1-main .stcw1-current::before,
  .stcw1-main .stcw1-pathways::before,
  .stcw1-main .stcw1-safety::before,
  .stcw1-main .stcw1-certs::before,
  .stcw1-main .stcw1-revalidation::before,
  .stcw1-main .stcw1-watch::before,
  .stcw1-main .stcw1-check::before,
  .stcw1-main .stcw1-disclaimer::before{
    opacity:.155 !important;
  }


  /* Large individual maritime motifs */

  .stcw1-main .stcw1-intro::after{
    opacity:.09 !important;
  }

  .stcw1-main .stcw1-pathways::after{
    opacity:.09 !important;
  }

  .stcw1-main .stcw1-safety::after{
    opacity:.08 !important;
  }

  .stcw1-main .stcw1-certs::after{
    opacity:.08 !important;
  }

  .stcw1-main .stcw1-revalidation::after{
    opacity:.085 !important;
  }

  .stcw1-main .stcw1-watch::after{
    opacity:.065 !important;
  }

  .stcw1-main .stcw1-check::after{
    opacity:.08 !important;
  }


  /* --------------------------------------------------------
     DARK MARITIME SECTIONS
     Slightly stronger cyan chart texture
     -------------------------------------------------------- */

  .stcw1-main .stcw1-chapters::before,
  .stcw1-main .stcw1-special::before,
  .stcw1-main .stcw1-update::before{
    opacity:.19 !important;
  }


  .stcw1-main .stcw1-chapters::after{
    opacity:.105 !important;
  }

  .stcw1-main .stcw1-special::after{
    opacity:.10 !important;
  }

  .stcw1-main .stcw1-update::after{
    opacity:.08 !important;
  }


  /* --------------------------------------------------------
     QUICK NAVIGATION CHART GRID
     -------------------------------------------------------- */

  .stcw1-main .stcw1-nav::before{
    opacity:.055 !important;
  }


  /* --------------------------------------------------------
     HERO
     Keep premium but make chart/radar detail more apparent
     -------------------------------------------------------- */

  .stcw1-main .stcw1-hero::after{
    opacity:1 !important;
  }

}



/* ==========================================================
   STCW 2010 — FINAL HERO BACKGROUND
   Generated maritime chart / STCW guide image
   ========================================================== */

@media (min-width:1101px){

  .stcw1-main .stcw1-hero{
    position:relative !important;
    overflow:hidden !important;
    background:#032338 !important;
  }


  .stcw1-main .stcw1-hero::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:-3 !important;
    pointer-events:none !important;

    background-image:
      linear-gradient(
        90deg,
        rgba(2,27,45,.67) 0%,
        rgba(2,30,48,.42) 30%,
        rgba(2,31,48,.16) 54%,
        rgba(2,28,44,.08) 72%,
        rgba(2,25,40,.13) 100%
      ),
      url("/assets/images/hero-stcw-2010.webp?v=20260922-212922") !important;

    background-position:
      center center,
      center center !important;

    background-repeat:
      no-repeat,
      no-repeat !important;

    background-size:
      cover,
      cover !important;
  }


  /* Remove old generated wave/radar texture from hero only */
  .stcw1-main .stcw1-hero::after{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:-2 !important;
    pointer-events:none !important;

    opacity:1 !important;

    background-image:
      linear-gradient(
        180deg,
        rgba(0,24,39,.02) 0%,
        rgba(0,24,39,0) 63%,
        rgba(0,20,34,.22) 100%
      ) !important;

    background-repeat:no-repeat !important;
    background-size:cover !important;
  }

}


/* ==========================================================
   STCW QUICK NAV — PREMIUM DARK BLUE HOVER
   ========================================================== */

@media (min-width:1101px){

  .stcw1-main .stcw1-nav-card{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;

    transition:
      transform .32s cubic-bezier(.22,.61,.36,1),
      border-color .32s ease,
      box-shadow .32s ease,
      color .32s ease !important;
  }


  /* dark-blue animated layer */
  .stcw1-main .stcw1-nav-card::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:-1 !important;
    pointer-events:none !important;

    opacity:0 !important;

    background:
      radial-gradient(
        circle at 88% 16%,
        rgba(0,132,209,.28),
        transparent 42%
      ),
      linear-gradient(
        135deg,
        #0A3A59 0%,
        #06314C 46%,
        #002B49 100%
      ) !important;

    transition:opacity .32s ease !important;
  }


  .stcw1-main .stcw1-nav-card:hover{
    transform:translateY(-3px) !important;

    border-color:#258FC4 !important;

    box-shadow:
      0 14px 30px rgba(0,43,73,.16),
      0 4px 10px rgba(0,43,73,.07) !important;
  }


  .stcw1-main .stcw1-nav-card:hover::before{
    opacity:1 !important;
  }


  /* number */
  .stcw1-main .stcw1-nav-card span{
    transition:color .32s ease !important;
  }

  .stcw1-main .stcw1-nav-card:hover span{
    color:#65D2FA !important;
  }


  /* title */
  .stcw1-main .stcw1-nav-card b{
    transition:color .32s ease !important;
  }

  .stcw1-main .stcw1-nav-card:hover b{
    color:#FFFFFF !important;
  }

}


/* ==========================================================
   STCW CERTIFICATION PATHWAYS — PREMIUM DARK HOVER
   ========================================================== */

@media (min-width:1101px){

  .stcw1-main .stcw1-path{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;

    transition:
      transform .34s cubic-bezier(.22,.61,.36,1),
      border-color .34s ease,
      box-shadow .34s ease !important;
  }


  /* Dark navy hover layer */
  .stcw1-main .stcw1-path::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:0 !important;
    pointer-events:none !important;

    opacity:0 !important;

    background:
      radial-gradient(
        circle at 88% 10%,
        rgba(0,132,209,.23),
        transparent 42%
      ),
      linear-gradient(
        135deg,
        #0A3B59 0%,
        #06324D 48%,
        #002B49 100%
      ) !important;

    transition:opacity .34s ease !important;
  }


  /* Keep all actual content above hover layer */
  .stcw1-main .stcw1-path > *{
    position:relative !important;
    z-index:2 !important;
  }


  .stcw1-main .stcw1-path:hover{
    transform:translateY(-4px) !important;

    border-color:#238EC3 !important;

    box-shadow:
      0 18px 42px rgba(0,43,73,.16),
      0 5px 14px rgba(0,43,73,.07) !important;
  }


  .stcw1-main .stcw1-path:hover::before{
    opacity:1 !important;
  }


  /* Department label */
  .stcw1-main .stcw1-path-label{
    transition:color .34s ease !important;
  }

  .stcw1-main .stcw1-path:hover .stcw1-path-label{
    color:#65D1FA !important;
  }


  /* Card title */
  .stcw1-main .stcw1-path h3{
    transition:color .34s ease !important;
  }

  .stcw1-main .stcw1-path:hover h3{
    color:#FFFFFF !important;
  }


  /* Course / regulation text */
  .stcw1-main .stcw1-reg-list li{
    transition:
      color .34s ease,
      border-color .34s ease !important;
  }

  .stcw1-main .stcw1-path:hover .stcw1-reg-list li{
    color:rgba(255,255,255,.82) !important;
    border-color:rgba(255,255,255,.12) !important;
  }


  /* Regulation pill */
  .stcw1-main .stcw1-reg{
    transition:
      color .34s ease,
      background .34s ease,
      border-color .34s ease,
      box-shadow .34s ease !important;
  }

  .stcw1-main .stcw1-path:hover .stcw1-reg{
    color:#72D6FA !important;

    background:rgba(0,132,209,.14) !important;

    border-color:rgba(87,203,247,.45) !important;

    box-shadow:
      inset 0 0 0 1px rgba(87,203,247,.05) !important;
  }

}


/* ==========================================================
   STCW — SPECIAL SHIP TRAINING CARDS
   PREMIUM GLASS / CYAN HOVER
   ========================================================== */

@media (min-width:1101px){

  .stcw1-main .stcw1-special-card{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;

    transition:
      transform .34s cubic-bezier(.22,.61,.36,1),
      border-color .34s ease,
      background .34s ease,
      box-shadow .34s ease !important;
  }


  /* premium hover illumination */
  .stcw1-main .stcw1-special-card::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:0 !important;
    pointer-events:none !important;

    opacity:0 !important;

    background:
      radial-gradient(
        circle at 88% 12%,
        rgba(82,205,248,.18) 0%,
        rgba(0,132,209,.08) 30%,
        transparent 58%
      ),
      linear-gradient(
        145deg,
        rgba(0,132,209,.10),
        rgba(0,43,73,.20)
      ) !important;

    transition:opacity .34s ease !important;
  }


  .stcw1-main .stcw1-special-card > *{
    position:relative !important;
    z-index:2 !important;
  }


  .stcw1-main .stcw1-special-card:hover{
    transform:translateY(-5px) !important;

    border-color:rgba(91,207,249,.48) !important;

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

    box-shadow:
      0 18px 38px rgba(0,18,31,.22),
      0 0 0 1px rgba(66,191,239,.05),
      0 0 24px rgba(0,132,209,.08) !important;
  }


  .stcw1-main .stcw1-special-card:hover::before{
    opacity:1 !important;
  }


  /* regulation pill */
  .stcw1-main .stcw1-special-card span{
    transition:
      color .34s ease,
      border-color .34s ease,
      background .34s ease,
      box-shadow .34s ease !important;
  }

  .stcw1-main .stcw1-special-card:hover span{
    color:#8BE0FF !important;

    border-color:rgba(98,211,250,.58) !important;

    background:rgba(0,132,209,.15) !important;

    box-shadow:
      0 0 14px rgba(72,198,244,.08) !important;
  }


  /* title */
  .stcw1-main .stcw1-special-card h3{
    transition:
      color .34s ease,
      transform .34s ease !important;
  }

  .stcw1-main .stcw1-special-card:hover h3{
    color:#FFFFFF !important;
    transform:translateX(2px) !important;
  }


  /* description */
  .stcw1-main .stcw1-special-card p{
    transition:color .34s ease !important;
  }

  .stcw1-main .stcw1-special-card:hover p{
    color:rgba(255,255,255,.82) !important;
  }

}


/* ==========================================================
   STCW — COC / COP / RECOGNITION
   PREMIUM PHOTOGRAPHIC CARDS + DARK HOVER
   ========================================================== */

@media (min-width:1101px){

  .stcw1-main .stcw1-cert{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;

    min-height:240px !important;

    background:#FFFFFF !important;

    border:1px solid #D5E4EC !important;

    transition:
      transform .38s cubic-bezier(.22,.61,.36,1),
      border-color .38s ease,
      box-shadow .38s ease !important;
  }


  /* --------------------------------------------------------
     PHOTO LAYER
     -------------------------------------------------------- */

  .stcw1-main .stcw1-cert::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:0 !important;
    pointer-events:none !important;

    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center center !important;

    transform:scale(1.01) !important;

    transition:
      transform .55s cubic-bezier(.22,.61,.36,1),
      filter .45s ease !important;
  }


  /* 01 — Certificate of Competency */
  .stcw1-main .stcw1-cert:nth-child(1)::before{
    background-image:
      url("/assets/images/services/related/stcw-card-certificate-of-competency.webp") !important;

    background-position:center center !important;
  }


  /* 02 — Certificate of Proficiency */
  .stcw1-main .stcw1-cert:nth-child(2)::before{
    background-image:
      url("/assets/images/services/related/stcw-card-certificate-of-proficiency.webp") !important;

    background-position:center center !important;
  }


  /* 03 — Recognition */
  .stcw1-main .stcw1-cert:nth-child(3)::before{
    background-image:
      url("/assets/images/services/related/stcw-card-recognition-endorsement.webp") !important;

    background-position:center center !important;
  }


  /* --------------------------------------------------------
     NORMAL STATE — LIGHT PREMIUM FADE
     Leaves photograph visible mainly toward the right
     -------------------------------------------------------- */

  .stcw1-main .stcw1-cert::after{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:1 !important;
    pointer-events:none !important;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.99) 0%,
        rgba(255,255,255,.98) 34%,
        rgba(255,255,255,.89) 56%,
        rgba(255,255,255,.58) 76%,
        rgba(255,255,255,.20) 100%
      ) !important;

    transition:
      background .38s ease,
      opacity .38s ease !important;
  }


  /* real HTML content stays above image */
  .stcw1-main .stcw1-cert > *{
    position:relative !important;
    z-index:3 !important;
  }


  .stcw1-main .stcw1-cert span{
    transition:
      color .35s ease,
      transform .35s ease !important;
  }


  .stcw1-main .stcw1-cert h3{
    max-width:75% !important;

    transition:
      color .35s ease,
      transform .35s ease !important;
  }


  .stcw1-main .stcw1-cert p{
    max-width:72% !important;

    transition:
      color .35s ease !important;
  }


  /* --------------------------------------------------------
     HOVER — DEEP MARITIME BLUE
     -------------------------------------------------------- */

  .stcw1-main .stcw1-cert:hover{
    transform:translateY(-5px) !important;

    border-color:#198FC7 !important;

    box-shadow:
      0 20px 44px rgba(0,43,73,.18),
      0 5px 14px rgba(0,43,73,.08),
      0 0 0 1px rgba(48,183,236,.04) !important;
  }


  .stcw1-main .stcw1-cert:hover::before{
    transform:scale(1.05) !important;

    filter:
      brightness(.62)
      saturate(.88)
      contrast(1.08) !important;
  }


  .stcw1-main .stcw1-cert:hover::after{
    background:
      linear-gradient(
        90deg,
        rgba(0,43,73,.97) 0%,
        rgba(3,48,76,.94) 39%,
        rgba(3,52,82,.82) 67%,
        rgba(0,43,73,.56) 100%
      ) !important;
  }


  /* label */
  .stcw1-main .stcw1-cert:hover span{
    color:#69D5FA !important;
    transform:translateX(2px) !important;
  }


  /* title */
  .stcw1-main .stcw1-cert:hover h3{
    color:#FFFFFF !important;
    transform:translateX(2px) !important;
  }


  /* description */
  .stcw1-main .stcw1-cert:hover p{
    color:rgba(255,255,255,.82) !important;
  }

}



/* ==========================================================
   STCW — REVALIDATION & CONTINUED COMPETENCE
   PHOTOGRAPHIC BACKGROUND + PREMIUM HOVER
   ========================================================== */

@media (min-width:1101px){

  /* --------------------------------------------------------
     REAL PHOTOGRAPHIC SECTION BACKGROUND
     -------------------------------------------------------- */

  .stcw1-main .stcw1-revalidation{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;

    background-image:
      linear-gradient(
        90deg,
        rgba(247,250,252,.93) 0%,
        rgba(247,250,252,.88) 32%,
        rgba(247,250,252,.79) 62%,
        rgba(247,250,252,.72) 100%
      ),
      url("/assets/images/stcw-revalidation-section-bg.webp?v=20260922-214938") !important;

    background-position:
      center center,
      center center !important;

    background-repeat:
      no-repeat,
      no-repeat !important;

    background-size:
      cover,
      cover !important;

    background-attachment:scroll !important;
  }


  /* Disable previous generated wave texture on THIS section */
  .stcw1-main .stcw1-revalidation::before{
    content:none !important;
    display:none !important;
    background:none !important;
  }


  /* Disable previous clock/compass watermark on THIS section */
  .stcw1-main .stcw1-revalidation::after{
    content:none !important;
    display:none !important;
    background:none !important;
  }


  .stcw1-main .stcw1-revalidation > .stcw1-shell{
    position:relative !important;
    z-index:3 !important;
  }


  /* --------------------------------------------------------
     CARD BASE
     -------------------------------------------------------- */

  .stcw1-main .stcw1-reval-item{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;

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

    border:1px solid rgba(190,215,227,.90) !important;

    box-shadow:
      0 7px 22px rgba(4,43,67,.035) !important;

    backdrop-filter:blur(3px) !important;

    transition:
      transform .34s cubic-bezier(.22,.61,.36,1),
      border-color .34s ease,
      box-shadow .34s ease,
      background .34s ease !important;
  }


  /* Premium navy hover layer */
  .stcw1-main .stcw1-reval-item::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:0 !important;
    pointer-events:none !important;

    opacity:0 !important;

    background:
      radial-gradient(
        circle at 92% 14%,
        rgba(0,153,220,.22) 0%,
        rgba(0,132,209,.08) 32%,
        transparent 55%
      ),
      linear-gradient(
        135deg,
        #0B3B59 0%,
        #06334E 46%,
        #002B49 100%
      ) !important;

    transition:opacity .34s ease !important;
  }


  .stcw1-main .stcw1-reval-item > *{
    position:relative !important;
    z-index:2 !important;
  }


  /* --------------------------------------------------------
     HOVER
     -------------------------------------------------------- */

  .stcw1-main .stcw1-reval-item:hover{
    transform:translateY(-4px) !important;

    border-color:#258FC4 !important;

    box-shadow:
      0 18px 40px rgba(0,43,73,.16),
      0 5px 14px rgba(0,43,73,.07),
      0 0 0 1px rgba(59,190,239,.04) !important;
  }


  .stcw1-main .stcw1-reval-item:hover::before{
    opacity:1 !important;
  }


  .stcw1-main .stcw1-reval-item b{
    transition:
      color .34s ease,
      transform .34s ease !important;
  }


  .stcw1-main .stcw1-reval-item:hover b{
    color:#FFFFFF !important;
    transform:translateX(2px) !important;
  }


  .stcw1-main .stcw1-reval-item p{
    transition:color .34s ease !important;
  }


  .stcw1-main .stcw1-reval-item:hover p{
    color:rgba(255,255,255,.80) !important;
  }

}


/* ==========================================================
   STCW — MEDICAL / FITNESS + PRACTICAL CHECK
   PREMIUM DARK NAVY HOVER
   ========================================================== */

@media (min-width:1101px){

  /* ========================================================
     MEDICAL FITNESS / FITNESS FOR DUTY
     ======================================================== */

  .stcw1-main .stcw1-watch-card{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;

    transition:
      transform .34s cubic-bezier(.22,.61,.36,1),
      border-color .34s ease,
      box-shadow .34s ease !important;
  }


  .stcw1-main .stcw1-watch-card::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:0 !important;
    pointer-events:none !important;

    opacity:0 !important;

    background:
      radial-gradient(
        circle at 90% 12%,
        rgba(0,151,218,.21) 0%,
        rgba(0,132,209,.07) 34%,
        transparent 58%
      ),
      linear-gradient(
        135deg,
        #0A3A58 0%,
        #06324D 48%,
        #002B49 100%
      ) !important;

    transition:opacity .34s ease !important;
  }


  .stcw1-main .stcw1-watch-card > *{
    position:relative !important;
    z-index:2 !important;
  }


  .stcw1-main .stcw1-watch-card:hover{
    transform:translateY(-4px) !important;

    border-color:#258FC4 !important;

    box-shadow:
      0 18px 40px rgba(0,43,73,.16),
      0 5px 14px rgba(0,43,73,.07) !important;
  }


  .stcw1-main .stcw1-watch-card:hover::before{
    opacity:1 !important;
  }


  .stcw1-main .stcw1-watch-card span{
    transition:
      color .34s ease,
      transform .34s ease !important;
  }


  .stcw1-main .stcw1-watch-card:hover span{
    color:#68D2F9 !important;
    transform:translateX(2px) !important;
  }


  .stcw1-main .stcw1-watch-card h3{
    transition:
      color .34s ease,
      transform .34s ease !important;
  }


  .stcw1-main .stcw1-watch-card:hover h3{
    color:#FFFFFF !important;
    transform:translateX(2px) !important;
  }


  .stcw1-main .stcw1-watch-card p{
    transition:color .34s ease !important;
  }


  .stcw1-main .stcw1-watch-card:hover p{
    color:rgba(255,255,255,.81) !important;
  }



  /* ========================================================
     PRACTICAL CHECK — SIX CARDS
     ======================================================== */

  .stcw1-main .stcw1-check-card{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;

    transition:
      transform .34s cubic-bezier(.22,.61,.36,1),
      border-color .34s ease,
      box-shadow .34s ease !important;
  }


  .stcw1-main .stcw1-check-card::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:0 !important;
    pointer-events:none !important;

    opacity:0 !important;

    background:
      radial-gradient(
        circle at 88% 18%,
        rgba(0,160,222,.22) 0%,
        rgba(0,132,209,.07) 34%,
        transparent 58%
      ),
      linear-gradient(
        135deg,
        #0B3B59 0%,
        #06324D 48%,
        #002B49 100%
      ) !important;

    transition:opacity .34s ease !important;
  }


  .stcw1-main .stcw1-check-card > *{
    position:relative !important;
    z-index:2 !important;
  }


  .stcw1-main .stcw1-check-card:hover{
    transform:translateY(-4px) !important;

    border-color:#258FC4 !important;

    box-shadow:
      0 16px 36px rgba(0,43,73,.15),
      0 4px 12px rgba(0,43,73,.06) !important;
  }


  .stcw1-main .stcw1-check-card:hover::before{
    opacity:1 !important;
  }


  /* number */
  .stcw1-main .stcw1-check-card span{
    transition:
      color .34s ease,
      transform .34s ease !important;
  }


  .stcw1-main .stcw1-check-card:hover span{
    color:#68D2F9 !important;
    transform:translateX(2px) !important;
  }


  /* main text */
  .stcw1-main .stcw1-check-card b{
    transition:
      color .34s ease,
      transform .34s ease !important;
  }


  .stcw1-main .stcw1-check-card:hover b{
    color:#FFFFFF !important;
    transform:translateX(2px) !important;
  }

}


/* ==========================================================
   STCW — REVALIDATION
   FINAL DESKTOP PROPORTION + SYMMETRY
   ========================================================== */

@media (min-width:1101px){

  /* tighter, more balanced section */
  .stcw1-main .stcw1-revalidation{
    padding-top:72px !important;
    padding-bottom:74px !important;

    background-position:
      center center,
      center center !important;
  }


  /* exact two-column balance */
  .stcw1-main .stcw1-revalidation-grid{
    display:grid !important;

    grid-template-columns:
      minmax(0,.80fr)
      minmax(0,1.20fr) !important;

    gap:72px !important;

    align-items:center !important;
  }


  /* ---------------------------------------------
     LEFT HEADING
     --------------------------------------------- */

  .stcw1-main .stcw1-revalidation-grid > div:first-child{
    width:100% !important;
    max-width:570px !important;

    align-self:center !important;
  }


  .stcw1-main .stcw1-revalidation-grid > div:first-child
  .stcw1-eyebrow{
    margin-bottom:15px !important;
  }


  .stcw1-main .stcw1-revalidation-grid > div:first-child
  .stcw1-title{
    width:100% !important;
    max-width:560px !important;

    margin:0 !important;

    font-size:42px !important;
    line-height:1.035 !important;
    letter-spacing:-.043em !important;
  }


  .stcw1-main .stcw1-revalidation-grid > div:first-child
  .stcw1-rule{
    margin-top:19px !important;
  }


  /* ---------------------------------------------
     RIGHT CARDS
     Equal height / spacing / internal proportion
     --------------------------------------------- */

  .stcw1-main .stcw1-reval-list{
    display:grid !important;

    grid-template-columns:1fr !important;
    grid-template-rows:repeat(4,minmax(0,1fr)) !important;

    gap:14px !important;

    width:100% !important;
    max-width:none !important;

    align-self:center !important;
  }


  .stcw1-main .stcw1-reval-item{
    width:100% !important;

    min-height:101px !important;

    padding:20px 24px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    border-radius:7px !important;
  }


  .stcw1-main .stcw1-reval-item b{
    display:block !important;

    margin:0 !important;

    font-size:13px !important;
    line-height:1.3 !important;
  }


  .stcw1-main .stcw1-reval-item p{
    width:100% !important;
    max-width:none !important;

    margin:7px 0 0 !important;

    font-size:10.5px !important;
    line-height:1.58 !important;
  }


  /* keep every card visually identical */
  .stcw1-main .stcw1-reval-item:nth-child(1),
  .stcw1-main .stcw1-reval-item:nth-child(2),
  .stcw1-main .stcw1-reval-item:nth-child(3),
  .stcw1-main .stcw1-reval-item:nth-child(4){
    min-height:101px !important;
  }

}


/* ==========================================================
   STCW QUICK NAV
   SIX INDIVIDUAL PREMIUM VECTOR ICONS
   ========================================================== */

@media (min-width:1101px){

  /* give icon its own balanced area */
  .stcw1-main .stcw1-nav-card{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;

    padding:
      17px
      66px
      17px
      16px !important;
  }


  /* text must remain above all decorative layers */
  .stcw1-main .stcw1-nav-card > span,
  .stcw1-main .stcw1-nav-card > b{
    position:relative !important;
    z-index:3 !important;
  }


  /* shared vector placement */
  .stcw1-main .stcw1-nav-card::after{
    content:"" !important;

    position:absolute !important;

    right:16px !important;
    top:50% !important;

    width:39px !important;
    height:39px !important;

    transform:
      translateY(-50%)
      scale(1) !important;

    z-index:2 !important;

    pointer-events:none !important;

    opacity:.22 !important;

    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;

    transition:
      opacity .32s ease,
      transform .32s cubic-bezier(.22,.61,.36,1),
      filter .32s ease !important;
  }


  /* ========================================================
     01 — STCW CHAPTERS
     OPEN BOOK / REFERENCE GUIDE
     ======================================================== */

  .stcw1-main .stcw1-nav-card:nth-child(1)::after{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230084D1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 15h18c5 0 8 3 8 8v28c0-5-3-8-8-8H8V15z'/%3E%3Cpath d='M56 15H38c-5 0-8 3-8 8v28c0-5 3-8 8-8h18V15z'/%3E%3Cpath d='M16 24h10M16 31h10M38 24h10M38 31h10' opacity='.72'/%3E%3C/svg%3E") !important;
  }


  /* ========================================================
     02 — RANK & CERTIFICATE PATHWAYS
     NAVIGATION ROUTE
     ======================================================== */

  .stcw1-main .stcw1-nav-card:nth-child(2)::after{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230084D1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='15' cy='17' r='5'/%3E%3Ccircle cx='49' cy='47' r='5'/%3E%3Cpath d='M20 17h8c8 0 8 11 16 11h5'/%3E%3Cpath d='M44 47h-8c-8 0-8-11-16-11h-5'/%3E%3Cpath d='M42 23l7 5-7 5'/%3E%3C/svg%3E") !important;
  }


  /* ========================================================
     03 — SAFETY & SECURITY TRAINING
     SHIELD / CHECK
     ======================================================== */

  .stcw1-main .stcw1-nav-card:nth-child(3)::after{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230084D1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 8l19 8v13c0 13-8 22-19 28-11-6-19-15-19-28V16l19-8z'/%3E%3Cpath d='M22 31l7 7 14-17'/%3E%3C/svg%3E") !important;
  }


  /* ========================================================
     04 — SPECIAL SHIP TRAINING
     VESSEL
     ======================================================== */

  .stcw1-main .stcw1-nav-card:nth-child(4)::after{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230084D1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 39h42l-7 10H18l-7-10z'/%3E%3Cpath d='M21 39V20h23v19'/%3E%3Cpath d='M28 20v-7h9v7'/%3E%3Cpath d='M17 54c4-2 7-2 11 0 4-2 7-2 11 0 4-2 7-2 11 0'/%3E%3C/svg%3E") !important;
  }


  /* ========================================================
     05 — REVALIDATION & REFRESHERS
     REFRESH / RECERTIFICATION
     ======================================================== */

  .stcw1-main .stcw1-nav-card:nth-child(5)::after{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230084D1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M51 21V10l-7 7a22 22 0 1 0 6 24'/%3E%3Cpath d='M51 10H40'/%3E%3Ccircle cx='32' cy='32' r='11'/%3E%3Cpath d='M32 25v8l6 4'/%3E%3C/svg%3E") !important;
  }


  /* ========================================================
     06 — CURRENT 2026 UPDATE
     CALENDAR / UPDATE
     ======================================================== */

  .stcw1-main .stcw1-nav-card:nth-child(6)::after{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230084D1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='10' y='15' width='44' height='39' rx='5'/%3E%3Cpath d='M19 10v10M45 10v10M10 26h44'/%3E%3Cpath d='M21 36h8M35 36h8M21 44h8'/%3E%3Cpath d='M39 43l3 3 6-7'/%3E%3C/svg%3E") !important;
  }


  /* ========================================================
     HOVER
     Existing navy card hover remains unchanged.
     Icon becomes cleaner cyan / white.
     ======================================================== */

  .stcw1-main .stcw1-nav-card:hover::after{
    opacity:.72 !important;

    transform:
      translateY(-50%)
      scale(1.08) !important;

    filter:
      brightness(0)
      invert(88%)
      sepia(24%)
      saturate(1141%)
      hue-rotate(163deg)
      brightness(102%) !important;
  }

}


/* ==========================================================
   STCW — IMPORTANT REGULATORY NOTE
   INTEGRATED PREMIUM SECTION
   ========================================================== */

@media (min-width:1101px){

  .stcw1-main .stcw1-disclaimer{
    position:relative !important;
    overflow:hidden !important;

    padding-top:46px !important;
    padding-bottom:46px !important;

    background:
      linear-gradient(
        180deg,
        #F2F7FA 0%,
        #EAF3F7 100%
      ) !important;

    border-top:1px solid rgba(0,78,124,.07) !important;
  }


  /* subtle maritime continuation */
  .stcw1-main .stcw1-disclaimer::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    z-index:0 !important;
    pointer-events:none !important;

    opacity:.13 !important;

    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='220' viewBox='0 0 960 220'%3E%3Cg fill='none' stroke='%23004E7C' stroke-width='1'%3E%3Cpath opacity='.23' d='M0 56C105 18 185 93 292 56s186-38 292 0 194 36 376-3'/%3E%3Cpath opacity='.16' d='M0 101c101-35 184 36 286 0s185-36 288 0 193 36 386 0'/%3E%3Cpath opacity='.10' d='M0 151c98-32 181 33 280 0s184-33 284 0 192 32 396 0'/%3E%3C/g%3E%3C/svg%3E") !important;

    background-repeat:repeat !important;
    background-size:960px 220px !important;
  }


  .stcw1-main .stcw1-disclaimer > .stcw1-shell{
    position:relative !important;
    z-index:2 !important;
  }


  .stcw1-main .stcw1-disclaimer-box{
    padding:24px 28px !important;

    border:
      1px solid rgba(120,169,194,.40) !important;

    border-left:
      3px solid #0084D1 !important;

    border-radius:7px !important;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,.82),
        rgba(240,248,252,.90)
      ) !important;

    box-shadow:
      0 10px 30px rgba(0,43,73,.045) !important;

    backdrop-filter:
      blur(5px) !important;
  }


  .stcw1-main .stcw1-disclaimer-box b{
    color:#0B3852 !important;
  }


  .stcw1-main .stcw1-disclaimer-box p{
    color:#4F6D7E !important;
  }

}