@media (min-width: 992px) {
        .container {
            max-width: 900px !important;
        }
    }

h2:not(.tagline):not(.display-8) {
        color: #083863;
    }

    body {
       font-family: 'Lato', sans-serif;
       position: relative;
    }
        
    img {
        max-width: 100%;
        height: auto;
    }

    .navbar {
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: #083863 !important;
    }
    
    .dropdown-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.6s ease-in-out;
    }

    .open .dropdown-content {
        max-height: 1000px;
    }
    
    .button-style {
        display: inline-flex;       /* flex container */
        align-items: center;        /* vertical centering */
        justify-content: flex-start;/* all items hug left, gap works */
        gap: 10px;                   /* ← control icon↔text spacing here */
        background-color: #083863;
        color: #fff;
        padding: 10px;
        width: 100%;
    }

    /* push the arrow SVG to the far right */
.button-style {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  background-color: #083863;
  color: #fff;
  padding: 10px;
  width: auto;              /* was 100% */
}

    /* remove the old auto-margin on your H4 */
    .button-style h4 {
        margin: 0;
    }
    
.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.title-container {
    width: 100%;
    display: flex;                    /* ensure flex works */
    justify-content: flex-start !important;
}

.title-container .title-spacing {
    width: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

.title-spacing {
    margin: 0;
    justify-content: flex-start !important;
}

.logo-bullet {
  margin-right: 0.75rem;  /* Increased from 0.5rem for more space between logo and title */
}

.text-content {
  line-height: 1.8;  /* Increased from 1.6 for more line spacing */
}

.text-content p {
  margin-bottom: 1.5rem;  /* Increased from 1rem for more space between paragraphs */
}

/* New style for the specific paragraphs */
.text-content p.no-extra-spacing {
  margin-bottom: 0;  /* Remove bottom margin */
  line-height: 1.8;  /* Reduce line height for these specific paragraphs */
}

/* Add a small space after the last paragraph to separate from next content */
.text-content p.no-extra-spacing:last-child {
  margin-bottom: 1rem;
}

/* Additional styles for better text readability */
p, li {
  font-size: 16px;
  letter-spacing: 0.3px;
}

/* Updated CSS - Responsive Improvements */
@media only screen and (max-width: 768px) {
    .navbar-brand-text {
        display: none; /* Hide text in mobile view */
    }
    .navbar-logo {
        display: block; /* Show logo */
    }
    .jumbotron {
        height: auto; /* Automatically adjust to content */
        padding: 20px;
    }
    .jumbotron-content h1 {
        font-size: 30px;
    }
    .jumbotron-content h2 {
        font-size: 18px;
    }
    .text-content p {
        margin-bottom: 1.2rem;
        line-height: 1.6; /* Slightly reduced for mobile */
    }
    p, li {
        font-size: 14px;
    }
    .button-style {
        width: 100%; /* Full-width button */
        padding: 10px; /* Reduced padding for buttons */
    }
    .small-icon, .img-fluid {
        max-width: 40px; /* Reduce icon size */
        height: auto;
    }
    .content-wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }
}


.healthcare-experience .row .col-md-2 .img-fluid,
/* Target the specific icons in the Selected Works section */
.selected-works .row .col-md-2 .img-fluid {
    max-width: 50px; /* Set a fixed width */
    height: auto;
}

/* For mobile devices, adjust if needed */
@media only screen and (max-width: 768px) {
    .healthcare-experience .row .col-md-2 .img-fluid,
    .selected-works .row .col-md-2 .img-fluid {
        max-width: 40px; /* Slightly smaller for mobile */
    }
}

/* Ensure the icon containers have some minimum width */
.healthcare-experience .row .col-md-2,
.selected-works .row .col-md-2 {
    min-width: 60px; /* Adjust as needed */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Override any max-width settings from Bootstrap's img-fluid class */
.healthcare-experience .row .col-md-2 .img-fluid,
.selected-works .row .col-md-2 .img-fluid {
    max-width: none !important;
    width: 50px !important; /* Use !important to override other styles */
}

    .rotate-45 {
        transform: rotate(45deg);
    }
    
    .social-icons {
        margin-top: 10px;
        /*text-align: center;*/
    }
    
    .social-icons a {
        margin: 0 10px;
        color: inherit;
        text-decoration: none;
        font-size: 20px;
        transition: color 0.3s;
    }

    .social-icons a:hover {
        color: #0077b5; /* Color for LinkedIn, you can customize for other icons if needed */
    }
    
    .jumbotron {
        /* no background image anymore; we use <img> */
        background-color: #083863;   /* shows behind, if any side letterboxing */
        text-align: center;
        color: #fff;
        padding: 0;                  /* no extra blue bars above/below the image */
        margin: 0;          /* remove any outer spacing */
    }

    .jumbotron .container {
        padding-left: 0;
        padding-right: 0;   /* remove Bootstrap’s 15px gutter */
    }

    
    
    .jumbotron-content {
        text-align: center;
        display: inline-block;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    
    .jumbotron img.logo-spacing {
        width: 70px; /* Adjust this value as needed */
        height: auto; /* Keeps the aspect ratio */
    }

    .logo-title-container {
        display: flex; /* Use flexbox for alignment */
        align-items: center; /* Align items vertically */
        justify-content: flex-start; /* Align items to the start (left) */
    }
    
    article.bg-light {
        background-color: #777777; 
    }
    
    .logo-spacing {
        margin-right: 10px;
    }
    
    .title-spacing {
        margin-top: 5px;
        display: flex;
        align-items: center;
    }

    .logo-and-title {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .selected-works img {
        max-width: 50%;
        height: auto; 
        display: block;
        margin: 0 auto;
    }
    
    .healthcare-experience .row {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .healthcare-experience img {
        max-width: 50%;
        height: auto; 
        display: block;
        margin: 0 auto;
    }
    
    .selected-works .row {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .custom-contact-button {
        background-color: #083863;
        border-color: #083863;
    }
    
    a {
        color: #1168b6;
    }
    
    .logo-spacing {
        margin-left: 20px;
    }
    
    .director-container {
        text-align: center;
        padding-bottom: 10px;
    }
    
    .director-container img {
        margin-bottom: 15px;
    }
    

    /*#healthcare-experience {*/
    /*    background-image: url('medley_grey.png');*/
    /*    background-size: cover;*/
    /*    background-repeat: no-repeat;*/
    /*    background-position: center; */
    /*}*/
    
    @media only screen and (max-width: 768px) {
        h2 {
            font-size: 20px;
            margin-top: 0px;
            margin-bottom: 15px;
        }
        .jumbotron {
            /*height: 200px; */
            /*padding-top: 10px;*/
            /*padding-bottom: 20px;*/
            padding: 15px 10px;
        }
        .jumbotron-content h1 {
            font-size: 33px; /* Smaller font size for small devices */
            display: inline-block;
            margin-bottom: 10px;
        }
        
        .jumbotron-content h2 {
            font-size: 18px;
            margin-bottom: 5px;
        }

        .jumbotron-content .btn {
            margin-top: 0px; 

        }
        
        .jumbotron + .container {
            margin-top: 40px; /* Increase space at the top */
        }
        
        .jumbotron-content .tagline {
            margin: 8px 0 12px;  /* small top, small bottom */
            font-size: 16px;     /* slightly smaller on mobile */
            line-height: 1.3;    /* tighter lines */
        }

        /*.jumbotron-content p {*/
        /*   font-size: 14px; */
        /*}*/
        
        .jumbotron img.logo-spacing {
            width: 26px; /* Smaller logo for smaller devices */
            display: inline-block;
        }
        
        .logo-spacing, .jumbotron h1 {
            margin: 1.5px; /* Remove any margin */
        }
        
        .navbar-logo {
            display: inline-block; /* Show logo */
        }
        
        .navbar-brand-text {
            display: none; /* Hide text */
        }
        
        .jumbotron .jumbotron-content h2.display-8:nth-of-type(1) {
            margin-top: 22px;
        }
        
        .jumbotron .jumbotron-content h2.display-8:nth-of-type(2) {
            color: #083863;
            text-shadow: none; 
        }
        
        article {
            font-size: 16px; /* Smaller font size for mobile */
        }

        article h2 {
            font-size: 20px; /* Adjust heading size for readability */
        }

        article p, article li {
            font-size: 16px; /* Smaller text for paragraphs and list items */
        }
    
        /* Adjust padding and margins as needed for tighter spacing */
        article {
            padding: 10px; /* Adjust padding for mobile */
        }
        
        .button-style h4 {
            font-size: 16px; /* Ensures button text size matches article text size */
        }
    
        /* Directly targeting the h4 within buttons for consistency */
        .button-style h4 {
            font-size: 16px; /* Matching article content font size */
        }
        
         /* Adjusting button padding for a proportionate appearance */
        .button-style {
            padding: 5px 10px; /* Smaller padding to match the reduced font size */
        }
    
        .row .img-fluid {
            width: 25%; /* Adjust according to your preference */
            height: auto; /* Maintain aspect ratio */
        }
        
        .button-style svg, .social-icons a svg {
            width: 20px; /* Reduced width for a more proportionate appearance */
            height: 20px; /* Reduced height to match the width, maintaining aspect ratio */
        }
        
        .director-container img.img-fluid {
            max-width: none !important; /* Allow the image to exceed the Bootstrap limit */
            width: 75% !important; /* Set a new width; adjust as needed */
            height: auto !important; /* Maintain aspect ratio */
        }
        
    }
    

    
    .healthcare-experience .col-md-2,
    .selected-works .col-md-2 {
        display: none;
    }
    
    .button-style {
  justify-content: flex-start !important;
  gap: 2px             !important; /* tweak this for icon↔text spacing */
}

/* 2) Remove any auto-margin on the H4 that might push the icon away */
.button-style h4 {
  margin-right: 0     !important;
}

/* 3) Push only the SVG caret to the far right */
.button-style svg {
  margin-left: auto   !important;
}

/* Clinical Experience: half-width buttons on desktop, full-width on mobile */
#healthcare-experience .button-style {
  width: 50%;
  max-width: 560px;        /* optional cap */
}

@media (max-width: 768px) {
  #healthcare-experience .button-style {
    width: 100%;
    max-width: none;
  }
}

.white-mask {
  filter: none;  /* turn off invert */
  -webkit-mask-image: url("stethoscope_transparent.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("stethoscope_transparent.png");
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: #fff;
}

/* Half-width utility for section buttons */
.button-style.half {
  width: 50% !important;
  max-width: 560px;
}

/* Mobile: full width */
@media (max-width: 768px) {
  .button-style.half {
    width: 100% !important;
    max-width: none;
  }
}

/* Base masked icon box */
.icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  background-color: #fff; /* icon colour (white) */
  vertical-align: middle;
}

/* One class per glyph (mask path is RELATIVE TO THIS CSS FILE) */
.icon-thinking {
  -webkit-mask: url("thinking_transparent.png") no-repeat center / contain;
          mask: url("thinking_transparent.png") no-repeat center / contain;
}
.icon-steth {
  -webkit-mask: url("stethoscope_transparent2.png") no-repeat center / contain;
          mask: url("stethoscope_transparent2.png") no-repeat center / contain;
}
.icon-bed {
  -webkit-mask: url("hospital_bed_transparent.png") no-repeat center / contain;
          mask: url("hospital_bed_transparent.png") no-repeat center / contain;
}
.icon-books {
  -webkit-mask: url("books_2_transparent.png") no-repeat center / contain;
          mask: url("books_2_transparent.png") no-repeat center / contain;
}
.icon-consultancy {
  -webkit-mask: url("consultancy_2_transparent.png") no-repeat center / contain;
          mask: url("consultancy_2_transparent.png") no-repeat center / contain;
}
.icon-hospitals {
  -webkit-mask: url("hospitals_2_transparent.png") no-repeat center / contain;
          mask: url("hospitals_2_transparent.png") no-repeat center / contain;
}
.icon-ehr {
  -webkit-mask: url("ehr_2_transparent.png") no-repeat center / contain;
          mask: url("ehr_2_transparent.png") no-repeat center / contain;
}

/* Desktop/default size for the + icon; prevent flex shrink */
.button-style svg {
  margin-left: auto;                 /* keep it to the right */
  width: 28px;                       /* explicit size */
  height: 28px;
  flex: 0 0 28px;                    /* do not let flexbox collapse it */
  display: inline-block;
  stroke: currentColor !important;   /* white, inherits from .button-style { color:#fff } */
  fill: none !important;
  stroke-width: 3.5 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;   /* smooth rotate */
}

/* Hero image: always show entire image, no crop */
.jumbotron .hero-bg {
  display: block;
  width: 100vw;          /* fill entire viewport width */
  max-width: none;       /* override Bootstrap img-fluid */
  height: auto;
  margin: 0;
  position: relative;
  left: 50%;
  right: 50%;
  transform: translateX(-50%); /* ensures centered when using 100vw */
}

/* Button below the image */
.hero-cta {
  margin: 2px 0 48px;  /* add space after image and before next section */
  text-align: center;
}

/* Extra breathing room under the hero into the next section */
.jumbotron + .container {
  margin-top: 24px;
}

/* (Optional) Phone-only tweaks */
@media (max-width: 768px) {
  .hero-cta { margin: 15px 0 10px; }      /* lift the button a touch if needed */
}

/* --- Mobile: swap to alternate image (no text) --- */
@media (max-width: 768px) {
  .jumbotron .hero-bg {
    content: url('banner_bg_mobile.jpg'); /* your new image for phones */
  }
  
  .custom-contact-button {
    font-size: 15px;        /* slightly smaller text */
    padding: 5px 15px;      /* smaller button height/width */
    padding-top: 17px;      /* more space above text */
    padding-bottom: 3px;   /* less space below text */
    padding-left: 15px;
    padding-right: 15px;
    line-height: 1.1;
  }
  .hero-cta.lead { font-size: inherit; }
  .hero-cta {
    margin: 0px 0 0px;    /* adjust spacing if needed */
  }
  
}

/* --- Mobile: shrink navbar height --- */
@media (max-width: 768px) {

  /* reduce vertical padding of the navbar itself */
  .navbar {
    padding-top: 0.15rem !important;   /* default ~0.5–1rem */
    padding-bottom: 0.25rem !important;
    min-height: 44px;                  /* enough for tap targets */
  }

  /* tighten brand text */
  .navbar-brand {
    font-size: 1rem !important;        /* default ~1.25rem */
    line-height: 1.1;
  }

  /* if your logo image shows on mobile, shrink it slightly */
  .navbar-logo {
    max-height: 22px !important;       /* default ~28px in your file */
  }

  /* optional: reduce toggle button padding */
  .navbar-toggler {
    padding: 0.15rem 0.35rem !important;
  }
}

/* --- Mobile-only slogan under hero --- */
.mobile-slogan {
  display: none;               /* hidden by default (desktop) */
}

@media (max-width: 768px) {
  .mobile-slogan {
    display: block;            /* show on phones only */
    color: #083863;            /* same as h2 headings */
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem !important;        /* ~same as 'Who we are' */
    font-style: italic;
    line-height: 1.4;
    margin: 24px 16px 16px;    /* spacing above & below */
  }

  .mobile-slogan p {
    margin: 0;                 /* clean text layout */
  }
}

.dropdown-content {
  list-style: none !important;    /* remove bullets */
  padding-left: 0 !important;     /* remove left indentation */
  margin-left: 0 !important;
  text-align: left !important;    /* ensure text aligns left */
}

/* Flatten the section buttons (Selected Works & Clinical Experience) */
.button-style,
.button-style:hover,
.button-style:focus,
.button-style:active {
  background: #083863 !important;  /* solid, no gradient */
  border: none !important;          /* remove bevel/border */
  box-shadow: none !important;      /* remove drop/inner shadows */
  text-shadow: none !important;     /* remove embossed text look */
  filter: none !important;          /* kill any brightness/contrast effects */
  -webkit-appearance: none;         /* iOS/Safari default button styling off */
  appearance: none;
  outline: none;                    /* no glow outline */
}

/* Normalize paragraph rhythm across sections */
.text-content {
  line-height: 1.6;              /* match typical body copy */
}
.text-content p {
  margin-bottom: 1rem;           /* match other areas */
}

/* (Optional) make it a touch tighter on phones */
@media (max-width: 768px) {
  .text-content { line-height: 1.5; }
  .text-content p { margin-bottom: 0.875rem; }
}

/* 1) Make all section H2s have the same bottom margin */
article h2,
.container > h2,
.title-container .title-spacing {
  margin-bottom: 12px !important;  /* choose 12–16px to taste */
  line-height: 1.2;
}

/* 2) Ensure the element immediately after the H2 does not add extra top margin */
article h2 + *,
.container > h2 + *,
.title-container .title-spacing + * {
  margin-top: 0 !important;
}

/* 3) Kill spacing from truly empty paragraphs anywhere */
p:empty { display: none !important; }

/* 4) Services/Who-We-Are blocks: prevent extra gap between title and text */
.content-wrapper .title-spacing { margin-bottom: 12px !important; }
.content-wrapper .text-content { margin-top: 0 !important; }

/* 5) Defensive: dropdown content paragraphs should align like body text */
.dropdown-content p { margin-top: 0; }

/* (Optional) If you prefer a slightly larger, consistent gap under headings on mobile */
@media (max-width: 768px) {
  article h2,
  .container > h2,
  .title-container .title-spacing {
    margin-bottom: 10px !important; /* a touch tighter on phones */
  }
}