/* =========================
   Rollcon — Full-Width Carousel + Inside-Corner Ribbon
   (View pill & extra hand removed; red hand only under R logo)
   ========================= */
:root{
  --brand-blue:#0b2a5b;
  --brand-red:#e31e24;
  --ink:#0d1321;
  --card:#ffffff;
  --hair:#e7ecf5;
  --bg-img:url("/static/assets/img/th2.jpg");
  --overlay:rgba(11,42,91,.78);
  --overlay2:rgba(11,42,91,.55);
}

/* Base */
*{box-sizing:border-box}
html,body{width:100%;height:auto}
body{
  margin:0; overflow-x:hidden; color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:#fff;
}

/* Title */
.section-title{
  color:var(--brand-blue);
  font-size:2.35rem; font-weight:800; text-align:center; margin:58px 0 24px;
}
.section-title::after{
  content:""; display:block; width:110px; height:6px; margin:12px auto 0;
  border-radius:6px;
  background:linear-gradient(90deg, var(--brand-blue), var(--brand-red));
}

/* Section wrapper (full-bleed) */
.carousel-wrap{
  position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  padding:16px 0 0;
}

/* Main container — full width */
.carousel-container{
  position:relative; width:100%; margin:0;
  padding:46px 0;
  background:var(--card);
  border:1px solid var(--hair);
  box-shadow:0 18px 48px rgba(11,42,91,.10), 0 4px 14px rgba(0,0,0,.05);
  overflow:hidden;
}
.carousel-container::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--bg-img);
  background-size:cover; background-position:center;
  filter:saturate(1.05) contrast(1.05) brightness(.9);
}
.carousel-container::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, var(--overlay), var(--overlay2));
  mix-blend-mode:multiply;
}

/* Viewport with edge fades */
.slider-viewport{ position:relative; overflow:hidden; z-index:1; }
.slider-viewport::before,
.slider-viewport::after{
  content:""; position:absolute; top:0; bottom:0; width:160px; pointer-events:none; z-index:2;
}
.slider-viewport::before{
  left:0;
  background:linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,0));
  border-top-left-radius:24px; border-bottom-left-radius:24px;
}
.slider-viewport::after{
  right:0;
  background:linear-gradient(270deg, rgba(255,255,255,.96), rgba(255,255,255,0));
  border-top-right-radius:24px; border-bottom-right-radius:24px;
}

/* Belt */
.slider-track{ display:flex; gap:30px; transform:translateX(0); will-change:transform; }

/* Cards */
.certificate-card{
  position:relative; flex:0 0 auto; width:224px; z-index:1;
  overflow:hidden; border-radius:16px;
}

/* Thumb */
.cert-thumb{
  width:100%; height:260px; object-fit:contain;
  background:#fff; padding:12px; border-radius:16px;
  border:1px solid rgba(11,42,91,.16);
  box-shadow:0 14px 34px rgba(11,42,91,.18), 0 1px 0 rgba(11,42,91,.08) inset;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.cert-thumb:hover{
  transform:translateY(-5px) scale(1.015);
  border-color:rgba(227,30,36,.7);
  box-shadow:0 20px 44px rgba(11,42,91,.22), 0 0 0 4px rgba(227,30,36,.12);
  filter:saturate(1.02);
}

/* Inside-corner ribbon */
.certificate-card::after{
  content:"CERTIFICATE";
  position:absolute; top:23px; right:-94px;
  transform:rotate(45deg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)),
    linear-gradient(90deg, #b70f36 0%, var(--brand-red) 100%);
  color:#fff; font-weight:900; letter-spacing:.6px; font-size:.80rem; line-height:1;
  padding:7px 96px 7px; border-radius:4px;
  text-shadow:0 1px 2px rgba(0,0,0,.35); box-shadow:0 12px 20px rgba(0,0,0,.22);
  z-index:3;
}

/* REMOVE view pill + emoji hand that were on the thumb */
.certificate-card .cert-thumb::after,
.certificate-card .cert-thumb::before{ content:none !important; }

/* R logo button (on top of the hand) */
.logo-btn{
  position:absolute; right:12px; bottom:20px; width:44px; height:44px; border-radius:50%;
  cursor:pointer; background:transparent; border:0; object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(11,42,91,.35));
  transition:transform .18s ease, filter .18s ease;
  z-index:5;
}
.logo-btn:hover{ transform:scale(1.06); filter:drop-shadow(0 16px 28px rgba(11,42,91,.45)); }

/* ===== Red hand under the R logo (better artwork + vertical bob) =====
   Uses .certificate-card::before so it appears on every card.
*/
.certificate-card::before{
  border:0 !important;
  content:"" !important;
  position:absolute !important;

  right:24px;
  bottom:2px;
  width:24px; height:24px;
  z-index:4;
  pointer-events:none;

  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  filter:drop-shadow(0 2px 4px rgba(227,30,36,.35));

  /* clearer finger-separated red hand (URL-encoded SVG) */
  background-image: url("data:image/svg+xml;utf8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E\
%3Cg fill='%23e31e24'%3E\
%3Crect x='10' y='32' width='10' height='22' rx='5'/%3E\
%3Crect x='22' y='20' width='10' height='34' rx='5'/%3E\
%3Crect x='34' y='18' width='10' height='36' rx='5'/%3E\
%3Crect x='46' y='22' width='10' height='32' rx='5'/%3E\
%3Cpath d='M8 44c0 10 8 18 18 18h12c12 0 20-8 20-20v-6c0-3-2-5-5-5s-5 2-5 5v2H18v-2c0-3-2-5-5-5s-5 2-5 5v8z'/%3E\
%3C/g%3E%3C/svg%3E") !important;

  animation:handBob 1.6s ease-in-out infinite;
  transform-origin:center bottom;
}
@keyframes handBob{
  0%   { transform:translateY(0)    scale(1);   opacity:.95; }
  35%  { transform:translateY(-8px) scale(1.04); opacity:1; }
  70%  { transform:translateY( 3px) scale(.98);  opacity:.95; }
  100% { transform:translateY(0)    scale(1);   opacity:.95; }
}
@media (prefers-reduced-motion: reduce){
  .certificate-card::before{ animation:none; }
}

/* Arrows */
.arrow-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; font-size:26px; cursor:pointer; z-index:3;
  color:#fff;
  background:linear-gradient(180deg, rgba(227,30,36,1), rgba(227,30,36,.92));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 16px 36px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.arrow-btn:hover{
  background:linear-gradient(180deg, rgba(11,42,91,.95), rgba(11,42,91,.80));
  box-shadow:0 18px 42px rgba(227,30,36,.35);
}
.arrow-left{ left:16px; } .arrow-right{ right:16px; }

/* Modal */
.modal-backdrop.show{ opacity:.85; backdrop-filter:blur(6px); }
.modal-content{ background:transparent; border:0; box-shadow:none; }
.modal-body{ display:flex; justify-content:center; align-items:center; }
.modal-sheet{
  background:#0b0b0c; border-radius:16px; padding:12px;
  border:1px solid rgba(255,255,255,.10); box-shadow:0 28px 70px rgba(0,0,0,.75);
}
.modal-img{ max-height:85vh; max-width:92vw; object-fit:contain; }
.modal-close{
  position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; background:#0f1b33; border:2px solid #fff;
  box-shadow:0 0 14px rgba(11,42,91,.55); z-index:10000; transition:transform .15s ease, background .15s ease;
}
.modal-close:hover{ background:var(--brand-red); transform:scale(1.03); }
.modal-close svg{ width:22px; height:22px; fill:#fff; }

/* Responsive */
@media (max-width: 1200px){
  .slider-viewport::before,.slider-viewport::after{ width:140px; }
  .certificate-card{ width:210px; }
  .cert-thumb{ height:246px; }
}
@media (max-width: 992px){
  .slider-viewport::before,.slider-viewport::after{ width:120px; }
  .certificate-card{ width:196px; }
  .cert-thumb{ height:232px; }
}
@media (max-width: 768px){
  .slider-viewport::before,.slider-viewport::after{ width:90px; }
  .carousel-container{ border-radius:0; padding:38px 0; }
  .certificate-card{ width:184px; }
  .cert-thumb{ height:220px; }
  .arrow-btn{ width:50px; height:50px; font-size:24px; }
}
@media (max-width: 576px){
  .section-title{ font-size:1.9rem; margin:44px 0 18px; }
  .slider-viewport::before,.slider-viewport::after{ width:64px; }
  .certificate-card{ width:172px; }
  .cert-thumb{ height:206px; }
}




  /* make the red hand move up ↕ down under the R button */
.certificate-card::before{
  animation: handBob 1.6s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes handBob{
  0%   { transform: translateY(0)    scale(1);   opacity:.95; }
  35%  { transform: translateY(-8px) scale(1.04); opacity:1; }
  70%  { transform: translateY( 3px) scale(.98);  opacity:.95; }
  100% { transform: translateY(0)    scale(1);   opacity:.95; }
}

/* optional: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .certificate-card::before{ animation:none; }
}