body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  font-family: 'Alegreya Sans';font-size: 22px;
  color: #5a5a5a;
}

.hr-divider {
  margin-bottom: 50px; /* Space out the Bootstrap <hr> more */
  margin-top: 50px;
}

.section-heading {
  /*font-weight: 300;*/
  /*line-height: 1;*/
  /*letter-spacing: -.05rem;*/
}

.navbar-header {
    float: left;
    padding: 15px;
    text-align: center;
    width: 100%;
}
.navbar-brand {float:none;}

.b-image
{
/*background-image: url("https://static.toiimg.com/thumb/msid-54559212,width-1070,height-580,resizemode-75,imgsize-54559212,pt-32,y_pad-40/54559212.jpg");*/
/*background: rgba(225, 0, 0, .5);*/
}

.bg {
  /* The image used */
  background-image: url("images/mit-fall.jpg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

@media (min-width: 40em) {
  /* Bump up size of carousel content */

  .section-heading {
    /*font-size: 50px;*/
  }
}

@media (min-width: 62em) {
  .section-heading {
    /*margin-top: 7rem;*/
  }
}

/*album*/
.jumbotron {
  padding-top: 3rem;
  padding-bottom: 3rem;
  margin-bottom: 0;
  background-color: #fff;
}
@media (min-width: 768px) {
  .jumbotron {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

/*.jumbotron h1 {*/
/*  font-weight: 300;*/
/*}*/

.jumbotron .container {
  max-width: 40rem;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}


/*about*/
.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

/*mentorship*/

.vertical-menu {
      width: 200px;
      height: 300px;
      overflow-y: auto;
    }

    .vertical-menu a {
      background-color: white;
      color: black;
      display: block;
      padding: 12px;
      text-decoration: none;
    }

    .vertical-menu a:hover {
      background-color: #ccc;
      
    }

    .vertical-menu a.active {
      background-color: #4CAF50;
      color: white;
    }


/*index*/
.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

.truncate-container {
    position: relative;
    max-height: 100px; /* Adjust as needed */
    overflow: hidden;
}

.truncate-text {
    margin: 0;
    padding: 0;
}

.truncate-expanded {
    max-height: none !important;
}

:root {
  --brand: #A31F34;      /* MIT “red” accent */
  --brand-ink: #111827;  /* dark text */
  --brand-subtle: #faf6f7;
}
.brand-accent { color: var(--brand); }

.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-brand:hover { filter: brightness(0.95); color: #fff; }

.btn-outline-brand {
  border-color: var(--brand);
  color: var(--brand);
}
.btn-outline-brand:hover {
  background: var(--brand);
  color: #fff;
}

.link-brand { color: var(--brand); text-decoration: none; }
.link-brand:hover { text-decoration: underline; }

.bg-subtle { background: var(--brand-subtle); }
/* On lg+ screens, shrink width slightly but keep it left-aligned */
@media (min-width: 992px) {
  .hero-img {
    width: 92%;      /* try 96%..88% to taste */
    height: 340px;   /* keep or tweak as above */
    object-fit: cover;
    margin-left: 0;  /* ensure the left edge doesn’t move */
    display: block;
  }
}

@media (min-width: 1200px) {
  .hero-img { height: 360px; }  /* bump a bit on xl if you like */
}

:root { --hero-nudge: 56px; }   /* adjust this until the image’s left edge sits under the “t” in Contact */

@media (min-width: 992px) {
  .hero-img {
    display: block;             /* already in your file, safe to keep */
    margin-left: var(--hero-nudge) !important;
  }
}

/* Make the top white bar (navbar) shorter */
.navbar {
  /* If you're on Bootstrap 5, this shrinks the vertical padding */
  --bs-navbar-padding-y: .10rem;   /* was .5rem */
  padding-top: .01rem;             /* fallback */
  padding-bottom: .80rem;          /* fallback */
}

/* Tighten brand + links */
.navbar .navbar-brand,
.navbar .nav-link {
  padding-top: .25rem;
  padding-bottom: .25rem;
  line-height: 1.25;
}

/* Remove legacy Bootstrap 3 header padding that inflates height */
.navbar-header {
  padding: 0;
  width: auto;
  float: none;
}

/* Keep the hamburger clickable but compact on mobile */
.navbar .navbar-toggler {
  padding: .25rem .5rem;
}



/* Wordmark/Logo treatment */
.navbar .navbar-brand { white-space: nowrap; display: flex; align-items: center; }
.brand-wordmark { font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: 1.15rem; }
.logo { height: 28px; width: auto; } /* if you use an image logo */

/* Subtle divider + tidy spacing */
.navbar .border-end { border-color: #e5e7eb !important; }
.navbar .nav-link { font-weight: 500; }

/* Make the white bar shorter without shrinking text */
.navbar { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.navbar .navbar-brand, .navbar .nav-link { padding-top: .25rem !important; padding-bottom: .25rem !important; }

/* (if the hamburger looks big) */
.navbar .navbar-toggler { padding: .2rem .5rem !important; }

/* brand color used earlier */
.brand-accent { color: var(--brand); }
/* Make the logo fill the bar height (not bold text elements) */
.logo-svg { height: 40px; width: auto; display: block; }  /* try 44px if you want taller */

/* Slimmer bar without shrinking fonts */
.navbar { padding-top: .28rem; padding-bottom: .28rem; }
.navbar .navbar-brand, .navbar .nav-link { padding-top: .28rem; padding-bottom: .28rem; }

/* Subtle divider between logo and menu */
.navbar .border-end { border-color: #e5e7eb !important; }

/* restore BS3 defaults so right-float works */
.navbar-header { float: left; width: auto; padding: 0; }

/* if you previously used a centering hack, disable it */
.navbar-nav.navbar-center { position: static; left: auto; transform: none; }

/* just in case other rules fight it */
.navbar-nav.navbar-right { float: right !important; }


/* === ALIGN NAV WITH PHOTO RIGHT EDGE =============================== */
/* On wide screens, add the same half-gutter inset the grid uses so
   the last menu item ("Contact") lines up with the photo edge. */
@media (min-width: 992px) {
  /* Reserve the right 50% (image column) + half gutter */
  .nav-align-photo { padding-right: calc(50% + var(--bs-gutter-x) / 2); }
}
/* keep the text itself flush to that line */
.navbar-nav .nav-item:last-child .nav-link { padding-right: 0 !important; }

/* Remove extra right padding on the final link so the text itself aligns */
.navbar-nav .nav-item:last-child .nav-link {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* === BRAND: NOT BOLD + A BIT LARGER ================================ */
.navbar .navbar-brand,
.navbar .brand-wordmark {
  font-weight: 400 !important;   /* turn off bold */
}

/* Base size bump */
.navbar .brand-wordmark { font-size: 1.5rem; } /* was 1.35rem */

/* Scale up a touch on larger breakpoints */
@media (min-width: 768px) {
  .navbar .brand-wordmark { font-size: 1.75rem; } /* was 1.5rem */
}
@media (min-width: 1200px) {
  .navbar .brand-wordmark { font-size: 2rem; } /* was 1.625rem */
}

/* Keep MIT in MIT red (you already define --brand) */
.brand-accent { color: var(--brand); }