/* -------------------------
   Body & Background
------------------------- */
body {
  background: #FCFCFD;
}

/* -------------------------
   Main Headings & Text
------------------------- */
.andrew_phi {
  font-size: 88px;
  font-family: "Monument Grotesk";
  font-style: normal;
  font-weight: 300;
  color: rgba(0, 0, 0, 1);
  margin-bottom: 50px;
  line-height: 1.1;
  word-spacing: 0.05em;
  white-space: normal;
}

.orthopaedi {
  font-size: 20px;
  font-family: "Monument Grotesk";
  font-weight: 700;
  color: rgba(37, 39, 43, 1);
  margin-bottom: 1px;
}

.mbbs_hons {
  font-size: 18px;
  font-family: "Monument Grotesk";
  font-weight: 400;
  color: rgba(109, 113, 120, 1);
  margin-bottom: 35px;
}

.andrew_is_ {
  font-size: 18px;
  font-family: "Monument Grotesk";
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  width: 100%;
  max-width: 506px;
}

/* -------------------------
   Navigation & Menu
------------------------- */
.andrew_phi_menu {
  font-size: 13px;
  font-family: "Monument Grotesk";
  font-weight: 400;
  color: rgba(37, 39, 43, 1);
}

.about {
  font-size: 13px;
  font-family: "Monument Grotesk";
  font-weight: 400;
  color: rgba(37, 39, 43, 1);
}

.navbar {
  margin-bottom: 8rem; /* bigger spacing on desktop */
  background: #FCFCFD;
}

/* -------------------------
   Accreditation Section
------------------------- */
.industry_a {
  font-size: 20px;
  font-family: "Monument Grotesk";
  font-weight: 500;
  color: rgba(37, 39, 43, 1);
}

.accreditations img {
  max-width: 100%;
  height: auto;
}

/* -------------------------
   Image Alignment
------------------------- */
.right-aligned-img {
  display: inline-block;
}

/* -------------------------
   Fonts
------------------------- */
@font-face {
  font-family: 'Monument Grotesk';
  src: url('/fonts/MonumentGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Monument Grotesk';
  src: url('/fonts/MonumentGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Monument Grotesk';
  src: url('/fonts/MonumentGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Monument Grotesk';
  src: url('/fonts/MonumentGrotesk-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* -------------------------
   Responsive Adjustments
------------------------- */

/* Tablet */
@media screen and (max-width: 1024px) {
  .andrew_phi {
    font-size: 64px;
    margin-bottom: 40px;
  }

  .orthopaedi {
    font-size: 18px;
  }

  .mbbs_hons {
    font-size: 16px;
    margin-bottom: 25px;
  }
  
    .navbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem; /* adjust the value as you like */
    
  }

  .navbar-menu {
    display: flex !important;
    box-shadow: none;
    padding: 0;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    position: static !important;
    width: auto !important;
    background: #FCFCFD;
  } 
    
  .navbar .navbar-end .navbar-item {
    text-align: right;
    display: inline-block;
    padding: 0.5rem 0.75rem;
  }

  .right-aligned-img {
    text-align: center;
    display: block;
    margin: 0 auto;
  }
  
}

/* Mobile */
@media screen and (max-width: 768px) {
  .andrew_phi {
    font-size: 60px;
    margin-bottom: 20px;
    line-height: 1.05;
    word-spacing: 0;
    white-space: normal;
    text-align: left;
  }

  .orthopaedi {
    font-size: 18px;
    margin-bottom: 2px;
    text-align: left;
  }

  .mbbs_hons {
    font-size: 14px;
    text-align: left;
  }

  .andrew_is_ {
    font-size: 16px;
    text-align: left;
    max-width: 90%;
    margin: 0 auto;
  }

  .navbar-burger {
    display: none !important;
  }

  .navbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem; /* adjust the value as you like */
    
  }

  .navbar-menu {
    display: flex !important;
    box-shadow: none;
    padding: 0;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    position: static !important;
    width: auto !important;
    background: #FCFCFD;
  } 
  
  .navbar .navbar-end .navbar-item {
    text-align: right;
    display: inline-block;
    padding: 0.5rem 0.75rem;
  }

  .right-aligned-img {
    text-align: center;
    display: block;
    margin: 0 auto;
  }
}

/* Small Mobile */
@media screen and (max-width: 480px) {
  .andrew_phi {
    font-size: 55px;
  }

  .orthopaedi {
    font-size: 16px;
  }

  .mbbs_hons {
    font-size: 12px;
  }

  .andrew_is_ {
    font-size: 14px;
  }
}


.right-aligned-img {
  display: inline-block;
}



.boxes-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* spacing between boxes */
  align-items: stretch; /* makes all boxes the same height */
}

/* Default box style */
.custom-box {
  flex: 1 1 300px; /* flexible width but minimum 300px */
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border: 1px solid #E0E3E8;
  padding: 24px;
  box-sizing: border-box;

  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: none;
}

.box-title {
  min-height: 2.5em;  /* still reserves space for up to 2 lines */
  margin: 0 0 12px 0;
  display: flex;
  align-items: flex-start; /* push titles to the top instead of bottom */
  color: var(--Neutrals-black-100);
  font-family: var(--font-family-monument);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
}

.box-text {
  margin: 0;
}

/* Responsive: stack on smaller screens */
@media screen and (max-width: 768px) {
  .boxes-container {
    flex-direction: column;
  }
  .custom-box {
    flex: 1 1 100%;
  }
}



.accreditation-logo {
  max-height: 60px;   /* adjust as needed */
  max-width: 120px;   /* keeps logos from getting too wide */
  width: auto;        /* preserve aspect ratio */
  height: auto;       /* preserve aspect ratio */
  object-fit: contain; /* ensures the whole logo fits */
  display: block;
}