/* ============================================================
   LIFE AT PU - 3D FULL-WIDTH ARC SLIDER
============================================================ */
.life{
  position:relative;
  background:#0F0445;
  padding:5.5rem 0 5rem;
  overflow:hidden;
  isolation:isolate;
}
/* .life::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:background: #0F0445;
  opacity:.5;
}
 */
/* Concentric Orbital Radar/Ripples behind 3D slider */

.life{
 
  --rings-y: 50%;
}

.life-bg-rings{
  position: absolute;
  top: var(--rings-y);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2942px;
  height: 2942px;
  pointer-events: none;
  z-index: -1;
}

.life-ring{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 59.014px 0 rgba(255, 255, 255, 0.25) inset;
}

/* circle 1 — white glow (sabse neeche, baaki teen isko soften karte hain) */
.life-ring-1{
  width: 588.8px;
  height: 588.8px;
 border-radius: 588.4px;
opacity: 0.64;
	background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0.25) 100%);

box-shadow: 0px 0px 59.01px 0px #FFFFFF40 inset;

backdrop-filter: blur(221.84271240234375px)

	z-index:1;
}

/* circles 2-4 — same purple gradient */
.life-ring-2,
.life-ring-3,
.life-ring-4{
  border-radius: 850.795px;
opacity: 0.5;
background: radial-gradient(50% 50% at 50% 50%, #362A74 0%, rgba(102, 79, 218, 0.25) 100%);
box-shadow: 0 0 59.014px 0 rgba(255, 255, 255, 0.25) inset;
}

.life-ring-2{ width: 1144.59px; height: 1144.59px; }
.life-ring-3{ width: 850.99px; height: 850.99px; }
.life-ring-4{ width: 1471px;    height: 1471px;    }





/* ---------- 3D Full-Width Arc Slider Stage ---------- */
.life-3d-stage{
  position:relative;
  width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  padding:2rem 0 2.5rem;
  perspective:1200px;
  perspective-origin:center 50%;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
  overflow:hidden;
  touch-action:pan-y;
}
.life-3d-stage.is-dragging{
  cursor:grabbing;
}
.life-3d-viewport{
  position:relative;
  width:100%;
  height:370px;
  transform-style:preserve-3d;
}
.life-3d-track{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  will-change:transform;
  pointer-events:auto;
}

.life-3d-card{
  position:absolute;
  top:0;
  left:0;
  width:246px;
  height:355px;
  transform-origin:center center;
  transform-style:preserve-3d;
  will-change:transform, filter;
  cursor:pointer;
}
.life-3d-card-inner{
  width:100%;
  height:100%;
  border-radius:18px;
  overflow:hidden;
  background:#14083c;
  box-shadow:0 24px 50px rgba(3, 0, 28, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
  position:relative;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.life-3d-card:hover .life-3d-card-inner{
  transform:translateY(-6px);
  box-shadow:0 32px 65px rgba(2, 0, 24, 0.9), 0 0 0 2px rgba(255, 200, 0, 0.5);
}
.life-3d-card-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}

/* ---------- Interactive Bottom Slider Progress Bar & Navigation ---------- */
.life-slider-control{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  max-width:540px;
  margin:1.8rem auto 0;
  padding:0 1.5rem;
}
.life-slider-progress{
  flex:1;
  height:4px;
  background:rgba(255,255,255,.18);
  border-radius:4px;
  position:relative;
  cursor:pointer;
  overflow:hidden;
}
.life-slider-thumb{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:20%;
  background:var(--yellow);
  border-radius:4px;
  box-shadow:0 0 12px rgba(255,200,0,.6);
  transition:left .08s linear;
}
.life-slider-arrows{
  display:flex;
  gap:.6rem;
}
.life-slider-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  position:relative;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.life-slider-btn:hover{
  background:rgba(255,255,255,.22);
  transform:scale(1.05);
}
.life-slider-btn:active{
  transform:scale(0.95);
}
.life-slider-btn::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:7px;
  height:7px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
}
.life-slider-btn.life-prev::before{
  transform:translate(-30%,-50%) rotate(135deg);
}
.life-slider-btn.life-next::before{
  transform:translate(-70%,-50%) rotate(-45deg);
}

/* ---------- Flagship slider ---------- */
.life-flagship-row .slick-slide{ outline:none; }
.life-flagship{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(4,0,32,.4);
}
.lf-text{ padding:2.4rem 2.4rem 2.4rem 0; margin-left:2.4rem; }
.lf-tag{
	color: #5B5B5B;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 20px;
}
.lf-text h3{
  color: #0F0445;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
	margin-bottom: 10px;
}
.lf-meta {
    color: #5B5B5B;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
}
.lf-desc {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    margin: 25px 0px;
}
.btn-life-at-pu{
	display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #FFC800;
    color: #000000;
    font-weight: 700;
    font-size: 18px;
    border-radius: 999px;
    padding: .7rem 1.4rem;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease;
}
.lf-photo{ height:100%; min-height:260px; }
.lf-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Bottom progress bar + arrows (drives the flagship slider) ---------- */
.life-bar{ display:flex; align-items:center; gap:1.5rem; margin-top:1.5rem; }
.life-bar-track{
  flex:1;
  height:2px;
  background:rgba(255,255,255,.2);
  position:relative;
  border-radius:2px;
  overflow:hidden;
  display:block;
}
.life-bar-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background:#FFC800 !important;
  transition:width .4s ease;
}
.life-bar-arrows{ display:flex; gap:.6rem; }
.life-prev,
.life-next{
  position:relative;
  width:32px;
  height:32px;
  border-radius:50%;
  background:transparent;
  border:0px;
  cursor:pointer;
  transition:background .2s ease, opacity .2s ease;
}
.life-bar-arrows svg{
	width:24px;
	height:24px;
}
.life-bar-arrows svg path{
	stroke:#fff;
}
.life-prev:disabled,
.life-next:disabled{ opacity:.35; cursor:default; }


@media (max-width:767.98px){
  .life{padding:3rem 0;}
	.life-flagship .row{flex-direction:column-reverse;}
  .lf-text{ margin-left:1.2rem; padding:1.6rem 1.2rem 1.6rem 0; }
  .lf-photo{ min-height:200px; }
  .life-3d-card{ width:205px; height:295px; }
  .life-3d-viewport{ height:305px; }
	.lf-tag,.btn-life-at-pu{font-size:16px;}
	.lf-text h3{font-size:36px;}
	.btn-life-at-pu{justify-content:center; width:100%;}
}
@media (max-width:575.98px){
	.lf-text h3{font-size:32px !important;}
	.lf-meta,.lf-desc,.btn-life-at-pu{font-size:15px !important;}
}
@media (max-width:375.98px){
	.lf-text h3{font-size:30px !important;}
	.lf-meta,.lf-desc,.btn-life-at-pu{font-size:14px !important;}
}