Message from MD — Full Width Frame


  :root{
    --accent: #8b0000;    /* change this for the bottom border color */
    --card-bg: #ffffff;
    --page-bg: #f4f4f4;
    --max-inner: 1200px;  /* max width of content inside full-width frame */
  }

  body{
    margin:0;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--page-bg);
    color: #222;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  /* Full-width framed section */
  .md-fullframe {
    width: 100%;
    box-sizing: border-box;
    padding: 40px 20px;          /* outer spacing around the frame */
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.01) 100%);
  }

  /* Inner centered content container (optional max width) */
  .md-inner {
    max-width: var(--max-inner);
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(6,22,37,0.08);
    display: flex;
    gap: 24px;
    align-items: stretch;
    transition: transform .26s ease, box-shadow .26s ease;
    position: relative;
  }

  /* Hover lift */
  .md-inner:hover{
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(6,22,37,0.12);
  }

  /* Left photo column */
  .md-photo {
    flex: 0 0 260px; /* fixed photo column on large screens */
    background: linear-gradient(135deg,#f6f6f6,#efefef);
    padding: 18px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .md-photo img{
    width:100%;
    max-width:220px;
    border-radius:10px;
    display:block;
    object-fit:cover;
    border: 2px solid rgba(0,0,0,0.04);
  }

  /* Right content */
  .md-content {
    flex:1 1 auto;
    padding: 26px 28px;
    box-sizing: border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .md-content h2{
    margin:0 0 12px 0;
    font-size:20px;
    color:#111;
    letter-spacing:0.2px;
  }
  .md-content p {
    margin:0;
    color:#444;
    line-height:1.65;
    text-align:justify; /* justified text */
    font-size:15px;
  }

  .signature {
    margin-top:18px;
    font-family: "Brush Script MT", "Lucida Handwriting", cursive;
    font-size:18px;
    color:#333;
  }

  /* Bottom accent border (colored) — the "down side border" */
  .md-accent {
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    height:8px;                 /* thickness of the accent */
    background: var(--accent);
  }

  /* Responsive: stack on small screens */
  @media (max-width: 880px){
    .md-inner{
      flex-direction: column;
      gap: 18px;
    }
    .md-photo{
      flex: 0 0 auto;
      padding: 12px;
    }
    .md-photo img{
      max-width:260px;
      width:60%;
    }
    .md-content{
      padding:18px;
    }
  }

  @media (max-width: 420px){
    .md-photo img{ width:70%; }
    .md-content p{ font-size:14px; }
  }

  /* small utility to make the frame truly edge-to-edge on small screens */
  .no-gutter { padding-left:6px; padding-right:6px; }