:root{
  --bgabout-bg: #192c6f;
  --bgabout-cyan: #00cfff;
  --bgabout-white: #ffffff;
  --bgabout-line-strong: rgba(120,170,255,.75);
  --bgabout-line-soft: rgba(120,170,255,.45);
}

.au{
  background: var(--bgabout-bg);
  color: var(--bgabout-white);
  overflow: hidden;      /* می‌تونی نگه داری */
  height: auto;          /* ✅ به جای 372px */
      /* ✅ اگر حداقل ارتفاع می‌خوای */
  width: 100%;
}


.au-container{max-width:1220px;}

.au-row{
  position:relative;
}

.au-row::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:2px;
  background: var(--bgabout-line-soft);
}

.au-textCol{display:flex;}
.au-textWrap{padding:70px 52px;}

.au-title{
  font-size:40px;
  color: var(--bgabout-cyan);
  margin-bottom:18px;
}

.au-desc{
  font-size:16px;
  line-height:2.05;
  letter-spacing:.06em;
  max-width:520px;
  text-align: justify !important;
}

/* ART */
.au-art{
  position:relative;
  min-height:520px;
}

.au-frame{
  position:absolute;
  left:0; right:0;
  height:2px;
  background: var(--bgabout-line-soft);
}
.au-frame--top{top:0;}
.au-frame--mid{top:50%;}
.au-frame--bot{bottom:0;}

.au-vline{
  position:absolute;
  top:110px; bottom:70px;
  width:2px;
  background: var(--bgabout-line-soft);
}
.au-vline--a{left:80px;}
.au-vline--b{right:80px;}
 

.au-illus{
  position:absolute;
  inset:0;
  margin:auto;
  width:min(92%,560px);
  height:auto;
}

/* ========== Responsive ========== */

@media (max-width:575.98px){
  .au-row::before{display:none;}
  .au-textWrap{padding:46px 26px;}
  .au-title{font-size:28px;}
  .au-desc{font-size:16px;}
  .au-vline--a{left:36px;}
  .au-vline--b{right:36px;}
}

@media (min-width:576px) and (max-width:767.98px){
  .au-title{font-size:64px;}
  .au-desc{font-size:20px;}
}