/* =========================================================
   SEA LICENSING
   TRAINING SERVICES — PREMIUM DESKTOP V1
   ========================================================= */

.tr1-main{
  --navy:#002B49;
  --deep:#052C43;
  --ocean:#004E7C;
  --blue:#0084D1;
  --cyan:#50CAF7;
  --pale:#F4F8FB;
  --text:#10364D;
  --muted:#5E7889;

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

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

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

.tr1-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;
}

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

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


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

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

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

  background:
    linear-gradient(
      90deg,
      rgba(2,29,47,.98) 0%,
      rgba(2,35,56,.92) 31%,
      rgba(2,38,59,.62) 56%,
      rgba(2,31,48,.23) 80%,
      rgba(2,28,43,.09) 100%
    ),
    url("/assets/images/hero-training.jpg")
    center center / cover no-repeat;
}

.tr1-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(0,43,73,.02),
      transparent 56%,
      rgba(0,20,34,.35)
    );
}

.tr1-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
  gap:90px;
  align-items:center;
  padding:48px 0;
}

.tr1-hero-copy{
  max-width:760px;
}

.tr1-hero .tr1-eyebrow{
  color:#6CD0F8;
  margin-bottom:18px;
}

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

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

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

.tr1-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;
}

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

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

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

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

.tr1-hero-panel{
  width:100%;
  max-width:395px;
  justify-self:end;
  padding:28px;

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

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

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

  backdrop-filter:blur(12px);
}

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

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

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

.tr1-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);
}

.tr1-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;
}

.tr1-meta b{
  color:#fff;
  font-size:11px;
}


/* =========================================================
   APPROACH
   ========================================================= */

.tr1-approach{
  padding:87px 0 86px;
  background:#fff;
}

.tr1-approach-grid{
  display:grid;
  grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);
  gap:104px;
  align-items:center;
}

.tr1-approach-copy{
  max-width:600px;
}

.tr1-approach-prose{
  position:relative;
  padding-left:36px;
}

.tr1-approach-prose::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  bottom:3px;
  width:1px;
  background:
    linear-gradient(
      180deg,
      rgba(0,132,209,.07),
      rgba(0,132,209,.52),
      rgba(0,132,209,.07)
    );
}

.tr1-approach-prose p{
  max-width:650px;
  margin:0;
  color:#536E7F;
  font-size:13px;
  line-height:1.82;
}

.tr1-approach-prose p + p{
  margin-top:18px;
}


/* =========================================================
   COURSE PATHWAYS
   ========================================================= */

.tr1-courses{
  padding:83px 0 88px;

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

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

.tr1-course-heading{
  grid-column:1;
}

.tr1-courses .tr1-eyebrow{
  color:#61CDF7;
}

.tr1-courses .tr1-title{
  color:#fff;
  font-size:40px;
}

.tr1-courses-intro{
  position:relative;
  grid-column:2 / 4;
  margin:0;
  padding-left:36px;
  padding-right:40px;

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

.tr1-courses-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)
    );
}

.tr1-course-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.tr1-course-card{
  position:relative;
  min-height:340px;
  overflow:hidden;
  isolation:isolate;
  padding:28px;

  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 .32s ease,
    border-color .32s ease,
    background .32s ease;
}

.tr1-course-card:hover{
  transform:translateY(-3px);
  border-color:rgba(73,197,247,.28);
  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.082),
      rgba(255,255,255,.032)
    );
}

.tr1-course-card > *{
  position:relative;
  z-index:2;
}

.tr1-course-no{
  display:block;
  margin-bottom:24px;
  color:#55C9F6;
  font-size:9px;
  font-weight:850;
  letter-spacing:.14em;
}

.tr1-course-card h3{
  margin:0;
  color:#fff;
  font-size:20px;
  line-height:1.18;
  letter-spacing:-.02em;
}

.tr1-course-card > p{
  max-width:320px;
  margin:11px 0 0;
  color:rgba(255,255,255,.62);
  font-size:10.5px;
  line-height:1.65;
}

.tr1-list{
  margin:18px 0 0;
  padding:0;
  list-style:none;
}

.tr1-list li{
  position:relative;
  padding-left:14px;
  color:rgba(255,255,255,.84);
  font-size:10.5px;
  line-height:1.7;
}

.tr1-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#4CC8F5;
}

/* subtle training-related vectors */

.tr1-course-card::after{
  content:"";
  position:absolute;
  right:10px;
  bottom:4px;
  width:145px;
  height:145px;
  opacity:.10;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
  z-index:1;
}

.tr1-course-card:nth-child(1)::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.3'%3E%3Cpath d='M70 24l31 17v35c0 24-13 40-31 51-18-11-31-27-31-51V41l31-17z'/%3E%3Cpath d='M55 69l10 10 21-25'/%3E%3C/g%3E%3C/svg%3E");
}

.tr1-course-card:nth-child(2)::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.3'%3E%3Cpath d='M42 107h56M52 96V56h36v40M61 56V39h18v17'/%3E%3Cpath d='M38 118c8 0 8-4 16-4s8 4 16 4 8-4 16-4 8 4 16 4'/%3E%3C/g%3E%3C/svg%3E");
}

.tr1-course-card:nth-child(3)::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.3'%3E%3Cpath d='M69 27c19 25 31 42 31 61a31 31 0 1 1-62 0c0-19 12-36 31-61z'/%3E%3Cpath d='M47 111h45'/%3E%3C/g%3E%3C/svg%3E");
}

.tr1-course-card:nth-child(4)::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.3'%3E%3Ccircle cx='70' cy='70' r='35'/%3E%3Cpath d='M70 70l23-18M70 35v10M105 70H95M70 105V95M35 70h10'/%3E%3C/g%3E%3C/svg%3E");
}

.tr1-course-card:nth-child(5)::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.3'%3E%3Cpath d='M70 26l33 11v28c0 26-14 44-33 56-19-12-33-30-33-56V37l33-11z'/%3E%3Cpath d='M57 68h26M70 55v26'/%3E%3C/g%3E%3C/svg%3E");
}

.tr1-course-card:nth-child(6)::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.3'%3E%3Ccircle cx='70' cy='49' r='19'/%3E%3Cpath d='M34 113c5-27 19-42 36-42s31 15 36 42'/%3E%3Cpath d='M99 40h21M109 30v20'/%3E%3C/g%3E%3C/svg%3E");
}


/* =========================================================
   NOTICE
   ========================================================= */

.tr1-notice{
  margin-top:24px;
  padding:18px 22px;
  border:1px solid rgba(73,197,247,.18);
  border-radius:6px;
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.69);
  font-size:10.5px;
  line-height:1.65;
}


/* =========================================================
   START PREPARED
   ========================================================= */

.tr1-prepared{
  padding:86px 0 90px;
  background:linear-gradient(180deg,#FBFDFE 0%,#F4F8FB 100%);
}

.tr1-prepared-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:72px;
  align-items:center;
  margin-bottom:38px;
}

.tr1-prepared-description{
  position:relative;
  margin:0;
  padding:2px 34px 2px 36px;
  color:#536F80;
  font-size:13px;
  line-height:1.75;
}

.tr1-prepared-description::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:48px;
  transform:translateY(-50%);
  background:
    linear-gradient(
      180deg,
      rgba(0,132,209,.08),
      rgba(0,132,209,.55),
      rgba(0,132,209,.08)
    );
}

.tr1-info-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.tr1-info-card{
  position:relative;
  min-height:116px;
  overflow:hidden;
  isolation:isolate;
  padding:22px 23px;

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

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

.tr1-info-card > *{
  position:relative;
  z-index:3;
}

.tr1-info-card::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  z-index:1;
  background:
    radial-gradient(circle at 85% 15%,rgba(0,132,209,.14),transparent 40%),
    linear-gradient(135deg,#0A3554,#002B49);
  transition:opacity .35s ease;
}

.tr1-info-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,132,209,.28);
  box-shadow:0 18px 40px rgba(0,43,73,.16);
}

.tr1-info-card:hover::before{
  opacity:1;
}

.tr1-info-no{
  display:block;
  margin-bottom:13px;
  color:#0084D1;
  font-size:9px;
  font-weight:850;
  letter-spacing:.12em;
  transition:color .35s ease;
}

.tr1-info-card b{
  display:block;
  max-width:290px;
  color:#113950;
  font-size:13px;
  line-height:1.38;
  transition:color .35s ease;
}

.tr1-info-card:hover .tr1-info-no{
  color:#67D1FA;
}

.tr1-info-card:hover b{
  color:#fff;
}


/* =========================================================
   WORKFLOW
   ========================================================= */

.tr1-workflow{
  padding:86px 0 91px;
  background:
    radial-gradient(circle at 50% 120%,rgba(0,132,209,.14),transparent 37%),
    linear-gradient(135deg,#052D45 0%,#003653 55%,#04283E 100%);
}

.tr1-workflow-head{
  max-width:900px;
  margin:0 auto 68px;
  text-align:center;
}

.tr1-workflow .tr1-eyebrow{
  color:#61CDF7;
}

.tr1-workflow .tr1-title{
  color:#fff;
  font-size:42px;
}

.tr1-workflow-head p{
  max-width:720px;
  margin:17px auto 0;
  color:rgba(255,255,255,.68);
  font-size:11px;
  line-height:1.7;
}

.tr1-stepper{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding-top:44px;
}

.tr1-stepper::before{
  content:"";
  position:absolute;
  left:16.666666%;
  right:16.666666%;
  top:7px;
  height:1px;
  background:rgba(82,194,240,.30);
}

.tr1-stepper::after{
  content:"";
  position:absolute;
  left:16.666666%;
  top:7px;
  width:12%;
  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(105,211,251,0),
      rgba(132,222,255,.48),
      rgba(224,249,255,.98),
      rgba(132,222,255,.48),
      rgba(105,211,251,0)
    );

  box-shadow:
    0 0 2px rgba(181,236,255,.52),
    0 0 5px rgba(73,197,247,.24);

  animation:tr1Travel 5.6s ease-in-out infinite;
}

@keyframes tr1Travel{
  0%{
    transform:translateX(-50%);
    opacity:0;
  }

  7%{opacity:.68;}
  14%{opacity:1;}
  86%{opacity:1;}
  94%{opacity:.68;}

  100%{
    transform:translateX(505.555%);
    opacity:0;
  }
}

.tr1-step{
  position:relative;
  padding:9px 32px 0;
  text-align:center;
}

.tr1-step::before{
  content:"";
  position:absolute;
  left:50%;
  top:-44px;
  z-index:5;

  width:15px;
  height:15px;
  transform:translateX(-50%);

  border:3px solid #54CAF7;
  border-radius:50%;
  background:#07304A;

  box-shadow:0 0 0 5px rgba(0,132,209,.12);
}

.tr1-step span{
  display:block;
  margin-bottom:13px;
  color:#58CDF8;
  font-size:9px;
  font-weight:850;
  letter-spacing:.13em;
}

.tr1-step h3{
  margin:0;
  color:#fff;
  font-size:20px;
}

.tr1-step p{
  max-width:285px;
  margin:10px auto 0;
  color:rgba(255,255,255,.64);
  font-size:10.5px;
  line-height:1.65;
}


/* =========================================================
   RELATED SERVICES
   ========================================================= */

.tr1-related{
  padding:82px 0 84px;
  background:
    radial-gradient(circle at 14% 16%,rgba(0,132,209,.04),transparent 30%),
    linear-gradient(180deg,#FBFDFE 0%,#F4F8FB 100%);
}

.tr1-related-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:60px;
  align-items:end;
  margin-bottom:30px;
}

.tr1-related-head .tr1-title{
  font-size:42px;
}

.tr1-related-all{
  margin-bottom:7px;
  color:#0084D1;
  text-decoration:none;
  font-size:10px;
  font-weight:850;
}

.tr1-related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.tr1-related-card{
  position:relative;
  min-height:220px;
  padding:29px 27px 27px;

  border:1px solid #DBE6EC;
  border-radius:7px;

  background:#fff;
  text-decoration:none;

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

.tr1-related-card:hover{
  transform:translateY(-3px);
  border-color:#C5DDEA;
  box-shadow:0 17px 40px rgba(7,48,72,.07);
}

.tr1-related-card span{
  display:block;
  margin-bottom:31px;
  color:#0084D1;
  font-size:9px;
  font-weight:850;
  letter-spacing:.13em;
}

.tr1-related-card h3{
  margin:0;
  color:#092F46;
  font-size:20px;
  line-height:1.15;
}

.tr1-related-card p{
  max-width:330px;
  margin:11px 0 0;
  padding-bottom:42px;
  color:#627988;
  font-size:11px;
  line-height:1.62;
}

.tr1-related-card b{
  position:absolute;
  left:27px;
  bottom:24px;
  color:#0084D1;
  font-size:9.5px;
  font-weight:850;
}


/* =========================================================
   TABLET FALLBACK
   ========================================================= */

@media(max-width:1100px){

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

  .tr1-hero-grid,
  .tr1-approach-grid,
  .tr1-prepared-head{
    gap:46px;
  }

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

}


/* ==========================================================
   TRAINING COURSE CARDS — VECTOR PROPORTION & SYMMETRY FIX
   ========================================================== */

@media (min-width:1101px){

  .tr1-main .tr1-course-card{
    position:relative !important;
    overflow:hidden !important;
  }

  /*
     Identical optical box for every vector
  */
  .tr1-main .tr1-course-card::after{
    content:"" !important;

    position:absolute !important;
    right:24px !important;
    bottom:18px !important;

    width:112px !important;
    height:112px !important;

    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:100% 100% !important;

    opacity:.105 !important;

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

    transform:none !important;

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

  .tr1-main .tr1-course-card:hover::after{
    opacity:.15 !important;
    transform:translateY(-2px) scale(1.025) !important;
  }


  /* ======================================================
     01 — SAFETY
     Normalized shield/check
     ====================================================== */

  .tr1-main .tr1-course-card:nth-child(1)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 21l29 10v25c0 23-12 39-29 50-17-11-29-27-29-50V31l29-10z'/%3E%3Cpath d='M46 60l10 10 20-24'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* ======================================================
     02 — MEDICAL / PASSENGER
     Ship silhouette
     ====================================================== */

  .tr1-main .tr1-course-card:nth-child(2)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 73h70L83 91H38L25 73z'/%3E%3Cpath d='M42 73V49h36v24'/%3E%3Cpath d='M52 49V35h16v14'/%3E%3Cpath d='M31 99c7 0 7-4 14-4s7 4 14 4 7-4 14-4 7 4 14 4'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* ======================================================
     03 — TANKER / IGF
     Fuel droplet
     ====================================================== */

  .tr1-main .tr1-course-card:nth-child(3)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 23c18 24 29 40 29 57a29 29 0 0 1-58 0c0-17 11-33 29-57z'/%3E%3Cpath d='M43 93c10 6 24 6 34 0'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* ======================================================
     04 — OFFICER / BRIDGE
     Navigation / radar
     ====================================================== */

  .tr1-main .tr1-course-card:nth-child(4)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='60' cy='61' r='31'/%3E%3Cpath d='M60 61l21-17'/%3E%3Cpath d='M60 30v9M91 61h-9M60 92v-9M29 61h9'/%3E%3Ccircle cx='60' cy='61' r='3'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* ======================================================
     05 — SECURITY
     Security shield
     ====================================================== */

  .tr1-main .tr1-course-card:nth-child(5)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 21l29 10v25c0 23-12 39-29 50-17-11-29-27-29-50V31l29-10z'/%3E%3Cpath d='M60 46v29M46 60h28'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* ======================================================
     06 — SPECIALISED / PROFESSIONAL
     Instructor / professional
     ====================================================== */

  .tr1-main .tr1-course-card:nth-child(6)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='55' cy='45' r='17'/%3E%3Cpath d='M27 99c4-24 15-37 28-37s24 13 28 37'/%3E%3Ccircle cx='89' cy='40' r='11'/%3E%3Cpath d='M89 33v14M82 40h14'/%3E%3C/g%3E%3C/svg%3E") !important;
  }

}


/* ==========================================================
   TRAINING COURSES — SLIGHTLY LARGER LIST TEXT
   ========================================================== */

@media (min-width:1101px){

  .tr1-main .tr1-list li{
    font-size:11.5px !important;
    line-height:1.72 !important;
  }

}


/* ==========================================================
   TRAINING — COURSE REGULATION REFERENCES
   ========================================================== */

@media (min-width:1101px){

  .tr1-main .tr1-list li{
    font-size:11.5px !important;
    line-height:1.78 !important;
    padding-right:4px !important;
  }

  .tr1-main .tr1-reg{
    display:inline-block !important;

    margin-left:6px !important;
    padding:2px 6px !important;

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

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

    color:#71D2F8 !important;

    font-size:8px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    letter-spacing:.025em !important;

    white-space:nowrap !important;

    vertical-align:1px !important;
  }

  .tr1-main .tr1-course-card:hover .tr1-reg{
    border-color:rgba(84,202,247,.34) !important;
    background:rgba(0,132,209,.11) !important;
    color:#8BDDFA !important;
  }

}


/* ==========================================================
   TRAINING COURSE CARDS — TEXT / REGULATION SYMMETRY
   ========================================================== */

@media (min-width:1101px){

  /* identical internal card structure */
  .tr1-main .tr1-course-card{
    display:flex !important;
    flex-direction:column !important;
    padding:28px 28px 30px !important;
  }


  /* category labels line up */
  .tr1-main .tr1-course-no{
    min-height:12px !important;
    margin-bottom:23px !important;
  }


  /* all titles occupy identical height */
  .tr1-main .tr1-course-card h3{
    min-height:48px !important;
    display:flex !important;
    align-items:flex-start !important;

    margin:0 !important;

    font-size:20px !important;
    line-height:1.18 !important;
  }


  /* all descriptions occupy identical height */
  .tr1-main .tr1-course-card > p{
    min-height:51px !important;
    max-width:330px !important;

    margin:8px 0 17px !important;

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


  /* list begins at exactly same position in every card */
  .tr1-main .tr1-list{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }


  /* each course becomes a clean 2-column row */
  .tr1-main .tr1-list li{
    position:relative !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    column-gap:10px !important;
    align-items:center !important;

    width:100% !important;
    min-height:24px !important;

    padding:2px 0 2px 14px !important;

    font-size:11.5px !important;
    line-height:1.35 !important;
  }


  /* same bullet position on every line */
  .tr1-main .tr1-list li::before{
    position:absolute !important;

    left:0 !important;
    top:50% !important;

    width:4px !important;
    height:4px !important;

    transform:translateY(-50%) !important;
  }


  /* regulation badges form one clean right-hand column */
  .tr1-main .tr1-reg{
    justify-self:end !important;

    min-width:0 !important;
    max-width:170px !important;

    margin:0 !important;
    padding:3px 7px !important;

    text-align:center !important;
    white-space:nowrap !important;

    font-size:7.7px !important;
    line-height:1.15 !important;
    font-weight:800 !important;

    vertical-align:middle !important;
  }


  /* Keep vector away from readable text */
  .tr1-main .tr1-course-card::after{
    right:22px !important;
    bottom:17px !important;

    width:100px !important;
    height:100px !important;

    opacity:.085 !important;
  }

}


/* ==========================================================
   TRAINING COURSE CARDS — REMOVE BACKGROUND VECTORS
   ========================================================== */

@media (min-width:1101px){

  .tr1-main .tr1-course-card::after{
    content:none !important;
    display:none !important;
    background-image:none !important;
  }

}


/* ==========================================================
   TRAINING COURSE BADGES — LEFT ALIGN + SAME SIZE
   ========================================================== */

@media (min-width: 1101px){

  /* each course row */
  .tr1-main .tr1-course-card li{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 178px !important;
    column-gap:14px !important;
    align-items:start !important;
  }

  /* regulation badge */
  .tr1-main .tr1-course-card li .reg,
  .tr1-main .tr1-course-card li .badge,
  .tr1-main .tr1-course-card li .course-reg,
  .tr1-main .tr1-course-card li small,
  .tr1-main .tr1-course-card li .pill{
    width:178px !important;
    min-width:178px !important;
    max-width:178px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
    white-space:nowrap !important;
    padding:4px 10px !important;
    box-sizing:border-box !important;
  }

}

/* Tablet / mobile */
@media (max-width: 1100px){

  .tr1-main .tr1-course-card li{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px 10px !important;
    align-items:flex-start !important;
  }

  .tr1-main .tr1-course-card li .reg,
  .tr1-main .tr1-course-card li .badge,
  .tr1-main .tr1-course-card li .course-reg,
  .tr1-main .tr1-course-card li small,
  .tr1-main .tr1-course-card li .pill{
    min-width:170px !important;
    text-align:left !important;
    justify-content:flex-start !important;
    box-sizing:border-box !important;
  }

}


/* ==========================================================
   TRAINING COURSE LIST — MORE VERTICAL SPACING
   ========================================================== */

@media (min-width:1101px){

  .tr1-main .tr1-list li{
    min-height:26px !important;
  }

  .tr1-main .tr1-list li + li{
    margin-top:5px !important;
  }

}


/* ==========================================================
   TRAINING — RELATED SERVICES PHOTOGRAPHIC CARDS
   ========================================================== */

@media (min-width:1101px){

  .tr1-main .tr1-related-card{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    min-height:235px !important;

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

    border:1px solid #D8E5EC !important;

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


  /* 01 — Seafarer Licensing & Endorsements */
  .tr1-main .tr1-related-card:nth-child(1){
    background-image:
      url("/assets/images/services/related/training-related-seafarer-licensing.webp") !important;

    background-position:center 48% !important;
  }


  /* 02 — Crew & Manning */
  .tr1-main .tr1-related-card:nth-child(2){
    background-image:
      url("/assets/images/services/related/training-related-crew-manning.webp") !important;

    background-position:center center !important;
  }


  /* 03 — Service Request */
  .tr1-main .tr1-related-card:nth-child(3){
    background-image:
      url("/assets/images/services/related/training-related-service-request.webp") !important;

    background-position:center center !important;
  }


  /* Premium light fade */
  .tr1-main .tr1-related-card::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;

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

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.985) 0%,
        rgba(255,255,255,.95) 37%,
        rgba(255,255,255,.78) 68%,
        rgba(255,255,255,.42) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.18)
      ) !important;
  }


  /* Keep real HTML text above photo */
  .tr1-main .tr1-related-card > *{
    position:relative !important;
    z-index:2 !important;
  }


  .tr1-main .tr1-related-card h3{
    color:#092F46 !important;
  }

  .tr1-main .tr1-related-card p{
    color:#607887 !important;
    padding-bottom:42px !important;
  }

  .tr1-main .tr1-related-card span,
  .tr1-main .tr1-related-card b{
    color:#0084D1 !important;
  }


  /* Elegant photo hover — no dark overlay */
  .tr1-main .tr1-related-card:hover{
    transform:translateY(-4px) !important;

    border-color:#BDD9E8 !important;

    box-shadow:
      0 17px 40px rgba(4,43,67,.10),
      0 4px 12px rgba(4,43,67,.045) !important;

    background-size:104% auto !important;
  }


  /* Explore link stays aligned */
  .tr1-main .tr1-related-card b{
    position:absolute !important;
    left:27px !important;
    bottom:24px !important;
    top:auto !important;

    z-index:3 !important;

    transition:transform .32s ease !important;
  }

  .tr1-main .tr1-related-card:hover b{
    transform:translateX(4px) !important;
  }

}


/* ==========================================================
   TRAINING SERVICES — MARITIME INSTITUTE HERO
   ========================================================== */

.tr1-main .tr1-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-3 !important;

  background:
    linear-gradient(
      90deg,
      rgba(2,29,47,.98) 0%,
      rgba(2,34,54,.91) 27%,
      rgba(2,36,56,.68) 46%,
      rgba(2,32,50,.30) 66%,
      rgba(2,27,43,.10) 100%
    ),
    url("/assets/images/hero-training-premium.webp?v=20260922-201422")
    center center / cover no-repeat !important;
}