#idMainBody,
.WaLayoutContainer,
.WaPlaceHolder {
    max-width: 100% !important;
    width: 100% !important;
}

/* Hide Wild Apricot Footer */
a[href*="wildapricot.com"], 
span:contains("Powered by Wild Apricot") {
  display: none !important;
}
.five-boxes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 40px 0;
  text-align: center;
}

.five-boxes .box {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  transition: box-shadow 0.3s;
}

.five-boxes .box:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.five-boxes .box img {
  max-width: 80px;
  height: auto;
  margin-bottom: 12px;
}

.five-boxes .box h3 {
  font-size: 1.1em;
  margin: 8px 0;
}

.five-boxes .box p {
  font-size: 0.95em;
  color: #444;
  margin: 0;
}

/* Responsive: 2 per row on tablet, 1 per row on mobile */
@media (max-width: 900px) {
  .five-boxes {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .five-boxes {
    grid-template-columns: 1fr;
  }
}
/* 5 Committee Boxes Layout */
.committee-boxes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 40px 0;
  text-align: center;
}

.committee-boxes .box {
  padding: 20px;
  border-radius: 6px;
  min-height: 320px;  /* taller to fit bigger images */
  color: #fff;
}

.committee-boxes .box img {
  width: 280px;       /* fixed bigger size */
  height: 230px;      /* fixed bigger size */
  object-fit: cover;  /* crops neatly if aspect ratio differs */
  margin-bottom: 18px;
  border-radius: 6px; /* optional, can make round if needed */
}

.committee-boxes .box h3 {
  margin: 8px 0;
  font-size: 1.1em;
  font-weight: bold;
  color: #f5f5f5;
}

.committee-boxes .box p {
  margin: 0;
  font-size: 0.95em;
  color: #f5f5f5;
}

/* Specific background colours */
.committee-boxes .blue   { background-color: #004b87; }
.committee-boxes .teal   { background-color: #3a9cae; }
.committee-boxes .purple { background-color: #4b1c63; }
.committee-boxes .red    { background-color: #b3301a; }
.committee-boxes .green  { background-color: #215732; }

/* Hover effect */
.committee-boxes .box:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  .committee-boxes {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .committee-boxes {
    grid-template-columns: 1fr;
  }
}

/* Board message box */
.board-message {
  background-color: #0c3b5d;  /* deep blue background */
  color: #fff;               /* white text */
  padding: 30px;
  border-radius: 6px;
  margin: 40px 0;
}



/* Heading */
.board-message h3 {
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 15px;
  color: #fff;
}

/* Paragraphs */
.board-message p {
  font-size: 1em;
  line-height: 1.6em;
  margin: 12px 0;
  color: #fff;
}

/* Board member images */
.board-images {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.board-images img {
  width: 70px;
  height: 70px;
  border-radius: 4px;
  object-fit: cover;
}
/* Layout for 3 equal boxes */
.three-boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 40px 0;
}

/* Each box styling */
.three-boxes .box {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  padding-bottom: 15px;
  transition: box-shadow 0.3s ease;
}

.three-boxes .box:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Image styling */
.three-boxes .box img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

/* Headings */
.three-boxes .box h3 {
  margin: 12px 0 6px;
  font-size: 1.2em;
  font-weight: bold;
  color: #000;
}

/* Paragraph text */
.three-boxes .box p {
  font-size: 0.95em;
  color: #333;
  margin: 0 15px;
}

/* Responsive: 1 per row on mobile, 2 per row on tablets */
@media (max-width: 900px) {
  .three-boxes {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .three-boxes {
    grid-template-columns: 1fr;
  }
}
/* Section wrapper */
.alumni-section {
  background-color: #f8d64e; /* yellow background */
  font-family: Arial, sans-serif;
  color: #000;
}

/* Header */
.alumni-header {
  background-color: #002b45; /* dark blue */
  color: #fff;
  padding: 12px 20px;
  text-align: left;
}
.alumni-header h2 {
  margin: 0;
  font-size: 1.6em;
  font-weight: bold;
  color: #fff;  /* white heading */
}

/* Stats + Spotlight row */
.alumni-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px;
  align-items: center;
  text-align: center;
}
.stat {
  font-size: 1.2em;
  font-weight: bold;
}
.stat strong {
  font-size: 1.6em;
  display: block;
  margin-bottom: 4px;
}

.spotlight-title {
  font-style: italic;
  font-size: 0.95em;
  margin-bottom: 8px;
}
.spotlight-images {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.spotlight-images img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 6px;
}

/* Bottom row */
.alumni-bottom {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  padding: 20px;
  background-color: #f8d64e;
}

.video-box {
  position: relative;
  text-align: left;
}
.video-box img {
  width: 100%;
  border-radius: 6px;
}
.video-text {
  position: absolute;
  bottom: 10px;
  left: 15px;
  color: #fff;
  font-weight: bold;
  font-size: 1em;
  background: rgba(0,0,0,0.6);
  padding: 6px 10px;
  border-radius: 4px;
}

/* Text box */
.alumni-text {
  font-size: 1em;
  line-height: 1.6em;
}
.alumni-text strong {
  font-weight: bold;
}

/* Responsive */
@media (max-width: 900px) {
  .alumni-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .alumni-bottom {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .alumni-stats {
    grid-template-columns: 1fr;
  }
}

/* Tabs section */
.tabs-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.tabs {
  display: flex;
  gap: 12px;
  border-bottom: 2px solid #000;
  padding-bottom: 6px;
}

.tab {
  background: #f4d03f;
  padding: 6px 14px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

/* Grid layout */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 columns */
  grid-auto-rows: 1fr; /* equal height rows */
  gap: 20px;
  margin: 30px 0;
}

/* Tall box spanning 2 rows */
.gallery-item.tall {
  grid-row: span 2;
}

/* Box styling */
.gallery-item {
  border: 2px solid #000;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gallery-item h3 {
  font-weight: bold;
  margin-bottom: 10px;
}

.gallery-item p {
  font-size: 0.9em;
  color: #333;
  margin: 8px 0;
}

.gallery-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
  margin-top: 8px;
}

/* Responsive */
@media (max-width: 1000px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}



/* ===== Container & columns ===== */
.latest-wrap {
  background: #444;              /* dark grey background */
  color: #fff;                   /* default white text */
  padding: 28px 28px 34px;
  box-sizing: border-box;
  width: 100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.latest-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* left and right columns */
  gap: 36px;
}

/* vertical divider between columns */
.thinking-col {
  padding-right: 28px;
  border-right: 2px solid rgba(255,255,255,.7);
}
.events-col {
  padding-left: 28px;
}

/* ===== Headings (all white) ===== */
.latest-inner h2 {
  color: #fff;                   /* section headings in white */
  font-size: 2rem;
  line-height: 1.1;
  margin: 0 0 16px;
  font-weight: 700;
}
.latest-inner h2.yellow {         /* override any yellow heading */
  color: #fff;
}

/* ===== LEFT: “Our latest thinking” ===== */
.thinking-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.thinking-item img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  margin-bottom: 10px;
}

.thinking-item h4 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;                   /* title text white */
}

/* remove underline from the three titles */
.thinking-item h4 a {
  color: inherit;
  text-decoration: none;
}
.thinking-item h4 a:hover,
.thinking-item h4 a:focus {
  text-decoration: none;         /* keep no underline on hover/focus */
}

.thinking-item p {
  margin: 0;
  color: #ddd;
  font-size: .95rem;
}

/* ===== RIGHT: “Upcoming events” (text left, image right) ===== */
.event-row {
  display: grid;
  grid-template-columns: 1.1fr .9fr;  /* text a bit wider than image */
  gap: 18px;
  align-items: start;
  margin-bottom: 26px;
}

.event-text h4 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;                   /* event titles white */
}

.event-text p {
  margin: 0;
  color: #ddd;
  font-size: .95rem;
}

.event-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .latest-inner { grid-template-columns: 1fr; }
  .thinking-grid { grid-template-columns: 1fr; }
  .thinking-col { border-right: 0; padding-right: 0; }
  .events-col { padding-left: 0; }
  .event-row { grid-template-columns: 1fr; }
  .event-img { height: 180px; }
}



/* Disable Committees parent menu link */
#id-of-committees-link {
  pointer-events: none;
  cursor: default;
}




/* 20250929 */
/* --- Global Reset --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* --- WIDTH FIX: Reverting to Standard Centering and Max-Width --- */
body {
    background-color: #f8f8f8;
    color: #333; 
    padding: 0; 
}
.white-container {
    max-width: 1200px; /* Restrict width to keep content focused */
    margin: 0 auto; /* Center the whole section reliably */
    padding: 0; 
    /* Removed aggressive centering styles (width: 100vw, position, transform) */
}

/* ------------------------------------------------ */
/* --- 1. TABS STYLING (Desktop) --- */
/* ------------------------------------------------ */
.tab-wrapper {
    position: relative; 
    /* Ensures the tabs and the line are contained and centered */
    max-width: 1200px; 
    margin: 0 auto;
    padding-bottom: 20px; 
    margin-bottom: 30px; 
    padding-left: 20px; /* Match grid padding */
    padding-right: 20px; /* Match grid padding */
    box-sizing: border-box;
}

/* --- Fading Line using Pseudo-element (Horizontal Gradient) --- */
.tab-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #f8f8f8, #555 50%, #f8f8f8);
    pointer-events: none;
}
/* -------------------------------------------------------------------------- */

.tabs-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-top: 10px;
}

.tab {
    font-weight: bold;
    color: #333;
    padding: 8px 15px;
    background-color: #ffda6a; 
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.tab:hover {
    background-color: #ffc400;
}

/* ------------------------------------------------ */
/* --- 2. CSS GRID LAYOUT (Desktop/4-Column) --- */
/* ------------------------------------------------ */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    gap: 20px;
    margin-top: 30px;
    
    /* MODIFIED: Relying on the parent .white-container for max-width, centering the grid itself */
    max-width: 1200px;
    margin: 0 auto; /* Center the grid within the max-width area */
    
    padding: 0 20px; 
}

/* Style for all individual items (boxes) */
.grid-box {
    padding: 15px;
    background-color: #fff;
    
    /* --- BORDER STYLING (Vertical Gradient) --- */
    border-right: 2px;
	border-left: 0;
    border-style: solid;
	border-image: linear-gradient(to bottom, #f8f8f8, #555, #f8f8f8) 1 100%;
    
    display: flex;
    flex-direction: column;
    text-align: left;
    height: 100%; 
    
    font-size: 1em;
	line-height: 1.5em;
	font-weight: 400;
}

/* Removes the border on the last item in each 4-column row */
.gallery-grid .grid-box:nth-child(4n) {
    border-right: 0;
}

/* --- TALL ITEM STYLING (AI For Business Clinic) --- */
.grid-span-2-rows {
    grid-row: 1 / span 2;
    grid-column: 1; 
    justify-content: center; 
    align-items: center; 
    text-align: center;
}

/* --- BOX CONTENT STYLING --- */
.grid-box img,
.item-image {
    width: 100%;
    height: auto;
    margin-top: 15px;
    border-radius: 4px;
    display: block;
}
.item-heading {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.item-subtitle {
    font-style: italic;
    font-size: 0.9em;
    color: #555;
    margin-bottom: 10px;
}
.item-text {
    font-size: 0.9em;
    color: #555;
    line-height: 1.4;
    margin-bottom: 10px;
}
.orange-heading {
    color: #ff8c00;
}

/* ################################################ */
/* --- MEDIA QUERY: MOBILE OVERRIDES --- */
/* ################################################ */
@media (max-width: 600px) {
    
    .tabs-row {
        flex-wrap: wrap; 
        justify-content: space-evenly; 
        margin-bottom: 20px;
        padding: 0 5px; 
    }
    
    .tabs-row::after {
        background: 1px solid #ddd;
    }

    .tab {
        width: 45%; 
        box-sizing: border-box;
        margin: 5px 0; 
        text-align: center; 
    }
    
    /* 1. Reset Grid to Single Column */
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 0; 
        padding: 0;
        width: 100%;
    }

    /* 2. Reset Tall Box to Normal Flow */
    .grid-span-2-rows {
        grid-row: auto;
        grid-column: auto;
        justify-content: flex-start; 
        align-items: flex-start;
        text-align: left;
    }
    
    /* 3. Fix Borders for Vertical Stacking */
    .grid-box {
        border-right: 0 !important;
        border-image: none;
        border-bottom: 1px solid #ddd;
        border-style: solid;
        text-align: left;
        padding: 15px;
    }
    
    .gallery-grid .grid-box:last-child {
        border-bottom: 0;
    }
}


/* 20251001 */
/* Style the Membership Application gadget */
#id_q8C7TAL {
  background: #ffffff;              
  border: 1px solid #ccc;           
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

/* Remove the old top instruction banner */
#id_q8C7TAL::before {
  content: none !important;
}

/* Add instruction under the Email label */
#id_q8C7TAL label[for*="Email"]::after {
  content: "Please provide your Oxford Saïd email address to verify your enrolment or graduation from the Diploma in AI for Business. You may also add a preferred email for future communications in the next section.";
  display: block;
  font-size: 14px;
  font-style: italic;
  color: #444;
  margin-top: 6px;
}

/* Style the disabled parent menu item (Committees) */
.WaGadgetMenu a.menu-disabled {
  color: #98a1aa !important;         /* grey */
  text-decoration: none !important;
}

/* Keep hover state subtle if your theme applies one */
.WaGadgetMenu a.menu-disabled:hover {
  color: #98a1aa !important;
}






/* Force hide any "Level" text inside Membership Application gadget */
#id_q8C7TAL .MembershipLevel {
    font-size: 0 !important; /* hide all text */
}
#id_q8C7TAL .MembershipLevel * {
    font-size: 14px !important; /* restore child text except "Level" */
}




/* Center-align the membership level description */
#id_q8C7TAL .waGadgetContent,
.waGadgetMembershipApplication .waGadgetContent {
  text-align: center;          /* center text */
}

#id_q8C7TAL .waGadgetContent b,
#id_q8C7TAL .waGadgetContent span,
#id_q8C7TAL .waGadgetContent p {
  display: block;
  margin: 0 auto;
  text-align: center;          /* ensure all child elements align */
}

/* Optional: make the whole box narrower and centered */
#id_q8C7TAL .waGadgetContent {
  max-width: 800px;            /* adjust width */
  margin: 0 auto;              /* center horizontally */
}












/* TOBY */
/* --- CRITICAL EMBED STYLING --- */

/* Use the Wild Apricot page ID (18188) to increase CSS specificity */
/* This prefix targets the embed container ONLY on the specified page */

body[data-page-id="18188"] .embed-container {
    width: 100% !important;
    min-height: 100vh !important; 
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    transition: background-color 0.5s, color 0.5s !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    overflow-x: hidden !important; /* Prevent horizontal scrolling */
}

/* Important: Force colors inside the embed to prioritize the Alpine dark mode class */
body[data-page-id="18188"] .embed-container.dark-mode-active {
    color: white !important;
    background-color: black !important;
}
body[data-page-id="18188"] .embed-container:not(.dark-mode-active) {
    color: black !important;
    background-color: white !important;
}

/* --- TYPOGRAPHY AND ANIMATION FIXES --- */

body[data-page-id="18188"] h1, body[data-page-id="18188"] .inter {
    font-family: 'Inter', sans-serif !important;
}

body[data-page-id="18188"] a {
    display: inline-block !important;
    transition: transform 0.3s ease !important;
    text-decoration: none !important;
}

/* Animation CSS retained for header effect */
body[data-page-id="18188"] @keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
body[data-page-id="18188"] .fade-in {
    animation: fadeInUp 1.25s ease-out forwards;
}




/* 20251001 */


/* Hide "Subscription period" and "No automatically recurring payments" in Membership Application gadget */
#id_q8C7TAL .waLevelDetails {
  display: none !important;
}





/* 20251008 - Style the Membership Application gadget */
#id_q8C7TAL {
  background: #ffffff;              
  border: 1px solid #ccc;           
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

/* Remove the old top instruction banner */
#id_q8C7TAL::before {
  content: none !important;
}

/* Add instruction under the Email label */
#id_q8C7TAL label[for*="Email"]::after {
  content: "Please provide your Oxford Saïd email address to verify your enrolment or graduation from the Diploma in AI for Business. You may also add a preferred email for future communications in the next section.";
  display: block;
  font-size: 14px;
  font-style: italic;
  color: #444;
  margin-top: 6px;
}
.waGadgetTitle::after {
  content: "Please provide your Oxford Saïd email address to verify your enrolment or graduation from the Diploma in AI for Business. You may also add a preferred email for future communications in the next section.";
  display: block;
  font-size: 14px;
  color: #333;
  margin-top: 8px;
  line-height: 1.5;
}








/* 20251021 */
/* Hide social login area in all WA auth/profile widgets */
/* CONTACT PROFILE — hide the entire Social network login area (all variants) */

/* Hide Social Network Login section completely */
.WaGadgetContactProfileSocialLogin,
.WaGadgetContactProfile .WaGadgetLoginSocialLogin,
.WaGadgetContactProfile .socialLoginContainer,
.WaGadgetContactProfile .auth-social-providers,
.WaGadgetContactProfile [class*="socialLogin"],
.WaGadgetContactProfile [class*="SocialLogin"],
.WaGadgetContactProfile [class*="auth-social"],
.WaGadgetContactProfile h2,
.WaGadgetContactProfile h3,
.WaGadgetContactProfile h4 {
    display: none !important;
}



/* 1) remove heading social-login  */
.WaGadgetContactProfile :is(h1,h2,h3,h4):has(+ :is(
  .socialLoginContainer,
  .auth-social-providers,
  [class*="socialLogin"],
  [class*="auth-social"]
)) {
  display: none !important;
}

/* 1) remove heading social-login AKS */
.WaGadgetContactProfile :is(h1,h2,h3,h4):has(+ :is(
  .socialLoginContainer,
  .auth-social-providers,
  [class*="idSocialLoginContainer"],
  [class*="auth-social"]
)) {
  display: none !important;
}
/* 2) label/fieldLabel/heading ( “Facebook”, “Google” ) */
.WaGadgetContactProfile :is(label,.fieldLabel,span,strong,em):has(+ :is(
  .socialLoginContainer,
  .auth-social-providers,
  [class*="socialLogin"],
  [class*="auth-social"]
)) {
  display: none !important;
}


.WaGadgetContactProfile .fieldRow:has(:is(
  .socialLoginContainer,
  .auth-social-providers,
  [class*="socialLogin"],
  [class*="auth-social"]
)) {
  display: none !important;
}
/* Remove any leftover Facebook / Google text labels on Contact Profile */
.WaGadgetContactProfile td,
.WaGadgetContactProfile span,
.WaGadgetContactProfile div,
.WaGadgetContactProfile label {
  /* Check for plain text that says "Facebook" or "Google" */
}
.WaGadgetContactProfile td:contains("Facebook"),
.WaGadgetContactProfile td:contains("Google"),
.WaGadgetContactProfile span:contains("Facebook"),
.WaGadgetContactProfile span:contains("Google"),
.WaGadgetContactProfile div:contains("Facebook"),
.WaGadgetContactProfile div:contains("Google"),
.WaGadgetContactProfile label:contains("Facebook"),
.WaGadgetContactProfile label:contains("Google") {
  display: none !important;
}


/* This is a common pattern to hide the social login field in Wild Apricot */
.WaGadgetContactProfile tr:has(label:contains('Google')) {
    display: none !important;
}

/* Fallback for fields with a specific data ID (less common but clean) */
.WaGadgetContactProfile [data-field-name*="Google"] {
    display: none !important;
}






/* 20251113 */
/* 1. Remove background, set text left-aligned, and set text color to black */
.board-message {
    background: none !important; /* Removes blue background */
    text-align: left !important; /* Ensures all contained text starts at the left */
    color: #000000 !important;  /* Sets all text inside to black */
    overflow: hidden; /* Contains floated elements within the parent div */
}

/* 2. Align the picture container to the right */
.board-message .board-images {
    float: right; /* Aligns the entire image block to the right */
    margin-left: 20px; /* Adds some space between the text and the pictures */
}

/* 3. Ensure text inside the board message is left-aligned and black */
.board-message h3,
.board-message p {
    text-align: left !important;
    color: #000000 !important; /* Ensures headers and paragraphs are black */
}

/* 4. Increase image size and improve layout */
.board-message .board-images img {
    display: block; /* Makes each image take up its own line */
    margin-bottom: 10px; /* Adds gap between pictures */
    
    /* --- SIZE INCREASED HERE --- */
    width: 150px; 
    height: 150px;
    /* -------------------------- */
    
    object-fit: cover; /* Ensures images cover the area without distortion */
    border-radius: 5px; /* Optional: adds slightly rounded corners */
}