.heading-title {
  font-family: var(--font-display);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.max-w-700 { max-width: 700px; }

/* ---------- Yellow pill button (CTA + popup trigger) ---------- */
.btn-yellow-pill-fit {
  background-color: var(--warning-yellow) !important;
  color: #000000 !important;
  font-weight: 700;
  width: 100%;
  max-width: 350px;
  height: 60px;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  gap: 8px;
  border-radius: 72px !important;
  border: 3px solid var(--warning-yellow) !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  z-index: 1;
}
.btn-yellow-pill-fit:hover {
  background-color: #ffd633 !important;
  border-color: #ffd633 !important;
}
.btn-yellow-pill-fit:focus-visible {
  outline: 3px solid #5641E0 !important;
  outline-offset: 2px !important;
}

/* ---------- Section ---------- */
/* NOTE: padding yahan fallback hai. Live value ACF se aata hai —
   template ek scoped <style> print karta hai with !important. */
.outcomes-header-section {
  background-color: #0F0445;
  color: #ffffff;
  padding-top: 80px;
  padding-bottom: 120px;
  overflow: visible !important;
}
.outcomes-header-section .row{
  position: relative;
}
.outcomes-label {
  font-family: var(--font-figtree);
  line-height: 1.0;
  color: #fff;
  display: block;
}
.outcomes-desc {
  font-family: var(--font-figtree);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}
.outcomes-vector-img {
  position: absolute;
  top: -100px;
  right: 0px;
  max-width: 100%;
  height: auto;
  opacity: 0.9;
}
.outcomes-right-col {
  height: 100%;
}
.outcomes-layout-home .outcomes-stats-box{
	margin-bottom: -300px;
}
.outcomes-stats-box {
  background-color: #5641E0;
  margin-bottom: -450px;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}
.outcomes-stats-box .text-48 {
  font-family: var(--font-display);
}
.faculty-page-outcomes-row{
	display: flex;
	justify-content: center;
}
.border-end-custom {
  border-right: 3px solid #D9D9D9;
}

/* ---------- Brochure request popup ---------- */
.pu-modal {
	position: fixed;
	inset: 0;
	z-index: 10500;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.pu-modal.is-open {
	display: flex;
}
.pu-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 12, 45, .72);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: pu-fade .2s ease;
}
.pu-modal-dialog {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 32px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
	animation: pu-rise .28s cubic-bezier(.2, .7, .2, 1);
}
.pu-modal-title {
	margin: 0 0 20px;
	padding-right: 36px;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 700;
	color: #0B1B49;
}
.pu-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #F1F3F7;
	color: #0B1B49;
	cursor: pointer;
	transition: background .2s ease;
}
.pu-modal-close:hover {
	background: #E2E6EF;
}
.pu-modal-close:focus-visible {
	outline: 2px solid #5641E0;
	outline-offset: 2px;
}
.pu-modal-body .wpcf7 {
	margin: 0;
}
.pu-modal-body .wpcf7-not-valid-tip {
	font-size: 13px;
	margin-top: 4px;
}
.pu-modal-body .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 10px 14px;
	font-size: 14px;
	border-radius: 8px;
}
body.pu-modal-open {
	overflow: hidden;
}
@keyframes pu-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes pu-rise {
	from { opacity: 0; transform: translateY(18px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Popup form fields (the brochure/enquiry wpcf7 form
   rendered inside .pu-modal-body via do_shortcode) ---------- */
.callback-input {
  background-color: #F4F4F6 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  color: #333 !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}
textarea.callback-input {
  resize: none;
}
#phone, .country-phone {
  width: 100% !important;
  height: 42px;
  border-radius: 8px;
  background-color: #F4F4F6 !important;
  border: 1px solid transparent !important;
}
.select-arrow {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px !important;
}
.btn-yellow-submit {
  background-color: #FFC800 !important;
  color: #0F0445 !important;
  border: none !important;
  border-radius: 50px !important;
  transition: background-color 0.2s ease !important;
}
.btn-yellow-submit:hover {
  background-color: #e0b000 !important;
}
.callback-card .wpcf7-form-control-wrap { display: block; width: 100%; }
.callback-card .wpcf7 form .wpcf7-response-output { margin: 1rem 0 0; border-radius: .5rem; font-size: .875rem; }
.callback-card .wpcf7-not-valid-tip { font-size: .75rem; margin-top: .25rem; }
.callback-card .wpcf7-spinner { position: absolute; }

/* ---------- City-autocomplete dropdown (your-city field) ---------- */
.pu-city-wrap {
	position: relative;
	display: block;
	width: 100%;
}
.pu-city-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	display: none;
	max-height: 240px;
	overflow-y: auto;
	margin: 4px 0 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid #E4E7EC;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
}
.pu-city-list.is-open { display: block; }
.pu-city-item {
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.3;
	color: #0B1B49;
	cursor: pointer;
}
.pu-city-item:hover,
.pu-city-item.is-active {
	background: #F1EFFE;
	color: #5641E0;
}

/* ============================================================
   HOME LAYOUT ONLY  (.outcomes-layout-home)
   Default "other pages" layout ko kuch nahi chhuta — wo apna
   absolute illustration + pinned CTA waise hi rakhta hai.
============================================================ */

/* image apne column me, normal flow — no absolute */
.outcomes-layout-home .outcomes-illustration-col {
  position: relative;
  z-index: 2;
}
.outcomes-layout-home .outcomes-side-img {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  opacity: 1;
  border-radius: 24px;
  object-fit: contain;
}

/* CTA copy ke neeche inline rehta hai, bottom-right pinned nahi */
.outcomes-layout-home .request-placement-report {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  justify-content: flex-start;
}
.outcomes-layout-home .request-placement-report a,
.outcomes-layout-home .request-placement-report button {
  position: static !important;
  bottom: auto !important;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (min-width: 768px) {
  .outcomes-stats-box{
    padding:48px;
  }
}

/* the "Request placement report" CTA is pinned bottom-right of the
   header on desktop; the source stylesheet sets this twice inside
   the same min-width:992px block — the second wins (position:absolute
   bottom:-90px right:10px), kept last here to match that. */
@media (min-width: 992px) {
  .request-placement-report {
    justify-content: end;
  }
  .request-placement-report a {
    position: absolute;
    bottom: -65px;
  }
  .request-placement-report {
    position: absolute;
    bottom: -90px;
    right: 10px;
  }

  /* home layout inhe wapas static kar deta hai */
  .outcomes-layout-home .request-placement-report {
    position: static !important;
    justify-content: flex-start !important;
  }
  .outcomes-layout-home .request-placement-report a,
  .outcomes-layout-home .request-placement-report button {
    position: static !important;
    bottom: auto !important;
  }
  .outcomes-layout-home .outcomes-illustration-col {
    padding-left: 24px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  /* padding ab ACF inline style se aata hai; ye sirf fallback hai */
  .outcomes-header-section {
    padding-top: 60px;
    padding-bottom: 100px;
  }
  .outcomes-stats-box {
    padding: 32px !important;
    margin-bottom: -360px;
  }
  .outcomes-vector-img {
    top: -60px;
    max-width: 42%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .outcomes-vector-img {
    max-width: 45% !important;
    top: -40px !important;
  }
}

@media (max-width: 991.98px) {
  /* padding ab ACF inline style se aata hai; ye sirf fallback hai */
  .outcomes-header-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .outcomes-label {
    font-size: 22px !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }
  .outcomes-heading {
    font-size: 36px !important;
    line-height: 1.15 !important;
    color: #FFC800 !important;
  }
  .outcomes-desc {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  .outcomes-mobile-stats-box {
    background-color: #5641E0 !important;
    border: 1px solid #FFFFFF !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden;
    padding: 0px !important;
  }
  .border-bottom-purple {
    border-bottom: 1px solid #FFFFFF !important;
  }
  .border-end-purple {
    border-right: 1px solid #FFFFFF !important;
  }
  .mobile-stat-big {
    font-size: 41px !important;
    line-height: 1 !important;
  }
  .mobile-stat-mid {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
  .mobile-stat-bottom {
    font-size: 46px !important;
    line-height: 1.1 !important;
  }
  .mobile-stat-label {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }
  .outcomes-stats-box {
    margin-bottom: -80px;
  }
  .btn-yellow-pill-fit {
    width: auto !important;
    max-width: 100% !important;
    font-size: 14px !important;
    padding: 8px 18px !important;
    text-align: center !important;
    display: inline-block !important;
  }

  .outcomes-layout-home .outcomes-side-img {
    border-radius: 16px;
  }
  .outcomes-layout-home .outcomes-illustration-col {
    max-width: 100%;
  }
}

@media (max-width: 767.98px) {
  .outcomes-vector-img{
    max-width: 60% !important;
    right: 15px !important;
  }
  .outcomes-mobile-stats-box{
	  flex-shrink:unset;
	  
	margin:0 1.5rem -18rem;
    z-index: 1;
  }
  .outcomes-illustration .outcomes-vector-img{
    top: -140px !important;
    z-index: 0;
    object-fit: contain !important;
  }
  
  .text-48 { font-size: 32px !important; }
 
  .btn-yellow-pill-fit { height: 40px !important; }
  .callback-card { padding: 20px !important; }
  .callback-heading { font-size: 20px !important; }
	.is-home-btn-mobile{
		justify-content:center !important;
	    margin:30px 0px;
	}
}

@media (max-width: 575.98px) {
  .pu-modal { padding: 12px; }
  .pu-modal-dialog { padding: 24px 20px; border-radius: 16px; }
  .pu-modal-title { font-size: 20px; }
  .pu-city-list { max-height: 200px; }
  .pu-city-item { font-size: 14px; padding: 8px 10px; }
}

@media (max-width: 420px) {
  .mobile-stat-big{
    font-size:52px !important;
  }
  .mobile-stat-label{
    font-size:17px !important;
  }
  .mobile-stat-mid{
    font-size:32px !important;
  }
  .mobile-stat-bottom{
    font-size:42px !important;
  }
}

@media (max-width: 340px) {
  .mobile-stat-bottom{
    font-size: 31px !important;
  }
  .mobile-stat-label{
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pu-modal-backdrop,
  .pu-modal-dialog { animation: none; }
  .pu-modal-close { transition: none; }
}