.bbody1{
  background:linear-gradient(135deg,#d8ecff,#dafffb);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

/* MAIN CONTAINER */
.sm-a1{
  width:100%;
  max-width:98%;
  background:#ffffff;
  border-radius:8px;
  overflow:hidden;
  /* box-shadow:0 25px 60px rgba(0, 0, 0, 0.104); */
}

/* HEADER */
.sm-a2{
  background:#cdfcfb;
   color:#026f76;
  padding:60px 20px 40px;
  text-align:center;
}

.sm-a2-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.sm-a3{
  width:110px;
  height:110px;
  border-radius:50%;
  border:4px solid #fff;
  object-fit:cover;
  margin-bottom:18px;
  display:block;
  background-color: white;
}

.sm-a4{
  font-size:32px;
  font-weight:700;
}

.sm-a5{
  font-size:16px;
  opacity:0.9;
  margin-top:6px;
}

/* LINKS GRID */
.sm-a6{
  padding:40px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

/* CARD */
.sm-a7{
  background:#f4f7fb;
  border-radius:16px;
  padding:28px;
  display:flex;
  align-items:center;
  gap:20px;
  text-decoration:none;
  color:#111;
  box-shadow:0 8px 25px rgba(0,0,0,0.08);
  transition:0.4s ease;
}

.sm-a7:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 45px rgba(0,0,0,0.15);
}

/* ICON */
.sm-a8{
  width:60px;
  height:60px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:#fff;
}

/* TEXT */
.sm-a9{
  display:flex;
  flex-direction:column;
}

.sm-a10{
  font-size:20px;
  font-weight:600;
}

.sm-a11{
  font-size:14px;
  color:#555;
}

/* BRAND COLORS */
.fb{background:#1877f2;}
.ig{background:#e1306c;}
.wa{background:#25d366;}
.li{background:#0077b5;}
.tw{background:#1da1f2;}
.yt{background:#ff0000;}

/* ----------- RESPONSIVE BREAKPOINTS ----------- */

/* Large laptops */
@media(max-width:1200px){
  .sm-a6{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Tablets */
@media(max-width:900px){
  .sm-a4{font-size:28px;}
  .sm-a6{padding:30px;}
}

/* Large phones */
@media(max-width:700px){
  .sm-a6{
    grid-template-columns:1fr;
    gap:22px;
  }
}

/* Small phones */
@media(max-width:500px){
  .sm-a3{width:90px;height:90px;}
  .sm-a4{font-size:24px;}
  .sm-a7{padding:20px;}
}

/* Extra small phones */
@media(max-width:360px){
  .sm-a10{font-size:18px;}
  .sm-a11{font-size:13px;}
}