/* Modern Medical Institute Design System */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');

:root {
  /* Brand Colors */
  --gmhi-pink: #e01b75;
  --gmhi-pink-light: rgba(224, 27, 117, 0.05);
  --gmhi-dark: #465d6d;
  --gmhi-gray: #f8fafc;
  --gmhi-white: #ffffff;
  
  /* Semantic Colors */
  --text-primary: var(--gmhi-dark);
  --text-muted: #718096;
  --surface-light: var(--gmhi-pink-light);
  --surface-white: var(--gmhi-white);
  
  /* Elevations */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.02);
  --shadow-md: 0 20px 40px rgba(0,0,0,0.04);
  --shadow-lg: 0 30px 60px rgba(0,0,0,0.06);
}

body {
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--surface-light);
  -webkit-font-smoothing: antialiased;
  padding-top: 90px;
}

/* Section Containers */
section {
  padding: 5rem 0;
  position: relative;
}

section {
  background: var(--surface-light);
}

section.white-section {
  background: var(--surface-white);
}

.section-container {
  background: var(--surface-white);
  border-radius: 24px;
  padding: 3rem;
  box-shadow: var(--shadow-md);
  margin: 2rem auto;
  max-width: 900px;
  border: 1px solid rgba(224, 27, 117, 0.1);
}

/* Navigation */
.navbar {
  background: var(--surface-white) !important;
  padding: 1.25rem 0;
  box-shadow: var(--shadow-md);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.navbar-brand {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* brand positioning left-shifts were reverted per user request */

.brand-logo {
  height: 60px;
  width: auto;
  transition: transform 0.2s;
}

.brand-logo:hover {
  transform: scale(1.05);
}

.hero {
  background: linear-gradient(135deg, var(--gmhi-light) 0%, #fff 100%);
  min-height: 80vh;
  padding: 6rem 0;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-inner { background: linear-gradient(90deg, rgba(224,27,117,0.03), rgba(70,93,109,0.01)); padding:2rem; border-radius:12px; }
.hero h1 { color: var(--gmhi-dark); }
.btn-primary { background-color: var(--gmhi-pink); border-color: var(--gmhi-pink); color: var(--gmhi-white); box-shadow: 0 8px 24px rgba(224,27,117,0.12); }
.btn-primary:hover { background-color: var(--gmhi-pink-600); border-color: var(--gmhi-pink-600); }

/* Outline secondary should match the gray palette */
.btn-outline-secondary {
  color: var(--gmhi-dark);
  border-color: transparent;
  background: rgba(70,93,109,0.04);
}
.btn-outline-secondary:hover {
  background: rgba(0,0,0,0.03);
  border-color: var(--gmhi-pink);
  color: var(--gmhi-dark);
}

/* Cards */
.card {
  background: var(--surface-white);
  border: none;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.card.glass {
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(10px);
}

.card.floating {
  margin-top: -160px;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(10px);
}
.card-title { font-weight: 600; color: var(--gmhi-dark); }
ul { line-height: 1.6; }
footer { border-top: 1px solid var(--gmhi-border); background: linear-gradient(180deg, var(--gmhi-gray), #f8f9fb); }

.team-photo { width:100%; height:320px; object-fit:cover; object-position:center; border-radius:12px; }

/* Use for photos that must show the whole image without cropping */
.team-photo--contain {
  object-fit: contain;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(255,255,255,0.02));
}

@media (max-width: 767px) {
  .hero { padding: 2rem 1rem; }
  .brand-logo { height: 36px; }
}

/* Utility for subtle cards used site-wide */
.muted { color: var(--gmhi-muted); }

/* Links */
a { color: var(--gmhi-pink); }
a:hover { color: var(--gmhi-pink-600); text-decoration: underline; }

/* Modern UI updates */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

html, body { height: 100%; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

.container { max-width: 1100px; }

/* Header */
.navbar { padding: .75rem 1rem; box-shadow: 0 6px 18px rgba(47,72,82,0.06); }
/* Keep navbar labels on a single line to avoid stacking/wrapping */
.navbar-nav .nav-link { color: var(--gmhi-dark); white-space: nowrap; }
.nav-link:hover { color: var(--gmhi-pink); }

/* Make the brand block (logo + text) sit flush at the left edge on large screens.
   We position the brand absolutely and then add left padding to the navbar container
   (set by JS) so the rest of the nav content doesn't overlap. This allows automatic
   detection of brand width and keeps the rest of the layout intact. */
@media (min-width: 992px) {
  /* Move the whole navbar (brand + links) to the right on large screens.
     The container becomes a flex row aligned to the end so the brand and
     navigation sit at the right edge. This removes the need for JS-based
     padding adjustments used previously to force a left-flush brand. */
  .navbar { position: relative; }
  /* support both .container and .container-fluid inside the navbar
     and make the inner area right-aligned while the brand stays at the left. */
  .navbar > .container,
  .navbar > .container-fluid {
    display: flex;
    justify-content: flex-end; /* place everything to the right */
    align-items: center;
    gap: 1.5rem;
    /* push the inner wrapper to the right edge */
    margin-left: auto;
    margin-right: 0 !important;
    /* remove the default bootstrap horizontal padding so the white bar
       begins exactly at the viewport edge */
    padding-left: 0 !important;
    padding-right: 2rem;
  }

  /* Make the white header area larger on desktop */
  .navbar {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  /* Larger logo on desktop to match increased header size */
  .brand-logo {
    height: 80px;
  }
  /* Keep the brand inline and static within the flow */
  /* Position the brand absolutely at the left edge so logo+title stay left
     while the navigation (inside the right-aligned container) remains on the right. */
  .navbar-brand {
    position: absolute;
    /* pin brand to the very left of the viewport; allow safe-area inset on
       devices with notches */
    left: env(safe-area-inset-left, 0);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: .75rem;
  }
  /* Ensure the toggle and collapse keep sensible ordering */
  .navbar-toggler { order: 2; }
  .navbar-collapse { order: 3; }
}

/* Hero */
.hero { border-radius: 12px; }
.hero .lead { font-size: 1.05rem; color: var(--gmhi-muted); }

/* Hero Gallery */
.hero-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.hero-gallery-grid img {
  flex: 1 1 300px;
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.2s ease;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.hero-gallery-grid img:hover {
  transform: translateY(-3px);
}

@media (max-width: 991px) {
  .hero-gallery-grid {
    gap: 0.75rem;
  }
  .hero-gallery-grid img {
    height: 240px;
    flex: 1 1 250px;
  }
}

@media (max-width: 575px) {
  .hero-gallery-grid {
    gap: 0.5rem;
  }
  .hero-gallery-grid img {
    height: 200px;
    flex: 1 1 100%;
  }
}

/* Cards */
.card { border-radius: 12px; box-shadow: 0 8px 30px rgba(47,72,82,0.06); }

/* Modern form styles */
.form-control { border-radius: 10px; border: 1px solid rgba(70,93,109,0.06); box-shadow: none; padding: .8rem; }
.form-control:focus { border-color: var(--gmhi-pink); box-shadow: 0 12px 30px rgba(224,27,117,0.08); }
.form-select { border-radius: 8px; }
.form-check-input { width: 1.25rem; height: 1.25rem; }

/* Primary CTA */
.btn-primary { border-radius: 12px; padding: .7rem 1.1rem; font-weight:700; }

/* Footer */
footer .container { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
footer a { color: var(--gmhi-dark); }

/* Small utility for page background sections */
.page-surface { background: var(--gmhi-gray); padding: 2rem 0; }

/* Typography tweaks */
h1 { font-size: 2.1rem; letter-spacing: -0.5px; }
h2 { font-size: 1.45rem; }

/* Small utility */
.hero-cta { display:flex; gap: .75rem; align-items:center; }


/* Small screens adjustments */
@media (max-width: 767px) {
  footer .container { flex-direction:column; align-items:center; text-align:center; }
}

/* Hero gallery (modern larger grid) */
.hero-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  align-items: end;
  perspective: 1200px;
}
.hero-thumb-large {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(47,72,82,0.12);
  border: 4px solid rgba(255,255,255,0.95);
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease;
  transform-origin: center bottom;
}
.hero-thumb-large:hover {
  transform: translateY(-6px) scale(1.03) rotate(-0.5deg);
  box-shadow: 0 30px 60px rgba(47,72,82,0.16);
}
.hero-gallery-grid img:nth-child(1) { transform: rotate(-2.5deg); }
.hero-gallery-grid img:nth-child(2) { transform: translateY(12px) rotate(1.5deg); }
.hero-gallery-grid img:nth-child(3) { transform: rotate(-1deg); }

@media (max-width: 991px) {
  .hero-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-thumb-large { height: 180px; }
}

@media (max-width: 575px) {
  .hero-gallery-grid { grid-template-columns: 1fr; }
  .hero-thumb-large { height: 240px; border-radius: 12px; }
}


/* Mobile readability & touch optimizations */
@media (max-width: 768px) {
  /* Increase touch target sizes */
  .btn { min-height: 48px; padding: 0.75rem 1.25rem; font-size: 1rem; }
  .dropdown-menu .dropdown-item { padding: 0.75rem 1rem; font-size: 1rem; }

  /* Typography adjustments */
  body { font-size: 1rem; line-height: 1.65; padding-top: 70px; }
  h1 { font-size: 1.85rem; line-height: 1.25; }
  h2 { font-size: 1.5rem; line-height: 1.3; }
  h3 { font-size: 1.25rem; line-height: 1.4; }
  p, li { font-size: 1rem; }

  /* Respect safe-area on modern phones */
  .container, .section-container, nav.navbar, footer { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  .navbar { padding-top: max(0.5rem, env(safe-area-inset-top)); }

  /* Layout spacing */
  section { padding: 3rem 0; }
  .section-container { padding: 2rem 1.25rem; border-radius: 16px; }
  .card { margin-bottom: 1.5rem; }

  /* Hero CTA stack */
  .hero-cta { flex-direction: column; gap: 1rem; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  /* Footer stacking */
  footer .container { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }

  /* Form controls */
  .form-control, .form-select { min-height: 48px; font-size: 1rem; padding: 0.75rem; }
  textarea.form-control { min-height: 120px; }

  /* Prevent text overflow on narrow screens */
  h1, h2, h3, p, .nav-link, .btn { word-wrap: break-word; hyphens: auto; }
  .nav-link { padding: 0.75rem 0.5rem; }

  /* Modal images should fit viewport */
  .modal-dialog { margin: 0.5rem; }
  .modal-content img { max-height: 80vh; width: 100%; object-fit: contain; }
}

/* Very small phones */
@media (max-width: 576px) {
  body { padding-top: 65px; }
  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.35rem; }
  .section-container { padding: 1.5rem 1rem; }
  .container { padding-left: 1rem; padding-right: 1rem; }
  section { padding: 2rem 0; }

  /* Hero/gallery tighter on very small phones */
  .hero-thumb-large { height: 200px; }
  .hero-gallery-grid { gap: 0.6rem; }
  .btn { width: 100%; }
}

/* Disable hover transforms on touch devices */
@media (hover: none) and (pointer: coarse) {
  .btn:hover, .card:hover, .hero-thumb-large:hover { transform: none; }
  a, button, .btn { -webkit-tap-highlight-color: rgba(224, 27, 117, 0.1); }
}

/* --- Optional: Keep desktop-like layout on mobile ---
   Add `desktop-view` class to `<body>` to enforce same view */
.desktop-view .hero-cta { flex-direction: row !important; gap: 0.75rem !important; }
.desktop-view .hero-cta .btn { width: auto !important; }
.desktop-view footer .container { flex-direction: row !important; text-align: left !important; gap: 2rem !important; }
.desktop-view .hero-gallery-grid { grid-template-columns: repeat(3, 1fr) !important; }
.desktop-view .hero-thumb-large { height: 220px !important; }
.desktop-view section { padding: 5rem 0 !important; }
.desktop-view .section-container { padding: 2.5rem !important; }