.elementor-7454 .elementor-element.elementor-element-e93270a{--display:flex;--wolmart-con-ex-width:100px;}/* Start custom CSS for html, class: .elementor-element-0cb863e *//* ============================
   FULL-WIDTH HELP CENTER HEADER
   ============================ */
.help-header {
  width: 100%;
  background: linear-gradient(#1A73E8, #0D47A1);
  padding: 60px 0; /* same height as screenshot */
  display: flex;
  justify-content: center;
}

/* FORCE ELEMENTOR FULL-WIDTH SECTION */
.elementor-section.help-header,
.elementor-section.help-header > .elementor-container,
.help-header .elementor-container,
.help-header .elementor-row,
.help-header .elementor-column,
.help-header .elementor-widget-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* INNER CONTENT WRAPPER — EXACT LIKE SCREENSHOT WIDTH */
.header-inner {
  width: 100%;
  max-width: 1000px; /* screenshot width */
  padding: 0 20px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* TITLE */
.help-header h1 {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  margin: 0;
}


/* ============================
   SEARCH BAR (Identical to Screenshot)
   ============================ */
.search-box {
  background: #ffffff;
  width: 360px;  /* tighter like screenshot */
  height: 48px;  /* exact screenshot height */
  padding: 0 20px;

  border-radius: 30px;
  display: flex;
  align-items: center;

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

.search-box input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
}

.search-icon {
  font-size: 15px;
  opacity: 0.55;
}


/* ============================
   MAIN SECTIONS
   ============================ */
.topics-section,
.articles-section {
  max-width: 1000px; /* match screenshot width */
  margin: 0 auto;
  padding: 60px 20px;
}

.topics-section h2,
.articles-section h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 25px;
}


/* ============================
   TOPIC CARDS — EXACT GRID LIKE SCREENSHOT
   ============================ */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 25px;
}

.topic-card {
  display: flex;
  align-items: center;
  padding: 20px 24px; /* smaller padding like screenshot */
  background: #fff;
  border-radius: 14px;
  border: 1px solid #E8E8E8;

  transition: 0.25s ease;
}

.topic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

.topic-card span {
  font-size: 17px;
  font-weight: 500;
}


/* ICONS SIZE */
.icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  margin-right: 15px;
}

/* Your colors */
.icon-green { background: #16C764; }
.icon-red { background: #F44336; }
.icon-blue { background: #1A73E8; }
.icon-teal { background: #009688; }
.icon-green2 { background: #4CAF50; }
.icon-blue2 { background: #0D47A1; }
.icon-earth { background: #00C853; }
.icon-teal2 { background: #26A69A; }


/* ============================
   POPULAR ARTICLES
   ============================ */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
}

.articles-grid a {
  font-size: 17px;
  color: #1A73E8;
  text-decoration: none;
}

.articles-grid a:hover {
  text-decoration: underline;
}


/* ============================
   RESPONSIVE DESIGN
   ============================ */
@media (max-width: 992px) {
  .header-inner {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .search-box {
    width: 100%;
    max-width: 420px;
  }

  .topics-grid,
  .articles-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .help-header h1 {
    font-size: 36px;
  }

  .topics-section,
  .articles-section {
    padding: 40px 20px;
  }
}
/* ============================
   FIX TOPIC CARD LINK COLOR
   ============================ */
.topic-card {
  color: #000; /* default text color */
}

.topic-card span {
  color: #000; /* override link default color */
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}

.topic-card a {
  text-decoration: none; /* remove underline */
  color: inherit; /* inherit from .topic-card/span */
}/* End custom CSS */