/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
    CSS
-----------------------------------------------------------------*/


/* Hero H1 — blue wave sweep */
.hero-main-text {
  background: linear-gradient(90deg, #000 43%, #1642B9 50%, #000 57%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-position: 100% 0;
  animation: heroWave 3s ease-in-out forwards;
  display: inline;
}

@keyframes heroWave {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

.hero-opportunity {
  background: linear-gradient(90deg, #1642B9 50%, #000 50%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-position: 100% 0;
  animation: heroOpportunity 0.5s ease-in forwards;
  animation-delay: 0.9s;
  display: inline;
}

@keyframes heroOpportunity {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

/* Offset Fixed Header */
html {
  scroll-padding-top: 88px;
}

/* Prevent margin right on mobile */
html,
body {
  overflow-x: hidden;
}

ul li::marker {
  color: #1642B9;
}


/* Blink*/
.blinkerblack {
  animation: blinkerblack 5s linear infinite;
}

@keyframes blinkerblack {
  0% {
    color: #000000;
  }

  15% {
    color: #000000;
  }

  25% {
    color: transparent;
  }

  30% {
    color: #000000;
  }

  70% {
    color: #000000;
  }

  75% {
    color: transparent;
  }

  100% {
    color: #000000;
  }
}

.blinkerwhite {
  animation: blinkerwhite 5s linear infinite;
}

@keyframes blinkerwhite {
  0% {
    color: #ffffff;
  }

  15% {
    color: #ffffff;
  }

  25% {
    color: transparent;
  }

  30% {
    color: #ffffff;
  }

  70% {
    color: #ffffff;
  }

  75% {
    color: transparent;
  }

  100% {
    color: #ffffff;
  }
}

/*
flip card
*/
.card-flip>div {
  backface-visibility: hidden;
  transition: transform 300ms;
  transition-timing-function: linear;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}

.card-front {
  transform: rotateY(0deg);
}

.card-back {
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
}

.card-flip:hover .card-front {
  transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
}

.card-flip:hover .card-back {
  transform: rotateY(0deg);
  -moz-transform: rotateY(0);
  -webkit-transform: rotateY(0);
  -o-transform: rotateY(0);
  -ms-transform: rotateY(0);
}

/* Color Variables */
:root {
  --hp-custom-primary: #1642B9;
  --hp-custom-secondary: #FFE70D;
  --hp-custom-tertiary: #000000;
}

.hp-custom-background {
  background-image: url("images/spotlight.png");
  background-size: cover;
  /* Ensures the image covers the entire container */
  background-position: center;
  /* Centers the image */
  background-repeat: no-repeat;
  /* Prevents repeated images */
  height: 400px;
  /* Adjust height as needed */
}

/* Custom Text Colors */
.hp-text-custom-primary {
  color: var(--hp-custom-primary);
}

.hp-text-custom-secondary {
  color: var(--hp-custom-secondary);
}

.hp-text-custom-tertiary {
  color: var(--hp-custom-tertiary);
}

.hp-text-custom-white {
  color: #ffffff;
}

.hp-text-custom-light {
  color: #53565A;
}

.hp-text-custom-dark {
  color: #000000;
}



/* Custom Background Colors */
.hp-bg-custom-primary {
  background-color: var(--hp-custom-primary);
}

.hp-bg-custom-secondary {
  background-color: var(--hp-custom-secondary);
}

.hp-bg-custom-tertiary {
  background-color: var(--hp-custom-tertiary);
}

.hp-bg-custom-white {
  background-color: #ffffff;
}

.hp-bg-custom-light {
  background-color: #f9f9f9;
}

.hp-bg-custom-dark {
  background-color: #000000;
}



/* Custom Borders */
.hp-border-custom-primary {
  border: 0.5px solid var(--hp-custom-primary);
  border-radius: 0.1em;
}

.hp-border-custom-secondary {
  border: 0.5px solid var(--hp-custom-secondary);
  border-radius: 0.1em;
}

.hp-border-custom-tertiary {
  border: 0.5px solid var(--hp-custom-tertiary);
  border-radius: 0.1em;
}

.hp-border-custom-white {
  border: 0.5px solid #ffffff;
  border-radius: 0.1em;
}

.hp-border-custom-light {
  border: 0.5px solid #f1f1f1;
  border-radius: 0.1em;
}

.hp-border-custom-dark {
  border: 0.5px solid #000000;
  border-radius: 0.1em;
}



/* Custom Link Colors */
.hp-link-custom {
  color: var(--hp-custom-primary);
}

.hp-link-custom:hover,
.hp-link-custom:active,
.hp-link-custom:focus {
  color: var(--hp-custom-primary);
}

.hp-link-custom-light {
  color: #ffffff;
}

.hp-link-custom-light:hover,
.hp-link-custom-light:active,
.hp-link-custom-light:focus {
  color: var(--hp-custom-primary);
  text-decoration: underline;
}

.hp-link-custom-dark {
  color: var(--hp-custom-primary);
}

.hp-link-custom-dark:hover,
.hp-link-custom-dark:active,
.hp-link-custom-dark:focus {
  color: var(--hp-custom-primary);
}




/* Custom Outline Button */
.hp-btn-custom-outline {
  border-radius: 0px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  background-color: white;
  border-color: var(--hp-custom-secondary);
  color: black;
}

.hp-btn-custom-outline:hover,
.hp-btn-custom-outline:active,
.hp-btn-custom-outline:focus {
  font-weight: 600;
  font-size: 16px;
  background-color: var(--hp-custom-secondary);
  border-color: none;
  color: white;
}

.hp-btn-custom-outline-small {
  border-radius: 0px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  background-color: white;
  border-color: var(--hp-custom-primary);
  color: black;
}

.hp-btn-custom-outline-small:hover,
.hp-btn-custom-outline-small:active,
.hp-btn-custom-outline-small:focus {
  font-weight: 600;
  font-size: 14px;
  background-color: var(--hp-custom-primary);
  border-color: white;
  color: white;
}



/* Custom Filled Button */
.hp-btn-custom-filled-white {
  border-radius: 0px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  background-color: white;
  border-color: none;
  color: black;
}

.hp-btn-custom-filled-white:hover,
.hp-btn-custom-filled-white:active,
.hp-btn-custom-filled-white:focus {
  background-color: black;
  border-color: var(--hp-custom-secondary);
  color: white;
}

.hp-btn-custom-filled-secondary {
  border-radius: 0px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  background-color: var(--hp-custom-secondary);
  border-color: var(--hp-custom-secondary);
  color: white;
}

.hp-btn-custom-filled-secondary:hover,
.hp-btn-custom-filled-secondary:active,
.hp-btn-custom-filled-secondary:focus {

  background-color: white;
  border-color: var(--hp-custom-secondary);
  color: var(--hp-custom-secondary);
}

/* Custom Very Large Button */
.hp-btn-custom-filled-large {
  width: 100%;
  height: 100%;
  border-radius: 0px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  background-color: var(--hp-custom-primary);
  border-color: none;
  color: white;
}

.hp-btn-custom-filled-large:hover,
.hp-btn-custom-filled-large:active,
.hp-btn-custom-filled-large:focus {
  width: 100%;
  height: 100%;
  font-weight: 600;
  font-size: 16px;
  background-color: white;
  border-color: var(--hp-custom-primary);
  color: black;
}


/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: none;
}

.hp-btn-backtotop {
  border-radius: 0.25rem;
  text-decoration: none;
  background-color: #f3f3f3;
  border-color: #DCDCDC;
}

.hp-btn-backtotop:hover,
.hp-btn-backtotop:active,
.hp-btn-backtotop:focus {
  background-color: #ffffff;
  border-color: #C0C0C0;
}



/* HirePro Nav*/
.text-white {
  color: #fff;
}

.text-green {
  color: #28890F;
  font-weight: bold;
  font-size: 1rem;
}

.link-green {
  color: #28890F;
  font-weight: bold;
  font-size: 1.2rem;
}

.link-white {
  color: #ffffff;
  font-size: 1.1rem;
}

.link-dark {
  color: #000000;
  font-size: 1.1rem;
}

.link-green:hover,
.link-green:active,
.link-green:focus {
  color: #28890F;
}

.link-white:hover,
.link-whiten:active,
.link-white:focus {
  color: #28890F;
}

.border-green {
  border-color: #28890F;
  border-radius: 0px;
  border: 1px;
}

/* HirePro Buttons*/
.hp-btn {
  width: 100%;
  border-radius: 0px;
  padding: 1rem 1rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  background-color: #00A3E0;
  border-color: #00A3E0;
  color: white;
}

.hp-btn:hover,
.hp-btn:active,
.hp-btn:focus {
  background-color: white;
  border-color: #00A3E0;
  color: #000;
}

.hp-btn-blue {
  padding: 1rem 1rem;
  border-radius: 0px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  background-color: #00A3E0;
  border-color: #00A3E0;
  color: white;
}

.hp-btn-blue:hover,
.hp-btn:active,
.hp-btn:focus {
  background-color: white;
  border-color: #00A3E0;
  color: #000000;
}

.hp-btn2 {
  padding: 1rem 1rem;
  border-radius: 0px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  background-color: #00A3E0;
  border-color: #00A3E0;
  color: white;
}

.hp-btn2:hover,
.hp-btn:active,
.hp-btn:focus {
  text-decoration: underline;
  background-color: #00A3E0;
  border-color: #00A3E0;
  color: white;
}

.hp-btn-black {
  width: 100%;
  padding: 1rem 1rem;
  border-radius: 0px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  background-color: black;
  border-color: black;
  color: white;
}

.hp-btn-black:hover,
.hp-btn-black:active,
.hp-btn-black:focus {
  background-color: white;
  border-color: #000000;
  color: #000000;
}

.hp-btn-outline-primary {
  width: 100%;
  padding: 1rem 1rem;
  font-weight: 700;
  font-size: 15px;
  border-radius: 0px;
  background-color: #ffffff;
  border-color: #00A3E0;
  color: #00A3E0;
}

.hp-btn-outline-primary:hover,
.hp-btn-outline-primary:active,
.hp-btn-outline-primary:focus {
  background-color: #ffffff;
  text-decoration: underline;
  border-color: #00A3E0;
  color: #00A3E0;
}

.hp-btn-outline-secondary {
  width: 100%;
  padding: 1rem 1rem;
  font-weight: 700;
  font-size: 15px;
  border-radius: 0px;
  background-color: #ffffff;
  border-color: #000000;
  color: #000000;
}

.hp-btn-outline-secondary:hover,
.hp-btn-outline-secondary:active,
.hp-btn-outline-secondary:focus {
  background-color: #ffffff;
  text-decoration: underline;
  border-color: #000000;
  color: #000000;
}

.hp-disabled {
  border-radius: 0px;
  font-weight: 500;
  font-size: 16px;
  pointer-events: none;
  background-color: black;
  border-color: #53565A;
  color: #53565A;
}



/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: none;
}

.hp-btn-backtotop {
  border-radius: 0.25rem;
  text-decoration: none;
  background-color: #f6f6f6;
  border-color: #DCDCDC;
}

.hp-btn-backtotop:hover,
.hp-btn-backtotop:active,
.hp-btn-backtotop:focus {
  background-color: #ffffff;
  border-color: #C0C0C0;
}



/* ─── Flipkart Early Careers ──────────────────────────────────────── */

body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  color: #1a1a1a;
}

/* Ken Burns hero */
.kb-wrap {
  will-change: transform;
}

.kb-img {
  width: 100%;
  display: block;
  animation: kenBurns 10s ease-in-out infinite alternate;
  transform-origin: center center;
}

@keyframes kenBurns {
  from {
    transform: scale(1) translate(0, 0);
  }

  to {
    transform: scale(1.09) translate(-2%, -1.5%);
  }
}

/* ─── Hero Mosaic ────────────────────────────────────────────────── */

.hero-mosaic {
  display: grid;
  grid-template-columns: 2.5fr 3.5fr 3fr;
  grid-template-rows: 185px 185px; /* was 220px 220px; total 380px = 450px − 70px */
  gap: 10px;
  max-width: 84.09%; /* 185/220 — keeps each cell's aspect ratio intact */
  margin-left: auto;
  margin-right: auto;
}

/* Grid placement */
.hero-cell-1 { grid-column: 1; grid-row: 1 / 3; }
.hero-cell-2 { grid-column: 2; grid-row: 1; }
.hero-cell-3 { grid-column: 3; grid-row: 1; }
.hero-cell-4 { grid-column: 2; grid-row: 2; }
.hero-cell-5 { grid-column: 3; grid-row: 2; }

/* Each cell clips its image's Ken Burns motion */
.hero-mosaic-cell {
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  border: none;
}

/* Image fills cell; Ken Burns animates the img, not the cell.
   top center anchor: zoom expands downward, top of image never clips. */
.hero-mosaic-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform-origin: top center;
}

/* Ken Burns variants — hkb3 uses center origin so positive Y translate stays within scale overflow */
@keyframes hkb1 {
  from { transform: scale(1)    translate(0,     0);  }
  to   { transform: scale(1.10) translate(-2%,   0);  }
}
@keyframes hkb2 {
  from { transform: scale(1.08) translate(-1.5%, 0);  }
  to   { transform: scale(1)    translate(0,     0);  }
}
@keyframes hkb3 {
  from { transform: scale(1)    translate(0,    0);    }
  to   { transform: scale(1.10) translate(2%,   3%);   }
}
@keyframes hkb4 {
  from { transform: scale(1.07) translate(1%,    0);  }
  to   { transform: scale(1)    translate(0,     0);  }
}
@keyframes hkb5 {
  from { transform: scale(1)    translate(0,     0);  }
  to   { transform: scale(1.10) translate(-2%,   0);  }
}

.hero-kb-1 { animation: hkb1 14s ease-in-out infinite alternate; }
.hero-kb-2 { animation: hkb2 11s ease-in-out infinite alternate; }
.hero-kb-3 { animation: hkb3 13s ease-in-out infinite alternate; object-position: top center; transform-origin: center center; }
.hero-kb-4 { animation: hkb4 12s ease-in-out infinite alternate; }
.hero-kb-5 { animation: hkb5 10s ease-in-out infinite alternate; }

/* Pop-in: gentle fade-in with a subtle scale lift */
@keyframes heroPopIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1);    }
}

.hero-pop {
  opacity: 0;
}

.hero-pop.hero-pop-in {
  animation: heroPopIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--pop-delay, 0ms);
}

/* Tablet: row heights stay at 185px; reset max-width to full */
@media (max-width: 991px) {
  .hero-mosaic {
    grid-template-rows: 185px 185px;
    max-width: 100%;
  }
}

/* Mobile: 2-column layout */
@media (max-width: 767px) {
  .hero-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 150px 100px 100px;
    gap: 8px;
  }
  .hero-cell-1 { grid-column: 1; grid-row: 1 / 3; }
  .hero-cell-2 { grid-column: 2; grid-row: 1; }
  .hero-cell-3 { grid-column: 2; grid-row: 2; }
  .hero-cell-4 { grid-column: 1; grid-row: 3; }
  .hero-cell-5 { grid-column: 2; grid-row: 3; }
}

/* Reduced motion: disable all hero animations */
@media (prefers-reduced-motion: reduce) {
  .hero-kb-1, .hero-kb-2, .hero-kb-3, .hero-kb-4, .hero-kb-5 {
    animation: none !important;
  }
  .hero-pop {
    opacity: 1 !important;
  }
  .hero-pop.hero-pop-in {
    animation: none !important;
  }
}

/* Parallax helper */
.parallax-img {
  will-change: transform;
  transition: transform 0.05s linear;
}

/* ─── Hero Decorative Icons (EarlyCareers brushstroke) ───────────────── */

.hero-deco-left-wrap,
.hero-deco-right-wrap {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

/* Behind the mosaic — z-index 1, container sits at z-index 2 */
.hero-deco-left-wrap {
  left: -11%;
  top: 54%;
  width: 31%;
  z-index: 1;
}

.hero-deco-left-wrap img {
  width: 100%;
  display: block;
}

/* Above the mosaic — z-index 3 */
.hero-deco-right-wrap {
  right: -6%;
  bottom: 3%;
  width: 42%;
  z-index: 3;
}

.hero-deco-right-wrap img {
  width: 100%;
  display: block;
}

/* Mobile: hide left icon, keep right, adjust size */
@media (max-width: 767px) {
  .hero-deco-left-wrap {
    display: none;
  }
  .hero-deco-right-wrap {
    right: -14%;
    bottom: 6%;
    width: 62%;
  }
}

/* ─── Values Section Decorative Icon ────────────────────────────────── */

.values-deco-right-wrap {
  position: absolute;
  right: -5%;
  top: 70%;
  transform: translateY(-50%);
  width: 37.6%;
  z-index: 2;
  pointer-events: none;
}

.values-deco-right-wrap img {
  width: 100%;
  display: block;
}

/* Hide on mobile */
@media (max-width: 767px) {
  .values-deco-right-wrap {
    display: none;
  }
}

/* Floating icon */
.ec-float {
  animation: ecFloat 3.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ecFloat {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* Navbar floating wrapper */
.fk-nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding: 0.4rem 1.25rem;
  background-color: #ffffff;
}

/* Navbar */
.fk-nav {
  position: relative;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.fk-nav .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.9rem;
  padding: 0.4rem 1.1rem;
  border-radius: 50px;
  transition: color 0.2s, background 0.2s;
}

.fk-nav .nav-link:hover,
.fk-nav .nav-link.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14);
}

/* Mobile: float the collapse below the pill so the pill shape never changes */
@media (max-width: 991px) {
  .fk-nav-wrapper {
    padding: 0.3rem 0.875rem;
  }

  .fk-nav #mainNav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background-color: #1642B9;
    border-radius: 20px;
    padding: 8px 16px 12px;
    box-shadow: none;
  }
}

/* Section padding */
.section-pad {
  padding: 4em 0;
}

@media (max-width: 767px) {
  .section-pad {
    padding: 3em 0;
  }
}

/* Section label — font-weight/uppercase/display/margin handled by Bootstrap utilities on element */
.section-label {
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: #1642B9;
}

/* Values cards */
/* Initial hidden state — JS adds .value-card-visible to trigger the animation */
.value-card {
  background-color: #fff;
  border: 1.5px solid #e0e8f5;
  border-bottom: 4px solid #1642B9;
  border-radius: 1rem;
  padding: 28px 24px;
  height: 100%;
  transition: border-color 0.25s, box-shadow 0.25s,
              opacity 0.55s ease, transform 0.55s ease;
  opacity: 0;
  transform: translateY(32px);
}

.value-card.value-card-visible {
  opacity: 1;
  transform: translateY(0);
}

.value-card:hover {
  border-color: #1642B9;
  box-shadow: 0 6px 28px rgba(22, 66, 185, 0.09);
}

.value-card img {
  height: 75px;
  margin-bottom: 16px;
  display: block;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

.value-card.value-card-visible img {
  opacity: 1;
  transform: scale(1);
}

/* font-weight/uppercase/margin handled by Bootstrap utilities on element */
.value-title {
  font-size: 1rem;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease 0.48s, transform 0.35s ease 0.48s;
}

.value-card.value-card-visible .value-title {
  opacity: 1;
  transform: translateY(0);
}

.value-desc {
  font-size: 1rem;
  color: #555;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease 0.62s, transform 0.35s ease 0.62s;
}

.value-card.value-card-visible .value-desc {
  opacity: 1;
  transform: translateY(0);
}

/* Early Careers text — line-height handled by lh-lg on element */
.ec-body {
  font-size: 0.95rem;
  color: #444;
}

/* Video thumbnail — position/overflow/radius handled by Bootstrap utilities on element */
.video-thumb-wrap {
  cursor: pointer;
  background: #d8e0ef;
}

.video-thumb-wrap img {
  width: 100%;
  display: block;
}

/* d-flex/align-items/justify-content/rounded-circle handled by Bootstrap utilities on element */
.play-btn-overlay {
  width: 72px;
  height: 72px;
  background: #1642B9;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s, background 0.25s;
}

.video-thumb-wrap:hover .play-btn-overlay {
  transform: translate(-50%, -50%) scale(1.1);
  background: #0f2e9e;
}

/* position/bottom/start/end handled by Bootstrap utilities on element */
.video-caption-overlay {
  padding: 20px 24px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.88));
}

/* Gallery two-layer stack with inter-image parallax */
.gallery-stack {
  position: relative;
}

.gallery-back {
  position: relative;
  z-index: 1;
  will-change: transform;
  transition: transform 0.05s linear;
}

/* Front image overlaps the back image */
.gallery-front {
  position: relative;
  z-index: 2;
  margin-top: -80px;
  will-change: transform;
  transition: transform 0.05s linear;
}

/* Reserve image height before the lazy banners load, so the gallery section
   does not grow mid-scroll and undershoot in-page anchor jumps (e.g. #programs).
   Ratios match the <picture> sources: mobile assets are the base, desktop ≥992px.
   Mobile-1 1500x810, Mobile-2 1500x844; Desktop-1 2000x591, Desktop-2 2000x657. */
.gallery-back img { aspect-ratio: 1500 / 810; }
.gallery-front img { aspect-ratio: 1500 / 844; }

@media (min-width: 992px) {
  .gallery-back img { aspect-ratio: 2000 / 591; }
  .gallery-front img { aspect-ratio: 2000 / 657; }
}

/* Background-layer icon wrapper (parallax handled via JS transform) */
.parallax-bg-wrap {
  will-change: transform;
  transition: transform 0.05s linear;
}

/* Gallery wave section */
.gallery-wave {
  background-color: #1642B9;
  position: relative;
  /* Asymmetric buffer: more top clearance for image entry, less bottom to avoid dead space on exit. */
  padding: 110px 0 50px;
  border-radius: 3rem;
  overflow: hidden;   /* clips at the rounded edges; images stay inside the buffer */
  margin: 0 16px;
}

@media (max-width: 991px) {
  .gallery-wave { padding: 36px 0 20px; }
}

@media (max-width: 767px) {
  .gallery-front { margin-top: -44px; }
}

@media (max-width: 575px) {
  .gallery-wave { padding: 30px 0 16px; }
  .gallery-front { margin-top: -24px; }
}

.gallery-wave::before,
.gallery-wave::after {
  display: none;
}

.gallery-inner {
  position: relative;
  z-index: 1;
}

/* Program cards — d-block/overflow/radius handled by Bootstrap utilities on element */
.program-card {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.55s ease, transform 0.55s ease, box-shadow 0.3s;
}

.program-card.program-card-visible {
  opacity: 1;
  transform: translateY(0);
}

.program-card.program-card-visible:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* text-center/fw-medium/mt-2 handled by Bootstrap utilities on element */
.program-label {
  font-size: 0.85rem;
  color: #555;
}

/* Team cards — rounded/text-center/h-100 handled by Bootstrap utilities on element */
.team-card {
  background: #f4f7fc;
  padding: 28px 20px 24px;
  transition: box-shadow 0.25s;
  position: relative;
  cursor: pointer;
}

.team-card:hover {
  box-shadow: 0 8px 32px rgba(22, 66, 185, 0.12);
}

/* d-block/mx-auto/mb-3/object-fit-contain handled by Bootstrap utilities on element */
.team-card img {
  height: 100px;
}

/* text-decoration-none/fw-semibold handled by Bootstrap utilities on element */
.team-card a {
  color: #1642B9;
  font-size: 0.88rem;
}

.team-card a:hover {
  text-decoration: underline;
}

/* Testimonials — bg-white/border handled by Bootstrap utilities on element */
.testimonial-wrap {
  border-color: #1642B9 !important;
  padding: 80px 48px 36px;
  border-radius: 20px;
  position: relative;
}

.testimonial-row {
  padding-top: 56px;
}

@media (max-width: 575px) {
  .testimonial-wrap {
    padding: 72px 20px 24px;
  }
}

/* rounded-circle/object-fit-cover/mb-3 handled by Bootstrap utilities on element */
.testimonial-photo {
  width: 86px;
  height: 86px;
  border: 4px solid #1642B9;
}

.testimonial-role {
  font-size: 0.94rem;
  color: #1642B9;
}

/* fw-semibold/my-3 handled by Bootstrap utilities on element */
.testimonial-title {
  font-size: 1rem;
  color: #1a1a1a;
}

/* small/lh-lg handled by Bootstrap utilities on element */
.testimonial-body {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #444;
}

#testimonialCarousel .carousel-inner {
  overflow: visible;
}

#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next {
  width: 44px;
  height: 44px;
  top: 50%;
  transform: translateY(-50%);
  background: #1642B9;
  border-radius: 50%;
  opacity: 1;
}

#testimonialCarousel .carousel-control-prev {
  left: -22px;
}

#testimonialCarousel .carousel-control-next {
  right: -22px;
}

#testimonialCarousel .carousel-control-prev svg,
#testimonialCarousel .carousel-control-next svg {
  transition: color 0.2s ease, stroke 0.2s ease;
}

#testimonialCarousel .carousel-control-prev:hover svg,
#testimonialCarousel .carousel-control-next:hover svg {
  color: #FFE70D;
  stroke: #FFE70D;
  stroke-width: 1.5;
}

/* Moments of Maximization — Gallery Carousel */
.gallery-carousel-outer {
  position: relative;
  overflow: hidden;
}

.gallery-carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.25rem;
}

.gallery-carousel-track::-webkit-scrollbar {
  display: none;
}

.gallery-img-item {
  flex: 0 0 calc(25% - 0.75rem);
  flex-shrink: 0;
  height: 260px;
  border-radius: 1rem;
  overflow: hidden;
  scroll-snap-align: start;
}

.gallery-img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.gallery-img-item:hover img {
  transform: scale(1.05);
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1642B9;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.9;
  padding: 0;
  line-height: 1;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.gallery-arrow:hover {
  opacity: 1;
}

.gallery-arrow:hover svg {
  color: #FFE70D;
  stroke: #FFE70D;
  stroke-width: 1.5;
}

.gallery-arrow-prev { left: 0.75rem; }
.gallery-arrow-next { right: 0.75rem; }

.gallery-arrow--hidden {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 992px) {
  .gallery-carousel-outer {
    padding: 0 3.75rem;
  }
  .gallery-arrow-prev { left: 0; }
  .gallery-arrow-next { right: 0; }
}

@media (min-width: 576px) and (max-width: 991px) {
  .gallery-img-item {
    flex: 0 0 calc(50% - 0.5rem);
    height: 220px;
  }
}

@media (max-width: 575px) {
  .gallery-img-item {
    flex: 0 0 80%;
    height: 200px;
  }
  .gallery-arrow {
    display: none;
  }
}

/* Footer — text-white handled by Bootstrap utility on element */
.fk-footer {
  background-color: #1642B9;
}

.fk-footer a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.fk-footer a:hover {
  color: #FFE70D;
}

.fk-footer-hr {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.fk-social a {
  color: #ffffff;
  transition: opacity 0.2s;
}

.fk-social a:hover {
  opacity: 0.7;
}

/* Decorative SVGs */
.deco-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-60%);
  width: 130px;
  pointer-events: none;
  z-index: 0;
}

.deco-left {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  pointer-events: none;
  z-index: 0;
}

/* ─── Teams / Roles We Offer Page ────────────────────────────────── */

/* Roles page hero */
.roles-hero {
  background: #fff;
  padding: 36px 1rem 28px;
  text-align: center;
}

/* Sub-navigation — bordered pill container, yellow active tab */
.teams-subnav {
  position: sticky;
  top: 58px;
  z-index: 1020;
  background: #fff;
  border-bottom: none;
  padding: 12px 0 14px;   /* horizontal padding handled by inner .container */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  transition: top 0.4s ease;
}

.teams-subnav.subnav-raised {
  top: 0;
}

.teams-subnav::-webkit-scrollbar {
  display: none;
}

/* The pill border spans the same width as the section container */
.teams-subnav-inner {
  display: flex;
  border: 1px solid #1642B9;
  border-radius: 1rem;
  padding: 4px;
  width: 100%;
  min-width: max-content; /* allows horizontal scroll on small screens */
}

/* Desktop: equal-width tabs */
@media (min-width: 992px) {
  .teams-subnav-inner {
    min-width: unset;
  }
  .teams-subnav-link {
    flex: 1;
    text-align: center;
  }
}

.teams-subnav-link {
  display: block;
  padding: 10px 22px;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 0.9rem;
  transition: background 0.2s;
}

.teams-subnav-link:hover {
  background: rgba(255, 231, 13, 0.45);
  color: #1a1a1a;
  text-decoration: none;
}

.teams-subnav-link.active {
  background: #FFE70D;
  color: #1a1a1a;
}

@media (max-width: 991px) {
  .teams-subnav {
    top: 54px;
    padding: 10px 0 12px;
    overflow-x: visible;
  }
  .teams-subnav.subnav-raised {
    top: 0;
  }
  .teams-subnav-inner {
    flex-wrap: wrap;
    min-width: unset;
    gap: 6px;
  }
  .teams-subnav-link {
    flex: 0 0 calc(50% - 3px);
    width: calc(50% - 3px);
    padding: 10px 8px;
    font-size: 0.78rem;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    box-sizing: border-box;
  }
  .teams-subnav-link:not(.active) {
    background: rgba(255, 231, 13, 0.25);
  }
  .teams-subnav-link:not(.active):hover {
    background: rgba(255, 231, 13, 0.45);
  }
}

/* Team section scroll offset — clears both navbars */
.team-section {
  scroll-margin-top: 116px;
}

/* Shared section heading size — used on home and roles pages */
.section-title {
  font-size: clamp(1.65rem, 2.8vw, 2.2rem);
}

/* Team section title */
.team-section-title {
  font-size: clamp(1.65rem, 2.8vw, 2.2rem);
  font-weight: 700;
  color: #1642B9;
  margin-bottom: 1.25rem;
  line-height: 1.15;
}

/* Team section image */
.team-section-img {
  width: 100%;
  border-radius: 0; /* parent (.team-img-col on mobile, .team-img-clip on desktop) handles rounding */
  display: block;
}

/* Positioning context for the icon overlay on mobile */
.team-img-col {
  overflow: hidden;   /* rectangular safety clip so the icon never escapes the col */
  border-radius: 0;   /* no radius here — col box starts at 0px (viewport edge), not at the image edge */
  position: relative; /* needed for absolutely-positioned icon overlay */
}

/* Clip frame for Ken Burns animation and rounded corners.
   Lives at the image boundary (col content area, 12px from viewport edge),
   so border-radius aligns with the rest of the page content.
   translateZ(0) promotes this element to its own GPU layer, which forces
   overflow:hidden + border-radius to correctly clip the animated child
   on both Safari (iPhone) and Chrome (Samsung) — prevents black corner flicker. */
.team-img-clip {
  overflow: hidden;
  border-radius: 1rem;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Early Careers icon overlay — sits on the bottom half of each team image,
   extends to the right viewport edge (body overflow-x: hidden clips the excess) */
.team-ec-icon {
  position: absolute;
  right: 0;           /* anchor right edge to col edge — guarantees no right gap on any aspect ratio */
  bottom: 0;
  width: 80%;         /* 80% of col width → left edge lands ~18% inside the image */
  height: auto;       /* maintain aspect ratio from width */
  max-width: none;
  pointer-events: none;
  z-index: 2;
}

/* ≥1024px: image height matches text column height at every resolution.
   Absolute positioning takes the image out of flow so only the text
   column drives the row height; the image then fills that space exactly. */
@media (min-width: 1024px) {
  .team-img-col {
    position: relative;
    overflow: visible; /* allow icon to extend past column towards viewport edge */
    border-radius: 0;  /* border-radius moved to .team-img-clip */
  }

  /* Inner wrapper clips the Ken Burns animation and applies the rounded corners */
  .team-img-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 1rem;
  }

  .team-img-col .team-section-img {
    position: absolute;
    inset: 0;          /* top/right/bottom/left: 0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;  /* parent clips via overflow + border-radius */
  }

  .team-ec-icon {
    left: 50%;         /* start from the horizontal centre of the image column */
    right: auto;       /* cancel mobile right: 0 */
    width: auto;       /* cancel mobile width: 80% — let height drive the size */
    height: 55%;       /* cover the bottom ~55% of the image on desktop */
  }
}

/* Ken Burns keyframes — four distinct pan/zoom directions.
   Starting at scale(1.03) instead of scale(1) ensures the image always
   overflows the clip container slightly, so the GPU-composited layer
   never exposes the black backing at rounded corners during zoom-out. */
@keyframes kb-pan-right {
  from { transform: scale(1.03) translateX(0); }
  to   { transform: scale(1.12) translateX(-4%); }
}
@keyframes kb-pan-left {
  from { transform: scale(1.03) translateX(0); }
  to   { transform: scale(1.12) translateX(4%); }
}
@keyframes kb-pan-up {
  from { transform: scale(1.03) translateY(0); }
  to   { transform: scale(1.12) translateY(-4%); }
}
@keyframes kb-pan-diagonal {
  from { transform: scale(1.03) translate(-2%, -2%); }
  to   { transform: scale(1.12) translate(2%,  2%); }
}

#team-pt  .team-section-img { animation: kb-pan-right    12s ease-in-out infinite alternate; }
#team-bs  .team-section-img { animation: kb-pan-left     12s ease-in-out infinite alternate; }
#team-osc .team-section-img { animation: kb-pan-up       12s ease-in-out infinite alternate; }
#team-cc  .team-section-img { animation: kb-pan-diagonal 12s ease-in-out infinite alternate; }

/* Accordion — Flipkart blue headers */
.team-accordion .accordion-item {
  border: 1.5px solid #e0e8f5;
  border-radius: 0.6rem !important;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.team-accordion .accordion-button,
.team-accordion .accordion-button.collapsed {
  background-color: #1642B9;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0 !important;
}

.team-accordion .accordion-button:not(.collapsed) {
  background-color: #1642B9;
  color: #fff;
  box-shadow: none;
}

.team-accordion .accordion-button:focus {
  box-shadow: none;
}

.team-accordion .accordion-button::after,
.team-accordion .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

/* Numbered role list inside accordion */
.role-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.role-list li {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid #f0f4fb;
  font-size: 0.95rem;
  color: #222;
}

.role-list li:last-child {
  border-bottom: none;
}

/* "Who Can Apply" box */
.who-can-apply-box {
  background: #f4f7fc;
  border-radius: 1rem;
  padding: 1.5rem 2rem;
}

@media (max-width: 575px) {
  .who-can-apply-box {
    padding: 1.25rem 1.25rem;
  }
}

/* Testimonial photo — cutout variant (hangs 50% above card) */
.testi-photo-frame {
  position: absolute;
  top: -56px;
  left: 50%;
  transform: translateX(-50%);
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: block;
}

/* Static photo in roles.html — single img fills the circular frame */
.testi-photo-frame img:not(.testi-img-layer) {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Two stacked layers for crossfade — both fill the frame absolutely */
.testi-img-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  transition: opacity 300ms ease;
}

/* ─── Early Careers sub-section scroll animations ─────────────────── */

/* Wrapper clips Ken Burns overflow; rounded-3 Bootstrap class applied in HTML */
.ec-img-wrap {
  overflow: hidden;
}

/* Ken Burns — stopped by default, plays only while parent row is visible */
.ec-img-wrap img {
  display: block;
  width: 100%;
  /* Reserve height so these images don't collapse-then-grow during a smooth
     anchor scroll (was making the first "Our Programs" click undershoot).
     EarlyCareers-1 is 1000x476, -2/-3 are 1200x571 — all ~2.1:1. */
  aspect-ratio: 1200 / 571;
  object-fit: cover;
  animation-duration: 9s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-name: none;
}
.ec-row.is-visible .ec-img-wrap img {
  animation-name: ecSectionKB;
}
@keyframes ecSectionKB {
  from { transform: scale(1)    translate(0,     0);    }
  to   { transform: scale(1.06) translate(-1.5%, -1%);  }
}

/* Initial hidden state */
.ec-anim-img,
.ec-anim-text {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.ec-from-right { transform: translateX(64px);  }
.ec-from-left  { transform: translateX(-64px); }
.ec-anim-text  { transform: translateY(40px);  }

/* On mobile stack: swap horizontal slide for a fade-up on image cols too */
@media (max-width: 991px) {
  .ec-from-right,
  .ec-from-left { transform: translateY(32px); }
}

/* Visible: image slides in first, text follows 150 ms later */
.ec-row.is-visible .ec-anim-img {
  opacity: 1;
  transform: translate(0, 0);
}
.ec-row.is-visible .ec-anim-text {
  opacity: 1;
  transform: translate(0, 0);
  transition-delay: 0.15s;
}

/* Video row fades up as a single unit */
.ec-video-row {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.ec-video-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ec-anim-img,
  .ec-anim-text,
  .ec-video-row {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ec-img-wrap img { animation-name: none !important; }
}

/* ─── Testimonial custom slider ───────────────────────────────────── */

.testi-counter {
  font-size: 0.78rem;
  color: #aaa;
  letter-spacing: 0.04em;
}

/* Photo crossfade handled via CSS transition on .testi-img-layer (see above) */

/* Text: directional slide + fade — going next */
@keyframes testiTextOutNext {
  from { opacity: 1; transform: translateX(0);    }
  to   { opacity: 0; transform: translateX(-28px); }
}
@keyframes testiTextInNext {
  from { opacity: 0; transform: translateX(28px);  }
  to   { opacity: 1; transform: translateX(0);     }
}

/* Text: directional slide + fade — going prev */
@keyframes testiTextOutPrev {
  from { opacity: 1; transform: translateX(0);    }
  to   { opacity: 0; transform: translateX(28px);  }
}
@keyframes testiTextInPrev {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0);     }
}

.testi-text-out-next   { animation: testiTextOutNext 200ms ease-in  forwards; }
.testi-text-in-next    { animation: testiTextInNext  300ms ease-out forwards; }
.testi-text-out-prev   { animation: testiTextOutPrev 200ms ease-in  forwards; }
.testi-text-in-prev    { animation: testiTextInPrev  300ms ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
  .testi-img-layer { transition: none !important; }
  .testi-text-out-next, .testi-text-in-next,
  .testi-text-out-prev, .testi-text-in-prev {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}