/* ===== ISO Banner — Full CSS ===== */


/* Section variables & layout */
.documentation_container_sectors{
  /* spacing controls */
  --pad-vert: clamp(28px, 5vw, 72px);       /* top/bottom padding */
  --pad-outside: clamp(40px, 8vw, 120px);   /* left/right (outer edges) */
  --gap-inside: clamp(16px, 3vw, 40px);     /* gap between text & image */

  /* sizing */
  --img-w: clamp(360px, 42vw, 400px);       /* desktop image width */
  --img-radius: 18px;

  display: grid;
  grid-template-columns: 0.90fr 0.90fr;     /* text | image */
  align-items: center;
  column-gap: var(--gap-inside);

  padding: var(--pad-vert) var(--pad-outside);
  min-height: 80vh;
  background: #0a1e42;
  overflow: hidden;
}

/* Neutralize any nested bootstrap padding if present */
.documentation_container_sectors > [class*="col-"]{
  padding:0 !important; margin:0 !important; max-width:unset !important; flex:unset !important;
}

/* Text block pulled toward center */
.iso-text{
  display: flex;
  justify-content: flex-end;  /* push content toward the middle */
  align-items: center;
  text-align: right;          /* heading lines align to inner edge */
  max-width: 100%;
  padding-right: 10rem;
}

.iso-text h1{
  margin: 0;
  line-height: 1.02;
  text-transform: uppercase;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
}

.iso-top{
  display: block;
  font-weight: 900;
  letter-spacing: .04em;
  font-size: clamp(2.4rem, 6.2vw, 6rem);
  text-align: left;
}

.iso-bottom{
  display: block;
  font-weight: 800;
  font-size: clamp(1.4rem, 3.4vw, 2.8rem);
    text-align: left;

}

/* Image/card stack pulled toward center */
.image-container{
  position: relative;
  justify-self: flex-start;        /* push image toward the middle */
  width: var(--img-w);
  transform-style: preserve-3d;
  z-index: 0;
}

/* back sheet */
.image-container::before{
  content: "";
  position: absolute;
  inset: clamp(10px, 1.2vw, 18px);
  background: linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%);
  border-radius: var(--img-radius);
  box-shadow: 0 24px 48px rgba(0,0,0,.20);
  transform: translateZ(-1px);
}

/* certificate image (desktop tilt) */
.image-container img{
  display:block;
  width:100%;
  height:auto;
  border-radius: var(--img-radius);
  box-shadow: 0 26px 48px rgba(0,0,0,.35);
  transform: rotate(-10deg);
  transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}

.desktop_only_gap
{
  padding-left: 2rem;
}
@media (hover:hover){
  .image-container:hover img{
    transform: rotate(-8deg) translateY(-2px);
    box-shadow: 0 32px 64px rgba(0,0,0,.40);
    opacity:.98;
  }
}

/* ===== Large tablets down ===== */
@media (max-width: 1024px){
  .documentation_container_sectors{
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 72vh;
  }
}

/* ===== Mobile (<=768px) ===== */
@media (max-width: 768px){
  .documentation_container_sectors{
    /* keep inside-to-outside feel: big outer padding, tight inner gap */
    grid-template-columns: minmax(200px,1fr) minmax(180px,42%);
    align-items: center;
    column-gap: var(--gap-inside);
    padding: var(--pad-vert) var(--pad-outside);
    min-height: 64vh;
  }
.iso-text{
    padding-right: 0rem !important;
}
  .iso-top{    font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .iso-bottom{ font-size: clamp(1.2rem, 5.6vw, 2rem); }

  .image-container{
    width: clamp(220px, 46vw, 380px);
  }

  /* cancel tilt on phones so nothing overlaps */
  .image-container::before{
    inset: 10px; border-radius: 14px;
  }
  .image-container img{
    transform: none !important;
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(0,0,0,.32);
  }
}

/* ===== Small phones (<=480px) ===== */
@media (max-width: 480px){
  .documentation_container_sectors{
    grid-template-columns: 0.8fr 40%;
    column-gap: 14px;
    padding: 16px var(--pad-outside);
    min-height: 60vh;
  }
  .iso-top{    font-size: clamp(1.7rem, 7.4vw, 2.4rem); }
  .iso-bottom{ font-size: clamp(1.1rem, 5.2vw, 1.8rem); }
  .image-container{ width: clamp(190px, 44vw, 320px); }
}



:root{
  --rp-bg:#000;
  --rp-text:#ffffff;
  --rp-stage-h:520px;

  /* Arrow gutter variables for desktop/tablet */
  --rp-arrow-w:48px;
  --rp-arrow-gap:16px;
  --rp-gutter: calc(var(--rp-arrow-w) + var(--rp-arrow-gap));
}

/* Shell */
.rp_shell{
  width:100%;
  background:var(--rp-bg);
  padding:36px 28px 26px;
  position:relative;
  overflow:hidden;
}

/* Stage */
.rp_stage{
  position:relative;
  height:var(--rp-stage-h);
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
}

/* Slide layout — desktop/tablet with gutters */
.rp_slide{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: minmax(420px,1fr) minmax(260px,300px);
  gap:14px;
  align-items:center;
  padding:18px calc(34px + var(--rp-gutter));
  opacity:0;
  transform:translateX(60px);
  transition:opacity .5s ease, transform .6s ease;
}
.rp_slide.rp_active{ opacity:1; transform:translateX(0); z-index:1; }

/* Copy */
.rp_copy{ max-width:none; }
.rp_copy h2{
  color:var(--rp-text);
  font-size:clamp(28px,4vw,54px);
  line-height:1.05;
  margin:0 0 14px;
  font-weight:800;
}
.rp_copy p{
  font-size:clamp(14px,1.6vw,18px);
  line-height:1.6;
  color: white;
}

/* Image stack */
.rp_stack{
  justify-self:end;
  position:relative;
  display:inline-block;
  max-width:300px;
  transform:perspective(1200px) rotateY(-14deg);
}

/* White offset layers */
.rp_shadow{
  position:absolute; inset:0;
  border-radius:28px; background:#fff; z-index:0;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.rp_shadow--1{ transform:translate(14px,-14px); opacity:.8; }
.rp_shadow--2{ transform:translate(28px,-28px); opacity:.5; }

/* Main image */
.rp_img--front{
  display:block; position:relative; z-index:1;
  width:100%; height:auto; border-radius:28px;
  box-shadow:0 28px 50px rgba(0,0,0,.45);
  opacity:1;
}

/* Arrows */
.rp_nav{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:38px; line-height:1;
  color:#ffffff70; background:#00000033;
  border:none; border-radius:50%;
  width:var(--rp-arrow-w); height:var(--rp-arrow-w);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:5;
  transition:background .25s, color .25s, transform .25s;
}
.rp_prev{ left:16px; transform:translateY(-50%) scaleX(-1); }
.rp_next{ right:16px; }
.rp_nav:hover{ background:#00000066; color:#fff; }

/* Steps / progress */
.rp_steps{ margin-top:18px; }
.rp_progress{ width:min(980px,92%); margin:0 auto; }
.rp_bar{ height:4px; background:#ffffff2a; border-radius:999px; overflow:hidden; position:relative; }
.rp_bar-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:#fff; border-radius:999px; transition:width .5s ease; }
.rp_ticks{ display:flex; justify-content:space-between; gap:16px; padding:12px 4px 0; }
.rp_tick{ background:none; border:none; color:#ffffff70; font:600 18px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; cursor:pointer; transition:color .25s ease; }
.rp_tick--active{ color:#fff; }

/* Wide screens: tighter fit */
@media (min-width:1200px){
  .rp_slide{
    grid-template-columns:minmax(520px,1fr) 280px;
    gap:12px;
    padding-left: calc(28px + var(--rp-gutter));
    padding-right: calc(38px + var(--rp-gutter));
  }
  .rp_stack{ max-width:280px; }
}

/* Tablet */
@media (max-width:1024px){
  .rp_slide{
    grid-template-columns:1fr;
    gap:16px;
    padding:20px calc(22px + var(--rp-gutter)) 24px;
  }
  .rp_stack{
    justify-self:center;
    max-width:min(460px,80vw);
    transform:perspective(1100px) rotateY(-10deg);
  }
}

/* Mobile — show only the active slide */
@media (max-width: 560px){
  .rp_slide{
    position: relative;
    display: none;                 /* hide all by default */
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin: 0;
    transform: none;
    opacity: 1;                    /* fine since hidden via display */
    pointer-events: none;          /* don't intercept touches */
  }
  .rp_slide.rp_active{
    display: flex;                 /* show the active slide only */
    pointer-events: auto;
  }

  .rp_stage{ height:auto !important; min-height:unset !important; display:block; }
  .rp_stack{ max-width:86vw; transform:none; margin:0 auto; position:relative; }
  .rp_img--front{ width:100%; height:auto; max-height:40vh; object-fit:contain; }
  .rp_shadow--1{ transform:translate(8px,-8px); opacity:.7; }
  .rp_shadow--2{ transform:translate(16px,-16px); opacity:.45; }

  .rp_nav{ font-size:26px; width:38px; height:38px; }
  .rp_prev{ left:8px; transform:translateY(-50%) scaleX(-1); }
  .rp_next{ right:8px; }

  .rp_steps{ margin-top:10px; padding-bottom:8px; }
  .rp_progress{ width:96%; margin:0 auto; }
}