:root{
  --primary:#3b82f6;
  --bg:#fafafa;
  --text:#263238;
  --muted:#475569;
  --card:#ffffff;
  --radius:12px;
  --shadow:0 12px 30px rgba(16,24,40,0.06);
  --shadow-sm:0 8px 20px rgba(16,24,40,0.04);
}

/* Section */
.layout358-section{
  padding:3.5rem 5%;
  font-family:"Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* Header */
.layout358-header-content{
  max-width:900px;
  margin:0 auto 2.5rem;
  text-align:center;
}

.layout358-tagline{
  font-weight:600;
  margin-bottom:0.5rem;
  color:var(--muted);
}

.layout358-heading{
  font-size:2rem;
  font-weight:800;
  margin-bottom:0.75rem;
  color:#071133;
  line-height:1.15;
}

.layout358-text{
  font-size:1rem;
  color:var(--muted);
}

/* Card */
.layout358-card{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  max-width:1100px;
  margin:0 auto;
  background:transparent;
  align-items:stretch;
  border-radius:var(--radius);
}

/* Content */
.layout358-card-content{
  max-width:700px;
  padding:1.25rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:transparent;
}

.layout358-subtitle{
  font-weight:600;
  margin-bottom:0.5rem;
  color:var(--muted);
}

.layout358-card-heading{
  font-size:1.5rem;
  font-weight:800;
  margin-bottom:0.75rem;
  color:#0b2540;
}

.layout358-card-text{
  font-size:1rem;
  margin-bottom:1rem;
  color:var(--muted);
}

/* Buttons — pill style to match other layouts */
.layout358-buttons a,
.layout358-buttons .btn{
  display:inline-block;
  margin:0.3rem;
  padding:0.6rem 1.1rem;
  text-decoration:none;
  border-radius:999px;
  font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:var(--shadow-sm);
}

.layout358-buttons a:hover,
.layout358-buttons .btn:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(15,23,42,0.06);
}

.btn-secondary{
  background-color:var(--primary);
  color:#fff;
  border:none;
}

.btn-link{
  background:rgba(59,130,246,0.06);
  color:var(--primary);
  border:2px solid rgba(37,99,235,0.12);
  border-radius:999px;
  padding:0.5rem 0.95rem;
  box-shadow:none;
}

/* Image */
.layout358-card-image{
  overflow:hidden;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid rgba(15,23,42,0.03);
}

.layout358-card-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:var(--radius);
  transition:transform 400ms ease;
}

.layout358-card-image img:hover{
  transform:scale(1.03);
}

/* Responsive: on wide screens place card content and image side-by-side with fixed image width */
@media(min-width:768px){
  .layout358-card{
    flex-direction:row;
    gap:2rem;
    align-items:center;
  }

  .layout358-card-image{
    flex:0 0 360px;
    max-height:none;
  }

  .layout358-card-image img{
    height:100%;
    min-height:260px;
  }

  .layout358-card-content{
    flex:1;
    padding:2rem;
  }
}

/* Small screens */
@media(max-width:900px){
  .layout358-section{ padding:2.5rem 4%; }
  .layout358-card-image img{ max-height:360px; }
}

@media(max-width:480px){
  .layout358-heading{ font-size:1.6rem; }
  .layout358-card-image img{ max-height:220px; }
  .layout358-buttons a,
  .layout358-buttons .btn{ padding:0.55rem 1rem; font-size:0.95rem; }
}
