/*======================================
Theme Name: Mobytic
Theme URI: https://divicake.com/
Description: Divi Child Theme
Version: 1.0
Author: Mobytic
Author URI: https://mobytic.com/
Template: Divi
======================================*/


/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */




/* === 40% / 20% / 40% GRID ROW FOR DIVI === */

/* Desktop: 40% - 20% - 40% */
.et_pb_row.row-40-20-40-grid {
  display: grid !important;
  grid-template-columns: 1fr 120px 1fr;
  grid-template-areas: "left middle right";
  column-gap: 2%; /* adjust spacing between columns */
  align-items: center;
  margin: 0;
  width: 100% !important;
  max-width: 100% !important;
}

/* Make Divi columns behave as grid children, not flex/float */
.et_pb_row.row-40-20-40-grid .et_pb_column {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  float: none !important;
}

.et_pb_row.row-40-20-40-grid .et_pb_column .et_pb_image {
  margin: 0;
  width: 100% !important;
}

.et_pb_row.row-40-20-40-grid .et_pb_column .et_pb_image img {
  width: 100%;
  height: 74px;
  object-fit: contain;
}

/* Map each Divi column to a grid area */
.et_pb_row.row-40-20-40-grid .et_pb_column:nth-child(1) {
  grid-area: left;
}
.et_pb_row.row-40-20-40-grid .et_pb_column:nth-child(2) {
  grid-area: middle;
}
.et_pb_row.row-40-20-40-grid .et_pb_column:nth-child(3) {
  grid-area: right;
}

@media screen and (max-width: 1024px) {
  /* .et_pb_row.row-40-20-40-grid {
    grid-template-columns: 0 100px 1fr;
  } */

  .et_pb_row.row-40-20-40-grid .et_pb_column:nth-child(3) > * {
    display: none;
  }
}

/* Tablet: 2 columns, center block full width under */
@media (max-width: 980px) {
  .et_pb_row.row-40-20-40-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left right"
      "middle middle";
    column-gap: 4%;
    row-gap: 20px;
  }
}

/* Mobile: stack everything */
@media (max-width: 767px) {
  .et_pb_row.row-40-20-40-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "middle"
      "right";
    row-gap: 20px;
  }
}