/* ================= COMMON ================= */
.clear{clear:both}

a{text-decoration:none}

img{
  max-width:100%;
  display:block;
}

/* ================= ARTICLE LAYOUT ================= */
.articles-container{
  padding:20px 12px;
}

.article-box{
  max-width:1330px;
  margin:0 auto 40px;
  background:#ffffff;
  border-radius:14px;
  padding:24px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  transition:.3s ease;
    
}

.article-box:hover{
  transform:translateY(-6px);
}

/* ================= IMAGE ================= */
.image-circle{
  text-align:center;
  margin-bottom:20px;

}

.image-circle img{
  max-width:320px;
  border-radius:12px;
  transition:.4s ease;

}

.article-box:hover .image-circle img{
  transform:scale(1.05);
}

/* ================= TEXT ================= */
.text-content h1{
  font-size:26px;
  margin-bottom:10px;
  color:#111827;
}

.text-content h2{
  font-size:22px;
  margin:10px 0;
  color:#1f2937;
}

.text-content p{
  font-size:16px;
  margin-bottom:14px;
  text-align:justify;
  color:#374151;
}

/* ================= BUTTONS ================= */

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 18px -7px; /* 25px original - 7px gap adjustment */
}

.btn{
  min-width:240px;
  padding:14px 20px;
  border-radius:10px;
  color:#fff;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 7px;
  transition:.3s ease;
}

.btn i {
  margin-right: 10px;
  font-size: 18px;
}

.btn:hover{
  transform:translateY(-3px);
  opacity:.9;
}

.btn-call{background:#dc2626}
.btn-whatsapp{background:#16a34a}
.btn-order{background:#2563eb}

/* ================= SOCIAL ICONS ================= */
.social-icons {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  text-align: center;
}

.social-icons a{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#111827;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  transition:.3s ease;
}

.social-icons a:hover{
  background:#2563eb;
  transform:translateY(-4px);
}


/* ================= RESPONSIVE ================= */
@media(max-width:992px){
  .image-circle img{
    max-width:260px;
  }
}

@media(max-width:768px){
  .text-content .h1{font-size:22px}
  .text-content .h2{font-size:19px}
  .text-content .p{font-size:15px}

  .btn{
    width:100%;
  }
}

@media(max-width:480px){
  .article-box{
    padding:18px;
  }

  .image-circle img{
    max-width:220px;
  }
}

/* ================= DARK MODE (optional ready) ================= */
body.dark{
  background:#020617;
  color:#e5e7eb;
}

body.dark .article-box{
  background:#0f172a;
}

body.dark .h1,
body.dark .h2,
body.dark .p{
  color:#e5e7eb;
}