#toolbar{background:#aaa;}
.blogbox p {text-align:left;}

.smallselect {
    font-size: 16px;  /* Adjust size as needed */
    padding: 5px;     /* Adjust padding as needed */
    width: 150px;     /* Adjust width as needed */
    border: 1px solid #ccc; /* Optional border style */
    border-radius: 4px; /* Optional rounded corners */
}

.select {
    font-size: 16px;  /* Adjust size as needed */
    padding: 5px;     /* Adjust padding as needed */
    width: 80%;     /* Adjust width as needed */
    border: 1px solid #ccc; /* Optional border style */
    border-radius: 4px; /* Optional rounded corners */
}

/* General Button Style */
button, a.whatsapp-button {
    background-color: #33351f;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: white 2px solid;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;  /* Remove underline from the link */
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin:11px;
}

button:hover, a.whatsapp-button:hover {
    background-color: #128C7E;
    transform: scale(1.05);  /* Slightly enlarge the button on hover */
}

button:focus, a.whatsapp-button:focus {
    outline: none;  /* Remove outline on focus */
}

/* Optional: Adding a WhatsApp Icon */
a.whatsapp-button i {
    margin-right: 8px;  /* Space between icon and text */
}

.button {
    background-color: #33351f; 
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: white 2px solid;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;  /* Remove underline from the link */
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin:11px;
}

.button:hover {
    background-color: #128C7E;
    transform: scale(1.05);  /* Slightly enlarge the button on hover */
}

.button:focus {
    outline: none;  /* Remove outline on focus */
}

P.clear{clear:both;}


  .blogintro-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    width: 100%;
    max-width: 1200px;
    margin: 18px auto 26px auto;
  }
  @media (max-width: 800px){
    .blogintro-grid{ grid-template-columns: 1fr; }
  }
  .blogintro-pair{ display: contents; }
  .blogintro-title{
    grid-column: 1 / -1;
    text-align:center; margin: 24px auto 6px auto; font-weight:700; color:#0f172a;
  }
  .blogintro-card{
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    overflow: hidden;
    padding:9px;
  }
  .blogintro-card .head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 10px 12px 6px 12px;
    font-weight: 600; color:#0f172a;
  }
  .blogintro-card .badge{
    font-size: 12px; line-height:1; padding:6px 10px; border-radius:999px;
    border:1px solid rgba(0,0,0,0.10);
    background:#fff; color:#0f172a;
  }
  .blogintro-card img{
    display:block; width:100%; height:auto; object-fit:cover; background:#f3f4f6;
  }
  .blogintro-card .caption{
    padding: 10px 12px 12px 12px;
    font-size: 14px; color:#111827;
  }
  /* Placeholder card when one side is missing */
  .blogintro-card.placeholder{
    background: rgba(255,255,255,0.65);
    border: 1px dashed rgba(0,0,0,0.20);
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  }
  .blogintro-card.placeholder .head{ opacity:.75; }
  .blogintro-card.placeholder .missing{
    padding: 24px 12px; text-align:center; color:#374151; font-size:14px;
  }

/* 1) Keep the gallery within your usual page width */
.blogintro-grid{
  max-width: 970px;          /* was 1200px */
}

/* 2) Cap image height so tall files don’t look huge */
.blogintro-card img{
  width: 100%;
  height: auto;
  max-height: 520px;         /* desktop cap */
  object-fit: contain;       /* show full image, no crop */
  background: #f3f4f6;       /* neutral letterbox area */
}

/* 3) Tighter caps on smaller screens */
@media (max-width: 1024px){
  .blogintro-card img{ max-height: 420px; }
}
@media (max-width: 800px){
  .blogintro-card img{ max-height: 360px; }
}
@media (max-width: 520px){
  .blogintro-card img{ max-height: 260px; }
}

/* 4) Optional: tighten the card padding to reduce apparent size */
.blogintro-card .head{ padding: 8px 10px 6px; }
.blogintro-card .caption{ padding: 8px 10px 10px; }

/* 5) If a very broad global rule is still winning, increase specificity */
.blogintro-grid .blogintro-card img{
  max-height: 520px !important;  /* use only if something else overrides */
}

/* Make the media area a clickable link without underlines */
.blogintro-card a.media-link{
  display:block;
  text-decoration:none;
  color:inherit;
}
.blogintro-card a.media-link:focus-visible{
  outline: 2px solid #2a3e27;
  outline-offset: 3px;
}