/* ==========================================================
   PLACEMENT SECTION V3
   - Larger typography
   - Larger recruiter section
   - Truly continuous recruiter ticker
   - Quote marks fixed so they never overlap paragraph text
   - Fully responsive
   ========================================================== */

:root{
  --navy:#0b4380;
  --text:#263d55;
  --muted:#748395;
  --border:#dfe8ef;
  --gold:#e2ad38;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#fff;
}

.placement-section{
  padding:36px 18px 65px;
  border-top:4px solid var(--navy);
  background:
    radial-gradient(circle at 15% 0%,rgba(27,103,165,.045),transparent 25%),
    linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  overflow:hidden;
}

.placement-container{
  width:100%;
  max-width:991.98px;
  margin:0 auto;
}


/* ==========================================================
   STATISTICS
   ========================================================== */

.stats-section{
  margin-bottom:72px;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
  max-width:991.98px;
  margin:0 auto;
}

.stat-card{
  min-height:184px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:22px 15px 18px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  box-shadow:0 8px 25px rgba(22,59,91,.07);
  text-align:center;
  transition:.25s ease;
}

.stat-card:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 32px rgba(22,59,91,.12);
}

.stat-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin-bottom:13px;
  border-radius:17px;
  font-size:29px;
}

.stat-icon.blue{color:#1765d1;background:#edf4ff}
.stat-icon.purple{color:#6d35d0;background:#f2edff}
.stat-icon.green{color:#129b55;background:#ecfaf2}
.stat-icon.orange{color:#f28b00;background:#fff5e8}
.stat-icon.red{color:#e33131;background:#fff0f0}

.stat-number{
  color:#0a4382;
  font-size:29px;
  line-height:1.05;
  font-weight:800;
}

.stat-label{
  min-height:39px;
  margin-top:8px;
  color:#26384b;
  font-size:14px;
  line-height:1.35;
  font-weight:600;
}

.stat-accent{
  width:36px;
  height:3px;
  margin-top:10px;
  border-radius:4px;
}

.blue-bg{background:#1765d1}
.purple-bg{background:#793fd3}
.green-bg{background:#16a25b}
.orange-bg{background:#f28b00}
.red-bg{background:#ed3535}


/* ==========================================================
   SECTION HEADINGS
   ========================================================== */

.section-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  text-align:center;
}

.heading-line{
  width:70px;
  height:2px;
  position:relative;
  background:var(--gold);
}

.heading-line:before,
.heading-line:after{
  content:"";
  position:absolute;
  top:-2px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
}

.heading-line:before{left:-5px}
.heading-line:after{right:-5px}

.section-heading h2{
  margin:0;
  color:#0b3f7c;
  font-size:25px;
  font-weight:800;
}

.section-heading p{
  margin:8px 0 0;
  color:#697b8d;
  font-size:13px;
}


/* ==========================================================
   RECRUITERS
   ========================================================== */

.recruiters-section{
  max-width:991.98px;
  margin:0 auto 78px;
}

.recruiter-carousel{
  position:relative;
  overflow:hidden;
  margin-top:35px;
  padding:20px 30px;
  border:1px solid #e0e8ef;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 28px rgba(21,59,91,.065);
}

.recruiter-carousel:before,
.recruiter-carousel:after{
  content:"";
  position:absolute;
  z-index:4;
  top:0;
  bottom:0;
  width:100px;
  pointer-events:none;
}

.recruiter-carousel:before{
  left:0;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,0));
}

.recruiter-carousel:after{
  right:0;
  background:linear-gradient(-90deg,#fff,rgba(255,255,255,0));
}

/*
  IMPORTANT:
  No CSS keyframes are used for the actual movement.
  JavaScript moves the track by tiny pixel amounts and
  wraps ONLY the hidden duplicate width. Therefore the
  visible slider never jumps backwards.
*/

.recruiter-track{
  display:flex;
  width:max-content;
  gap:16px;
  will-change:transform;
  transform:translate3d(0,0,0);
}

.company-card{
  width:145px;
  height:92px;
  flex:0 0 145px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  border:1px solid #e0e7ed;
  border-radius:10px;
  background:#fff;
  box-shadow:0 3px 12px rgba(24,62,91,.04);
  transition:.25s ease;
}

.company-card:hover{
  transform:translateY(-5px);
  border-color:#c8dbe9;
  box-shadow:0 10px 22px rgba(24,62,91,.12);
}

.tata{
  color:#1477b8;
  flex-direction:row;
  gap:5px;
  font-size:22px;
}

.tata-symbol{
  width:33px;
  height:33px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:3px solid #1682c0;
  font-size:20px;
  font-weight:800;
}

.wipro{
  color:#572d78;
  font-size:22px;
  font-style:italic;
}

.wipro-dots{
  width:47px;
  height:10px;
  margin-top:2px;
  border-radius:50%;
  background:radial-gradient(circle,#e94f2e 1.5px,transparent 2px) 0 0/8px 8px;
}

.infosys{
  color:#1685ba;
  font-size:22px;
}

.hcl{
  color:#1472b5;
  font-size:34px;
  font-weight:900;
  font-style:italic;
}

.tech{
  color:#555;
  font-size:16px;
  line-height:1;
}

.tech b{
  color:#ed3f31;
  font-size:15px;
}

.ibm{
  color:#2976bc;
  font-size:31px;
  letter-spacing:2px;
  font-weight:900;
}

.accenture{
  color:#6f227c;
  font-size:17px;
  font-weight:700;
}

.lnt{
  color:#1e5a8d;
  font-size:12px;
  font-weight:700;
}

.recruiter-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}

.recruiter-dots span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#d0d7df;
}

.recruiter-dots span.active{
  background:#1261b6;
}


/* ==========================================================
   SUCCESS STORIES
   ========================================================== */

.success-section{
  position:relative;
  max-width:991.98px;
  margin:0 auto;
  padding:52px 35px 38px;
  border:1px solid #e6edf3;
  border-radius:17px;
  background:linear-gradient(135deg,#f5faff,#eef6fc);
  box-shadow:0 8px 30px rgba(24,63,94,.04);
}

.success-heading{
  text-align:center;
  margin-bottom:34px;
}

.success-heading h2{
  margin:0;
  color:#0b3f7c;
  font-size:26px;
  font-weight:800;
}

.success-heading span{
  display:block;
  width:45px;
  height:3px;
  margin:12px auto 0;
  border-radius:5px;
  background:var(--gold);
}

.stories-viewport{
  position:relative;
  overflow:hidden;
  padding:0 15px;
}

.stories-track{
  display:flex;
  gap:18px;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.success-card{
  position:relative;
  flex:0 0 calc((100% - 54px)/4);
  min-height:420px;
  padding:28px 20px 70px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border:1px solid #e1e8ee;
  border-top:4px solid #2379dc;
  border-radius:11px;
  background:#fff;
  box-shadow:0 7px 20px rgba(22,59,91,.07);
  transition:.25s ease;
  overflow:hidden;
}

.success-card:nth-child(2){border-top-color:#20aa5b}
.success-card:nth-child(3){border-top-color:#7541d4}
.success-card:nth-child(4){border-top-color:#ff7715}

.success-card:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 30px rgba(22,59,91,.12);
}

.student-photo{
  width:91px;
  height:91px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  border-radius:50%;
  border:5px solid #fff;
  outline:2px solid #dce5ec;
  color:#fff;
  font-size:18px;
  font-weight:800;
  box-shadow:0 7px 15px rgba(20,58,88,.12);
  flex-shrink:0;
}

.photo-blue{background:linear-gradient(135deg,#467fb0,#173e67)}
.photo-green{background:linear-gradient(135deg,#4c9672,#245342)}
.photo-purple{background:linear-gradient(135deg,#8360b1,#453068)}
.photo-orange{background:linear-gradient(135deg,#b87948,#5d3c28)}
.photo-navy{background:linear-gradient(135deg,#4f6e9d,#273c63)}
.photo-pink{background:linear-gradient(135deg,#a56d8b,#633b53)}

.success-card h3{
  margin:0;
  color:#0b4b94;
  font-size:18px;
  font-weight:800;
}

.success-card:nth-child(2) h3{color:#13974e}
.success-card:nth-child(3) h3{color:#6735bf}
.success-card:nth-child(4) h3{color:#e8660d}

.success-card strong{
  margin-top:7px;
  color:#182f45;
  font-size:13px;
}

.success-card small{
  margin-top:4px;
  color:#5f7081;
  font-size:12px;
}

.story-divider{
  width:100%;
  height:1px;
  margin:20px 0 18px;
  flex-shrink:0;
}

.blue-border{background:#8db9ef}
.green-border{background:#91d5b0}
.purple-border{background:#b9a0e8}
.orange-border{background:#ffb88b}



/* ==========================================================
   INLINE TESTIMONIAL QUOTES
   ========================================================== */

.testimonial-text{
  width:100%;
  margin:0;
  padding:0 2px;
  color:#455c72;
  font-size:13px;
  line-height:1.75;
  text-align:left;
  position:relative;
  z-index:2;
}

.quote-inline{
  display:inline;
  font-family:Georgia,"Times New Roman",serif;
  font-size:28px;
  line-height:0;
  font-weight:700;
  vertical-align:-5px;
}

.quote-open{
  margin-right:4px;
  color:#4385cc;
}

.quote-close{
  margin-left:4px;
  color:#4385cc;
}

.success-card:nth-child(2) .quote-inline{color:#25a459}
.success-card:nth-child(3) .quote-inline{color:#6f46c2}
.success-card:nth-child(4) .quote-inline{color:#f17e18}


/* ==========================================================
   ARROWS + DOTS
   ========================================================== */

.story-arrow{
  position:absolute;
  z-index:8;
  top:50%;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid #d8e3eb;
  border-radius:50%;
  background:#fff;
  color:#2b5579;
  font-size:17px;
  transform:translateY(-50%);
  box-shadow:0 6px 15px rgba(18,56,87,.1);
  cursor:pointer;
  transition:.2s ease;
}

.story-arrow:hover{
  color:#fff;
  background:#0b4780;
  border-color:#0b4780;
}

.story-arrow.left{left:-4px}
.story-arrow.right{right:-4px}

.story-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:22px;
}

.story-dot{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#cbd4dd;
  cursor:pointer;
  transition:.25s ease;
}

.story-dot.active{
  width:25px;
  border-radius:8px;
  background:#1263bd;
}

.future-cta{
  margin-top:34px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  text-align:left;
}

.future-cta > i{
  color:#e0a72f;
  font-size:34px;
}

.future-cta span,
.future-cta strong{
  display:block;
}

.future-cta span{
  color:#344d65;
  font-size:13px;
}

.future-cta strong{
  margin-top:3px;
  color:#0b4380;
  font-size:18px;
}


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

@media(max-width:991.98px){

  .stats-grid{
    gap:12px;
  }

  .stat-card{
    min-height:170px;
  }

  .success-card{
    min-height:390px;
  }
}


@media(max-width:991.98px){

  .placement-section{
    padding-top:28px;
  }

  .stats-grid{
    grid-template-columns:repeat(3,1fr);
    max-width:991.98px;
  }

  .recruiters-section{
    margin-bottom:60px;
  }

  .company-card{
    width:130px;
    flex-basis:130px;
    height:85px;
  }

  .success-card{
    flex-basis:calc((100% - 18px)/2);
    min-height:390px;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:767.98px){

  .placement-section{
    padding:22px 10px 45px;
  }

  .stats-section{
    margin-bottom:52px;
  }

  .stats-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .stat-card{
    min-height:155px;
    padding:18px 10px;
  }

  .stat-icon{
    width:52px;
    height:52px;
    font-size:24px;
  }

  .stat-number{
    font-size:24px;
  }

  .stat-label{
    font-size:12px;
  }

  .section-heading{
    gap:12px;
  }

  .heading-line{
    width:35px;
  }

  .section-heading h2{
    font-size:20px;
  }

  .section-heading p{
    font-size:11px;
  }

  .recruiter-carousel{
    margin-top:25px;
    padding:15px 20px;
  }

  .company-card{
    width:115px;
    height:78px;
    flex-basis:115px;
  }

  .tata,.wipro{font-size:18px}
  .infosys{font-size:18px}
  .hcl{font-size:28px}
  .ibm{font-size:26px}

  .success-section{
    padding:38px 12px 30px;
  }

  .success-heading h2{
    font-size:21px;
  }

  .stories-viewport{
    padding:0 20px;
  }

  .success-card{
    flex-basis:100%;
    min-height:365px;
  }

  .story-arrow{
    width:38px;
    height:38px;
    font-size:14px;
  }

  .story-arrow.left{left:-2px}
  .story-arrow.right{right:-2px}
}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media(max-width:767.98px){

  .stats-grid{
    gap:8px;
  }

  .stat-card{
    min-height:142px;
    padding:14px 7px;
  }

  .stat-icon{
    width:46px;
    height:46px;
    font-size:21px;
    border-radius:13px;
  }

  .stat-number{
    font-size:21px;
  }

  .stat-label{
    font-size:10px;
  }

  .section-heading h2{
    font-size:17px;
  }

  .section-heading p{
    font-size:9px;
  }

  .heading-line{
    width:20px;
  }

  .recruiter-carousel{
    margin-top:21px;
    padding:12px 15px;
  }

  .company-card{
    width:100px;
    height:70px;
    flex-basis:100px;
  }

  .tata,.wipro{font-size:16px}
  .infosys{font-size:16px}
  .hcl{font-size:24px}
  .tech{font-size:12px}
  .tech b{font-size:11px}
  .ibm{font-size:22px}
  .accenture{font-size:13px}
  .lnt{font-size:9px}

  .success-section{
    padding:30px 7px 25px;
    border-radius:12px;
  }

  .success-heading h2{
    font-size:18px;
  }

  .success-card{
    min-height:350px;
    padding:20px 17px 65px;
  }

  .student-photo{
    width:75px;
    height:75px;
    font-size:15px;
  }

  .success-card h3{
    font-size:16px;
  }

  .success-card strong{
    font-size:12px;
  }

  .success-card small{
    font-size:11px;
  }

  .future-cta{
    gap:9px;
  }

  .future-cta > i{
    font-size:27px;
  }

  .future-cta span{
    font-size:10px;
  }

  .future-cta strong{
    font-size:14px;
  }
}


@media(prefers-reduced-motion:reduce){

  .stories-track{
    transition:none;
  }
}

@media(max-width:767.98px){
  .testimonial-text{font-size:12.5px;line-height:1.7}
  .quote-inline{font-size:25px}
}

@media(max-width:767.98px){
  .testimonial-text{font-size:12px;line-height:1.65}
  .quote-inline{font-size:23px}
}