/* Container holds all rows in a vertical stack */
.ai-tech-stack-ai-tools-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Each “row” is a horizontal flex group */
.ai-tech-stack-ai-tools-container .row {
  display: flex;
  width: 100%;
  flex-wrap: nowrap; /* rows themselves don't wrap */
  /*margin-bottom: 16px; /* adjust as needed */
}

/* Each “column” inside a row is a vertical flex group whose items
   will wrap at 50% width */
.ai-tech-stack-ai-tools-container .column {
  display: flex;
  flex-direction: column;
  flex: 1;               /* share available space equally */
  flex-wrap: wrap;       /* allow .item children to wrap */
  /*gap: 16px;             /* space between wrapped items */
  /*padding: 0 8px;        /* horizontal gutter */
}

/* Individual items: half-width of their column, flex layout per Figma */
.ai-tech-stack-ai-tools-container .item {
  display: flex;
  justify-content: center;   /* centers content horizontally */
  align-items: center;       /* centers content vertically */
  text-align: center;
  width: calc(50% - 8px);                /* default: two items per row */
  padding: 24px;
  box-sizing: border-box;
  /*border-radius: 8px 8px 2px 2px;*/
  border: 2px solid rgba(255, 255, 255, 0.40);
  /*background: linear-gradient(96deg, rgba(44, 51, 69, 0.80) 0%, rgba(44, 51, 69, 0.60) 100%);*/
  backdrop-filter: blur(27.5px);

  /* Typography */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #FFF;
  font-family: "Futura PT", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.444px;
  font-feature-settings: 'liga' off, 'clig' off;
}

.ai-tech-stack-ai-tools-container .item.parent {height:100%}

/* Example: if you need to style the bottom logo/text row differently */
.ai-tech-stack-ai-tools-container .row {
  align-items: center;
}

.ai-tech-stack-ai-tools-container .row .column:first-child {
  flex: 0 0 auto;  /* logo stays its intrinsic size */
}

.ai-tech-stack-ai-tools-container .row .column:last-child {
  flex: 1;         /* text takes remaining space */
}

.ai-tech-stack-ai-tools-container .row.parent{margin-bottom: 15px}

/* Make item full-width if it's the only child in a row */
.ai-tech-stack-ai-tools-container .row .item:only-child {
  width: 100%;
  height: 100%;
}

/* Make all two-column rows stretch their children vertically */
.ai-tech-stack-ai-tools-container .row {
  align-items: stretch;
}

/* First column 25%, second column 75% */
.ai-tech-stack-ai-tools-container .row > .column:first-child {
  flex: 0 0 25%;
  max-width: 25%;
  margin-right: 15px
}

.ai-tech-stack-ai-tools-container .row > .column:last-child {
  flex: 1;
  max-width: 75%;
}

.ai-tech-stack-ai-tools-container .column.parent{margin-right: 15px;width: 100%;flex: 0 0 25%;max-width: 25%;flex-direction: row;height: 100%;}
.ai-tech-stack-ai-tools-container .column.child{flex: 0 0 75%;max-width: 75%; flex-direction: row;gap: 16px;}

.ai-tech-stack-ai-tools-container .add-bottom-margin { margin-bottom: 15px; }
.ai-tech-stack-ai-tools-container .add-gap { gap: 16px; }
.ai-tech-stack-ai-tools-container h2{text-align:center;margin-bottom:30px}
.ai-tech-stack-ai-tools-container p{text-align:center;margin-bottom:30px}

.ai-tech-stack-ai-tools-container .devsecops{display: flex; flex-direction: row; width: 100%; gap: 30px;}
.ai-tech-stack-ai-tools-container .devsecops .column.first {width: 95px;align-items: center;justify-content: center;}
.ai-tech-stack-ai-tools-container .devsecops .column.second {width: calc(100% - 95px);text-align: left;}
.ai-tech-stack-ai-tools-container .devsecops h3 {margin-top:0;margin-bottom:15px;}
.ai-tech-stack-ai-tools-container .devsecops p{text-wrap-mode: wrap;text-align:left;font-weight:400;font-family: "Proxima Nova", sans-serif;font-size:18px; line-height:1.5;}

.ai-tech-stack-ai-tools-container .item:hover{ background-color:#24ce7b; cursor:pointer; }
.ai-tech-stack-ai-tools-container .devsecops-container .item:hover {background-color: inherit;cursor:inherit}

@media (max-width:1200px){
  .ai-tech-stack-ai-tools-container .item{font-size:16px;text-wrap: auto;}
}
@media (max-width:550px){
  .mobile-rotate-text{transform: rotate(-90deg);text-wrap: nowrap;}
  .set-height-135{min-height: 135px;}
  .ai-tech-stack-ai-tools-container .devsecops{flex-direction: column;}
  .ai-tech-stack-ai-tools-container .devsecops .column.second{width:100%;}
  .ai-tech-stack-ai-tools-container .devsecops p{text-align:left; font-size:16px;}
  .ai-tech-stack-ai-tools-container .devsecops .column.first{width:50px}
  .ai-tech-stack-ai-tools-container .devsecops h3{font-size: 24px;}
  .ai-tech-stack-ai-tools-container .item{width: calc(100% - 16px);}
  .ai-tech-stack-ai-tools-container .row > .column:first-child {max-width: 50px;}
  .ai-tech-stack-ai-tools-container .column.child .item{width:100%}
  .ai-tech-stack-ai-tools-container .row > .column:last-child{max-width:100%}
  .ai-tech-stack-ai-tools-container .row > .column.mobile-max-width{max-width: calc(100% - 66px);}
}


/* overlay + centering */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay.hidden {
  display: none;
}

/* modal window */
.modal {
  background: #2c3345;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  padding: 24px;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* close button (×) */
.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding:0;
  color:#fff;
}

.modal-close:hover{rgba(36, 206, 123, 1.0);border:none; background-color:transparent;}

/* modal content */
.modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

.modal-body p{margin-bottom:30px;}