/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 30 2025 | 09:38:15 */
.Hero_Banner {
  aspect-ratio: 12 / 5;
  width: 100%;
}

/* Mobile - max width 767px */
@media (max-width: 767px) {
  .Hero_Banner {
    aspect-ratio: 4 / 5;
  }
}

/* Ensure .percent is auto height */
.usp_counter .et_pb_number_counter .percent {
  height: auto;
}

/* Grid layout: Default 2 per row */
.usp_counter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.usp_counter .percent {
    margin-bottom: 0 !important;
}

/* Tablet: 4 items per row */
@media (min-width: 768px) and (max-width: 1024px) {
  .usp_counter {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile: 2 items per row (just in case) */
@media (max-width: 767px) {
  .usp_counter {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Number counter card styling */
.usp_counter .et_pb_number_counter {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  transition: box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Optional hover effect */
.usp_counter .et_pb_number_counter:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.trust_factor .et_pb_row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* First column: full width */
.trust_factor .et_pb_column.col-1 {
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 50px;
}

/* Second and third columns: 40% each with space between */
.trust_factor .et_pb_column.col-2,
.trust_factor .et_pb_column.col-3 {
  flex: 0 0 40%;
  max-width: 40%;
}

/* Distribute space between col-2 and col-3 */
.trust_factor .et_pb_column.col-2 {
  margin-right: auto;
}
.trust_factor .et_pb_column.col-3 {
  margin-left: auto;
}

/* ===== Mobile Styles: Stack all columns ===== */
@media (max-width: 767px) {
  .trust_factor .et_pb_column.col-2,
  .trust_factor .et_pb_column.col-3 {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 0 20px 0; /* Optional spacing between them */
  }
}

@media (max-width: 767px) {
  .mob-flex-rev {
    display: flex;
    flex-direction: column-reverse;
  }
}