/* Testimonial CSS */


  .testimonials-wrap{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap:28px;
  }

  .card{
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: var(--card-radius);
    padding:28px;
    box-sizing:border-box;
    box-shadow: 0 6px 18px rgba(2,8,10,0.45);
    transition: transform .18s ease, box-shadow .18s ease;
    min-height: 260px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }

  .card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(2,8,10,0.6);
  }

  .meta{
    display:flex;
    gap:14px;
    align-items:center;
    margin-bottom:14px;
  }

  .avatar{
    width:64px;
    height:64px;
    border-radius:50%;      /* <-- circle */
    overflow:hidden;
    flex:0 0 64px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  }

  .avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .who{
    display:flex;
    flex-direction:column;
    gap:4px;
  }

  .name{
    font-weight:700;
    font-size:18px;
    color:var(--text);
    line-height:1;
  }

  .company{
    font-size:13px;
    color:var(--muted);
    margin-top:2px;
  }

  .stars{
    margin-left:auto;
    display:flex;
    gap:6px;
    align-items:center;
  }

  .star svg{ width:18px; height:18px; display:block; }

  .quote{
    margin-top:8px;
    color:var(--muted);
    font-size:15px;
    line-height:1.7;
    font-style: italic;
    flex:1 1 auto;
  }

  /* small screens tweak padding */
  @media (max-width:420px){
    body{ padding:20px; }
    .card{ padding:18px; }
    .avatar{ width:56px; height:56px; }
  }


/*Shortcode CSS of  Blog Post*/

/* Scoped Recent Blogs styles — safe for whole site (no global overrides) */
.recent-blogs-wrapper { 
  /* optional wrapper to center and control spacing of the block */
  max-width: 1200px;
  margin: 36px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Grid container */
.recent-blogs-grid{
  display:grid;
  gap:24px;
  align-items:start;
  width:100%;
}

/* columns */
.recent-blogs-grid.cols-1 { grid-template-columns: 1fr; }
.recent-blogs-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.recent-blogs-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.recent-blogs-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* card */
.recent-blogs-grid .rb-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(2,8,10,0.25);
  transition: transform .18s ease, box-shadow .18s ease;
  display:flex;
  flex-direction:column;
  min-height:220px;
}

/* hover */
.recent-blogs-grid .rb-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 46px rgba(2,8,10,0.45);
}

/* image area */
.recent-blogs-grid .rb-thumb{
  display:block;
  width:100%;
  height:160px;
  overflow:hidden;
  flex:0 0 auto;
}
.recent-blogs-grid .rb-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* card body */
.recent-blogs-grid .rb-body{
  padding:18px 20px;
  color: #e6f1f5;           /* only affects card body */
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
}
.recent-blogs-grid .rb-title{ margin:0 0 6px 0; font-size:20px; line-height:1.15; }
.recent-blogs-grid .rb-title a{ color: #e6f1f5; text-decoration:none; }
.recent-blogs-grid .rb-title a:hover{ color:#4db6c6; text-decoration:underline; }

.recent-blogs-grid .rb-excerpt{ margin:0; color:#9fb0bd; font-size:14.5px; line-height:1.6; flex:1 1 auto; }
.recent-blogs-grid .rb-readmore{ display:inline-block; margin-top:8px; font-weight:600; color:#4db6c6; font-size:14px; text-decoration:none; }

/* responsiveness */
@media (max-width: 980px){
  .recent-blogs-grid.cols-3, .recent-blogs-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .recent-blogs-grid .rb-thumb{ height:140px; }
}
@media (max-width: 560px){
  .recent-blogs-grid.cols-2, .recent-blogs-grid.cols-3, .recent-blogs-grid.cols-4 { grid-template-columns: 1fr; }
  .recent-blogs-grid .rb-thumb{ height:200px; }
}