/* DevBuilder Front */

.db-wrapper{
  font-family: var(--db-font, inherit);
  max-width: var(--db-site-width, 1200px);
  margin: 0 auto;
  padding: 0 16px;
}

.db-row{
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
}

.db-col{
  min-width: 0;
  flex: 0 0 var(--db-col-desktop, 100%);
  max-width: var(--db-col-desktop, 100%);
}

@media (max-width: 768px){
  .db-col{
    flex: 0 0 var(--db-col-mobile, 100%);
    max-width: var(--db-col-mobile, 100%);
  }
}

.db-text{max-width:100%;}

.db-btn{
  display:inline-block;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--db-accent, #2563EB);
  color:#fff;
  text-decoration:none;
  font-weight:800;
}

.db-divider{
  height:1px;
  background:#e5e7eb;
  margin: 18px 0;
}

.db-image img{
  max-width:100%;
  display:block;
  border-radius: 14px;
}

/* Icon + Text */
.db-icon-text{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.db-icon-text .db-icon{
  font-size:34px;
  width:34px;
  height:34px;
  line-height:34px;
}
.db-icon-title{
  font-weight:900;
  margin-bottom:4px;
}
.db-icon-desc{
  color:#6b7280;
}

/* Icon list */
.db-icon-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.db-icon-list-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.db-icon-list-item .db-icon{
  font-size:22px;
  width:22px;
  height:22px;
  line-height:22px;
  margin-top:2px;
}
.db-icon-list-text{
  font-weight:700;
}

/* Section style defaults */
.db-section{ width:100%; }


/* ===== HARD FIX: force columns side-by-side on front-end ===== */
.db-wrapper, .db-section, .db-row, .db-col{ box-sizing:border-box; }

.db-row{
  display:flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

.db-col{
  flex: 0 0 var(--db-col-desktop, 100%) !important;
  max-width: var(--db-col-desktop, 100%) !important;
}

@media (max-width: 768px){
  .db-row{ flex-wrap: nowrap !important; }
  .db-col{
    flex: 0 0 var(--db-col-mobile, 100%) !important;
    max-width: var(--db-col-mobile, 100%) !important;
  }
}


/* DevBuilder Advanced: responsive visibility */
@media (max-width: 767px){
  .db-hide-mobile{ display:none !important; }
}
@media (min-width: 768px){
  .db-hide-desktop{ display:none !important; }
}