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

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


/* The only element that clips/rounds */
  .video-frame{
    border-radius: 0.7em;
    overflow: hidden;
    background: #000;            /* avoids edge artifacts on first paint */
  }

/* Clip on the non-transformed carousel-inner wrapper too — Chromium/WebKit can drop
   a carousel-item's own border-radius while Bootstrap's slide transform is animating it */
  #innoversiteVideoCarousel .carousel-inner{
    border-radius: 0.7em;
    overflow: hidden;
  }

/* Make poster/video respect the rounding */
  .video-frame > video{
    border-radius: inherit;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;           /* optional; remove if you dislike cropping */
  }


/* ---- Media facade (image + play button, click-to-load real player) ---- */
.media-facade {
  background-size: cover;
  background-position: center;
  cursor: pointer;
  position: relative;
}

.media-facade iframe,
.media-facade video {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Shared circular play button (YT facade + local video slides) ---- */
.media-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4rem;
  height: 4rem;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 136, 89, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.ratio:hover .media-play-btn {
  background-color: #008859;
  transform: translate(-50%, -50%) scale(1.06);
}

/* ---- Carousel brand color overrides ---- */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 2rem;   /* optional—make arrows a little larger */
  height: 2rem;
  /* green SVG arrow (replace default white) */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23008859' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.146a.5.5 0 0 1 0 .708L5.207 8l6.147 6.146a.5.5 0 0 1-.708.708l-6.5-6.5a.5.5 0 0 1 0-.708l6.5-6.5a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23008859' viewBox='0 0 16 16'%3e%3cpath d='M4.646 14.854a.5.5 0 0 1 0-.708L10.793 8 4.646 1.854a.5.5 0 1 1 .708-.708l6.5 6.5a.5.5 0 0 1 0 .708l-6.5 6.5a.5.5 0 0 1-.708 0z'/%3e%3c/svg%3e");
}

/* indicator (dot) color */
/* Thicker indicators */
#innoversiteIndicators.carousel-indicators [data-bs-target]{
  background-color: #008859;
  width: 2rem;      /* optional: makes them longer too */
  height: .4rem;      /* thickness */
  border: 0;           /* override Bootstrap's 10px transparent top/bottom border, which otherwise clips the radius to 0 */
  border-radius: .2rem;
  opacity: .65;        /* inactive */
  margin: 0 .35rem;    /* spacing */
}

/* Active = darker/thicker feel */
#innoversiteIndicators.carousel-indicators .active{
  opacity: 1;
  height: .5rem;      /* slightly thicker when active (optional) */
}

.carousel-item .card {
  opacity: 0;
  transform: scale(0.92) translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.carousel-item.active .card {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* --- Dash-style carousel indicators --- */
.carousel-indicators {
  gap: .45rem;                 /* space between dashes */
}

.carousel-indicators [data-bs-target]{
  width: 1.3rem;              /* ← dash length  (shorter or longer) */
  height: 0.3rem;                 /* ← dash thickness (make “thicker”) */
  border: 0;                   /* override Bootstrap's 10px transparent top/bottom border, which otherwise clips the radius to 0 */
  border-radius: 2px;          /* rounded corners (kept ≤ half the height to avoid arcing) */
  background-color: #008859;   /* brand green */
  opacity: .45;                /* dim when inactive */
  transition: opacity .3s;
}

.carousel-indicators .active{
  opacity: 1;                  /* fully opaque for the current slide */
}

/* For screens 1401px and above */
    @media (min-width: 1400px) {
        .custom-line-height {
            line-height: 1.8; /* Change to your desired value */
        }
    }

    /* For screens 1399px and below */
    @media (max-width: 1399px) {
        .custom-line-height {
            line-height: 1.45; /* Change to your desired value */
        }
    }


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


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


/* Custom Fonts */
@font-face {
    font-family: 'BNPP Sans';
    src: url('fonts/bnpp-sans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BNPP Sans';
    src: url('fonts/bnpp-sans-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'BNPP Square';
    src: url('fonts/bnpp-square-regular-v3.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BNPP Square';
    src: url('fonts/bnpp-square-bold-v3.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

.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;    }
  }

/* Custom Under Line About Headline */
.hp-text-headline:before {
    content: ""; 
    display: block; 
    width: 7rem;
    height: 0.3525rem;
    margin-bottom: 1.2rem;
    background-color: #008859;
    border-radius: 0.3125rem 0.3125rem 0 0; /* Top-left and top-right corners rounded */
}

.hp-text-headline2 {
    text-align: center;
    position: relative;
}

.hp-text-headline2::before {
    content: ""; 
    display: block; 
    width: 7rem;
    height: 0.3525rem;
    margin: 0 auto 1.2rem auto; /* auto margins center it */
    background-color: #008859;
    border-radius: 0.3125rem 0.3125rem 0 0; /* Top-left and top-right corners rounded */
}


/* 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;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .card-flip:hover .card-front,
  .card-flip.is-flipped .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,
  .card-flip.is-flipped .card-back {
    transform: rotateY(0deg);
    -moz-transform: rotateY(0);
    -webkit-transform: rotateY(0);
    -o-transform: rotateY(0);
    -ms-transform: rotateY(0);
  }



/* Make font smaller conditionally */
@media (max-width: 1399.98px) {
    .custom-font-size {
      font-size: 0.92rem;
    }
  }

/* Color Variables */
:root {
    --hp-custom-primary: #2D2926;
    --hp-custom-secondary: #008859;
    --hp-custom-tertiary: #004DFF;
}


/* 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: #a1a1a1;
}

.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-blue{
    background-color: #F1FAFD;
}

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

.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-primary{
    color: var(--hp-custom-primary);
}
.hp-link-custom-primary:hover, .hp-link-custom-primary:active, .hp-link-custom-primary:focus{
    color: var(--hp-custom-primary);
}

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

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

.hp-link-custom-white{
    color: #ffffff;
}
.hp-link-custom-white:hover, .hp-link-custom-white:active, .hp-link-custom-white:focus{
    color: #ffffff;
}

.hp-link-custom-dark{
    color: #000000;
}
.hp-link-custom-dark:hover, .hp-link-custom-dark:active, .hp-link-custom-dark:focus{
    color: #000000;
}


/* Custom Outline Button */
.hp-btn-custom-outline-pill{
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    background-color: #f9f9f9;
    border-color: var(--hp-custom-primary);
    color: black;
  }

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

.hp-card-custom{
    border-radius: 40px;
    font-weight: 600;
    font-size: 1rem;
    background-color: #fffbee;
    border: solid 1.5px #ffc20e;
    color: black;
  }

/* Custom Filled Button */
.hp-btn-custom-filled-primary{
    border-radius: 0px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    background-color: var(--hp-custom-primary);
    color: white;
}
.hp-btn-custom-filled-primary:hover, .hp-btn-custom-filled-primary:active, .hp-btn-custom-filled-primary:focus{
     font-weight: 600;
     font-size: 16px;
     background-color: white;
     border-color: var(--hp-custom-primary);
     color: black;
}

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

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


.hp-btn-custom-filled-secondary-small{
    border-radius: 0px;
    text-decoration: none;
    font-size: 12px;
    background-color: white;
    border-color: white;
    color: black;
}
.hp-btn-custom-filled-secondary-small:hover, .hp-btn-custom-filled-secondary-small:active, .hp-btn-custom-filled-secondary-small:focus{
    background-color: var(--hp-custom-secondary);
    border-color: white;
    color: white;
}

.hp-btn-custom-filled-tertiary{
    border-radius: 0px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    background-color: var(--hp-custom-tertiary);
    border-color: var(--hp-custom-tertiary);
    color: black;
}
.hp-btn-custom-filled-tertiary:hover, .hp-btn-custom-filled-tertiary:active, .hp-btn-custom-filled-tertiary:focus{
     font-weight: bold;
     font-size: 16px;
     background-color: var(--hp-custom-primary);
     border-color: var(--hp-custom-primary);
     color: white;
}



/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    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;
}

.testimonial-preview {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 6.5em;
}

.testimonial-card {
    border-radius: 1.25rem;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid #008859;
}


.testimonial-photo-section {
    height: 220px;
    flex-shrink: 0;
    position: relative;
    background: rgba(255, 255, 255, 0);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-photo-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    border-radius: 1.25rem 1.25rem 0 0;
    background-color: #008859;
    z-index: 1;
}

.testimonial-photo-bg--tr {
    background-image: radial-gradient(circle at 100% 0%, rgba(255, 199, 0, .35) 0%, rgba(255, 199, 0, 0) 30%);
}

.testimonial-photo-bg--bl {
    background-image: radial-gradient(circle at 0% 100%, rgba(255, 199, 0, .35) 0%, rgba(255, 199, 0, 0) 30%);
}

.testimonial-photo-bg--tl {
    background-image: radial-gradient(circle at 0% 0%, rgba(255, 199, 0, .35) 0%, rgba(255, 199, 0, 0) 30%);
}

.testimonial-photo-section img {
    position: relative;
    z-index: 2;
    height: 100%;
    width: auto;
    object-fit: cover;
}

.testimonial-text-panel {
    background: #fff;
    flex: 1 1 auto;
}

.testimonial-section-bg {
    background-image: radial-gradient(circle at 100% 100%, rgba(255, 199, 0, .15) 0, rgba(3, 167, 118, .06) 15%, rgba(3, 167, 118, .06) 45%, rgba(255, 199, 0, 0) 55%),
        radial-gradient(circle at 0% 100%, rgba(255, 199, 0, .15) 0, rgba(3, 167, 118, .06) 15%, rgba(3, 167, 118, .06) 45%, rgba(255, 199, 0, 0) 55%),
        linear-gradient(180deg, rgba(241, 243, 244, .3) 0, rgba(241, 243, 244, .5));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}

.it-section-bg {
    background-image: radial-gradient(circle at 100% 100%, rgba(255, 199, 0, .15) 0, rgba(3, 167, 118, .06) 10%, rgba(3, 167, 118, .06) 30%, rgba(255, 199, 0, 0) 45%),
        radial-gradient(circle at 0% 100%, rgba(255, 199, 0, .15) 0, rgba(3, 167, 118, .06) 10%, rgba(3, 167, 118, .06) 30%, rgba(255, 199, 0, 0) 45%),
        linear-gradient(180deg, rgba(241, 243, 244, .4) 0, rgba(241, 243, 244, .5));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}

.faq-section-bg {
    background-image: radial-gradient(circle at 100% 100%, rgba(255, 199, 0, .15) 0, rgba(3, 167, 118, .06) 20%, rgba(3, 167, 118, .06) 45%, rgba(255, 199, 0, 0) 65%),
        radial-gradient(circle at 0% 100%, rgba(255, 199, 0, .15) 0, rgba(3, 167, 118, .06) 20%, rgba(3, 167, 118, .06) 45%, rgba(255, 199, 0, 0) 65%),
        linear-gradient(180deg, rgba(241, 243, 244, .45) 0, rgba(241, 243, 244, .6));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}

.modal-backdrop.show {
    opacity: .7;
}

/* Layer-promotion hint so backdrop/dialog composite immediately on insertion
   instead of mid-transition (mainly matters on Safari, harmless elsewhere). */
.modal.fade,
.modal-dialog,
.modal-backdrop {
    -webkit-backface-visibility: hidden;
    will-change: opacity, transform;
}

/* Bootstrap's stock modal only fades the backdrop's opacity — the dialog itself
   never fades, it only slides (translate). That means the content pops in at
   full opacity on frame one and just slides into place while the backdrop dims
   behind it, which reads as a "blink" in every browser, not just Safari. Give
   the dialog its own opacity fade so it actually cross-fades in with the slide. */
.modal.fade .modal-dialog {
    opacity: 0;
    transition: transform .3s ease-out, opacity .3s ease-out;
}

.modal.show .modal-dialog {
    opacity: 1;
}

.testimonial-modal-content {
    border: 2px solid #fff;
    border-radius: 1.25rem;
    overflow: hidden;
}

.testimonial-modal-header {
    position: relative;
    height: 78px;
    background: radial-gradient(circle at 100% 100%, rgba(255, 199, 0, .35) 0%, rgba(255, 199, 0, 0) 30%), #008859;
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem;
}

.testimonial-modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.testimonial-modal-photo {
    position: absolute;
    left: 50%;
    bottom: -42px;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    border: 2px solid #008859;
}

.testimonial-modal-body {
    padding: 3.25rem 2rem 2.5rem;
    text-align: center;
}

.testimonial-modal-body h5 {
    font-size: 1.05rem;
}

.testimonial-modal-college {
    color: var(--hp-custom-primary);
    letter-spacing: 0.02em;
}

.testimonial-modal-text {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.85rem;
    line-height: 1.45;
}

.testimonial-modal-text p {
    margin-bottom: 0.55rem;
}

.testimonial-modal-text p:last-child {
    margin-bottom: 0;
}

.testi-modal-quote-mark {
    display: inline-block;
    width: 32px;
    height: 32px;
    color: rgba(0, 136, 89, 0.28);
}

.testimonial-modal-batch {
    color: #008859;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- Testimonials: 3-up slider ---- */
.testimonial-batch {
    color: #008859;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.testimonial-college {
    min-height: 2.4em;
}

.testimonial-readmore {
    background: none;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #008859;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
}

.testimonial-readmore:hover,
.testimonial-readmore:focus-visible {
    text-decoration: underline;
}

.testimonial-readmore-icon {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.testimonial-readmore:hover .testimonial-readmore-icon,
.testimonial-readmore:focus-visible .testimonial-readmore-icon {
    transform: translateX(3px);
}

.testimonial-slider {
    gap: 0.75rem;
}

.testimonial-slider-viewport {
    width: 100%;
    touch-action: pan-y;
}

.testimonial-slider-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    transition: transform 0.45s ease;
    width: 100%;
}

.testimonial-slide {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 768px) {
    .testimonial-slide {
        width: 33.3333%;
    }
}

.testimonial-mobile-nav {
    gap: 0.75rem;
}

.testimonial-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #008859;
    background: #fff;
    color: #008859;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 136, 89, 0.15);
}

.testimonial-arrow:hover,
.testimonial-arrow:focus-visible {
    background: #008859;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 136, 89, 0.3);
}

.testimonial-arrow:active {
    transform: scale(0.94);
}

.testimonial-dots {
    gap: 0.5rem;
}

.testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #008859;
    background: #fff;
    padding: 0;
    transition: background-color 0.2s ease, width 0.2s ease;
}

.testimonial-dot.is-active {
    background: #008859;
    width: 22px;
    border-radius: 6px;
}

@media (max-width: 767.98px) {
    .testimonial-arrow {
        width: 36px;
        height: 36px;
    }

    .testimonial-slider {
        gap: 0.4rem;
    }
}

/* ---- Testimonials: modal fit on mobile ---- */
.testimonial-modal-content {
    max-height: 92vh;
}

/* The green photo header stays fixed size and never scrolls. Only the quote
   paragraphs (.testimonial-modal-text) get their own bounded, swipe-scrollable
   box below the name/batch/college line, so scrolled text can never travel up
   into the photo area — name/batch/college sit between the two and are static,
   acting as a buffer instead of scrolling past the photo like before. */
@media (max-width: 991.98px) {
    /* 40px top/bottom margin keeps the backdrop tappable above and below the
       card so users can tap outside to close; the dialog's own height/min-height
       (normally Bootstrap's calc(100% - 1rem), sized for its default 0.5rem
       margin) and the card's max-height are updated to match the new margin. */
    .testimonial-modal-dialog {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .testimonial-modal-dialog.modal-dialog-scrollable {
        height: calc(100% - 80px);
    }

    .testimonial-modal-dialog.modal-dialog-centered {
        min-height: calc(100% - 80px);
    }

    .testimonial-modal-content {
        max-height: calc(100vh - 80px);
    }

    .testimonial-modal-header {
        flex-shrink: 0;
    }

    .modal-body.testimonial-modal-body {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .testimonial-modal-body h5,
    .testimonial-modal-batch,
    .testimonial-modal-college {
        flex-shrink: 0;
    }

    .testimonial-modal-text {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior: contain;
        font-size: 0.9em;
        line-height: 1.55;
        padding-right: 0.35rem;
        padding-bottom: 0.15rem;
    }

    .testimonial-modal-text p {
        margin-bottom: 0.65rem;
    }
}

/* Phone-width header/photo sizing (scoped by width, not device height, so a
   tall phone like an iPhone 14 doesn't fall back to the larger tablet sizing
   below just because it's tall) */
@media (max-width: 575.98px) {
    .testimonial-modal-header {
        height: 54px;
    }

    .testimonial-modal-photo {
        width: 80px;
        height: 80px;
        bottom: -28px;
    }

    .testimonial-modal-body {
        padding: 2.2rem 1.3rem 1.1rem;
    }
}

/* Compact phones (iPhone mini/SE-class and smaller Android): reclaim a little
   more vertical room from the header/photo so more of the small viewport goes
   to the readable text, which now scrolls comfortably inside its own box. */
@media (max-width: 575.98px) and (max-height: 700px) {
    .testimonial-modal-header {
        height: 44px;
    }

    .testimonial-modal-photo {
        width: 68px;
        height: 68px;
        bottom: -24px;
    }

    .testimonial-modal-body {
        padding: 2rem 1rem 1rem;
    }

    .testimonial-modal-text {
        font-size: 0.88rem;
    }
}

/* ---- Testimonials: desktop modal layout (photo left, content right) ---- */
@media (min-width: 992px) {
    .testimonial-modal-dialog {
        max-width: 920px;
    }

    .testimonial-modal-content {
        flex-direction: row;
        min-height: 440px;
    }

    .testimonial-modal-header {
        --plinth-height: 190px;
        --plinth-overlap: 46px;
        flex: 0 0 42%;
        height: auto;
        overflow: hidden;
        /* same light gradient used behind the Testimonials/FAQ sections, so the portrait sits
           on a light mount and the dark plinth below reads as a clear, deliberate step down.
           The corner glows are centered at the plinth's top edge (not the panel's bottom) so
           the yellow/green hues land in the visible area instead of hiding behind the plinth.
           The base used to fade between two alphas of the SAME gray, which composites to one
           flat color and does nothing — replaced with an actual light-to-deeper-gray fade so
           the panel visibly deepens toward the plinth instead of jumping straight into it. */
        background: radial-gradient(circle at 100% calc(100% - var(--plinth-height)), rgba(255, 199, 0, .22) 0, rgba(3, 167, 118, .38) 15%, rgba(3, 167, 118, .32) 45%, rgba(255, 199, 0, 0) 60%),
            radial-gradient(circle at 0% calc(100% - var(--plinth-height)), rgba(255, 199, 0, .22) 0, rgba(3, 167, 118, .38) 15%, rgba(3, 167, 118, .32) 45%, rgba(255, 199, 0, 0) 60%),
            linear-gradient(180deg, #d7e0d9 0%, #5f9270 100%);
    }

    /* flat plinth with softened corners only (not a full dome) the portrait stands behind.
       Height and the photo's lift (below) both read from the same custom properties so the
       two stay in proportion if either is retuned. The yellow glow is a wide, shallow ellipse
       hugging the whole top edge (not just one corner), fading out before it reads as "yellow". */
    .testimonial-modal-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--plinth-height);
        box-sizing: border-box;
        border-radius: 32px 32px 0 0;
        background: radial-gradient(ellipse 100% 40% at 50% 0%, rgba(255, 199, 0, .3) 0%, rgba(255, 199, 0, 0) 65%), #008859;
        z-index: 3;
        pointer-events: none;
    }

    /* desktop close button lives at the top-right corner of the whole modal (over the white
       text panel), as a sibling of the header/body — not nested in the photo panel — so it
       stays put regardless of the panel's own layout. Kept plain/simple: no disc, no shadow. */
    .testimonial-modal-close-desktop {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 20;
        opacity: 0.65;
    }

    .testimonial-modal-close-desktop:hover,
    .testimonial-modal-close-desktop:focus-visible {
        opacity: 1;
    }

    .testimonial-modal-photo {
        left: 50%;
        bottom: calc(var(--plinth-height) - var(--plinth-overlap));
        transform: translateX(-50%);
        width: auto;
        height: 68%;
        max-height: 380px;
        max-width: 100%;
        border-radius: 0;
        border: none;
        background: transparent;
        object-fit: cover;
        object-position: center bottom;
        z-index: 2;
    }

    .testimonial-modal-body {
        flex: 1 1 58%;
        min-width: 0;
        text-align: left;
        padding: 3rem 3rem 2.5rem;
    }

    .testimonial-modal-body h5 {
        font-size: 1.2rem;
    }

    .testimonial-modal-college {
        font-size: 0.92rem;
    }

    .testimonial-modal-text {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        font-size: 0.9em;
        line-height: 1.6;
    }

    /* PROTOTYPE: name/batch/college set into the plinth instead of the text panel */
    .testimonial-modal-plinth-info {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--plinth-height);
        z-index: 5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 1.5rem;
        text-align: center;
        color: #fff;
    }

    .testimonial-modal-plinth-info h5,
    .testimonial-modal-plinth-batch,
    .testimonial-modal-plinth-college {
        width: 100%;
    }

    .testimonial-modal-plinth-info h5 {
        color: #fff;
        font-size: 1.22rem;
        margin-bottom: 0.25rem;
    }

    .testimonial-modal-plinth-batch {
        color: #fff;
        font-weight: 700;
        font-size: 0.84rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 0.2rem;
    }

    .testimonial-modal-plinth-college {
        color: rgba(255, 255, 255, 0.88);
        font-size: 0.91rem;
        margin-bottom: 0;
    }
}


/* ---- Timelines: connected stepper ---- */
.timeline-section-bg {
    background-image: radial-gradient(circle at 100% 100%, rgba(255, 199, 0, .15) 0, rgba(3, 167, 118, .06) 10%, rgba(3, 167, 118, .06) 55%, rgba(255, 199, 0, 0) 65%),
        radial-gradient(circle at 0% 100%, rgba(255, 199, 0, .15) 0, rgba(3, 167, 118, .06) 10%, rgba(3, 167, 118, .06) 55%, rgba(255, 199, 0, 0) 65%),
        linear-gradient(180deg, rgba(241, 243, 244, .55) 0, rgba(241, 243, 244, .5));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}

.timeline-track {
    align-items: flex-start;
}

/* Desktop stretch every card to the row's tallest one so heights stay
   equal and icons align, no matter how the description text wraps at a given
   width. Below lg, cards stack one per row (six-across was too cramped on
   tablets at 768-991px), so each just sizes to its own content instead */
@media (min-width: 992px) {
    .timeline-track {
        align-items: stretch;
    }

    .timeline-step .timeline-step-inner {
        height: 100%;
    }

    .timeline-step .card {
        height: 100%;
    }
}

/* Extra breathing room between stacked cards (phone through tablet) */
@media (max-width: 991.98px) {
    .timeline-step {
        margin-bottom: 2rem;
    }

    .timeline-step:last-child {
        margin-bottom: 0;
    }
}

.timeline-step {
    position: relative;
}

.timeline-step .card {
    border-radius: 1em;
    transition: box-shadow .25s ease;
}

.timeline-step .card:hover,
.timeline-step .card.is-revealed {
    box-shadow: 0 10px 22px rgba(0,0,0,0.16) !important;
}

.timeline-step .card-body {
    display: flex;
    flex-direction: column;
}

.timeline-title {
    min-height: 2.6rem;
    font-size: 1rem;
    flex-shrink: 0;
}

.tl-date {
    font-size: 0.9rem;
}

.tl-desc {
    font-size: 0.85rem;
}

.timeline-tap-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    color: var(--step-color, #008859);
}

.timeline-tap-hint span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Phone through tablet (cards stacked, full-width): bump up the type a
   notch for readability, and show a tap hint since there's no hover
   affordance on touch devices */
@media (max-width: 991.98px) {
    .timeline-title {
        font-size: 1.15rem;
        min-height: 3rem;
    }

    .tl-date {
        font-size: 1rem;
    }

    .tl-desc {
        font-size: 1rem;
    }

    .timeline-tap-hint {
        display: flex;
    }
}

/* The 6-across row (lg and up) gets tight on the smaller end — trim the
   description a touch so it doesn't force extra-tall cards at these widths */
@media (min-width: 992px) and (max-width: 1365.98px) {
    .tl-desc {
        font-size: 0.8rem;
    }
}

/* Front (icon+date) and back (description) sit in the same grid cell so the
   card never resizes when swapping — both stay laid out, only their
   opacity/position changes. flex:1 lets it fill whatever room the stretched
   card gives it (desktop/tablet); align-content centers the pair within
   that space so the icon lands in the same spot regardless of leftover room */
.timeline-reveal {
    position: relative;
    display: grid;
    align-content: center;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 96px;
}

.timeline-face {
    grid-area: 1 / 1 / 2 / 2;
    align-self: center;
    transition: opacity .3s ease, transform .3s ease;
}

.timeline-face-front {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-face-back {
    opacity: 0;
    transform: translateY(14px);
    transition-delay: .05s;
    pointer-events: none;
}

.timeline-step .card:hover .timeline-face-front,
.timeline-step .card.is-revealed .timeline-face-front {
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
}

.timeline-step .card:hover .timeline-face-back,
.timeline-step .card.is-revealed .timeline-face-back {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .08s;
    pointer-events: auto;
}

.timeline-node {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: 'Open Sans', sans-serif;
    background: var(--step-color, #008859);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
    transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s ease;
}

/* Badge confirms the step once its card is open: scales up, gains a ring,
   and swaps the number for a checkmark so it reads as "done being viewed"
   rather than sitting inert while the card underneath changes */
.timeline-step .card:hover ~ .timeline-node,
.timeline-step .card.is-revealed ~ .timeline-node {
    transform: translateX(-50%) scale(1.15);
    box-shadow: 0 3px 10px rgba(0,0,0,0.3), 0 0 0 4px #fff, 0 0 0 6px var(--step-color, #008859);
}

.tl-node-num,
.tl-node-chevron {
    grid-area: 1 / 1;
    display: flex;
    transition: opacity .25s ease, transform .3s ease;
}

/* Chevron already points up (the "expanded" orientation) and simply fades
   and scales in as the number fades out — no rotation, so the swap reads
   as a clean crossfade rather than a spinning transform */
.tl-node-chevron {
    opacity: 0;
    transform: scale(0.5);
}

.timeline-step .card:hover ~ .timeline-node .tl-node-num,
.timeline-step .card.is-revealed ~ .timeline-node .tl-node-num {
    opacity: 0;
    transform: scale(0.4) rotate(25deg);
}

.timeline-step .card:hover ~ .timeline-node .tl-node-chevron,
.timeline-step .card.is-revealed ~ .timeline-node .tl-node-chevron {
    opacity: 1;
    transform: scale(1.1);
    transition-delay: .08s;
}

@media (prefers-reduced-motion: reduce) {
    .timeline-node,
    .tl-node-num,
    .tl-node-chevron {
        transition: none;
    }
}


/* ---- Scroll reveal: content fades/slides in as it enters the viewport ---- */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1), transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

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

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}