.container,
.container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-right: 15px;
  padding-left: 15px;
}
.col,
[class^="col-"],
[class*=" col-"] {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.no-gutters .col,
.no-gutters [class^="col-"],
.no-gutters [class*=" col-"],
.grid-row .col,
.grid-row [class^="col-"],
.grid-row [class*=" col-"] {
  padding-left: 0;
  padding-right: 0;
}
.grid-row,
.row {
  display: -ms-flexbox;
  display: box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.row.mar24 {
  margin-right: -12px;
  margin-left: -12px;
}
.row.mar24 [class*="col-"],
.row.mar24 [class^="col-"] {
  padding-right: 12px;
  padding-left: 12px;
}
.row.mar20 {
  margin-right: -10px;
  margin-left: -10px;
}
.row.mar20 [class*="col-"],
.row.mar20 [class^="col-"] {
  padding-right: 10px;
  padding-left: 10px;
}
.row.mar15 {
  margin-right: -7.5px;
  margin-left: -7.5px;
}
.row.mar15 [class*="col-"],
.row.mar15 [class^="col-"] {
  padding-right: 7.5px;
  padding-left: 7.5px;
}
.row.mar12 {
  margin-right: -6px;
  margin-left: -6px;
}
.row.mar12 .col,
.row.mar12 [class*="col-"],
.row.mar12 [class^="col-"] {
  padding-right: 6px;
  padding-left: 6px;
}
.grid-top {
  -ms-flex-align: start;
  align-items: flex-start;
}
.grid-bottom {
  -ms-flex-align: end;
  align-items: flex-end;
}
.grid-center {
  -ms-flex-align: center;
  align-items: center;
}
.grid-justify-enter {
  -ms-flex-pack: center;
  justify-content: center;
}
.grid-col-top {
  align-self: flex-start;
  -ms-flex-item-align: start;
}
.grid-col-bottom {
  align-self: flex-end;
  -ms-flex-item-align: end;
}
.grid-col--center {
  align-self: center;
  -ms-flex-item-align: center;
}
.grid-col-auto-size {
  box-flex: 0;
  -ms-flex: none;
  flex: none;
}
.no-gutters {
  margin-left: 0;
  margin-right: 0;
}
:root[dir=rtl] [class^="offset-"],
:root[dir=rtl] [class*=" offset-"] {
  margin-left: 0;
}
.col {
  flex-basis: 0;
  -ms-box-flex: 1;
  box-flex: 1;
  flex-grow: 1;
  max-width: 100%;
}
.col-xs-auto {
  box-flex: 1;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.col-xs {
  flex-basis: 0;
  -ms-box-flex: 1;
  box-flex: 1;
  flex-grow: 1;
  max-width: 100%;
}
.col-xs-1 {
  box-flex: 1;
  -ms-flex: 0 0 8.333333333333332%;
  flex: 0 0 8.333333333333332%;
  max-width: 8.333333333333332%;
}
.col-xs-2 {
  box-flex: 1;
  -ms-flex: 0 0 16.666666666666664%;
  flex: 0 0 16.666666666666664%;
  max-width: 16.666666666666664%;
}
.col-xs-3 {
  box-flex: 1;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
.col-xs-4 {
  box-flex: 1;
  -ms-flex: 0 0 33.33333333333333%;
  flex: 0 0 33.33333333333333%;
  max-width: 33.33333333333333%;
}
.col-xs-5 {
  box-flex: 1;
  -ms-flex: 0 0 41.66666666666667%;
  flex: 0 0 41.66666666666667%;
  max-width: 41.66666666666667%;
}
.col-xs-6 {
  box-flex: 1;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
.col-xs-7 {
  box-flex: 1;
  -ms-flex: 0 0 58.333333333333336%;
  flex: 0 0 58.333333333333336%;
  max-width: 58.333333333333336%;
}
.col-xs-8 {
  box-flex: 1;
  -ms-flex: 0 0 66.66666666666666%;
  flex: 0 0 66.66666666666666%;
  max-width: 66.66666666666666%;
}
.col-xs-9 {
  box-flex: 1;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}
.col-xs-10 {
  box-flex: 1;
  -ms-flex: 0 0 83.33333333333334%;
  flex: 0 0 83.33333333333334%;
  max-width: 83.33333333333334%;
}
.col-xs-11 {
  box-flex: 1;
  -ms-flex: 0 0 91.66666666666666%;
  flex: 0 0 91.66666666666666%;
  max-width: 91.66666666666666%;
}
.col-xs-12 {
  box-flex: 1;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
.offset-xs-1 {
  margin-left: 8.333333333333332%;
}
:root[dir=rtl] .offset-xs-1 {
  margin-right: 8.333333333333332%;
}
.offset-xs-2 {
  margin-left: 16.666666666666664%;
}
:root[dir=rtl] .offset-xs-2 {
  margin-right: 16.666666666666664%;
}
.offset-xs-3 {
  margin-left: 25%;
}
:root[dir=rtl] .offset-xs-3 {
  margin-right: 25%;
}
.offset-xs-4 {
  margin-left: 33.33333333333333%;
}
:root[dir=rtl] .offset-xs-4 {
  margin-right: 33.33333333333333%;
}
.offset-xs-5 {
  margin-left: 41.66666666666667%;
}
:root[dir=rtl] .offset-xs-5 {
  margin-right: 41.66666666666667%;
}
.offset-xs-6 {
  margin-left: 50%;
}
:root[dir=rtl] .offset-xs-6 {
  margin-right: 50%;
}
.offset-xs-7 {
  margin-left: 58.333333333333336%;
}
:root[dir=rtl] .offset-xs-7 {
  margin-right: 58.333333333333336%;
}
.offset-xs-8 {
  margin-left: 66.66666666666666%;
}
:root[dir=rtl] .offset-xs-8 {
  margin-right: 66.66666666666666%;
}
.offset-xs-9 {
  margin-left: 75%;
}
:root[dir=rtl] .offset-xs-9 {
  margin-right: 75%;
}
.offset-xs-10 {
  margin-left: 83.33333333333334%;
}
:root[dir=rtl] .offset-xs-10 {
  margin-right: 83.33333333333334%;
}
.offset-xs-11 {
  margin-left: 91.66666666666666%;
}
:root[dir=rtl] .offset-xs-11 {
  margin-right: 91.66666666666666%;
}
.offset-xs-12 {
  margin-left: 100%;
}
:root[dir=rtl] .offset-xs-12 {
  margin-right: 100%;
}
.order-xs-first {
  -ms-flex-order: -1;
  order: -1;
}
.order-xs-1 {
  -ms-flex-order: 1;
  order: 1;
}
.order-xs-2 {
  -ms-flex-order: 2;
  order: 2;
}
.order-xs-3 {
  -ms-flex-order: 3;
  order: 3;
}
.order-xs-4 {
  -ms-flex-order: 4;
  order: 4;
}
.order-xs-5 {
  -ms-flex-order: 5;
  order: 5;
}
.order-xs-6 {
  -ms-flex-order: 6;
  order: 6;
}
.order-xs-7 {
  -ms-flex-order: 7;
  order: 7;
}
.order-xs-8 {
  -ms-flex-order: 8;
  order: 8;
}
.order-xs-9 {
  -ms-flex-order: 9;
  order: 9;
}
.order-xs-10 {
  -ms-flex-order: 10;
  order: 10;
}
.order-xs-11 {
  -ms-flex-order: 11;
  order: 11;
}
.order-xs-12 {
  -ms-flex-order: 12;
  order: 12;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
  .col {
    flex-basis: 0;
    -ms-box-flex: 1;
    box-flex: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-auto {
    box-flex: 1;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-sm {
    flex-basis: 0;
    -ms-box-flex: 1;
    box-flex: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-1 {
    box-flex: 1;
    -ms-flex: 0 0 8.333333333333332%;
    flex: 0 0 8.333333333333332%;
    max-width: 8.333333333333332%;
  }
  .col-sm-2 {
    box-flex: 1;
    -ms-flex: 0 0 16.666666666666664%;
    flex: 0 0 16.666666666666664%;
    max-width: 16.666666666666664%;
  }
  .col-sm-3 {
    box-flex: 1;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    box-flex: 1;
    -ms-flex: 0 0 33.33333333333333%;
    flex: 0 0 33.33333333333333%;
    max-width: 33.33333333333333%;
  }
  .col-sm-5 {
    box-flex: 1;
    -ms-flex: 0 0 41.66666666666667%;
    flex: 0 0 41.66666666666667%;
    max-width: 41.66666666666667%;
  }
  .col-sm-6 {
    box-flex: 1;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    box-flex: 1;
    -ms-flex: 0 0 58.333333333333336%;
    flex: 0 0 58.333333333333336%;
    max-width: 58.333333333333336%;
  }
  .col-sm-8 {
    box-flex: 1;
    -ms-flex: 0 0 66.66666666666666%;
    flex: 0 0 66.66666666666666%;
    max-width: 66.66666666666666%;
  }
  .col-sm-9 {
    box-flex: 1;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    box-flex: 1;
    -ms-flex: 0 0 83.33333333333334%;
    flex: 0 0 83.33333333333334%;
    max-width: 83.33333333333334%;
  }
  .col-sm-11 {
    box-flex: 1;
    -ms-flex: 0 0 91.66666666666666%;
    flex: 0 0 91.66666666666666%;
    max-width: 91.66666666666666%;
  }
  .col-sm-12 {
    box-flex: 1;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .offset-sm-1 {
    margin-left: 8.333333333333332%;
  }
  :root[dir=rtl] .offset-sm-1 {
    margin-right: 8.333333333333332%;
  }
  .offset-sm-2 {
    margin-left: 16.666666666666664%;
  }
  :root[dir=rtl] .offset-sm-2 {
    margin-right: 16.666666666666664%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  :root[dir=rtl] .offset-sm-3 {
    margin-right: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333333333%;
  }
  :root[dir=rtl] .offset-sm-4 {
    margin-right: 33.33333333333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666666666667%;
  }
  :root[dir=rtl] .offset-sm-5 {
    margin-right: 41.66666666666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  :root[dir=rtl] .offset-sm-6 {
    margin-right: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.333333333333336%;
  }
  :root[dir=rtl] .offset-sm-7 {
    margin-right: 58.333333333333336%;
  }
  .offset-sm-8 {
    margin-left: 66.66666666666666%;
  }
  :root[dir=rtl] .offset-sm-8 {
    margin-right: 66.66666666666666%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  :root[dir=rtl] .offset-sm-9 {
    margin-right: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333333334%;
  }
  :root[dir=rtl] .offset-sm-10 {
    margin-right: 83.33333333333334%;
  }
  .offset-sm-11 {
    margin-left: 91.66666666666666%;
  }
  :root[dir=rtl] .offset-sm-11 {
    margin-right: 91.66666666666666%;
  }
  .offset-sm-12 {
    margin-left: 100%;
  }
  :root[dir=rtl] .offset-sm-12 {
    margin-right: 100%;
  }
  .order-sm-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-sm-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-sm-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-sm-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-sm-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-sm-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-sm-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-sm-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-sm-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-sm-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-sm-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-sm-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-sm-12 {
    -ms-flex-order: 12;
    order: 12;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
  .col {
    flex-basis: 0;
    -ms-box-flex: 1;
    box-flex: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-md-auto {
    box-flex: 1;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-md {
    flex-basis: 0;
    -ms-box-flex: 1;
    box-flex: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-md-1 {
    box-flex: 1;
    -ms-flex: 0 0 8.333333333333332%;
    flex: 0 0 8.333333333333332%;
    max-width: 8.333333333333332%;
  }
  .col-md-2 {
    box-flex: 1;
    -ms-flex: 0 0 16.666666666666664%;
    flex: 0 0 16.666666666666664%;
    max-width: 16.666666666666664%;
  }
  .col-md-3 {
    box-flex: 1;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    box-flex: 1;
    -ms-flex: 0 0 33.33333333333333%;
    flex: 0 0 33.33333333333333%;
    max-width: 33.33333333333333%;
  }
  .col-md-5 {
    box-flex: 1;
    -ms-flex: 0 0 41.66666666666667%;
    flex: 0 0 41.66666666666667%;
    max-width: 41.66666666666667%;
  }
  .col-md-6 {
    box-flex: 1;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    box-flex: 1;
    -ms-flex: 0 0 58.333333333333336%;
    flex: 0 0 58.333333333333336%;
    max-width: 58.333333333333336%;
  }
  .col-md-8 {
    box-flex: 1;
    -ms-flex: 0 0 66.66666666666666%;
    flex: 0 0 66.66666666666666%;
    max-width: 66.66666666666666%;
  }
  .col-md-9 {
    box-flex: 1;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    box-flex: 1;
    -ms-flex: 0 0 83.33333333333334%;
    flex: 0 0 83.33333333333334%;
    max-width: 83.33333333333334%;
  }
  .col-md-11 {
    box-flex: 1;
    -ms-flex: 0 0 91.66666666666666%;
    flex: 0 0 91.66666666666666%;
    max-width: 91.66666666666666%;
  }
  .col-md-12 {
    box-flex: 1;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .offset-md-1 {
    margin-left: 8.333333333333332%;
  }
  :root[dir=rtl] .offset-md-1 {
    margin-right: 8.333333333333332%;
  }
  .offset-md-2 {
    margin-left: 16.666666666666664%;
  }
  :root[dir=rtl] .offset-md-2 {
    margin-right: 16.666666666666664%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  :root[dir=rtl] .offset-md-3 {
    margin-right: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333333333%;
  }
  :root[dir=rtl] .offset-md-4 {
    margin-right: 33.33333333333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666666666667%;
  }
  :root[dir=rtl] .offset-md-5 {
    margin-right: 41.66666666666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  :root[dir=rtl] .offset-md-6 {
    margin-right: 50%;
  }
  .offset-md-7 {
    margin-left: 58.333333333333336%;
  }
  :root[dir=rtl] .offset-md-7 {
    margin-right: 58.333333333333336%;
  }
  .offset-md-8 {
    margin-left: 66.66666666666666%;
  }
  :root[dir=rtl] .offset-md-8 {
    margin-right: 66.66666666666666%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  :root[dir=rtl] .offset-md-9 {
    margin-right: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333333334%;
  }
  :root[dir=rtl] .offset-md-10 {
    margin-right: 83.33333333333334%;
  }
  .offset-md-11 {
    margin-left: 91.66666666666666%;
  }
  :root[dir=rtl] .offset-md-11 {
    margin-right: 91.66666666666666%;
  }
  .offset-md-12 {
    margin-left: 100%;
  }
  :root[dir=rtl] .offset-md-12 {
    margin-right: 100%;
  }
  .order-md-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-md-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-md-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-md-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-md-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-md-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-md-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-md-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-md-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-md-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-md-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-md-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-md-12 {
    -ms-flex-order: 12;
    order: 12;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
  .col {
    flex-basis: 0;
    -ms-box-flex: 1;
    box-flex: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-auto {
    box-flex: 1;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-lg {
    flex-basis: 0;
    -ms-box-flex: 1;
    box-flex: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-1 {
    box-flex: 1;
    -ms-flex: 0 0 8.333333333333332%;
    flex: 0 0 8.333333333333332%;
    max-width: 8.333333333333332%;
  }
  .col-lg-2 {
    box-flex: 1;
    -ms-flex: 0 0 16.666666666666664%;
    flex: 0 0 16.666666666666664%;
    max-width: 16.666666666666664%;
  }
  .col-lg-3 {
    box-flex: 1;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    box-flex: 1;
    -ms-flex: 0 0 33.33333333333333%;
    flex: 0 0 33.33333333333333%;
    max-width: 33.33333333333333%;
  }
  .col-lg-5 {
    box-flex: 1;
    -ms-flex: 0 0 41.66666666666667%;
    flex: 0 0 41.66666666666667%;
    max-width: 41.66666666666667%;
  }
  .col-lg-6 {
    box-flex: 1;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    box-flex: 1;
    -ms-flex: 0 0 58.333333333333336%;
    flex: 0 0 58.333333333333336%;
    max-width: 58.333333333333336%;
  }
  .col-lg-8 {
    box-flex: 1;
    -ms-flex: 0 0 66.66666666666666%;
    flex: 0 0 66.66666666666666%;
    max-width: 66.66666666666666%;
  }
  .col-lg-9 {
    box-flex: 1;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    box-flex: 1;
    -ms-flex: 0 0 83.33333333333334%;
    flex: 0 0 83.33333333333334%;
    max-width: 83.33333333333334%;
  }
  .col-lg-11 {
    box-flex: 1;
    -ms-flex: 0 0 91.66666666666666%;
    flex: 0 0 91.66666666666666%;
    max-width: 91.66666666666666%;
  }
  .col-lg-12 {
    box-flex: 1;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .offset-lg-1 {
    margin-left: 8.333333333333332%;
  }
  :root[dir=rtl] .offset-lg-1 {
    margin-right: 8.333333333333332%;
  }
  .offset-lg-2 {
    margin-left: 16.666666666666664%;
  }
  :root[dir=rtl] .offset-lg-2 {
    margin-right: 16.666666666666664%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  :root[dir=rtl] .offset-lg-3 {
    margin-right: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333333333%;
  }
  :root[dir=rtl] .offset-lg-4 {
    margin-right: 33.33333333333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666666666667%;
  }
  :root[dir=rtl] .offset-lg-5 {
    margin-right: 41.66666666666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  :root[dir=rtl] .offset-lg-6 {
    margin-right: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.333333333333336%;
  }
  :root[dir=rtl] .offset-lg-7 {
    margin-right: 58.333333333333336%;
  }
  .offset-lg-8 {
    margin-left: 66.66666666666666%;
  }
  :root[dir=rtl] .offset-lg-8 {
    margin-right: 66.66666666666666%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  :root[dir=rtl] .offset-lg-9 {
    margin-right: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333333334%;
  }
  :root[dir=rtl] .offset-lg-10 {
    margin-right: 83.33333333333334%;
  }
  .offset-lg-11 {
    margin-left: 91.66666666666666%;
  }
  :root[dir=rtl] .offset-lg-11 {
    margin-right: 91.66666666666666%;
  }
  .offset-lg-12 {
    margin-left: 100%;
  }
  :root[dir=rtl] .offset-lg-12 {
    margin-right: 100%;
  }
  .order-lg-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-lg-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-lg-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-lg-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-lg-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-lg-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-lg-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-lg-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-lg-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-lg-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-lg-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-lg-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-lg-12 {
    -ms-flex-order: 12;
    order: 12;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1100px;
  }
  .col {
    flex-basis: 0;
    -ms-box-flex: 1;
    box-flex: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-xl-auto {
    box-flex: 1;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-xl {
    flex-basis: 0;
    -ms-box-flex: 1;
    box-flex: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-xl-1 {
    box-flex: 1;
    -ms-flex: 0 0 8.333333333333332%;
    flex: 0 0 8.333333333333332%;
    max-width: 8.333333333333332%;
  }
  .col-xl-2 {
    box-flex: 1;
    -ms-flex: 0 0 16.666666666666664%;
    flex: 0 0 16.666666666666664%;
    max-width: 16.666666666666664%;
  }
  .col-xl-3 {
    box-flex: 1;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    box-flex: 1;
    -ms-flex: 0 0 33.33333333333333%;
    flex: 0 0 33.33333333333333%;
    max-width: 33.33333333333333%;
  }
  .col-xl-5 {
    box-flex: 1;
    -ms-flex: 0 0 41.66666666666667%;
    flex: 0 0 41.66666666666667%;
    max-width: 41.66666666666667%;
  }
  .col-xl-6 {
    box-flex: 1;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    box-flex: 1;
    -ms-flex: 0 0 58.333333333333336%;
    flex: 0 0 58.333333333333336%;
    max-width: 58.333333333333336%;
  }
  .col-xl-8 {
    box-flex: 1;
    -ms-flex: 0 0 66.66666666666666%;
    flex: 0 0 66.66666666666666%;
    max-width: 66.66666666666666%;
  }
  .col-xl-9 {
    box-flex: 1;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    box-flex: 1;
    -ms-flex: 0 0 83.33333333333334%;
    flex: 0 0 83.33333333333334%;
    max-width: 83.33333333333334%;
  }
  .col-xl-11 {
    box-flex: 1;
    -ms-flex: 0 0 91.66666666666666%;
    flex: 0 0 91.66666666666666%;
    max-width: 91.66666666666666%;
  }
  .col-xl-12 {
    box-flex: 1;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .offset-xl-1 {
    margin-left: 8.333333333333332%;
  }
  :root[dir=rtl] .offset-xl-1 {
    margin-right: 8.333333333333332%;
  }
  .offset-xl-2 {
    margin-left: 16.666666666666664%;
  }
  :root[dir=rtl] .offset-xl-2 {
    margin-right: 16.666666666666664%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  :root[dir=rtl] .offset-xl-3 {
    margin-right: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333333333333%;
  }
  :root[dir=rtl] .offset-xl-4 {
    margin-right: 33.33333333333333%;
  }
  .offset-xl-5 {
    margin-left: 41.66666666666667%;
  }
  :root[dir=rtl] .offset-xl-5 {
    margin-right: 41.66666666666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  :root[dir=rtl] .offset-xl-6 {
    margin-right: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.333333333333336%;
  }
  :root[dir=rtl] .offset-xl-7 {
    margin-right: 58.333333333333336%;
  }
  .offset-xl-8 {
    margin-left: 66.66666666666666%;
  }
  :root[dir=rtl] .offset-xl-8 {
    margin-right: 66.66666666666666%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  :root[dir=rtl] .offset-xl-9 {
    margin-right: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333333333334%;
  }
  :root[dir=rtl] .offset-xl-10 {
    margin-right: 83.33333333333334%;
  }
  .offset-xl-11 {
    margin-left: 91.66666666666666%;
  }
  :root[dir=rtl] .offset-xl-11 {
    margin-right: 91.66666666666666%;
  }
  .offset-xl-12 {
    margin-left: 100%;
  }
  :root[dir=rtl] .offset-xl-12 {
    margin-right: 100%;
  }
  .order-xl-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-xl-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-xl-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-xl-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-xl-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-xl-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-xl-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-xl-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-xl-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-xl-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-xl-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-xl-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-xl-12 {
    -ms-flex-order: 12;
    order: 12;
  }
}
.visible-xs,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-xs-table,
.visible-xs-table-row,
.visible-xs-table-cell,
.visible-xs-flex,
.visible-xs-inline-flex {
  display: none !important;
}
.visible-sm,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-sm-table,
.visible-sm-table-row,
.visible-sm-table-cell,
.visible-sm-flex,
.visible-sm-inline-flex {
  display: none !important;
}
.visible-md,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-md-table,
.visible-md-table-row,
.visible-md-table-cell,
.visible-md-flex,
.visible-md-inline-flex {
  display: none !important;
}
.visible-lg,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block,
.visible-lg-table,
.visible-lg-table-row,
.visible-lg-table-cell,
.visible-lg-flex,
.visible-lg-inline-flex {
  display: none !important;
}
.visible-xl,
.visible-xl-block,
.visible-xl-inline,
.visible-xl-inline-block,
.visible-xl-table,
.visible-xl-table-row,
.visible-xl-table-cell,
.visible-xl-flex,
.visible-xl-inline-flex {
  display: none !important;
}
@media (max-width: 575px) {
  .visible-xs {
    display: block !important;
  }
  .visible-xs-inline {
    display: inline !important;
  }
  .visible-xs-inline-block {
    display: inline-block !important;
  }
  .visible-xs-flex {
    display: -ms-flexbox !important;
    display: box !important;
    display: flex !important;
  }
  .visible-xs-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-box !important;
    display: inline-flex !important;
  }
  table.visible-xs,
  .visible-xs-table {
    display: table !important;
  }
  tr.visible-xs,
  .visible-xs-table-row {
    display: table-row !important;
  }
  td.visible-xs,
  th.visible-xs,
  .visible-xs-table-cell {
    display: table-cell !important;
  }
  .hidden-xs {
    display: none !important;
  }
  #my-welcome-message {
    width: 80%;
    left: 10%;
    height: auto;
    top: calc( 50% - 170px );
  }
  #my-welcome-message .social_links {
    grid: auto / auto;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .visible-sm {
    display: block !important;
  }
  .visible-sm-inline {
    display: inline !important;
  }
  .visible-sm-inline-block {
    display: inline-block !important;
  }
  .visible-sm-flex {
    display: -ms-flexbox !important;
    display: box !important;
    display: flex !important;
  }
  .visible-sm-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-box !important;
    display: inline-flex !important;
  }
  table.visible-sm,
  .visible-sm-table {
    display: table !important;
  }
  tr.visible-sm,
  .visible-sm-table-row {
    display: table-row !important;
  }
  td.visible-sm,
  th.visible-sm,
  .visible-sm-table-cell {
    display: table-cell !important;
  }
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-md {
    display: block !important;
  }
  .visible-md-inline {
    display: inline !important;
  }
  .visible-md-inline-block {
    display: inline-block !important;
  }
  .visible-md-flex {
    display: -ms-flexbox !important;
    display: box !important;
    display: flex !important;
  }
  .visible-md-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-box !important;
    display: inline-flex !important;
  }
  table.visible-md,
  .visible-md-table {
    display: table !important;
  }
  tr.visible-md,
  .visible-md-table-row {
    display: table-row !important;
  }
  td.visible-md,
  th.visible-md,
  .visible-md-table-cell {
    display: table-cell !important;
  }
  .hidden-md {
    display: none !important;
  }
  .footer .footer-main .footer-service ul {
    grid: auto / auto !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-lg {
    display: block !important;
  }
  .visible-lg-inline {
    display: inline !important;
  }
  .visible-lg-inline-block {
    display: inline-block !important;
  }
  .visible-lg-flex {
    display: -ms-flexbox !important;
    display: box !important;
    display: flex !important;
  }
  .visible-lg-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-box !important;
    display: inline-flex !important;
  }
  table.visible-lg,
  .visible-lg-table {
    display: table !important;
  }
  tr.visible-lg,
  .visible-lg-table-row {
    display: table-row !important;
  }
  td.visible-lg,
  th.visible-lg,
  .visible-lg-table-cell {
    display: table-cell !important;
  }
  .hidden-lg {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .visible-xl {
    display: block !important;
  }
  .visible-xl-inline {
    display: inline !important;
  }
  .visible-xl-inline-block {
    display: inline-block !important;
  }
  .visible-xl-flex {
    display: -ms-flexbox !important;
    display: box !important;
    display: flex !important;
  }
  .visible-xl-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-box !important;
    display: inline-flex !important;
  }
  table.visible-xl,
  .visible-xl-table {
    display: table !important;
  }
  tr.visible-xl,
  .visible-xl-table-row {
    display: table-row !important;
  }
  td.visible-xl,
  th.visible-xl,
  .visible-xl-table-cell {
    display: table-cell !important;
  }
  .hidden-xl {
    display: none !important;
  }
}
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
  margin: 0;
}
@-ms-viewport {
  width: device-width;
}
* {
  margin: 0;
  padding: 0;
  outline: 0;
  -webkit-overflow-scrolling: touch;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
article,
details,
section,
summary,
aside,
main,
menu,
nav,
figcaption,
figure,
footer,
header,
hgroup {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
[hidden],
template {
  display: none;
}
abbr[title] {
  border-bottom: 1px dotted;
}
dfn {
  font-style: italic;
}
mark {
  background: #ff0;
  color: #000;
}
b,
strong {
  font-weight: bold;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img,
video {
  border: 0;
  max-width: 100%;
  height: auto;
}
img {
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}
svg:not(:root) {
  overflow: hidden;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type='button'],
input[type='reset'],
input[type='submit'] {
  cursor: pointer;
  -webkit-appearance: button;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
input[type='search'] {
  -webkit-appearance: textfield;
}
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
figure {
  margin: 1em 40px;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
h1 a,
h2 a,
h3 a,
.title a,
.entry-title a {
  color: inherit;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
summary {
  display: list-item;
}
output {
  display: inline-block;
}
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}
code {
  padding: 2px 4px;
  color: #c7254e;
  background-color: #f9f2f4;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin: 2px;
  padding: 2px 4px;
  white-space: nowrap;
  direction: ltr;
  text-align: left;
  font-family: 'koohinoor';
}
pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #777;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #fbfbfb;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  tab-size: 4;
}
pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
  border-radius: 0;
}
li a {
  color: inherit;
}
.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.invisible {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  visibility: hidden;
}
.visible {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  visibility: visible;
}
.hide,
.hidden {
  display: none;
}
.force-hide {
  display: none !important;
}
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.m-center {
  margin-left: auto;
  margin-right: auto;
}
.middle {
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.all-middle {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.horizental-center {
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.vertical-center {
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.self-center {
  align-self: center;
  -ms-flex-item-align: center;
}
.ltr {
  direction: ltr;
}
.rtl {
  direction: rtl;
}
.go-right {
  float: right;
}
.go-left {
  float: left;
}
.circle {
  display: inline-block;
  border-radius: 100%;
}
.grayscale {
  filter: #808080;
  filter: grayscale(1);
}
.ungrayscale {
  filter: none;
}
.flip-h {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.flip-v {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}
.in-height p {
  line-height: inherit;
}
.hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}
.no-p {
  padding: 0px;
}
.says,
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.sbs-media {
  display: -ms-flexbox;
  display: box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
}
.sbs-media .sbs-content {
  box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-right: 1em;
  min-width: 0px;
}
.abs-fill {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
html {
  font-family: 'koohinoor', tahoma, 'Open sans', sans-serif;
  font-size: 13px;
}
body {
  margin: 0;
  font-family: 13px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  background: #fff;
  color: #1e1e1e;
  direction: ltr;
}
@font-face {
  font-family: koohinoor;
  src: url('../fonts/koohinoor-book.woff') format('woff');
  font-weight: normal;
}
@font-face {
  font-family: koohinoor;
  src: url('../fonts/koohinoor-bold.woff') format('woff');
  font-weight: bold;
}
svg.icon {
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  width: 1em;
  height: 1em;
  -ms-transition: 200ms all ease-in-out;
  transition: 200ms all ease-in-out;
}
svg.icon path {
  -ms-transition: inherit;
  transition: inherit;
}
::selection {
  background: #153c66;
  color: #fff;
}
::-moz-selection {
  background: #153c66;
  color: #fff;
}
/* Scroll Bar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f7f7f7; 
}
::-webkit-scrollbar-thumb {
  background: #262f36; 
}
::-webkit-scrollbar-thumb:hover {
  background: #262f36; 
}
html {
  font-size: 13px;
  min-height: 100%;
}
body {
  font-family: 'koohinoor', tahoma, 'Open sans', sans-serif;
  font-size: 13px;
  background: #fff;
  color: #1e1e1e;
  direction: rtl;
  text-align: right;
  font-weight: 300;
}
a,
ins {
  text-decoration: none;
}
img {
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
.typography,
.post-content {
  font: 400 14px/2.2 'koohinoor', tahoma, 'Open sans', sans-serif;
  color: #364c4b;
  text-align: justify;
  padding-top: 35px;
  padding-bottom: 35px;
  cursor: default;
}
.typography p,
.post-content p {
  line-height: inherit;
margin-bottom: 10px;}
.typography p:last-child,
.post-content p:last-child {
  margin-bottom: 0;
}
.typography .row,
.post-content .row {
  margin-bottom: 25px;
}
.typography a,
.post-content a {
  color: #e51c37;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #f9f2f4;
}
.typography a:hover,
.post-content a:hover {
  text-decoration-color: #e51c37;
}
.typography a.gray,
.post-content a.gray {
  color: #8a8a8a;
  font-style: italic;
}
.typography img.aligncenter,
.post-content img.aligncenter {
  display: block;
  margin: 0 auto 20px;
}
.typography img.alignright,
.post-content img.alignright {
  margin-left: 1em;
  float: right;
}
.typography img.alignleft,
.post-content img.alignleft {
  margin-right: 1em;
  float: left;
}
.typography img.alignleft + p + p,
.post-content img.alignleft + p + p,
.typography img.alignright + p + p,
.post-content img.alignright + p + p {
  clear: both;
}
.typography hr,
.post-content hr {
  outline: none;
  border: 0;
  border-top: 1px solid #eee;
  margin-bottom: 25px;
}
.typography h1,
.post-content h1,
.typography h2,
.post-content h2,
.typography h3,
.post-content h3,
.typography h4,
.post-content h4,
.typography h5,
.post-content h5,
.typography h6,
.post-content h6 {
  font-weight: 700;
  color: #153c66;
  font-family: 'koohinoor';
margin-bottom: 10px;}
.typography h1,
.post-content h1 {
  font-size: 18px;
}
.typography h2,
.post-content h2 {
  font-size: 16px;
}
.typography h3,
.post-content h3 {
  font-size: 15px;
}
.typography h4,
.post-content h4,
.typography h5,
.post-content h5,
.typography h6,
.post-content h6 {
  font-size: 14px;
}
.typography ol,
.post-content ol,
.typography ul,
.post-content ul {
  list-style: none;
  color: #646464;
  font-size: 13px;
}
.typography ol ul,
.post-content ol ul,
.typography ul ul,
.post-content ul ul,
.typography ol ol,
.post-content ol ol,
.typography ul ol,
.post-content ul ol {
  padding-left: 20px;
}
html[dir="rtl"] .typography ol ul,
html[dir="rtl"] .post-content ol ul,
html[dir="rtl"] .typography ul ul,
html[dir="rtl"] .post-content ul ul,
html[dir="rtl"] .typography ol ol,
html[dir="rtl"] .post-content ol ol,
html[dir="rtl"] .typography ul ol,
html[dir="rtl"] .post-content ul ol,
body.rtl .typography ol ul,
body.rtl .post-content ol ul,
body.rtl .typography ul ul,
body.rtl .post-content ul ul,
body.rtl .typography ol ol,
body.rtl .post-content ol ol,
body.rtl .typography ul ol,
body.rtl .post-content ul ol {
  padding: 0 50px 0;
}
.typography ol,
.post-content ol {
  counter-reset: item;
}
.typography ol li:before,
.post-content ol li:before {
  content: counter(item) ". ";
  counter-increment: item;
  display: inline-block;
  margin-left: 15px;
}
.typography ul li,
.post-content ul li {
  position: relative;
  padding-right: 20px;
}
.typography ul li:before,
.post-content ul li:before {
  content: '\00BB';
  display: inline-block;
  color: #a9a9a9;
  vertical-align: middle;
  margin-left: 15px;
  position: absolute;
  top: -2px;
  right: 0;
  font-size: 15px;
}
.typography ins,
.post-content ins {
  background-color: #fff8dc;
  color: #8f7200;
  padding: 0 3px;
}
.typography strong,
.post-content strong {
  font-weight: 700;
}
.typography em,
.post-content em {
  font-style: italic;
}
.typography pre,
.post-content pre {
  direction: ltr;
  font-family: 'koohinoor';
}
.typography blockquote,
.post-content blockquote {
  quotes: none;
  line-height: 27px;
  font-size: 14px;
  padding: 15px 45px;
  background-color: #fbfbfb;
  color: #6b7074;
  position: relative;
  border: 1px solid rgba(31,31,31,0.05);
  border-radius: 4px;
}
.typography blockquote:before,
.post-content blockquote:before {
  top:10px;
  right:10px;
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -o-transform:rotate(180deg); 
  transform:rotate(180deg); 
}
.typography blockquote:after,
.post-content blockquote:after,
.typography blockquote:before,
.post-content blockquote:before {
  content: '';
  background: url(../images/icons/quotation-mark.svg) no-repeat;
  width: 24px;
  height: 24px;
  background-size: 24px 24px;
  position: absolute;
}
.typography blockquote:after,
.post-content blockquote:after {
  bottom:10px;
  left:10px
}
.typography blockquote h1,
.post-content blockquote h1,
.typography blockquote h2,
.post-content blockquote h2,
.typography blockquote h3,
.post-content blockquote h3,
.typography blockquote h4,
.post-content blockquote h4,
.typography blockquote h5,
.post-content blockquote h5,
.typography blockquote h6,
.post-content blockquote h6 {
  color: #ff6430;
  font-size: 1.076923076923077rem;
  font-weight: 700;
  font-style: normal;
}
.typography blockquote p,
.post-content blockquote p {
  margin: 0;
}
.typography > *:last-child,
.post-content > *:last-child {
  margin-bottom: 0px;
}
.typography .wp-caption,
.post-content .wp-caption {
  margin: 0 auto;
  max-width: 75%;
  text-align: center;
  font-size: 13px;
  padding: 5px;
  background-color: #fbfbfb;
  color: #6b7074;
  position: relative;
  border: 1px solid rgba(31,31,31,0.05);
  border-radius: 4px;
  font-family: koohinoor;
}
.typography figure,
.post-content figure {
  margin: 0 0 20px;
  max-width: 100%;
}
.typography figure.aligncenter,
.post-content figure.aligncenter {
  margin: 0 auto 20px;
  text-align: center;
}
.typography figure.aligncenter img,
.post-content figure.aligncenter img {
  display: inline-block;
}
.typography figure.alignright,
.post-content figure.alignright {
  float: right;
  margin-left: 1em;
}
.typography figure.alignleft,
.post-content figure.alignleft {
  float: left;
  margin-right: 1em;
}
.typography figure.alignnone,
.post-content figure.alignnone {
  width: auto !important;
  margin: 0 -20px 20px;
  max-width: none;
}
.typography figure .wp-caption-text,
.post-content figure .wp-caption-text {
  color: #aaa;
}
.typography img.full-size,
.post-content img.full-size {
  width: 100%;
  height: auto;
}
.typography .accordion .accordion-title,
.post-content .accordion .accordion-title {
  background-color: #60c339;
  padding: 5px 12px;
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  display: table;
  cursor: pointer;
}
.typography .accordion .accordion-content,
.post-content .accordion .accordion-content {
  margin-bottom: 27px;
  text-align: justify;
}
.typography .trailer-vid,
.post-content .trailer-vid {
  margin-bottom: 20px;
}
div.wpcf7 .ajax-loader {
  position: absolute;
}

/* SPONSOR */
#sponsor {
  text-align: center;
}
#sponsor .native-fixed {
  padding: 10px;
  font-weight: 400;
}
#sponsor .native-fixed .native-sponsor {
  font-size: 11px;
  border-radius: 2px;
  margin-left: 1em;
  line-height: 1;
  padding: 4px 10px 5px;
  font-weight: 400;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  vertical-align: -1px;
}

/* Header */
.site-header {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  color: #000;
  font-size: 13px;
  font-weight: 400;
  position: relative;
  z-index: 99;
}
.site-header .site-header-nav {
  border-bottom: 1px solid #efeeee;
  padding: 20px 0;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 100%;
  -ms-flex-align: end;
  align-items: flex-end;
  font-size: 12px;
}
.site-header .site-header-nav .header-menu ul {
  display: -ms-flexbox;
  display: box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.site-header .site-header-nav .header-menu ul li {
  margin-left: 12px;
  padding-left: 12px;
  position: relative;
  font-weight: 300;
}
.site-header .site-header-nav .header-menu ul li:after {
  content: '';
  height: 14px;
  width: 1px;
  position: absolute;
  left: -1px;
  top: 3px;
  background: #efeeee;
}
.site-header .site-header-nav .header-menu ul li:last-of-type {
  padding-left: 0;
  margin-left: 0;
}
.site-header .site-header-nav .header-menu ul li:last-of-type:after {
  display: none;
}
.site-header .site-header-nav .header-contact {
  font-family: koohinoor;
  font-size: 14px;
  display: flex;
  flex-direction: row-reverse;
  line-height: 1.5;
}
.site-header .site-header-nav .header-contact a {
  font-weight: 500;
  margin-right: 5px;
  padding-right: 5px;
  color: #1e1e1e;
}
.site-header .site-header-stick {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header .site-header-main {
  position: relative;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  grid-column: 20px;
  padding: 0;
  z-index: 99;
}
.site-header .site-header-main .logo {
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  margin-left: 5px;
}
.site-header .site-header-main .logo img {
  width: 70px;
  
}
.site-header .site-header-main .logo strong {
  display: block;
  color: #153c66;
  font: bold 14px/16px koohinoor;
  padding-top: 5px;
}
.site-header .site-header-main .logo strong small {
  font-weight: 500;
}
.site-header .site-header-main .logo span {
  color: #1e1e1e;
  font-size: 12px;
}
.site-header .site-header-main .header-main-menu {
  flex: 1 1 auto;
  display: flex;
  margin: 0 auto;
  position: relative;;
  align-items: center;
  -webkit-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  height: 70px;
}
.site-header .site-header-main .header-main-menu > ul {
  display: flex;
  width: 100%;
}
.site-header .site-header-main .header-main-menu > ul > li {
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  z-index: 1;
}
.site-header .site-header-main .header-main-menu > ul > li > a,
.site-header .site-header-main .header-main-menu > ul > li > span {
  padding: 10px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  font-weight: 300;
}
.site-header .site-header-main .header-main-menu > ul > li > i {
  display: flex;
  margin-left: 5px;
}
.site-header .site-header-main .header-main-menu > ul > li > i svg {
  width: 16px;
  height: 16px;
  fill: rgba(0,0,0,.7) !important;
}
.site-header .site-header-main .header-main-menu .mega_menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 999;
  width: calc( 100% + 167px );
  display: flex;
  align-items: stretch;
  visibility: hidden;
  opacity: 0;
  box-shadow: rgba(21, 60, 102, 0.018) 0px 10px 10px;
  background: rgba(255,255,255,0.95);
}
.site-header .site-header-main .header-main-menu .mega_menu:before {
  content: '';
  width: 100%;
  height: 15px;
  bottom: 100%;
  right: 0;
  position: absolute;
}
.site-header .site-header-main .header-main-menu > ul > li:hover .mega_menu {
  visibility: visible;
  opacity: 1;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_links {
  flex-grow: 1;
  padding: 15px 30px 30px;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_links p {
  font: 400 12px koohinoor;
  color: #999;
  margin-bottom: 15px;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_links .mega_menu_sul {
  display: flex;
  align-items: stretch;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_links .mega_menu_sul .mega_menu_sub {
  flex-grow: 1;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_links .mega_menu_sul .mega_menu_sub > ul > li {
  line-height: 2.5;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_links .mega_menu_sul .mega_menu_sub > ul li:hover > a {
  color: #153c66;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_links .mega_menu_sul .mega_menu_sub > ul > li span {
  font: 400 11px koohinoor;
  color: #999;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_links .mega_menu_sul .mega_menu_sub > ul > li i {
  vertical-align: middle;
  margin-left: 5px;
  opacity: 0.15;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_links .mega_menu_sul .mega_menu_sub > ul > li > ul {
  padding-right: 10px;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_links .mega_menu_sul .mega_menu_sub > ul > li > ul > li {
  color: #6e6e6e;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 300;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_contact {
  flex-basis: 300px;
  background: rgba(21, 60, 102, 0.05);
  padding: 15px;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_contact .mega_menu_contact_socials {
  display: flex;
  align-items: center;
  margin-bottom: 69px;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_contact .mega_menu_contact_socials span {
  flex-grow: 1;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_contact .mega_menu_contact_socials a {
  border: 1px solid rgba(21, 60, 102, 0.1);
  line-height: 6px;
  padding: 5px;
  margin-right: 5px;
  border-radius: 4px;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_contact .mega_menu_contact_socials a:last-of-type:hover {
  background: #039be5;
  border-color: #039be5;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_contact .mega_menu_contact_socials a:nth-last-of-type(2):hover {
  background: #00cc71;
  border-color: #00cc71;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_contact .mega_menu_contact_socials svg {
  width: 20px;
  fill: #1e1e1e;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_contact .mega_menu_contact_socials a:hover svg {
  fill: #fff;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_contact .mega_menu_contact_links a {
  font: 500 13px/35px koohinoor;
  padding: 0 0 2px;
  height: 35px;
  border-radius: 50px;
  display: inline-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  background: rgba(21, 60, 102, 0.085);
  color: #153c66;
  width: 100%;
  letter-spacing: -0.5px;
  margin-top: 10px;
}
.site-header .site-header-main .header-main-menu .mega_menu .mega_menu_contact .mega_menu_contact_links a:hover {
  background: #e51c37;
  color: #fff;
}
.site-header .site-header-main .btn-account {
  font: 500 13px/35px koohinoor;
  padding: 0 25px 2px;
  height: 35px;
  border-radius: 50px;
  display: inline-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  cursor: pointer;
  border: 0 !important;
  margin-right: auto;
  margin-left: 20px;
  background: #e51c37;
  color: #fff;
}
.site-header .site-header-main .header-searchbox {
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

/* Slider */
#slider-main {
  
}
#slider-main .container {
  position: relative;
}
#slider-main .pagination {
  padding: 25px;
  width: 50%;
  background: #153c66;
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  min-height: 120px;
  z-index: 9;
}
#slider-main .pagination:before {
  width: calc((100vw - 1100px) / 2);
  right: calc(((100vw - 1100px) / 2) * -1);
  top: 0;
  content: '';
  background: #153c66;
  position: absolute;
  bottom: 0;
}
#slider-main .swiper-container {
  width: 100%;
  height: 100%;
}
#slider-main .swiper-slide {
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#slider-main .swiper-button-next,
#slider-main .swiper-button-prev {
  width: 24px;
  left: 10px;
}
#slider-main .swiper-button-prev {
  left: 32px;
  right: auto;
}
#slider-main .swiper-button-next svg,
#slider-main .swiper-button-prev svg {
  fill: #fff;
}
#slider-main .swiper-button-next:after,
#slider-main .swiper-button-prev:after {
  display: none;
}
#slider-main .pagination .swiper-slide {
  flex-direction: column;
  text-align: right;
}
#slider-main .pagination .swiper-slide h1,
#slider-main .pagination .swiper-slide h2 {
  font: 500 15px/2 koohinoor;
  width: 100%;
}
#slider-main .pagination .swiper-slide span {
  font: 400 13px/1.8 koohinoor;
  width: 100%;
}

/* Service */
#service {
  background: #f7f7f7;
  padding-top: 50px;
  padding-bottom: 50px;
}
#service .container {
  padding: 0;
}
#service .service-item {
  display: grid;
  grid: auto / auto auto auto auto;
  width: 100%;
  opacity: 0.85;
}
#service .service-item li {
  opacity: 0.85;
}
#service .service-item li:hover {
  opacity: 1;
}
#service .service-item li i {
  float: right;
  margin-left: 20px;
}
#service .service-item li h2 {
  font: 500 16px/1.5em koohinoor;
}
#service .service-item li span {
  opacity: .7;
  font: 300 13px/1em koohinoor;
}

/* Description */
.description {
  padding: 75px 16%;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.description h2 {
  font: bold 15px/2 koohinoor;
  margin-bottom: 30px;
}
.description p {
  margin-bottom: 15px;
}
.description .description-links {
  margin-top: 30px;
}
.description .description-links a {
  background: #153c66;
  font: 500 13px/35px koohinoor;
  padding: 0 25px 2px;
  height: 35px;
  border-radius: 50px;
  display: inline-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  cursor: pointer;
  border: 0 !important;
  margin-right: 5px;
  margin-left: 5px;
  color: #fff;
}
.description img {
  filter: grayscale(100%);
  opacity: 0.35;
  margin-top: 30px;
  margin-bottom: 20px;
}
.description img:hover {
  filter: none;
  opacity: 0.5;
}


.descherman img{
  filter: grayscale(0%) !important;
  opacity: 1 !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.descriptionpage {
  padding: 20px 5%;
  display: flex;
  flex-direction: column;
  text-align: right;
}

.descriptionpage h2,.descriptionpage h3,.descriptionpage h4 {
  font: bold 16px/2 koohinoor;
  margin-bottom: 6px;
color: #153c66;}
.descriptionpage strong{
  font: bold 14px/2 koohinoor;
  margin-bottom: 6px;

}
.descriptionpage h2.title{
  
text-align: center;font-size: 20px;}
.descriptionpage p {
  margin-bottom: 15px;
font: 400 14px/2.2 'koohinoor', tahoma, 'Open sans', sans-serif;color: #364c4b;}
.descriptionpage li{
   margin-bottom: 15px;
font: 400 14px/2.2 'koohinoor', tahoma, 'Open sans', sans-serif;
}
.descriptionpage .description-links {
  margin-top: 30px;
}
.descriptionpage .description-links a {
  background: #153c66;
  font: 500 13px/35px koohinoor;
  padding: 0 25px 2px;
  height: 35px;
  border-radius: 50px;
  display: inline-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  cursor: pointer;
  border: 0 !important;
  margin-right: 5px;
  margin-left: 5px;
  color: #fff;
}
.descriptionpage img {
  filter: grayscale(100%);
  opacity: 0.35;
  margin-top: 30px;
  margin-bottom: 20px;
}
.descriptionpage img:hover {
  filter: none;
  opacity: 0.5;
}



/* estelam */
#estelam {
  background: #262f36;
  color: #fff;
  padding: 70px 0;
}
#estelam .container {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}
#estelam .container a {
  background: #e51c37;
  font: 500 13px/35px koohinoor;
  padding: 0 25px 2px;
  height: 35px;
  border-radius: 50px;
  display: inline-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  cursor: pointer;
  border: 0 !important;
  margin-right: 5px;
  margin-left: 5px;
  color: #fff;
  margin-right: 30px;
}
#estelam .container p {
  max-width: 360px;
}


/* estelam */
.hermaninsta {
  background: #fcf8e8;
  color: #194798;
  padding: 70px 0;
margin-bottom: 50px;}

.hermaninsta .container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  -webkit-align-items: center;
}

.hermanimg{
  

    
    
    
    width: 500px;}
.hermansec{
  
display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    flex-direction: column;
    color: #7c2d1b;
    flex-grow: 1;max-width: 460px;flex-wrap: nowrap;}

.hermansec h2{
  
margin-bottom: 10px;}
.hermansec p{
  
text-align: justify;font-size: 14px;line-height: 27px;}




/* levels orders */
#levels-order {
  background: #f7f7f7;
  padding: 75px 0;
}
#levels-order .container {
  padding: 0;
}
#levels-order .levels-order {
  text-align: center;
  display: grid;
  grid: auto / 16.6666666666% 16.6666666666% 16.6666666666% 16.6666666666% 16.6666666666% 16.6666666666%;
  width: 100%;
}
#levels-order .levels-order li {
  padding: 0 15px;
  cursor: pointer;
}
#levels-order .levels-order li i {
  display: block;
  margin: 0 auto 25px;
  opacity: 0.5;
}
#levels-order .levels-order li:hover i {
  opacity: 0.9;
}
#levels-order .levels-order li:first-of-type i {
  opacity: 1;
}
#levels-order .levels-order li span {
  font: 400 14px/1.5 koohinoor;
  color: #262f36;
}

/* Service Developmenet */
.service-developement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 75px 0;
}
.service-developement .description-box {
  padding: 0 20%;
}
.service-developement .description-box h2 {
  font: bold 17px/2 koohinoor;
  color: #795907;
  margin-bottom: 30px;
}
.service-developement-item {
  display: grid;
  grid: auto / 25% 25% 25% 25%;
  width: 100%;
  padding: 75px 0;
}
.service-developement-item li a {
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  opacity: 0.7;
}
.service-developement-item li a:hover {
  opacity: 1;
}
.service-developement-item li a h3 {
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  font: 500 14px/2 koohinoor;
  flex-direction: column;
  margin-right: 20px;
}
.service-developement .service-developement-other {
  font: 500 13px/35px koohinoor;
  padding: 0 25px 2px;
  height: 35px;
  border-radius: 50px;
  cursor: pointer;
  border: 0 !important;
  background: #795907;
  color: #fff;
  margin: 0 auto;
}

.contentsec{
  position:relative;
  overflow:hidden;
}
.contentsec2{
  position:relative;
  overflow:hidden;
margin-bottom: 30px;}
.contentsec3{
  position:relative;
  overflow:hidden;
margin-bottom: 0px;}
.contentseclogo{
  position:relative;
  overflow:hidden;
margin-bottom: 30px;}
/* Service Developmenet2 */
.service-developement2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 40px 0;
background: #dddddd38;}
.service-developement2 .description-box {
  padding: 0 20%;
}
.service-developement2 .description-box h2 {
  font: bold 14px/2 koohinoor;
  color: #795907;
  margin-bottom: 5px;
}
.service-developement-item2 {
  display: grid;
  grid: auto / 25% 25% 25% 25%;
  width: 100%;
  padding: 75px 0;
}
.service-developement-item2 li a {
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  opacity: 0.7;
}
.service-developement-item2 li a:hover {
  opacity: 1;
}
.service-developement-item2 li a h3 {
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  font: 500 14px/2 koohinoor;
  flex-direction: column;
  margin-right: 20px;
}
.service-developement2 .service-developement-other2 {
  font: 500 13px/35px koohinoor;
  padding: 0 25px 2px;
  height: 35px;
  border-radius: 50px;
  cursor: pointer;
  border: 0 !important;
  background: #795907;
  color: #fff;
  margin: 0 auto;
}
.contentp{
    
padding-left: 35px;;}

.contentp p{
    
;margin-top: 10px;text-align: justify;}

.contt{margin-bottom:0 !important;}




/* Service Developmenet3 */
.service-developement3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 40px 0;
background: #dddddd38;}
.service-developement3 .description-box {
  padding: 0 20%;
}
.service-developement3 .description-box h2 {
  font: bold 20px/2 koohinoor;
  color: #153c66;
  margin-bottom: 5px;
}
.service-developement-item3 {
  display: grid;
  grid: auto / 33% 33% 33%;
  width: 100%;
  padding: 40px 0 50px 0;
}
/* Service Developmenet3 */
.service-developement7 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 40px 0;
background: #dddddd38;}
.service-developement7 .description-box {
  padding: 0 20%;
}
.service-developement7 .description-box h2 {
  font: bold 20px/2 koohinoor;
  color: #153c66;
  margin-bottom: 5px;
}
.service-developement-item7 {
  display: grid;
  grid: auto / 33% 33% 33%;
  width: 100%;
  padding: 40px 0 50px 0;
}
.service-developement-iteminsta {
  display: grid;
  grid: auto / 50% 50%;
  width: 100%;
  padding: 40px 0 50px 0;
}
.service-developement-item3 li a {
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  opacity: 0.7;
}
.service-developement-item3 li a:hover {
  opacity: 1;
}
.service-developement-item3 li a h3 {
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  font: 500 14px/2 koohinoor;
  flex-direction: column;
  margin-right: 20px;
}
.service-developement3 .service-developement-other2 {
  font: 500 13px/35px koohinoor;
  padding: 0 25px 2px;
  height: 35px;
  border-radius: 50px;
  cursor: pointer;
  border: 0 !important;
  background: #795907;
  color: #fff;
  margin: 0 auto;
}
.contentp3{
    
padding-left: 35px;;display: flex;
    align-items: center;
    -webkit-align-items: center;
    opacity: 0.9;justify-content: center;align-content: center;flex-wrap: nowrap;flex-direction: column;}

.contentp3 i{
  opacity: 0.8;
}
.contentp3 h3{
  
color: #153c66;margin-top: 10px;}
.contentp3 p{
    
;margin-top: 10px;text-align: justify;font-size: 14px;line-height: 27px;}




/* Service Developmenet4 logo */
.service-developement4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 40px 0;
background: #dddddd38;}
.service-developement4 .description-box {
  padding: 0 20%;
}
.service-developement4 .description-box h2 {
  font: bold 20px/2 koohinoor;
  color: #795907;
  margin-bottom: 5px;
}
.service-developement-item4 {
  display: grid;
  grid: auto / 33% 33% 33%;
  width: 100%;
  padding: 40px 0 50px 0;
}
.service-developement-item4 li a {
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  opacity: 0.7;
}
.service-developement-item4 li a:hover {
  opacity: 1;
}
.service-developement-item4 li a h3 {
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  font: 500 14px/2 koohinoor;
  flex-direction: column;
  margin-right: 20px;
}
.service-developement4 .service-developement-other4 {
  font: 500 13px/35px koohinoor;
  padding: 0 25px 2px;
  height: 35px;
  border-radius: 50px;
  cursor: pointer;
  border: 0 !important;
  background: #795907;
  color: #fff;
  margin: 0 auto;
}
.contentp4{
    
padding-left: 35px;;display: flex;
    align-items: center;
    -webkit-align-items: center;
    opacity: 0.9;justify-content: center;align-content: center;flex-wrap: nowrap;flex-direction: column;}

.contentp4 i{
  opacity: 0.8;
}
.contentp4 h3{
  
color: #795907;margin-top: 10px;}
.contentp4 p{
    
;margin-top: 10px;text-align: justify;}




/* Web Support */
#web_support {
  background: #153c66;
  padding: 75px 0;
  position: relative;
  overflow: hidden;
}
#web_support .container {
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  padding: 0;
  flex-wrap: nowrap;
  z-index: 2;
  position: relative;
}
#web_support .web_support_des {
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  flex-direction: column;
  color: #fff;
  flex-grow: 1
}
#web_support .web_support_des .title {
  font: bold 15px/1.7 koohinoor;
}
#web_support .web_support_des p {
  text-align: justify;
  margin: 30px 0;
}
#web_support .web_support_des p span {
  border-bottom: 1px solid rgba(255,255,255,0.35);
}
#web_support .web_support_des .web_support_des_links a:first-of-type {
  font: 500 13px/35px koohinoor;
  padding: 0 25px 2px;
  height: 35px;
  border-radius: 50px;
  display: inline-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  cursor: pointer;
  border: 0 !important;
  margin-right: auto;
  margin-left: 20px;
  background: #fff;
  color: #153c66;
}
#web_support .web_support_des .web_support_des_links a:last-of-type {
  color: #fff;
  border-bottom: 1px solid;
  opacity: 0.5;
}
#web_support .web_support_des .web_support_des_links a:last-of-type:hover {
  opacity: 1;
}
#web_support .circle {
  background: #1e1e1e;
  display: flex;
  width: 500px;
  height: 500px;
  position: absolute;
  border-radius: 500px;
  z-index: 0;
}
#web_support .circle:nth-of-type(1) {
  opacity: .035;
  top: -15%;
  left: -10%;
}
#web_support .circle:nth-of-type(2) {
  transform: scale(.6);
  bottom: -50%;
  left: -10%;
  opacity: .065;
}
#web_support .circle:nth-of-type(3) {
  transform: scale(.5);
  right: -16%;
  top: -50%;
  opacity: .09;
}
#web_support .circle:nth-of-type(4) {
  right: -10%;
  bottom: -32%;
  opacity: .09;
}



.contentsec .circle {
  background: #1e1e1e;
  display: flex;
  width: 500px;
  height: 500px;
  position: absolute;
  border-radius: 0px;
  z-index: 0;
}

.contentsec .circle:nth-of-type(1) {
  right: -36%;
  bottom: 0%;
  opacity: .05;
  background: url(https://hermanweb.co/wp-content/themes/Hermanweb/assets/images/king.svg) no-repeat;
height: 100%;width: 100%;}




.contentsec2 .circle {
  background: #1e1e1e;
  display: flex;
  width: 500px;
  height: 500px;
  position: absolute;
  border-radius: 500px;
  z-index: 0;
}
.contentsec2 .circle:nth-of-type(1) {
  opacity: .035;
  top: -15%;
  left: -10%;
}

.contentsec2 .circle:nth-of-type(3) {
  transform: scale(.5);
  right: -16%;
  top: -50%;
  opacity: .09;
}
.contentsec2 .circle:nth-of-type(2) {
  right: -75%;
  bottom: 0%;
  opacity: .09;
  background: url(https://hermanweb.co/wp-content/themes/Hermanweb/assets/images/content.svg) no-repeat;
height: 100%;width: 100%;}



.contentseclogo .circle {
  background: #1e1e1e;
  display: flex;
  width: 500px;
  height: 500px;
  position: absolute;
  border-radius: 500px;
  z-index: 0;
}
.contentseclogo .circle:nth-of-type(1) {
  opacity: .035;
  top: -15%;
  left: -10%;
}

.contentseclogo .circle:nth-of-type(3) {
  transform: scale(.5);
  right: -16%;
  top: -50%;
  opacity: .09;
}
.contentseclogo .circle:nth-of-type(2) {
  right: -75%;
  bottom: 0%;
  opacity: .09;
  background: url(https://hermanweb.co/wp-content/themes/Hermanweb/assets/images/content.svg) no-repeat;
height: 100%;width: 100%;}



.contentsec3 .circle {
  background: #1e1e1e;
  display: flex;
  width: 500px;
  height: 500px;
  position: absolute;
  border-radius: 500px;
  z-index: 0;
}
.contentsec3 .circle:nth-of-type(1) {
  opacity: .035;
  top: -15%;
  left: -10%;
}

.contentsec3 .circle:nth-of-type(3) {
  transform: scale(.5);
  right: -16%;
  top: -50%;
  opacity: .09;
}
.contentsec3 .circle:nth-of-type(2) {
  right: -75%;
  bottom: 0%;
  opacity: .09;
  background: url(https://hermanweb.co/wp-content/themes/Hermanweb/assets/images/content.svg) no-repeat;
height: 100%;width: 100%;}




#web_support .web_support_panel {
  flex: 0 0 55%;
  display: grid;
  grid: auto / 47% 47%;
  grid-gap: 6%;
  padding-right: 6%;
}
#web_support .web_support_panel .web_support_panel_info {
  background: rgba(0,0,0,0.085);
  text-align: center;
  padding: 45px 0;
  color: #fff;
}
#web_support .web_support_panel .web_support_panel_info:hover {
  background: rgba(0,0,0,0.125);
}
#web_support .web_support_panel .web_support_panel_info strong {
  font: bold 14px/1 koohinoor;
  display: block;
  margin-top: 30px;
}
#web_support .web_support_panel .web_support_panel_info ul {
  margin: 20px 0 30px 0;
}
#web_support .web_support_panel .web_support_panel_info ul li {
  opacity: 0.5;
  font: 300 12px/2 koohinoor;
}
#web_support .web_support_panel .web_support_panel_info a {
  font: 500 13px/35px koohinoor;
  padding: 0 30px 2px;
  height: 35px;
  border-radius: 50px;
  display: inline-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  cursor: pointer;
  border: 0 !important;
  background: #153c66;
  color: #fff;
}

/* Blog Section */
#blog-post {
  padding: 75px 0;
}
#blog-post .title {
  margin-bottom: 30px;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 100%;
  -ms-flex-align: end;
  align-items: flex-end;
}
#blog-post .title strong {
  font: bold 14px/35px koohinoor;
  color: #146139;
}
#blog-post .title a {
  font: 500 13px/35px koohinoor;
  padding: 0 25px 2px;
  height: 35px;
  border-radius: 50px;
  display: inline-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  cursor: pointer;
  border: 0 !important;
  background: #146139;
  color: #fff;
}
#blog-post .article {
  display: grid;
  grid: auto / 23% 23% 23% 23%;
  grid-gap: 2.6666%;
}
#blog-post .article img {
  margin-bottom: 7px;
  display: block;
}
#blog-post .article .data {
  color: #146139;
  font-size: 12px;
  display: block;
  font: 400 11px/2.5 koohinoor;
}
#blog-post .article h2 {
  font: 500 13px/1.7 koohinoor;
  margin-bottom: 10px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#blog-post .article h2:hover {
  color: #146139;
}
#blog-post .article p {
  text-align: justify;
}

/* footer */
#footer {
  background: #262f36;
  color: rgba(255,255,255,0.65);
}
#footer a:hover {
  color: rgba(255,255,255,0.95);
}
#footer .container {
  padding: 0;
}
.footer .footer-top {
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: end;
  align-items: flex-end;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255,255,255,0.025);
}
.footer .footer-top ul {
  display: -ms-flexbox;
  display: box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.footer .footer-top ul li {
  margin-left: 20px;
}
.footer .footer-top .footer-contact {
  font-family: koohinoor;
  font-size: 14px;
  display: flex;
  flex-direction: row-reverse;
  line-height: 1.5;
}
.footer .footer-top .footer-contact a {
  font-weight: 500;
  margin-right: 10px;
  padding-right: 5px;
  color: rgba(255,255,255,0.8);
}
.footer .title {
  font: bold 15px/2 koohinoor;
  margin-bottom: 15px;
  color: rgba(255,255,255,0.8);
}
.footer .footer-main {
  padding: 30px 0;
  display: grid;
  grid: auto / 42% auto auto;
  grid-gap: 45px;
}
.footer .footer-main .footer-about p {
  font-weight: 300;
  line-height: 1.8;
  text-align: justify;
}
.footer .footer-main .footer-service ul {
  display: grid;
  grid: auto / auto auto auto;
  font-weight: 300;
  line-height: 1.8;
}
.footer .footer-main .footer-other ul {
  display: grid;
  grid: auto / auto auto;
  font-weight: 300;
  line-height: 1.8;
}
#footer .footer-copyright {
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: end;
  align-items: flex-end;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.025);
}
#footer .footer-copyright p {
  line-height: 2;
}
#footer .footer-copyright ul {
  display: -ms-flexbox;
  display: box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#footer .footer-copyright ul li {
  line-height: 1px;
  margin-right: 15px;
  opacity: 0.45;
}
#footer .footer-copyright ul li:hover {
  opacity: 0.8;
}
#footer .footer-copyright ul li .icon-pay-ir {
  vertical-align: -10px;
}

/* blog Archive */
#slider_title {
  position: relative;
  width: 100%;
  text-align: center;
  overflow: hidden;
  margin-bottom: 50px;
}
#slider_title .slider_title {
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}
#slider_title picture {
  filter: brightness(.92);
  width: 100%;
}
#slider_title .container {
  padding: 0;
  position: relative;
}
#slider_title .title {
  z-index: 3;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
}
#slider_title .title h1 {
  padding: 25px 0;
  background: #153c66;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  font: 500 16px/2 koohinoor;
  color: #fff;
}
#slider_title .title h1:before {
  width: calc((100vw - 1100px) / 2);
  right: calc(((100vw - 1100px) / 2) * -1);
  top: 0;
  content: '';
  background: #153c66;
  position: absolute;
  bottom: 0;
}
.anotherbox .breadcrumbs{
  
margin-bottom: 2px;}
/* breadcrumbs */
.breadcrumbs {
  padding: 0;
  margin-bottom: 35px;
}
.breadcrumbs i {
  vertical-align: -2px;
  margin: 0 25px;
}
.breadcrumbs a {
  color: #262f36;
}
.breadcrumbs .breadcrumb_last {
  color: #262f36;
  font-weight: 500;
}

/* main page */
.main-page {
  padding: 0px 9%;
}
.article-top {
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: end;
  align-items: flex-end;
  align-items: center;
  -webkit-align-items: center;
}
.article-top .anotherbox .another {
  margin-left: 25px;
  font-weight: 400;
}
.article-top .anotherbox .another img {
  width: 32px;
  border-radius: 100%;
  margin-left: 5px;
}
.article-top .anotherbox time,
.article-top .timestudy {
  margin-left: 20px;
  color: #bbbbbb;
  font-size: 12px;
  font-weight: 400;
}
.article-top .anotherbox i {
  vertical-align: middle;
  margin-left: 2px;
}
.article-top .anotherbox .post-tag {
  display: inline-block;
}
.article-top .hot-post {
  color: #e51c37;
  font-size: 12px;
  font-weight: 400;
  margin-left: 20px;
}
.article-top .vip-post {
  color: #f29c1f;
  font-size: 12px;
  font-weight: 400;
  margin-left: 20px;
}
.article-top .update-post {
  color: #4ad295;
  font-size: 12px;
  font-weight: 400;
  margin-left: 20px;
}
.article-top .verifeid-post {
  color: #2196f3;
  font-size: 12px;
  font-weight: 400;
}
.article-top .sharebox {
  text-align: left;
}
.article-top .sharebox a {
  margin-right: 5px;
}
.article-top .sharebox a i {
  vertical-align: middle;
}
.download-box {
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  padding: 15px;
  max-height: 74px;
  display: inline-block;
  width: 100%;
  font-family: "koohinoor";
}
.download-box .icon-file-zip {
  float: right;
  margin-left: 12px;
}
.download-box .file-name {
  display: inline-block;
  line-height: 1.2;
  direction: ltr;
  text-align: right;
}
.download-box .file-name strong {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
}
.download-box .file-name span {
  line-height: 16px;
  font-size: 12px;
  color: #bbb;
}
.download-box .file-name span i {
  float: right;
  margin-left: 5px;
}
.download-box a {
  float: left;
  background: #2260a9;
  text-decoration: none;
  color: #fff;
  border-radius: 4px;
  padding: 5px 20px;
  height: 42px;
}
.download-box a:hover {
  background: #153c66;
}
.article-down {
  padding: 35px 0;
  margin-top: 35px;
  border-bottom: 1px solid #f0f0f0;
  border-top: 1px solid #f0f0f0;
}
.cat-tag-post .category,
.cat-tag-post .tags {
  display: inline-block;
  color: #bbb;
  font-size: 13px;
  line-height: 24px;
}
.cat-tag-post .category strong,
.cat-tag-post .tags strong {
  font-weight: 400;
}
.cat-tag-post .category {
  margin-left: 20px;
}
.cat-tag-post .category a,
.cat-tag-post .tags a {
  font-weight: 400;
  background: #f7f7f7;
  color: #bbb;
  text-decoration: none;
  border-radius: 4px;
  padding: 2px 7px;
  margin-right: 4px;
  height: 24px;
}
.cat-tag-post .category a:hover,
.cat-tag-post .tags a:hover,
.cat-tag-post .url:hover {
  background: #efefef;
  color: #9f9f9f;
}
.cat-tag-post .url {
  float: left;
  font-weight: 500;
  background: #f7f7f7;
  color: #bbb;
  text-decoration: none;
  border-radius: 4px;
  padding: 2px 7px;
  margin-right: 4px;
  height: 24px;
  font-family: "koohinoor";
  font-size: 13px;
  line-height: 22px;
  cursor: pointer;
}
.cat-tag-post .url i {
  float: left;
  margin-top: 2px;
  margin-right: 5px;
}
.comment-goto {
  background: #f7f7f7;
  border-radius: 4px;
  padding: 25px;
  margin: 25px 0;
  position: relative;
  overflow: hidden;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: end;
  align-items: flex-end;
  align-items: center;
  -webkit-align-items: center;
  width: 100%;
}
.comment-goto span {
  z-index: 1;
  position: relative;
}
.comment-goto a {
  background: #2260a9;
  text-decoration: none;
  border-radius: 4px;
  color: #fff;
  padding: 4px 15px 5px;
  font-family: "koohinoor";
  z-index: 1;
  position: relative;
}
.comment-goto a:hover {
  background: #153c66;
}
.comment-goto::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -21px;
  background: url(../images/icons/comment.svg) no-repeat;
  width: 165px;
  height: 165px;
  background-size: 165px 165px;
  z-index: 0;
}
.another-box {
  display: flex;
  align-items: center;
  -webkit-align-items: center;
}
.another-box img {
  width: 86px;
  height: 86px;
  border-radius: 100%;
  -webkit-box-shadow: 0 7px 50px rgba(21, 60, 102, 0.25);
  box-shadow: 0 7px 50px rgba(21, 60, 102, 0.25);
}
.another-box p {
  flex-grow: 1;
  padding-right: 15px;
}
.another-box p strong {
  font-family: "koohinoor";
  line-height: 1;
}
.another-box p span {
  display: block;
  color: #646464;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
}
.another-box p a {
  font-weight: 400;
  font-size: 13px;
  opacity: 0.75;
}
.another-box p a:hover {
  opacity: 1;
}

/* Comment */
.comment-box {
  padding-bottom: 35px;
margin-top: 50px;}
.alert {
  font-size: 14px;
  padding: 15px;
  background-color: #fbfbfb;
  color: #6b7074;
  position: relative;
  border: 1px solid rgba(31,31,31,0.05);
  border-radius: 4px;
  cursor: default;
}

@media (max-width: 1199px) {
  .main-page {
    padding: 0 4%;
  }
  #slider_title h1 {
    padding-right: 15px !important;
  }
}
@media (max-width: 992px) {
  .site-header .site-header-main .header-main-menu > ul,
  .site-header .site-header-main .header-searchbox {
    display: none;
  }
  .site-header .site-header-main {
    padding: 0px 0;
  }
  .site-header .responsive-menu-toggle {
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    width: 24px;
    height: 24px;
    opacity: 0.9;
  }
  #slider-main .pagination {
    width: 65%;
  }
  #service .service-item {
    grid: auto / auto auto;
    grid-gap: 30px;
  }
  .description {
    padding-left: 10%;
    padding-right: 10%;
  }
  .service-developement-item {
    grid: auto / auto auto;
    grid-gap: 30px;
  }
  .service-developement-item2 {
    grid: auto / auto auto;
    grid-gap: 30px;
  }
  .service-developement-item4 {
    grid: auto / auto auto;
    grid-gap: 30px;
  }
  #web_support .container {
    flex-direction: column;
  }
  #web_support .web_support_des {
    margin-bottom: 45px;
  }
  #web_support .web_support_panel {
    flex: 1;
    grid: auto / 47% 47%;
    grid-gap: 6%;
    padding-right: 0;
    width: 100%;
  }
  .main-page {
    padding: 0;
  }
  .article-top .sharebox {
    display: none;
  }
}
@media (max-width: 768px) {
  #slider-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  #slider-main > .container {
    order: 2;
    padding: 0;
    max-width: 100%;
  }
  #slider-main .pagination {
    width: 100%;
    position: relative;
    padding: 0 10%;
  }
  .description {
    padding-left: 0;
    padding-right: 0;
  }
  #estelam .container {
    text-align: center;
  }
  #estelam .container a {
    margin: 15px 0 0 0;
  }
  #levels-order {
    padding: 0;
  }
  #levels-order .levels-order {
    padding: 75px 0;
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    grid: auto / auto auto auto auto auto auto;
  }
  #levels-order .levels-order li {
    min-width: 165px;
  }
  #blog-post .article {
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    grid: auto / 250px 250px 250px 250px;
    grid-gap: 30px;
    padding-bottom: 15px;
  }
  .footer .footer-top {
    flex-direction: column;
    align-items: center;
  }
  .footer .footer-top ul {
    margin-bottom: 10px;
  }
  .footer .footer-top ul li {
    margin: 0 10px;
  }
  .footer .footer-main {
    grid: auto / auto;
  }
  .footer .footer-main .footer-other ul {
    grid: auto / auto auto auto;
  }
  #slider_title > .container {
    order: 2;
    padding: 0;
    max-width: 100%;
  }
  #slider_title .title {
    position: relative;
    width: 100%;
  }
  #slider_title .title h1 {
    padding: 25px 10% !important;
  }
  .article-top .anotherbox .post-tag > span {
    padding-top: 15px;
    display: inline-block;
  }
  .typography .wp-caption, .post-content .wp-caption {
    max-width: 100%;
  }
  .download-box .file-name {
    max-width: 50%;
  }
  .download-box .file-name strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cat-tag-post .category {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
  .cat-tag-post .url {
    margin-top: 3px;
  }
}
@media (max-width: 576px) {
  .container {
    padding-right: 5% !important;
    padding-left: 5% !important;
  }
  #slider-main > .container {
    padding: 0 !important;
  }
  #slider-main .pagination {
    padding: 0 5%;
  }
  #slider-main .swiper-button-next,
  #slider-main .swiper-button-prev {
    top: 17px;
  }
  .site-header .site-header-nav {
    flex-direction: column;
    align-items: center;
  }
  .site-header .site-header-main .btn-account {
    display: none;
  }
  #service .service-item {
    grid: auto / 47% 47%;
    grid-gap: 30px 6%;
    text-align: center;
  }
  #service .service-item li i {
    float: none;
    margin: 0 auto 10px;
    display: block;
  }
  #service .service-item li h2 {
    font-size: 14px;
  }
  #levels-order .levels-order li {
    min-width: 145px;
    padding: 0;
  }
  .service-developement .description-box {
    padding: 0 8%;
  }
  .service-developement-item {
    grid: auto / 47% 47%;
    grid-gap: 30px 6%;
    text-align: center;
  }
  .service-developement-item li a {
    flex-direction: column;
  }
  .service-developement-item li a h3 {
    margin-right: 0;
    margin-top: 10px;
  }
  
  .service-developement2 .description-box {
    padding: 0 8%;
  }
  .service-developement-item2 {
    grid: auto / 47% 47%;
    grid-gap: 30px 6%;
    text-align: center;
  }
  .service-developement3 .description-box {
    padding: 0 8%;
  }
  .contentp, .contentp3{padding-left:0;}
  .service-developement-item3 {
    grid: auto / 47% 47%;
    grid-gap: 30px 6%;
    text-align: center;
  }
  .service-developement-item2 a {
    flex-direction: column;
  }
  .service-developement-item2 a h3 {
    margin-right: 0;
    margin-top: 10px;
  }
  
  
  .service-developement4 .description-box {
    padding: 0 8%;
  }
  .service-developement-item4 {
    grid: auto / 47% 47%;
    grid-gap: 30px 6%;
    text-align: center;
  }
  .service-developement4 .description-box {
    padding: 0 8%;
  }
  .contentp, .contentp3 ,.contentp4{padding-left:0;}
  .service-developement-item4 {
    grid: auto / 47% 47%;
    grid-gap: 30px 6%;
    text-align: center;
  }
  .service-developement-item4 a {
    flex-direction: column;
  }
  .service-developement-item4 a h3 {
    margin-right: 0;
    margin-top: 10px;
  }
  
  
  
  
  #web_support .web_support_panel {
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    grid: auto / 250px 250px;
    grid-gap: 30px;
    padding-bottom: 8px;
  }
  .footer .footer-top ul {
    justify-content: center;
  }
  .footer .footer-top ul li {
    margin: 0 10px;
  }
  #footer .footer-copyright {
    justify-content: center;
  }
  #footer .footer-copyright ul li {
    margin: 5px 7px 0;
  }
  .site-header .site-header-stick {
    background: rgba(255,255,255,0.6);
  }
  #slider_title .container {
    width: 100%;
    padding: 0 !important;
  }
  #slider_title .title h1 {
    padding: 25px 5% !important;
  }
  .download-box .file-name {
    max-width: 44%;
  }
  .download-box a {
    padding: 6px 10px;
    font-size: 13px;
    letter-spacing: -0.25px;
  }
  .cat-tag-post .tags {
    width: 100%;
    margin-bottom: 10px;
  }
  .cat-tag-post .url {
    margin-bottom: 15px;
  }
  .comment-goto {
    padding: 15px;
  }
  .comment-goto span {
    line-height: 1.5;
  }
  .comment-goto a {
    padding: 4px 4px 5px;
    text-align: center;
    width: 115px;
    margin-right: 15px;
  }
  .progress-wrap {
    right: 30px;
    bottom: 30px;
  }
  .article-top .anotherbox .another img {
    width: 16px;
  }
}
.product_comments{
  
}
.comments_list{padding:22px;border-radius:10px;margin-right:80px;margin-bottom:35px;padding-bottom: 2px; }
.comments_item_answer.comments_item_answer{margin-bottom:0;border-radius:10px 10px 0 0;width: 100%;}
.comments_item,.comments_item_answer{background-color:#fff;border-radius:10px;box-shadow:0 2px 1px rgba(0,0,0,.06);padding:25px;margin-bottom:20px;position:relative;}
.comments_list ul li:last-child .comments_item{/*! margin-bottom:0 */width: 96%;}
.comments_item_answer+ul .comments_item{background-color:#fff;border-top:1px solid #ebebeb;padding-top:20px;margin-top:20px;border-radius:0 0 10px 10px;position:relative}
.comments_item_answer+ul li:first-child .comments_item{margin-top:0;}
.comments_item_content{text-align:justify;line-height:30px;font-size:12px;font-weight:500}
.comments_item_content p{margin-bottom:0;}
.comments_item_avatar{position:absolute;right: -55px;top:10px;border-radius:50%;width:47px;height:47px}
.comments_item_answer .comments_item_avatar{right: -70px;}
.comments_item_answer+ul li .comments_item_avatar:before{content:"";opacity: 0.35;width: 16px;height: 16px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAmElEQVQ4jc3SMQrCQBAF0KdCrHIAmxxFLyVYmjKH0MpTKIi9N4ogsTALG2N0SaMfptn//8ww+/knFDihRjNQdaspgmkaNdjjjByTgcpxwe7dBjWyhE3nrbaHJsE8RtvBRvcm25hcJTYpW3P59fEDOsOCOVSV2KSHUUeMc3Az4htnEbHEAlfcB8wZ1p6hOrySqVE+iqL8ezwANKctv3bYp/IAAAAASUVORK5CYII=);position:absolute;right:50%;top:-25px;margin-right:-8px;}
.comments_item_avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;border-radius:50%}
.comments_item_header:after{clear:both;content:"";display:table}
.comments_item_header{margin-bottom:10px;line-height:30px;width: 100%;}
.comments_item_header span{float:right;line-height:inherit;font-size:16px;font-weight:600}
.comments_item_answer .comments_item_header span{color:#20a5ce}
.comments_item_header time{float:right;line-height:inherit;margin-right:22px;color:#b8b8b8;font-size:12px}
.comments_item_header a{float:left;line-height:inherit;color:#7d7d7d;border-bottom:1px solid #e9e9e9;font-size:12px;}
.comment_form{margin-right:80px;position:relative}
.comment_form .form-control{border-radius:10px;background-color:#f8f8f8;border:none;padding:0 15px;width: 100%;line-height: 45px;margin-bottom: 10px;}
.comment_form .form-control:focus{background-color:#f5f5f5}
.comment_form textarea.form-control{min-height:190px;width: 100%;/* margin-bottom: 20px; */}
.comment_form_header{margin-bottom:15px}
.comment_form_header:after{clear:both;content:"";display:table}
.comment_form_header h3{line-height:30px;color:#1e99c7;font-weight:600;font-size:16px;float:right}
.comment_form_header>a{float:left;line-height:30px;font-weight:500}
.comment_form_header>ul{float:left}
.comment_form_header>ul>li{line-height:30px;position:relative;font-weight:500;cursor:pointer}
.comment_form_header>ul>li>span{padding-left:25px;position:relative;display:block}
.comment_form_header>ul>li>span:before{content:"";position:absolute;left:5px;top:50%;margin-top:-3px;margin-right:0;border-top:7px solid #b3b3b3;border-right:4px solid transparent;border-bottom:0;border-left:4px solid transparent}
.comment_form_header>ul>li>ul{display:none;position:absolute;left:0;top:100%;width:150px;background-color:#fff;border-radius:10px;box-shadow:0 3px 15px rgba(0,0,0,.15);overflow:hidden}
.comment_form_header>ul>li:hover>ul{display:block}
.comment_form_header>ul>li>ul>li a{line-height:35px;padding:0 15px;font-size:13px;text-align:right;display:block;font-weight:500}
.comment_form_header>ul>li>ul>li:hover a{background-color:#f5f5f5}
.comment_form_avatar{position:absolute;text-align: center;padding-top: 9px;right:-70px;top:45px;border-radius:50%;overflow:hidden;width:47px;height:47px;background-color:#1e99c7;color:#fff;text-align:center;line-height:47px}
.comment_form_avatar i{display:inline-block;width: 24px;height: 24px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAAf0lEQVRIie2SyQmAQBAEGxPwIRiBYAhGZABijmYifjUBy9eCwirjgIJHPReml25Keh1ABnTAjI0JqM980BiD14x7eUnkLXUUt90AJdA7GmAJL4DBE26dqJKUm6pumSS1jruL4Sm6xjQN/LpKik/063qvrkeaBj6u69FEL9PVywI+07m3xpfWLAAAAABJRU5ErkJggg==)}




@media screen and (min-width: 1217px){
.navv {display:none;}
}


@media screen and (max-width: 1216px) {
/* Navigation Styles */
navv { position: relative;  }
header.dark navv { background-color:rgba(255,255,255,0.5); }
header.light navv { background-color:rgba(0,0,0,0.5); }

ul.main-nav { 
  list-style-type: none; 
  padding: 0px;
  font-size: 0px;
  max-width: 1000px;
  margin: 0 auto;
}

ul.main-nav > li { 
  display: inline-block;
  padding: 0; 
}

ul.main-nav > li > a { 
  display: block; 
  padding: 20px 30px; 
  position: relative;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  box-sizing: border-box;
}

ul.main-nav > li:hover { background-color: #f9f9f9; }
ul.main-nav > li:hover > a { color: #333; font-weight: 400; }

ul.main-nav > li ul.sub-menu-lists {
  margin: 0px;
  padding: 0px;
  list-style-type : none;
  display:block;
}

ul.main-nav > li ul.sub-menu-lists > li {
  padding: 2px 0;
}

ul.main-nav > li ul.sub-menu-lists > li > a {
  font-size: 14px;
}

.ic {
  position: fixed; 
  cursor: pointer;
  display: inline-block;
  left: 25px;
  width: 32px;
  height: 24px;
  text-align: center;
  top:0px;
  outline: none;
}

.ic.close { 
  opacity: 0; 
  font-size: 0px; 
  font-weight: 300; 
  color: #0d0d0d;
  top:8px;
  height:40px;
  display: block;
  outline: none;
}

/* Menu Icons for Devices*/
.ic.menu { top:25px; z-index : 20; }

.ic.menu .line { 
  height: 4px; 
  width: 100%; 
  display: block; 
  margin-bottom: 6px; 
background: #000;}
.ic.menu .line-last-child { margin-bottom: 0px;  }

.sub-menu-head { margin: 10px 0; }
.banners-area { margin-top: 20px; padding-top: 15px; }


@media only screen and (max-width:768px) {
  .sub-menu-head { color:orange; }
  .ic.menu { display: block; }
  header.dark .ic.menu .line { background-color: #fff; } 
  header.light .ic.menu .line { background-color: #000; }
  .ic.menu .line {
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
  }
  .ic.menu:focus .line { background-color: #1e1e1e !important; }
  
  .ic.menu:focus .line:nth-child(1) { 
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); 
  }
  
  .ic.menu:focus .line:nth-child(2){ 
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg); 
    margin-top: -10px;
  }
  
  .ic.menu:focus .line:nth-child(3){
    transform: translateY(15px);
    opacity: 0;
  }
  
  .ic.menu:focus{ outline: none; }
  .ic.menu:focus ~ .ic.close { opacity: 1; z-index : 21;  outline: none;  }
  
  /*
  
  .ic.menu:focus ~ .ic.close { opacity: 1.0; z-index : 21;  }
  .ic.close:focus { opacity: 0; }
  */
  .ic.menu:hover, 
  .ic.menu:focus{ opacity: 1; }
  

  nav { background-color: transparent; }
  
 /* Main Menu for Handheld Devices  */
  ul.main-nav {
    z-index:2; 
    padding: 50px 0;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 0px;
    background-color:rgba(0,0,0,1);
    height: 500px;
    overflow: auto;
    /*CSS animation applied : Slide from Right*/
   -webkit-transition-property: background, width;
    -moz-transition-property: background, width;
    -o-transition-property: background, width;
    transition-property: background, width;
   	-webkit-transition-duration: 0.6s;
	  -moz-transition-duration: 0.6s;
	  -o-transition-duration: 0.6s;
    transition-duration: 0.6s;
  }
  
  .ic.menu:focus ~ .main-nav { width: 300px; background-color:rgba(0,0,0,1); }
  
  ul.main-nav > * { 
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
   	-webkit-transition-duration: 0.4s;
	  -moz-transition-duration: 0.4s;
	  -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    opacity: 0;
  }
  .ic.menu:focus ~ .main-nav > * {opacity: 1;}
  
  ul.main-nav > li > a:after {display: none;}
  ul.main-nav > li:first-child { border-radius: 0px; }
  ul.main-nav > li {
    display: block;
    border-bottom: 1px solid #444;
  }
  
  ul.main-nav > li > a { font-weight: 600; }
  
  ul.main-nav > li ul.sub-menu-lists > li a { color: #eee; font-size: 14px; }
  .sub-menu-head { font-size: 16px;}
  ul.main-nav > li:hover { background-color: transparent;  }
  ul.main-nav > li:hover > a {color: #fff; text-decoration: none; font-weight: 600;}
 .ic.menu:focus ~ ul.main-nav > li > div.sub-menu-block {
    border-left: 0px solid #ccc;
    border-right: 0px solid #ccc;
    border-bottom: 0px solid #ccc;
    position: relative;
    visibility: visible;
    opacity: 1.0;
  }
  
  .sub-menu-block { padding: 0 30px; }
  .banners-area { padding-bottom: 0px;  }
  .banners-area div { margin-bottom: 15px;  }
  .banners-area { border-top: 1px solid #444; }
}

@media only screen and (min-width:769px) {
  .ic.menu { display: none; }
  /* Main Menu for Desktop Devices  */
  ul.main-nav { display: block; position: relative; }
  .sub-menu-block { padding: 15px; }
  
  /* Sub Menu */
  ul.main-nav > li > div.sub-menu-block { 
  visibility: hidden;
  background-color: #f9f9f9;
  position: absolute;
  margin-top: 0px;
  width: 100%;
  color: #333;
  left: 0;
  box-sizing: border-box;
  z-index : 3;
  font-size: 16px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  opacity: 0;
    
  /*CSS animation applied for sub menu : Slide from Top */
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  
  }
  
  ul.main-nav > li:hover > div.sub-menu-block{ 
    background-color: #f9f9f9; 
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  
  ul.main-nav > li > div.sub-menu-block > * {
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
   	-webkit-transition-duration: 0.4s;
	  -moz-transition-duration: 0.4s;
	  -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    opacity: 0;
  }
  
  ul.main-nav > li:hover > div.sub-menu-block > * {
    opacity: 1;
  }
  
  .sub-menu-head { font-size: 20px;}
  
  /* List Separator: Outer Border */
  header.dark ul.main-nav > li > a { border-right: 1px solid #bbb; }
  header.light ul.main-nav > li > a { border-right: 1px solid #666; }
  
  /* List Separator: Inner Border */
  ul.main-nav > li > a:after {
    content: '';
    width: 1px;
    height: 62px;
    position: absolute;
    right:0px;
    top: 0px;
    z-index : 2;
  }
  header.dark ul.main-nav > li > a:after { background-color: #777; }
  header.light ul.main-nav > li > a:after { background-color: #999; }
  
  /* Drop Down/Up Arrow for Mega Menu */
  ul.main-nav > li > a.mega-menu > span { display: block; vertical-align: middle; }
  ul.main-nav > li > a.mega-menu > span:after {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    content: '';
    background-color: transparent;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }

  ul.main-nav > li:hover > a.mega-menu span:after{
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 0px solid transparent;
    border-bottom: 5px solid #666;
  }
  .banners-area { border-top: 1px solid #ccc; }
}
}

/* انیمیشن fade-in و slide-up نرم با CSS خالص (بدون JS) */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* اعمال به بخش‌های اصلی با تاخیر متفاوت برای زیبایی بیشتر */
    #service,
    .description,
    #estelam,
    #levels-order,
    #portfolio {
        opacity: 0;
        animation: fadeInUp 0.8s ease forwards;
    }
    
    #service { animation-delay: 0.2s; }
    .description { animation-delay: 0.4s; }
    #estelam { animation-delay: 0.6s; }
    #levels-order { animation-delay: 0.8s; }
    #portfolio { animation-delay: 1s; }
    
    /* hover بهتر برای کارت‌های خدمات (اگر هنوز نداری) */
    .service-item li {
        transition: all 0.4s ease;
    }
    
    .service-item li:hover {
        transform: translateY(-15px);
        
    }
    
    /* افکت ripple برای دکمه‌های CTA (سفارش پروژه، استعلام و ...) */
    .btn-account,
    #estelam a,
    .title .btn-more {
        position: relative;
        overflow: hidden;
    }
    
    .btn-account::before,
    #estelam a::before,
    .title .btn-more::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255,255,255,0.4);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s ease, height 0.6s ease;
        pointer-events: none;
        opacity: 0;
    }
    
    .btn-account:hover::before,
    #estelam a:hover::before,
    .title .btn-more:hover::before {
        width: 300px;
        height: 300px;
        opacity: 1;
    }
    
    /* زوم ملایم برای تصاویر اسلایدر */
    .slider-main .swiper-slide img {
        transition: transform 8s ease;
    }
    
    .slider-main .swiper-slide-active img {
        transform: scale(1.1);
    }
    
    
    /* طراحی کاملاً مستقل به سبک موکو */
.mokko-btn {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 20px !important;
    height: 46px !important;
    background-color: #153c66 !important; /* رنگ سرمه‌ای پایه */
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    overflow: hidden !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 1 !important;
    transition: transform 0.3s ease !important;
    margin-right: auto;
    margin-left: 40px;
}

/* لایه قرمز که بالا می‌آید */
.mokko-btn::before {
    content: "";
    position: absolute;
    top: 100%; /* شروع از پایین دکمه */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e51c37 !important; /* رنگ قرمز */
    z-index: -1 !important;
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
    border-radius: 50% 50% 0 0 !important;
}

/* افکت هاور */
.mokko-btn:hover {
    transform: translateY(-3px) !important;
    color: #ffffff !important;
}

.mokko-btn:hover::before {
    top: 0 !important;
    border-radius: 0 !important;
}

/* برای اینکه متن دکمه حتماً روی لایه قرمز بماند */
.mokko-btn span {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: none; /* جلوگیری از تداخل کلیک با متن */
}


 #herman-portfolio-section { padding: 60px 0; background: #fff; direction: rtl; overflow: hidden; }
    .hp-container { max-width: 1240px; margin: 0 auto; padding: 0 15px; }
    .hp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
    .hp-title h2 { color: #153c66; font-size: 17px; font-weight: 800; margin-bottom: 5px; }
    .hp-title p { color: #e51c37; font-size: 13px; font-weight: 500; }

    .portfolio-item-card { 
        display: block; 
        text-decoration: none !important; 
        background: #fff; 
        border-radius: 25px; 
        overflow: hidden; 
        transition: 0.4s; 
    }

    .pic-image {
        position: relative;
        height: 340px; /* اندازه کوچک‌تر و متناسب‌تر */
        border-radius: 25px;
        overflow: hidden;
    }

    .pic-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1); }

    .pic-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(21, 60, 102, 0.6);
        display: flex; align-items: center; justify-content: center;
        opacity: 0; transition: 0.4s;
    }

    .pic-overlay i { color: #fff; font-size: 24px; transform: scale(0.5); transition: 0.4s; }

    .pic-content { padding: 20px 5px; text-align: right; }
    .pic-content span { color: #888; font-size: 12px; display: block; margin-bottom: 5px; }
    .pic-content h3 { color: #153c66; font-size: 17px; font-weight: 700; transition: 0.3s; margin: 0; }

    .portfolio-item-card:hover .pic-image img { transform: scale(1.1); }
    .portfolio-item-card:hover .pic-overlay { opacity: 1; }
    .portfolio-item-card:hover .pic-overlay i { transform: scale(1); }
    .portfolio-item-card:hover .pic-content h3 { color: #e51c37; }

    .hp-nav-wrapper { position: relative; display: flex; justify-content: center; gap: 15px; margin-top: 30px; }
    .hp-next, .hp-prev {
        position: static !important;
        width: 45px !important; height: 45px !important;
        background: #f8f8f8 !important;
        border-radius: 50% !important;
        color: #153c66 !important;
        margin: 0 !important;
    }
    .hp-next:after, .hp-prev:after { font-size: 16px !important; }
    .hp-next:hover, .hp-prev:hover { background: #e51c37 !important; color: #fff !important; }

    @media (max-width: 768px) { .pic-image { height: 280px; } }
    
    
    
     #pricing-section { padding: 100px 0; }

    /* هدر بخش هماهنگ با سایت */
    .pricing-top-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 60px;
        padding-bottom: 25px;
        border-bottom: 2px solid #f1f1f1;
    }

    .p-title-main h2 { color: #153c66; font-size: 28px; font-weight: 800; margin: 0 0 10px 0; }
    .p-title-main span { color: #888; font-size: 14px; position: relative; padding-right: 20px; }
    .p-title-main span::before { content: ''; position: absolute; right: 0; top: 50%; width: 12px; height: 2px; background: #e51c37; }

    /* گرید باکس‌ها (عریض‌تر) */
    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 30px;
    }

    .price-card {
        background: #fff;
        border-radius: 25px; /* گوشه‌های گردتر سری اول */
        padding: 50px 40px; /* پدینگ باز و پهن سری اول */
        text-align: center;
        border: 1px solid #eee;
        transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
        position: relative;
        overflow: hidden;
    }

    /* هاور مدرن بدون شادو (خط قرمز بالا) */
    .price-card::after {
        content: "";
        position: absolute;
        top: 0; left: 0; width: 100%; height: 0;
        background: #e51c37;
        transition: all 0.4s ease;
        z-index: 1;
    }

    .price-card:hover {
        border-color: #e51c37;
        transform: translateY(-12px); /* حرکت رو به بالای بیشتر */
    }

    .price-card:hover::after {
        height: 6px; /* خط قرمز هاور */
    }

    /* استایل پکیج ویژه */
    .price-card.featured {
        background: #153c66;
        border-color: #153c66;
        transform: scale(1.05); /* بزرگتر بودن کارت ویژه */
    }
    
    .price-card.featured:hover {
        transform: scale(1.05) translateY(-12px);
    }

    .price-card.featured .price-header h3, 
    .price-card.featured .amount,
    .price-card.featured .price-features li { color: #fff; }

    .popular-tag {
        position: absolute; top: 20px; left: 20px;
        background: #e51c37; color: #fff;
        padding: 5px 15px; border-radius: 50px; font-size: 11px; font-weight: 500;
    }

    /* محتوای داخلی */
    .price-header h3 { font-size: 17px; color: #153c66; margin-bottom: 20px; font-weight: 500; }
    .amount { font-size: 27px; font-weight: 900; color: #153c66; margin-bottom: 35px; display: block; }
    .amount span { font-size: 15px; color: #888; font-weight: normal; }

    .price-features { list-style: none; padding: 0; margin-bottom: 40px; text-align: right; }
    .price-features li { 
        padding: 12px 0; font-size: 13px; color: #555; 
        border-bottom: 1px solid rgba(0,0,0,0.03); 
    }
    .price-features li i { color: #e51c37; margin-left: 10px; }
    .price-features li.off { color: #ccc; text-decoration: line-through; opacity: 0.6; }

    /* دکمه پایین کارت */
    .price-footer { display: flex; justify-content: center; }

    @media (max-width: 992px) {
        .pricing-top-header { flex-direction: column; align-items: center; text-align: center; gap: 25px; }
        .price-card.featured { transform: scale(1); }
        .price-card.featured:hover { transform: translateY(-12px); }
    }
    
    
    /* استایل اجباری و بسیار قوی */
    .cm-overlay {
        position: fixed !important;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(15, 41, 70, 0.9);
        backdrop-filter: blur(5px);
        z-index: 2147483647 !important; /* بالاترین لایه ممکن در مرورگر */
        display: none; /* پیش فرض مخفی */
        align-items: center;
        justify-content: center;
    }
    
    .cm-box {
        background: #fff;
        padding: 30px;
        width: 90%;
        max-width: 800px;
        border-radius: 15px;
        position: relative;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        animation: popIn 0.3s ease-out;
    }

    @keyframes popIn { from{transform: scale(0.8); opacity:0;} to{transform: scale(1); opacity:1;} }

    .cm-close {
        position: absolute; left: 20px; top: 10px;
        font-size: 40px; color: #888; cursor: pointer;
        line-height: 1;
    }
    .cm-close:hover { color: #e51c37; }

    .cm-header { text-align: center; margin-bottom: 25px; }
    .cm-header h3 { font-size: 22px; color: #153c66; font-weight: bold; margin:0 0 10px 0; }
    .cm-header p { font-size: 14px; color: #666; margin:0; }

    .cm-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
    .cm-form input {
        flex: 1; min-width: 200px; padding: 15px;
        border: 1px solid #ddd; border-radius: 8px; font-family: inherit;
    }
    .cm-form button {
        flex: 0 0 150px; padding: 15px;
        background: #e51c37; color: #fff; border: none;
        border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 16px;
    }
    .cm-form button:hover { background: #153c66; }

    @media(max-width:768px){ .cm-form { flex-direction: column; } .cm-form button { width: 100%; } }
    
    
     /* --- اصلاح نمایش هدرها در موبایل --- */
    @media (max-width: 768px) {

        /* ۱. تغییر چیدمان از افقی به عمودی */
        .hp-header {
            display: flex !important;
            flex-direction: column !important; /* زیر هم قرار گرفتن */
            align-items: center !important; /* وسط‌چین کردن افقی المان‌ها */
            text-align: center !important; /* وسط‌چین کردن متن‌ها */
            gap: 25px !important; /* فاصله مناسب بین عنوان و دکمه */
            margin-bottom: 40px !important; /* فاصله کل هدر از محتوای پایین */
        }

        /* ۲. اطمینان از اینکه باکس عنوان عرض کامل دارد */
        .hp-title {
            width: 100% !important;
            margin: 0 !important; /* حذف مارجین‌های اضافی */
        }

        /* ۳. تنظیم سایز فونت عنوان اصلی برای موبایل */
        .hp-title h2 {
            font-size: 24px !important; /* کمی کوچک‌تر از دسکتاپ */
            line-height: 1.4 !important; /* فاصله خطوط مناسب */
            margin-bottom: 12px !important;
        }

        /* ۴. تنظیم سایز زیرعنوان */
        .hp-title p {
            font-size: 14px !important;
            color: #e51c37 !important; /* اطمینان از رنگ قرمز */
            margin: 0 !important;
        }
        
        /* ۵. اگر دکمه در موبایل خیلی بزرگ به نظر می‌رسد، کمی کوچک‌ترش می‌کنیم */
        .hp-header .mokko-btn {
             height: 42px !important;
             padding: 0 25px !important;
        }
    }
    
    /* --- اصلاح فونت H1 --- */
/* نام کلاس h1 خود را به جای .hero-title قرار دهید */
.hero-title {
    /* استفاده از یک فونت فارسی استاندارد و زیبا */
    font-weight: 300; /* ضخامت فونت (بولد) */
    font-size: 10px; /* اندازه فونت - بنا به نیاز تغییر دهید */
    line-height: 1.5; /* فاصله بین خطوط */
    color: #333; /* رنگ متن */
    /* اگر حروف به هم چسبیده‌اند، کمی فاصله اضافه کنید */
    /* letter-spacing: 0.5px; */
}

/* --- تغییر اندازه دکمه ثبت پروژه --- */
/* نام کلاس دکمه خود را به جای .order-btn قرار دهید */
.order-btn {
    /* برای بزرگ‌تر کردن دکمه */
    padding: 12px 24px !important; /* فاصله داخلی (بالا/پایین و چپ/راست) */
    font-size: 13px !important; /* اندازه متن داخل دکمه */

    /* --- یا --- */

    /* برای کوچک‌تر کردن دکمه (این قسمت را از کامنت خارج کنید) */
    /*
    padding: 8px 20px;
    font-size: 14px;
    */
    
    /* سایر استایل‌های ثابت برای زیبایی */
    font-weight: 300 !important; /* گردی گوشه‌ها */
    height: 36px !important;
}

 /* --- استایل دکمه همبرگری جدید --- */
    .new-mobile-trigger {
        font-size: 26px;
        color: #153c66; /* رنگ سرمه‌ای برند */
        cursor: pointer;
        padding: 5px;
        display: none; /* در دسکتاپ مخفی باشد */
        transition: 0.3s;
    }
    .new-mobile-trigger:hover { color: #e51c37; }

    /* نمایش دکمه فقط در موبایل و تبلت */
    @media (max-width: 992px) {
        .new-mobile-trigger { display: block; }
    }

    /* --- استایل منوی کشویی مدرن --- */
    /* لایه تاریک پشت */
    .mobile-menu-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(21, 60, 102, 0.5);
        z-index: 9998; opacity: 0; visibility: hidden; transition: 0.4s;
    }

    /* کانتینر سفید منو */
    .mobile-menu-container {
        position: fixed; top: 0; right: -320px; /* شروع از بیرون صفحه */
        width: 300px; height: 100%;
        background: #ffffff !important; /* پس‌زمینه کاملاً سفید */
        z-index: 9999;
        padding: 30px;
        box-shadow: -5px 0 25px rgba(0,0,0,0.1);
        transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* انیمیشن نرم */
        display: flex; flex-direction: column;
        overflow-y: auto;
    }

    /* کلاس‌های فعال‌سازی */
    .mobile-menu-overlay.active { opacity: 1; visibility: visible; }
    .mobile-menu-container.active { right: 0; }

    /* هدر داخل منو */
    .mobile-menu-header {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 40px; padding-bottom: 20px;
        border-bottom: 2px solid #f8f8f8;
    }
    .mobile-menu-close {
        font-size: 28px; color: #153c66; cursor: pointer; transition: 0.3s;
        width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
        background: #f8f8f8; border-radius: 50%;
    }
    .mobile-menu-close:hover { color: #fff; background: #e51c37; transform: rotate(90deg); }
    .mobile-branding { font-size: 22px; font-weight: 800; color: #153c66; }

    /* لینک‌ها */
    .mobile-nav-links { list-style: none; padding: 0; margin: 0 0 40px 0; }
    .mobile-nav-links li { margin-bottom: 5px; }
    .mobile-nav-links li a {
        display: block; font-size: 16px; font-weight: 700; color: #153c66;
        text-decoration: none; padding: 12px 0; border-bottom: 1px solid #fcfcfc;
        transition: 0.3s; position: relative;
    }
    .mobile-nav-links li a:hover { color: #e51c37; padding-right: 15px; }

    /* دکمه پایین */
    .mobile-menu-cta { margin-top: auto; }
    
    /* =========================================
   استایل سکشن سوالات متداول (FAQ Style)
   ========================================= */

/* تنظیمات کلی سکشن */
.faq-section-wrapper {
    padding: 80px 0;
    /* رنگ پس‌زمینه کمی متفاوت برای جداسازی از سکشن‌های قبلی */
    background-color: #f9fcff; /* یک آبی بسیار محو */
}

/* کانتینر اصلی آیتم‌ها */
.faq-accordion-container {
    max-width: 800px; /* عرض مناسب برای خوانایی */
    margin: 0 auto;
}

/* استایل هر آیتم (باکس سوال و جواب) */
.faq-item {
    background-color: #ffffff;
    border-radius: 20px; /* گوشه‌های گرد مطابق قالب */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05); /* سایه نرم */
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* حالت هاور روی کل باکس */
.faq-item:hover {
    box-shadow: 0 10px 35px rgba(21, 60, 102, 0.1);
    border-color: #eef2f7;
}

/* استایل دکمه سوال (هدر) */
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: right; /* برای فارسی */
    font-family: inherit; /* استفاده از فونت قالب */
}

/* متن سوال */
.faq-question span {
    font-size: 15px;
    font-weight: 700;
    color: #153c66; /* رنگ سرمه‌ای برند */
    transition: color 0.3s ease;
}

/* آیکون مثبت/منفی */
.faq-icon {
    font-size: 20px;
    color: #888; /* خاکستری در حالت عادی */
    transition: all 0.4s ease;
}

/* استایل بخش جواب (مخفی در حالت عادی) */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* انیمیشن نرم */
    opacity: 0;
}

/* محتوای داخلی جواب برای تنظیم فاصله */
.faq-answer-content {
    padding: 0 30px 30px 30px;
}

.faq-answer p {
    color: #666;
    line-height: 1.8;
    margin: 0;
    font-size: 13px;
}

/* --- وضعیت فعال (وقتی سوال باز می‌شود) --- */

/* تغییر رنگ متن سوال */
.faq-item.active .faq-question span {
    color: #e51c37; /* قرمز برند */
}

/* چرخش و تغییر رنگ آیکون */
.faq-item.active .faq-icon {
    transform: rotate(135deg); /* تبدیل مثبت به ضربدر */
    color: #e51c37; /* قرمز برند */
}

/* نمایش جواب */
.faq-item.active .faq-answer {
    max-height: 500px; /* ارتفاع کافی برای نمایش متن */
    opacity: 1;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .faq-question {
        padding: 20px;
    }
    .faq-question span {
        font-size: 16px;
    }
    .faq-answer-content {
        padding: 0 20px 25px 20px;
    }
}
    
    
    /* =========================================
   استایل اسلایدر نظرات مشتریان (Swiper Style)
   ========================================= */

.testimonials-section-wrapper {
    padding: 80px 0;
    background-color: #f5f8fd;
}

/* =========================================
   اصلاحیه فوری: رفع مشکل به هم ریختگی ریسپانسیو اسلایدر
   ========================================= */

/* 1. تنظیمات صحیح کانتینر اصلی اسلایدر */
.testimonial-swiper {
    padding-bottom: 60px !important; /* فضای پایین برای نقطه‌ها */
    padding-top: 30px !important; /* فضا برای سایه کارت‌ها */
    /* حذف پدینگ‌های چپ و راست که باعث خرابی شده بودند */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* محدود کردن عرض برای جلوگیری از بیرون‌زدگی */
    width: 100% !important;
    max-width: 100% !important;
    /* مخفی کردن هرگونه محتوای بیرون‌زده */
    overflow: hidden !important;
}

/* 2. اطمینان از اینکه سکشن مادر هم بیرون‌زدگی ندارد */
.testimonials-section-wrapper {
    overflow: hidden !important;
    width: 100% !important;
}

/* 3. تنظیم موقعیت فلش‌ها (چون پدینگ را برداشتیم) */
@media (min-width: 1024px) {
    .testimonial-button-next {
        right: 10px !important; /* چسبیدن به لبه راست */
    }
    .testimonial-button-prev {
        left: 10px !important; /* چسبیدن به لبه چپ */
    }
}

/* --- استایل کارت‌ها (اسلایدها) --- */
.swiper-slide.testimonial-card {
    background-color: #ffffff;
    border-radius: 25px;
    padding: 40px 35px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    border: 1px solid transparent;
    /* مهم: برای اینکه همه کارت‌ها هم‌ارتفاع شوند */
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}

/* هاور روی کارت (فقط در دسکتاپ فعال باشد تا در تاچ موبایل اذیت نکند) */
@media (min-width: 992px) {
    .swiper-slide.testimonial-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 50px rgba(21, 60, 102, 0.12);
        border-color: #eef2f7;
    }
}

/* --- استایل محتویات کارت (مثل قبل) --- */
.quote-icon {
    position: absolute; top: 25px; left: 25px; font-size: 60px; color: #eef2f7; opacity: 0.5; z-index: 0;
}
.review-text {
    font-size: 13px; line-height: 1.9; color: #555; margin-bottom: 30px; position: relative; z-index: 1; font-style: italic; flex-grow: 1; /* برای پر کردن فضا */
}
.client-info {
    display: flex; align-items: center; border-top: 1px solid #f0f0f0; padding-top: 20px;
}
.client-avatar {
    width: 55px; height: 55px; border-radius: 50%; background-color: #f0f4ff; display: flex; align-items: center; justify-content: center; margin-left: 15px;
}
.client-avatar i { font-size: 28px; color: #153c66; }
.client-details { display: flex; flex-direction: column; }
.client-name { font-size: 17px; font-weight: 700; color: #153c66; margin: 0 0 5px 0; }
.client-role { font-size: 13px; color: #888; font-weight: 400; }

/* --- شخصی‌سازی ناوبری Swiper (رنگ‌ها) --- */

/* رنگ نقطه‌ها (Pagination) */
.swiper-pagination-bullet {
    background-color: #ccc !important;
    opacity: 1 !important;
    width: 10px !important; height: 10px !important;
    transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
    background-color: #153c66 !important; /* رنگ سرمه‌ای برند برای نقطه فعال */
    width: 25px !important; /* کشیده شدن نقطه فعال */
    border-radius: 5px !important;
}

/* رنگ و استایل فلش‌ها (Navigation) */
.testimonial-button-next, .testimonial-button-prev {
    color: #153c66 !important; /* رنگ سرمه‌ای برند */
    background: #fff;
    width: 45px !important; height: 45px !important;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.testimonial-button-next:hover, .testimonial-button-prev:hover {
    background: #153c66 !important;
    color: #fff !important;
}
/* کوچک کردن سایز آیکون فلش‌ها */
.testimonial-button-next:after, .testimonial-button-prev:after {
    font-size: 20px !important;
    font-weight: bold;
}
/* =========================================
   اصلاحیه فوری: تنظیم دقیق جای فلش‌های اسلایدر نظرات
   ========================================= */

/* تنظیمات مشترک برای هر دو فلش */
.testimonial-button-next,
.testimonial-button-prev {
    /* 1. قرارگیری در وسط عمودی (حیاتی) */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important; /* حذف مارجین‌های پیش‌فرض سوایپر */
    
    /* 2. اطمینان از اینکه روی کارت‌ها قرار می‌گیرند */
    z-index: 99 !important;
    position: absolute !important;
}

/* تنظیمات مخصوص دسکتاپ (در موبایل که مخفی هستند) */
@media (min-width: 1024px) {
    /* تنظیم فاصله از راست */
    .testimonial-button-next {
        right: 15px !important; /* فاصله مناسب از لبه راست */
        left: auto !important;
    }

    /* تنظیم فاصله از چپ */
    .testimonial-button-prev {
        left: 15px !important; /* فاصله مناسب از لبه چپ */
        right: auto !important;
    }
}
/* =========================================
   راه حل نهایی و قطعی برای چسباندن نقاط به پایین اسلایدر
   ========================================= */

/* 1. تنظیم کانتینر اصلی اسلایدر به عنوان نقطه مرجع */
#testimonials-section .testimonial-swiper {
    /* این خط حیاتی است: باعث می‌شود نقاط خودشان را نسبت به این باکس بسنجند */
    position: relative !important;
    /* ایجاد فضای خالی اجباری در پایین اسلایدر برای قرار گرفتن نقاط */
    padding-bottom: 60px !important;
    /* اطمینان از اینکه چیزی مانع دیدن نقاط نمی‌شود */
    overflow: visible !important;
}

/* 2. تنظیم موقعیت دقیق و اجباری نقاط */
#testimonials-section .testimonial-swiper .swiper-pagination {
    /* جدا شدن از جریان عادی صفحه */
    position: absolute !important;
    /* چسبیدن دقیق به کف کانتینر مرجع */
    bottom: 10px !important;
    left: 0 !important;
    right: 0 !important;
    /* تمام عرض را بگیرد تا بتواند وسط‌چین شود */
    width: 100% !important;
    /* وسط‌چین کردن افقی نقاط */
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    /* قرار گرفتن روی تمام لایه‌ها */
    z-index: 999 !important;
    /* حذف هرگونه فاصله مزاحم از قالب */
    margin: 0 !important;
    padding: 0 !important;
}

/* تنظیمات کلی برای جلوگیری از اسکرول اضافه */
.consult-modal-overlay {
    overflow-x: hidden; /* جلوگیری از اسکرول افقی در کل صفحه */
    padding: 10px; /* فاصله از لبه‌های گوشی */
    box-sizing: border-box;
}

.consult-modal-container {
    width: 100%;
    max-width: 900px; /* حداکثر عرض در دسکتاپ */
    margin: auto;
}

/* استایل بدنه مودال */
.modern-modal-body {
    display: flex;
    flex-direction: row; /* در دسکتاپ کنار هم */
    width: 100%;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* استایل پنل‌ها */
.modal-left-panel, 
.modal-right-panel {
    flex: 1;
    padding: 20px;
    box-sizing: border-box; /* بسیار مهم برای جلوگیری از بیرون زدگی */
}

/* اصلاح اینپوت‌ها */
.input-wrapper-iso {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.input-wrapper-iso input {
    width: 100%; /* عرض کامل */
    min-width: 0; /* جلوگیری از باگ عرض در فلکس‌باکس */
}

/* --- مدیا کوئری مخصوص موبایل --- */
@media (max-width: 768px) {
    .modern-modal-body {
        flex-direction: column-reverse; /* پنل فرم بالا، پنل توضیحات پایین (اختیاری) */
        /* یا فقط: flex-direction: column; */
        width: 100%;
    }

    .modal-left-panel {
        display: none; /* معمولا در موبایل پنل توضیحات را مخفی می‌کنند تا فرم دیده شود */
        /* اگر می‌خواهی باشد، display: block بگذار */
    }

    .modal-right-panel {
        width: 100%;
        padding: 15px;
    }
}

/* --- استایل‌های لایه بیرونی (Popup Wrapper) --- */
    .consult-modal-overlay {
        position: fixed; /* ثابت شدن روی صفحه */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6); /* پس‌زمینه نیمه شفاف تیره */
        z-index: 9999; /* قرار گرفتن روی تمام عناصر سایت */
        display: flex;
        justify-content: center; /* وسط‌چین افقی */
        align-items: center; /* وسط‌چین عمودی */
        padding: 20px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    /* کلاسی که وقتی مودال باز می‌شود به آن اضافه می‌کنیم */
    .consult-modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .consult-modal-container {
        position: relative;
        width: 100%;
        max-width: 800px; /* حداکثر عرض مودال */
        transform: translateY(-50px); /* حالت اولیه برای انیمیشن */
        transition: all 0.4s ease;
    }

    .consult-modal-overlay.active .consult-modal-container {
        transform: translateY(0); /* حرکت به جای اصلی هنگام باز شدن */
    }

    /* دکمه بستن (X) */
    .close-modal-btn {
        position: absolute;
        top: -40px;
        right: 0;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
        transition: color 0.3s;
        z-index: 10001;
    }
    .close-modal-btn:hover { color: #e51c37; }


    /* --- استایل‌های محتوای داخلی (همان کد ایزوله قبلی) --- */
    #isolated-consult-modal.modern-modal-body {
        display: flex; flex-wrap: wrap; background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); direction: rtl; text-align: right; width: 100%;
    }
    #isolated-consult-modal .modal-left-panel {
        flex: 2; min-width: 250px; background: linear-gradient(135deg, #153c66 0%, #0f2b4a 100%); color: #fff; padding: 30px; position: relative; overflow: hidden;
    }
    #isolated-consult-modal .left-panel-content { position: relative; z-index: 2; }
    #isolated-consult-modal .panel-icon { font-size: 40px; color: #e51c37; margin-bottom: 15px; }
    #isolated-consult-modal h3 { font-size: 20px; font-weight: 800; margin: 0 0 10px 0; color: #fff; }
    #isolated-consult-modal p { font-size: 13px; line-height: 1.7; opacity: 0.9; margin-bottom: 20px; color: #fff; }
    #isolated-consult-modal .panel-benefits { list-style: none; padding: 0; margin: 0; }
    #isolated-consult-modal .panel-benefits li { margin-bottom: 10px; display: flex; align-items: center; font-size: 13px; }
    #isolated-consult-modal .panel-benefits li i { margin-left: 8px; color: #e51c37; background: rgba(255,255,255,0.1); padding: 4px; border-radius: 50%; font-size: 10px; }
    #isolated-consult-modal .panel-shape-1 { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.05); z-index: 1; width: 150px; height: 150px; top: -30px; left: -30px; }
    #isolated-consult-modal .panel-shape-2 { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.05); z-index: 1; width: 200px; height: 200px; bottom: -50px; right: -50px; }
    #isolated-consult-modal .modal-right-panel { flex: 3; min-width: 280px; padding: 30px; background: #fff; }
    #isolated-consult-modal .form-header h4 { font-size: 18px; color: #153c66; font-weight: 700; margin: 0 0 25px 0; text-align: center; }
    #isolated-consult-modal .form-group-iso { margin-bottom: 15px; }
    #isolated-consult-modal label { display: block; margin-bottom: 5px; font-weight: 600; color: #555; font-size: 13px; }
    #isolated-consult-modal .required { color: #e51c37; }
    #isolated-consult-modal .input-wrapper-iso { position: relative; }
    #isolated-consult-modal .input-icon-iso { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #aaa; font-size: 14px; }
    #isolated-consult-modal input[type="text"], #isolated-consult-modal input[type="tel"], #isolated-consult-modal select {
        width: 100%; padding: 10px 40px 10px 10px !important; border: 1px solid #eee !important; border-radius: 8px !important; font-family: inherit; font-size: 13px !important; background: #f9f9f9 !important; box-sizing: border-box !important; height: auto !important;
    }
    #isolated-consult-modal input:focus, #isolated-consult-modal select:focus { border-color: #153c66 !important; background: #fff !important; outline: none; }
    #isolated-consult-modal .submit-btn-iso {
        width: 100%; padding: 12px; background-color: #153c66; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; font-family: inherit;
    }
    #isolated-consult-modal .submit-btn-iso:hover { background-color: #0f2b4a; }
    #isolated-consult-modal .submit-btn-iso i { margin-right: 8px; }
    #isolated-consult-modal #formStatusMessage { margin-top: 15px; text-align: center; font-size: 13px; }
    .status-success { color: #28a745; } .status-error { color: #dc3545; }
    @media (max-width: 700px) { #isolated-consult-modal.modern-modal-body { flex-direction: column; } #isolated-consult-modal .modal-left-panel, #isolated-consult-modal .modal-right-panel { flex: auto; width: 100%; padding: 25px; } .close-modal-btn { top: -35px; right: 10px; } }


/* --- استایل‌های جدید برای گزینه‌های رادیویی --- */

/* کانتینر کلی گزینه‌ها */
#isolated-consult-modal .radio-options-container {
    display: flex;
    flex-direction: column; /* چیدمان زیر هم */
    gap: 10px; /* فاصله بین گزینه‌ها */
    margin-top: 10px;
}

/* استایل هر آیتم (لیبل قابل کلیک) */
#isolated-consult-modal .radio-option-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* هاور روی گزینه‌ها */
#isolated-consult-modal .radio-option-item:hover {
    border-color: #153c66; /* رنگ سرمه‌ای برند */
    background: #f0f4ff;
}

/* استایل خود دکمه دایره‌ای انتخاب */
#isolated-consult-modal .radio-option-item input[type="radio"] {
    margin-left: 10px; /* فاصله از متن */
    accent-color: #153c66; /* رنگی کردن دکمه انتخاب در مرورگرهای جدید */
    /* خنثی کردن استایل‌های قبلی input ها */
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* متن گزینه */
#isolated-consult-modal .radio-label-text {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}





/* =========================================
   استایل‌های ایزوله شده صفحه اینستاگرام
   (جلوگیری از تداخل با قالب اصلی)
   ========================================= */

/* تنظیمات پایه برای جلوگیری از اسکرول افقی */
#insta-page-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* --- متغیرها و تایپوگرافی --- */
#insta-page-wrapper {
    --insta-dark-blue: #153c66;
    --insta-red: #e51c37;
    --insta-text-gray: #555;
}
#insta-page-wrapper .insta-main-title { font-size: 26px; font-weight: 800; color: var(--insta-dark-blue); margin-bottom: 15px; }
#insta-page-wrapper .insta-subtitle { font-size: 1.2rem; color: var(--insta-text-gray); font-weight: 500; }
#insta-page-wrapper .insta-section-heading { font-size: 2rem; font-weight: 700; color: var(--insta-dark-blue); margin-bottom: 20px; }
#insta-page-wrapper .insta-text-sm { color: var(--insta-text-gray); font-size: 16px; margin-top: 10px; }

/* --- سکشن‌ها --- */
#insta-page-wrapper .insta-section { padding: 80px 0; }
#insta-page-wrapper .bg-light { background-color: #f9fcff; }
#insta-page-wrapper .bg-white { background-color: #ffffff; }

/* =========================================
   استایل اصلاح‌شده و قدرتمند هدر (برای رفع به‌هم‌ریختگی)
   ========================================= */

/* تنظیمات اصلی کانتینر هدر */
#insta-page-wrapper .insta-hero-brand-style {
    position: relative;
    background: linear-gradient(135deg, #153c66 0%, #0f2b4a 100%);
    padding: 80px 0 215px!important; /* افزایش فضای پایین برای جلوگیری از تداخل پترن */
    color: #ffffff;
    overflow: hidden;
    z-index: 1;
}

/* پترن پس‌زمینه */
#insta-page-wrapper .insta-hero-brand-style::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
    z-index: -1;
}

/* --- اصلاح حیاتی چیدمان (Layout Fix) --- */
/* این بخش جلوی دخالت قالب اصلی در چیدمان دو ستونه را می‌گیرد */
#insta-page-wrapper .insta-hero-brand-style .container {
    position: relative;
    z-index: 5;
}

/* اجبار کردن سطر به رفتار فلکس */
#insta-page-wrapper .insta-hero-brand-style .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

/* تنظیم دقیق ستون‌ها در دسکتاپ */
@media (min-width: 992px) {
    #insta-page-wrapper .insta-hero-brand-style .col-lg-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    /* فاصله دادن بین متن و عکس */
    #insta-page-wrapper .text-col-content {
        padding-left: 30px !important; 
    }
}


/* --- تایپوگرافی و محتوا --- */
#insta-page-wrapper .brand-badge-sm {
    display: inline-block;
    background: rgba(229, 28, 55, 0.15);
    color: #ff8fa3;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 25px;
    border: 1px solid rgba(229, 28, 55, 0.3);
    text-align: center;
}

#insta-page-wrapper .insta-main-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
    text-align: right !important;
}

#insta-page-wrapper .highlight-red {
    color: #e51c37 !important;
    text-shadow: 0 2px 15px rgba(229, 28, 55, 0.4);
}

#insta-page-wrapper .insta-subtitle {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    line-height: 1.8 !important;
    max-width: 95%;
    text-align: right !important;
}

/* --- دکمه‌ها --- */
#insta-page-wrapper .hero-btns-brand {
    display: flex !important;
    gap: 15px !important;
}

#insta-page-wrapper .btn-brand-red {
    background: linear-gradient(135deg, #e51c37, #c41229) !important;
    border: none !important;
    padding: 12px 30px !important;
    color: #fff !important;
    font-size: 16px !important;
    box-shadow: 0 10px 25px rgba(229, 28, 55, 0.3) !important;
    border-radius: 12px !important;
}
#insta-page-wrapper .btn-brand-red:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #c41229, #e51c37) !important;
}

#insta-page-wrapper .btn-brand-outline {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
    color: #fff !important;
    padding: 12px 30px !important;
    border-radius: 12px !important;
}
#insta-page-wrapper .btn-brand-outline:hover {
    background: #fff !important;
    color: var(--insta-dark-blue) !important;
    border-color: #fff !important;
    transform: translateY(-3px);
}

/* --- المان اعتماد --- */
#insta-page-wrapper .trust-element {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-top: 25px !important;
}
#insta-page-wrapper .trust-element i {
    color: #2ecc71 !important;
    font-size: 18px !important;
    margin-left: 10px !important;
    margin-top: 0 !important; /* جلوگیری از تغییر مکان آیکون توسط قالب */
}

/* --- تصویر و انیمیشن --- */
#insta-page-wrapper .img-col-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#insta-page-wrapper .hero-illustration {
    max-width: 85% !important;
    height: auto !important;
    filter: contrast(1.1) drop-shadow(0 15px 30px rgba(0,0,0,0.4));
    margin: 0 auto !important; /* وسط چین شدن تصویر */
}

@keyframes floatingBrand {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
#insta-page-wrapper .floating-anim {
    animation: floatingBrand 4s ease-in-out infinite;
}

/* --- پترن موجی پایین --- */
#insta-page-wrapper .wave-pattern-bottom {
    position: absolute;
    bottom: -2px; /* کمی پایین‌تر برای اطمینان */
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 3;
    pointer-events: none; /* جلوگیری از تداخل در کلیک */
}
#insta-page-wrapper .wave-pattern-bottom svg {
    width: 100%;
    height: auto;
    fill: #ffffff; 
}

/* --- ریسپانسیو --- */
@media (max-width: 991px) {
    #insta-page-wrapper .reversed-mobile {
        flex-direction: column-reverse !important; /* عکس بالا، متن پایین */
        text-align: center !important;
    }
    #insta-page-wrapper .insta-hero-brand-style {
        padding: 100px 0 120px !important;
    }
    #insta-page-wrapper .text-col-content {
        margin-top: 40px !important;
        padding-left: 15px !important;
    }
    #insta-page-wrapper .insta-main-title {
        font-size: 2.4rem !important;
        text-align: center !important;
    }
    #insta-page-wrapper .insta-subtitle {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    #insta-page-wrapper .hero-btns-brand,
    #insta-page-wrapper .trust-element {
        justify-content: center !important;
    }
    #insta-page-wrapper .btn-brand-red, #insta-page-wrapper .btn-brand-outline {
        width: 100% !important;
        justify-content: center !important;
    }
    #insta-page-wrapper .hero-btns-brand {
        flex-direction: column !important;
        gap: 10px !important;
    }
    #insta-page-wrapper .hero-illustration {
        max-width: 70% !important;
    }
}
/* --- کارت‌های خدمات --- */
#insta-page-wrapper .insta-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; margin-top: 50px; }
#insta-page-wrapper .insta-service-card { background: #ffffff; border-radius: 25px; padding: 35px 25px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }
#insta-page-wrapper .insta-service-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(21, 60, 102, 0.12); }
#insta-page-wrapper .icon-wrapper { font-size: 45px; color: var(--insta-dark-blue); margin-bottom: 25px; }
#insta-page-wrapper .insta-service-card h3 { font-size: 18px; font-weight: 700; color: var(--insta-dark-blue); margin-bottom: 15px; }
#insta-page-wrapper .insta-service-card p { font-size: 14px; color: #777; line-height: 1.8; }

/* --- جدول قیمت --- */
/* =========================================
   استایل جدید: اسلایدر قیمت‌گذاری ساده و شیک
   (جایگزین کدهای قبلی جدول قیمت شود)
   ========================================= */

/* تنظیمات اسلایدر قیمت */
#insta-page-wrapper .pricing-swiper {
    padding: 40px 20px 60px 20px; /* فضای کافی برای پدینگ و نقاط پایین */
}

#insta-page-wrapper .pricing-swiper .swiper-slide {
    /* تنظیم عرض اسلایدها در حالت‌های مختلف */
    width: 100%; /* موبایل: تمام عرض */
    max-width: 320px; /* حداکثر عرض هر کارت برای زیبایی */
    height: auto; /* ارتفاع بر اساس محتوا */
}

/* --- استایل پایه کارت‌ها (ساده و شیک) --- */
#insta-page-wrapper .pricing-card.simple-chic {
    background: #ffffff;
    border-radius: 25px; /* گوشه‌های گرد */
    padding: 40px 30px;
    /* حذف سایه سنگین و استفاده از بوردر ظریف */
    box-shadow: none;
    border: 1px solid #eaeaea;
    transition: all 0.3s ease;
    position: relative;
    height: 100%; /* برای هم‌اندازه شدن ارتفاع کارت‌ها */
    display: flex;
    flex-direction: column;
}

/* هاور روی کارت‌ها: فقط تغییر رنگ بوردر بدون سایه */
#insta-page-wrapper .pricing-card.simple-chic:hover {
    transform: none; /* حذف حرکت به بالا */
    box-shadow: none; /* حذف سایه */
    border-color: var(--insta-dark-blue); /* تغییر رنگ بوردر به سرمه‌ای */
}

/* --- استایل کارت ویژه (Featured Chic) --- */
#insta-page-wrapper .pricing-card.featured-chic {
    /* بوردر سرمه‌ای کمی ضخیم‌تر برای تمایز */
    border: 2px solid var(--insta-dark-blue);
    background: #fff; /* پس‌زمینه سفید خالص */
    box-shadow: none; /* بدون سایه */
    transform: none; /* بدون بزرگنمایی */
    z-index: 2;
}

/* بج (نوار) محبوب‌ترین - شیک‌تر */
#insta-page-wrapper .chic-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--insta-dark-blue); /* سرمه‌ای یکدست */
    color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none; /* بدون سایه */
    letter-spacing: 1px;
}

/* --- هدر و قیمت --- */
#insta-page-wrapper .pricing-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #f0f0f0; /* خط جداکننده خیلی محو */
}

#insta-page-wrapper .pricing-header h3 {
    font-size: 20px;
    color: var(--insta-dark-blue);
    font-weight: 700;
    margin-bottom: 10px;
}

#insta-page-wrapper .package-subtitle {
    display: block;
    font-size: 13px;
    color: #999;
    margin-bottom: 20px;
}

/* تایپوگرافی قیمت - ساده‌تر */
#insta-page-wrapper .price .amount {
    font-size: 38px;
    font-weight: 800;
    color: var(--insta-dark-blue);
    line-height: 1;
}

#insta-page-wrapper .price .currency {
    display: block;
    font-size: 14px;
    color: #888;
    margin-top: 8px;
    font-weight: 500;
}

/* --- لیست ویژگی‌ها --- */
#insta-page-wrapper .pricing-features {
    list-style: none;
    padding: 0;
    margin-bottom: auto; /* هل دادن دکمه به پایین */
    padding-bottom: 30px;
}

#insta-page-wrapper .pricing-features li {
    margin-bottom: 16px;
    font-size: 15px;
    color: #666;
    display: flex;
    align-items: center;
}

/* آیکون‌های لیست - ظریف‌تر */
#insta-page-wrapper .pricing-features li i {
    font-size: 16px;
    margin-left: 12px;
    min-width: 20px;
    text-align: center;
    color: var(--insta-dark-blue); /* آیکون سرمه‌ای به جای سبز */
}

/* --- تنظیمات نقاط اسلایدر (Pagination) --- */
#insta-page-wrapper .pricing-pagination {
    bottom: 10px !important;
}
#insta-page-wrapper .pricing-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ccc;
    opacity: 0.6;
    margin: 0 6px !important;
}
#insta-page-wrapper .pricing-pagination .swiper-pagination-bullet-active {
    background: var(--insta-dark-blue); /* رنگ نقطه فعال */
    opacity: 1;
    width: 12px;
    height: 12px;
}

/* --- ریسپانسیو --- */
@media (max-width: 768px) {
    #insta-page-wrapper .pricing-swiper .swiper-slide {
        max-width: 280px; /* کارت‌ها در موبایل کمی باریک‌تر */
    }
}

/* --- سوالات متداول FAQ --- */
#insta-page-wrapper .faq-container { margin-top: 40px; background: #fff; border-radius: 25px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); }
#insta-page-wrapper .faq-item { border-bottom: 1px solid #eee; }
#insta-page-wrapper .faq-header { padding: 25px 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
#insta-page-wrapper .faq-header h3 { font-size: 18px; color: var(--insta-dark-blue); font-weight: 700; margin: 0; }
#insta-page-wrapper .faq-icon { font-size: 16px; color: var(--insta-red); transition: transform 0.3s ease; }
#insta-page-wrapper .faq-item.active .faq-header h3 { color: var(--insta-red); }
#insta-page-wrapper .faq-item.active .faq-icon { transform: rotate(45deg); }
#insta-page-wrapper .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; padding: 0 10px; }
#insta-page-wrapper .faq-body p { padding-bottom: 25px; color: #666; line-height: 1.8; margin: 0; }

/* --- CTA نهایی --- */
#insta-page-wrapper .insta-cta-final { padding: 100px 0; background: linear-gradient(135deg, var(--insta-dark-blue), #0f2b4a); border-top-left-radius: 50px; border-top-right-radius: 50px; margin-top: 50px; }

/* --- دکمه‌ها --- */
#insta-page-wrapper .insta-btn { padding: 12px 30px; border-radius: 15px; font-weight: 700; font-size: 16px; text-decoration: none; display: inline-flex; align-items: center; transition: all 0.3s ease; cursor: pointer; border: 2px solid transparent; font-family: inherit; }
#insta-page-wrapper .insta-btn i { margin-left: 10px; font-size: 18px; }
#insta-page-wrapper .btn-red { background-color: var(--insta-red); color: #fff; box-shadow: 0 10px 20px rgba(229, 28, 55, 0.2); }
#insta-page-wrapper .btn-red:hover { background-color: #c41229; transform: translateY(-3px); box-shadow: 0 15px 30px rgba(229, 28, 55, 0.3); }
#insta-page-wrapper .btn-outline { background-color: transparent; color: var(--insta-dark-blue); border-color: var(--insta-dark-blue); }
#insta-page-wrapper .btn-outline:hover { background-color: var(--insta-dark-blue); color: #fff; transform: translateY(-3px); }
#insta-page-wrapper .full-width { width: 100%; justify-content: center; }

/* --- ریسپانسیو --- */
@media (max-width: 992px) {
    #insta-page-wrapper .pricing-card.featured { transform: scale(1); margin: 20px 0; }
}
@media (max-width: 768px) {
    #insta-page-wrapper .insta-main-title { font-size: 2rem; }
    #insta-page-wrapper .insta-hero-section { border-radius: 0 0 30px 30px; }
    #insta-page-wrapper .pricing-grid { grid-template-columns: 1fr; max-width: 500px; margin: 40px auto 0; }
    #insta-page-wrapper .faq-header h3 { font-size: 16px; }
}
/* =========================================
   اصلاحیه فوری: تنظیم جای نقاط اسلایدر قیمت
   ========================================= */

/* 1. مجبور کردن کانتینر اسلایدر قیمت به عنوان "نقطه مرجع" */
#insta-page-wrapper .pricing-swiper {
    /* این خط حیاتی است: باعث می‌شود نقاط خودشان را با این باکس تنظیم کنند */
    position: relative !important;
    /* ایجاد فضای خالی اجباری در پایین اسلایدر برای قرار گرفتن نقاط */
    padding-bottom: 60px !important;
}

/* 2. تنظیم موقعیت دقیق نقاط در پایین همین اسلایدر */
#insta-page-wrapper .pricing-swiper .pricing-pagination {
    /* جدا شدن از جریان صفحه و قرارگیری مطلق */
    position: absolute !important;
    /* چسبیدن به کف کانتینر مرجع */
    bottom: 10px !important;
    left: 0 !important;
    width: 100% !important;
    /* وسط‌چین بودن */
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 99 !important;
    margin: 0 !important;
}



/* حذف اجباری تمام سایه‌ها در کل این صفحه */
#insta-page-wrapper * {
    box-shadow: none !important;
    /* حذف سایه متن‌ها بجز جاهایی که خودمان می‌خواهیم */
    text-shadow: none !important; 
}

/* جلوگیری از اسکرول افقی و تداخل عرضی */
#insta-page-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
}

/* اطمینان از اینکه کانتینرها درست رفتار می‌کنند */
#insta-page-wrapper .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px; /* محدود کردن عرض برای خوانایی بهتر */
}

/* تنظیم دقیق‌تر ستون‌ها برای جلوگیری از به هم ریختگی */
#insta-page-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
#insta-page-wrapper .col-lg-6 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 992px) {
    #insta-page-wrapper .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}


/* --- 1. هدر جدید (Flat Hero) --- */
#insta-page-wrapper .seo-hero-section {
    position: relative;
    background: linear-gradient(135deg, #153c66 0%, #0f2b4a 100%);
    /* کاهش پدینگ پایین برای اتصال بهتر به نوار آمار */
    padding: 120px 0 150px;
    color: #ffffff;
    z-index: 1;
}

/* شکل موجی پایین هدر */
#insta-page-wrapper .hero-wave-bottom {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 1;
    pointer-events: none;
}
#insta-page-wrapper .hero-wave-bottom svg {
    width: 100%;
    height: auto;
    fill: #ffffff;
}

/* هایلایت قرمز (بدون سایه درخشان، فقط رنگ) */
#insta-page-wrapper .highlight-red-flat {
    color: #e51c37;
    font-weight: 900;
}

/* دکمه‌های فلت هدر */
#insta-page-wrapper .btn-brand-red-flat {
    background: #e51c37;
    border: none;
    color: #fff;
    padding: 15px 30px;
    border-radius: 12px;
    font-weight: 700;
    transition: all 0.3s ease;
}
#insta-page-wrapper .btn-brand-red-flat:hover {
    background: #c41229; /* کمی تیره‌تر در هاور */
    transform: translateY(-3px);
}

#insta-page-wrapper .btn-brand-outline-white-flat {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: #fff;
    padding: 15px 30px;
    border-radius: 12px;
    font-weight: 700;
    transition: all 0.3s ease;
}
#insta-page-wrapper .btn-brand-outline-white-flat:hover {
    background: #fff;
    color: var(--insta-dark-blue);
    border-color: #fff;
    transform: translateY(-3px);
}


/* --- 2. نوار آمار شناور (Flat Floating Bar) --- */
#insta-page-wrapper .stats-container-fix {
    /* استفاده از مارجین منفی کنترل شده برای قرارگیری روی موج */
    margin-top: -70px; 
    position: relative;
    z-index: 10;
}

#insta-page-wrapper .seo-stats-floating-bar.flat-bar {
    background: #fff;
    border-radius: 20px;
    /* جایگزین سایه: یک بوردر ظریف خاکستری */
    border: 1px solid #e0e0e0;
    padding: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

#insta-page-wrapper .stat-item-clean {
    display: flex;
    align-items: center;
    gap: 15px;
}
#insta-page-wrapper .stat-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
}
/* آیکون‌های فلت */
#insta-page-wrapper .stat-icon.red-flat { background: #fff0f2; color: #e51c37; border: 1px solid #ffd1d6; }
#insta-page-wrapper .stat-icon.blue-flat { background: #f0f4ff; color: #153c66; border: 1px solid #d1e0ff; }

#insta-page-wrapper .stat-number { font-size: 2.2rem; font-weight: 800; color: var(--insta-dark-blue); line-height: 1; }


//* =========================================
   استایل تمیز و حرفه‌ای باکس‌های خدمات (Flat Clean Style)
   (جایگزین استایل‌های قبلی کارت‌ها شود)
   ========================================= */

/* تنظیم فاصله بین کارت‌ها در گرید */
#insta-page-wrapper .insta-services-grid {
    gap: 35px; /* فضای کافی بین باکس‌ها برای تمیزی بیشتر */
}

/* --- استایل پایه کارت‌ها (تمیز و بدون سایه) --- */
#insta-page-wrapper .homepage-service-card.flat-card {
    background: #ffffff;
    border-radius: 24px; /* گوشه‌های نرم و مدرن */
    padding: 50px 40px; /* فضای داخلی زیاد برای حس لوکس و تمیز بودن */
    text-align: center;
    /* بوردر بسیار ظریف و محو */
    border: 1px solid #edf2f7;
    /* انیمیشن بسیار نرم برای هاور */
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    height: 100%; /* برای هم‌اندازه شدن ارتفاع تمام کارت‌ها */
    display: flex;
    flex-direction: column;
    /* تضمین حذف هرگونه سایه مزاحم */
    box-shadow: none !important;
}

/* --- استایل آیکون‌ها --- */
#insta-page-wrapper .icon-wrapper-home {
    width: 90px; height: 90px; /* کمی بزرگتر */
    margin: 0 auto 35px; /* فاصله بیشتر تا تیتر */
    border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: 38px;
    transition: all 0.3s ease;
}

/* رنگ‌بندی دقیق‌تر و شفاف‌تر برای باکس آیکون‌ها */
#insta-page-wrapper .icon-wrapper-home.red-flat {
    background: rgba(229, 28, 55, 0.06); /* قرمز بسیار شفاف */
    color: #e51c37;
    border: 1px solid rgba(229, 28, 55, 0.15); /* بوردر قرمز محو */
}
#insta-page-wrapper .icon-wrapper-home.blue-flat {
    background: rgba(21, 60, 102, 0.06); /* سرمه‌ای بسیار شفاف */
    color: #153c66;
    border: 1px solid rgba(21, 60, 102, 0.15); /* بوردر سرمه‌ای محو */
}

/* --- تایپوگرافی (متن‌ها) --- */
#insta-page-wrapper .homepage-service-card h3 {
    font-size: 21px;
    font-weight: 800; /* تیتر بولد و قدرتمند */
    color: var(--insta-dark-blue, #153c66);
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

#insta-page-wrapper .homepage-service-card p {
    font-size: 15px;
    line-height: 1.9; /* فاصله خطوط زیاد برای خوانایی عالی */
    /* استفاده از رنگ خاکستری-آبی به جای خاکستری ساده برای حرفه‌ای‌تر شدن */
    color: #667896; 
    margin-bottom: 0;
    flex-grow: 1; /* پر کردن فضای خالی پایین کارت */
}

/* --- افکت‌های هاور (Hover Effects) - نرم و بدون سایه --- */
#insta-page-wrapper .homepage-service-card.flat-card:hover {
    /* حرکت ملایم به بالا (کمتر از قبل برای وقار بیشتر) */
    transform: translateY(-7px);
    /* تغییر رنگ بوردر به رنگ اصلی برند (سرمه‌ای) */
    border-color: var(--insta-dark-blue, #153c66);
    /* تغییر جزئی رنگ پس‌زمینه برای حس تعامل */
    background: #fdfdfe;
}

/* انیمیشن آیکون هنگام هاور روی کارت */
#insta-page-wrapper .homepage-service-card.flat-card:hover .icon-wrapper-home {
    /* بزرگنمایی و چرخش جزئی آیکون */
    transform: scale(1.1) rotate(3deg);
}


/* --- 4. پکیج‌ها و قیمت‌گذاری (Flat Pricing) --- */
#insta-page-wrapper .pricing-card.flat-pricing-card {
    background: #ffffff;
    border-radius: 25px;
    padding: 40px 30px;
    /* جایگزین سایه: بوردر */
    border: 1px solid #eaeaea;
    transition: all 0.3s ease;
    position: relative;
}
#insta-page-wrapper .pricing-card.flat-pricing-card:hover {
    border-color: var(--insta-dark-blue);
}

/* کارت ویژه فلت */
#insta-page-wrapper .pricing-card.featured-flat {
    /* بوردر رنگی و ضخیم‌تر برای تمایز */
    border: 2px solid #e51c37;
    background: #fffbfc;
    z-index: 2;
}
#insta-page-wrapper .popular-badge.flat-badge {
    background: #e51c37;
    color: #fff;
    box-shadow: none !important; /* اطمینان از حذف سایه بج */
}

/* دکمه‌های فلت قیمت */
#insta-page-wrapper .btn-outline-flat {
    background: transparent;
    border: 2px solid var(--insta-dark-blue);
    color: var(--insta-dark-blue);
    padding: 12px 25px; border-radius: 12px; font-weight: 700;
}
#insta-page-wrapper .btn-outline-flat:hover {
    background: var(--insta-dark-blue); color: #fff;
}

#insta-page-wrapper .btn-red-flat {
    background: #e51c37;
    border: none;
    color: #fff;
    padding: 12px 25px; border-radius: 12px; font-weight: 700;
}
#insta-page-wrapper .btn-red-flat:hover { background: #c41229; }


/* --- 5. سایر بخش‌ها (نظرات، سوالات، CTA) --- */
/* حذف سایه از کارت‌های نظرات و افزودن بوردر */
#insta-page-wrapper .testimonial-card {
    box-shadow: none !important;
    border: 1px solid #eee;
}
/* حذف سایه از باکس سوالات متداول */
#insta-page-wrapper .faq-container {
    box-shadow: none !important;
    border: 1px solid #eee;
}

/* CTA نهایی فلت */
#insta-page-wrapper .seo-homepage-cta.flat-cta {
    background: linear-gradient(135deg, #153c66 0%, #0f2b4a 100%);
}


/* --- ریسپانسیو (تعمیر چیدمان موبایل) --- */
@media (max-width: 991px) {
    /* حذف مارجین منفی در موبایل برای جلوگیری از به‌هم‌ریختگی */
    #insta-page-wrapper .stats-container-fix {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    #insta-page-wrapper .seo-stats-floating-bar.flat-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    #insta-page-wrapper .reversed-mobile {
        flex-direction: column-reverse;
        text-align: center;
    }
    #insta-page-wrapper .hero-btns-brand {
        justify-content: center;
    }
}

/* =========================================
   استایل‌های جدید برای هدر وسط‌چین و وکتور پس‌زمینه
   ========================================= */

/* تنظیمات تکمیلی برای هدر */
#insta-page-wrapper .seo-hero-section.centered-hero {
    overflow: hidden; /* برای اینکه وکتور بیرون نزند */
    padding-top: 160px; /* فضای بالای بیشتر برای تمرکز بهتر */
}

/* --- لایه وکتور پس‌زمینه (طرح مدار) --- */
#insta-page-wrapper .hero-vector-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* پشت محتوا قرار بگیرد */
    opacity: 0.1; /* شفافیت کم برای اینکه مزاحم متن نباشد */
    pointer-events: none;
    /* استفاده از یک پترن SVG سبک (طرح مدار/تکنولوژی) */
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 1.79 4 4 4zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 1.79 4 4 4zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-size: 180px; /* اندازه پترن */
    background-position: center;
}

/* تنظیم دکمه‌ها در حالت موبایل */
@media (max-width: 576px) {
    #insta-page-wrapper .hero-btns-brand .insta-btn {
        width: 100%; /* دکمه‌ها تمام عرض شوند */
    }
}


/* =========================================
   استایل سکشن متنی بازشو (Expandable Text)
   ========================================= */

.seo-content-expandable .content-wrapper {
    position: relative;
    overflow: hidden;
    /* انیمیشن نرم برای باز و بسته شدن */
    transition: all 0.5s ease-in-out;
}

/* --- استایل متن‌ها --- */
.seo-content-expandable h2.insta-section-heading {
    font-size: 24px;
    color: var(--insta-dark-blue, #153c66); /* استفاده از متغیر رنگ یا رنگ پیشفرض */
    text-align: right;
}

.seo-content-expandable h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--insta-dark-blue, #153c66);
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: right;
}

.seo-content-expandable p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    text-align: justify; /* تراز شدن متن از دو طرف */
    margin-bottom: 20px;
}

/* --- حالت بسته (Collapsed) --- */
.seo-content-expandable .content-wrapper.collapsed {
    /* ارتفاع محدود برای نمایش فقط تیتر و حدود ۲ پاراگراف */
    max-height: 380px; 
}

/* --- لایه محو شونده (Fade Overlay) --- */
.fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* ارتفاع لایه محو شونده */
    /* گرادیانت از شفاف به سفید */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
    /* فقط در حالت بسته بودن نمایش داده شود */
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none; /* تاثیری در کلیک نداشته باشد */
}

/* --- حالت باز (Expanded) --- */
.seo-content-expandable .content-wrapper.expanded {
    /* ارتفاع زیاد برای نمایش کل متن */
    max-height: 3000px; /* عددی بزرگتر از ارتفاع واقعی متن */
}

/* مخفی کردن لایه محو شونده وقتی متن باز است */
.seo-content-expandable .content-wrapper.expanded .fade-overlay {
    opacity: 0;
}

/* تنظیم دکمه برای وسط چین بودن */
#seoReadMoreBtn {
    min-width: 200px;
    justify-content: center;
}

/* =========================================
   اصلاحیه نهایی مودال در موبایل (روش اسکرول کلی و ساده)
   ========================================= */

@media (max-width: 768px) {
    /* 1. تنظیم لایه اصلی مودال (Overlay) */
    .consult-modal-overlay {
        /* اجازه اسکرول به کل صفحه مودال */
        overflow-y: auto !important;
        /* برای اسکرول نرم در آیفون */
        -webkit-overflow-scrolling: touch !important;
        
        /* تغییر حالت نمایش برای اینکه دیگر وسط‌چین اجباری نباشد و بتواند اسکرول شود */
        display: block !important;
        
        padding: 20px 10px !important;
        /* حذف پوزیشن فیکس که مانع اسکرول می‌شود (اگر باشد) */
        /* position: absolute !important; - اگر نیاز شد این خط را فعال کنید */
    }

    /* 2. تنظیم کانتینر مودال */
    .consult-modal-container {
        /* حذف پوزیشن‌های ثابت و ترنسفورم‌ها */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        
        /* مارجین بالا و پایین برای اینکه به لبه‌ها نچسبد */
        margin: 30px auto !important;
        
        /* عرض مناسب */
        width: 95% !important;
        max-width: 500px !important;
        
        /* حذف محدودیت ارتفاع */
        height: auto !important;
        max-height: none !important;
        
        border-radius: 15px !important;
    }

    /* 3. تنظیم بدنه مودال و پنل‌ها */
    .modern-modal-body,
    .modal-left-panel,
    .modal-right-panel {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* 4. اطمینان از دیده شدن دکمه بستن */
    .close-modal-btn {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important; /* در موبایل معمولاً سمت چپ بهتر است */
        right: auto !important;
        z-index: 100 !important;
        background: rgba(255,255,255,0.8) !important;
        width: 35px !important;
        height: 35px !important;
        line-height: 35px !important;
        border-radius: 50% !important;
        text-align: center !important;
        font-size: 24px !important;
    }
}

:root {
        --wc-blue: #0056b3;       /* رنگ اصلی */
        --wc-blue-dark: #003d82;  /* رنگ هدر */
        --wc-orange: #ff9900;     /* رنگ تاکید */
        --wc-bg: #fdfdfd;
        --wc-border: #e6e9ef;
        --wc-text: #333;
        --wc-text-light: #555;
    }

    #webcando-service-table {
 
        background-color: #f8faff;
        padding: 60px 20px;
        direction: rtl;
        text-align: right;
        box-sizing: border-box;
    }

    .service-container {
        max-width: 1100px;
        margin: 0 auto;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.05);
        border: 1px solid var(--wc-border);
        overflow: hidden;
    }

    /* هدر بالای جدول */
    .service-header {
        background: linear-gradient(135deg, var(--wc-blue) 0%, var(--wc-blue-dark) 100%);
        padding: 35px;
        text-align: center;
        color: #fff;
    }

    .service-header h2 {
        font-size: 26px;
        font-weight: 800;
        margin: 0 0 10px;
    }

    .service-header p {
        font-size: 16px;
        opacity: 0.9;
        margin: 0;
    }

    /* استایل جدول */
    .wc-table {
        width: 100%;
        border-collapse: collapse;
    }

    .wc-table th, .wc-table td {
        padding: 20px 25px;
        border-bottom: 1px solid var(--wc-border);
        vertical-align: top;
        line-height: 1.8;
    }

    /* سرستون‌ها */
    .wc-table thead th {
        background-color: #f1f5f9;
        color: var(--wc-text);
        font-size: 16px;
        font-weight: 800;
        border-bottom: 2px solid #dce2e8;
    }

    /* ردیف‌های جداکننده فازها */
    .phase-header {
        background-color: #eef6ff;
        color: var(--wc-blue);
        font-size: 18px;
        font-weight: 900;
        padding: 25px !important;
        border-left: 5px solid var(--wc-orange);
    }

    /* ستون عنوان خدمت */
    .col-service {
        width: 30%;
        font-weight: 700;
        color: #222;
        font-size: 15px;
        background-color: #fbfbfb;
    }

    /* ستون توضیحات */
    .col-details {
        width: 70%;
        font-size: 14px;
        color: var(--wc-text-light);
    }

    /* لیست داخل توضیحات */
    .col-details ul {
        margin: 0;
        padding-right: 20px;
        list-style-type: square;
    }
    
    .col-details li {
        margin-bottom: 5px;
    }

    /* آیکون بولت کوچک نارنجی */
    .orange-dot {
        color: var(--wc-orange);
        margin-left: 5px;
        font-size: 18px;
        vertical-align: middle;
    }

    /* حالت موبایل (ریسپانسیو) */
    @media (max-width: 768px) {
        .wc-table thead {
            display: none;
        }
        
        .wc-table, .wc-table tbody, .wc-table tr, .wc-table td {
            display: block;
            width: 100%;
        }

        .phase-header {
            text-align: center;
            font-size: 16px;
        }

        .wc-table tr {
            border: 1px solid var(--wc-border);
            margin-bottom: 15px;
            border-radius: 8px;
            overflow: hidden;
        }

        .col-service {
            width: 100%;
            background: #f8f8f8;
            border-bottom: 1px solid #eee;
            padding: 15px;
            box-sizing: border-box;
        }

        .col-details {
            width: 100%;
            padding: 15px;
            box-sizing: border-box;
        }
    }
    
    
    :root {
        --wc-blue: #0056b3;
        --wc-blue-dark: #003d82;
        --wc-orange: #ff9900;
        --wc-text: #333;
        --wc-text-light: #555;
        --wc-bg-gray: #f9fbfd;
    }

    /* کانتینر اصلی */
    #webcando-seo-description {
    
        background-color: #fff;
        padding: 60px 20px;
        line-height: 1.8;
        color: var(--wc-text);
        text-align: justify;
    }

    .wc-desc-container {
        max-width: 1000px;
        margin: 0 auto;
    }

    /* باکس محتوا با قابلیت باز و بسته شدن */
    .seo-content-wrapper {
        position: relative;
        /* ارتفاع اولیه: طوری تنظیم شده که حدود 2 پاراگراف (حدود 350 پیکسل) دیده شود */
        max-height: 380px; 
        overflow: hidden;
        transition: max-height 0.8s ease-in-out;
    }

    /* افکت محو شدن انتهای متن (Fade Out) */
    .seo-content-wrapper::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
        pointer-events: none; /* کلیک از روی این لایه عبور کند */
        transition: opacity 0.3s;
    }

    /* کلاس فعال برای وقتی که متن باز می‌شود */
    .seo-content-wrapper.expanded {
        max-height: 5000px; /* یک ارتفاع زیاد برای نمایش کل متن */
    }

    .seo-content-wrapper.expanded::after {
        opacity: 0; /* حذف افکت محو شدن */
    }

    /* استایل تیترها و پاراگراف‌ها */
    .seo-content-wrapper h3 {
        color: var(--wc-blue);
        font-size: 24px;
        margin-top: 40px;
        margin-bottom: 15px;
        font-weight: 800;
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
    }
    
    .seo-content-wrapper h3:first-child {
        margin-top: 0;
    }

    .seo-content-wrapper h4 {
        color: var(--wc-blue-dark);
        font-size: 19px;
        margin-top: 25px;
        margin-bottom: 10px;
        font-weight: 700;
        position: relative;
        padding-right: 15px;
    }

    .seo-content-wrapper h4::before {
        content: "";
        position: absolute;
        right: 0;
        top: 8px;
        width: 8px;
        height: 8px;
        background-color: var(--wc-orange);
        border-radius: 50%;
    }

    .seo-content-wrapper p {
        margin-bottom: 20px;
        font-size: 15px;
        color: var(--wc-text-light);
    }

    /* دکمه ادامه مطلب */
    .wc-read-more-btn-container {
        text-align: center;
        margin-top: 30px;
    }

    #wc-toggle-btn {
        background-color: var(--wc-blue);
        color: #fff;
        border: none;
        padding: 12px 35px;
        font-size: 15px;
        font-family: inherit;
        font-weight: bold;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 5px 15px rgba(0, 86, 179, 0.2);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    #wc-toggle-btn:hover {
        background-color: var(--wc-blue-dark);
        transform: translateY(-2px);
    }

    #wc-toggle-btn span {
        transition: transform 0.3s;
    }

    /* چرخش فلش دکمه */
    .arrow-rotate {
        transform: rotate(180deg);
    }
    
    
    بسیار عالی. برای صفحه خدمات طراحی سایت (https://new.webcando.ir/)، جدول باید روی فرآیند ساخت سایت (از طراحی UI/UX تا کدنویسی و پشتیبانی) تمرکز داشته باشد.

این جدول دقیقاً با همان استایل قبلی (رنگ‌بندی آبی و نارنجی وب‌کندو) طراحی شده، اما محتوای آن کاملاً مختص خدمات طراحی سایت (شرکتی، فروشگاهی، اختصاصی) است.

ویژگی‌های این جدول:
تمرکز بر کیفیت فنی: اشاره به کدنویسی استاندارد، سرعت لود و امنیت.

تمرکز بر زیبایی بصری: اشاره به طراحی UI اختصاصی و تجربه کاربری (UX).

جامعیت: از مرحله وایرفریم تا تحویل و آموزش پنل مدیریت.

کد HTML و CSS (جدول خدمات طراحی سایت)
HTML

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<style>
    /* متغیرهای رنگی استاندارد وب‌کندو */
    :root {
        --wc-blue: #0056b3;       /* آبی اصلی */
        --wc-blue-dark: #003d82;  /* سرمه‌ای هدر */
        --wc-orange: #ff9900;     /* نارنجی اکشن */
        --wc-bg: #fdfdfd;
        --wc-border: #e6e9ef;
        --wc-text-main: #2b2b2b;
        --wc-text-light: #555;
    }

    #webcando-design-table {
       font-family: 'koohinoor';
        background-color: #f8faff;
        padding: 60px 20px;
        direction: rtl;
        text-align: right;
        box-sizing: border-box;
    }

    .design-container {
        max-width: 1100px;
        margin: 0 auto;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.06);
        border: 1px solid var(--wc-border);
        overflow: hidden;
    }

    /* هدر بالای جدول */
    .design-header {
        background: linear-gradient(135deg, var(--wc-blue) 0%, var(--wc-blue-dark) 100%);
        padding: 35px;
        text-align: center;
        color: #fff;
    }

    .design-header h2 {
        font-size: 20px;
        font-weight: 800;
        margin: 0 0 10px;
    }

    .design-header p {
        font-size: 13px;
        opacity: 0.95;
        margin: 0;
    }

    /* ساختار جدول */
    .wc-ds-table {
        width: 100%;
        border-collapse: collapse;
    }

    .wc-ds-table th, .wc-ds-table td {
        padding: 22px 25px;
        border-bottom: 1px solid var(--wc-border);
        vertical-align: top;
        line-height: 1.8;
    }

    /* سرستون‌ها */
    .wc-ds-table thead th {
        background-color: #f1f5f9;
        color: var(--wc-text-main);
        font-size: 16px;
        font-weight: 800;
        border-bottom: 2px solid #dce2e8;
    }

    /* ردیف‌های جداکننده فازها */
    .phase-sep {
        background-color: #eef6ff;
        color: var(--wc-blue);
        font-size: 17px;
        font-weight: 900;
        padding: 25px !important;
        border-left: 5px solid var(--wc-orange);
    }

    /* ستون عنوان خدمت */
    .col-ds-title {
        width: 30%;
        font-weight: 700;
        color: #222;
        font-size: 14px;
        background-color: #fbfbfb;
    }

    /* ستون توضیحات */
    .col-ds-desc {
        width: 70%;
        font-size: 13px;
        color: var(--wc-text-light);
    }

    /* لیست داخل توضیحات */
    .col-ds-desc ul {
        margin: 0;
        padding-right: 20px;
        list-style-type: none; /* حذف بولت پیشفرض */
    }
    
    .col-ds-desc li {
        margin-bottom: 6px;
        position: relative;
        padding-right: 15px;
    }

    .col-ds-desc li::before {
        content: "▪";
        color: var(--wc-blue);
        position: absolute;
        right: 0;
        font-size: 18px;
        line-height: 18px;
    }

    /* آیکون نارنجی کنار تیتر */
    .ds-dot {
        color: var(--wc-orange);
        margin-left: 8px;
        font-size: 18px;
        vertical-align: middle;
    }

    /* موبایل ریسپانسیو */
    @media (max-width: 768px) {
        .wc-ds-table thead {
            display: none;
        }
        
        .wc-ds-table, .wc-ds-table tbody, .wc-ds-table tr, .wc-ds-table td {
            display: block;
            width: 100%;
        }

        .phase-sep {
            text-align: center;
            font-size: 17px;
        }

        .wc-ds-table tr {
            border: 1px solid var(--wc-border);
            margin-bottom: 15px;
            border-radius: 8px;
            overflow: hidden;
        }

        .col-ds-title {
            width: 100%;
            background: #f8f8f8;
            border-bottom: 1px solid #eee;
            padding: 15px;
            box-sizing: border-box;
            color: var(--wc-blue);
        }

        .col-ds-desc {
            width: 100%;
            padding: 15px;
            box-sizing: border-box;
        }
    }
    
    /* حذف تمام سایه‌ها از کل سایت */
*, *::before, *::after {
    box-shadow: none !important;
    -webkit-box-shadow: none !important; /* برای مرورگرهای قدیمی */
}

/* حذف سایه متن‌ها (اختیاری - اگر می‌خواهید متون هم کاملا تخت باشند) */
*, *::before, *::after {
    text-shadow: none !important;
}


:root {
        --wc-blue: #0056b3;
        --wc-blue-dark: #003d82;
        --wc-orange: #ff9900;
        --wc-text: #333;
        --wc-text-light: #555;
        --wc-bg-gray: #f9fbfd;
    }

    /* کانتینر اصلی */
    #wc-design-text-section {
        font-family: 'koohinoor';
        background-color: #fff;
        padding: 60px 20px;
        line-height: 1.8;
        color: var(--wc-text);
        text-align: justify;
    }

    .wc-design-container {
        max-width: 1000px;
        margin: 0 auto;
    }

    /* باکس محتوا با قابلیت باز و بسته شدن */
    .design-content-wrapper {
        position: relative;
        /* ارتفاع اولیه: نمایش حدود 2 پاراگراف اول */
        max-height: 450px; 
        overflow: hidden;
        transition: max-height 0.8s ease-in-out;
    }

    /* افکت محو شدن انتهای متن (Fade Out) */
    .design-content-wrapper::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 120px;
        background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
        pointer-events: none;
        transition: opacity 0.3s;
    }

    /* کلاس فعال برای وقتی که متن باز می‌شود */
    .design-content-wrapper.expanded {
        max-height: 4000px; /* ارتفاع زیاد برای نمایش کل متن */
    }

    .design-content-wrapper.expanded::after {
        opacity: 0;
    }

    /* استایل تیترها و پاراگراف‌ها */
    .design-content-wrapper h3 {
        color: var(--wc-blue);
        font-size: 17px;
        margin-top: 40px;
        margin-bottom: 15px;
        font-weight: 800;
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
    }
    
    .design-content-wrapper h3:first-child {
        margin-top: 0;
    }

    .design-content-wrapper h4 {
        color: var(--wc-blue-dark);
        font-size: 16px;
        margin-top: 25px;
        margin-bottom: 10px;
        font-weight: 700;
        position: relative;
        padding-right: 15px;
    }

    .design-content-wrapper h4::before {
        content: "";
        position: absolute;
        right: 0;
        top: 9px;
        width: 6px;
        height: 6px;
        background-color: var(--wc-orange);
        border-radius: 50%;
    }

    .design-content-wrapper p {
        margin-bottom: 20px;
        font-size: 13px;
        color: var(--wc-text-light);
    }

    /* دکمه ادامه مطلب */
    .wc-read-more-btn-container {
        text-align: center;
        margin-top: 30px;
    }

    #wc-design-toggle-btn {
        background-color: var(--wc-blue);
        color: #fff;
        border: none;
        padding: 12px 24px;
        font-size: 13px;
        font-family: inherit;
        font-weight: 500;
        border-radius: 50px; /* گوشه‌های کمی گرد اما نزدیک به فلت */
        cursor: pointer;
        transition: all 0.3s;
        /* بدون سایه طبق درخواست */
        box-shadow: none !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    #wc-design-toggle-btn:hover {
        background-color: var(--wc-blue-dark);
        /* در حالت هاور هم سایه نمی‌دهیم تا تخت بماند */
    }

    #wc-design-toggle-btn span {
        transition: transform 0.3s;
    }
    
    
    @media (max-width: 768px) {
    /* اطمینان از اینکه هدر اصلی پوزیشن نسبی دارد */
    header, .elementor-section, .header-container { 
        position: relative; 
    }

    /* تنظیم موقعیت دکمه همبرگری */
    #newOpenBtn {
        position: absolute !important;
        top: 50% !important;
        left: 15px !important; /* فاصله از راست */
        transform: translateY(-50%) !important; /* وسط‌چین عمودی */
        z-index: 9999; /* قرارگیری روی همه لایه‌ها */
        margin: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ایجاد فضای خالی سمت راست برای اینکه لوگو زیر منو نرود */
    .header-logo {
        padding-right: 40px !important; 
    }
}


    /* 1. ریست کردن کل سکشن */
    #hero-force-center {
        background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #153c66 100%);
        padding: 80px 20px 60px;
        width: 100%;
        position: relative;
        box-sizing: border-box;
        direction: rtl;
        text-align: center !important; /* وسط‌چین اجباری */
        overflow: hidden;
    }

    /* 2. ساخت یک کانتینر اختصاصی (بدون استفاده از کلاس container قالب) */
    .custom-inner-wrapper {
        max-width: 1100px;
        margin: 0 auto !important; /* وسط قرار گرفتن باکس */
        display: flex;
        flex-direction: column;
        align-items: center !important; /* وسط‌چین کردن آیتم‌های داخلی */
        justify-content: center;
    }

    /* 3. استایل تیترها */
    #hero-force-center h1 {
        color: #ffffff !important;
        font-size: clamp(1.8rem, 4vw, 2.8rem); /* سایز هوشمند برای موبایل و دسکتاپ */
        font-weight: 900 !important;
        margin: 20px 0 !important;
        line-height: 1.4 !important;
        text-align: center !important;
        width: 100%;
    }

    #hero-force-center .sub-title {
        color: #4dbcec !important;
        font-size: 1.1rem;
        font-weight: bold;
        display: block;
        margin-bottom: 10px;
    }

    #hero-force-center p {
        color: #e0e0e0 !important;
        font-size: 1.1rem !important;
        line-height: 1.8 !important;
        max-width: 750px;
        margin: 0 auto 40px !important;
        text-align: center !important;
    }

    /* 4. فیکس کردن دکمه‌ها (مهم‌ترین بخش) */
    .btn-row-fix {
        display: flex !important;
        flex-direction: row !important; /* حتما کنار هم */
        justify-content: center !important; /* حتما وسط */
        align-items: center !important;
        gap: 20px !important; /* فاصله بین دکمه‌ها */
        width: 100%;
        flex-wrap: wrap; /* در موبایل برن زیر هم */
    }

    /* استایل دکمه‌ها با !important برای خنثی کردن قالب */
    .my-custom-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        height: 50px;
        padding: 0 35px !important;
        border-radius: 50px !important;
        font-family: inherit;
        font-size: 15px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        margin: 0 !important; /* حذف مارجین‌های مزاحم قالب */
        float: none !important; /* حذف فلوت مزاحم */
    }

    /* دکمه آبی (توپر) */
    .btn-blue {
        background-color: #164f84 !important;
        color: #fff !important;
        border: 2px solid #164f84 !important;
        box-shadow: 0 5px 15px rgba(22, 79, 132, 0.4);
    }
    .btn-blue:hover {
        background-color: #1e62a1 !important;
        transform: translateY(-3px);
    }

    /* دکمه شیشه‌ای (دور خط) */
    .btn-glass {
        background: transparent !important;
        color: #fff !important;
        border: 2px solid rgba(255,255,255,0.3) !important;
    }
    .btn-glass:hover {
        border-color: #fff !important;
        background: rgba(255,255,255,0.1) !important;
    }

    /* 5. استایل آمار */
    .stats-row-fix {
        display: flex !important;
        justify-content: center !important;
        gap: 50px !important;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 40px;
        margin-top: 50px;
        width: 100%;
        flex-wrap: wrap;
    }
    .stat-box { text-align: center; }
    .stat-num { display: block; font-size: 2rem; font-weight: bold; color: #4dbcec; }
    .stat-txt { font-size: 0.9rem; color: #ccc; }

    /* ریسپانسیو */
    @media (max-width: 768px) {
        .btn-row-fix { flex-direction: column !important; gap: 15px !important; }
        .my-custom-btn { width: 100%; max-width: 280px; }
        .stats-row-fix { gap: 25px !important; }
    }
    
    /* =========================================
           استایل‌های اختصاصی هدر فروشگاهی (تضمینی)
           ========================================= */
        
        /* 1. تنظیمات پس‌زمینه و باکس اصلی */
        #store-hero-force-center {
            /* گرادینت کمی متفاوت (تم بنفش تیره/آبی) برای تمایز از شرکتی */
            background: linear-gradient(135deg, #1a102e 0%, #291a45 50%, #153c66 100%);
            padding: 90px 20px 70px;
            width: 100%;
            position: relative;
            box-sizing: border-box;
            direction: rtl;
            text-align: center !important;
            overflow: hidden;
        }

        /* 2. کانتینر مرکزی */
        .store-inner-wrapper {
            max-width: 1100px;
            margin: 0 auto !important;
            display: flex;
            flex-direction: column;
            align-items: center !important;
            justify-content: center;
        }

        /* 3. تایپوگرافی */
        #store-hero-force-center h1 {
            color: #ffffff !important;
            font-size: clamp(1.8rem, 4vw, 2.8rem);
            font-weight: 900 !important;
            margin: 20px 0 !important;
            line-height: 1.4 !important;
            text-align: center !important;
            width: 100%;
            text-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        #store-hero-force-center .store-sub-title {
            color: #00d2ff !important; /* رنگ روشن‌تر برای جذابیت فروشگاهی */
            font-size: 1.2rem;
            font-weight: bold;
            display: block;
            margin-bottom: 10px;
            letter-spacing: 1px;
        }

        #store-hero-force-center p {
            color: #e0e0e0 !important;
            font-size: 1.15rem !important;
            line-height: 1.9 !important;
            max-width: 780px;
            margin: 0 auto 45px !important;
            text-align: center !important;
        }

        /* 4. فیکس دکمه‌ها */
        .store-btn-row {
            display: flex !important;
            flex-direction: row !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 20px !important;
            width: 100%;
            flex-wrap: wrap;
        }

        .store-custom-btn {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            height: 55px;
            padding: 0 40px !important;
            border-radius: 50px !important;
            font-family: inherit;
            font-size: 16px !important;
            font-weight: bold !important;
            text-decoration: none !important;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
            margin: 0 !important;
            float: none !important;
        }

        /* دکمه اصلی (Gradient جذاب برای دکمه خرید) */
        .btn-store-primary {
            background: linear-gradient(90deg, #0061ff 0%, #60efff 100%) !important;
            color: #091e38 !important; /* متن تیره روی زمینه روشن */
            border: none !important;
            box-shadow: 0 5px 20px rgba(0, 210, 255, 0.4);
        }
        .btn-store-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 210, 255, 0.6);
        }

        /* دکمه دوم */
        .btn-store-glass {
            background: transparent !important;
            color: #fff !important;
            border: 2px solid rgba(255,255,255,0.3) !important;
        }
        .btn-store-glass:hover {
            border-color: #fff !important;
            background: rgba(255,255,255,0.1) !important;
        }

        /* 5. آمار */
        .store-stats-row {
            display: flex !important;
            justify-content: center !important;
            gap: 60px !important;
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 40px;
            margin-top: 50px;
            width: 100%;
            flex-wrap: wrap;
        }
        .store-stat-box { text-align: center; }
        .store-stat-num { display: block; font-size: 2.2rem; font-weight: 800; color: #60efff; }
        .store-stat-txt { font-size: 0.95rem; color: #ccc; margin-top: 5px; display:block;}

        /* ریسپانسیو */
        @media (max-width: 768px) {
            .store-btn-row { flex-direction: column !important; gap: 15px !important; }
            .store-custom-btn { width: 100%; max-width: 300px; }
            .store-stats-row { gap: 30px !important; }
            .store-stat-num { font-size: 1.8rem; }
        }
        
        
        #corporate-cta-section {
        /* پس‌زمینه گرادینت شرکتی */
        background: linear-gradient(90deg, #153c66 0%, #203a43 100%);
        padding: 50px 20px;
        margin: 40px auto; /* فاصله از بالا و پایین */
        border-radius: 15px; /* گوشه‌های گرد */
        box-shadow: 0 10px 30px rgba(21, 60, 102, 0.2); /* سایه نرم */
        text-align: center !important;
        position: relative;
        overflow: hidden;
        direction: rtl;
        width: 95%; /* عرض سکشن نسبت به صفحه */
        max-width: 1200px;
    }

    /* پترن پس‌زمینه محو (برای زیبایی) */
    #corporate-cta-section::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        opacity: 1;
    }

    /* نگهدارنده محتوا */
    .cta-inner-wrapper {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column; /* چیدمان ستونی */
        align-items: center;
        justify-content: center;
        gap: 25px; /* فاصله متن و دکمه */
    }

    /* استایل متن */
    #corporate-cta-section h3 {
        color: #ffffff !important;
        font-size: 1.4rem !important;
        font-weight: bold !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        max-width: 800px;
    }

    /* استایل دکمه */
    .cta-btn-action {
        background-color: #4dbcec !important; /* رنگ آبی روشن برند */
        color: #fff !important;
        font-size: 1.1rem !important;
        font-weight: bold !important;
        padding: 12px 35px !important;
        border-radius: 50px !important;
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: all 0.3s ease;
        border: 2px solid #4dbcec !important;
        box-shadow: 0 5px 15px rgba(77, 188, 236, 0.4);
        cursor: pointer;
    }

    .cta-btn-action:hover {
        background-color: transparent !important;
        color: #fff !important;
        transform: translateY(-3px);
    }
    
    .cta-btn-action i {
        font-size: 1.2rem;
    }

    /* ریسپانسیو موبایل */
    @media (max-width: 768px) {
        #corporate-cta-section { 
            border-radius: 0; 
            width: 100%; 
            padding: 40px 15px;
        }
        #corporate-cta-section h3 { 
            font-size: 1.1rem !important; 
        }
        .cta-btn-action {
            width: 100%;
            justify-content: center;
        }
    }
    
    
/* =========================================
   استایل‌های صفحه تماس با ما و درباره ما
   ========================================= */

/* تنظیمات عمومی کانتینر برای این صفحات */
.page-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: inherit; /* ارث‌بری از فونت قالب */
}

/* --- هدر صفحات --- */
.page-header-section {
    text-align: center;
    margin-bottom: 50px;
}

.page-header-section h1 {
    font-size: 2.5rem;
    color: #333; /* رنگ تیره */
    margin-bottom: 10px;
}

.page-header-section p {
    color: #666;
    font-size: 1.1rem;
}

/* --- گرید تماس با ما --- */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* ستون اطلاعات کوچکتر، فرم بزرگتر */
    gap: 40px;
    align-items: start;
}

/* باکس اطلاعات تماس */
.contact-info-box {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.info-icon {
    width: 50px;
    height: 50px;
    background: #f0f4f8; /* رنگ پس‌زمینه ملایم */
    color: #007bff; /* رنگ اصلی سایت شما */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-left: 15px;
}

.info-content h4 {
    margin: 0 0 5px 0;
    font-size: 1rem;
    color: #333;
}

.info-content p {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
}

/* باکس فرم تماس */
.contact-form-box {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: bold;
}

.form-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    background: #f9f9f9;
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-input:focus {
    border-color: #007bff;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

textarea.form-input {
    resize: vertical;
    min-height: 120px;
}

/* --- استایل اصلاح شده صفحه درباره ما (بدون عکس و وسط‌چین) --- */
.about-hero {
    display: block; /* حالت گرید را حذف کردیم */
    text-align: center; /* تمام محتویات وسط‌چین شوند */
    max-width: 800px; /* محدود کردن عرض برای خوانایی بهتر */
    margin: 0 auto 80px auto; /* وسط قرار دادن باکس در صفحه */
}

/* حذف استایل عکس چون دیگر وجود ندارد */

.about-content h2 {
    font-size: 2.2rem;
    margin-bottom: 30px;
    color: #222;
    font-weight: 800;
}

.about-content p {
    line-height: 2; /* فاصله خطوط کمی بیشتر برای زیبایی */
    color: #555;
    margin-bottom: 25px;
    text-align: center; /* متن‌ها کاملاً وسط‌چین */
    font-size: 1.05rem;
}

/* آمار و ارقام */
.stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: #007bff; /* رنگ اصلی */
    padding: 40px;
    border-radius: 20px;
    color: #fff;
    margin-bottom: 80px;
    text-align: center;
}

.stat-item h3 {
    font-size: 2.5rem;
    margin: 0;
    font-weight: 800;
}

.stat-item span {
    font-size: 1rem;
    opacity: 0.9;
}

/* تیم ما */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.team-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s ease;
}

.team-card:hover {
    transform: translateY(-10px);
}

.team-img {
    height: 250px;
    background-color: #eee;
    overflow: hidden;
}

.team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-info {
    padding: 20px;
}

.team-info h4 {
    margin: 0;
    color: #333;
}

.team-info span {
    color: #888;
    font-size: 0.9rem;
    display: block;
    margin-top: 5px;
}

/* --- ریسپانسیو (موبایل) --- */
@media (max-width: 768px) {
    .contact-wrapper,
    .about-hero,
    .stats-container {
        grid-template-columns: 1fr; /* تک ستونه شدن در موبایل */
    }
    
    .contact-wrapper {
        gap: 20px;
    }
    
    .stats-container {
        gap: 30px;
    }
    
    .page-header-section h1 {
        font-size: 1.8rem;
    }
}


/* ۱. وسط‌چین کردن ستون اصلی در ردیف */
.insta-hero-brand-style .row {
    justify-content: center !important;
}

/* ۲. تبدیل ستون نیمه‌عرض به تمام‌عرض و وسط‌چین کردن متن‌ها */
.insta-hero-brand-style .text-col-content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: center !important;
}

/* ۳. وسط‌چین کردن دکمه‌ها (چون d-flex هستند) */
.insta-hero-brand-style .hero-btns-brand {
    justify-content: center !important;
}

/* ۴. وسط‌چین کردن بخش اعتماد/تضمین (چون d-flex هستند) */
.insta-hero-brand-style .trust-element {
    justify-content: center !important;
}

/* مخفی کردن زیرمنو به صورت پیش‌فرض */
.mobile-submenu {
    display: none;
    background-color: #f9f9f9; /* رنگ پس زمینه کمی متفاوت برای تمایز */
    padding-right: 20px; /* تورفتگی برای زیرمنو */
    margin-bottom: 10px;
    border-radius: 8px;
}

/* استایل آیتم‌های زیرمنو */
.mobile-submenu li a {
    font-size: 14px; /* فونت کمی کوچکتر */
    padding: 10px 0;
    color: #555;
    border-bottom: 1px dashed #eee;
}

/* نگهدارنده لینک اصلی و آیکون فلش */
.link-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* استایل دکمه باز و بسته کردن */
.submenu-toggle {
    cursor: pointer;
    padding: 10px;
    color: #113c66;
    transition: transform 0.3s ease;
}

/* چرخش آیکون وقتی منو باز است */
.submenu-toggle.active {
    transform: rotate(180deg);
}


button.mokko-btn {
    border: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    /* اگر فونت یا رنگ خاصی در تگ a بوده، اینجا به ارث می‌برد */
    display: inline-flex; /* یا block بسته به طراحی قبلی */
    justify-content: center;
    align-items: center;
}

/* حذف استایل‌های پیش‌فرض دکمه در برخی مرورگرها */
button.mokko-btn:focus {
    outline: none;
}


@media (max-width: 991px) { /* اعمال تغییرات در تبلت و موبایل */

    /* 1. مخفی کردن دکمه سفارش پروژه */
    .mokko-btn.order-btn {
        display: none !important;
    }

    /* 2. تنظیم کانتینر اصلی هدر برای اینکه لوگو سر جای خودش بماند */
    .site-header-main {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* لوگو سمت راست بماند (چون سایت RTL است) */
        min-height: 60px; /* ارتفاع تضمین شده برای هدر */
    }

    /* 3. فیکس کردن دکمه همبرگری در سمت چپ */
    #newOpenBtn {
        position: absolute !important;
        top: 50% !important;
        left: 20px !important; /* فاصله از لبه چپ صفحه */
        right: auto !important; /* حذف موقعیت راست */
        transform: translateY(-50%) !important; /* وسط چین عمودی */
        margin: 0 !important;
        z-index: 999;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* 4. تنظیم لوگو برای جلوگیری از تداخل */
    .site-header-main .logo {
        margin-right: 0 !important;
        max-width: 75%; /* جلوگیری از عریض شدن بیش از حد لوگو */
    }
}



/* کانتینر اصلی هیرو */
    .hero-realestate-pro {
        position: relative;
        height: 85vh; /* ارتفاع مناسب برای نمایشگرهای مختلف */
        min-height: 600px;
        max-height: 900px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff;
        margin-top: -140px !important; /* تنظیم برای رفتن زیر هدر شفاف */
        padding-top: 140px !important;
    }

    /* لایه 1: تصویر پس‌زمینه متحرک */
    .hero-bg-image {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        /* تصویر با کیفیت شهر در شب - لینک را با تصویر خودتان جایگزین کنید */
        background-image: url('https://webcando.ir/wp-content/uploads/2025/12/teh.webp');
        background-size: cover;
        background-position: center;
        z-index: 1;
        /* انیمیشن زوم آرام */
        animation: kenburns 30s infinite alternate ease-in-out;
    }

    /* لایه 2: اوورلی رنگ سازمانی */
    .hero-overlay-gradient {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(135deg, rgba(17, 60, 102, 0.92) 0%, rgba(10, 30, 50, 0.85) 100%);
        z-index: 2;
    }

    /* لایه 3: کانتینر پین‌های متحرک (JS) */
    .hero-markers-container {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: 3;
        pointer-events: none; /* کلیک روی پین‌ها تاثیری نداشته باشد */
    }

    /* استایل پین‌های تولید شده توسط JS */
    .map-pin {
        position: absolute;
        color: var(--accent-gold);
        font-size: 24px;
        opacity: 0;
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
        animation: pinPop 4s ease-in-out forwards;
    }

    /* لایه 4: محتوای متنی */
    .hero-content-layer {
        position: relative;
        z-index: 4;
        max-width: 900px;
        padding: 0 20px;
    }

    /* تایپوگرافی و انیمیشن متن‌ها */
    .hero-title-pro {
        font-size: 3.5rem;
        font-weight: 900;
        margin-bottom: 20px;
        line-height: 1.3;
        text-shadow: 0 5px 15px rgba(0,0,0,0.3);
        opacity: 0;
        animation: fadeInUp 1s ease-out 0.5s forwards;
    }

    .hero-subtitle-pro {
        font-size: 1.4rem;
        line-height: 1.8;
        color: #e0e0e0;
        margin-bottom: 40px;
        opacity: 0;
        animation: fadeInUp 1s ease-out 0.8s forwards;
    }

    /* استایل دکمه جدید */
    .hero-btn-pro {
        padding: 15px 40px;
        background: linear-gradient(45deg, var(--brand-blue), #1e548a);
        color: #fff;
        font-size: 1.1rem;
        font-weight: bold;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: 0.3s;
        box-shadow: 0 10px 30px rgba(17, 60, 102, 0.4);
        opacity: 0;
        animation: fadeInUp 1s ease-out 1.1s forwards;
    }

    /* افکت هاور دکمه */
    .hero-btn-pro:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(17, 60, 102, 0.6);
    }

    .hero-btn-pro::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
        transform: rotate(30deg);
        transition: 0.5s;
        opacity: 0;
    }

    .hero-btn-pro:hover::after {
        opacity: 1;
        left: 100%;
    }

    /* --- Keyframes Animations --- */
    @keyframes kenburns {
        0% { transform: scale(1); }
        100% { transform: scale(1.15); }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes pinPop {
        0% { opacity: 0; transform: scale(0.5) translateY(20px); }
        20% { opacity: 1; transform: scale(1.2) translateY(0); }
        40% { transform: scale(1); }
        80% { opacity: 1; transform: scale(1); }
        100% { opacity: 0; transform: scale(0.5) translateY(-20px); }
    }

    /* ریسپانسیو */
    @media (max-width: 768px) {
        .hero-title-pro { font-size: 2.2rem; }
        .hero-subtitle-pro { font-size: 1.1rem; }
    }
    
    
    /* --- اصلاح سایز و چیدمان آیکون‌های امکانات --- */
    #landing-realestate-wrap .service-item {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 30px !important;
    }

    #landing-realestate-wrap .service-item li {
        float: none !important; /* غیرفعال کردن شناوری قالب */
        width: 22% !important; /* عرض هر آیتم (4 تا در یک ردیف) */
        min-width: 200px !important;
        margin: 0 !important;
    }

    /* تنظیم کارت هر آیتم */
    #landing-realestate-wrap .service-item li a {
        display: flex !important;
        flex-direction: column !important; /* چیدمان ستونی (آیکون بالا، متن پایین) */
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        height: 100% !important;
        padding: 20px !important;
    }

    /* تنظیم دقیق سایز و رنگ آیکون */
    #landing-realestate-wrap .service-item i {
        font-size: 50px !important; /* سایز بزرگ آیکون */
        width: 60px !important;
        height: 60px !important;
        line-height: 60px !important;
        color: #7a00df !important; /* رنگ بنفش برند */
        margin: 0 auto 20px auto !important; /* فاصله از پایین */
        display: inline-block !important;
        float: none !important;
    }

    /* در موبایل */
    @media (max-width: 768px) {
        #landing-realestate-wrap .service-item li {
            width: 45% !important;
        }
    }
    @media (max-width: 480px) {
        #landing-realestate-wrap .service-item li {
            width: 100% !important;
        }
    }
    
    
    
    
    .lp-ai-section {
        background: linear-gradient(135deg, #0f2b4a 0%, #1a1f3c 100%);
        padding: 80px 0;
        position: relative;
        overflow: hidden;
        color: #fff;
    }
    
    /* افکت نوری پس‌زمینه */
    .lp-ai-section::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(122, 0, 223, 0.15) 0%, rgba(0,0,0,0) 70%);
        z-index: 0;
        animation: spin 20s linear infinite;
    }
    
    @keyframes spin { 100% { transform: rotate(360deg); } }

    .lp-ai-container {
        position: relative;
        z-index: 1;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .ai-header {
        text-align: center;
        margin-bottom: 50px;
    }
    
    .ai-header h2 {
        color: #fff !important;
        font-size: 2.2rem;
        font-weight: 800;
        margin-bottom: 10px;
    }
    
    .ai-header p {
        color: #a0aec0;
        font-size: 1.1rem;
    }

    .ai-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
    }

    .ai-card {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 30px;
        flex: 1;
        min-width: 300px;
        max-width: 380px;
        transition: transform 0.3s, box-shadow 0.3s;
        position: relative;
    }

    .ai-card:hover {
        transform: translateY(-10px);
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 15px 30px rgba(122, 0, 223, 0.3);
        border-color: #7a00df;
    }

    .ai-badge {
        position: absolute;
        top: 20px;
        left: 20px;
        background: #00d084;
        color: #000;
        font-size: 12px;
        font-weight: bold;
        padding: 4px 10px;
        border-radius: 20px;
        box-shadow: 0 0 10px rgba(0, 208, 132, 0.5);
    }
    
    .ai-badge.purple {
        background: #7a00df;
        color: #fff;
        box-shadow: 0 0 10px rgba(122, 0, 223, 0.5);
    }

    .ai-icon-box {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #7a00df, #4c1198);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 25px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }

    .ai-icon-box i {
        font-size: 30px;
        color: #fff;
    }

    .ai-card h3 {
        color: #fff !important;
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .ai-card p {
        color: #cbd5e0;
        line-height: 1.6;
        font-size: 0.95rem;
        margin-bottom: 0;
    }

    @media (max-width: 768px) {
        .ai-header h2 { font-size: 1.8rem; }
    }
    
    
.lp-trust-section {
        padding: 60px 0;
        background-color: #f8faff; /* رنگ زمینه خیلی روشن */
        border-top: 1px solid #eef2f7;
        border-bottom: 1px solid #eef2f7;
    }

    /* بخش آمار و ارقام */
    .trust-stats-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 50px;
        margin-bottom: 60px;
        text-align: center;
    }

    .trust-stat-item {
        flex: 1;
        min-width: 200px;
    }

    .stat-number {
        font-size: 3rem;
        font-weight: 800;
        color: #113c66; /* رنگ سازمانی */
        display: block;
        margin-bottom: 5px;
        line-height: 1;
    }

    .stat-label {
        color: #666;
        font-size: 1.1rem;
        font-weight: 500;
    }
    
    .stat-icon {
        font-size: 2rem;
        color: #7a00df;
        opacity: 0.2;
        margin-bottom: 10px;
    }

    /* بخش لوگوی مشتریان */
    .trust-logos-header {
        text-align: center;
        margin-bottom: 30px;
        color: #8898aa;
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    .logo-marquee {
        overflow: hidden;
        white-space: nowrap;
        position: relative;
    }

    .logo-marquee::before,
    .logo-marquee::after {
        content: "";
        position: absolute;
        top: 0;
        width: 100px;
        height: 100%;
        z-index: 2;
    }

    .logo-marquee::before {
        left: 0;
        background: linear-gradient(to right, #f8faff, transparent);
    }

    .logo-marquee::after {
        right: 0;
        background: linear-gradient(to left, #f8faff, transparent);
    }

    .logo-track {
        display: inline-block;
        animation: scroll 30s linear infinite;
    }

    /* استایل لوگوها (استفاده از آیکون و متن به جای عکس برای زیبایی و سرعت) */
    .client-logo-box {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0 40px;
        opacity: 0.6;
        transition: 0.3s;
        filter: grayscale(100%);
    }

    .client-logo-box:hover {
        opacity: 1;
        filter: grayscale(0%);
    }

    .client-logo-box i {
        font-size: 2rem;
        color: #113c66;
    }

    .client-logo-box span {
        font-size: 1.2rem;
        font-weight: bold;
        color: #333;
    }

    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(50%); } /* حرکت به سمت راست برای فارسی */
    }
    
    @media (max-width: 768px) {
        .stat-number { font-size: 2.5rem; }
    }    
    
    
    
    
    .lp-roi-section {
        padding: 80px 0;
        background: #fff;
        direction: rtl;
    }

    .roi-container {
        max-width: 1000px;
        margin: 0 auto;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 15px 50px rgba(0,0,0,0.08);
        padding: 40px;
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        border: 1px solid #eee;
    }

    /* ستون ورودی‌ها (اسلایدرها) */
    .roi-inputs {
        flex: 1;
        min-width: 300px;
    }

    .roi-header h2 {
        color: #113c66;
        font-weight: 800;
        margin-bottom: 10px;
        font-size: 1.8rem;
    }

    .roi-header p {
        color: #666;
        margin-bottom: 30px;
        font-size: 0.95rem;
    }

    .input-group {
        margin-bottom: 30px;
    }

    .input-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        font-weight: bold;
        color: #333;
    }

    .input-value {
        color: #7a00df;
        font-size: 1.1rem;
    }

    /* استایل اسلایدرها */
    input[type=range] {
        width: 100%;
        -webkit-appearance: none;
        background: transparent;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 24px;
        width: 24px;
        border-radius: 50%;
        background: #7a00df;
        cursor: pointer;
        margin-top: -10px;
        box-shadow: 0 2px 6px rgba(122, 0, 223, 0.4);
        transition: transform 0.2s;
    }

    input[type=range]::-webkit-slider-thumb:hover {
        transform: scale(1.1);
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px;
        cursor: pointer;
        background: #e0e0e0;
        border-radius: 5px;
    }

    /* ستون نتایج */
    .roi-results {
        flex: 0 0 350px;
        background: linear-gradient(135deg, #113c66 0%, #0a2540 100%);
        border-radius: 15px;
        padding: 30px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .roi-results::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: url('https://www.transparenttextures.com/patterns/cubes.png');
        opacity: 0.1;
    }

    .result-item {
        margin-bottom: 30px;
        position: relative;
        z-index: 2;
    }

    .result-title {
        font-size: 0.9rem;
        opacity: 0.8;
        margin-bottom: 10px;
        display: block;
    }

    .result-amount {
        font-size: 2.2rem;
        font-weight: 800;
        color: #00d084; /* رنگ سبز پول */
        display: block;
        direction: ltr; /* برای نمایش صحیح اعداد */
    }
    
    .result-amount span {
        font-size: 1rem;
        color: #fff;
        margin-left: 5px;
    }

    .roi-note {
        font-size: 0.85rem;
        background: rgba(255,255,255,0.1);
        padding: 10px;
        border-radius: 8px;
        margin-top: 10px;
    }

    @media (max-width: 768px) {
        .roi-results { flex: 1; }
        .result-amount { font-size: 1.8rem; }
    }
    
    
    
    .lp-integration-section {
        padding: 80px 0;
        background-color: #f5f7fa; /* خاکستری خیلی ملایم */
        overflow: hidden;
    }

    .int-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 50px;
    }

    /* ستون متن */
    .int-text {
        flex: 1;
        min-width: 300px;
    }

    .int-header h2 {
        color: #113c66;
        font-weight: 800;
        font-size: 2rem;
        margin-bottom: 20px;
        line-height: 1.4;
    }

    .int-desc {
        color: #666;
        font-size: 1rem;
        margin-bottom: 30px;
        line-height: 1.8;
    }

    .int-list {
        list-style: none;
        padding: 0;
    }

    .int-list li {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        background: #fff;
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
        transition: transform 0.3s;
    }

    .int-list li:hover {
        transform: translateX(-10px); /* حرکت ریز به چپ */
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    }

    .int-icon-wrapper {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 15px;
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .int-content h4 {
        margin: 0 0 5px;
        font-size: 1.1rem;
        color: #333;
    }

    .int-content p {
        margin: 0;
        font-size: 0.9rem;
        color: #888;
    }

    /* رنگ‌بندی آیکون‌ها */
    .bg-sms { background: rgba(255, 159, 67, 0.15); color: #ff9f43; }
    .bg-social { background: rgba(225, 48, 108, 0.15); color: #e1306c; }
    .bg-api { background: rgba(46, 204, 113, 0.15); color: #2ecc71; }

    /* ستون گرافیک (سمت چپ) */
    .int-visual {
        flex: 1;
        min-width: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 400px;
    }

    /* دایره مرکزی (سایت) */
    .hub-center {
        width: 120px;
        height: 120px;
        background: #113c66;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 3rem;
        z-index: 2;
        box-shadow: 0 0 0 10px rgba(17, 60, 102, 0.1), 0 0 0 25px rgba(17, 60, 102, 0.05);
        position: relative;
    }

    /* ماهواره‌ها (سرویس‌های متصل) */
    .satellite {
        position: absolute;
        width: 70px;
        height: 70px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        font-size: 1.8rem;
        z-index: 3;
        animation: float 4s ease-in-out infinite;
    }

    /* موقعیت‌دهی دستی ماهواره‌ها */
    .sat-1 { top: 20px; left: 20%; color: #e1306c; animation-delay: 0s; } /* اینستاگرام */
    .sat-2 { top: 50px; right: 15%; color: #ff9f43; animation-delay: 1s; } /* پیامک */
    .sat-3 { bottom: 40px; left: 25%; color: #2ecc71; animation-delay: 2s; } /* دیوار/خروجی */
    .sat-4 { bottom: 60px; right: 20%; color: #3498db; animation-delay: 3s; } /* درگاه بانک */

    /* خطوط اتصال */
    .connection-line {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 140px;
        height: 2px;
        background: repeating-linear-gradient(90deg, #ccc, #ccc 5px, transparent 5px, transparent 10px);
        transform-origin: 0 0;
        z-index: 1;
    }

    /* انیمیشن شناور */
    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-15px); }
        100% { transform: translateY(0px); }
    }

    @media (max-width: 768px) {
        .int-container { flex-direction: column; }
        .int-visual { height: 300px; width: 100%; }
        .satellite { width: 55px; height: 55px; font-size: 1.5rem; }
        .hub-center { width: 100px; height: 100px; font-size: 2.5rem; }
    }
    
    
    
    .lp-video-section {
        padding: 80px 0;
        background: #fff;
        text-align: center;
    }
    
    .video-wrapper {
        max-width: 900px;
        margin: 40px auto 0;
        position: relative;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        overflow: hidden;
        border: 10px solid #333; /* قاب مانیتور */
        background: #000;
    }

    /* دکمه پلی */
    .video-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.3s;
    }
    
    .video-wrapper:hover .video-overlay {
        background: rgba(0,0,0,0.2);
    }

    .play-btn {
        width: 80px;
        height: 80px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #7a00df;
        font-size: 30px;
        padding-left: 5px; /* اصلاح مرکز آیکون */
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
        animation: pulse-white 2s infinite;
    }

    @keyframes pulse-white {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    }
    
    
    #landing-realestate-wrap {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important; /* اطمینان از عدم تجاوز از عرض */
    }

    /* اطمینان از اینکه بخش هیرو باعث اسکرول نمی‌شود */
    .lp-realestate-hero {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    
    
    
    #landing-food-wrap {
        font-family: inherit;
        color: #333;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

  /* کانتینر اصلی هیرو */
    .hero-food-pro {
        position: relative;
        height: 90vh;
        min-height: 650px;
        max-height: 950px;
        background-color: var(--dark-bg);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff;
        /* فیکس کردن مشکل هدر قالب */
        margin-top: -140px !important;
        padding-top: 140px !important;
    }

    /* لایه 1: تصویر پس‌زمینه با افکت تاریک */
    .food-hero-bg {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(to bottom, rgba(11, 30, 51, 0.85), rgba(11, 30, 51, 0.95)), 
                    url('https://images.unsplash.com/photo-1559339352-11d035aa65de?q=80&w=1920&auto=format&fit=crop');
        background-size: cover;
        background-position: center;
        z-index: 1;
        /* انیمیشن زوم خیلی آهسته */
        animation: slowZoom 40s infinite alternate;
    }

    /* لایه 2: المان‌های شناور (پارالاکس) */
    .floating-elements {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: 2;
        pointer-events: none;
    }

    .float-item {
        position: absolute;
        font-size: 2rem;
        color: rgba(255, 255, 255, 0.1);
        transition: transform 0.1s ease-out; /* نرمی حرکت موس */
        filter: blur(1px);
    }
    
    /* رنگ‌بندی آیتم‌های شناور */
    .fi-orange { color: rgba(255, 159, 67, 0.6); }
    .fi-green { color: rgba(46, 204, 113, 0.4); }
    .fi-white { color: rgba(255, 255, 255, 0.3); }

    /* لایه 3: افکت بخار (Steam) */
    .steam-container {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 300px;
        z-index: 3;
        pointer-events: none;
        overflow: hidden;
    }

    .steam {
        position: absolute;
        bottom: -50px;
        width: 100px;
        height: 100px;
        background: #fff;
        border-radius: 50%;
        filter: blur(40px);
        opacity: 0;
        animation: rise 6s infinite ease-in;
    }

    .live-orders-container {
        position: absolute;
        bottom: 40px; /* فاصله از پایین */
        left: 40px;   /* قرارگیری در سمت چپ */
        top: auto;    /* حذف موقعیت قبلی */
        right: auto;  /* حذف موقعیت قبلی */
        z-index: 10;
        width: 320px;
        display: flex;
        flex-direction: column-reverse; /* پیام‌های جدید پایین‌تر قرار می‌گیرند */
        gap: 15px;
        pointer-events: none; /* کلیک روی فضای خالی تأثیری ندارد */
    }

    .order-toast {
        background: rgba(255, 255, 255, 0.15); /* پس‌زمینه شیشه‌ای */
        backdrop-filter: blur(10px); /* افکت بلور پشت */
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        padding: 15px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        gap: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        
        /* انیمیشن ورود */
        opacity: 0;
        transform: translateY(20px) scale(0.95);
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* افکت فنری */
        
        /* خط رنگی سمت راست برای زیبایی */
        border-right: 4px solid #00d084; 
    }

    .order-toast.show {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* استایل آیکون و متن داخل نوتیفیکیشن */
    .ot-icon {
        width: 45px;
        height: 45px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #113c66;
        font-size: 1.2rem;
        flex-shrink: 0;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .ot-text {
        text-align: right;
    }

    .ot-text h5 { 
        margin: 0 0 3px 0; 
        font-size: 0.95rem; 
        font-weight: bold; 
        color: #fff; /* متن سفید برای کنتراست بهتر روی زمینه تیره */
        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
    
    .ot-text span { 
        font-size: 0.8rem; 
        color: #e0e0e0; 
        display: block;
    }

    /* --- ریسپانسیو (موبایل) --- */
    @media (max-width: 768px) {
        .live-orders-container {
            left: 50%;
            transform: translateX(-50%); /* وسط‌چین در موبایل */
            bottom: 20px;
            width: 90%;
            align-items: center;
        }
        
        .order-toast {
            width: 100%;
            background: rgba(11, 30, 51, 0.9); /* در موبایل تیره‌تر برای خوانایی بهتر */
        }
    }

    /* لایه 5: محتوای اصلی */
    .food-content-layer {
        position: relative;
        z-index: 5;
        max-width: 900px;
        padding: 0 20px;
    }

    .hero-badge {
        background: rgba(255, 159, 67, 0.2);
        color: var(--food-orange);
        border: 1px solid var(--food-orange);
        padding: 8px 20px;
        border-radius: 50px;
        font-size: 0.9rem;
        display: inline-block;
        margin-bottom: 20px;
        font-weight: bold;
        animation: pulseBadge 2s infinite;
    }

    .food-title-pro {
        font-size: 3.5rem;
        font-weight: 900;
        margin-bottom: 20px;
        line-height: 1.3;
        text-shadow: 0 5px 20px rgba(0,0,0,0.5);
    }
    
    .food-title-pro span { color: var(--food-orange); }

    .food-subtitle-pro {
        font-size: 1.3rem;
        line-height: 1.8;
        color: #ddd;
        margin-bottom: 40px;
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
    }

    /* دکمه اصلی */
    .btn-food-hero {
        background: var(--food-orange);
        color: #fff;
        padding: 18px 45px;
        font-size: 1.2rem;
        font-weight: bold;
        border-radius: 50px;
        border: none;
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 0 0 0 0 rgba(255, 159, 67, 0.7);
        animation: pulseOrange 2s infinite;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .btn-food-hero:hover {
        background: #e67e22;
        transform: translateY(-5px);
    }

    /* انیمیشن‌ها */
    @keyframes slowZoom {
        0% { transform: scale(1); }
        100% { transform: scale(1.1); }
    }

    @keyframes rise {
        0% { bottom: -50px; transform: translateX(0); opacity: 0; }
        50% { opacity: 0.4; }
        100% { bottom: 300px; transform: translateX(-20px) scale(2); opacity: 0; }
    }

    @keyframes pulseOrange {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 159, 67, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(255, 159, 67, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 159, 67, 0); }
    }
    
    @keyframes pulseBadge {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }

    /* ریسپانسیو */
    @media (max-width: 768px) {
        .food-title-pro { font-size: 2.2rem; }
        .live-orders-container { display: none; /* مخفی کردن نوتیفیکیشن در موبایل */ }
        .hero-food-pro { height: auto; min-height: 600px; }
    }

    /* --- 2. آیکون‌های خدمات (منوی دیجیتال و...) --- */
    .food-services {
        padding: 80px 0;
        background: #fff;
        text-align: center;
    }

    .fs-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        margin-top: 40px;
    }

    .fs-card {
        flex: 1;
        min-width: 250px;
        max-width: 300px;
        padding: 30px;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: 0.3s;
        border: 1px solid #f0f0f0;
    }

    .fs-card:hover {
        transform: translateY(-10px);
        border-color: #ff9f43;
    }

    .fs-icon {
        width: 80px;
        height: 80px;
        background: #fff3e0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 35px;
        color: #ff9f43;
    }

    /* --- 3. ماشین حساب صرفه‌جویی (Commission Saver) --- */
    .commission-section {
        background: #113c66;
        padding: 80px 0;
        color: #fff;
        position: relative;
        overflow: hidden;
    }

    .comm-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 50px;
        background: rgba(255,255,255,0.05);
        padding: 40px;
        border-radius: 20px;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255,255,255,0.1);
    }

    .comm-text { flex: 1; min-width: 300px; }
    
    .comm-calc-box {
        flex: 1;
        min-width: 300px;
        background: #fff;
        padding: 30px;
        border-radius: 15px;
        color: #333;
    }

    .range-slider {
        width: 100%;
        margin: 20px 0;
        -webkit-appearance: none;
        height: 8px;
        border-radius: 5px;
        background: #ddd;
        outline: none;
    }
    
    .range-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #ff9f43;
        cursor: pointer;
    }

    .saved-amount {
        font-size: 2.5rem;
        font-weight: 800;
        color: #00d084;
        display: block;
        margin-top: 10px;
    }

    /* --- 4. بخش منوی دیجیتال (Visual) --- */
    .qr-menu-section {
        padding: 80px 0;
        background: #f9f9f9;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    
    .qr-img {
        flex: 1;
        min-width: 300px;
        text-align: center;
    }
    
    .qr-img img {
        max-width: 80%;
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        transform: rotate(-3deg);
        border: 5px solid #fff;
    }

    .qr-content {
        flex: 1;
        min-width: 300px;
        padding: 0 40px;
    }

    /* --- 5. تعرفه‌ها --- */
    .food-pricing { padding: 80px 0; }
    
    .fp-card {
        border: 1px solid #eee;
        border-radius: 15px;
        padding: 30px;
        text-align: center;
        transition: 0.3s;
        background: #fff;
    }
    
    .fp-card.popular {
        border: 2px solid #ff9f43;
        transform: scale(1.05);
        box-shadow: 0 10px 40px rgba(255, 159, 67, 0.2);
        position: relative;
    }

    .fp-badge {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        background: #ff9f43;
        color: #fff;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 0.9rem;
    }

    /* --- ریسپانسیو --- */
    @media (max-width: 768px) {
        .lp-food-hero h1 { font-size: 2rem !important; }
        .comm-container { padding: 20px; }
        .fp-card.popular { transform: scale(1); margin: 20px 0; }
    }
    
    
    .lp-kitchen-flow {
        padding: 80px 0;
        background: linear-gradient(to bottom, #f8f9fa, #fff);
        text-align: center;
        overflow: hidden;
        direction: rtl; /* تاکید بر راست‌چین بودن */
    }

    .flow-container {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
        margin-top: 60px;
        position: relative;
        flex-wrap: nowrap;
    }

    /* کارت‌های مراحل */
    .flow-step {
        width: 280px;
        background: #fff;
        padding: 30px 20px;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.06);
        position: relative;
        z-index: 2;
        border: 1px solid #eee;
        transition: 0.3s;
    }

    .flow-step:hover {
        transform: translateY(-10px);
        border-color: #ff9f43;
        box-shadow: 0 20px 50px rgba(255, 159, 67, 0.15);
    }

    /* آیکون‌ها */
    .step-icon-box {
        width: 90px;
        height: 90px;
        background: #fff3e0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 36px;
        color: #ff9f43;
        position: relative;
    }

    .step-icon-box::after {
        content: '';
        position: absolute;
        width: 100%; height: 100%;
        border-radius: 50%;
        border: 2px solid #ff9f43;
        opacity: 0;
        animation: pulse-ring 2s infinite;
    }

    /* خط اتصال دهنده */
    .flow-connector {
        flex: 1;
        height: 4px;
        background: #e0e0e0;
        margin-top: 45px;
        position: relative;
        min-width: 50px;
        max-width: 100px;
    }

    /* --- اصلاح جهت حرکت (راست به چپ) --- */
    .data-packet {
        position: absolute;
        top: -3px;
        right: 0; /* شروع از سمت راست */
        width: 10px;
        height: 10px;
        background: #113c66;
        border-radius: 50%;
        box-shadow: 0 0 10px #113c66;
        animation: data-travel-rtl 2s linear infinite; /* انیمیشن جدید */
    }

    /* استایل پرینتر */
    .printer-anim { position: relative; }
    
    .receipt-paper {
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 0;
        background: #fff;
        border: 1px solid #ddd;
        z-index: -1;
        animation: print-action 3s infinite ease-in-out;
    }
    
    .receipt-paper::after {
        content: '...';
        color: #999;
        font-size: 10px;
        display: block;
        text-align: center;
        line-height: 10px;
        margin-top: 5px;
    }

    /* تایپوگرافی */
    .flow-step h4 {
        color: #113c66;
        font-weight: 800;
        margin-bottom: 10px;
        font-size: 1.2rem;
    }

    .flow-step p {
        color: #666;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .tech-badges {
        margin-top: 50px;
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .tech-badge {
        background: #e3f2fd;
        color: #1565c0;
        padding: 8px 20px;
        border-radius: 50px;
        font-size: 0.9rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* --- انیمیشن اصلاح شده برای دسکتاپ (افقی) --- */
    @keyframes data-travel-rtl {
        0% { right: 0; opacity: 0; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { right: 100%; opacity: 0; } /* حرکت به سمت چپ (100% راست) */
    }

    @keyframes pulse-ring {
        0% { transform: scale(1); opacity: 0.7; }
        100% { transform: scale(1.5); opacity: 0; }
    }

    @keyframes print-action {
        0% { height: 0; opacity: 0; }
        20% { opacity: 1; }
        80% { height: 40px; opacity: 1; }
        100% { height: 40px; opacity: 0; }
    }

    /* ریسپانسیو (موبایل) - حرکت عمودی */
    @media (max-width: 900px) {
        .flow-container {
            flex-direction: column;
            align-items: center;
            gap: 40px;
        }
        
        .flow-connector {
            width: 4px;
            height: 60px;
            margin: 0;
            min-height: 50px;
        }
        
        .data-packet {
            right: auto; /* حذف تنظیمات افقی */
            left: -3px;  /* وسط چین کردن روی خط عمودی */
            top: 0;
            animation: data-travel-vertical 2s linear infinite; /* انیمیشن عمودی */
        }
        
        /* انیمیشن عمودی (بالا به پایین) برای موبایل */
        @keyframes data-travel-vertical {
            0% { top: 0; opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }
    }
    
    
    
    .lp-live-demo {
        padding: 80px 0;
        background: #fff;
        overflow: hidden;
        position: relative;
    }

    /* پس‌زمینه مورب تزئینی */
    .lp-live-demo::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #fff 50%, #fdf2e9 50%);
        z-index: 0;
    }

    .demo-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 50px;
        position: relative;
        z-index: 2;
    }

    /* --- بخش متنی و QR (راست) --- */
    .demo-text-box {
        flex: 1;
        min-width: 300px;
    }

    .demo-text-box h2 {
        color: #113c66;
        font-weight: 800;
        font-size: 2.2rem;
        margin-bottom: 20px;
    }

    .demo-text-box p {
        color: #666;
        font-size: 1.1rem;
        line-height: 1.8;
        margin-bottom: 40px;
    }

    /* باکس QR کد */
    .qr-wrapper {
        display: inline-flex;
        align-items: center;
        gap: 20px;
        background: #fff;
        padding: 20px;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        position: relative;
    }

    .qr-frame {
        width: 150px;
        height: 150px;
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        border: 2px solid #333;
    }

    .qr-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* خط اسکن لیزری */
    .scan-line {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: #ff9f43;
        box-shadow: 0 0 10px #ff9f43;
        animation: scan-move 2.5s infinite linear;
    }

    .qr-cta-text {
        font-weight: bold;
        color: #333;
        font-size: 1.1rem;
    }
    
    .qr-cta-text span {
        display: block;
        color: #ff9f43;
        font-size: 0.9rem;
        margin-top: 5px;
    }

    /* --- بخش موبایل (چپ) --- */
    .demo-phone-box {
        flex: 1;
        min-width: 300px;
        display: flex;
        justify-content: center;
    }

    /* شبیه‌سازی گوشی با CSS */
    .css-phone {
        width: 300px;
        height: 600px;
        background: #000;
        border-radius: 40px;
        padding: 10px;
        position: relative;
        box-shadow: 0 30px 60px rgba(0,0,0,0.25);
        border: 4px solid #333;
    }
    
    /* دکمه اختصاصی */
    .btn-food-cta {
        background: #ff9f43;
        color: #fff;
        padding: 15px 40px;
        border-radius: 50px;
        font-size: 1.2rem;
        font-weight: bold;
        border: none;
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 0 10px 25px rgba(255, 159, 67, 0.4);
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .btn-food-cta:hover {
        background: #e67e22;
        transform: translateY(-5px);
    }
    
    
    /* --- اصلاحیه بخش اسکنر QR Code --- */

    .qr-frame {
        width: 150px;
        height: 150px;
        position: relative !important; /* خیلی مهم */
        overflow: hidden !important;   /* خیلی مهم: لیزر از کادر بیرون نزند */
        border-radius: 15px;
        border: 2px solid #333;
        background: #fff; /* رنگ زمینه سفید برای لود شدن */
        z-index: 1;
    }

    .qr-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        position: relative;
        z-index: 1; /* عکس پایین */
    }

    /* خط لیزری اسکنر */
    .scan-line {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px; /* ضخامت خط */
        background: #ff9f43; /* رنگ نارنجی */
        box-shadow: 0 0 15px 2px rgba(255, 159, 67, 0.8); /* درخشش زیاد */
        z-index: 10 !important; /* حتما روی عکس باشد */
        animation: scanner-move 2.5s linear infinite; /* انیمیشن */
        opacity: 0.8;
    }

    /* تعریف انیمیشن حرکت */
    @keyframes scanner-move {
        0% {
            top: -10%;
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            top: 110%;
            opacity: 0;
        }
    }
    
    
    
    /* کانتینر اصلی */
    .rest-faq-section {
        padding: 80px 0;
        background-color: #f4f6f9;
        direction: rtl;
    }

    .rest-faq-header {
        text-align: center;
        margin-bottom: 50px;
    }

    .rest-faq-header h2 {
        color: #113c66;
        font-weight: 800;
        font-size: 2rem;
        margin-bottom: 15px;
    }

    /* آیتم‌های آکاردئون */
    .rest-faq-item {
        background: #fff;
        border-radius: 15px;
        margin-bottom: 20px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
        border: 1px solid #eee;
        overflow: hidden;
        transition: 0.3s;
    }

    .rest-faq-item.active {
        border-color: #ff9f43; /* رنگ نارنجی وقتی باز است */
        box-shadow: 0 10px 25px rgba(255, 159, 67, 0.1);
    }

    /* دکمه سوال */
    .rest-faq-question {
        width: 100%;
        text-align: right;
        padding: 20px 25px;
        background: none;
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-size: 1.1rem;
        font-weight: bold;
        color: #333;
        transition: 0.3s;
        outline: none;
    }

    .rest-faq-question:hover {
        color: #ff9f43;
    }

    /* آیکون مثبت/منفی */
    .rest-icon-box {
        width: 30px;
        height: 30px;
        background: #fff3e0;
        color: #ff9f43;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        transition: 0.3s;
    }

    /* چرخش آیکون وقتی باز است */
    .rest-faq-item.active .rest-icon-box {
        transform: rotate(45deg); /* تبدیل + به × */
        background: #ff9f43;
        color: #fff;
    }

    /* بدنه پاسخ */
    .rest-faq-answer {
        display: none; /* پیش‌فرض مخفی */
        padding: 0 25px 25px 25px;
        color: #666;
        line-height: 1.8;
        font-size: 0.95rem;
        border-top: 1px solid transparent;
    }

    .rest-faq-item.active .rest-faq-answer {
        border-top-color: #f0f0f0;
        padding-top: 20px;
    }
    
    
    
    #landing-clinic-wrap {
        font-family: inherit;
        color: var(--cl-dark);
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        direction: rtl;
        background: #fff;
    }

    /* کانتینر اصلی هیرو */
    .hero-clinic-pro {
        position: relative;
        height: 90vh;
        min-height: 650px;
        max-height: 950px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff;
        /* فیکس کردن مشکل هدر قالب */
        margin-top: -140px !important;
        padding-top: 140px !important;
        background: var(--clinic-teal-dark);
    }

    /* لایه 1: تصویر پس‌زمینه با کیفیت */
    .clinic-hero-bg {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        /* تصویر پیشنهادی: روشن‌تر و کلینیکال‌تر */
        background-image: url('https://images.unsplash.com/photo-1629909613654-28e377c37b09?q=80&w=1920&auto=format&fit=crop');
        background-size: cover;
        background-position: center center;
        z-index: 1;
        filter: brightness(0.8); /* کمی تیره‌تر برای خوانایی متن */
        transform: scale(1.05); /* زوم اولیه برای افکت حرکت */
        transition: transform 0.5s ease-out;
    }

    /* لایه 2: گرادینت و افکت نوری (Aurora) */
    .clinic-hero-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: 2;
        background: linear-gradient(135deg, rgba(0, 61, 66, 0.9) 0%, rgba(0, 109, 119, 0.6) 100%);
        overflow: hidden;
    }

    /* افکت نور متحرک */
    .clinic-hero-overlay::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(197, 164, 126, 0.2) 0%, rgba(0, 0, 0, 0) 60%);
        animation: auroraMove 15s infinite linear;
    }

    /* لایه 3: ذرات معلق (Particles) */
    .clinic-particles-container {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: 3;
        pointer-events: none;
    }

    .particle-dot {
        position: absolute;
        background: #fff;
        border-radius: 50%;
        opacity: 0.6;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        animation: floatParticle infinite ease-in-out;
    }
    
    /* ذرات طلایی */
    .particle-dot.gold {
        background: var(--clinic-gold);
        box-shadow: 0 0 10px rgba(197, 164, 126, 0.8);
    }

    /* لایه 4: محتوای متنی */
    .clinic-content-layer {
        position: relative;
        z-index: 10;
        max-width: 900px;
        padding: 0 20px;
    }

    /* تایپوگرافی */
    .clinic-title-pro {
        font-size: 3.8rem;
        font-weight: 900;
        margin-bottom: 20px;
        line-height: 1.3;
        opacity: 0;
        animation: fadeUp 1s ease-out 0.5s forwards;
    }

    /* استایل کلمات کلیدی طلایی */
    .clinic-title-pro span.gold-text {
        color: var(--clinic-gold);
        font-family: serif; /* فونت لوکس‌تر */
        font-style: italic;
        position: relative;
        display: inline-block;
    }
    
    /* افکت درخشش متن طلایی */
    .clinic-title-pro span.gold-text::after {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        animation: shimmerText 3s infinite;
    }

    .clinic-subtitle-pro {
        font-size: 1.3rem;
        line-height: 1.8;
        color: #e0e0e0;
        margin-bottom: 40px;
        opacity: 0;
        animation: fadeUp 1s ease-out 0.8s forwards;
    }

    /* دکمه لوکس */
    .btn-clinic-hero {
        background: linear-gradient(45deg, var(--clinic-gold), #e0c3a0);
        color: #fff;
        padding: 16px 50px;
        font-size: 1.1rem;
        font-weight: bold;
        border: none;
        cursor: pointer;
        transition: 0.4s;
        position: relative;
        overflow: hidden;
        letter-spacing: 1px;
        opacity: 0;
        animation: fadeUp 1s ease-out 1.1s forwards;
        box-shadow: 0 10px 30px rgba(197, 164, 126, 0.3);
    }

    .btn-clinic-hero:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(197, 164, 126, 0.5);
    }

    .btn-clinic-hero::before {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        transition: 0.5s;
    }

    .btn-clinic-hero:hover::before {
        left: 100%;
    }

    /* انیمیشن‌ها */
    @keyframes auroraMove {
        0% { transform: rotate(0deg) translate(0, 0); }
        50% { transform: rotate(180deg) translate(50px, 50px); }
        100% { transform: rotate(360deg) translate(0, 0); }
    }

    @keyframes floatParticle {
        0%, 100% { transform: translateY(0) translateX(0); }
        50% { transform: translateY(-30px) translateX(15px); }
    }

    @keyframes shimmerText {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }

    @keyframes fadeUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* ریسپانسیو */
    @media (max-width: 768px) {
        .clinic-title-pro { font-size: 2.5rem; }
        .clinic-subtitle-pro { font-size: 1.1rem; }
        .hero-clinic-pro { min-height: 600px; }
    }

.btn-cl-gold {
    background: linear-gradient(45deg,var(--cl-gold),#e0c3a0);
    color: #fff;
    padding: 15px 45px;
    border-radius: 0;
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden
}

.btn-cl-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(197,164,126,.4)
}

    /* --- 2. خدمات تخصصی (Grid) --- */
    .cl-services {
        padding: 100px 0;
        background: var(--cl-bg);
        text-align: center;
    }

    .cl-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        margin-top: 50px;
    }

    .cl-card {
        flex: 1;
        min-width: 280px;
        max-width: 350px;
        background: #fff;
        padding: 40px 30px;
        border: 1px solid #eee;
        transition: 0.4s;
        position: relative;
    }

    .cl-card:hover {
        box-shadow: 0 20px 50px rgba(0,0,0,0.05);
        transform: translateY(-10px);
        border-bottom: 3px solid var(--cl-gold);
    }

    .cl-icon {
        font-size: 3rem;
        color: var(--cl-teal);
        margin-bottom: 20px;
    }

    .cl-card h3 {
        font-size: 1.4rem;
        margin-bottom: 15px;
        color: var(--cl-dark);
    }

    /* --- 3. ابزار مقایسه قبل و بعد (Interactive Hook) --- */
    .cl-ba-section {
        padding: 80px 0;
        background: #fff;
    }

    .ba-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 50px;
    }

    .ba-text { flex: 1; min-width: 300px; }
    
    .ba-visual {
        flex: 1;
        min-width: 300px;
        position: relative;
    }

    /* استایل اسلایدر مقایسه */
    .img-comp-container {
        position: relative;
        height: 400px; /* ارتفاع عکس */
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }

    .img-comp-img {
        position: absolute;
        width: auto;
        height: auto;
        overflow: hidden;
    }

    .img-comp-img img {
        display: block;
        height: 400px; /* باید با ارتفاع کانتینر یکی باشد */
        width: 100%;   /* عرض تصویر کامل */
        object-fit: cover;
    }

    .img-comp-slider {
        position: absolute;
        z-index: 9;
        cursor: ew-resize;
        width: 40px;
        height: 40px;
        background-color: var(--cl-gold);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border: 2px solid #fff;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }
    
    .img-comp-slider::before {
        content: '\f337'; /* آیکون فلش */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }

    /* --- 4. ماشین حساب درآمد (Booking ROI) --- */
    .cl-calc-section {
        padding: 80px 0;
        background: var(--cl-teal);
        color: #fff;
        text-align: center;
    }

    .cl-calc-box {
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.2);
        max-width: 800px;
        margin: 40px auto 0;
        padding: 40px;
        border-radius: 20px;
    }

    .calc-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        align-items: center;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 20px;
    }

    .cl-input {
        background: transparent;
        border: 1px solid rgba(255,255,255,0.3);
        color: #fff;
        padding: 10px;
        border-radius: 5px;
        text-align: center;
        font-size: 1.1rem;
        width: 150px;
    }

    .cl-result {
        font-size: 2.5rem;
        font-weight: bold;
        color: var(--cl-gold);
        margin-top: 20px;
        display: block;
    }

    /* --- 5. گالری موبایلی (Clean Style) --- */
    .cl-portfolio {
        padding: 100px 0;
        background: #f9f7f2;
        overflow: hidden;
    }

    .cl-scroller {
        display: flex;
        overflow-x: auto;
        gap: 30px;
        padding: 40px 5%;
        scrollbar-width: none;
        cursor: grab;
    }
    
    .cl-scroller::-webkit-scrollbar { display: none; }

    .cl-phone-frame {
        width: 280px;
        height: 550px;
        background: #fff;
        border-radius: 40px;
        border: 8px solid #f0f0f0; /* قاب سفید/طوسی روشن */
        box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        transition: 0.3s;
    }

    .cl-phone-frame:hover { transform: translateY(-15px); }

    .cl-screen-img {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: top;
    }

    /* --- 6. تعرفه‌ها --- */
    .cl-pricing { padding: 80px 0; background: #fff; }
    
    .cl-price-card {
        flex: 1;
        min-width: 300px;
        border: 1px solid #eee;
        padding: 40px;
        text-align: center;
        transition: 0.3s;
    }
    
    .cl-price-card.featured {
        background: var(--cl-dark);
        color: #fff;
        transform: scale(1.05);
        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    }

    .cl-price-card.featured h3, 
    .cl-price-card.featured li { color: #fff; }
    
    .cl-price-card.featured .cl-amount { color: var(--cl-gold); }

    /* انیمیشن */
    @keyframes floatUp {
        0% { transform: translateY(100vh); opacity: 0; }
        50% { opacity: 0.5; }
        100% { transform: translateY(-10vh); opacity: 0; }
    }

    /* ریسپانسیو */
    @media (max-width: 768px) {
        .cl-hero h1 { font-size: 2.2rem !important; }
        .ba-container { flex-direction: column; }
        .calc-row { flex-direction: column; gap: 10px; }
        .cl-price-card.featured { transform: scale(1); }
    }
    
    
    
    /* --- استایل بخش سئو و پنل --- */
    
    /* 1. بخش سئو (Google Simulator) */
    .cl-seo-section {
        padding: 80px 0;
        background: #fff;
        overflow: hidden;
    }

    .seo-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 50px;
        flex-wrap: wrap;
    }

    .seo-text { flex: 1; min-width: 300px; }
    
    .seo-visual {
        flex: 1;
        min-width: 300px;
        position: relative;
    }

    /* شبیه‌سازی کارت گوگل */
    .google-card {
        background: #fff;
        border: 1px solid #dfe1e5;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        max-width: 400px;
        margin: 0 auto;
        position: relative;
    }

    .g-link { color: #202124; font-size: 0.9rem; display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
    .g-title { color: #1a0dab; font-size: 1.3rem; font-weight: 400; margin-bottom: 5px; cursor: pointer; }
    .g-title:hover { text-decoration: underline; }
    .g-desc { color: #4d5156; font-size: 0.9rem; line-height: 1.6; }
    
    /* افکت رتبه یک */
    .rank-badge {
        position: absolute;
        top: -15px;
        right: -15px;
        background: #34a853; /* سبز گوگل */
        color: #fff;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.2rem;
        box-shadow: 0 5px 15px rgba(52, 168, 83, 0.3);
        animation: bounceIn 2s infinite;
    }

    /* 2. بخش پنل مدیریت (CRM) */
    .cl-crm-section {
        padding: 80px 0;
        background: var(--cl-bg); /* رنگ پس زمینه کرم روشن */
        text-align: center;
    }

    .crm-preview {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.1);
        max-width: 900px;
        margin: 40px auto 0;
        overflow: hidden;
        border: 1px solid #eee;
    }

    .crm-header {
        background: var(--cl-teal);
        padding: 15px 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
    }

    .crm-body {
        padding: 30px;
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .crm-sidebar { width: 60px; display: flex; flex-direction: column; gap: 20px; align-items: center; border-left: 1px solid #eee; padding-left: 20px; }
    .crm-icon { color: #ccc; font-size: 1.2rem; cursor: pointer; }
    .crm-icon.active { color: var(--cl-teal); }

    .crm-content { flex: 1; text-align: right; }

    /* کارت‌های نوبت */
    .appointment-card {
        background: #fcfcfc;
        border: 1px solid #eee;
        border-right: 4px solid var(--cl-gold);
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: 0.3s;
    }
    
    .appointment-card:hover { transform: translateX(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

    .pt-info h4 { margin: 0 0 5px 0; font-size: 1rem; color: #333; }
    .pt-info span { font-size: 0.8rem; color: #888; }
    .pt-status { background: #e0f2f1; color: var(--cl-teal); padding: 5px 10px; border-radius: 5px; font-size: 0.8rem; font-weight: bold; }

    /* 3. سوالات متداول (FAQ) */
    .cl-faq-section { padding: 80px 0; background: #fff; }
    
    .cl-faq-item {
        border-bottom: 1px solid #eee;
        padding: 20px 0;
    }
    
    .cl-faq-q {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-weight: bold;
        color: var(--cl-dark);
    }
    
    .cl-faq-a {
      
        margin-top: 15px;
        color: #666;
        line-height: 1.8;
    }

    @keyframes bounceIn {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }

    @media (max-width: 768px) {
        .seo-container { flex-direction: column-reverse; }
    }
 /* تنظیمات سکشن اصلی با فاصله بیشتر */
    .cl-trust-modern {
        padding: 100px 0 !important; /* فاصله زیاد از بالا و پایین */
        margin: 60px 0 !important;   /* فاصله خارجی از سکشن‌های دیگر */
        background: #fdfdfd; 
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        direction: rtl;
    }

    /* گرید یک‌خطی */
    .trust-grid-modern {
        display: flex;
        justify-content: center; /* وسط‌چین کردن کل مجموعه */
        align-items: stretch;    /* هم‌اندازه کردن ارتفاع کارت‌ها */
        gap: 20px;               /* فاصله بهینه بین کارت‌ها */
        flex-wrap: nowrap;       /* مهم: اجبار به قرارگیری در یک خط */
    }

    /* کارت‌ها */
    .trust-card {
        background: #fff;
        padding: 20px 15px;      /* پدینگ افقی کمی کمتر برای جا شدن */
        border-radius: 15px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
        border: 1px solid #f0f0f0;
        transition: all 0.3s ease;
        
        /* تنظیم عرض برای جا شدن 4 تا در یک خط */
        flex: 1;                 /* عرض مساوی به همه */
        min-width: 0;            /* جلوگیری از بیرون زدگی فلکس */
        max-width: 280px;        /* محدودیت عرض برای زیبایی */
    }

    .trust-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 109, 119, 0.1);
        border-color: var(--cl-gold);
    }

    /* آیکون */
    .t-icon {
        width: 45px;             /* کمی کوچک‌تر کردن آیکون */
        height: 45px;
        background: linear-gradient(135deg, var(--cl-teal), #004d40);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.2rem;
        flex-shrink: 0;          /* جلوگیری از جمع شدن آیکون */
    }

    /* متن‌ها */
    .t-content {
        display: flex;
        flex-direction: column;
        white-space: nowrap;     /* جلوگیری از شکستن متن */
        overflow: hidden;        /* مخفی کردن سرریز */
    }

    .t-title {
        font-weight: 800;
        color: var(--cl-dark);
        font-size: 0.9rem;
        margin-bottom: 3px;
        text-overflow: ellipsis; /* سه نقطه اگر متن زیاد بود */
        overflow: hidden;
    }

    .t-desc {
        font-size: 0.75rem;
        color: #888;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    /* --- ریسپانسیو (موبایل و تبلت) --- */
    /* در سایزهای کوچکتر از 1024 پیکسل (لپ‌تاپ کوچک و تبلت) بشکنند */
    @media (max-width: 1024px) {
        .trust-grid-modern {
            flex-wrap: wrap;     /* اجازه شکستن خط */
        }
        .trust-card {
            min-width: 40%;      /* دو تا در هر ردیف */
            max-width: 45%;
        }
    }

    @media (max-width: 600px) {
        .trust-card {
            min-width: 100%;     /* یکی در هر ردیف برای موبایل */
            max-width: 100%;
        }
    }
    
    
    #landing-lawyer-wrap {
        font-family: inherit;
        color: var(--law-text);
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        direction: rtl;
        background: #fff;
    }

    /* --- 1. هیرو سکشن (اقتدار و قانون) --- */
    .law-hero {
        position: relative;
        width: 100vw;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        height: 90vh;
        min-height: 600px;
        /* تصویر دفتر وکالت یا کتابخانه حقوقی */
        background: linear-gradient(rgba(28, 40, 65, 0.9), rgba(28, 40, 65, 0.8)), url('https://images.unsplash.com/photo-1589829085413-56de8ae18c73?q=80&w=1920&auto=format&fit=crop');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff;
        margin-top: -140px !important;
        padding-top: 140px !important;
        border-bottom: 5px solid var(--law-gold);
    }

    .law-hero-content {
        max-width: 900px;
        padding: 20px;
        position: relative;
        z-index: 2;
    }

    /* آیکون ترازوی عدالت متحرک */
    .scales-icon {
        font-size: 4rem;
        color: var(--law-gold);
        margin-bottom: 20px;
        display: inline-block;
        animation: balance 4s infinite ease-in-out;
    }

    .law-hero h1 {
        font-size: 3.2rem !important;
        font-weight: 900 !important;
        margin-bottom: 15px !important;
        color: #fff !important;
        letter-spacing: -1px;
    }

    .law-hero h1 span {
        color: var(--law-gold);
        position: relative;
        display: inline-block;
    }
    
    .law-hero h1 span::after {
        content: '';
        position: absolute;
        bottom: 5px;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--law-gold);
        transform: scaleX(0);
        transform-origin: right;
        animation: underline 1s ease-out 1s forwards;
    }

    /* افکت تایپ (Typewriter) */
    .typewrite-text {
        font-size: 1.5rem;
        color: #d1d9e6;
        margin-bottom: 40px;
        min-height: 40px;
        font-weight: 300;
    }

    .btn-law-cta {
        background: transparent;
        color: var(--law-gold);
        border: 2px solid var(--law-gold);
        padding: 15px 45px;
        font-size: 1.1rem;
        font-weight: bold;
        cursor: pointer;
        transition: 0.3s;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .btn-law-cta::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 0; height: 100%;
        background: var(--law-gold);
        z-index: -1;
        transition: 0.3s;
    }

    .btn-law-cta:hover {
        color: #fff;
    }
    .btn-law-cta:hover::before {
        width: 100%;
    }

    /* --- 2. آمار و اعتماد (Stats) --- */
    .law-stats {
        padding: 60px 0;
        background: #fff;
        border-bottom: 1px solid #eee;
    }
    .law-stats-grid {
        display: flex;
        justify-content: center;
        gap: 50px;
        flex-wrap: wrap;
        text-align: center;
    }
    .ls-item h3 { font-size: 2.5rem; color: var(--law-navy); margin: 0; font-weight: 900; }
    .ls-item p { color: #888; margin: 5px 0 0; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }

    /* --- 3. خدمات حقوقی (Cards) --- */
    .law-services {
        padding: 100px 0;
        background: var(--law-bg);
        text-align: center;
    }

    .law-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        margin-top: 50px;
    }

    .law-card {
        flex: 1; min-width: 280px; max-width: 350px;
        background: #fff;
        padding: 40px 30px;
        border-top: 3px solid transparent;
        box-shadow: 0 5px 20px rgba(0,0,0,0.03);
        transition: 0.3s;
        position: relative;
    }

    .law-card:hover {
        transform: translateY(-10px);
        border-top-color: var(--law-gold);
        box-shadow: 0 15px 40px rgba(28, 40, 65, 0.1);
    }

    .lc-icon {
        width: 70px; height: 70px;
        background: #fdfcf9;
        border: 1px solid var(--law-gold);
        border-radius: 50%; /* دایره‌ای */
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 20px;
        color: var(--law-navy);
        font-size: 1.5rem;
        transition: 0.3s;
    }

    .law-card:hover .lc-icon {
        background: var(--law-navy);
        color: var(--law-gold);
    }

    .law-card h3 { color: var(--law-navy); font-size: 1.3rem; margin-bottom: 15px; font-weight: bold; }
    .law-card p { color: #666; font-size: 0.95rem; line-height: 1.6; }

    /* --- استایل اصلاح شده ماشین حساب --- */
    .law-calc-section {
        padding: 80px 0;
        background: var(--law-navy);
        color: #fff;
        position: relative;
        overflow: hidden;
    }
    
    /* پس‌زمینه تزئینی */
    .law-calc-section::before {
        content: '\f0e3'; /* آیکون ترازو */
        font-family: "Font Awesome 5 Free"; 
        font-weight: 900;
        position: absolute;
        top: -50px; left: -50px;
        font-size: 20rem;
        color: rgba(255,255,255,0.03);
        transform: rotate(-20deg);
        pointer-events: none;
    }

    .lc-wrapper {
        display: flex;
        flex-wrap: wrap; /* در موبایل بشکند */
        align-items: center; /* تراز عمودی وسط چین */
        justify-content: space-between;
        gap: 40px; /* فاصله بین متن و باکس */
        position: relative;
        z-index: 2;
        width: 100%;
    }

    /* بخش متن (راست) */
    .lc-text {
        flex: 1; /* فضای باقی‌مانده را پر کند */
        min-width: 320px; /* حداقل عرض */
        max-width: 600px; /* جلوگیری از کش آمدن بیش از حد */
    }

    .lc-text h2 { 
        font-size: 2.2rem; 
        margin-bottom: 20px; 
        color: #fff;
        line-height: 1.3;
    }
    
    .lc-text p { 
        color: #d1d9e6; 
        line-height: 1.8; 
        margin-bottom: 30px; 
        font-size: 1.05rem;
    }

    /* باکس سفید ماشین حساب (چپ) */
    .calc-box-law {
        flex: 1;
        min-width: 320px;
        max-width: 480px; /* عرض مناسب برای باکس */
        background: #fff;
        padding: 35px;
        border-radius: 15px; /* گوشه‌های گردتر */
        color: #333;
        box-shadow: 0 25px 50px rgba(0,0,0,0.25);
        border: 2px solid var(--law-gold); /* حاشیه طلایی */
        margin: 0 auto; /* وسط چین شدن در حالت موبایل */
    }

    /* استایل اسلایدرها */
    .law-range {
        width: 100%;
        margin: 15px 0 30px;
        -webkit-appearance: none;
        height: 8px;
        background: #f0f2f5;
        border-radius: 10px;
        outline: none;
    }
    
    .law-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 24px; height: 24px;
        background: var(--law-navy);
        border: 3px solid var(--law-gold);
        border-radius: 50%;
        cursor: pointer;
        transition: 0.2s;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    .law-range::-webkit-slider-thumb:hover {
        transform: scale(1.1);
    }

    /* باکس نتیجه */
    .loss-result {
        text-align: center;
        background: #fff5f5; /* پس زمینه قرمز خیلی روشن */
        padding: 20px;
        border-radius: 10px;
        margin-top: 10px;
        border: 1px dashed #ffcdd2;
        transition: 0.3s;
    }
    
    .loss-result:hover {
        background: #ffebee;
        transform: translateY(-2px);
    }
    
    .loss-amount {
        display: block;
        font-size: 2.2rem;
        font-weight: 900;
        color: #c62828;
        margin: 5px 0;
        font-family: sans-serif; /* خوانایی بهتر اعداد */
    }

    /* ریسپانسیو */
    @media (max-width: 900px) {
        .lc-wrapper {
            flex-direction: column; /* ستونی شدن در تبلت و موبایل */
            align-items: stretch;
            gap: 50px;
        }
        
        .lc-text, .calc-box-law {
            max-width: 100%; /* تمام عرض را بگیرد */
            min-width: 0;
        }
        
        .law-calc-section { padding: 60px 0; }
        .lc-text h2 { font-size: 1.8rem; }
    }

    /* --- 5. نمونه کارها (استایل رسمی) --- */
    .law-portfolio {
        padding: 100px 0;
        background: #fff;
    }
    .lp-scroller {
        display: flex;
        gap: 30px;
        overflow-x: auto;
        padding: 30px 5%;
        scrollbar-width: none;
        cursor: grab;
    }
    .lp-scroller::-webkit-scrollbar { display: none; }

    /* قاب تبلت/موبایل رسمی */
    .law-device {
        min-width: 300px;
        height: 500px;
        background: #222;
        border-radius: 10px;
        padding: 10px 10px 30px 10px; /* پایین بیشتر برای دکمه هوم */
        box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        position: relative;
        flex-shrink: 0;
        transition: 0.3s;
    }
    .law-device:hover { transform: translateY(-10px); }
    .ld-screen {
        width: 100%; height: 100%;
        background-size: cover;
        background-position: top;
        border-radius: 4px;
        border: 1px solid #333;
    }
    .ld-info {
        position: absolute;
        bottom: 40px; left: 20px;
        background: rgba(28, 40, 65, 0.9);
        color: #fff;
        padding: 10px 20px;
        border-radius: 5px;
        border-right: 3px solid var(--law-gold);
        opacity: 0;
        transition: 0.3s;
    }
    .law-device:hover .ld-info { opacity: 1; bottom: 50px; }

    /* --- 6. تعرفه‌ها (پکیج‌ها) --- */
    .law-pricing { padding: 80px 0; background: var(--law-bg); }
    
    .lp-card {
        background: #fff;
        border: 1px solid #e0e0e0;
        padding: 0;
        transition: 0.3s;
        position: relative;
    }
    
    .lp-card.pro {
        border: 2px solid var(--law-navy);
        transform: scale(1.03);
        z-index: 2;
        box-shadow: 0 10px 30px rgba(28, 40, 65, 0.15);
    }
    
    .lp-header {
        background: #f8f9fa;
        padding: 30px;
        border-bottom: 1px solid #eee;
        text-align: center;
    }
    .lp-card.pro .lp-header { background: var(--law-navy); color: #fff; }
    
    .lp-header h3 { margin: 0; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; }
    .lp-price { font-size: 2rem; font-weight: 800; margin-top: 15px; display: block; color: var(--law-navy); }
    .lp-card.pro .lp-price { color: var(--law-gold); }

    .lp-body { padding: 30px; }
    .lp-features li { margin-bottom: 15px; color: #555; display: flex; align-items: center; }
    .lp-features i { color: var(--law-gold); margin-left: 10px; }
    
    .btn-law-outline {
        display: block; width: 100%; padding: 12px;
        border: 1px solid var(--law-navy);
        color: var(--law-navy);
        background: transparent;
        font-weight: bold;
        cursor: pointer;
        transition: 0.3s;
    }
    .lp-card.pro .btn-law-outline { background: var(--law-navy); color: #fff; }
    .btn-law-outline:hover { background: var(--law-gold); border-color: var(--law-gold); color: #fff; }

    /* انیمیشن‌ها */
    @keyframes balance {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(3deg); }
        75% { transform: rotate(-3deg); }
    }
    @keyframes underline {
        to { transform: scaleX(1); }
    }
    
    @media (max-width: 768px) {
        .law-hero h1 { font-size: 2.2rem !important; }
        .lc-wrapper { flex-direction: column; }
        .lp-card.pro { transform: scale(1); margin: 20px 0; }
    }
    
    
    
    /* 1. بخش مراحل کار (Timeline) */
    .law-process-section {
        padding: 100px 0;
        background: #fff;
        text-align: center;
    }
    
    .process-steps {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin-top: 50px;
        flex-wrap: wrap;
        position: relative;
    }

    /* خط اتصال */
    .process-steps::before {
        content: '';
        position: absolute;
        top: 40px; left: 10%; right: 10%;
        height: 2px;
        background: #eee;
        z-index: 0;
    }

    .p-step {
        flex: 1;
        min-width: 200px;
        position: relative;
        z-index: 1;
        background: #fff; /* برای پوشاندن خط در محل آیکون */
        padding: 0 10px;
    }

    .p-icon-box {
        width: 80px; height: 80px;
        background: #fff;
        border: 2px solid var(--law-navy);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 20px;
        font-size: 1.8rem;
        color: var(--law-navy);
        position: relative;
        transition: 0.3s;
    }

    .p-step:hover .p-icon-box {
        background: var(--law-navy);
        color: var(--law-gold);
        box-shadow: 0 10px 30px rgba(28, 40, 65, 0.2);
    }

    /* شماره مرحله */
    .p-num {
        position: absolute;
        top: -5px; right: -5px;
        width: 25px; height: 25px;
        background: var(--law-gold);
        color: #fff;
        border-radius: 50%;
        font-size: 0.8rem;
        display: flex; align-items: center; justify-content: center;
        font-weight: bold;
    }

    .p-title { font-weight: 800; color: var(--law-navy); margin-bottom: 10px; font-size: 1.1rem; }
    .p-desc { color: #666; font-size: 0.9rem; line-height: 1.6; }

    /* 2. نظرات وکلا (Testimonials) - استایل کارت ویزیت */
    .law-testi-section {
        padding: 80px 0;
        background: var(--law-bg); /* خاکستری خیلی روشن */
    }

    .testi-grid {
        display: flex;
        gap: 30px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .testi-card {
        background: #fff;
        padding: 30px;
        border-right: 4px solid var(--law-gold); /* خط طلایی سمت راست */
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        flex: 1;
        min-width: 300px;
        max-width: 500px;
        position: relative;
    }

    .testi-quote {
        color: #444;
        font-style: italic;
        line-height: 1.8;
        margin-bottom: 20px;
        font-size: 1rem;
    }
    
    .testi-quote::before {
        content: '\201C'; /* علامت نقل قول */
        font-size: 3rem;
        color: #eee;
        position: absolute;
        top: 10px; right: 10px;
        font-family: serif;
    }

    .testi-author {
        display: flex;
        align-items: center;
        gap: 15px;
        border-top: 1px solid #eee;
        padding-top: 15px;
    }

    .author-img {
        width: 50px; height: 50px;
        border-radius: 50%;
        background: #ddd;
        object-fit: cover;
    }

    .author-info h4 { margin: 0; font-size: 0.95rem; color: var(--law-navy); font-weight: bold; }
    .author-info span { font-size: 0.8rem; color: #888; }

    /* 3. سوالات متداول رسمی (FAQ) */
    .law-faq-section {
        padding: 80px 0;
        background: #fff;
        max-width: 800px;
        margin: 0 auto;
    }

    .law-faq-item {
        border: 1px solid #eee;
        margin-bottom: 15px;
        border-radius: 5px;
        transition: 0.3s;
    }

    .law-faq-item.active {
        border-color: var(--law-navy);
    }

    .law-faq-header {
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        background: #fff;
    }

    .law-faq-header h4 { margin: 0; font-size: 1.05rem; color: var(--law-navy); }
    .law-faq-icon { color: var(--law-gold); transition: 0.3s; }
    
    .law-faq-body {
        padding: 0 20px 20px;
        display: none;
        color: #555;
        line-height: 1.8;
        border-top: 1px solid #f9f9f9;
    }

    /* Sticky Mobile Bar */
    .law-sticky-bar {
        position: fixed; bottom: 0; left: 0; width: 100%;
        background: var(--law-navy);
        padding: 10px 20px;
        display: none;
        justify-content: space-between;
        align-items: center;
        gap: 15px; z-index: 999;
        box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
    }
    .ls-btn {
        flex: 1; padding: 12px; border-radius: 5px;
        text-align: center; color: #fff; text-decoration: none;
        font-weight: bold; display: flex; justify-content: center; gap: 8px;
    }
    .ls-call { background: var(--law-gold); color: var(--law-navy); }
    .ls-wa { border: 1px solid rgba(255,255,255,0.3); }

    @media (max-width: 768px) {
        .process-steps::before { display: none; } /* حذف خط در موبایل */
        .process-steps { flex-direction: column; }
        .law-sticky-bar { display: flex; }
        body { padding-bottom: 60px; }
    }
    
    
    
    /* --- استایل بخش‌های تمایز --- */

    /* 1. بخش کلمات کلیدی (SEO Visualization) */
    .law-keywords-section {
        padding: 80px 0;
        background: #fff;
        text-align: center;
        overflow: hidden;
    }

    .kw-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        max-width: 900px;
        margin: 40px auto 0;
    }

    .kw-tag {
        background: #f8f9fa;
        border: 1px solid #e0e0e0;
        padding: 10px 25px;
        border-radius: 50px;
        color: #555;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: 0.3s;
        cursor: default;
    }

    .kw-tag i { color: #ccc; font-size: 0.8rem; }
    .kw-tag:hover {
        border-color: var(--law-gold);
        color: var(--law-navy);
        background: #fff;
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    .kw-tag:hover i { color: var(--law-gold); }

    .kw-tag.highlight {
        background: var(--law-navy);
        color: #fff;
        border-color: var(--law-navy);
    }
    .kw-tag.highlight i { color: var(--law-gold); }

    /* 2. بخش هدیه ویژه (Content Bonus) */
    .law-bonus-section {
        padding: 60px 0;
        background: linear-gradient(135deg, var(--law-navy) 0%, #2c3e50 100%);
        color: #fff;
        position: relative;
        margin: 60px 20px; /* فاصله از اطراف */
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(28, 40, 65, 0.4);
    }

    /* پترن پس‌زمینه */
    .law-bonus-section::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-image: radial-gradient(var(--law-gold) 1px, transparent 1px);
        background-size: 30px 30px;
        opacity: 0.05;
    }

    .bonus-content {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 50px;
        gap: 40px;
    }

    .bonus-text { flex: 1; text-align: right; }
    .bonus-text h2 { color: var(--law-gold); font-size: 2rem; margin-bottom: 15px; font-weight: 800; }
    .bonus-text p { color: #dcdcdc; line-height: 1.8; margin-bottom: 25px; font-size: 1.1rem; }

    .bonus-list { list-style: none; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
    .bonus-list li { background: rgba(255,255,255,0.1); padding: 8px 15px; border-radius: 5px; font-size: 0.9rem; border: 1px solid rgba(255,255,255,0.1); }

    .bonus-icon {
        width: 150px; height: 150px;
        background: #fff;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 4rem;
        color: var(--law-navy);
        box-shadow: 0 0 40px var(--law-gold);
        border: 5px solid var(--law-gold);
        animation: pulseGift 2s infinite;
    }

    @keyframes pulseGift {
        0% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.7); }
        70% { box-shadow: 0 0 0 20px rgba(197, 160, 89, 0); }
        100% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0); }
    }

    @media (max-width: 900px) {
        .bonus-content { flex-direction: column; text-align: center; padding: 0 20px; }
        .bonus-text { text-align: center; }
        .bonus-list { justify-content: center; }
        .law-bonus-section { margin: 40px 10px; }
    }
    
    /* ریست */
    .page-header, .entry-header, h1.page-title { display: none !important; }
    .site-main, .entry-content, #content { padding-top: 0 !important; margin-top: 0 !important; }

    #landing-edu-wrap {
        font-family: inherit;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        direction: rtl;
        background: #fff;
        color: #333;
    }

   تصویر ارسالی شما نشان می‌دهد که مشکل تداخل (Layout Collision) و ناپدید شدن پس‌زمینه وجود دارد. المان‌های شیشه‌ای (Glass Card) و متن‌ها سر جای خودشان نیستند و پس‌زمینه هدر به رنگ سفید درآمده است.

این مشکل معمولاً به خاطر تداخل CSS قالب اصلی وردپرس با کد جدید است (مثلاً z-index یا position های قالب اصلی باعث مخفی شدن پس‌زمینه شده‌اند).

من کد را با رعایت اولویت بالا (Important!) و تنظیمات دقیق Flexbox بازنویسی کردم تا مطمئن شویم همه چیز سر جای خودش قرار می‌گیرد.

کد اصلاح شده و تضمینی هدر (جایگزین کد قبلی)
این کد را جایگزین کد قبلی کنید.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
    /* --- تنظیمات اجباری و ایزوله برای هدر --- */
    
    /* 1. ریست کردن استایل‌های مزاحم قالب اصلی */
    .site-header, .entry-header, #masthead { 
        position: absolute !important; 
        width: 100% !important; 
        z-index: 999 !important; 
        background: transparent !important; 
    }
    
    .page-template-default, .page {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 2. کانتینر اصلی هیرو (با استایل‌های Force) */
    .hero-edu-fix {
        position: relative !important;
        width: 100vw !important;
        height: 100vh !important;
        min-height: 700px !important;
        /* فیکس کردن موقعیت برای پر کردن صفحه */
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        
        /* پس‌زمینه گرادینت */
        background: radial-gradient(circle at center, #432c7a 0%, #1a0b2e 100%) !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        direction: rtl;
    }

    /* پترن پس‌زمینه */
    .hero-grid-bg {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-image: 
            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 40px 40px;
        opacity: 0.3;
        z-index: 1;
    }

    /* لایه محتوا */
    .hero-inner-container {
        position: relative;
        z-index: 10;
        width: 90%;
        max-width: 1200px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 50px;
    }

    /* ستون متن (راست) */
    .hero-text-col {
        flex: 1;
        text-align: right;
        color: #fff;
    }

    .smart-badge-fix {
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        padding: 8px 20px;
        border-radius: 30px;
        font-size: 0.9rem;
        color: #00f2ea; /* فیروزه‌ای */
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }

    .hero-title-fix {
        font-size: 3.5rem !important;
        font-weight: 900 !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
        color: #fff !important;
    }

    .gradient-txt-fix {
        background: linear-gradient(90deg, #00f2ea, #fff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 900;
    }

    .type-wrapper-fix {
        font-size: 1.6rem;
        color: #d1d1d1;
        margin-bottom: 30px;
        font-weight: bold;
    }

    .dynamic-txt-fix { color: #ff0050; padding: 0 5px; }

    .btn-hero-fix {
        background: #00f2ea;
        color: #1a0b2e;
        padding: 15px 45px;
        border-radius: 10px;
        font-weight: bold;
        font-size: 1.1rem;
        border: none;
        cursor: pointer;
        box-shadow: 0 0 20px rgba(0, 242, 234, 0.4);
        transition: 0.3s;
    }
    .btn-hero-fix:hover {
        background: #fff;
        transform: translateY(-3px);
    }

    /* ستون تصویر (چپ) - بخش مشکل‌دار */
    .hero-visual-col {
        flex: 1;
        height: 450px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 1000px;
    }

    /* کارت شیشه‌ای ثابت شده */
    .glass-card-fix {
        width: 100%;
        max-width: 450px;
        height: 300px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px); /* برای سافاری */
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.4);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 5;
    }

    /* آیکون‌های شناور (با پوزیشن دقیق) */
    .float-icon {
        position: absolute;
        width: 60px; height: 60px;
        background: rgba(255,255,255,0.1);
        border-radius: 15px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.8rem;
        color: #fff;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        z-index: 6; /* بالاتر از کارت */
        animation: floatY 4s infinite ease-in-out;
    }

    .fi-1-fix { top: -30px; right: -20px; color: #00f2ea; animation-delay: 0s; }
    .fi-2-fix { bottom: -20px; left: -20px; color: #ff0050; animation-delay: 2s; }

    /* محتویات کارت */
    .play-btn-fix {
        width: 70px; height: 70px;
        background: linear-gradient(135deg, #00f2ea, #009999);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 2rem; color: #fff;
        margin-bottom: 20px;
        box-shadow: 0 0 20px rgba(0, 242, 234, 0.5);
    }

    .income-tag-fix {
        background: #fff;
        color: #333;
        padding: 8px 15px;
        border-radius: 8px;
        font-weight: bold;
        font-size: 0.9rem;
        margin-top: 15px;
        display: flex; align-items: center; gap: 8px;
    }

    /* انیمیشن شناور */
    @keyframes floatY {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-15px); }
    }

    /* ریسپانسیو */
    @media (max-width: 900px) {
        .hero-inner-container { flex-direction: column-reverse; text-align: center; }
        .hero-text-col { text-align: center; }
        .hero-title-fix { font-size: 2.2rem !important; }
        .hero-visual-col { height: 350px; width: 100%; }
        .glass-card-fix { width: 90%; height: 250px; }
    }

    /* --- 2. آمار و اعتماد --- */
    .edu-stats {
        padding: 50px 0;
        background: #fff;
        border-bottom: 1px solid #eee;
    }
    .stats-grid {
        display: flex;
        justify-content: center;
        gap: 60px;
        flex-wrap: wrap;
        text-align: center;
    }
    .st-item h3 { font-size: 2.2rem; margin: 0; color: var(--edu-dark); font-weight: 900; }
    .st-item p { color: #666; margin: 5px 0 0; }

    /* --- 3. ویژگی‌های LMS (کارت‌ها) --- */
    .edu-features {
        padding: 100px 0;
        background: var(--edu-light);
    }

    .feature-grid {
        display: flex;
        gap: 30px;
        flex-wrap: wrap;
        margin-top: 50px;
        justify-content: center;
    }

    .feature-card {
        background: #fff;
        padding: 35px;
        border-radius: 20px;
        flex: 1;
        min-width: 280px;
        max-width: 350px;
        transition: 0.3s;
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;
    }

    .feature-card:hover {
        border-color: var(--edu-primary);
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(123, 44, 191, 0.1);
    }

    .f-icon {
        width: 60px; height: 60px;
        background: rgba(123, 44, 191, 0.1);
        color: var(--edu-primary);
        border-radius: 15px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    /* --- 4. ماشین حساب درآمد غیرفعال (The Hook) --- */
    .edu-calc-section {
        padding: 80px 0;
        background: linear-gradient(to right, var(--edu-dark), #3c096c);
        color: #fff;
        position: relative;
    }

    .calc-container {
        display: flex;
        flex-wrap: wrap;
        gap: 50px;
        align-items: center;
    }

    .calc-text { flex: 1; min-width: 300px; }
    .calc-box {
        flex: 1;
        min-width: 300px;
        background: #fff;
        padding: 40px;
        border-radius: 20px;
        color: #333;
        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }

    .edu-range {
        width: 100%;
        height: 10px;
        background: #eee;
        border-radius: 10px;
        -webkit-appearance: none;
        margin: 20px 0;
    }
    .edu-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 25px; height: 25px;
        background: var(--edu-primary);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }

    .profit-box {
        background: #ebfbee; /* سبز خیلی روشن */
        border: 1px dashed var(--edu-success);
        padding: 20px;
        border-radius: 15px;
        text-align: center;
        margin-top: 20px;
    }

    /* --- 5. پیش‌نمایش محیط آموزشی (Player Demo) --- */
    .edu-demo-section {
        padding: 100px 0;
        background: #fff;
        text-align: center;
    }

    .player-mockup {
        max-width: 900px;
        margin: 50px auto 0;
        background: #000;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 30px 70px rgba(0,0,0,0.2);
        position: relative;
    }

    .player-header {
        background: #222;
        padding: 15px;
        display: flex;
        gap: 10px;
    }
    .dot { width: 12px; height: 12px; border-radius: 50%; background: #555; }
    .dot.red { background: #ff5f56; }
    .dot.yellow { background: #ffbd2e; }
    .dot.green { background: #27c93f; }

    .player-body {
        display: flex;
        height: 450px;
    }
    .video-area { flex: 3; background: #1a1a1a; display: flex; align-items: center; justify-content: center; position: relative; }
    .play-btn-ui { font-size: 4rem; color: #fff; opacity: 0.8; cursor: pointer; transition: 0.3s; }
    .play-btn-ui:hover { transform: scale(1.1); color: var(--edu-accent); }
    
    .course-sidebar { flex: 1; background: #fff; border-left: 1px solid #333; text-align: right; padding: 20px; overflow-y: auto; }
    .lesson-item { padding: 15px 10px; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; cursor: pointer; }
    .lesson-item.active { background: #f0fdf4; color: var(--edu-success); font-weight: bold; border-right: 3px solid var(--edu-success); }
    .lesson-item:hover { background: #f9f9f9; }

    /* --- 6. تعرفه‌ها --- */
    .edu-pricing { padding: 80px 0; background: var(--edu-light); }
    .ep-card {
        background: #fff;
        border-radius: 20px;
        padding: 40px;
        flex: 1;
        min-width: 300px;
        text-align: center;
        transition: 0.3s;
        border: 1px solid #eee;
    }
    .ep-card.featured {
        background: var(--edu-dark);
        color: #fff;
        transform: scale(1.05);
        border: none;
        box-shadow: 0 20px 50px rgba(36, 0, 70, 0.2);
    }
    .ep-card.featured h3, .ep-card.featured li { color: #fff; }
    .ep-card.featured li i { color: var(--edu-accent); }
    
    .ep-btn {
        display: block; width: 100%; padding: 15px; border-radius: 10px; margin-top: 30px; font-weight: bold; cursor: pointer;
    }
    .ep-btn.outline { border: 2px solid var(--edu-dark); color: var(--edu-dark); background: transparent; }
    .ep-btn.fill { background: var(--edu-accent); color: var(--edu-dark); border: none; }

    /* انیمیشن‌ها */
    @keyframes floatShape {
        0% { transform: translateY(0) rotate(0); }
        50% { transform: translateY(-20px) rotate(10deg); }
        100% { transform: translateY(0) rotate(0); }
    }
    
    @media (max-width: 900px) {
        .player-body { flex-direction: column; height: auto; }
        .course-sidebar { height: 200px; }
        .ep-card.featured { transform: scale(1); }
    }
    
    
    
    
    /* --- 1. استایل بخش گیمیفیکیشن --- */
    .edu-gamification {
        padding: 80px 0;
        background: #fff;
        overflow: hidden;
    }

    .game-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 60px;
        flex-wrap: wrap;
    }

    .game-text { flex: 1; min-width: 300px; max-width: 500px; }
    
    .game-visual {
        flex: 1;
        min-width: 300px;
        position: relative;
    }

    /* کارت پروفایل دانشجو */
    .student-card {
        background: #fff;
        border: 2px solid #f0f0f0;
        border-radius: 20px;
        padding: 20px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        max-width: 350px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }

    .st-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
    .st-avatar { width: 60px; height: 60px; border-radius: 50%; background: #ddd; object-fit: cover; border: 2px solid var(--edu-primary); }
    .st-info h4 { margin: 0; font-size: 1rem; color: #333; }
    .st-level { font-size: 0.8rem; color: #fff; background: var(--edu-accent); padding: 2px 10px; border-radius: 10px; display: inline-block; margin-top: 5px; }

    .st-progress { height: 8px; background: #eee; border-radius: 10px; overflow: hidden; margin-bottom: 5px; }
    .st-bar { height: 100%; width: 75%; background: linear-gradient(90deg, var(--edu-primary), var(--edu-accent)); }

    .badges-grid { display: flex; gap: 10px; margin-top: 20px; justify-content: space-around; }
    .badge-item { text-align: center; }
    .b-icon { font-size: 2rem; margin-bottom: 5px; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2)); }
    .badge-item.locked { opacity: 0.3; filter: grayscale(1); }

    /* پاپ‌آپ جایزه */
    .reward-popup {
        position: absolute;
        top: -20px; right: -30px;
        background: #fff;
        padding: 10px 15px;
        border-radius: 10px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        display: flex; align-items: center; gap: 10px;
        animation: floatReward 3s infinite ease-in-out;
        z-index: 3;
        border: 1px solid var(--edu-success);
    }
    .rp-icon { color: var(--edu-success); font-size: 1.5rem; }

    /* --- 2. استایل جدول مقایسه --- */
    .edu-compare-section {
        padding: 80px 0;
        background: #f8f9fa;
    }

    .compare-table {
        width: 100%;
        max-width: 900px;
        margin: 40px auto 0;
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(0,0,0,0.05);
        border: 1px solid #eee;
    }

    .c-row {
        display: flex;
        padding: 20px;
        border-bottom: 1px solid #f0f0f0;
        align-items: center;
    }
    .c-row:last-child { border-bottom: none; }
    .c-row.header { background: var(--edu-dark); color: #fff; font-weight: bold; }
    
    .c-col { flex: 1; text-align: center; }
    .c-col.feature { flex: 2; text-align: right; padding-right: 20px; font-weight: bold; color: #555; }
    .c-col.us { color: var(--edu-success); font-weight: bold; font-size: 1.1rem; }
    .c-col.them { color: #999; }

    .check { color: var(--edu-success); }
    .cross { color: #ff5f56; }

    /* --- 3. استایل سوالات متداول --- */
    .edu-faq-section {
        padding: 80px 0;
        background: #fff;
    }
    .faq-wrapper { max-width: 800px; margin: 0 auto; }
    
    .faq-item {
        border: 1px solid #eee;
        border-radius: 10px;
        margin-bottom: 15px;
        overflow: hidden;
        transition: 0.3s;
    }
    .faq-item.active { border-color: var(--edu-primary); box-shadow: 0 5px 15px rgba(123, 44, 191, 0.1); }
    
    .faq-q {
        padding: 20px;
        background: #fff;
        cursor: pointer;
        display: flex; justify-content: space-between; align-items: center;
        font-weight: bold; color: var(--edu-dark);
    }
    .faq-a {
        padding: 0 20px 20px;
        display: none;
        color: #666;
        line-height: 1.8;
        border-top: 1px solid #f9f9f9;
    }

    @keyframes floatReward {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }

    @media (max-width: 768px) {
        .game-container { flex-direction: column-reverse; }
        .c-col.feature { font-size: 0.9rem; }
        .c-col { font-size: 0.9rem; }
    }
    
    
    /* --- 1. استایل مسیر راه‌اندازی (Timeline) --- */
    .edu-roadmap-section {
        padding: 80px 0;
        background: #fff;
        position: relative;
        overflow: hidden;
    }

    .roadmap-container {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
        margin-top: 60px;
        position: relative;
    }

    /* خط اتصال خط‌چین */
    .roadmap-line {
        position: absolute;
        top: 40px; left: 15%; right: 15%;
        height: 2px;
        background-image: linear-gradient(to right, var(--edu-primary) 50%, transparent 50%);
        background-size: 20px 100%;
        z-index: 1;
    }

    .rm-step {
        flex: 1;
        text-align: center;
        position: relative;
        z-index: 2;
        padding: 0 15px;
    }

    .rm-icon-box {
        width: 80px; height: 80px;
        background: #fff;
        border: 2px solid var(--edu-primary);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 20px;
        font-size: 1.8rem;
        color: var(--edu-primary);
        transition: 0.3s;
        box-shadow: 0 10px 30px rgba(123, 44, 191, 0.1);
    }

    .rm-step:hover .rm-icon-box {
        background: var(--edu-primary);
        color: #fff;
        transform: scale(1.1);
        box-shadow: 0 10px 30px rgba(123, 44, 191, 0.4);
    }

    .rm-step h3 { font-size: 1.1rem; font-weight: 800; color: var(--edu-dark); margin-bottom: 10px; }
    .rm-step p { font-size: 0.9rem; color: #666; line-height: 1.6; }

    /* --- 2. استایل اکوسیستم (Logos) --- */
    .edu-integrations {
        padding: 60px 0;
        background: #f8f9fa;
        text-align: center;
    }

    .integ-grid {
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap;
        margin-top: 40px;
        opacity: 0.7;
    }

    .integ-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        transition: 0.3s;
    }
    .integ-item:hover { opacity: 1; transform: translateY(-5px); }

    .integ-icon { font-size: 2.5rem; color: #555; }
    .integ-name { font-size: 0.9rem; font-weight: bold; color: #333; }

    /* --- 3. استایل اپلیکیشن PWA --- */
    .edu-app-showcase {
        padding: 80px 0;
        background: linear-gradient(135deg, var(--edu-dark) 0%, #3c096c 100%);
        color: #fff;
        overflow: hidden;
    }

    .app-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 50px;
    }

    .app-text { flex: 1; min-width: 300px; }
    
    .app-mockup {
        flex: 1;
        position: relative;
        display: flex;
        justify-content: center;
    }

    /* گوشی موبایل */
    .phone-frame {
        width: 280px; height: 550px;
        background: #000;
        border-radius: 40px;
        border: 8px solid #333;
        position: relative;
        overflow: hidden;
        box-shadow: 0 30px 60px rgba(0,0,0,0.5);
        z-index: 2;
    }

    .phone-screen {
        width: 100%; height: 100%;
        background: #fff;
        display: flex; flex-direction: column;
    }
    
    /* شبیه‌سازی UI اپلیکیشن */
    .p-app-header { background: var(--edu-primary); padding: 20px; color: #fff; }
    .p-app-course { margin: 15px; background: #f5f5f5; height: 120px; border-radius: 10px; }
    .p-app-nav { margin-top: auto; height: 60px; background: #eee; display: flex; justify-content: space-around; align-items: center; font-size: 1.2rem; color: #999; }

    /* حباب‌های شناور */
    .floating-bubble {
        position: absolute;
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(5px);
        padding: 10px 20px;
        border-radius: 30px;
        font-size: 0.9rem;
        border: 1px solid rgba(255,255,255,0.2);
        animation: floatBubble 4s infinite ease-in-out;
    }
    .fb-1 { top: 20%; right: -20px; animation-delay: 0s; }
    .fb-2 { bottom: 30%; left: -20px; animation-delay: 2s; }

    @keyframes floatBubble {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-15px); }
    }

    @media (max-width: 900px) {
        .roadmap-container { flex-direction: column; gap: 40px; }
        .roadmap-line { display: none; }
        .app-container { flex-direction: column; text-align: center; }
        .floating-bubble { display: none; } /* در موبایل مخفی شود تا شلوغ نشود */
    }
    
    
    
    #landing-med-wrap {
        font-family: inherit;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        direction: rtl;
        background: #fff;
        color: #333;
    }

   .med-hero-modern {
        position: relative;
        min-height: 100vh;
        background: var(--med-hero-bg);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 80px; /* برای جلوگیری از رفتن زیر منو */
    }

    /* پترن شبکه ای پس زمینه */
    .med-grid-pattern {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-image: radial-gradient(#0077b6 1px, transparent 1px);
        background-size: 30px 30px;
        opacity: 0.05;
        z-index: 1;
    }

    /* خط ضربان قلب متحرک */
    .ecg-line {
        position: absolute;
        top: 50%; left: 0; width: 100%; height: 150px;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,60 L200,60 L230,10 L260,110 L290,60 L1200,60" fill="none" stroke="%2348cae4" stroke-width="2" vector-effect="non-scaling-stroke"/></svg>');
        background-size: 1200px 100%;
        opacity: 0.15;
        z-index: 0;
        animation: ecgMove 4s linear infinite;
    }

    .container-hero {
        position: relative;
        z-index: 10;
        width: 90%;
        max-width: 1200px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }

    /* بخش متن (راست) */
    .hero-txt-col {
        flex: 1;
        text-align: right;
    }

    .badge-modern {
        background: rgba(0, 119, 182, 0.1);
        color: var(--med-blue-primary);
        padding: 8px 20px;
        border-radius: 30px;
        font-size: 0.9rem;
        font-weight: bold;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 25px;
        border: 1px solid rgba(0, 119, 182, 0.2);
    }

    .pulse-dot {
        width: 10px; height: 10px;
        background: #ef233c;
        border-radius: 50%;
        box-shadow: 0 0 0 0 rgba(239, 35, 60, 0.7);
        animation: pulseRed 2s infinite;
    }

    .hero-headline {
        font-size: 3.5rem;
        font-weight: 900;
        color: var(--med-text-dark);
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .hero-headline span {
        color: var(--med-blue-primary);
        position: relative;
        z-index: 1;
    }
    
    /* هایلایت زیر متن */
    .hero-headline span::after {
        content: '';
        position: absolute;
        bottom: 5px; left: 0; width: 100%; height: 10px;
        background: #caf0f8;
        z-index: -1;
        border-radius: 5px;
        opacity: 0.7;
    }

    .hero-subtext {
        font-size: 1.2rem;
        color: #555;
        line-height: 1.8;
        margin-bottom: 40px;
        max-width: 550px;
    }

    .btn-group-hero {
        display: flex;
        gap: 15px;
    }

    .btn-med-action {
        background: var(--med-blue-primary);
        color: #fff;
        padding: 15px 35px;
        border-radius: 12px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        box-shadow: 0 10px 25px rgba(0, 119, 182, 0.3);
        transition: 0.3s;
        display: flex; align-items: center; gap: 10px;
    }
    
    .btn-med-action:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 119, 182, 0.4);
    }

    /* بخش ویژوال (چپ) - موبایل پزشکی */
    .hero-img-col {
        flex: 1;
        position: relative;
        height: 550px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .phone-mockup-3d {
        width: 280px;
        height: 550px;
        background: #fff;
        border-radius: 40px;
        border: 8px solid #222;
        box-shadow: 0 30px 60px rgba(0, 50, 100, 0.15);
        position: relative;
        z-index: 5;
        overflow: hidden;
        transition: transform 0.1s ease-out; /* برای حرکت با موس */
    }

    .phone-screen-content {
        width: 100%; height: 100%;
        background: linear-gradient(to bottom, #f0f9ff, #fff);
        padding: 20px;
        display: flex;
        flex-direction: column;
    }

    /* المان‌های شناور اطراف گوشی */
    .floating-card {
        position: absolute;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        padding: 12px 20px;
        border-radius: 15px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 6;
        border: 1px solid rgba(255,255,255,0.5);
        animation: floatY 4s infinite ease-in-out;
    }

    .fc-icon {
        width: 40px; height: 40px;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem;
        color: #fff;
    }

    .fc-1 { 
        top: 15%; right: -20px; 
        animation-delay: 0s; 
    }
    .fc-1 .fc-icon { background: #4cc9f0; }

    .fc-2 { 
        bottom: 20%; left: -30px; 
        animation-delay: 2s; 
    }
    .fc-2 .fc-icon { background: #4361ee; }

    /* دایره‌های زمینه */
    .circle-bg {
        position: absolute;
        border-radius: 50%;
        z-index: 2;
    }
    .c1 {
        width: 400px; height: 400px;
        background: linear-gradient(135deg, #caf0f8, #f0f9ff);
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    /* انیمیشن‌ها */
    @keyframes ecgMove {
        0% { background-position: 0 0; }
        100% { background-position: 1200px 0; }
    }

    @keyframes pulseRed {
        0% { box-shadow: 0 0 0 0 rgba(239, 35, 60, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(239, 35, 60, 0); }
        100% { box-shadow: 0 0 0 0 rgba(239, 35, 60, 0); }
    }

    @keyframes floatY {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
    }

    /* ریسپانسیو */
    @media (max-width: 900px) {
        .container-hero { flex-direction: column-reverse; text-align: center; padding-top: 40px; }
        .hero-txt-col { text-align: center; }
        .hero-headline { font-size: 2.5rem; }
        .btn-group-hero { justify-content: center; }
        .hero-img-col { height: 450px; width: 100%; }
        .phone-mockup-3d { width: 240px; height: 450px; }
        .floating-card { scale: 0.8; }
    }
    /* --- 2. فیچرها (کارت‌های تمیز) --- */
    .med-features {
        padding: 80px 0;
        background: #fff;
        position: relative;
    }

    .med-grid {
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-wrap: wrap;
        margin-top: 50px;
    }

    .med-card {
        flex: 1; min-width: 280px; max-width: 350px;
        background: #fff;
        padding: 30px;
        border-radius: 15px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        transition: 0.3s;
        text-align: center;
    }

    .med-card:hover {
        transform: translateY(-10px);
        border-color: var(--med-blue);
        box-shadow: 0 20px 40px rgba(0, 119, 182, 0.1);
    }

    .mc-icon {
        width: 70px; height: 70px;
        background: var(--med-light-blue);
        color: var(--med-blue);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 2rem;
        margin: 0 auto 20px;
        transition: 0.3s;
    }

    .med-card:hover .mc-icon {
        background: var(--med-blue);
        color: #fff;
    }

    .med-card h3 { color: var(--med-dark); font-size: 1.2rem; font-weight: bold; margin-bottom: 10px; }
    .med-card p { color: #666; font-size: 0.95rem; line-height: 1.6; }

    /* --- 3. ماشین حساب (Hook: No-Show Calculator) --- */
    .med-calc-section {
        padding: 80px 0;
        background: var(--med-blue);
        color: #fff;
        position: relative;
        overflow: hidden;
    }

    /* افکت موج (Wave) */
    .wave-bg {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: radial-gradient(circle at top right, rgba(255,255,255,0.2), transparent 40%);
        pointer-events: none;
    }

    .calc-layout {
        display: flex;
        flex-wrap: wrap;
        gap: 50px;
        align-items: center;
    }

    .calc-info { flex: 1; min-width: 300px; }
    .calc-info h2 { font-size: 2.2rem; margin-bottom: 20px; font-weight: 800; }
    .calc-info p { font-size: 1.1rem; line-height: 1.8; opacity: 0.9; }

    .calc-module {
        flex: 1; min-width: 300px;
        background: #fff;
        padding: 35px;
        border-radius: 20px;
        color: #333;
        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    }

    .med-range {
        width: 100%;
        height: 6px;
        background: #eee;
        border-radius: 5px;
        -webkit-appearance: none;
        margin: 20px 0;
    }
    .med-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 22px; height: 22px;
        background: var(--med-green);
        border: 2px solid #fff;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    .loss-display {
        background: #fff3f3;
        border: 1px dashed #ffcdd2;
        color: #d32f2f;
        padding: 15px;
        border-radius: 10px;
        text-align: center;
        margin-top: 20px;
    }

/* --- استایل ماشین حساب پزشک (اصلاح شده) --- */
    .med-calc-wrapper-fix {
        padding: 80px 0;
        background: #0077b6; /* رنگ آبی پزشکی */
        color: #fff;
        position: relative;
        overflow: hidden;
    }

    .med-calc-bg-pattern {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
        background-size: 20px 20px;
        pointer-events: none;
    }

    .med-calc-container {
        display: flex;
        flex-wrap: wrap;
        gap: 50px;
        align-items: center;
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        position: relative;
        z-index: 2;
    }

    .mc-text-side {
        flex: 1;
        min-width: 300px;
    }
    .mc-text-side h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 20px; color: #fff; }
    .mc-text-side p { line-height: 1.8; opacity: 0.9; font-size: 1.1rem; }

    .mc-box-side {
        flex: 1;
        min-width: 300px;
        max-width: 480px;
        background: #fff;
        padding: 35px;
        border-radius: 20px;
        color: #333;
        box-shadow: 0 25px 60px rgba(0,0,0,0.3);
    }

    /* استایل اسلایدرها */
    .doctor-range-input {
        width: 100%;
        height: 8px;
        background: #e0e0e0;
        border-radius: 10px;
        outline: none;
        -webkit-appearance: none;
        margin: 20px 0 30px;
    }
    
    .doctor-range-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 24px; height: 24px;
        background: #2a9d8f; /* سبز کله غازی */
        border: 3px solid #fff;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        transition: transform 0.2s;
    }
    .doctor-range-input::-webkit-slider-thumb:hover { transform: scale(1.1); }

    .calc-label { font-weight: bold; font-size: 0.95rem; color: #555; display: block; }
    .calc-value { font-size: 1.3rem; font-weight: 800; color: #0077b6; direction: ltr; text-align: left; }

    .result-box-fix {
        background: #ffebee;
        border: 1px dashed #ef5350;
        color: #c62828;
        padding: 20px;
        border-radius: 12px;
        text-align: center;
        margin-top: 10px;
    }
    
    .result-number {
        display: block;
        font-size: 2.2rem;
        font-weight: 900;
        margin: 5px 0;
        font-family: sans-serif;
    }

    @media (max-width: 768px) {
        .med-calc-container { flex-direction: column; }
        .mc-text-side, .mc-box-side { width: 100%; }
    }

    /* --- 4. بخش منشی هوشمند (Visual) --- */
    .med-app-section {
        padding: 100px 0;
        background: #f9fbfd;
        text-align: center;
    }

    .phone-mockup {
        width: 300px; height: 600px;
        background: #fff;
        border: 10px solid #222;
        border-radius: 40px;
        margin: 40px auto 0;
        position: relative;
        overflow: hidden;
        box-shadow: 0 30px 60px rgba(0,0,0,0.15);
    }

    .app-screen {
        width: 100%; height: 100%;
        background: #f5f5f5;
        display: flex; flex-direction: column;
    }

    .app-header { background: var(--med-blue); color: #fff; padding: 20px; text-align: right; }
    .app-body { padding: 15px; flex: 1; overflow-y: hidden; }
    
    .time-slot {
        background: #fff;
        padding: 10px;
        border-radius: 8px;
        margin-bottom: 10px;
        display: flex; justify-content: space-between; align-items: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        cursor: pointer;
        transition: 0.2s;
    }
    .time-slot:hover { border-right: 4px solid var(--med-green); }
    .time-slot span { font-size: 0.9rem; font-weight: bold; color: #555; }
    .btn-book { background: var(--med-green); color: #fff; border: none; padding: 5px 15px; border-radius: 5px; font-size: 0.8rem; }

    /* استایل اختصاصی FAQ جدید */
    .med-faq-section-new {
        padding: 80px 0;
        background: #fff;
    }
    
    .faq-container-new {
        max-width: 800px;
        margin: 0 auto;
        border: 1px solid #eee;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    }

    .faq-item-new {
        border-bottom: 1px solid #eee;
        background: #fff;
    }
    .faq-item-new:last-child { border-bottom: none; }

    /* دکمه سوال */
    .faq-question-btn {
        width: 100%;
        padding: 20px;
        background: #fff;
        border: none;
        outline: none;
        text-align: right;
        font-family: inherit;
        font-size: 1.05rem;
        font-weight: bold;
        color: #023e8a; /* آبی تیره */
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        transition: 0.3s;
    }

    .faq-question-btn:hover {
        background: #f0f7ff;
    }

    .faq-question-btn i {
        color: #0077b6;
        transition: transform 0.3s ease;
    }

    /* حالت فعال */
    .faq-question-btn.active {
        background: #e3f2fd;
        color: #0077b6;
    }
    .faq-question-btn.active i {
        transform: rotate(180deg); /* چرخش فلش */
    }

    /* بدنه پاسخ */
    .faq-answer-content {
        display: none; /* پیش فرض مخفی */
        padding: 0 20px 25px;
        color: #555;
        line-height: 1.8;
        font-size: 0.95rem;
        background: #fff;
        border-top: 1px solid transparent;
    }
    
    .faq-question-btn.active + .faq-answer-content {
        display: block; /* نمایش وقتی فعال است */
        border-top-color: #e3f2fd;
    }
    /* ریسپانسیو */
    @media (max-width: 900px) {
        .med-hero h1 { font-size: 2.2rem !important; }
        .calc-layout { flex-direction: column; }
    }
    
    
    /* --- 1. استایل بخش جذب بیمار (SEO Map) --- */
    .med-seo-section {
        padding: 80px 0;
        background: #fdfdfd;
        overflow: hidden;
    }

    .seo-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 50px;
        flex-wrap: wrap;
    }

    .seo-text { flex: 1; min-width: 300px; max-width: 500px; }
    
    .seo-visual {
        flex: 1;
        min-width: 300px;
        position: relative;
    }

    /* کارت گوگل مپ شبیه‌سازی شده */
    .google-map-card {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.1);
        padding: 20px;
        position: relative;
        border: 1px solid #eee;
    }

    .map-header {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
    .search-bar-mock {
        background: #f1f3f4;
        border-radius: 30px;
        padding: 10px 15px;
        flex: 1;
        color: #555;
        font-size: 0.9rem;
        display: flex; align-items: center; gap: 10px;
    }

    .map-content {
        height: 250px;
        background-color: #eef2f3;
        background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Google_Maps_Logo_2020.svg/512px-Google_Maps_Logo_2020.svg.png'); /* لوگوی محو برای پس زمینه */
        background-size: 50px;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 10px;
        position: relative;
        overflow: hidden;
    }
    
    /* پین‌های نقشه */
    .map-pin {
        position: absolute;
        width: 40px; height: 40px;
        background: #ea4335;
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
        box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
        display: flex; align-items: center; justify-content: center;
        animation: bouncePin 2s infinite;
        z-index: 2;
    }
    .map-pin::after {
        content: ''; width: 15px; height: 15px; background: #fff; border-radius: 50%;
    }
    
    .pin-me { top: 40%; left: 50%; background: var(--med-blue); z-index: 3; }
    .pin-other { width: 30px; height: 30px; background: #999; animation: none; opacity: 0.6; }
    
   /* استایل کارت اطلاعات پزشک (فیکس شده) */
    .map-content {
        position: relative; /* مهم برای قرارگیری کارت */
        height: 300px;
        background-color: #eef2f3;
        background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Google_Maps_Logo_2020.svg/512px-Google_Maps_Logo_2020.svg.png');
        background-size: 50px;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 15px;
        overflow: hidden; /* جلوگیری از بیرون زدگی */
        border: 1px solid #ddd;
    }

    /* پین روی نقشه */
    .pin-center {
        position: absolute;
        top: 40%; left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3rem;
        color: #ea4335;
        z-index: 5;
        filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3));
        animation: bouncePin 2s infinite;
    }

    /* کارت اطلاعات سفید پایین */
    .doctor-info-card-fixed {
        position: absolute;
        bottom: 20px; 
        left: 20px; 
        right: 20px; /* کشیده شدن در عرض */
        background: #fff;
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        display: flex !important; /* اجبار به نمایش */
        align-items: center;
        gap: 15px;
        z-index: 100; /* لایه خیلی بالا */
        opacity: 1 !important;
        visibility: visible !important;
    }

    .dic-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #0077b6; }
    .dic-text h4 { margin: 0; font-size: 1rem; color: #333; font-weight: bold; }
    .dic-stars { color: #fbbc04; font-size: 0.8rem; margin-top: 4px; }
    .dic-route { 
        margin-right: auto; 
        width: 40px; height: 40px; 
        background: #0077b6; color: #fff; 
        border-radius: 50%; 
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem;
        box-shadow: 0 4px 10px rgba(0, 119, 182, 0.4);
    }

    @keyframes bouncePin {
        0%, 100% { transform: translate(-50%, -50%) translateY(0); }
        50% { transform: translate(-50%, -50%) translateY(-10px); }
    }
/* --- اصلاحیه بخش تور مجازی --- */
    .med-tour-section {
        padding: 80px 0;
        background: #fff;
        text-align: center;
    }

    .tour-window {
        max-width: 900px;
        height: 450px; /* ارتفاع ثابت مهم است */
        margin: 40px auto 0;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
        border: 4px solid #fff;
        background-color: #eee; /* رنگ پیش‌فرض اگر عکس لود نشد */
    }

    .tour-image {
        width: 100%; 
        height: 100%;
        /* لینک تصویر جدید و پرسرعت‌تر */
        background-image: url('https://images.unsplash.com/photo-1629909613654-28e377c37b09?q=80&w=2000&auto=format&fit=crop'); 
        background-size: cover;
        background-position: center;
        /* انیمیشن حرکت */
        animation: panImage 25s infinite alternate linear;
        will-change: background-position; /* بهینه سازی برای مرورگر */
    }

    .tour-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.6) 100%);
        display: flex; align-items: center; justify-content: center;
        pointer-events: none; /* کلیک از روی آن رد شود */
        z-index: 2;
    }

    .tour-badge {
        background: rgba(255,255,255,0.25);
        backdrop-filter: blur(8px);
        padding: 12px 30px;
        border-radius: 50px;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.5);
        font-weight: 800;
        font-size: 1.1rem;
        display: flex; align-items: center; gap: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    
    .tour-badge i { animation: spin 4s infinite linear; }

    /* --- حتما این قسمت را کپی کنید (موتور حرکت) --- */
    @keyframes panImage {
        0% { background-position: 0% 50%; transform: scale(1); }
        100% { background-position: 100% 50%; transform: scale(1.15); }
    }

    @keyframes spin { 
        100% { transform: rotate(360deg); } 
    }
    @media (max-width: 768px) {
        .seo-wrapper { flex-direction: column-reverse; }
        .med-sticky-bar { display: flex; }
        body { padding-bottom: 80px; }
        .tour-window { height: 250px; }
    }
    
    
    
    /* --- استایل بخش پرونده الکترونیک (EHR) --- */
    .med-records-section {
        padding: 80px 0;
        background: linear-gradient(to bottom, #fff, #f0f7ff);
        overflow: hidden;
    }

    .records-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
        flex-wrap: wrap;
    }

    .rec-text { flex: 1; min-width: 300px; max-width: 550px; }
    
    .rec-visual {
        flex: 1;
        min-width: 300px;
        position: relative;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* لیست ویژگی‌ها */
    .rec-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 30px;
    }

    .rf-item {
        background: #fff;
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        display: flex;
        align-items: center;
        gap: 15px;
        transition: 0.3s;
        border: 1px solid transparent;
    }

    .rf-item:hover {
        border-color: var(--med-blue);
        transform: translateY(-5px);
    }

    .rf-icon {
        width: 45px; height: 45px;
        background: #e3f2fd;
        color: var(--med-blue);
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem;
    }

    /* ویژوال: تبلت/پرونده دیجیتال */
    .digital-folder {
        width: 320px;
        height: 220px;
        background: #fff;
        border-radius: 20px;
        position: relative;
        box-shadow: 0 30px 60px rgba(0, 119, 182, 0.2);
        z-index: 2;
        padding: 20px;
        border: 1px solid #e1e1e1;
    }

    /* هدر پرونده */
    .df-header {
        display: flex;
        gap: 15px;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .df-avatar { width: 50px; height: 50px; border-radius: 50%; background: #eee; }
    .df-info div { height: 10px; background: #eee; border-radius: 5px; margin-bottom: 5px; }
    .df-info div:first-child { width: 100px; background: var(--med-blue); }
    .df-info div:last-child { width: 60px; }

    /* محتوای پرونده */
    .df-content { display: flex; gap: 10px; }
    .df-file { width: 60px; height: 70px; background: #f9f9f9; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #ccc; }
    
    /* افکت اسکن (Scanning) */
    .scan-line {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(to bottom, transparent, rgba(0, 242, 234, 0.2), transparent);
        z-index: 3;
        animation: scanMove 3s infinite linear;
        border-radius: 20px;
        pointer-events: none;
    }

    /* المان‌های شناور اطراف */
    .float-card {
        position: absolute;
        background: #fff;
        padding: 10px 20px;
        border-radius: 50px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        display: flex; align-items: center; gap: 10px;
        font-size: 0.85rem;
        font-weight: bold;
        color: #555;
        z-index: 3;
        animation: floatCard 4s infinite ease-in-out;
    }
    .float-card i { color: var(--med-green); }

    .fc-1 { top: 20px; right: 0px; animation-delay: 0s; }
    .fc-2 { bottom: 40px; left: -20px; animation-delay: 2s; }
    .fc-3 { top: -30px; left: 20px; color: var(--med-blue); animation-delay: 1s; }

    @keyframes scanMove {
        0% { transform: translateY(-100%); opacity: 0; }
        50% { opacity: 1; }
        100% { transform: translateY(100%); opacity: 0; }
    }

    @keyframes floatCard {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }

    @media (max-width: 900px) {
        .records-container { flex-direction: column; }
        .rec-features { grid-template-columns: 1fr; }
        .rec-visual { height: 350px; width: 100%; }
    }
    
    
    
    /* --- تنظیمات رنگ‌بندی هتل لوکس --- */
:root {
    --hotel-gold: #c19b76;       /* طلایی کلاسیک */
    --hotel-gold-dark: #a07e5e;  /* طلایی تیره */
    --hotel-dark: #1a1a1a;       /* مشکی زغالی */
    --hotel-bg: #f9f9f9;         /* خاکستری خیلی محو */
    --hotel-white: #ffffff;
}

#landing-hotel-wrap {
    font-family: inherit !important;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    direction: rtl;
    background: var(--hotel-bg);
    color: var(--hotel-dark);
}


/* کانتینر اصلی هیرو */
.hotel-hero {
    position: relative;
    min-height: 85vh; /* ارتفاع مناسب */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 80px;
    background-color: var(--navy-dark);
}

/* تصویر پس‌زمینه */
.hotel-hero-bg {
    position: absolute;
    top: -5%; left: -5%; 
    width: 110%; height: 110%; /* کمی بزرگتر برای حرکت موس */
    background-image: url('https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?q=80&w=1920&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform 0.1s ease-out; /* نرمی حرکت */
}

/* لایه تاریک روی عکس */
.hotel-hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(10, 25, 47, 0.8), rgba(10, 25, 47, 0.4));
    z-index: 1;
}

/* محتوای وسط */
.hotel-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    max-width: 1000px;
}

.hero-text-wrapper {
    margin-bottom: 50px;
}

.hotel-stars {
    color: var(--gold-primary);
    font-size: 1.2rem;
    margin-bottom: 20px;
    letter-spacing: 5px;
    animation: fadeInDown 1s ease-out;
}

.hotel-hero h1 {
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: fadeInUp 1s ease-out;
}

.text-gold {
    color: var(--gold-primary);
    font-style: italic;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6); /* درخشش طلایی */
}

.hotel-hero p {
    font-size: 1.15rem;
    color: #ddd;
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
    animation: fadeInUp 1s ease-out 0.3s backwards;
}

/* --- ویجت رزرو لوکس (Luxury Widget) --- */
.luxury-booking-widget {
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    border-bottom: 4px solid var(--gold-primary);
    max-width: 850px;
    margin: 0 auto;
    animation: fadeInUp 1s ease-out 0.6s backwards;
    transform-style: preserve-3d;
}

.lb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.lb-item {
    flex: 1;
    min-width: 180px;
    text-align: right;
    border: 1px solid #ddd;
    padding: 10px 15px;
    border-radius: 8px;
    background: #fff;
    transition: 0.3s;
}

.lb-item:hover {
    border-color: var(--gold-primary);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.1);
}

.lb-item label {
    display: block;
    font-size: 0.85rem;
    color: var(--navy-dark);
    font-weight: bold;
    margin-bottom: 5px;
}

.lb-item label i { color: var(--gold-primary); margin-left: 5px; }

.lb-input, .lb-select {
    width: 100%;
    border: none;
    outline: none;
    font-size: 1rem;
    color: #555;
    background: transparent;
    font-family: inherit;
}

.lb-btn {
    width: 100%;
    background: linear-gradient(45deg, var(--gold-primary), #eac159);
    color: var(--navy-dark);
    font-weight: 800;
    font-size: 1.1rem;
    padding: 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.lb-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.4);
}

/* انیمیشن‌های ورودی */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .hotel-hero h1 { font-size: 2.2rem !important; }
    .lb-row { flex-direction: column; }
    .luxury-booking-widget { width: 90%; }
}



/* ویجت رزرو (Demo) */
.booking-widget-demo {
    background: #fff; padding: 15px; border-radius: 5px; display: flex; flex-wrap: wrap; gap: 10px;
    max-width: 800px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.bw-item { flex: 1; min-width: 150px; text-align: right; border: 1px solid #eee; padding: 10px; border-radius: 4px; }
.bw-label { font-size: 0.8rem; color: #888; display: block; margin-bottom: 5px; }
.bw-val { font-weight: bold; color: var(--hotel-dark); display: flex; align-items: center; justify-content: space-between; }

.btn-hotel-cta {
    background: var(--hotel-gold); color: #fff; padding: 15px 40px; border: none; font-size: 1rem;
    cursor: pointer; transition: 0.3s; flex: 1; min-width: 150px; font-weight: bold;
}
.btn-hotel-cta:hover { background: var(--hotel-gold-dark); }

/* --- 2. فیچرها --- */
.hotel-features { padding: 100px 0; background: #fff; }
.hf-grid { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; text-align: center; }

.hf-card {
    flex: 1; min-width: 250px; max-width: 350px; padding: 30px;
    border: 1px solid #eee; transition: 0.3s; position: relative;
}
.hf-card:hover { border-color: var(--hotel-gold); transform: translateY(-10px); }

.hf-icon { font-size: 2.5rem; color: var(--hotel-gold); margin-bottom: 20px; }
.hf-card h3 { font-size: 1.3rem; margin-bottom: 15px; color: var(--hotel-dark); font-weight: bold; }
.hf-card p { color: #666; font-size: 0.95rem; line-height: 1.8; }

/* --- 3. ماشین حساب --- */
.hotel-calc-section {
    padding: 80px 0;
    background: var(--hotel-dark);
    color: #fff;
    position: relative;
}

.hc-container {
    display: flex; flex-wrap: wrap; gap: 50px; align-items: center; justify-content: space-between;
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
}

.hc-text { flex: 1; min-width: 300px; }
.hc-text h2 { font-size: 2.5rem; margin-bottom: 20px; color: var(--hotel-gold); font-weight: bold; }
.hc-text p { color: #ccc; line-height: 1.8; margin-bottom: 30px; }

.hc-box {
    flex: 1; min-width: 300px; max-width: 500px;
    background: #fff; padding: 40px; border-radius: 0;
    color: #333; position: relative;
    border-top: 5px solid var(--hotel-gold);
}

.hotel-range {
    width: 100%; height: 4px; background: #eee; outline: none; -webkit-appearance: none; margin: 20px 0 30px;
}
.hotel-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 20px; height: 20px; background: var(--hotel-gold);
    cursor: pointer; transition: 0.2s; border-radius: 50%;
}

.saving-result {
    background: #fdfcf5; border: 1px solid var(--hotel-gold); padding: 20px;
    text-align: center; margin-top: 20px;
}
.saving-amount { display: block; font-size: 2.2rem; font-weight: 900; color: var(--hotel-dark); font-family: sans-serif; }

/* --- 4. نمایش بصری --- */
.hotel-showcase { padding: 100px 0; background: var(--hotel-bg); text-align: center; }
.showcase-frame {
    max-width: 1000px; margin: 40px auto; position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2); border: 10px solid #fff;
}
.showcase-img { width: 100%; display: block; }
.showcase-badge {
    position: absolute; bottom: 30px; left: -30px; background: var(--hotel-gold);
    color: #fff; padding: 20px 30px; font-size: 1.2rem; font-weight: bold;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

@keyframes zoomBg { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }

@media (max-width: 768px) {
    .hotel-hero h1 { font-size: 2.2rem !important; }
    .hc-container { flex-direction: column; }
    .booking-widget-demo { flex-direction: column; }
    .showcase-badge { left: 0; bottom: 0; width: 100%; text-align: center; }
}
    
    
    
    
    /* 1. بخش Upsell */
.hotel-upsell-section {
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}
.upsell-layout {
    display: flex; align-items: center; justify-content: space-between; gap: 50px; flex-wrap: wrap;
}
.upsell-text { flex: 1; min-width: 300px; }
.section-badge {
    background: var(--hotel-dark); color: #fff; padding: 5px 15px; display: inline-block;
    font-size: 0.8rem; margin-bottom: 15px; letter-spacing: 1px;
}
.upsell-text h2 { font-size: 2.2rem; color: var(--hotel-dark); margin-bottom: 20px; font-weight: 800; }
.upsell-text p { color: #666; line-height: 1.8; margin-bottom: 30px; }
.upsell-list li { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; font-weight: bold; color: #444; }
.upsell-list li i { color: var(--hotel-gold); }

/* کارت گرافیکی پیشنهاد */
.offer-card {
    width: 320px; background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    border-radius: 10px; overflow: hidden; border: 1px solid #eee; margin: 0 auto;
}
.oc-header {
    background: var(--hotel-gold); color: #fff; padding: 15px; display: flex;
    justify-content: space-between; align-items: center; font-weight: bold;
}
.oc-body { padding: 20px; }
.oc-item {
    display: flex; align-items: center; gap: 15px; margin-bottom: 15px; padding-bottom: 15px;
    border-bottom: 1px solid #f5f5f5;
}
.oc-img { width: 50px; height: 50px; border-radius: 8px; background-size: cover; background-position: center; }
.oc-info h4 { margin: 0; font-size: 0.9rem; color: #333; }
.oc-info span { font-size: 0.8rem; color: var(--hotel-gold-dark); font-weight: bold; }
.oc-add {
    margin-right: auto; width: 30px; height: 30px; background: #f0f0f0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #aaa; cursor: pointer; transition: 0.3s;
}
.oc-add:hover { background: var(--hotel-gold); color: #fff; }
.oc-total {
    display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px;
    font-size: 1.1rem; color: var(--hotel-dark);
}

/* 2. بخش مقایسه (Compare) */
.hotel-compare-section {
    padding: 80px 0; background: #f9f9f9;
}
.compare-box-wrapper {
    display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; max-width: 900px; margin: 0 auto;
}
.compare-card {
    flex: 1; min-width: 280px; background: #fff; padding: 30px; border-radius: 10px;
    text-align: center; border: 1px solid #eee; position: relative;
}
.compare-card.ota { opacity: 0.7; transform: scale(0.95); }
.compare-card.direct {
    transform: scale(1.05); border: 2px solid var(--hotel-gold);
    box-shadow: 0 20px 40px rgba(193, 155, 118, 0.2); z-index: 2;
}
.cc-badge {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
    background: var(--hotel-gold); color: #fff; padding: 5px 15px; border-radius: 20px; font-size: 0.8rem;
}
.cc-header { font-size: 1rem; color: #888; margin-bottom: 10px; }
.cc-price { font-size: 1.8rem; font-weight: 800; color: #333; margin-bottom: 20px; }
.cc-price.gold { color: var(--hotel-gold-dark); }
.cc-features { list-style: none; padding: 0; text-align: right; margin-bottom: 20px; }
.cc-features li { margin-bottom: 10px; font-size: 0.9rem; display: flex; align-items: center; gap: 10px; }
.cc-features li.negative i { color: #ccc; }
.cc-features li.positive i { color: green; }
.cc-features li.negative { color: #999; text-decoration: line-through; }
.cc-features li.positive { color: #333; font-weight: bold; }
.cc-btn {
    width: 100%; background: var(--hotel-dark); color: #fff; border: none;
    padding: 12px; border-radius: 5px; cursor: pointer; font-weight: bold;
}
.vs-circle {
    width: 50px; height: 50px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; color: #ccc; border: 1px solid #eee; z-index: 3;
}

/* 3. سوالات متداول */
.hotel-faq-section { padding: 80px 0; background: #fff; }
.ht-faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.ht-faq-item { background: #fdfdfd; padding: 25px; border: 1px solid #eee; border-right: 3px solid var(--hotel-gold); }
.ht-faq-item h4 { font-size: 1.1rem; color: var(--hotel-dark); margin-bottom: 15px; font-weight: bold; }
.ht-faq-item p { color: #666; line-height: 1.7; font-size: 0.95rem; }

@media (max-width: 768px) {
    .upsell-layout { flex-direction: column; }
    .compare-card.ota { transform: scale(1); opacity: 1; order: 2; }
    .compare-card.direct { transform: scale(1); order: 1; }
    .vs-circle { display: none; }
}
    
    
    

    .agency-hotel-cta {
        position: relative;
        /* تصویر پس‌زمینه: حس بیزینس و مدیریت */
        background-image: url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?q=80&w=1920&auto=format&fit=crop');
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        padding: 100px 0;
        text-align: center;
        color: #fff;
        border-top: 5px solid var(--hotel-gold);
    }

    .ah-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(26, 26, 26, 0.95));
        z-index: 1;
    }

    .ah-content {
        position: relative; z-index: 2; max-width: 850px; margin: 0 auto; padding: 0 20px;
    }

    .ah-pre-title {
        color: var(--hotel-gold); letter-spacing: 2px; font-size: 0.9rem; font-weight: bold;
        text-transform: uppercase; margin-bottom: 15px; display: block;
    }

    .agency-hotel-cta h2 {
        font-size: 2.8rem; font-family: serif; color: #fff; margin-bottom: 25px; line-height: 1.4;
    }
    
    .agency-hotel-cta h2 span {
        color: var(--hotel-gold); font-style: italic; border-bottom: 2px solid var(--hotel-gold);
    }

    .agency-hotel-cta p {
        font-size: 1.15rem; color: #ccc; margin-bottom: 45px; line-height: 1.9;
    }

    .ah-btn-row {
        display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
    }

    .btn-gold-glory {
        background: linear-gradient(45deg, var(--hotel-gold), #d4af37);
        color: #fff; padding: 18px 50px; border-radius: 5px; font-weight: bold; font-size: 1.1rem;
        border: none; cursor: pointer; transition: 0.4s; box-shadow: 0 10px 30px rgba(193, 155, 118, 0.3);
        display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
    }
    .btn-gold-glory:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(193, 155, 118, 0.5); }

    .btn-outline-light {
        background: transparent; border: 2px solid rgba(255,255,255,0.2); color: #fff;
        padding: 16px 40px; border-radius: 5px; font-weight: bold; font-size: 1rem;
        cursor: pointer; transition: 0.3s; text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
    }
    .btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

    /* باکس تضمین */
    .guarantee-box {
        margin-top: 50px; display: inline-flex; align-items: center; gap: 15px;
        background: rgba(255,255,255,0.05); padding: 10px 25px; border-radius: 50px;
        border: 1px solid rgba(255,255,255,0.1);
    }
    .gb-icon { color: var(--hotel-gold); font-size: 1.5rem; }
    .gb-text { text-align: right; }
    .gb-text small { display: block; color: #888; font-size: 0.75rem; }
    .gb-text strong { color: #fff; font-size: 0.9rem; }

    @media (max-width: 768px) {
        .agency-hotel-cta h2 { font-size: 2rem; }
        .guarantee-box { display: none; } /* در موبایل مخفی شود تا شلوغ نشود */
    }
    
    
    
    
    /* --- تم اصلاح شده: ترکیب سفید و طلایی (با ساختار فیکس شده) --- */
    :root {
        --gold-main: #cfa754;      /* طلایی استاندارد */
        --gold-dark: #aa8c2c;
        --dark-navy: #0f172a;      /* سرمه‌ای خیلی تیره برای هدر */
        --white-bg: #ffffff;
        --light-gray: #f8f9fa;
        --text-dark: #334155;      /* رنگ متن خوانا */
    }

    /* 1. ریست کردن کانتینر اصلی برای جلوگیری از بهم ریختگی */
    #landing-jewelry-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        font-family: inherit;
        line-height: 1.8;
        direction: rtl;
        background-color: var(--white-bg); /* پیش‌فرض سفید */
    }

    /* تنظیم کانتینرهای داخلی برای وسط‌چین شدن */
    .jewelry-content, .jc-container, .container {
        width: 90%;
        max-width: 1140px; /* عرض استاندارد بوت‌استرپ */
        margin: 0 auto;
        position: relative;
        z-index: 5;
    }

   /* --- استایل هدر اصلاح شده و مرتب --- */
.jewelry-hero {
    position: relative;
    width: 100%;
    min-height: 85vh; /* ارتفاع مناسب */
    padding-top: 100px;
    padding-bottom: 60px; /* فضا برای نوار قیمت */
    background-color: var(--dark-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* تصویر پس‌زمینه */
.jewelry-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://images.unsplash.com/photo-1615655406736-b37c4fabf923?q=80&w=1920') center/cover;
    opacity: 0.15; z-index: 0; pointer-events: none;
}

/* کانتینر محتوا */
.jewelry-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    gap: 50px; /* فاصله امن بین متن و عکس */
}

/* ستون متن (راست) */
.hero-text-box {
    flex: 1;
    text-align: right;
    min-width: 300px; /* جلوگیری از فشرده شدن */
}

.hero-text-box h1 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 25px;
    color: #fff !important;
}

.hero-text-box p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cbd5e1 !important;
    margin-bottom: 35px;
    max-width: 550px; /* جلوگیری از طولانی شدن خطوط */
}

.luxury-badge {
    display: inline-block;
    color: var(--gold-main);
    border: 1px solid var(--gold-main);
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.85rem;
    margin-bottom: 20px;
    background: rgba(207, 167, 84, 0.1);
}

/* دکمه */
.btn-gold-luxury {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gold-main);
    color: #000 !important;
    padding: 16px 40px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.05rem;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    text-decoration: none;
}
.btn-gold-luxury:hover { transform: translateY(-3px); background: #fff; }

/* ستون تصویر (چپ) */
.hero-visual-box {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* چسبیدن به چپ */
    position: relative;
}

.ring-showcase {
    position: relative;
    width: 100%;
    max-width: 480px; /* محدود کردن سایز عکس */
}

.ring-img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5));
    animation: floatRing 6s infinite ease-in-out;
}

/* تگ قیمت */
.price-tag-floating {
    position: absolute;
    bottom: 20px;
    right: -20px; /* بیرون زدن جزئی برای زیبایی */
    background: rgba(255, 255, 255, 0.95);
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    min-width: 200px;
    text-align: center;
    z-index: 5;
}

.price-tag-floating strong {
    font-size: 1.4rem;
    color: #0f172a !important;
    display: block;
    margin: 5px 0;
}

/* نوار قیمت متحرک (فیکس شده) */
.gold-ticker-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.8);
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    z-index: 20;
    overflow: hidden; /* مخفی کردن بیرون زدگی */
}

.gold-ticker {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    animation: ticker 25s linear infinite; /* سرعت مناسب */
    padding-left: 100%; /* شروع از بیرون */
}

.ticker-item {
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* انیمیشن‌ها */
@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

@keyframes floatRing {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* ریسپانسیو (موبایل و تبلت) */
@media (max-width: 991px) {
    .jewelry-hero {
        padding-top: 120px;
        min-height: auto;
        display: block; /* تغییر دیسپلی برای موبایل */
    }
    
    .jewelry-content {
        flex-direction: column-reverse; /* عکس بالا، متن پایین */
        text-align: center;
        gap: 40px;
    }
    
    .hero-text-box { text-align: center; margin-bottom: 40px; }
    
    .hero-text-box h1 { font-size: 2.5rem; }
    
    .hero-visual-box { justify-content: center; }
    
    .price-tag-floating {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: -20px;
        width: 80%;
    }
    
    /* مخفی کردن نوار قیمت در موبایل اگر جا کمه */
    .gold-ticker-wrap { display: none; }
}
    /* --- 3. امکانات (زمینه روشن و تمیز) --- */
    .jewelry-features {
        padding: 80px 0;
        background-color: var(--white-bg); /* سفید */
        color: var(--text-dark);
    }

    .section-header-gold { margin-bottom: 60px; text-align: center; }
    .section-header-gold h2 { color: #222 !important; font-size: 2.2rem; font-weight: 800; margin-bottom: 10px; }
    
    .divider-diamond {
        display: flex; align-items: center; justify-content: center;
        color: var(--gold-main); font-weight: bold; font-size: 0.9rem; letter-spacing: 2px;
    }
    .divider-diamond::before, .divider-diamond::after {
        content: ''; width: 50px; height: 2px; background: var(--gold-main); margin: 0 15px; opacity: 0.5;
    }

    .jf-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* چیدمان منظم */
        gap: 30px;
    }

    .jf-card {
        background: #fff;
        border: 1px solid #eee;
        padding: 30px;
        border-radius: 15px;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    }
    .jf-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.08);
        border-color: var(--gold-main);
    }
    .jf-icon { font-size: 2.5rem; color: var(--gold-main); margin-bottom: 20px; }
    .jf-card h3 { font-size: 1.2rem; color: #222; margin-bottom: 10px; }
    .jf-card p { font-size: 0.95rem; color: #666; line-height: 1.6; }

   /* --- اصلاحیه بخش ماشین حساب (فیکس چیدمان و رنگ) --- */
.jewelry-calc-section {
    padding: 80px 0;
    background-color: #f8f9fa; /* زمینه طوسی خیلی روشن */
    border-top: 1px solid #e2e8f0;
}

.jc-container {
    display: flex;
    align-items: center; /* تراز عمودی وسط */
    justify-content: center;
    gap: 60px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px;
}

/* --- تنظیمات نقشه و آیکون (سمت راست) --- */
.jc-visual {
    flex: 0.8;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 350px; /* ارتفاع تضمین شده برای وسط‌چین شدن */
}

.map-concept {
    width: 350px;
    height: 350px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* حذف حاشیه اضافی که باعث بهم ریختگی میشد */
}

.map-icon {
    font-size: 10rem; /* بزرگتر کردن آیکون */
    color: #e2e8f0; /* رنگ پایه طوسی روشن */
    z-index: 2;
    text-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
}

/* هاور افکت برای جذابیت */
.jc-visual:hover .map-icon {
    color: var(--gold-main); /* طلایی شدن موقع هاور */
    transform: scale(1.05);
}

/* حلقه‌های متحرک */
.map-circle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--gold-main); /* حاشیه طلایی ضخیم‌تر */
    border-radius: 50%;
    opacity: 0;
    z-index: 1;
    box-shadow: 0 0 15px rgba(207, 167, 84, 0.2);
    animation: ripple 3s infinite linear;
}

.c-1 { width: 120px; height: 120px; animation-delay: 0s; }
.c-2 { width: 220px; height: 220px; animation-delay: 1s; }
.c-3 { width: 320px; height: 320px; animation-delay: 2s; }

/* --- تنظیمات باکس سفید (سمت چپ) --- */
.jc-box {
    flex: 1.2;
    background: #ffffff;
    padding: 50px;
    border-radius: 25px;
    border: 1px solid #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.04); /* سایه نرم و تمیز */
    position: relative;
    z-index: 5;
}

.jc-box h3 {
    color: var(--gold-dark) !important;
    margin-bottom: 25px;
    font-size: 1.6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
}

.jc-box label {
    display: block;
    font-weight: 700;
    margin-top: 25px;
    color: #334155 !important;
    font-size: 0.95rem;
}

/* اصلاح رنگ بنفش اسلایدر به طلایی */
.gold-val {
    color: var(--gold-main) !important;
    font-weight: 800;
    font-size: 1.4rem;
    text-align: left;
    direction: ltr;
    margin-bottom: 12px;
}

.gold-range {
    -webkit-appearance: none; /* حذف استایل پیش‌فرض مرورگر */
    width: 100%;
    height: 8px;
    background: #f1f5f9;
    border-radius: 10px;
    outline: none;
    margin: 10px 0;
}

/* استایل دستگیره اسلایدر (Chrome/Safari/Edge) */
.gold-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    background: var(--gold-main) !important; /* رنگ طلایی اجباری */
    border: 4px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(207, 167, 84, 0.4);
    transition: transform 0.1s;
}

/* استایل دستگیره اسلایدر (Firefox) */
.gold-range::-moz-range-thumb {
    width: 26px;
    height: 26px;
    background: var(--gold-main) !important;
    border: 4px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(207, 167, 84, 0.4);
}

.gold-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    background: var(--gold-dark) !important;
}

/* بخش نتیجه */
.jc-result {
    margin-top: 40px;
    text-align: center;
    padding-top: 25px;
    border-top: 2px dashed #f1f5f9;
}

.jc-result span:first-child {
    display: block;
    color: #94a3b8 !important;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.jc-amount {
    display: block;
    font-size: 2.6rem;
    font-weight: 900;
    color: #1e293b !important;
    letter-spacing: -1px;
}

/* انیمیشن موج */
@keyframes ripple {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; border-width: 4px; }
    50% { opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; border-width: 0px; }
}

/* ریسپانسیو */
@media (max-width: 991px) {
    .jc-container {
        flex-direction: column; /* تغییر جهت در موبایل */
        gap: 40px;
    }
    
    .jc-visual {
        min-height: auto;
        margin-bottom: 20px;
    }
    
    .map-icon {
        font-size: 6rem; /* کوچک کردن آیکون در موبایل */
    }
    
    .map-concept {
        width: 250px;
        height: 250px;
    }
}
    /* --- 5. CTA (پایان تیره برای جذابیت) --- */
    .jewelry-cta {
        padding: 100px 0;
        background: var(--dark-navy);
        text-align: center;
        color: #fff;
    }
    .j-cta-content h2 { color: #fff !important; font-size: 2.2rem; margin-bottom: 20px; }
    .j-cta-content p { color: #cbd5e1 !important; margin-bottom: 30px; }
    
    .btn-gold-solid {
        background: var(--gold-main); color: #000 !important; padding: 15px 35px; 
        border-radius: 5px; border: none; font-weight: bold; cursor: pointer; transition: 0.3s;
    }
    .btn-gold-solid:hover { background: #fff; }
    
    .btn-gold-outline {
        border: 2px solid var(--gold-main); color: var(--gold-main) !important; 
        padding: 13px 35px; border-radius: 5px; text-decoration: none; display: inline-block; font-weight: bold;
    }
    .btn-gold-outline:hover { background: var(--gold-main); color: #000 !important; }

    /* انیمیشن‌ها */
    @keyframes floatRing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

    /* ریسپانسیو */
    @media (max-width: 900px) {
        .jewelry-content, .jc-container { flex-direction: column-reverse; text-align: center; }
        .hero-text-box { text-align: center; }
        .gold-ticker-wrap { display: none; }
        .jewelry-hero h1 { font-size: 2rem; }
    }
    
    
    .loupe-section { padding: 80px 0; background: #fff; text-align: center; }
.loupe-demo-wrapper { max-width: 600px; margin: 40px auto; position: relative; }

.loupe-container {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    cursor: none; /* پنهان کردن موس معمولی */
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

#mainImage { width: 100%; height: 100%; object-fit: cover; }

.magnifier-glass {
    position: absolute;
    border: 3px solid var(--gold-main);
    border-radius: 50%;
    cursor: none;
    width: 150px;
    height: 150px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display: none; /* در ابتدا مخفی */
    background-repeat: no-repeat;
    background-image: url('https://images.unsplash.com/photo-1603561591411-07134e71a2a9?q=80&w=1000'); /* همان عکس اصلی */
    background-size: 300%; /* مقدار زوم (3 برابر) */
    z-index: 10;
}

.loupe-instruction { margin-top: 15px; color: #999; font-size: 0.9rem; }


.trust-features-section { padding: 80px 0; background: #fff; }
.trust-grid { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.trust-item {
    flex: 1; min-width: 280px; max-width: 350px;
    border: 1px dashed var(--gold-main); padding: 30px; border-radius: 15px;
    text-align: center; transition: 0.3s;
}
.trust-item:hover { background: #fffcf5; transform: translateY(-5px); border-style: solid; }
.ti-icon { font-size: 2.5rem; color: var(--gold-main); margin-bottom: 20px; }
.trust-item h4 { font-size: 1.1rem; color: #333; margin-bottom: 10px; font-weight: bold; }
.trust-item p { font-size: 0.9rem; color: #666; }



/* --- استایل بخش سوالات متداول (Jewelry FAQ) --- */
.jewelry-faq-section {
    padding: 100px 0;
    background-color: #fff; /* زمینه سفید تمیز */
}

.faq-luxury-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.faq-luxury-item {
    margin-bottom: 15px;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s;
    background: #fff;
}

/* هاور روی باکس سوال */
.faq-luxury-item:hover {
    border-color: var(--gold-main);
    box-shadow: 0 5px 15px rgba(207, 167, 84, 0.1);
}

.faq-luxury-item.active {
    border-color: var(--gold-main);
    background-color: #fffcf5; /* رنگ پس‌زمینه خیلی محو طلایی موقع باز شدن */
}

/* دکمه سوال */
.faq-luxury-btn {
    width: 100%;
    padding: 20px 25px;
    background: none;
    border: none;
    text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: bold;
    color: #333;
    transition: 0.3s;
}

.faq-luxury-btn span {
    line-height: 1.5;
}

.faq-luxury-btn i {
    color: var(--gold-main);
    font-size: 0.9rem;
    transition: transform 0.3s ease;
    background: rgba(207, 167, 84, 0.1);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0; /* جلوگیری از جمع شدن آیکون */
    margin-right: 15px;
}

/* حالت فعال دکمه */
.faq-luxury-item.active .faq-luxury-btn {
    color: var(--gold-dark);
}

.faq-luxury-item.active .faq-luxury-btn i {
    transform: rotate(45deg); /* چرخش ضربدر */
    background: var(--gold-main);
    color: #fff;
}

/* محتوای پاسخ */
.faq-luxury-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    padding: 0 25px;
    opacity: 0;
}

.faq-luxury-item.active .faq-luxury-content {
    padding-bottom: 25px;
    opacity: 1;
    /* max-height با جاوا اسکریپت هندل می‌شود */
}

.faq-luxury-content p {
    margin: 0;
    font-size: 0.95rem;
    color: #555 !important;
    line-height: 1.8;
    text-align: justify;
}







/* --- تم صنعتی آهن (Industrial Orange & Navy) --- */
    :root {
        --steel-orange: #f39c12;   /* نارنجی ایمنی (Accent) */
        --steel-dark: #2c3e50;     /* سرمه‌ای صنعتی (Primary) */
        --steel-light: #ecf0f1;    /* خاکستری روشن (Background) */
        --text-header: #2c3e50;    /* رنگ تیترها */
        --text-body: #555555;      /* رنگ متن */
        --white: #ffffff;
    }

    /* 1. تنظیمات کلی */
    #landing-steel-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        font-family: inherit;
        line-height: 1.8;
        direction: rtl;
        background-color: var(--white);
    }

    /* تنظیم کانتینرهای داخلی */
    .steel-content, .sc-container, .container {
        width: 90%;
        max-width: 1140px;
        margin: 0 auto;
        position: relative;
        z-index: 5;
    }

    /* --- 2. هیرو سکشن (صنعتی) --- */
    .steel-hero {
        position: relative;
        padding-top: 100px;
        padding-bottom: 60px;
        background-color: var(--steel-dark);
        color: #fff;
        min-height: 650px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    /* پترن نقشه فنی در پس‌زمینه */
    .steel-bg {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background-image: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.95)), 
                          url('https://www.transparenttextures.com/patterns/blueprint.png');
        z-index: 0; pointer-events: none;
    }

    .steel-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 50px;
    }

    .hero-text-box { flex: 1; text-align: right; z-index: 2; }
    
    .hero-text-box h1 {
        font-size: 3rem; font-weight: 900; margin-bottom: 20px; line-height: 1.3; color: #fff !important;
    }
    
    .hero-text-box p {
        font-size: 1.1rem; color: #bdc3c7 !important; margin-bottom: 35px; max-width: 550px;
    }

    .orange-text-gradient {
        color: var(--steel-orange);
        text-shadow: 0 0 20px rgba(243, 156, 18, 0.3);
    }

    .industry-badge {
        display: inline-block;
        color: var(--steel-orange); border: 1px solid var(--steel-orange);
        padding: 5px 15px; border-radius: 4px; font-size: 0.85rem; font-weight: bold;
        margin-bottom: 20px; background: rgba(243, 156, 18, 0.1);
    }

    /* دکمه نارنجی */
    .btn-steel-primary {
        background: var(--steel-orange); color: #fff !important;
        padding: 15px 40px; border-radius: 6px; border: none; font-weight: bold; font-size: 1rem;
        cursor: pointer; transition: 0.3s; display: inline-flex; align-items: center; gap: 10px;
    }
    .btn-steel-primary:hover { transform: translateY(-3px); background: #d35400; }

    /* تصویر و کارت شناور */
    .hero-visual-box {
        flex: 1; display: flex; justify-content: flex-end; position: relative;
    }
    .beam-showcase { position: relative; width: 100%; max-width: 480px; }
    
    .steel-img {
        width: 100%; border-radius: 10px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        border: 2px solid rgba(255,255,255,0.1);
    }

    .price-tag-floating {
        position: absolute; bottom: 30px; left: -30px;
        background: rgba(255, 255, 255, 0.98);
        padding: 15px 20px; border-radius: 8px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.3);
        min-width: 220px; text-align: right;
        border-right: 5px solid var(--steel-orange);
    }
    .pt-header { display: flex; justify-content: space-between; font-size: 0.85rem; color: #555; margin-bottom: 5px; }
    .trend-up { color: #27ae60; font-weight: bold; }
    .price-tag-floating strong { font-size: 1.4rem; color: var(--steel-dark); display: block; }
    .pt-chart { height: 30px; margin-top: 5px; }
    .chart-line path { stroke-dasharray: 100; animation: drawLine 2s ease-out forwards; }

    /* نوار قیمت */
    .steel-ticker-wrap {
        position: absolute; bottom: 0; left: 0; width: 100%;
        background: #1a252f; border-top: 1px solid rgba(255,255,255,0.1);
        height: 45px; display: flex; align-items: center; overflow: hidden; z-index: 20;
    }
    .steel-ticker {
        display: flex; gap: 50px; padding-left: 100%; white-space: nowrap;
        animation: ticker 25s linear infinite;
    }
    .ticker-item { color: #ecf0f1; font-size: 0.9rem; font-weight: bold; display: flex; align-items: center; gap: 5px; }
    .ticker-item i.fa-caret-up { color: #2ecc71; }
    .ticker-item i.fa-caret-down { color: #e74c3c; }

    /* --- 3. امکانات (تمیز و سفید) --- */
    .steel-features { padding: 80px 0; background-color: var(--white); }
    
    .section-header-steel { margin-bottom: 60px; text-align: center; }
    .section-header-steel h2 { color: var(--text-header) !important; font-size: 2.2rem; font-weight: 800; margin-bottom: 10px; }
    
    .divider-beam {
        display: flex; align-items: center; justify-content: center;
        color: var(--steel-orange); font-weight: bold; font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase;
    }
    .divider-beam::before, .divider-beam::after {
        content: ''; width: 40px; height: 4px; background: var(--steel-orange); margin: 0 15px; border-radius: 2px;
    }

    .sf-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px;
    }

    .sf-card {
        background: #fff; border: 1px solid #eee; padding: 30px 25px;
        border-radius: 8px; text-align: center; transition: 0.3s;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    }
    .sf-card:hover {
        transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08);
        border-bottom: 3px solid var(--steel-orange);
    }
    .sf-icon {
        width: 70px; height: 70px; background: #fdf2e9; color: var(--steel-orange);
        border-radius: 8px; font-size: 2rem; display: flex; align-items: center; justify-content: center;
        margin: 0 auto 20px;
    }
    .sf-card h3 { font-size: 1.2rem; color: var(--text-header) !important; margin-bottom: 10px; }
    .sf-card p { font-size: 0.95rem; color: var(--text-body) !important; line-height: 1.6; }

    /* --- استایل نهایی ماشین حساب آهن (اصلاح رنگ و آیکون) --- */
.steel-calc-section {
    padding: 80px 0;
    background-color: #ecf0f1;
    position: relative;
    overflow: hidden;
}

/* پترن پس‌زمینه */
.steel-calc-section::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: repeating-linear-gradient(45deg, #e5e8e8 0, #e5e8e8 1px, transparent 0, transparent 50%);
    background-size: 20px 20px; opacity: 0.3; pointer-events: none;
}

.sc-container {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
    z-index: 2;
    border: 1px solid #fff;
}

/* --- اصلاحیه بخش سمت چپ (ویژوال) --- */
.sc-visual {
    flex: 0.8;
    background-color: #2c3e50; /* سرمه‌ای */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-height: 400px;
    border-right: 5px solid #f39c12; /* نوار نارنجی جداکننده */
}

/* پترن شطرنجی واضح‌تر */
.sc-visual::before {
    content: ''; 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 1;
}

/* دایره درخشان پشت آیکون (جدید) */
.sc-visual::after {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(243, 156, 18, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    animation: pulseGlow 3s infinite;
}

/* آیکون ساختمان (واضح‌تر شده) */
.city-icon {
    font-size: 12rem;
    color: rgba(255, 255, 255, 0.1); /* کمی پررنگ‌تر */
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

/* آیکون اصلی (کلاه ایمنی یا چرخ‌دنده) */
.crane-icon {
    font-size: 6rem;
    color: #f39c12 !important; /* نارنجی کامل */
    position: relative; /* تغییر به relative برای قرارگیری در مرکز */
    z-index: 5;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
    animation: floatIcon 4s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes pulseGlow {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 0.5; }
}

/* در موبایل */
@media (max-width: 900px) {
    .sc-visual { display: none; } /* در موبایل مخفی شود بهتر است */
}

/* --- پنل کنترل (سمت راست) --- */
.sc-box {
    flex: 1.2;
    padding: 40px;
    background: #fff;
    position: relative;
    z-index: 5;
}

.sc-box h3 {
    color: #2c3e50 !important;
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 30px;
    display: flex; align-items: center; gap: 10px;
}

.sc-box h3 i { color: #f39c12; }

/* استایل ورودی‌ها */
.sc-box label {
    display: flex; justify-content: space-between; font-weight: 700;
    color: #34495e !important; margin-bottom: 10px; margin-top: 20px;
}

/* مقدار عدد */
.steel-val {
    background: #2c3e50; color: #fff; padding: 2px 10px; border-radius: 4px; font-size: 0.85rem;
}

/* --- اسلایدرها (رفع مشکل رنگ بنفش) --- */
input[type=range].steel-range {
    -webkit-appearance: none; /* حذف استایل پیش‌فرض */
    width: 100%;
    height: 10px;
    background: #dfe6e9;
    border-radius: 5px;
    outline: none;
    margin: 10px 0;
}

/* استایل دستگیره برای کروم و سافاری */
input[type=range].steel-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px; 
    height: 28px;
    background: #f39c12 !important; /* نارنجی اجباری */
    border: 4px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    margin-top: -9px; /* تراز کردن وسط خط */
    position: relative; z-index: 10;
}

/* استایل دستگیره برای فایرفاکس */
input[type=range].steel-range::-moz-range-thumb {
    width: 28px; height: 28px;
    background: #f39c12 !important; /* نارنجی اجباری */
    border: 4px solid #fff;
    border-radius: 50%;
    cursor: pointer;
}

/* هاور روی اسلایدر */
input[type=range].steel-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    background: #e67e22 !important;
}

/* --- باکس نتیجه --- */
.sc-result {
    margin-top: 40px;
    background: #2c3e50;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #34495e;
    position: relative;
}

/* پیچ‌های صنعتی تزیینی */
.sc-result::after, .sc-result::before {
    content: ''; position: absolute; top: 10px; width: 8px; height: 8px;
    background: #576574; border-radius: 50%;
}
.sc-result::after { right: 10px; }
.sc-result::before { left: 10px; }

.sc-result span:first-child {
    display: block; color: #95a5a6 !important; font-size: 0.9rem; margin-bottom: 5px;
}

.sc-amount {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    color: #f39c12 !important; /* نارنجی */
    font-family: sans-serif;
    text-shadow: 0 0 15px rgba(243, 156, 18, 0.3);
}

/* ریسپانسیو */
@media (max-width: 900px) {
    .sc-container { flex-direction: column; }
    .sc-visual { min-height: 200px; width: 100%; }
    .city-icon { font-size: 6rem; }
    .crane-icon { font-size: 4rem; }
}
    /* --- 5. CTA --- */
    .steel-cta {
        padding: 100px 0;
        background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)), 
                    url('https://images.unsplash.com/photo-1565008447742-97f6f38c985c?q=80&w=1920');
        background-size: cover; background-attachment: fixed; text-align: center; color: #fff;
    }
    .s-cta-content h2 { color: #fff !important; font-size: 2.5rem; margin-bottom: 20px; }
    .s-cta-content p { color: #ecf0f1 !important; margin-bottom: 30px; font-size: 1.2rem; }
    
    .btn-steel-solid {
        background: var(--steel-orange); color: #fff !important; padding: 15px 40px; border: none; 
        font-weight: bold; cursor: pointer; transition: 0.3s; border-radius: 6px; font-size: 1.1rem;
    }
    .btn-steel-solid:hover { background: #d35400; }
    
    .btn-steel-outline {
        border: 2px solid #fff; color: #fff !important; padding: 13px 40px; text-decoration: none;
        font-weight: bold; transition: 0.3s; font-size: 1.1rem; border-radius: 6px; display: inline-block;
    }
    .btn-steel-outline:hover { background: #fff; color: var(--steel-dark) !important; }

    /* انیمیشن‌ها */
    @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
    @keyframes drawLine { to { stroke-dashoffset: 0; } }

    /* ریسپانسیو */
    @media (max-width: 991px) {
        .steel-content, .sc-container { flex-direction: column-reverse; text-align: center; }
        .hero-text-box { text-align: center; margin-bottom: 40px; }
        .hero-visual-box { justify-content: center; }
        .price-tag-floating { left: 50%; transform: translateX(-50%); bottom: -20px; }
        .steel-ticker-wrap { display: none; }
        .steel-hero h1 { font-size: 2.2rem; }
        .sc-visual { display: none; } /* مخفی کردن آیکون بزرگ در موبایل */
    }
    
    
    /* --- استایل بخش یکپارچگی (Integration) --- */
.steel-integration {
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.integration-wrapper {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 50px auto 0;
    /* دایره محیطی فرضی */
    border: 1px dashed #e0e0e0;
    border-radius: 50%;
}

/* هسته مرکزی */
.core-circle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 140px; height: 140px;
    background: var(--steel-dark);
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #fff;
    z-index: 10;
    box-shadow: 0 0 30px rgba(44, 62, 80, 0.3);
    border: 5px solid #fff;
}

.core-circle i { font-size: 3rem; margin-bottom: 10px; color: var(--steel-orange); }
.core-circle span { font-weight: bold; font-size: 1.1rem; }

/* پالس متحرک */
.pulse-ring {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%; border: 2px solid var(--steel-orange);
    animation: pulseCore 2s infinite;
}

@keyframes pulseCore {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* آیتم‌های اطراف (ماهواره‌ها) */
.satellite-item {
    position: absolute;
    text-align: center;
    width: 160px;
    transition: 0.3s;
}

.satellite-item:hover { transform: scale(1.1); }

.sat-icon {
    width: 70px; height: 70px;
    background: #f8f9fa;
    border: 2px solid var(--steel-dark);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px;
    font-size: 1.8rem; color: var(--steel-dark);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.satellite-item strong { display: block; color: var(--steel-dark); font-size: 1.1rem; }
.satellite-item small { color: #888; font-size: 0.85rem; }

/* موقعیت‌دهی دقیق ۴ آیتم */
.s-1 { top: 0; left: 50%; transform: translateX(-50%); } /* بالا */
.s-2 { bottom: 0; left: 50%; transform: translateX(-50%); } /* پایین */
.s-3 { top: 50%; left: -60px; transform: translateY(-50%); } /* چپ */
.s-4 { top: 50%; right: -60px; transform: translateY(-50%); } /* راست */

/* خطوط اتصال */
.line {
    position: absolute;
    background: #bdc3c7;
    z-index: 1;
    opacity: 0.5;
    transform-origin: center;
}

/* انیمیشن جریان دیتا */
.line::after {
    content: ''; position: absolute; top: 0; left: 0;
    width: 10px; height: 100%; background: var(--steel-orange);
    border-radius: 5px;
    animation: flowData 2s linear infinite;
}

/* تنظیمات خطوط برای ۴ جهت */
.l-1 { top: 70px; left: 50%; width: 2px; height: 160px; transform: translateX(-50%) translateY(-100%); } /* بالا */
.l-2 { bottom: 70px; left: 50%; width: 2px; height: 160px; transform: translateX(-50%) translateY(100%); } /* پایین */
.l-3 { top: 50%; left: 70px; width: 160px; height: 2px; transform: translateY(-50%) translateX(-100%); } /* چپ */
.l-4 { top: 50%; right: 70px; width: 160px; height: 2px; transform: translateY(-50%) translateX(100%); } /* راست */

.l-1::after { top: 0; width: 100%; height: 20px; animation: flowDataV 2s infinite; }
.l-2::after { top: 0; width: 100%; height: 20px; animation: flowDataV 2s infinite reverse; }
.l-3::after { left: 0; height: 100%; width: 20px; animation: flowDataH 2s infinite; }
.l-4::after { left: 0; height: 100%; width: 20px; animation: flowDataH 2s infinite reverse; }

@keyframes flowDataV { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes flowDataH { 0% { left: 100%; opacity: 0; } 100% { left: 0; opacity: 1; } }

/* ریسپانسیو */
@media (max-width: 768px) {
    .integration-wrapper { width: 300px; height: 500px; border: none; }
    .satellite-item { position: relative; margin: 30px auto; transform: none !important; left: auto; top: auto; right: auto; bottom: auto; }
    .core-circle, .connector-lines { display: none; } /* در موبایل خطوط حذف و ستونی شود */
}



/* --- استایل بخش اشتراک واتساپ --- */
.whatsapp-feature-section {
    padding: 100px 0;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.ws-content-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

/* ستون متن */
.ws-text { flex: 1; min-width: 300px; }
.ws-text h2 { 
    color: var(--steel-dark); font-size: 2.2rem; margin-bottom: 20px; font-weight: 800; 
}
.ws-text h2 i { color: #25d366; margin-left: 10px; } /* سبز واتساپ */

/* مراحل */
.ws-steps {
    display: flex; align-items: center; margin-top: 40px; gap: 10px;
}
.step-item { display: flex; align-items: center; gap: 10px; font-weight: bold; color: var(--steel-dark); font-size: 0.9rem; }
.step-num {
    width: 30px; height: 30px; background: var(--steel-orange); color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.step-line { flex: 1; height: 2px; background: #eee; min-width: 20px; }

/* --- استایل باکس دمو (طراحی نرم‌افزاری) --- */
.ws-demo-box {
    flex: 1.2;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.1); /* سایه نرم و عمیق */
    overflow: hidden;
    border: 1px solid #e2e8f0;
    position: relative;
}

/* هدر جدول */
.steel-table-header {
    background: #2c3e50; /* سرمه‌ای */
    color: #fff;
    padding: 18px 25px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 4px solid #f39c12; /* نوار نارنجی زیر هدر */
}

.sth-title { display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 1rem; }
.sth-date { font-size: 0.85rem; opacity: 0.8; background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 50px; }

/* اسکرول‌بار زیبا برای جدول */
.steel-table-wrap {
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    background: #f8f9fa;
}
.steel-table-wrap::-webkit-scrollbar { width: 6px; }
.steel-table-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* --- استایل جدول مدرن --- */
.steel-table {
    width: 100%;
    border-collapse: separate; /* برای فاصله بین ردیف‌ها */
    border-spacing: 0; 
    font-size: 0.95rem;
}

.steel-table th {
    background: #fff;
    color: #64748b;
    padding: 15px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
    position: sticky; top: 0; z-index: 10; /* چسبیدن هدر هنگام اسکرول */
}

.steel-table td {
    padding: 15px;
    color: #334155;
    font-weight: 600;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    transition: 0.2s;
}

/* افکت هاور روی ردیف */
.steel-table tbody tr:hover td {
    background-color: #fffcf5; /* رنگ خیلی روشن نارنجی */
    color: #2c3e50;
}

/* نام و سایز محصول */
.prod-name { font-weight: bold; }
.prod-size { 
    background: #e2e8f0; color: #475569; 
    padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; 
}
.price-val { 
    font-family: sans-serif; letter-spacing: 0.5px; 
    color: #f39c12 !important; font-weight: 800; 
}

/* --- چک‌باکس سفارشی (نارنجی و جذاب) --- */
.custom-check {
    display: block; position: relative;
    cursor: pointer; font-size: 22px;
    user-select: none;
    width: 24px; height: 24px; margin: 0 auto;
}

/* مخفی کردن چک‌باکس اصلی */
.custom-check input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }

/* ساختن باکس جدید */
.checkmark {
    position: absolute; top: 0; left: 0; height: 24px; width: 24px;
    background-color: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    transition: 0.2s ease-in-out;
}

/* وقتی موس روی آن است */
.custom-check:hover input ~ .checkmark { border-color: #f39c12; }

/* وقتی تیک خورد */
.custom-check input:checked ~ .checkmark {
    background-color: #f39c12;
    border-color: #f39c12;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(243, 156, 18, 0.3);
}

/* تیک سفید داخل باکس */
.checkmark:after {
    content: ""; position: absolute; display: none;
}
.custom-check input:checked ~ .checkmark:after { display: block; }
.custom-check .checkmark:after {
    left: 8px; top: 4px; width: 6px; height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* --- دکمه واتساپ (پایین) --- */
.ws-action-area {
    padding: 20px; background: #fff;
    border-top: 1px solid #f1f5f9; text-align: center;
    position: relative; z-index: 20;
}

.btn-whatsapp-share {
    background: linear-gradient(45deg, #25d366, #128c7e);
    color: #fff; border: none;
    padding: 16px 40px; border-radius: 10px;
    font-size: 1.1rem; font-weight: bold;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
    transition: 0.3s; width: 100%;
}

.btn-whatsapp-share:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(37, 211, 102, 0.4);
}

.btn-whatsapp-share i { font-size: 1.4rem; }
.ws-note { display: block; margin-top: 10px; color: #999; font-size: 0.8rem; }

/* ریسپانسیو */
@media (max-width: 900px) {
    .ws-content-wrapper { flex-direction: column; }
    .ws-steps { flex-direction: column; align-items: flex-start; gap: 20px; }
    .step-line { display: none; }
}



/* --- استایل رودمپ (مسیر پروژه) --- */
.steel-roadmap { padding: 80px 0; background: #fff; }

.roadmap-wrapper {
    display: flex; align-items: flex-start; justify-content: center;
    margin-top: 50px; position: relative;
}

.rm-step {
    text-align: center; position: relative; z-index: 2; width: 150px;
}

.rm-icon {
    width: 70px; height: 70px; background: #fff; border: 2px solid #e2e8f0;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px; font-size: 1.5rem; color: #94a3b8; transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.rm-step:hover .rm-icon {
    border-color: var(--steel-orange); color: var(--steel-orange); transform: scale(1.1);
}

.rm-step.highlight .rm-icon {
    background: var(--steel-orange); color: #fff; border-color: var(--steel-orange);
    box-shadow: 0 0 20px rgba(243, 156, 18, 0.4);
}

.rm-content h4 { font-size: 1rem; color: #2c3e50; font-weight: bold; margin-bottom: 5px; }
.rm-content span { font-size: 0.85rem; color: #f39c12; font-weight: bold; }

.rm-line {
    flex: 1; height: 2px; background: #e2e8f0; margin-top: 35px; min-width: 50px; max-width: 100px;
}

@media (max-width: 768px) {
    .roadmap-wrapper { flex-direction: column; align-items: center; }
    .rm-line { width: 2px; height: 50px; margin: 0; margin-top: -10px; margin-bottom: -10px; }
    .rm-step { width: 100%; margin: 10px 0; display: flex; align-items: center; gap: 20px; justify-content: center; }
    .rm-icon { margin: 0; }
    .rm-content { text-align: right; }
}


.steel-clients { padding: 50px 0; background: #f8f9fa; text-align: center; border-top: 1px solid #eee; }
.clients-title { color: #94a3b8; font-weight: bold; margin-bottom: 30px; font-size: 0.95rem; }
.clients-logos {
    display: flex; justify-content: center; gap: 50px; flex-wrap: wrap; align-items: center; opacity: 0.7;
}
.clients-logos img {
    height: 50px; filter: grayscale(100%); transition: 0.3s; cursor: pointer;
}
.clients-logos img:hover { filter: grayscale(0%); transform: scale(1.1); opacity: 1; }



/* --- تم داروخانه (Health Green & Clean White) --- */
    :root {
        --ph-green: #00b894;       /* سبز سلامت (اصلی) */
        --ph-dark-green: #00a884;  /* سبز تیره‌تر برای هاور */
        --ph-blue: #0984e3;        /* آبی پزشکی (Accent) */
        --ph-bg: #f0fdf4;          /* پس‌زمینه خیلی روشن */
        --ph-text: #2d3436;        /* متن تیره */
        --ph-gray: #636e72;        /* متن توضیحات */
        --white: #ffffff;
    }

    /* 1. تنظیمات پایه */
    #landing-ph-wrap {
        width: 100%; font-family: inherit; line-height: 1.8;
        background-color: var(--white); overflow-x: hidden;
    }

    .ph-content, .ph-calc-wrapper, .container {
        width: 90%; max-width: 1140px; margin: 0 auto; position: relative; z-index: 5;
    }

    /* --- 2. هیرو سکشن (تمیز و مدرن) --- */
    .ph-hero {
        position: relative; padding: 120px 0 80px;
        background: radial-gradient(circle at top left, #e0f2f1, #fff);
        min-height: 700px; display: flex; align-items: center; overflow: hidden;
    }

    /* اشکال پس‌زمینه (DNA یا مولکول) */
    .ph-bg-shape {
        position: absolute; right: -10%; top: -10%; width: 50%; height: 80%;
        background: rgba(0, 184, 148, 0.05); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        z-index: 0; animation: morphShape 10s infinite alternate;
    }

    @keyframes morphShape {
        0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
        100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    }

    .ph-content { display: flex; align-items: center; justify-content: space-between; gap: 50px; }

    .ph-text-col { flex: 1; text-align: right; z-index: 2; }

    .med-badge {
        display: inline-block; background: rgba(9, 132, 227, 0.1); color: var(--ph-blue);
        padding: 6px 15px; border-radius: 50px; font-weight: bold; font-size: 0.9rem; margin-bottom: 20px;
    }

    .ph-hero h1 {
        font-size: 3rem; font-weight: 900; color: var(--ph-text) !important; margin-bottom: 20px; line-height: 1.3;
    }

    .green-text-gradient {
        background: linear-gradient(to right, var(--ph-green), var(--ph-blue));
        -webkit-background-clip: text; color: transparent;
    }

    .ph-hero p {
        font-size: 1.1rem; color: var(--ph-gray) !important; margin-bottom: 35px; max-width: 550px;
    }

    .ph-btn-group { display: flex; align-items: center; gap: 20px; }

    .btn-ph-primary {
        background: var(--ph-green); color: #fff !important; padding: 16px 35px; border-radius: 12px;
        border: none; font-weight: bold; font-size: 1.05rem; cursor: pointer; transition: 0.3s;
        box-shadow: 0 10px 20px rgba(0, 184, 148, 0.3); display: flex; align-items: center; gap: 10px;
    }
    .btn-ph-primary:hover { transform: translateY(-3px); background: var(--ph-dark-green); }

    .trust-icons-small i { font-size: 1.5rem; color: #b2bec3; margin-left: 10px; }

    /* --- ویژوال: موکاپ اپلیکیشن --- */
    .ph-visual-col { flex: 1; display: flex; justify-content: flex-end; position: relative; }

    .app-mockup {
    width: 320px; height: 500px; background: #fff; border-radius: 30px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1); border: 8px solid #f1f2f6;
    position: relative; 
    /* overflow: hidden;  <-- این خط حذف شد تا نوتیفیکیشن بیرون بزند */
    display: flex; flex-direction: column;
    z-index: 10; /* برای اینکه روی سایر المان‌ها باشد */
}

    .app-header {
        background: var(--ph-green); color: #fff; padding: 20px;
        display: flex; justify-content: space-between; align-items: center; font-weight: bold;
    }

    .rx-upload-box {
        margin: 40px 20px; padding: 30px 20px; border: 2px dashed #dfe6e9; border-radius: 15px;
        text-align: center; background: #fafafa;
    }
    
    .rx-icon-animate {
        position: relative; width: 60px; height: 60px; margin: 0 auto 15px;
        font-size: 2.5rem; color: var(--ph-blue); overflow: hidden;
    }
    
    .scan-line {
        position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--ph-green);
        box-shadow: 0 0 10px var(--ph-green); animation: scanRx 2s infinite linear;
    }
    
    @keyframes scanRx { 0% { top: 0; } 100% { top: 100%; } }

    .rx-upload-box strong { display: block; color: var(--ph-text); margin-bottom: 5px; }
    .rx-upload-box small { display: block; color: #b2bec3; font-size: 0.8rem; margin-bottom: 15px; }
    
    .btn-upload-demo {
        background: #fff; border: 1px solid var(--ph-green); color: var(--ph-green);
        padding: 8px 20px; border-radius: 5px; cursor: pointer; font-size: 0.9rem;
    }

    /* نوتیفیکیشن شناور (اصلاح شده) */
.ph-floating-notif {
    position: absolute; 
    bottom: 40px; 
    left: -40px; /* بیشتر به سمت چپ کشیده شد تا بیرون بزند */
    background: #fff;
    padding: 15px 20px; /* کمی عریض‌تر */
    border-radius: 12px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* سایه قوی‌تر برای عمق */
    display: flex; align-items: center; gap: 15px; 
    border-left: 5px solid var(--ph-green); /* نوار سبز ضخیم‌تر */
    animation: floatNotif 4s infinite ease-in-out;
    z-index: 20; /* بالاتر از خود گوشی قرار بگیرد */
    min-width: 220px; /* حداقل عرض برای خوانایی */
}

.notif-icon {
    width: 40px; height: 40px; background: #e0f2f1; color: var(--ph-green);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; /* جلوگیری از جمع شدن آیکون */
    font-size: 1.2rem;
}

.notif-text span { display: block; font-weight: bold; font-size: 0.95rem; color: var(--ph-text); }
.notif-text small { color: #b2bec3; font-size: 0.8rem; display: block; margin-top: 2px; }

@keyframes floatNotif { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-10px); } 
}

/* در موبایل */
@media (max-width: 900px) {
    .ph-floating-notif {
        left: 50%; transform: translateX(-50%); /* در موبایل وسط‌چین شود */
        bottom: -30px; /* زیر گوشی قرار بگیرد */
        width: auto; min-width: 250px;
    }
    /* غیرفعال کردن انیمیشن شناور در موبایل برای جلوگیری از پرش */
    .ph-floating-notif { animation: none; }
}

    /* --- 3. ویژگی‌ها (کارت‌های تمیز) --- */
    .ph-features { padding: 100px 0; background: var(--white); }
    
    .section-header-ph h2 { font-size: 2.2rem; font-weight: 800; color: var(--ph-text) !important; margin-bottom: 15px; }
    .divider-pulse {
        width: 12px; height: 12px; background: var(--ph-green); border-radius: 50%; margin: 0 auto;
        position: relative; box-shadow: 0 0 0 4px rgba(0, 184, 148, 0.2);
    }
    .divider-pulse::before, .divider-pulse::after {
        content: ''; position: absolute; top: 5px; width: 60px; height: 2px; background: #dfe6e9;
    }
    .divider-pulse::before { right: 20px; } .divider-pulse::after { left: 20px; }

    .ph-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 50px; }
    
    .ph-card {
        background: #fff; padding: 35px 25px; border-radius: 15px; text-align: center;
        border: 1px solid #f1f2f6; transition: 0.3s;
    }
    .ph-card:hover {
        border-color: var(--ph-green); transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 184, 148, 0.1);
    }
    .ph-icon {
        width: 70px; height: 70px; margin: 0 auto 20px; background: #e0f2f1; color: var(--ph-green);
        border-radius: 12px; font-size: 2rem; display: flex; align-items: center; justify-content: center;
    }
    .ph-card h3 { font-size: 1.2rem; color: var(--ph-text) !important; margin-bottom: 10px; }
    .ph-card p { font-size: 0.95rem; color: var(--ph-gray) !important; }

    /* --- 4. ماشین حساب (سفید و سبز) --- */
    .ph-calc-section { padding: 80px 0; background: #f8fffa; border-top: 1px solid #e2e8f0; }
    
    .ph-calc-wrapper {
        display: flex; gap: 50px; align-items: center; background: #fff;
        padding: 40px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    }
    
    .ph-calc-content { flex: 1.2; }
    .ph-calc-content h3 { color: var(--ph-text) !important; font-size: 1.6rem; margin-bottom: 20px; }
    .ph-calc-content p { color: var(--ph-gray) !important; margin-bottom: 30px; }
    
    .ph-calc-content label { display: block; font-weight: bold; color: var(--ph-text) !important; margin-top: 20px; }
    .ph-val { color: var(--ph-green); font-weight: bold; font-size: 1.2rem; text-align: left; margin-bottom: 10px; }
    
    .ph-range {
        width: 100%; height: 8px; background: #dfe6e9; border-radius: 5px; outline: none; -webkit-appearance: none;
    }
    .ph-range::-webkit-slider-thumb {
        -webkit-appearance: none; width: 24px; height: 24px; background: var(--ph-green);
        border: 3px solid #fff; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .ph-result-box {
        margin-top: 30px; padding: 20px; background: var(--ph-green); color: #fff;
        border-radius: 12px; text-align: center;
    }
    .ph-result-box span { display: block; font-size: 0.9rem; opacity: 0.9; }
    .ph-amount { display: block; font-size: 2.5rem; font-weight: 900; margin: 5px 0; }
    
    .ph-calc-visual { flex: 0.8; position: relative; border-radius: 15px; overflow: hidden; height: 350px; }
    .ph-calc-visual img { width: 100%; height: 100%; object-fit: cover; }
    .visual-badge {
        position: absolute; bottom: 20px; right: 20px; background: #fff; color: var(--ph-text);
        padding: 8px 15px; border-radius: 8px; font-weight: bold; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    /* --- 5. CTA --- */
    .ph-cta {
        padding: 100px 0; position: relative; text-align: center;
        background: url('https://images.unsplash.com/photo-1631549916768-4119b2e5f926?q=80&w=1920');
        background-size: cover; background-attachment: fixed;
    }
    .ph-cta-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(rgba(0, 184, 148, 0.9), rgba(9, 132, 227, 0.8));
    }
    .ph-cta-content { position: relative; z-index: 2; color: #fff; }
    .ph-cta-content h2 { color: #fff !important; font-size: 2.5rem; margin-bottom: 20px; }
    .ph-cta-content p { color: #f1f2f6 !important; margin-bottom: 30px; font-size: 1.2rem; }
    
    .btn-ph-white {
        background: #fff; color: var(--ph-green) !important; padding: 15px 40px; border-radius: 12px;
        border: none; font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: 0.3s;
    }
    .btn-ph-white:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

    @media (max-width: 900px) {
        .ph-content, .ph-calc-wrapper { flex-direction: column-reverse; text-align: center; }
        .ph-text-col { text-align: center; margin-bottom: 40px; }
        .ph-btn-group { justify-content: center; }
        .ph-visual-col { justify-content: center; }
        .ph-floating-notif { left: 50%; transform: translateX(-50%); width: 80%; }
        .ph-calc-visual { width: 100%; height: 250px; }
    }
    
    
    .ph-smart-search { padding: 80px 0; background: #fff; }

.search-demo-wrapper {
    display: flex; align-items: center; justify-content: space-between; gap: 50px;
    background: #f8fffa; padding: 50px; border-radius: 30px;
    border: 1px solid #e2e8f0;
}

.search-text { flex: 1; }
.search-text h2 { font-size: 2rem; color: var(--ph-text); font-weight: 800; margin: 15px 0; }
.check-list { list-style: none; padding: 0; margin-top: 20px; }
.check-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--ph-gray); font-weight: bold; }
.check-list i { color: var(--ph-green); }

.search-visual { flex: 1; position: relative; max-width: 450px; }

.fake-search-bar {
    background: #fff; padding: 15px 20px; border-radius: 15px 15px 0 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); border: 2px solid var(--ph-green);
    display: flex; align-items: center; gap: 15px; font-size: 1.1rem; color: #333;
}

.cursor { animation: blink 1s infinite; color: var(--ph-green); }
@keyframes blink { 50% { opacity: 0; } }

.search-results-dropdown {
    background: #fff; border-radius: 0 0 15px 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); overflow: hidden;
    animation: slideDown 0.5s ease-out forwards; border: 1px solid #eee; border-top: none;
}

@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.sr-item {
    display: flex; align-items: center; gap: 15px; padding: 15px 20px;
    border-bottom: 1px solid #f1f2f6; transition: 0.2s; cursor: pointer;
}
.sr-item:hover { background: #f0fdf4; }
.sr-item img { width: 40px; height: 40px; object-fit: contain; }
.sr-info { flex: 1; }
.sr-info strong { display: block; font-size: 0.95rem; color: var(--ph-text); }
.sr-info small { color: #b2bec3; font-size: 0.8rem; }
.sr-price { color: var(--ph-green); font-weight: bold; font-size: 0.9rem; }

@media (max-width: 900px) {
    .search-demo-wrapper { flex-direction: column; padding: 30px; }
}


.ph-partners { padding: 40px 0; background: #fff; border-top: 1px solid #eee; text-align: center; }
.partner-title { color: #b2bec3; font-weight: bold; margin-bottom: 30px; font-size: 0.9rem; letter-spacing: 1px; }

.partner-logos { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }

.pl-item {
    display: flex; align-items: center; gap: 10px; color: #636e72; font-weight: bold;
    opacity: 0.6; transition: 0.3s; cursor: default;
}
.pl-item:hover { opacity: 1; color: var(--ph-blue); transform: translateY(-3px); }
.pl-item i { font-size: 1.8rem; }




/* --- استایل بخش لیست امکانات کامل (Full Features) --- */
.ph-full-features {
    padding: 80px 0;
    background-color: #f8fffa; /* زمینه بسیار روشن */
    position: relative;
}

/* شبکه گرید */
.features-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

/* استایل کارت امکانات */
.ph-feature-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    display: flex;
    gap: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* نوار رنگی بالای کارت (تزیینی) */
.ph-feature-item::before {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--ph-green), var(--ph-blue));
    opacity: 0; transition: 0.3s;
}

/* هاور کارت */
.ph-feature-item:hover {
    transform: translateY(-7px);
    box-shadow: 0 15px 40px rgba(0, 184, 148, 0.1);
    border-color: transparent;
}

.ph-feature-item:hover::before { opacity: 1; }

/* آیکون باکس */
.feat-icon-box {
    width: 60px; height: 60px;
    background: #e0f2f1;
    color: var(--ph-green);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    transition: 0.3s;
}

.ph-feature-item:hover .feat-icon-box {
    background: var(--ph-green);
    color: #fff;
    transform: rotate(-10deg);
}

/* محتوا */
.feat-content { flex: 1; }

.feat-content h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ph-text);
    margin-bottom: 10px;
}

.feat-content p {
    font-size: 0.95rem;
    color: var(--ph-gray);
    line-height: 1.7;
    margin-bottom: 20px;
    text-align: justify;
}

/* تگ‌های پایین کارت (جزئیات ریز) */
.feat-tags {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 10px; flex-wrap: wrap;
}

.feat-tags li {
    background: #f1f2f6;
    color: #636e72;
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 50px;
    font-weight: bold;
    border: 1px solid #dfe6e9;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .ph-feature-item { flex-direction: column; text-align: center; }
    .feat-icon-box { margin: 0 auto; }
    .feat-tags { justify-content: center; }
    .features-grid-wrapper { grid-template-columns: 1fr; }
}



/* --- استایل سوالات متداول داروخانه (Medical Accordion) --- */
.ph-faq-section {
    padding: 100px 0;
    background-color: #fff;
    position: relative;
}

/* پترن ریز پس‌زمینه */
.ph-faq-section::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(#00b894 1px, transparent 1px);
    background-size: 30px 30px; opacity: 0.05; pointer-events: none;
}

.ph-faq-wrapper {
    max-width: 800px;
    margin: 50px auto 0;
    display: flex; flex-direction: column; gap: 15px;
}

.ph-faq-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

/* هاور روی باکس */
.ph-faq-item:hover {
    border-color: var(--ph-green);
    box-shadow: 0 5px 15px rgba(0, 184, 148, 0.1);
}

/* حالت باز شده (Active) */
.ph-faq-item.active {
    border-color: var(--ph-green);
    background-color: #f0fdf4; /* سبز خیلی روشن */
}

/* دکمه سوال */
.ph-faq-btn {
    width: 100%;
    padding: 20px 25px;
    background: none;
    border: none;
    text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: inherit;
}

.ph-faq-btn span {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ph-text);
    line-height: 1.6;
}

/* آیکون مثبت پزشکی */
.faq-icon {
    width: 32px; height: 32px;
    background: #e0f2f1;
    color: var(--ph-green);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* حالت فنری */
    font-size: 0.9rem;
    margin-right: 15px;
}

.ph-faq-item.active .faq-icon {
    transform: rotate(135deg); /* چرخش ضربدر */
    background: var(--ph-green);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 184, 148, 0.4);
}

.ph-faq-item.active .ph-faq-btn span {
    color: var(--ph-dark-green);
}

/* محتوای پاسخ */
.ph-faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    padding: 0 25px;
    opacity: 0;
}

.ph-faq-item.active .ph-faq-content {
    opacity: 1;
    padding-bottom: 25px;
    /* max-height توسط JS ست می‌شود */
}

.ph-faq-content p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ph-gray);
    line-height: 1.8;
    border-top: 1px dashed rgba(0, 184, 148, 0.2);
    padding-top: 15px;
}








/* --- تم فروشگاهی (Vibrant Purple & Coral) --- */
    :root {
        --shop-purple: #6c5ce7;    /* بنفش مدرن */
        --shop-dark: #2d3436;      /* متن تیره */
        --shop-coral: #ff7675;     /* رنگ دکمه/اکشن */
        --shop-light: #f9f9fa;     /* پس‌زمینه */
        --shop-grad: linear-gradient(135deg, #6c5ce7, #a29bfe);
    }

    #landing-shop-wrap {
      
        background: #fff;
        overflow-x: hidden;
    }

    /* --- 1. هیرو سکشن --- */
    .shop-hero {
        position: relative; padding: 140px 0 100px;
        min-height: 750px; display: flex; align-items: center;
        background: radial-gradient(circle at 10% 20%, #fbfaff, #fff);
    }

    /* اشکال پس‌زمینه (Blobs) */
    .shop-blob-1, .shop-blob-2 {
        position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; z-index: 0;
    }
    .shop-blob-1 { top: -10%; right: -10%; width: 500px; height: 500px; background: #a29bfe; }
    .shop-blob-2 { bottom: 10%; left: -10%; width: 400px; height: 400px; background: #ffeaa7; }

    .shop-content {
        position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 50px;
    }

    .shop-text-col { flex: 1; text-align: right; }

    .trend-badge {
        background: rgba(108, 92, 231, 0.1); color: var(--shop-purple);
        padding: 5px 15px; border-radius: 50px; font-weight: bold; font-size: 0.9rem;
        display: inline-block; margin-bottom: 20px;
    }

    .shop-hero h1 {
        font-size: 3.5rem; font-weight: 900; color: var(--shop-dark); margin-bottom: 20px; line-height: 1.3;
    }

    .purple-text-gradient {
        background: var(--shop-grad); -webkit-background-clip: text; color: transparent;
    }

    .shop-hero p {
        font-size: 1.15rem; color: #636e72; margin-bottom: 35px; max-width: 550px; line-height: 1.8;
    }

    .shop-btn-group { display: flex; align-items: center; gap: 20px; }

    .btn-shop-primary {
        background: var(--shop-purple); color: #fff; padding: 16px 40px; border-radius: 12px;
        border: none; font-weight: bold; font-size: 1.1rem; cursor: pointer;
        box-shadow: 0 10px 25px rgba(108, 92, 231, 0.4); transition: 0.3s;
        display: flex; align-items: center; gap: 10px;
    }
    .btn-shop-primary:hover { transform: translateY(-5px); background: #5849be; }

    .stat-box { text-align: center; line-height: 1.2; }
    .stat-box strong { display: block; font-size: 1.4rem; color: var(--shop-coral); font-weight: 900; }
    .stat-box small { font-size: 0.8rem; color: #b2bec3; }

    /* --- ویژوال: کارت محصول شناور --- */
    .shop-visual-col { flex: 1; display: flex; justify-content: center; perspective: 1000px; }

    .floating-product-card {
        width: 320px; background: #fff; border-radius: 25px;
        box-shadow: 0 25px 50px rgba(0,0,0,0.1); padding: 15px;
        position: relative; animation: floatCard 6s ease-in-out infinite;
        transform-style: preserve-3d;
    }

    @keyframes floatCard { 0%, 100% { transform: translateY(0) rotateY(-5deg); } 50% { transform: translateY(-20px) rotateY(5deg); } }

    .fpc-image {
        position: relative; border-radius: 20px; overflow: hidden; height: 280px;
    }
    .fpc-image img { width: 100%; height: 100%; object-fit: cover; }
    
    .fpc-tag {
        position: absolute; top: 15px; left: 15px; background: var(--shop-coral); color: #fff;
        padding: 5px 10px; border-radius: 8px; font-weight: bold; font-size: 0.85rem;
    }
    .fpc-likes {
        position: absolute; top: 15px; right: 15px; background: rgba(255,255,255,0.9);
        padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; color: #333; font-weight: bold;
    }

    .fpc-details { padding: 15px 5px 5px; text-align: right; }
    .fpc-details h4 { margin: 0 0 10px; font-size: 1.1rem; color: #333; }
    
    .fpc-price { display: flex; gap: 10px; align-items: center; margin-bottom: 15px; }
    .fpc-price .old { text-decoration: line-through; color: #b2bec3; font-size: 0.9rem; }
    .fpc-price .new { color: #333; font-weight: 900; font-size: 1.2rem; }

    .btn-fpc-buy {
        width: 100%; background: var(--shop-dark); color: #fff; border: none; padding: 12px;
        border-radius: 12px; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; padding: 12px 20px;
        transition: 0.3s;
    }
    .btn-fpc-buy:hover { background: var(--shop-purple); }

    .live-sale-notif {
        position: absolute; bottom: 80px; right: -60px; background: #fff; padding: 10px 15px;
        border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 10px;
        animation: popIn 5s infinite; border-right: 4px solid var(--shop-coral);
    }
    .live-sale-notif img { width: 35px; height: 35px; border-radius: 50%; }
    .live-sale-notif small { display: block; color: var(--shop-coral); font-size: 0.75rem; }

    @keyframes popIn { 0%, 90%, 100% { opacity: 0; transform: translateY(20px); } 10%, 80% { opacity: 1; transform: translateY(0); } }

    /* --- 2. فیچرها --- */
    .shop-features { padding: 80px 0; background: #fff; }
    .section-header-shop h2 { font-size: 2.2rem; font-weight: 800; color: var(--shop-dark); margin-bottom: 10px; }
    
    .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; margin-top: 50px; }
    
    .feat-card {
        padding: 30px; border-radius: 20px; background: #fdfdfd; border: 1px solid #f0f0f0;
        text-align: center; transition: 0.3s;
    }
    .feat-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.05); border-color: var(--shop-purple); }
    
    .fc-icon {
        width: 70px; height: 70px; margin: 0 auto 20px; background: rgba(108, 92, 231, 0.1);
        color: var(--shop-purple); font-size: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 18px;
    }
    .feat-card h3 { font-size: 1.1rem; margin-bottom: 10px; font-weight: bold; }
    .feat-card p { font-size: 0.9rem; color: #636e72; line-height: 1.6; }

    /* --- 3. ماژول‌ها --- */
    .shop-modules { padding: 60px 0; background: var(--shop-light); }
    .modules-box {
        background: #fff; border-radius: 25px; padding: 50px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #eee;
    }
    .mb-header { text-align: center; margin-bottom: 40px; }
    .mb-header h3 { font-size: 1.8rem; color: var(--shop-dark); font-weight: 800; }
    
    .mb-list {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
    }
    .mb-item {
        display: flex; align-items: center; gap: 10px; font-size: 1rem; color: #555;
        background: #fbfbfb; padding: 15px; border-radius: 10px; border: 1px solid #f0f0f0;
    }
    .mb-item i { color: var(--shop-coral); background: rgba(255, 118, 117, 0.1); padding: 5px; border-radius: 50%; font-size: 0.8rem; }

    /* --- 4. ماشین حساب --- */
    .shop-calc-section { padding: 80px 0; background: #fff; }
    
    .shop-calc-container {
        display: flex; gap: 50px; background: var(--shop-dark); color: #fff;
        padding: 50px; border-radius: 30px; align-items: center;
        box-shadow: 0 20px 60px rgba(45, 52, 54, 0.3);
        position: relative; overflow: hidden;
    }
    /* دایره‌های تزیینی */
    .shop-calc-container::before {
        content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px;
        background: rgba(255,255,255,0.05); border-radius: 50%;
    }

    .sc-text { flex: 1.2; position: relative; z-index: 2; }
    .sc-text h3 { font-size: 1.8rem; margin-bottom: 20px; }
    .sc-text p { color: #b2bec3; margin-bottom: 30px; }
    .sc-text label { display: block; margin-top: 20px; font-weight: bold; }
    
    .shop-val { color: var(--shop-coral); font-weight: bold; font-size: 1.2rem; margin-bottom: 10px; }
    .shop-range {
        width: 100%; height: 6px; background: rgba(255,255,255,0.2); border-radius: 10px; -webkit-appearance: none;
    }
    .shop-range::-webkit-slider-thumb {
        -webkit-appearance: none; width: 24px; height: 24px; background: var(--shop-coral);
        border: 4px solid var(--shop-dark); border-radius: 50%; cursor: pointer;
    }

    .sc-result-card {
        flex: 0.8; background: #fff; color: var(--shop-dark);
        padding: 40px; border-radius: 20px; text-align: center;
        box-shadow: 0 15px 40px rgba(0,0,0,0.2); position: relative; z-index: 2;
    }
    .result-header { font-size: 1rem; color: #636e72; margin-bottom: 10px; }
    .result-amount { font-size: 3rem; font-weight: 900; color: var(--shop-purple); line-height: 1; margin-bottom: 5px; }
    .result-unit { font-size: 1rem; color: #b2bec3; margin-bottom: 25px; }
    
    .btn-start-now {
        background: var(--shop-dark); color: #fff; border: none; padding: 15px 30px;
        width: 100%; border-radius: 10px; font-weight: bold; cursor: pointer; transition: 0.3s;
    }
    .btn-start-now:hover { background: var(--shop-coral); }

    /* --- 5. CTA --- */
    .shop-cta {
        padding: 100px 0; text-align: center; background: #f8f9fa; border-top: 1px solid #eee;
    }
    .cta-content h2 { font-size: 2.5rem; color: var(--shop-dark); margin-bottom: 20px; font-weight: 900; }
    .cta-content p { font-size: 1.2rem; color: #636e72; margin-bottom: 30px; }
    .btn-shop-outline {
        border: 2px solid var(--shop-purple); color: var(--shop-purple); padding: 12px 35px;
        border-radius: 10px; font-weight: bold; text-decoration: none; transition: 0.3s;
    }
    .btn-shop-outline:hover { background: var(--shop-purple); color: #fff; }

    /* ریسپانسیو */
    @media (max-width: 900px) {
        .shop-content, .shop-calc-container { flex-direction: column-reverse; text-align: center; }
        .shop-text-col { text-align: center; margin-bottom: 40px; }
        .shop-btn-group { justify-content: center; }
        .shop-visual-col { margin-bottom: 40px; }
        .live-sale-notif { display: none; }
        .result-amount { font-size: 2.5rem; }
    }


/* --- استایل بخش پنل مدیریت --- */
.shop-admin-preview { padding: 100px 0; background: #fff; overflow: hidden; }

.sap-layout { display: flex; align-items: center; justify-content: space-between; gap: 60px; }

.sap-text { flex: 1; }
.sap-text h2 { font-size: 2.5rem; font-weight: 900; color: var(--shop-dark); margin: 15px 0; }
.sap-features { list-style: none; padding: 0; margin-top: 30px; }
.sap-features li { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; font-weight: bold; color: #636e72; font-size: 1.1rem; }
.sap-features i { color: var(--shop-purple); background: rgba(108, 92, 231, 0.1); padding: 10px; border-radius: 10px; }

.sap-visual { flex: 1; position: relative; perspective: 1000px; }

.admin-dashboard-card {
    background: #2d3436; color: #fff; border-radius: 20px; padding: 25px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2); transform: rotateY(-10deg) rotateX(5deg);
    transition: 0.5s; border: 1px solid #444;
}
.sap-visual:hover .admin-dashboard-card { transform: rotateY(0) rotateX(0); }

.adc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #444; }
.adc-user img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--shop-purple); }

.adc-stats { display: flex; gap: 15px; margin-bottom: 25px; }
.adc-stat-item { flex: 1; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; text-align: center; }
.adc-stat-item small { display: block; font-size: 0.7rem; opacity: 0.7; margin-bottom: 5px; }
.adc-stat-item strong { font-size: 1.1rem; }
.adc-stat-item.purple { border-bottom: 3px solid var(--shop-purple); }
.adc-stat-item.coral { border-bottom: 3px solid var(--shop-coral); }
.adc-stat-item.blue { border-bottom: 3px solid #74b9ff; }

.adc-chart { background: rgba(0,0,0,0.2); padding: 20px; border-radius: 12px; height: 150px; display: flex; align-items: flex-end; }
.chart-bars { display: flex; justify-content: space-around; width: 100%; height: 100%; align-items: flex-end; gap: 10px; }
.bar { flex: 1; background: #555; border-radius: 5px 5px 0 0; transition: height 1s; }
.bar.active { background: var(--shop-purple); box-shadow: 0 0 15px var(--shop-purple); }

.floating-alert {
    position: absolute; bottom: 40px; right: -40px; background: #fff; color: #333;
    padding: 15px 20px; border-radius: 12px; display: flex; align-items: center; gap: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2); border-left: 5px solid var(--shop-coral);
    animation: floatAlert 4s infinite ease-in-out;
}
.floating-alert i { color: var(--shop-coral); font-size: 1.2rem; }

@keyframes floatAlert { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 900px) {
    .sap-layout { flex-direction: column; }
    .admin-dashboard-card { transform: none; }
    .floating-alert { right: 0; bottom: -20px; }
}



/* --- استایل لیست امکانات کامل (Feature Catalog) --- */
.shop-full-catalog {
    padding: 80px 0;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.catalog-col {
    background: #f9f9fa;
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #eee;
    transition: 0.3s;
}

.catalog-col:hover {
    background: #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    transform: translateY(-5px);
    border-color: var(--shop-purple);
}

/* هدر هر ستون */
.cat-header {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--shop-dark);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(108, 92, 231, 0.1);
    display: flex; align-items: center; gap: 10px;
}

.cat-header i {
    color: var(--shop-purple);
    font-size: 1.2rem;
}

/* لیست آیتم‌ها */
.cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cat-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.cat-list li:last-child { margin-bottom: 0; }

.cat-list i {
    color: #00b894; /* سبز تیک */
    font-size: 1rem;
    margin-top: 4px; /* تراز با خط اول متن */
    flex-shrink: 0;
}

.cat-list div {
    display: flex; flex-direction: column;
}

.cat-list strong {
    font-size: 0.95rem;
    color: #2d3436;
    margin-bottom: 3px;
}

.cat-list small {
    font-size: 0.8rem;
    color: #636e72;
    line-height: 1.5;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .catalog-grid { grid-template-columns: 1fr; }
    .catalog-col { padding: 20px; }
}


/* --- اصلاحیه بخش SEO & UX (۴ ستونه و راست‌چین) --- */
.shop-seo-ux {
    padding: 80px 0;
    background-color: #fff;
    position: relative;
}

.seo-grid-wrapper {
    display: grid;
    /* تغییر مهم: اجبار به نمایش ۴ ستون در دسکتاپ */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; /* فاصله را کمی کمتر کردیم تا ۴ تا جا بشوند */
    margin-top: 50px;
}

/* استایل کلی کارت‌ها */
.seo-card {
    background: #2d3436;
    border-radius: 20px;
    padding: 25px; /* پدینگ را کمی کمتر کردیم تا جمع‌وجور شود */
    color: #fff;
    position: relative;
    overflow: hidden;
    border: 1px solid #444;
    transition: 0.4s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
}

.seo-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(45, 52, 54, 0.4);
    border-color: var(--card-color);
}

/* رنگ‌بندی */
.speed-card { --card-color: #00b894; }
.responsive-card { --card-color: #6c5ce7; }
.nav-card { --card-color: #ff7675; }
.search-card { --card-color: #0984e3; }

/* آیکون بالای کارت */
.card-icon {
    width: 50px; height: 50px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    color: var(--card-color);
    margin-bottom: 20px;
    transition: 0.3s;
}

.seo-card:hover .card-icon { background: var(--card-color); color: #fff; }

.card-content h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 10px; }
.card-content p { font-size: 0.85rem; color: #b2bec3; line-height: 1.6; margin-bottom: 20px; }

/* --- المان‌های بصری (Visual Elements) --- */
.visual-element {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 12px;
    margin-top: auto;
}

/* 1. ویژوال سرعت */
.speed-score { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 5px; }
.speed-score strong { color: #00b894; }
.progress-track { width: 100%; height: 5px; background: #444; border-radius: 10px; overflow: hidden; }
.progress-fill { width: 0%; height: 100%; background: #00b894; border-radius: 10px; transition: width 1.5s ease-out; }
.seo-card:hover .progress-fill { width: 98%; }

/* 2. ویژوال ریسپانسیو */
.devices-visual { display: flex; justify-content: center; gap: 15px; font-size: 1.2rem; color: #636e72; }
.devices-visual i { transition: 0.3s; }
.seo-card:hover .devices-visual i { color: #fff; transform: scale(1.2); }

/* 3. ویژوال ناوبری (اصلاح شده: راست به چپ) */
.nav-visual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* تغییر مهم: جهت چیدمان برعکس شد تا نقطه‌ها راست باشند */
    flex-direction: row-reverse; 
}

.nav-dots { display: flex; gap: 4px; }
.nav-dots span { width: 6px; height: 6px; background: #ff7675; border-radius: 50%; opacity: 0.3; transition: 0.3s; }

.nav-line {
    flex: 1; height: 2px; background: #444; 
    margin-right: 10px; /* فاصله از سمت راست */
    margin-left: 0;
    position: relative;
}

/* فلش سمت چپ (RTL Arrow) */
.nav-line::after {
    content: ''; 
    position: absolute; 
    left: 0; /* چسبیدن به چپ */
    right: auto;
    top: -3px; 
    width: 8px; height: 8px;
    border-top: 2px solid #ff7675; 
    border-right: 2px solid #ff7675; 
    transform: rotate(-135deg); /* چرخش برای اشاره به چپ */
}

/* انیمیشن نقطه‌ها */
.seo-card:hover .nav-dots span:nth-child(1) { opacity: 1; transform: translateY(-3px); transition-delay: 0.2s; }
.seo-card:hover .nav-dots span:nth-child(2) { opacity: 1; transform: translateY(-3px); transition-delay: 0.1s; }
.seo-card:hover .nav-dots span:nth-child(3) { opacity: 1; transform: translateY(-3px); transition-delay: 0s; }

/* 4. ویژوال جستجو */
.fake-search { display: flex; align-items: center; gap: 8px; background: #444; padding: 6px 10px; border-radius: 6px; margin-bottom: 8px; }
.fake-search i { font-size: 0.7rem; color: #aaa; }
.typing-line { width: 2px; height: 10px; background: #0984e3; animation: blink 1s infinite; }
.fake-tags { display: flex; gap: 4px; }
.fake-tags span { font-size: 0.6rem; background: rgba(9, 132, 227, 0.2); color: #0984e3; padding: 2px 6px; border-radius: 3px; }

@keyframes blink { 50% { opacity: 0; } }

/* ریسپانسیو: در تبلت ۲ تایی و موبایل ۱ تایی شود */
@media (max-width: 1100px) {
    .seo-grid-wrapper { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .seo-grid-wrapper { grid-template-columns: 1fr; }
}


/* --- استایل بخش امنیت و پرداخت --- */
.shop-security-trust {
    padding: 80px 0;
    background: linear-gradient(to bottom, #fff, #f4faff); /* گرادینت محو آبی */
    position: relative;
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

/* استایل کلی کارت اعتماد */
.trust-card {
    background: #fff;
    border-radius: 20px;
    padding: 35px 25px;
    border: 1px solid #e6e6e6;
    position: relative;
    overflow: hidden;
    transition: 0.4s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.trust-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    border-color: var(--trust-color);
}

/* رنگ‌بندی اختصاصی */
.payment-trust { --trust-color: #6c5ce7; } /* بنفش پرداخت */
.ssl-trust { --trust-color: #00b894; }     /* سبز امنیت */
.policy-trust { --trust-color: #fdcb6e; }  /* طلایی قانون */

/* لایه آیکون */
.tc-icon-layer {
    position: relative;
    width: 80px; height: 80px;
    margin-bottom: 25px;
}

.main-icon {
    font-size: 3.5rem;
    color: #dfe6e9;
    transition: 0.3s;
}

.trust-card:hover .main-icon { color: var(--trust-color); }

/* بج‌های کوچک روی آیکون اصلی */
.check-badge, .shield-badge, .return-badge {
    position: absolute;
    bottom: 0; right: -10px;
    font-size: 1.5rem;
    background: #fff;
    border-radius: 50%;
    border: 3px solid #fff;
    color: var(--trust-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    animation: bounceBadge 2s infinite;
}

@keyframes bounceBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* محتوا */
.tc-content h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--shop-dark);
    margin-bottom: 15px;
}

.tc-content p {
    font-size: 0.95rem;
    color: #636e72;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* المان‌های بصری پایین کارت‌ها */

/* 1. لوگوهای بانکی (متنی/استایلی) */
.bank-logos {
    display: flex; gap: 10px; justify-content: center;
}
.bank-logos span {
    font-size: 0.8rem; font-weight: bold; color: #636e72;
    background: #f1f2f6; padding: 5px 12px; border-radius: 6px;
}

/* انیمیشن خط پرداخت */
.payment-anim {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #eee;
}
.pay-dot {
    width: 20px; height: 4px; background: var(--trust-color);
    animation: payMove 2s infinite linear;
}
@keyframes payMove { 0% { transform: translateX(-100%); } 100% { transform: translateX(500%); } }

/* 2. تگ امنیت مرورگر */
.security-tag {
    background: #00b894; color: #fff;
    padding: 8px 15px; border-radius: 50px;
    font-size: 0.85rem; font-weight: bold;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 5px 15px rgba(0, 184, 148, 0.3);
}

/* 3. لینک ضمانت */
.policy-links span {
    color: #d35400; background: #ffeaa7;
    padding: 8px 15px; border-radius: 8px;
    font-weight: bold; font-size: 0.9rem;
    display: inline-flex; align-items: center; gap: 8px;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .security-grid { grid-template-columns: 1fr; }
}



/* --- استایل بخش پشتیبانی (Support Section) --- */
.shop-support-section {
    padding: 100px 0;
    background-color: #f8f9fa; /* زمینه طوسی خیلی روشن */
    position: relative;
    overflow: hidden;
}

.support-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* ستون محتوا */
.support-content { flex: 1.2; }

.support-content h2 {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--shop-dark);
    margin: 15px 0 25px;
}

.support-content p {
    font-size: 1rem;
    color: #636e72;
    margin-bottom: 40px;
    line-height: 1.8;
}

/* کارت‌های خدمات */
.support-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.s-card {
    background: #fff;
    padding: 25px;
    border-radius: 16px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    border: 1px solid #eee;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

/* افکت نوار رنگی سمت راست کارت */
.s-card::before {
    content: ''; position: absolute; right: 0; top: 0; width: 4px; height: 100%;
    background: #eee; transition: 0.3s;
}

.s-card:hover {
    transform: translateX(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    border-color: transparent;
}

.s-card:hover::before { background: var(--shop-purple); }

/* آیکون‌ها */
.sc-icon {
    width: 60px; height: 60px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.academy { background: #e0f2f1; color: #00b894; } /* سبز برای آموزش */
.tech { background: #e3f2fd; color: #0984e3; }    /* آبی برای فنی */
.growth { background: #f3e5f5; color: #9c27b0; }  /* بنفش برای توسعه */

.sc-text h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #2d3436;
    margin-bottom: 8px;
}

.sc-text p {
    font-size: 0.9rem;
    color: #636e72;
    margin: 0;
    line-height: 1.6;
}

/* --- ستون ویژوال (موشک) --- */
.support-visual {
    flex: 0.8;
    position: relative;
    height: 400px;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle, #ece9ff 0%, transparent 70%); /* هاله پشت موشک */
    border-radius: 50%;
}

.rocket-container {
    position: relative;
    animation: floatRocket 3s infinite ease-in-out;
}

.rocket-body {
    font-size: 10rem;
    color: var(--shop-purple);
    filter: drop-shadow(0 20px 30px rgba(108, 92, 231, 0.4));
    transform: rotate(-45deg);
}

@keyframes floatRocket {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* ابرها */
.cloud {
    position: absolute; background: #fff; border-radius: 50px; opacity: 0.8;
    animation: moveCloud 10s infinite linear;
}
.c1 { width: 60px; height: 20px; top: 20%; left: -50px; }
.c2 { width: 80px; height: 25px; top: 60%; right: -60px; animation-delay: 2s; }
.c3 { width: 40px; height: 15px; bottom: 10%; left: 20px; animation-delay: 5s; }

@keyframes moveCloud {
    0% { transform: translateX(0); opacity: 0; }
    50% { opacity: 0.8; }
    100% { transform: translateX(-100px); opacity: 0; }
}

/* کارت شناور وضعیت سرور */
.visual-card-float {
    position: absolute;
    bottom: 20px; right: 20px;
    background: #fff;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    display: flex; align-items: center; gap: 15px;
    animation: popUp 1s ease-out 1s forwards;
    opacity: 0; transform: translateY(20px);
}

.visual-card-float i { color: #00b894; font-size: 1.5rem; }
.visual-card-float strong { display: block; font-size: 0.9rem; color: #2d3436; }
.visual-card-float small { font-size: 0.75rem; color: #b2bec3; }

@keyframes popUp { to { opacity: 1; transform: translateY(0); } }

/* ریسپانسیو */
@media (max-width: 900px) {
    .support-wrapper { flex-direction: column; text-align: center; }
    .support-visual { width: 100%; height: 300px; margin-top: 30px; }
    .s-card { flex-direction: column; align-items: center; text-align: center; }
    .s-card::before { width: 100%; height: 4px; top: 0; right: 0; } /* نوار بالا */
}



/* --- استایل بخش نمونه‌کارها (Case Studies) --- */
.shop-portfolio-section {
    padding: 100px 0;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

/* کارت پروژه */
.port-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    overflow: hidden;
    transition: 0.4s;
}

.port-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(108, 92, 231, 0.15);
}

/* بخش تصویر (شبیه‌ساز مرورگر) */
.pc-image-wrapper {
    position: relative;
    height: 250px;
    background: #f1f2f6;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}

.browser-bar {
    position: absolute; top: 0; left: 0; width: 100%; height: 30px;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
    display: flex; align-items: center; gap: 6px; padding: 0 15px;
    z-index: 5;
}

.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

.pc-image-wrapper img {
    width: 100%; height: 100%; object-fit: cover;
    transition: 0.5s;
}

.port-card:hover .pc-image-wrapper img {
    transform: scale(1.05); filter: blur(2px);
}

/* اورلی دکمه مشاهده */
.pc-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(45, 52, 54, 0.6);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: 0.3s;
}

.port-card:hover .pc-overlay { opacity: 1; }

.btn-view-site {
    background: #fff; color: #2d3436; border: none;
    padding: 12px 25px; border-radius: 50px; font-weight: bold;
    cursor: pointer; transform: translateY(20px); transition: 0.4s;
}

.port-card:hover .btn-view-site { transform: translateY(0); }

/* تگ نتیجه (Hook اصلی) */
.main-result-tag {
    position: absolute; bottom: 15px; right: 15px;
    background: #00b894; color: #fff;
    padding: 8px 15px; border-radius: 8px; font-size: 0.85rem; font-weight: bold;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 6;
}
.main-result-tag.purple { background: var(--shop-purple); }
.main-result-tag.coral { background: var(--shop-coral); }

/* محتوای متنی */
.pc-content { padding: 30px; }

.pc-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;
}
* استایل کلی هدر کارت */
.pc-header {
    text-align: center;
    margin-bottom: 25px; /* فاصله مناسب با بخش قیمت در پایین */
    display: flex;
    flex-direction: column; /* چیدمان ستونی المان‌ها */
    align-items: center; /* وسط‌چین کردن افقی */
    gap: 15px; /* ایجاد فاصله یکسان بین آیکون، تیتر و متن */
}
.category {
    font-size: 0.75rem; background: #f1f2f6; color: #636e72;
    padding: 4px 10px; border-radius: 4px;
}

.challenge {
    font-size: 0.9rem; color: #636e72; line-height: 1.6; margin-bottom: 25px;
    border-right: 3px solid var(--shop-purple); padding-right: 10px;
}

/* آمار (Stats Grid) */
.pc-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    background: #f9f9fa; padding: 15px; border-radius: 12px; border: 1px solid #eee;
}

.stat-item { text-align: center; }
.stat-item strong {
    display: block; font-size: 1.1rem; font-weight: 900; color: var(--shop-dark);
}
.stat-item small { font-size: 0.7rem; color: #b2bec3; }

/* ریسپانسیو */
@media (max-width: 768px) {
    .portfolio-grid { grid-template-columns: 1fr; }
    .pc-image-wrapper { height: 200px; }
}


/* --- استایل بخش قیمت‌گذاری (Pricing) --- */
.shop-pricing-section {
    padding: 100px 0;
    background-color: #f4f7f6;
    position: relative;
}

.pricing-toggle {
    text-align: center; margin-bottom: 50px;
}
.pricing-toggle span {
    background: #e0e0e0; padding: 10px 25px; border-radius: 50px;
    font-weight: bold; color: #636e72; cursor: default;
}
.pricing-toggle span.active {
    background: var(--shop-dark); color: #fff;
}

.pricing-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* تغییر از center به flex-start برای تراز بالا */
    gap: 30px;
    flex-wrap: wrap;
}

/* استایل عمومی کارت‌ها */
.p-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    width: 320px;
    border: 1px solid #eee;
    transition: 0.3s;
    position: relative;
    display: flex; flex-direction: column;
}

.p-card:hover {
    transform: translateY(-10px);
}

/* هدر کارت */
.pc-header { text-align: center; margin-bottom: 25px; }
/* آیکون بالای کارت */
.pc-icon {
    width: 70px;
    height: 70px;
    /* margin: 0 auto 15px;  <-- این خط حذف شود، gap در والد کار را انجام می‌دهد */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: 0.3s;
    flex-shrink: 0; /* جلوگیری از جمع شدن آیکون */
}
/* عنوان کارت (مثل: بسته حرفه‌ای) */
.pc-header h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--shop-dark);
    margin: 0; /* حذف مارجین‌های پیش‌فرض */
    line-height: 1.3; /* تنظیم ارتفاع خط برای خوانایی بهتر */
}
/* توضیحات کوتاه زیر عنوان */
.pc-header p {
    font-size: 0.9rem;
    color: #b2bec3;
    margin: 0; /* حذف مارجین‌های پیش‌فرض */
    line-height: 1.5; /* ارتفاع خط مناسب برای جلوگیری از فشردگی */
    max-width: 80%; /* محدود کردن عرض متن برای جلوگیری از کش آمدن بیش از حد */
}
/* قیمت */
.pc-price {
    text-align: center; margin-bottom: 30px; padding-bottom: 30px;
    border-bottom: 1px dashed #eee;
}
.pc-price .amount { font-size: 3rem; font-weight: 900; color: var(--shop-dark); line-height: 1; }
.pc-price .unit { font-size: 1rem; color: #636e72; font-weight: bold; }
.pc-price small { display: block; font-size: 0.8rem; color: #b2bec3; margin-top: 5px; }

/* لیست امکانات */
.pc-features {
    list-style: none; padding: 0; margin: 0 0 30px; flex: 1;
}
.pc-features li {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 15px; font-size: 0.95rem; color: #636e72;
}
.pc-features li i { color: #00b894; font-size: 1rem; }
.pc-features li.disabled { color: #ccc; text-decoration: line-through; }
.pc-features li.disabled i { color: #ccc; }

/* دکمه‌ها */
.btn-pricing {
    width: 100%; padding: 15px; border-radius: 12px; border: none;
    font-weight: bold; cursor: pointer; transition: 0.3s; font-size: 1rem;
}

/* --- استایل اختصاصی کارت‌ها --- */

/* 1. کارت استارتاپ */
.p-card.basic .pc-icon { background: #e0f2f1; color: #00b894; }
.btn-basic { background: #e0f2f1; color: #00b894; }
.btn-basic:hover { background: #00b894; color: #fff; }

/* 2. کارت حرفه‌ای (POPULAR) */
.p-card.popular {
    transform: scale(1.05); /* کمی بزرگتر */
    border: 2px solid var(--shop-purple);
    box-shadow: 0 20px 50px rgba(108, 92, 231, 0.15);
    z-index: 2;
}
.p-card.popular:hover { transform: scale(1.05) translateY(-10px); }

.popular-badge {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    background: var(--shop-coral); color: #fff;
    padding: 8px 20px; border-radius: 50px; font-weight: bold; font-size: 0.85rem;
    box-shadow: 0 5px 15px rgba(255, 118, 117, 0.4);
}

.p-card.popular .pc-icon { background: rgba(108, 92, 231, 0.1); color: var(--shop-purple); }
.p-card.popular .amount { color: var(--shop-purple); }
.btn-pro {
    background: var(--shop-purple); color: #fff;
    box-shadow: 0 10px 20px rgba(108, 92, 231, 0.3);
}
.btn-pro:hover { background: #564ab1; }

/* 3. کارت VIP */
.p-card.vip { background: #2d3436; color: #fff; border: 1px solid #444; }
.p-card.vip .pc-header h3, .p-card.vip .amount, .p-card.vip .pc-features li { color: #fff; }
.p-card.vip .pc-header p, .p-card.vip .unit, .p-card.vip small { color: #b2bec3; }
.p-card.vip .pc-price { border-bottom-color: #444; }

.p-card.vip .pc-icon { background: linear-gradient(45deg, #ffd700, #ffaa00); color: #fff; box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); }
.p-card.vip .pc-features li i { color: #ffd700; } /* تیک طلایی */

.btn-vip {
    background: linear-gradient(45deg, #ffd700, #ffaa00); color: #2d3436;
}
.btn-vip:hover { filter: brightness(1.1); }

.pricing-note {
    text-align: center; margin-top: 40px; color: #999; font-size: 0.85rem;
}

/* ریسپانسیو */
@media (max-width: 1024px) {
    .pricing-wrapper { flex-direction: column; align-items: center; }
    .p-card.popular { transform: none; width: 320px; }
    .p-card.popular:hover { transform: translateY(-10px); }
}




/* --- استایل فرم سفارش چند مرحله‌ای (Wizard) --- */
.shop-order-wizard {
    padding: 100px 0;
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

.wizard-container {
    max-width: 800px;
    margin: 50px auto 0;
    background: #f9f9fa;
    border-radius: 25px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
}

/* هدر و نوار پیشرفت */
.wizard-header { margin-bottom: 30px; }

.progress-bar-track {
    width: 100%; height: 8px; background: #e0e0e0; border-radius: 10px; overflow: hidden; margin-bottom: 10px;
}
.progress-bar-fill {
    height: 100%; background: var(--shop-purple); border-radius: 10px; transition: width 0.4s ease;
}
.step-indicator { text-align: right; color: #b2bec3; font-size: 0.85rem; font-weight: bold; }

/* مخفی کردن مراحل غیرفعال */
.wizard-step { display: none; animation: fadeInStep 0.5s; }
.wizard-step.active { display: block; }

@keyframes fadeInStep { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.wizard-step h3 {
    font-size: 1.5rem; color: var(--shop-dark); margin-bottom: 25px; font-weight: 800; text-align: center;
}

/* --- استایل کارت‌های انتخابی (Option Cards) --- */
.options-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.options-grid.small { grid-template-columns: repeat(2, 1fr); }

.option-card { cursor: pointer; position: relative; }
.option-card input { position: absolute; opacity: 0; } /* مخفی کردن دکمه رادیویی */

.opt-content {
    background: #fff; border: 2px solid #eee; border-radius: 16px; padding: 20px;
    text-align: center; transition: 0.3s; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.opt-icon {
    font-size: 2rem; color: #b2bec3; margin-bottom: 15px; transition: 0.3s;
}
.opt-content span { display: block; font-weight: bold; color: #2d3436; margin-bottom: 5px; }
.opt-content small { font-size: 0.75rem; color: #999; }

/* حالت انتخاب شده */
.option-card input:checked + .opt-content {
    border-color: var(--shop-purple); background: #fbfaff; box-shadow: 0 10px 20px rgba(108, 92, 231, 0.1);
}
.option-card input:checked + .opt-content .opt-icon { color: var(--shop-purple); transform: scale(1.1); }

/* --- استایل چیپ‌ها (Chip Select) --- */
.options-row { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 20px; }

.chip-select { cursor: pointer; }
.chip-select input { display: none; }
.chip-select span {
    display: block; padding: 10px 20px; background: #fff; border: 1px solid #ccc;
    border-radius: 50px; color: #636e72; font-weight: bold; transition: 0.3s;
}
.chip-select input:checked + span {
    background: var(--shop-dark); color: #fff; border-color: var(--shop-dark);
}

/* چک‌باکس فیچرها */
.feature-checkbox { cursor: pointer; display: block; }
.feature-checkbox input { display: none; }
.feature-checkbox span {
    display: flex; align-items: center; gap: 10px; padding: 15px; background: #fff;
    border: 1px solid #eee; border-radius: 12px; font-weight: bold; color: #636e72; transition: 0.3s;
}
.feature-checkbox input:checked + span {
    border-color: var(--shop-coral); color: var(--shop-coral); background: #fff5f5;
}

/* --- ورودی‌های متنی و سلکت --- */
.form-input, .form-select {
    width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 10px;
    font-family: inherit; margin-bottom: 15px; outline: none; transition: 0.3s;
}
.form-input:focus, .form-select:focus { border-color: var(--shop-purple); }

.two-col-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.full-width { grid-column: span 2; }
.field-label { display: block; font-weight: bold; margin-bottom: 10px; color: #2d3436; }

/* رنج اسلایدر بودجه */
.range-wrapper { text-align: center; margin-bottom: 20px; }
.range-value {
    margin-top: 10px; font-size: 1.2rem; font-weight: bold; color: var(--shop-purple);
}

/* --- دکمه‌های پایین --- */
.wizard-actions {
    display: flex; justify-content: space-between; margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px;
}

.btn-prev {
    background: none; border: none; color: #999; font-weight: bold; cursor: pointer; font-size: 1rem;
}
.btn-prev:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-next, .btn-submit {
    background: var(--shop-purple); color: #fff; padding: 12px 30px; border-radius: 50px;
    border: none; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: 0.3s;
}
.btn-next:hover, .btn-submit:hover { background: #5849be; transform: translateX(-3px); }
.btn-submit { background: var(--shop-coral); }

.final-check {
    display: flex; align-items: center; gap: 10px; color: #00b894; font-size: 0.85rem;
    background: #e0f2f1; padding: 10px; border-radius: 8px; margin-top: 10px;
}

@media (max-width: 768px) {
    .options-grid { grid-template-columns: 1fr; }
    .two-col-inputs { grid-template-columns: 1fr; }
    .wizard-container { padding: 20px; }
}



/* --- استایل بازطراحی شده امکانات (Reborn Features) --- */
.shop-features-reborn {
    padding: 100px 0;
    background: #fff;
}

/* نوار تب‌ها */
.sfr-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.sfr-tab-btn {
    background: #f1f2f6;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    color: #636e72;
    cursor: pointer;
    transition: 0.3s;
    display: flex; align-items: center; gap: 10px;
}

.sfr-tab-btn i { font-size: 1.2rem; }

.sfr-tab-btn:hover { background: #e0e0e0; }

/* تب فعال */
.sfr-tab-btn.active {
    background: var(--shop-purple);
    color: #fff;
    box-shadow: 0 10px 20px rgba(108, 92, 231, 0.3);
    transform: translateY(-2px);
}

/* محتوای تب */
.sfr-pane {
    display: none;
    animation: fadeInPane 0.5s ease-out;
}
.sfr-pane.active { display: block; }

@keyframes fadeInPane {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* گرید کارت‌ها */
.sfr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

/* کارت ویژگی */
.sfr-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #eee;
    transition: 0.3s;
}

.sfr-card:hover {
    border-color: var(--shop-purple);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    transform: translateX(5px);
}

.sfr-icon {
    width: 60px; height: 60px;
    background: rgba(108, 92, 231, 0.1);
    color: var(--shop-purple);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.sfr-text h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--shop-dark);
    margin-bottom: 8px;
}

.sfr-text p {
    font-size: 0.95rem;
    color: #636e72;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* تگ سود (Benefit Tag) */
.benefit-tag {
    display: inline-block;
    font-size: 0.75rem;
    background: #e0f2f1;
    color: #00b894;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: bold;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .sfr-grid { grid-template-columns: 1fr; }
    .sfr-tab-btn { width: 100%; justify-content: center; }
    .sfr-card { flex-direction: column; }
    .sfr-icon { margin-bottom: 10px; }
}



/* --- استایل بخش سئو و بهینه‌سازی --- */
.shop-seo-optimization {
    padding: 80px 0;
    background: #fff;
    background-image: radial-gradient(#e6e6e6 1px, transparent 1px);
    background-size: 20px 20px; /* پترن نقطه ریز مهندسی */
}

/* باکس اینسایت (Hook) */
.seo-insight-box {
    max-width: 800px;
    margin: 40px auto 60px;
    background: #2d3436; /* زمینه تیره برای جلب توجه */
    color: #fff;
    border-radius: 16px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: 0 15px 40px rgba(45, 52, 54, 0.3);
    border-left: 6px solid var(--shop-coral); /* نوار رنگی هشدار */
    position: relative;
    overflow: hidden;
}

/* افکت نور پس‌زمینه باکس */
.seo-insight-box::after {
    content: ''; position: absolute; top: -50%; left: -10%; width: 200px; height: 200px;
    background: rgba(255, 255, 255, 0.1); border-radius: 50%; filter: blur(40px);
}

.insight-icon {
    font-size: 2.5rem; color: var(--shop-coral);
    animation: pulseLight 2s infinite;
}

@keyframes pulseLight { 0% { opacity: 0.6; } 50% { opacity: 1; text-shadow: 0 0 20px var(--shop-coral); } 100% { opacity: 0.6; } }

.insight-text strong { display: block; font-size: 1.1rem; margin-bottom: 5px; color: #fff; }
.insight-text p { font-size: 0.95rem; margin: 0; color: #dfe6e9; line-height: 1.6; }

/* گرید کارت‌ها */
.seo-tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

/* کارت تکنولوژی */
.tech-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 30px;
    transition: 0.3s;
    position: relative;
    z-index: 1;
}

.tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: transparent;
}

.tc-header {
    display: flex; align-items: center; gap: 15px; margin-bottom: 20px;
}

.tc-icon {
    width: 50px; height: 50px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    transition: 0.3s;
}

/* رنگ‌بندی و درخشش آیکون‌ها */
.purple-glow { background: rgba(108, 92, 231, 0.1); color: var(--shop-purple); }
.tech-card:hover .purple-glow { background: var(--shop-purple); color: #fff; box-shadow: 0 0 15px rgba(108, 92, 231, 0.4); }

.green-glow { background: #e0f2f1; color: #00b894; }
.tech-card:hover .green-glow { background: #00b894; color: #fff; box-shadow: 0 0 15px rgba(0, 184, 148, 0.4); }

.blue-glow { background: #e3f2fd; color: #0984e3; }
.tech-card:hover .blue-glow { background: #0984e3; color: #fff; box-shadow: 0 0 15px rgba(9, 132, 227, 0.4); }

.orange-glow { background: #fff3e0; color: #e67e22; }
.tech-card:hover .orange-glow { background: #e67e22; color: #fff; box-shadow: 0 0 15px rgba(230, 126, 34, 0.4); }

.coral-glow { background: #ffebee; color: #ff7675; }
.tech-card:hover .coral-glow { background: #ff7675; color: #fff; box-shadow: 0 0 15px rgba(255, 118, 117, 0.4); }

.teal-glow { background: #e0f7fa; color: #00cec9; }
.tech-card:hover .teal-glow { background: #00cec9; color: #fff; box-shadow: 0 0 15px rgba(0, 206, 201, 0.4); }

.tc-header h4 {
    font-size: 1.1rem; font-weight: 800; color: var(--shop-dark); margin: 0;
}

.tech-card p {
    font-size: 0.95rem; color: #636e72; line-height: 1.7; margin: 0; text-align: justify;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .seo-insight-box { flex-direction: column; text-align: center; padding: 20px; }
    .insight-icon { margin-bottom: 10px; }
    .seo-tech-grid { grid-template-columns: 1fr; }
}


/* تنظیمات کلی سکشن */
.shop-comparison {
    padding: 80px 0;
    background: #f9fbfd; /* رنگ پس زمینه خیلی روشن */
}

.section-header-shop {
    margin-bottom: 50px;
}

.section-header-shop h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-top: 10px;
}

.section-header-shop p {
    color: #666;
    font-size: 1.1rem;
}

/* رپر اصلی برای اسکرول موبایل */
.comparison-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    overflow: hidden;
}

.table-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* اسکرول نرم در آیفون */
    border-radius: 20px;
}

/* استایل جدول */
.comp-table {
    width: 100%;
    min-width: 700px; /* حداقل عرض برای جلوگیری از له شدن در موبایل */
    border-collapse: separate;
    border-spacing: 0;
}

/* هدرهای جدول */
.comp-table th {
    padding: 25px 20px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #eee;
    position: relative;
}

.feature-col {
    text-align: right !important;
    background: #fff;
    color: #555;
    width: 25%;
}

.others-col {
    background: #f8f9fa;
    color: #777;
    width: 35%;
}

/* استایل ستون ویژه وب‌کندو */
.us-col {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
    width: 40%;
    border-top-left-radius: 20px; /* گرد کردن گوشه */
    position: relative;
    box-shadow: 0 10px 30px rgba(108, 92, 231, 0.3);
    overflow: hidden;
}

/* بج "پیشنهاد برتر" بالای هدر */
.winner-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #ffd700;
    color: #000;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.th-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.th-content i {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

/* استایل بدنه جدول */
.comp-table td {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
    vertical-align: middle;
    transition: all 0.3s ease;
}

/* ستون ویژگی‌ها */
.comp-table td.feat-name {
    text-align: right;
    font-weight: 700;
    color: #333;
    background: #fff;
}

/* ستون بد (دیگران) */
.comp-table td.bad {
    background: #fff5f5;
    color: #c0392b;
}

.comp-table td.bad .status-icon {
    color: #e74c3c;
    font-size: 1.2rem;
    margin-left: 5px;
    vertical-align: middle;
}

/* ستون خوب (وب‌کندو) */
.comp-table td.good {
    background: #fdfdff; /* کمی آبی خیلی روشن */
    color: #2d3436;
    font-weight: 500;
    position: relative;
    border-left: 2px solid rgba(108, 92, 231, 0.1); /* جداکننده ظریف */
}

/* هایلایت کردن سلول‌های خوب */
.comp-table td.good strong {
    color: #6c5ce7;
    font-weight: 800;
}

.comp-table td.good .status-icon {
    color: #00b894;
    font-size: 1.3rem;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
    animation: pulse 2s infinite;
}

/* هاور افکت برای ردیف‌ها */
.comp-table tbody tr:hover td {
    background-color: #fafafa;
}
.comp-table tbody tr:hover td.us-col,
.comp-table tbody tr:hover td.good {
    background-color: #f0f3ff;
}

/* آخرین ردیف بدون بوردر */
.comp-table tbody tr:last-child td {
    border-bottom: none;
}

/* راهنمای اسکرول در موبایل */
.swipe-hint {
    text-align: center;
    padding: 10px;
    font-size: 0.85rem;
    color: #888;
    background: #fff;
    border-top: 1px dashed #eee;
    animation: fadeInOut 2s infinite;
}

/* انیمیشن‌ها */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* مدیا کوئری برای موبایل */
@media (max-width: 768px) {
    .section-header-shop h2 {
        font-size: 1.6rem;
    }
    
    /* فیکس کردن ستون اول در موبایل (اختیاری - اگر بخواهید ستون ویژگی‌ها ثابت بماند) */
    /*
    .comp-table td.feat-name,
    .comp-table th.feature-col {
        position: sticky;
        right: 0;
        z-index: 2;
        box-shadow: -2px 0 5px rgba(0,0,0,0.05);
    }
    */
    
    .comp-table td, .comp-table th {
        padding: 15px 10px;
        font-size: 0.9rem;
    }
}




/* --- Corporate Theme Variables --- */
    :root {
        --corp-dark: #0c2461;      /* سرمه‌ای تیره */
        --corp-blue: #1e3799;      /* آبی سلطنتی */
        --corp-gold: #e1b12c;      /* طلایی */
        --corp-grey: #f5f6fa;      /* پس‌زمینه روشن */
        --corp-text: #2f3640;      /* متن */
    }

    #landing-corp-wrap {  background: #fff; overflow-x: hidden; }
    
    /* Utility */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
    .btn-corp-primary { background: var(--corp-gold); color: var(--corp-dark); padding: 12px 30px; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; transition: 0.3s; }
    .btn-corp-primary:hover { background: #d4a218; transform: translateY(-3px); }
    .btn-corp-outline { background: transparent; border: 2px solid var(--corp-gold); color: var(--corp-gold); padding: 10px 25px; border-radius: 5px; font-weight: bold; cursor: pointer; transition: 0.3s; }
    .btn-corp-outline:hover { background: var(--corp-gold); color: var(--corp-dark); }
    .full { width: 100%; }

    /* --- Navbar --- */
    .corp-sticky-nav { position: fixed; top: 0; width: 100%; background: var(--corp-dark); padding: 15px 0; z-index: 999; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .c-nav-flex { display: flex; justify-content: space-between; align-items: center; }
    .c-logo { color: #fff; font-size: 1.5rem; font-weight: 900; }
    .gold-dot { color: var(--corp-gold); }
    .c-links { display: flex; gap: 30px; list-style: none; margin: 0; }
    .c-links a { color: #ccc; text-decoration: none; transition: 0.3s; }
    .c-links a:hover { color: var(--corp-gold); }
    .btn-corp-nav { background: rgba(255,255,255,0.1); color: #fff; padding: 8px 20px; border-radius: 4px; text-decoration: none; border: 1px solid rgba(255,255,255,0.2); transition: 0.3s; }
    .btn-corp-nav:hover { background: var(--corp-gold); color: var(--corp-dark); border-color: var(--corp-gold); }

    /* --- Hero --- */
    .corp-hero { position: relative; padding: 180px 0 100px; background: var(--corp-dark); color: #fff; min-height: 700px; overflow: hidden; }
    .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(12, 36, 97, 0.95), rgba(30, 55, 153, 0.8)), url('https://www.transparenttextures.com/patterns/cubes.png'); z-index: 1; }
    .hero-content { position: relative; z-index: 2; display: flex; align-items: center; gap: 50px; }
    
    .corp-badge { background: rgba(225, 177, 44, 0.15); color: var(--corp-gold); padding: 5px 15px; border-radius: 50px; font-size: 0.9rem; border: 1px solid rgba(225, 177, 44, 0.3); display: inline-block; margin-bottom: 20px; }
    .hero-text h1 { font-size: 3.5rem; font-weight: 900; line-height: 1.3; margin-bottom: 20px; }
    .gold-text { color: var(--corp-gold); }
    .hero-text p { color: #bdc3c7; font-size: 1.1rem; line-height: 1.8; margin-bottom: 40px; max-width: 550px; }
    .hero-btns { display: flex; gap: 20px; }

    /* Visual */
    .hero-visual { flex: 1; position: relative; }
    /* --- اصلاحیه CSS برای نمایش کامل کارت‌های شناور --- */

.building-card {
    position: relative;
    /* overflow: hidden;  <--- این خط حذف شد تا کارت‌ها برش نخورند */
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    border: 5px solid rgba(255,255,255,0.1);
    transform: perspective(1000px) rotateY(-10deg);
    transition: 0.5s;
    /* اضافه شده: اجازه میده المان‌ها از کادر بیرون بزنن */
    overflow: visible !important; 
    border-radius: 20px; /* این را نگه میداریم برای بردر شیشه‌ای */
}

/* اضافه کردن استایل به عکس برای گرد شدن گوشه‌ها */
.building-card img {
    width: 100%;
    display: block;
    border-radius: 15px; /* عکس باید جداگانه گرد شود */
}

/* اطمینان از اینکه کارت‌ها روی عکس هستند */
.float-stat {
    /* ... استایل‌های قبلی ... */
    z-index: 10; /* لایه بالاتر */
}
    
    .float-stat { position: absolute; background: rgba(255,255,255,0.95); padding: 15px; border-radius: 10px; display: flex; gap: 15px; align-items: center; color: var(--corp-dark); box-shadow: 0 10px 20px rgba(0,0,0,0.2); animation: float 4s infinite ease-in-out; }
    .float-stat i { font-size: 2rem; color: var(--corp-blue); }
    .float-stat strong { display: block; font-size: 0.9rem; }
    .float-stat small { color: #7f8c8d; font-size: 0.75rem; }
    .s1 { top: 30px; left: -30px; }
    .s2 { bottom: 40px; right: -30px; animation-delay: 2s; }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

    /* --- Clients --- */
    .corp-clients { background: #fff; padding: 40px 0; text-align: center; border-bottom: 1px solid #eee; }
    .corp-clients p { color: #95a5a6; margin-bottom: 20px; font-weight: bold; font-size: 0.9rem; }
    .logos-wrapper { display: flex; justify-content: center; gap: 50px; font-size: 3rem; color: #dfe6e9; }

    /* --- Features --- */
    .corp-features { padding: 100px 0; background: var(--corp-grey); }
    .sec-header { text-align: center; margin-bottom: 60px; }
    .sec-header h2 { font-size: 2.2rem; color: var(--corp-dark); font-weight: 800; margin-bottom: 15px; }
    .line { width: 80px; height: 4px; background: var(--corp-gold); margin: 0 auto; border-radius: 2px; }

    .feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
    .c-feat-card { background: #fff; padding: 40px 30px; border-radius: 10px; transition: 0.3s; border-bottom: 4px solid transparent; }
    .c-feat-card:hover { transform: translateY(-10px); border-bottom-color: var(--corp-gold); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
    .cf-icon { font-size: 2.5rem; color: var(--corp-blue); margin-bottom: 20px; }
    .c-feat-card h3 { font-size: 1.2rem; color: var(--corp-dark); margin-bottom: 15px; }
    .c-feat-card p { color: #7f8c8d; line-height: 1.6; font-size: 0.95rem; }

    /* --- Calculator --- */
    .corp-roi-calc { padding: 80px 0; background: #fff; }
    .calc-box-corp { display: flex; background: var(--corp-dark); color: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(12, 36, 97, 0.3); }
    .cb-text { flex: 1.5; padding: 50px; }
    .cb-text h3 { margin-bottom: 20px; font-size: 1.8rem; }
    .cb-text p { color: #a4b0be; margin-bottom: 30px; }
    .cb-text label { display: block; margin-top: 20px; font-weight: bold; color: var(--corp-gold); }
    .c-val { font-size: 1.2rem; margin-bottom: 10px; font-weight: bold; }
    
    .c-range { width: 100%; height: 6px; background: rgba(255,255,255,0.2); border-radius: 5px; -webkit-appearance: none; }
    .c-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: var(--corp-gold); border-radius: 50%; cursor: pointer; }

    .cb-result { flex: 1; background: var(--corp-blue); padding: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; }
    .cb-result::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://www.transparenttextures.com/patterns/diamond-upholstery.png'); opacity: 0.1; }
    .final-num { font-size: 2.8rem; font-weight: 900; color: #fff; margin: 10px 0; }
    .cb-result small { font-size: 1rem; opacity: 0.8; }
    .calc-hint { font-size: 0.8rem; opacity: 0.6; margin-top: 20px; }

    /* --- Pricing --- */
    .corp-pricing { padding: 100px 0; background: var(--corp-grey); }
    .pricing-cards { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
    .c-price-card { background: #fff; padding: 40px; border-radius: 10px; width: 350px; border: 1px solid #eee; transition: 0.3s; position: relative; }
    .c-price-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
    
    .popular { border: 2px solid var(--corp-blue); transform: scale(1.05); z-index: 2; }
    .popular:hover { transform: scale(1.05) translateY(-10px); }
    .pop-tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--corp-blue); color: #fff; padding: 5px 20px; border-radius: 50px; font-size: 0.8rem; }

    .cp-head { text-align: center; margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
    .cp-head h4 { font-size: 1.3rem; color: var(--corp-dark); margin-bottom: 10px; }
    .cp-price { font-size: 2.5rem; font-weight: 900; color: var(--corp-gold); }
    .cp-price span { font-size: 1rem; color: #7f8c8d; }

    .c-price-card ul { list-style: none; padding: 0; margin-bottom: 30px; }
    .c-price-card li { margin-bottom: 15px; color: #57606f; }
    .c-price-card li i { color: var(--corp-blue); margin-left: 10px; }

    /* --- Contact --- */
    .corp-contact { padding: 80px 0; background: url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=1920') no-repeat center/cover fixed; position: relative; }
    .contact-box { background: rgba(255,255,255,0.95); max-width: 900px; margin: 0 auto; border-radius: 15px; display: flex; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
    .cb-info { flex: 1; background: var(--corp-dark); color: #fff; padding: 40px; }
    .cb-info h3 { margin-bottom: 20px; }
    .cb-info p { color: #a4b0be; margin-bottom: 40px; }
    .info-row { margin-bottom: 15px; display: flex; align-items: center; gap: 15px; font-size: 1.1rem; }
    .info-row i { color: var(--corp-gold); }

    .cb-form { flex: 1.5; padding: 40px; }
    .cb-form input, .cb-form select { width: 100%; padding: 15px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 5px; background: #f9f9f9; }
    
    /* Responsive */
    @media (max-width: 900px) {
        .hero-content { flex-direction: column-reverse; text-align: center; }
        .hero-text h1 { font-size: 2.5rem; }
        .hero-btns { justify-content: center; }
        .calc-box-corp { flex-direction: column; }
        .pricing-cards { flex-direction: column; align-items: center; }
        .popular { transform: scale(1); }
        .contact-box { flex-direction: column; }
        .c-links { display: none; } /* منوی موبایل جداگانه نیاز است */
    }

/* --- استایل بخش تکنولوژی و پرستیژ (Dark & Technical) --- */
.corp-tech {
    padding: 100px 0;
    background-color: var(--corp-dark); /* پس‌زمینه سرمه‌ای تیره */
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* پترن ریز پس‌زمینه (مدار الکترونیکی محو) */
.corp-tech::before {
    content: ''; 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
}

.tech-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    position: relative;
    z-index: 2;
}

/* ستون متن */
.tech-info { flex: 1; }

.tech-info h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 25px;
    line-height: 1.4;
}

.tech-info p {
    font-size: 1.1rem;
    color: #bdc3c7; /* خاکستری روشن */
    margin-bottom: 35px;
    line-height: 1.8;
}

.tech-info strong {
    color: #fff;
    border-bottom: 2px solid var(--corp-gold); /* زیرخط طلایی */
}

/* لیست ویژگی‌ها */
.tech-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tech-list li {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 18px;
    font-size: 1.05rem;
    color: #ecf0f1;
}

.tech-list li i {
    color: var(--corp-gold); /* آیکون طلایی */
    font-size: 1.3rem;
    background: rgba(225, 177, 44, 0.1);
    padding: 5px;
    border-radius: 5px;
}

/* ستون تصویر (داشبورد) */
.tech-img {
    flex: 1;
    position: relative;
}

.tech-img img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4); /* سایه عمیق */
    border: 1px solid rgba(255,255,255,0.1); /* حاشیه شیشه‌ای */
    display: block;
    transform: perspective(1000px) rotateY(-5deg); /* چرخش سه بعدی */
    transition: 0.5s;
}

.tech-img:hover img {
    transform: perspective(1000px) rotateY(0);
}

/* بج شناور (Enterprise Grade) */
.tech-badge {
    position: absolute;
    bottom: 30px;
    left: -30px; /* بیرون زدن از کادر */
    background: var(--corp-gold);
    color: var(--corp-dark);
    padding: 15px 25px;
    border-radius: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    animation: floatBadge 4s infinite ease-in-out;
    z-index: 3;
}

.tech-badge i { font-size: 1.4rem; }

@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ریسپانسیو */
@media (max-width: 900px) {
    .tech-flex { flex-direction: column; gap: 40px; }
    .tech-img { width: 100%; }
    .tech-img img { transform: none; } /* حذف چرخش در موبایل */
    .tech-badge {
        left: 50%; 
        transform: translateX(-50%); /* وسط چین در موبایل */
        bottom: -20px;
        width: max-content;
        animation: none; /* حذف انیمیشن در موبایل */
    }
}


/* --- Roadmap Section --- */
/* =========================================
   ROADMAP SECTION (FIXED DESKTOP LAYOUT)
   ========================================= */

.corp-roadmap {
    padding: 100px 0;
    background-color: #fff;
    text-align: center;
    direction: rtl;
    overflow: hidden; /* جلوگیری از اسکرول افقی ناخواسته */
}

/* --- اصلاح متن زیر عنوان (که گفتید بهم ریخته) --- */
.corp-roadmap .sec-header {
    margin-bottom: 80px; /* فاصله بیشتر تا مراحل */
    padding: 0 20px;
}

.corp-roadmap .sec-header p {
    max-width: 700px; /* محدود کردن عرض متن */
    margin: 20px auto 0; /* وسط‌چین کردن */
    line-height: 1.8;
    color: #64748b;
    font-size: 1.1rem;
}

/* --- کانتینر مراحل --- */
.roadmap-wrapper {
    display: flex;
    justify-content: space-between; /* پخش کردن آیتم‌ها در عرض */
    position: relative;
    max-width: 1200px; /* جلوگیری از باز شدن بیش از حد در مانیتور بزرگ */
    margin: 0 auto;
    padding: 0 20px;
}

/* خط اتصال خاکستری (یکپارچه) */
.roadmap-wrapper::before {
    content: '';
    position: absolute;
    top: 45px; /* دقیقاً وسط دایره‌های 90 پیکسلی */
    left: 50px; /* شروع خط (کمی فاصله از لبه) */
    right: 50px; /* پایان خط */
    height: 3px;
    background: #e2e8f0;
    z-index: 1; /* زیر دایره‌ها */
}

/* مخفی کردن دیوهای اتصال قبلی (چون خط یکپارچه زدیم) */
.step-connector {
    display: none !important;
}

/* --- آیتم هر مرحله --- */
.roadmap-step {
    position: relative;
    z-index: 2; /* روی خط قرار بگیرد */
    width: 22%; /* عرض درصدی ثابت برای هر ۴ مرحله */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* دایره شماره */
.step-number {
    width: 90px;
    height: 90px;
    background: #0f172a; /* سرمه‌ای */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    border: 5px solid #fff; /* حاشیه سفید ضخیم برای قطع کردن خط */
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-bottom: 30px;
}

/* استایل مرحله آخر (تیک) */
.final .step-number {
    background: #10b981; /* سبز */
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.25);
}

/* هاور دایره */
.roadmap-step:hover .step-number {
    transform: scale(1.15);
    background: #fca311; /* طلایی */
    color: #000;
    border-color: #fff;
}

/* محتوای متنی */
.step-content {
    text-align: center;
    padding: 0 5px;
}

.step-content h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 12px;
    height: 50px; /* ارتفاع ثابت برای تراز ماندن خطوط حتی اگر تیتر دو خطی شد */
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-content p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* --- ریسپانسیو (تبلت و موبایل) --- */
@media (max-width: 991px) {
    /* حذف خط افقی در موبایل */
    .roadmap-wrapper::before {
        display: none;
    }

    .roadmap-wrapper {
        flex-direction: column;
        align-items: center;
        margin-top: 40px;
    }

    .roadmap-step {
        width: 100%;
        max-width: 100%; /* عرض کامل */
        flex-direction: row; /* دایره کنار متن */
        align-items: flex-start;
        text-align: right; /* متن راست‌چین */
        margin-bottom: 0;
        padding-bottom: 40px; /* فاصله برای خط عمودی */
    }

    /* خط اتصال عمودی در موبایل */
    .roadmap-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 90px;
        right: 45px; /* وسط دایره */
        width: 2px;
        height: 100%;
        background: #e2e8f0;
        z-index: 0;
    }

    .step-number {
        min-width: 90px;
        margin-bottom: 0;
        margin-left: 20px;
    }

    .step-content {
        text-align: right;
        padding-top: 10px;
    }
    
    .step-content h4 {
        height: auto; /* حذف ارتفاع ثابت در موبایل */
        justify-content: flex-start;
        margin-bottom: 8px;
    }
}



/* --- استایل سکشن صنایع مادر (Corp Industries) --- */

.corp-industries {
    padding: 80px 0;
    background-color: #f8f9fa; /* رنگ پس‌زمینه کلی سکشن */
}

.ind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* کارت اصلی */
.ind-card {
    position: relative;
    height: 450px; /* ارتفاع ثابت برای یکدستی */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

/* تصویر پس‌زمینه */
.ind-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    z-index: 0;
}

/* افکت زوم روی عکس هنگام هاور */
.ind-card:hover .ind-bg {
    transform: scale(1.1);
}

/* لایه تاریک روی عکس (برای خوانایی متن) */
.ind-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* گرادینت از آبی تیره به شفاف */
    background: linear-gradient(to top, #0f172a 10%, rgba(15, 23, 42, 0.6) 100%);
    z-index: 1;
}

/* محتوای متنی */
.ind-content {
    position: relative;
    z-index: 2; /* بالاتر از عکس و لایه تاریک */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* چسبیدن محتوا به پایین */
    padding: 30px;
    color: #fff;
    text-align: center; /* وسط‌چین کردن متن‌ها */
    transition: transform 0.3s ease;
}

/* آیکون بزرگ اصلی */
.ind-content > i {
    font-size: 3.5rem;
    color: #fca311; /* رنگ زرد/طلایی برای آیکون */
    margin-bottom: 20px;
    display: block;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* عنوان کارت */
.ind-content h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
}

/* لیست ویژگی‌ها */
.ind-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right; /* لیست‌ها راست‌چین باشند خواناتر است */
    border-top: 1px solid rgba(255,255,255,0.2); /* خط جداکننده */
    padding-top: 20px;
    opacity: 0; /* در حالت عادی مخفی */
    transform: translateY(20px);
    transition: all 0.4s ease;
}

/* نمایش لیست هنگام هاور */
.ind-card:hover .ind-content ul {
    opacity: 1;
    transform: translateY(0);
}

/* آیتم‌های لیست */
.ind-content ul li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ind-content ul li i {
    color: #fca311; /* رنگ چک‌مارک */
}

/* حرکت محتوا به بالا هنگام هاور */
.ind-card:hover .ind-content {
    justify-content: center; /* در حالت هاور وسط بیاید */
    background: rgba(15, 23, 42, 0.8); /* تیره‌تر شدن پس‌زمینه */
}
/* --- Before & After Concept --- */
.corp-transformation { padding: 100px 0; background: #fff; }

.compare-container {
    position: relative; width: 100%; height: 400px;
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2);
    cursor: e-resize; /* نشانگر موس */
}

.img-old, .img-new {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
}

.img-old img, .img-new img {
    width: 100%; height: 100%; object-fit: cover;
}

.img-new {
    width: 50%; /* در ابتدا نصف صفحه جدید باشد */
    border-right: 4px solid var(--corp-gold);
    animation: scan 4s infinite alternate ease-in-out; /* انیمیشن خودکار */
}

@keyframes scan { from { width: 30%; } to { width: 70%; } }

.label-badge {
    position: absolute; top: 20px; padding: 5px 15px; border-radius: 5px; font-weight: bold; font-size: 0.8rem; z-index: 5;
}
.label-badge.old { right: 20px; background: rgba(0,0,0,0.6); color: #fff; }
.label-badge.new { left: 20px; background: var(--corp-gold); color: var(--corp-dark); }

.stats-row { display: flex; gap: 30px; margin-top: 30px; }
.stats-row div { background: #f1f2f6; padding: 15px; border-radius: 8px; color: var(--corp-dark); font-size: 0.9rem; }
.stats-row strong { display: block; font-size: 1.4rem; color: var(--corp-blue); margin-bottom: 5px; }

@media (max-width: 900px) {
    .compare-container { height: 250px; }
    .stats-row { flex-direction: column; gap: 10px; }
}



:root {
        --l-bg: #ffffff;
        --l-bg-alt: #f8f9fc;     /* خاکستری خیلی روشن مایل به آبی */
        --l-text: #2d3436;       /* متن تیره */
        --l-text-muted: #636e72;
        --l-primary: #4f46e5;    /* آبی ایندیگو (مدرن) */
        --l-primary-hover: #4338ca;
        --l-accent: #f59e0b;     /* نارنجی/طلایی برای تاکید */
        --l-shadow: 0 10px 30px rgba(0,0,0,0.05); /* سایه نرم */
        --l-shadow-hover: 0 20px 40px rgba(0,0,0,0.1);
        --l-radius: 16px;
    }

    #home-wrap-light {
        background-color: var(--l-bg);
        color: var(--l-text);
        overflow-x: hidden;
    }

    /* --- Navbar --- */
    .main-light-nav {
        position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
        background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px);
        border-bottom: 1px solid #eee; padding: 15px 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    }
    .nav-flex { display: flex; justify-content: space-between; align-items: center; }
    .brand-logo-light { font-size: 1.6rem; font-weight: 900; color: var(--l-text); }
    .dot-accent { color: var(--l-primary); font-size: 2rem; line-height: 0; }
    
    .nav-menu-light { display: flex; gap: 30px; list-style: none; margin: 0; }
    .nav-menu-light a { color: var(--l-text-muted); text-decoration: none; font-weight: 500; transition: 0.3s; }
    .nav-menu-light a:hover { color: var(--l-primary); }

    .nav-btns { display: flex; align-items: center; gap: 15px; }
    .nav-phone { width: 40px; height: 40px; border-radius: 50%; background: #eff6ff; color: var(--l-primary); display: flex; align-items: center; justify-content: center; transition: 0.3s; }
    .nav-phone:hover { background: var(--l-primary); color: #fff; }
    
    .btn-primary-light {
        background: var(--l-primary); color: #fff; padding: 10px 25px; border-radius: 50px;
        text-decoration: none; font-weight: bold; transition: 0.3s; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
    }
    .btn-primary-light:hover { background: var(--l-primary-hover); transform: translateY(-2px); }

    /* --- Hero Section --- */
    .light-hero {
        position: relative; padding: 160px 0 100px;
        background: radial-gradient(circle at 10% 20%, #f3f4f6, #fff);
        overflow: hidden;
    }
    
    /* Background Shape */
    .hero-bg-shape {
        position: absolute; top: -20%; right: -10%; width: 60%; height: 100%;
        background: linear-gradient(135deg, #eff6ff, #fdf2f8);
        border-radius: 50% 0 0 50%; opacity: 0.6; z-index: 0; filter: blur(60px);
    }

    .hero-container { position: relative; z-index: 2; display: flex; align-items: center; gap: 50px; }
    .hero-text-content { flex: 1; }

    .inline-badge {
        display: inline-flex; align-items: center; gap: 8px; background: #fff;
        padding: 6px 15px; border-radius: 50px; font-size: 0.85rem; font-weight: bold;
        color: var(--l-primary); border: 1px solid #e5e7eb; margin-bottom: 25px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    }
    .pulse-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }

    .hero-text-content h1 { font-size: 3.5rem; font-weight: 900; line-height: 1.25; margin-bottom: 20px; color: #111827; }
    .gradient-text-light { background: linear-gradient(135deg, var(--l-primary), #9333ea); -webkit-background-clip: text; color: transparent; }
    
    .hero-text-content p { font-size: 1.15rem; color: var(--l-text-muted); line-height: 1.8; margin-bottom: 40px; max-width: 550px; }

    .hero-actions { display: flex; gap: 15px; margin-bottom: 50px; }
    .btn-primary-xl {
        background: var(--l-primary); color: #fff; padding: 15px 35px; border-radius: 12px;
        font-weight: bold; text-decoration: none; display: flex; align-items: center; gap: 10px;
        box-shadow: 0 10px 25px rgba(79, 70, 229, 0.25); transition: 0.3s;
    }
    .btn-primary-xl:hover { background: var(--l-primary-hover); transform: translateY(-3px); }
    
    .btn-outline-xl {
        background: #fff; color: var(--l-text); padding: 15px 35px; border-radius: 12px;
        font-weight: bold; text-decoration: none; border: 1px solid #e5e7eb; display: flex; align-items: center; gap: 10px; transition: 0.3s;
    }
    .btn-outline-xl:hover { border-color: var(--l-primary); color: var(--l-primary); background: #f9fafb; }

    .trust-metrics { display: flex; gap: 30px; align-items: center; }
    .tm-item strong { display: block; font-size: 1.5rem; font-weight: 900; color: #111827; }
    .tm-item span { font-size: 0.85rem; color: var(--l-text-muted); }
    .tm-divider { width: 1px; height: 40px; background: #e5e7eb; }

    /* Visual */
    .hero-visual-light { flex: 1; position: relative; display: flex; justify-content: center; }
    .hero-img-anim { width: 100%; max-width: 600px; animation: floatL 6s infinite ease-in-out; }
    @keyframes floatL { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-15px)} }

    .float-card {
        position: absolute; background: #fff; padding: 12px 20px; border-radius: 10px;
        box-shadow: 0 15px 30px rgba(0,0,0,0.08); font-weight: bold; display: flex; gap: 10px; align-items: center;
        border: 1px solid #f3f4f6; animation: floatCard 5s infinite ease-in-out;
    }
    .float-card i { color: #10b981; }
    .fc-1 { top: 10%; right: 10%; }
    .fc-2 { bottom: 20%; left: 0; animation-delay: 2s; }
    .fc-2 i { color: #f59e0b; }

    /* --- Clients --- */
    .clients-strip { background: #fff; padding: 40px 0; border-bottom: 1px solid #f3f4f6; text-align: center; }
    .clients-strip p { color: #9ca3af; font-size: 0.9rem; margin-bottom: 20px; font-weight: bold; }
    .logos-grid { display: flex; justify-content: center; gap: 60px; font-size: 2.5rem; color: #d1d5db; }
    .logos-grid i:hover { color: var(--l-primary); transition: 0.3s; cursor: pointer; }

    /* --- Professional Services Grid --- */
    .pro-services-section {
        padding: 100px 0;
        background-color: #f8f9fc; /* زمینه خاکستری خیلی محو */
        position: relative;
    }

    /* پترن نقطه‌ای پس‌زمینه */
    .pro-services-section::before {
        content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background-image: radial-gradient(#e1e4e8 1px, transparent 1px);
        background-size: 30px 30px; opacity: 0.5; pointer-events: none;
    }

    .sec-header-center {
        text-align: center; margin-bottom: 60px; position: relative; z-index: 2;
    }
    .sec-badge {
        background: #eef2ff; color: #4f46e5; padding: 5px 15px; border-radius: 50px;
        font-weight: bold; font-size: 0.85rem; display: inline-block; margin-bottom: 15px;
    }
    .sec-header-center h2 { font-size: 2.2rem; font-weight: 900; color: #1e293b; margin-bottom: 15px; }
    .sec-header-center p { color: #64748b; font-size: 1.1rem; }

    /* Grid Layout */
    .pro-srv-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* واکنش‌گرا */
        gap: 25px;
        position: relative; z-index: 2;
    }

    /* Card Style */
    .ps-card {
        background: #fff;
        border-radius: 16px;
        padding: 25px;
        display: flex;
        align-items: center;
        gap: 20px;
        text-decoration: none;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 1px solid #f1f5f9;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
        position: relative;
        overflow: hidden;
    }

    /* Hover Effects */
    .ps-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01);
        border-color: transparent;
    }

    /* Icon Box */
    .ps-icon {
        width: 60px; height: 60px;
        border-radius: 14px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.5rem;
        flex-shrink: 0;
        transition: 0.3s;
    }

    .ps-card:hover .ps-icon { transform: scale(1.1) rotate(5deg); }

    /* Content */
    .ps-content { flex: 1; }
    .ps-content h3 { font-size: 1.1rem; font-weight: 800; color: #334155; margin-bottom: 5px; transition: 0.3s; }
    .ps-content p { font-size: 0.85rem; color: #94a3b8; margin: 0; line-height: 1.5; }

    .ps-card:hover h3 { color: #0f172a; }

    /* Arrow */
    .ps-arrow {
        color: #cbd5e1; font-size: 1rem; transition: 0.3s;
    }
    .ps-card:hover .ps-arrow { color: #334155; transform: translateX(-5px); }

    /* --- Color Themes (Gradient Icons) --- */
    /* هر کلاس رنگ، آیکون و هاور کارت را کنترل می‌کند */
    
    /* 1. شرکتی (Blue) */
    .c-blue .ps-icon { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #2563eb; }
    .c-blue:hover { border-bottom: 4px solid #2563eb; }

    /* 2. فروشگاهی (Green) */
    .c-green .ps-icon { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #16a34a; }
    .c-green:hover { border-bottom: 4px solid #16a34a; }

    /* 3. املاک (Orange) */
    .c-orange .ps-icon { background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #ea580c; }
    .c-orange:hover { border-bottom: 4px solid #ea580c; }

    /* 4. آموزشی (Indigo) */
    .c-indigo .ps-icon { background: linear-gradient(135deg, #eef2ff, #e0e7ff); color: #4f46e5; }
    .c-indigo:hover { border-bottom: 4px solid #4f46e5; }

    /* 5. پزشکی (Cyan) */
    .c-cyan .ps-icon { background: linear-gradient(135deg, #ecfeff, #cffafe); color: #06b6d4; }
    .c-cyan:hover { border-bottom: 4px solid #06b6d4; }

    /* 6. رستوران (Red) */
    .c-red .ps-icon { background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #dc2626; }
    .c-red:hover { border-bottom: 4px solid #dc2626; }

    /* 7. داروخانه (Teal) */
    .c-teal .ps-icon { background: linear-gradient(135deg, #f0fdfa, #ccfbf1); color: #0d9488; }
    .c-teal:hover { border-bottom: 4px solid #0d9488; }

    /* 8. آهن آلات (Slate) */
    .c-grey .ps-icon { background: linear-gradient(135deg, #f8fafc, #e2e8f0); color: #475569; }
    .c-grey:hover { border-bottom: 4px solid #475569; }

    /* 9. طلا (Gold) */
    .c-gold .ps-icon { background: linear-gradient(135deg, #fefce8, #fef9c3); color: #ca8a04; }
    .c-gold:hover { border-bottom: 4px solid #ca8a04; }

    /* 10. زیبایی (Pink) */
    .c-pink .ps-icon { background: linear-gradient(135deg, #fdf2f8, #fce7f3); color: #db2777; }
    .c-pink:hover { border-bottom: 4px solid #db2777; }

    /* 11. هتل (Purple) */
    .c-purple .ps-icon { background: linear-gradient(135deg, #faf5ff, #f3e8ff); color: #9333ea; }
    .c-purple:hover { border-bottom: 4px solid #9333ea; }

    /* 12. سئو (Vibrant) */
    .c-vibrant .ps-icon { background: linear-gradient(135deg, #fff1f2, #ffe4e6); color: #e11d48; }
    .c-vibrant:hover { border-bottom: 4px solid #e11d48; }

    /* 13. اینستاگرام (Instagram Gradient) */
    .c-insta .ps-icon { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
    .c-insta:hover { border-bottom: 4px solid #bc1888; }
    
    /* آیتم تمام عرض (برای پر کردن فضای خالی گرید) */
    .full-span {
        grid-column: span 1; /* پیش فرض */
    }

    /* Responsive Tweaks */
    @media (min-width: 992px) {
        .pro-srv-grid {
            grid-template-columns: repeat(4, 1fr); /* 4 ستونه در دسکتاپ */
        }
        /* چون 13 آیتم داریم، آیتم آخر (اینستاگرام) را بزرگتر میکنیم تا زیبا شود */
        .c-insta.full-span {
            grid-column: span 4;
            background: linear-gradient(to left, #fff, #fff0f5);
            justify-content: center;
        }
        .c-insta .ps-content { flex: 0; width: auto; min-width: 300px; text-align: center; }
    }

    @media (max-width: 768px) {
        .pro-services-section { padding: 60px 0; }
        .pro-srv-grid { grid-template-columns: 1fr; } /* تک ستونه در موبایل */
        .ps-card { padding: 20px; }
    }

    /* --- Portfolio --- */
    .light-portfolio { padding: 100px 0; background: #fff; }
    .pf-flex-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; }
    .btn-text-arrow { color: var(--l-primary); font-weight: bold; text-decoration: none; display: flex; align-items: center; gap: 10px; transition: 0.3s; }
    .btn-text-arrow:hover { gap: 15px; }

    .pf-grid-light { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; }
    .pf-card-light { cursor: pointer; group: hover; }
    
    .pf-img-box {
        position: relative; border-radius: 20px; overflow: hidden; height: 300px; box-shadow: var(--l-shadow);
        margin-bottom: 20px;
    }
    .pf-img-box img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
    .pf-card-light:hover img { transform: scale(1.05); }
    
    .pf-tag {
        position: absolute; top: 20px; right: 20px; background: #fff; padding: 6px 15px;
        border-radius: 30px; font-size: 0.8rem; font-weight: bold; color: var(--l-text);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .pf-info h4 { font-size: 1.2rem; color: #111827; margin-bottom: 5px; transition: 0.3s; }
    .pf-card-light:hover .pf-info h4 { color: var(--l-primary); }
    .pf-info p { color: var(--l-text-muted); font-size: 0.9rem; }

   /* --- Interactive Why Us Section --- */
.why-interactive-section {
    padding: 100px 0;
    background-color: #f8faff; /* رنگ زمینه بسیار روشن */
    overflow: hidden;
}

.why-tab-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-top: 50px;
}

/* ستون لیست (تب‌ها) */
.why-tabs-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.w-tab-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    border-radius: 16px;
    cursor: pointer;
    transition: 0.3s ease;
    border-right: 4px solid transparent; /* خط نشانگر غیرفعال */
    position: relative;
    overflow: hidden;
    background: transparent;
}

/* حالت فعال */
.w-tab-item.active {
    background: #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    border-right-color: #4f46e5; /* رنگ خط فعال */
}

/* آیکون */
.wt-icon {
    width: 50px; height: 50px;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: 0.3s;
}

.w-tab-item.active .wt-icon {
    background: #4f46e5;
    color: #fff;
    transform: scale(1.1);
}

.wt-content h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 5px 0;
}

.wt-content p {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

/* نوار پیشرفت (تایمر تعویض خودکار) */
.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    display: none;
}

.w-tab-item.active .progress-bar {
    display: block;
}

.w-tab-item.active .progress-bar .fill {
    height: 100%;
    background: #4f46e5;
    width: 0%;
    animation: progressFill 5s linear forwards; /* مدت زمان تعویض */
}

@keyframes progressFill {
    from { width: 0%; }
    to { width: 100%; }
}

/* ستون تصویر */
.why-visual-display {
    flex: 1.2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.screen-mockup {
    width: 100%;
    height: 450px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.15);
    overflow: hidden;
    position: relative;
    z-index: 2;
    border: 8px solid #fff;
}

.screen-mockup img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: 0.5s ease-in-out;
}

.screen-mockup img.active-img {
    opacity: 1;
    transform: scale(1);
}

/* شکل پشت عکس */
.blob-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 120%; height: 120%;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.1) 0%, rgba(0,0,0,0) 70%);
    z-index: 1;
}

/* ریسپانسیو */
@media (max-width: 992px) {
    .why-tab-wrapper {
        flex-direction: column-reverse;
        gap: 40px;
    }
    .screen-mockup {
        height: 300px;
    }
    .w-tab-item {
        padding: 20px;
    }
}

    /* --- CTA --- */
    .light-cta { padding: 80px 0 100px; }
    .cta-card-light {
        background: linear-gradient(120deg, var(--l-primary), #6366f1);
        border-radius: 30px; padding: 60px; text-align: center; color: #fff;
        box-shadow: 0 20px 50px rgba(79, 70, 229, 0.3); position: relative; overflow: hidden;
    }
    .cta-card-light::before {
        content: ''; position: absolute; top: -50%; left: -20%; width: 500px; height: 500px;
        background: rgba(255,255,255,0.1); border-radius: 50%; pointer-events: none;
    }

    .cta-text h2 { font-size: 2.2rem; margin-bottom: 15px; }
    .cta-text p { font-size: 1.1rem; margin-bottom: 40px; opacity: 0.9; }

    .cta-form-inline {
        background: #fff; padding: 8px; border-radius: 50px; display: inline-flex;
        width: 100%; max-width: 550px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    .cta-form-inline input { border: none; padding: 15px 20px; flex: 1; outline: none; font-family: inherit; border-radius: 50px; }
    .cta-form-inline button {
        background: #111827; color: #fff; border: none; padding: 12px 30px; border-radius: 50px;
        font-weight: bold; cursor: pointer; transition: 0.3s;
    }
    .cta-form-inline button:hover { background: #000; transform: scale(1.05); }

    /* Responsive */
    @media (max-width: 900px) {
        .hero-container { flex-direction: column-reverse; text-align: center; }
        .hero-actions { justify-content: center; flex-direction: column; }
        .trust-metrics { justify-content: center; }
        .why-layout { flex-direction: column; }
        .cta-form-inline { flex-direction: column; background: transparent; box-shadow: none; gap: 15px; }
        .cta-form-inline input { width: 100%; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 18px; }
        .cta-form-inline button { width: 100%; padding: 18px; }
        .nav-menu-light { display: none; }
    }



/* --- تنظیمات کلی سکشن --- */
.smart-wizard-section {
    margin-top: -65px; /* تنظیم ارتفاع برای قرارگیری روی هیرو */
    position: relative;
    z-index: 50;
    padding: 0 15px;
}

/* باکس اصلی شیشه‌ای */
.wizard-glass-box {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    padding: 20px 25px; /* پدینگ فشرده‌تر */
    
    /* چیدمان فلکس افقی */
    display: flex;
    align-items: center; /* تراز عمودی وسط */
    justify-content: space-between;
    gap: 20px;
    
    max-width: 1150px; /* عرض بیشتر برای جا شدن همه چیز */
    margin: 0 auto;
}

/* --- بخش سمت راست (هدر) --- */
.wizard-header-side {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-left: 20px;
    border-left: 1px solid #eee;
    flex-shrink: 0; /* جلوگیری از جمع شدن */
    min-width: 200px;
}

.wiz-icon-box {
    width: 50px; height: 50px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.5rem;
    position: relative;
}

.wiz-text-info h3 {
    font-size: 1rem; margin: 0; color: #1e293b; font-weight: 800;
}
.wiz-text-info span {
    font-size: 0.75rem; color: #64748b; display: block; margin-top: 2px;
}

/* --- بخش فرم (یک خطی) --- */
.wizard-form-inline {
    flex-grow: 1; /* پر کردن فضای باقی‌مانده */
    display: flex;
    align-items: flex-end; /* تراز کردن پایین المان‌ها (برای اینکه لیبل‌ها تراز باشند) */
    gap: 15px;
}

/* نگهدارنده هر اینپوت */
.wiz-input-wrapper {
    flex: 1; /* تقسیم مساوی فضا بین دو اینپوت */
    min-width: 200px; /* حداقل عرض */
}

.wiz-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px; /* فاصله لیبل تا اینپوت */
}

/* --- متن اتصال دهنده (هستم و هدفم) --- */
.wiz-connector-text {
    padding-bottom: 15px; /* تراز کردن با وسط اینپوت‌ها */
    font-size: 0.9rem;
    font-weight: bold;
    color: #94a3b8;
    white-space: nowrap; /* جلوگیری از شکستن متن */
}

/* --- استایل سلکتور سفارشی --- */
.custom-select {
    position: relative;
    width: 100%;
    font-family: inherit;
}

.select-trigger {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    height: 48px; /* ارتفاع فیکس */
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: 0.3s;
}

.select-trigger:hover {
    background: #fff;
    border-color: #cbd5e1;
}

.trigger-text {
    font-size: 0.9rem;
    color: #334155;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arrow { font-size: 0.75rem; color: #94a3b8; }

/* لیست بازشو */
.select-options {
    position: absolute;
    top: 110%; left: 0; right: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #f1f5f9;
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    transition: 0.2s;
    z-index: 100;
    max-height: 250px;
    overflow-y: auto;
}

.custom-select.open .select-options {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.option-item {
    padding: 10px 15px;
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #f8fafc;
    display: flex; align-items: center; gap: 8px;
}
.option-item:hover { background: #f0f4ff; color: #4f46e5; }
.option-item i { color: #94a3b8; width: 20px; text-align: center; }

/* --- دکمه --- */
.btn-wiz-action {
    height: 48px; /* هم‌ارتفاع با اینپوت */
    padding: 0 25px;
    background: #1e293b;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap; /* جلوگیری از شکستن متن دکمه */
    transition: 0.3s;
    flex-shrink: 0; /* جلوگیری از جمع شدن دکمه */
}

.btn-wiz-action:hover {
    background: #4f46e5;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
}

/* --- ریسپانسیو (برای تبلت و موبایل) --- */
@media (max-width: 992px) {
    .wizard-glass-box {
        flex-direction: column; /* در موبایل ستونی شود */
        align-items: stretch;
        padding: 20px;
    }
    
    .wizard-header-side {
        border-left: none;
        border-bottom: 1px solid #eee;
        padding-left: 0;
        padding-bottom: 15px;
        margin-bottom: 15px;
        justify-content: center;
    }

    .wizard-form-inline {
        flex-direction: column; /* اینپوت‌ها زیر هم */
        align-items: stretch;
        gap: 20px;
    }

    .wiz-connector-text {
        display: none; /* در موبایل متن اتصال حذف شود */
    }

    .btn-wiz-action {
        width: 100%;
        justify-content: center;
    }
}



/* --- Benefits Section Styles --- */
.benefits-section {
    padding: 100px 0;
    background-color: #fff; /* زمینه سفید */
    position: relative;
    /* پترن نقطه‌ای پس‌زمینه */
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 30px 30px;
}

.sec-badge-soft {
    background: #f1f5f9;
    color: #475569;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 800;
    display: inline-block;
    margin-bottom: 15px;
    border: 1px solid #e2e8f0;
}

/* شبکه گرید */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 ستون در دسکتاپ */
    gap: 30px;
    margin-top: 50px;
}

/* کارت مزیت */
.ben-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 24px;
    padding: 35px 30px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* هاور کارت */
.ben-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: transparent;
}

/* آیکون باکس */
.ben-icon-box {
    width: 65px; height: 65px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 25px;
    transition: 0.4s;
}

/* رنگ‌بندی آیکون‌ها */
.c-blue { background: #eff6ff; color: #3b82f6; }
.c-green { background: #f0fdf4; color: #10b981; }
.c-gold { background: #fffbeb; color: #f59e0b; }
.c-insta { background: #fff1f2; color: #e11d48; }
.c-purple { background: #f5f3ff; color: #7c3aed; }

/* تغییر رنگ آیکون در هاور */
.ben-card:hover .ben-icon-box {
    transform: scale(1.1) rotate(5deg);
}

.ben-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 12px;
}

.ben-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* استایل کارت عریض (پشتیبانی) */
.wide-card {
    grid-column: span 2; /* اشغال 2 ستون */
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
    flex-direction: row; /* چیدمان افقی */
    align-items: center;
    gap: 30px;
    border: 1px dashed #cbd5e1;
}

.wide-card .ben-icon-box {
    margin-bottom: 0;
    width: 80px; height: 80px; font-size: 2.2rem; /* آیکون بزرگتر */
}

/* --- ریسپانسیو --- */
@media (max-width: 1100px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 ستون در تبلت */
    }
    .wide-card {
        grid-column: span 2; /* همچنان تمام عرض */
    }
}

@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr; /* تک ستون در موبایل */
    }
    .wide-card {
        grid-column: span 1;
        flex-direction: column; /* در موبایل عمودی شود */
        align-items: flex-start;
        gap: 20px;
    }
    .sec-header-center { padding: 0 15px; }
}


.video-testimonials { padding: 100px 0; background: #fff; }
.stories-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }

.story-card { width: 280px; position: relative; cursor: pointer; transition: 0.3s; }
.story-card:hover { transform: translateY(-10px); }

.video-wrapper {
    height: 450px; border-radius: 20px; overflow: hidden; position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.video-cover { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.story-card:hover .video-cover { transform: scale(1.05); filter: brightness(0.8); }

.play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 60px; height: 60px; background: rgba(255,255,255,0.3); backdrop-filter: blur(5px);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.5rem; border: 2px solid #fff; transition: 0.3s;
}
.story-card:hover .play-btn { background: #fff; color: var(--l-primary); transform: translate(-50%, -50%) scale(1.1); }

.story-info {
    position: absolute; bottom: 20px; left: 20px; right: 20px;
    display: flex; align-items: center; gap: 10px; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.story-info img { width: 45px; height: 45px; border-radius: 50%; border: 2px solid #fff; }
.story-info strong { display: block; font-size: 0.95rem; }
.story-info small { font-size: 0.8rem; opacity: 0.9; }



.our-team { padding: 100px 0; background: #f8f9fc; }
.team-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }

.team-member {
    width: 250px; background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: 0.3s; text-align: center;
}
.team-member:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(79, 70, 229, 0.15); }

.tm-photo {
    height: 250px; background-size: cover; background-position: center;
    filter: grayscale(100%); transition: 0.4s;
}
.team-member:hover .tm-photo { filter: grayscale(0%); }

.tm-details { padding: 20px; }
.tm-details h4 { font-size: 1.1rem; color: #333; margin-bottom: 5px; }
.tm-details span { color: var(--l-primary); font-size: 0.85rem; font-weight: bold; display: block; margin-bottom: 15px; }

.tm-social { display: flex; justify-content: center; gap: 15px; opacity: 0; transform: translateY(10px); transition: 0.3s; }
.team-member:hover .tm-social { opacity: 1; transform: translateY(0); }
.tm-social i { color: #999; cursor: pointer; transition: 0.3s; }
.tm-social i:hover { color: var(--l-primary); }




 /* استایل‌ها */
    .lottie-seo-section { padding: 80px 0; overflow: hidden; background: #fff; }
    .lottie-layout { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
    .lottie-text { flex: 1; min-width: 300px; z-index: 2; }
    .lottie-visual { flex: 1; min-width: 300px; display: flex; justify-content: center; position: relative; }
    
    .lottie-badge { background: #e0e7ff; color: #4338ca; padding: 5px 15px; border-radius: 50px; font-size: 0.85rem; font-weight: bold; margin-bottom: 15px; display: inline-block; }
    .lottie-text h2 { font-size: 2.5rem; font-weight: 900; line-height: 1.3; color: #1e293b; margin-bottom: 20px; }
    .highlight-text { color: #8b5cf6; } /* رنگ بنفش ساده برای اطمینان از نمایش */
    .lottie-text p { color: #64748b; line-height: 1.8; margin-bottom: 30px; font-size: 1.1rem; }
    
    .seo-stats-grid { display: flex; gap: 30px; margin-bottom: 30px; }
    .seo-stat { border-right: 2px solid #eee; padding-right: 20px; }
    .seo-stat:last-child { border: none; }
    .seo-stat strong { display: block; font-size: 1.4rem; color: #0f172a; }
    .seo-stat small { color: #94a3b8; font-size: 0.8rem; }
    
    .btn-lottie-cta { background: #0f172a; color: #fff; padding: 12px 30px; border-radius: 10px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: 0.3s; }
    .btn-lottie-cta:hover { background: #334155; transform: translateY(-3px); }

    /* افکت نوری پشت انیمیشن */
    .glow-blob { position: absolute; width: 300px; height: 300px; background: rgba(139, 92, 246, 0.15); border-radius: 50%; filter: blur(60px); z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); }

    @media (max-width: 768px) {
        .lottie-layout { flex-direction: column-reverse; text-align: center; }
        .seo-stats-grid { justify-content: center; }
        .seo-stat { border: none; padding: 0 10px; }
    }
    
    
    /* --- کانتینر اصلی انیمیشن --- */
.seo-css-anim {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px; /* برای ایجاد حالت سه بعدی */
}

/* --- کارت داشبورد --- */
.seo-dashboard {
    width: 320px;
    height: 240px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 
        0 20px 50px rgba(79, 70, 229, 0.15),
        0 0 0 1px rgba(0,0,0,0.05); /* بوردر ظریف */
    padding: 20px;
    position: relative;
    z-index: 5;
    transform: rotateY(-15deg) rotateX(10deg); /* چرخش سه بعدی */
    transition: transform 0.5s ease;
}

.seo-dashboard:hover {
    transform: rotateY(0) rotateX(0); /* صاف شدن هنگام هاور */
}

/* هدر کارت */
.sd-header {
    display: flex; align-items: center; gap: 15px; margin-bottom: 30px;
}
.sd-dots { display: flex; gap: 5px; }
.sd-dots span { width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0; }
.sd-dots span:nth-child(1) { background: #ff5f56; }
.sd-dots span:nth-child(2) { background: #ffbd2e; }
.sd-dots span:nth-child(3) { background: #27c93f; }

.sd-search-bar { flex: 1; height: 8px; background: #f1f5f9; border-radius: 4px; }

/* ناحیه نمودار */
.sd-body { position: relative; height: 130px; display: flex; align-items: flex-end; padding-bottom: 10px; }

.sd-chart-area {
    width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 10px;
}

/* ستون‌های نمودار */
.sd-bar {
    width: 12%;
    background: #e2e8f0;
    border-radius: 50px 50px 0 0;
    height: 0; /* ارتفاع اولیه صفر */
    transition: height 1.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* حالت فنری */
    position: relative;
}

/* کلاس فعال که توسط JS اضافه می‌شود */
.active-anim .sd-bar {
    height: var(--target-h);
    transition-delay: var(--delay);
}

/* ستون ویژه (رنگی) */
.sd-bar.active {
    background: linear-gradient(to top, #4f46e5, #818cf8);
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
}

/* تولتیپ روی ستون */
.sd-tooltip {
    position: absolute; top: -35px; left: 50%; transform: translateX(-50%) scale(0);
    background: #1e293b; color: #fff; padding: 4px 8px; border-radius: 6px;
    font-size: 0.75rem; font-weight: bold; opacity: 0;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-delay: 1.5s; /* ظاهر شدن بعد از رشد نمودار */
}
.sd-tooltip::after {
    content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
    border-width: 4px 4px 0; border-style: solid; border-color: #1e293b transparent transparent;
}

.active-anim .sd-tooltip { transform: translateX(-50%) scale(1); opacity: 1; }

.sd-line {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #e2e8f0;
}

/* --- المان‌های شناور (Glassmorphism) --- */
.float-obj {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    animation: floatObj 4s ease-in-out infinite;
}

.glass-search {
    width: 50px; height: 50px; border-radius: 12px;
    top: 40px; right: 20px; color: #4f46e5; font-size: 1.2rem;
    animation-delay: 0s;
}

.glass-trend {
    width: 45px; height: 45px; border-radius: 50%;
    bottom: 50px; left: 30px; color: #10b981; font-size: 1.2rem;
    animation-delay: 1.5s;
}

.glass-check {
    padding: 8px 15px; border-radius: 50px; gap: 8px;
    top: 50%; right: -20px; font-weight: bold; font-size: 0.85rem; color: #334155;
    animation-delay: 0.5s;
}
.glass-check i { color: #10b981; }

@keyframes floatObj {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* نور پس‌زمینه */
.css-glow-bg {
    position: absolute; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
    z-index: 0; border-radius: 50%;
    animation: pulseBg 5s infinite alternate;
}

@keyframes pulseBg { from { transform: scale(1); opacity: 0.5; } to { transform: scale(1.2); opacity: 0.8; } }

/* ریسپانسیو */
@media (max-width: 768px) {
    .seo-dashboard { width: 280px; height: 200px; transform: none; }
    .glass-search { right: 0; }
    .glass-check { right: 0; }
}



.process-timeline-section {
        padding: 100px 0;
        background: #fdfdfd;
        position: relative;
        overflow: hidden;
    }

    .timeline-wrapper {
        position: relative;
        max-width: 1000px;
        margin: 60px auto 0;
        padding: 20px 0;
    }

    /* --- خطوط تایم‌لاین --- */
    /* خط ثابت خاکستری */
    .timeline-track {
        position: absolute; top: 0; bottom: 0; left: 50%; width: 4px;
        background: #e5e7eb; transform: translateX(-50%); border-radius: 4px;
        z-index: 1;
    }

    /* خط رنگی متحرک */
    .timeline-progress-bar {
        position: absolute; top: 0; left: 50%; width: 4px;
        height: 0; /* توسط JS تغییر میکند */
        background: linear-gradient(to bottom, #4f46e5, #ec4899);
        transform: translateX(-50%);
        border-radius: 4px;
        z-index: 2;
        transition: height 0.1s linear; /* نرم کردن حرکت */
        box-shadow: 0 0 15px rgba(79, 70, 229, 0.6);
    }

    /* --- آیتم‌های تایم‌لاین --- */
    .tl-item {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: 80px;
        z-index: 3;
        opacity: 0.3; /* حالت خاموش */
        filter: blur(2px);
        transition: 0.5s all ease;
    }
    .tl-item:last-child { margin-bottom: 0; }

    /* حالت فعال (وقتی اسکرول رسید) */
    .tl-item.active {
        opacity: 1;
        filter: blur(0);
        transform: scale(1.02);
    }

    /* دایره وسط */
    .tl-dot {
        position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
        width: 50px; height: 50px; background: #fff; border-radius: 50%;
        border: 4px solid #e5e7eb; display: flex; align-items: center; justify-content: center;
        color: #9ca3af; font-size: 1.2rem; transition: 0.4s;
        box-shadow: 0 0 0 5px #fdfdfd; /* فاصله سفید دور دایره */
    }

    .tl-item.active .tl-dot {
        border-color: #4f46e5;
        color: #fff;
        background: #4f46e5;
        box-shadow: 0 0 0 5px #fdfdfd, 0 0 20px rgba(79, 70, 229, 0.4);
    }

    /* باکس محتوا */
    .tl-content {
        width: 45%;
        background: #fff;
        padding: 30px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        position: relative;
        border: 1px solid #f3f4f6;
    }
    
    .tl-content::after { /* فلش باکس */
        content: ''; position: absolute; top: 50%; width: 15px; height: 15px;
        background: #fff; transform: translateY(-50%) rotate(45deg);
    }

    /* چیدمان زیگ زاگ (چپ و راست) */
    .tl-item:nth-child(odd) { flex-direction: row-reverse; } /* آیتم های فرد سمت راست */
    .tl-item:nth-child(odd) .tl-content { text-align: right; margin-right: auto; margin-left: 55%; }
    .tl-item:nth-child(odd) .tl-content::after { left: -8px; border-left: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; }

    .tl-item:nth-child(even) .tl-content { text-align: right; margin-left: auto; margin-right: 55%; }
    .tl-item:nth-child(even) .tl-content::after { right: -8px; border-right: 1px solid #f3f4f6; border-top: 1px solid #f3f4f6; }

    /* استایل متن */
    .step-num {
        font-size: 3rem; font-weight: 900; color: #f3f4f6; position: absolute;
        top: 10px; left: 20px; line-height: 1; pointer-events: none;
    }
    .tl-item.active .step-num { color: #eef2ff; }

    .tl-content h3 { font-size: 1.3rem; margin-bottom: 10px; color: #1f2937; position: relative; z-index: 2; }
    .tl-content p { color: #6b7280; font-size: 0.95rem; line-height: 1.6; margin: 0; position: relative; z-index: 2; }

    /* --- Responsive (Mobile) --- */
    @media (max-width: 768px) {
        .timeline-track, .timeline-progress-bar { left: 30px; transform: none; }
        .tl-dot { left: 30px; transform: translate(-50%, -50%); width: 40px; height: 40px; font-size: 1rem; }
        
        /* همه آیتم‌ها در یک سمت */
        .tl-item, .tl-item:nth-child(odd), .tl-item:nth-child(even) {
            flex-direction: row; justify-content: flex-start;
        }
        
        .tl-content, .tl-item:nth-child(odd) .tl-content, .tl-item:nth-child(even) .tl-content {
            width: calc(100% - 70px);
            margin: 0 60px 0 0 !important; /* فاصله از راست برای RTL */
        }

        /* فلش فقط سمت راست */
        .tl-content::after, .tl-item:nth-child(odd) .tl-content::after, .tl-item:nth-child(even) .tl-content::after {
            right: -8px; left: auto;
            border-right: 1px solid #f3f4f6; border-top: 1px solid #f3f4f6; border-left: none; border-bottom: none;
        }
    }
    
    
    /* --- استایل مودال هوشمند --- */
.wiz-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px);
    z-index: 10000; display: none; /* پیش فرض مخفی */
    align-items: center; justify-content: center; opacity: 0; transition: 0.3s;
}
.wiz-modal-overlay.active { display: flex; opacity: 1; }

.wiz-modal-box {
    background: #fff; width: 90%; max-width: 500px;
    border-radius: 25px; padding: 40px; position: relative;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
    transform: scale(0.8); transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
}
.wiz-modal-overlay.active .wiz-modal-box { transform: scale(1); }

.wiz-close-btn {
    position: absolute; top: 15px; right: 20px; font-size: 30px;
    background: none; border: none; cursor: pointer; color: #999;
}
.wiz-close-btn:hover { color: #e51c37; }

/* لودینگ */
.wiz-loading .spinner {
    width: 50px; height: 50px; border: 5px solid #f3f3f3;
    border-top: 5px solid var(--l-primary); border-radius: 50%;
    margin: 0 auto 20px; animation: spin 1s linear infinite;
}
.wiz-loading p { font-weight: bold; color: #555; }

/* نتیجه */
.wiz-icon-result {
    font-size: 3.5rem; color: #00b894; margin-bottom: 15px;
    animation: bounceIn 0.6s;
}
.wiz-header h3 { font-size: 1.5rem; color: #1e293b; margin-bottom: 10px; }
.wiz-summary { font-size: 0.95rem; color: #64748b; margin-bottom: 25px; }
.wiz-summary span { color: var(--l-primary); font-weight: bold; border-bottom: 1px dashed; }

.wiz-stats-row {
    display: flex; gap: 15px; margin-bottom: 25px;
}
.ws-box {
    flex: 1; background: #f8faff; padding: 15px; border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.ws-box small { display: block; color: #94a3b8; font-size: 0.8rem; margin-bottom: 5px; }
.ws-box strong { display: block; color: var(--l-primary); font-size: 1.1rem; font-weight: 900; }

.wiz-features-list { text-align: right; background: #fff; margin-bottom: 30px; }
.wiz-features-list ul { padding: 0; list-style: none; }
.wiz-features-list li { margin-bottom: 8px; font-size: 0.9rem; color: #475569; display: flex; align-items: center; gap: 10px; }
.wiz-features-list li i { color: #00b894; }

/* دکمه‌ها */
.wiz-footer { display: flex; flex-direction: column; gap: 10px; }
.btn-wiz-final {
    background: linear-gradient(135deg, var(--l-primary), #4338ca);
    color: #fff; padding: 12px; border-radius: 10px; text-decoration: none;
    font-weight: bold; transition: 0.3s;
}
.btn-wiz-final:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3); }

.btn-wiz-call {
    background: transparent; color: #64748b; border: 2px solid #e2e8f0;
    padding: 12px; border-radius: 10px; font-weight: bold; cursor: pointer; transition: 0.3s;
}
.btn-wiz-call:hover { border-color: var(--l-primary); color: var(--l-primary); }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes bounceIn { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
    
    
    /* --- CSS 3D Animation Stage --- */
.why-visual-display {
    flex: 1.1;
    position: relative;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px; /* ایجاد عمق سه بعدی */
}

.css-anim-stage {
    width: 400px;
    height: 400px;
    position: relative;
    z-index: 2;
}

/* تنظیمات کلی صحنه‌ها */
.scene {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: none; /* پیش فرض مخفی */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.5s;
}

.scene.active-scene {
    display: flex;
    opacity: 1;
    animation: fadeInScene 0.8s ease-out forwards;
}

@keyframes fadeInScene {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* ============================
   SCENE 1: SPEED (Rocket)
   ============================ */
.rocket-body {
    font-size: 5rem;
    color: #4f46e5;
    position: relative;
    transform: rotate(45deg);
    filter: drop-shadow(0 10px 20px rgba(79, 70, 229, 0.4));
    animation: rocketFloat 2s infinite ease-in-out alternate;
    z-index: 2;
}

.exhaust-flame {
    position: absolute;
    bottom: -15px; left: 10px;
    width: 20px; height: 40px;
    background: linear-gradient(to bottom, #ff9f43, #ff5e57);
    border-radius: 50%;
    filter: blur(5px);
    animation: flameBurn 0.2s infinite alternate;
    z-index: -1;
}

.speed-lines span {
    position: absolute;
    background: rgba(79, 70, 229, 0.2);
    height: 2px;
    border-radius: 2px;
    animation: speedLine 1s infinite linear;
}
.speed-lines span:nth-child(1) { width: 100px; top: 20%; left: -50px; animation-delay: 0s; }
.speed-lines span:nth-child(2) { width: 150px; top: 50%; right: -50px; animation-delay: 0.3s; }
.speed-lines span:nth-child(3) { width: 80px; bottom: 30%; left: 20px; animation-delay: 0.5s; }

@keyframes rocketFloat { to { transform: rotate(45deg) translateY(-20px); } }
@keyframes flameBurn { to { height: 50px; opacity: 0.7; } }
@keyframes speedLine { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(-200px); opacity: 1; } }


/* ============================
   SCENE 2: DESIGN (Isometric)
   ============================ */
.iso-container {
    position: relative;
    width: 200px; height: 200px;
    transform: rotateX(60deg) rotateZ(-45deg);
    transform-style: preserve-3d;
}

.iso-layer {
    position: absolute;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(79, 70, 229, 0.3);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 1rem; color: #4f46e5;
    transition: 0.5s;
    animation: isoFloat 3s infinite ease-in-out;
}

.iso-layer.l1 { transform: translateZ(0px); z-index: 1; background: #eef2ff; }
.iso-layer.l2 { transform: translateZ(40px); z-index: 2; animation-delay: 0.2s; }
.iso-layer.l3 { transform: translateZ(80px); z-index: 3; background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; border: none; animation-delay: 0.4s; }

@keyframes isoFloat {
    0%, 100% { transform: translateZ(var(--z-pos, 0)); }
    50% { transform: translateZ(calc(var(--z-pos, 0) + 20px)); }
}
/* تنظیم متغیرها برای انیمیشن */
.iso-layer.l1 { --z-pos: 0px; }
.iso-layer.l2 { --z-pos: 40px; }
.iso-layer.l3 { --z-pos: 80px; }


/* ============================
   SCENE 3: SECURITY (Shield)
   ============================ */
.shield-container {
    position: relative;
    width: 150px; height: 180px;
    display: flex; align-items: center; justify-content: center;
}

.shield-icon {
    font-size: 8rem;
    color: #1e293b;
    z-index: 2;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2));
}

.scan-laser {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 3px;
    background: #00b894;
    box-shadow: 0 0 15px #00b894;
    z-index: 3;
    animation: scanMove 2s infinite ease-in-out;
    opacity: 0.8;
}

.security-ring {
    position: absolute;
    width: 250px; height: 250px;
    border: 2px dashed #00b894;
    border-radius: 50%;
    animation: spinRing 10s linear infinite;
    z-index: 1;
}

.lock-icon {
    position: absolute; bottom: 20px; right: 40px;
    background: #00b894; color: #fff;
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(0, 184, 148, 0.4);
    animation: popLock 3s infinite;
}

@keyframes scanMove { 0% { top: 10%; opacity: 0; } 50% { opacity: 1; } 100% { top: 90%; opacity: 0; } }
@keyframes spinRing { to { transform: rotate(360deg); } }
@keyframes popLock { 0%, 90% { transform: scale(1); } 95% { transform: scale(1.2); } 100% { transform: scale(1); } }


/* ============================
   SCENE 4: SUPPORT (Chat)
   ============================ */
.chat-bubble {
    position: absolute;
    padding: 15px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: flex; gap: 10px; align-items: center;
    width: 200px;
    animation: chatPop 4s infinite;
}

.chat-bubble.client {
    top: 30%; left: 0;
    border-bottom-left-radius: 2px;
}

.chat-bubble.admin {
    bottom: 30%; right: 0;
    background: #4f46e5; color: #fff;
    border-bottom-right-radius: 2px;
    animation-delay: 2s; /* تاخیر برای پاسخ */
}

.cb-avatar {
    width: 35px; height: 35px; background: #eee; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #4f46e5;
}
.admin .cb-avatar { background: rgba(255,255,255,0.2); color: #fff; }

.cb-lines span {
    display: block; height: 6px; border-radius: 3px; background: #f1f2f6; margin-bottom: 5px;
}
.cb-lines span:first-child { width: 100px; }
.cb-lines span:last-child { width: 60px; }
.admin .cb-lines span { background: rgba(255,255,255,0.3); }

/* تایپ کردن */
.typing-dots { display: flex; gap: 3px; position: absolute; top: -20px; right: 0; }
.typing-dots i { width: 6px; height: 6px; background: #4f46e5; border-radius: 50%; animation: type 1s infinite; }
.typing-dots i:nth-child(2) { animation-delay: 0.2s; }
.typing-dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes chatPop {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-5px) scale(1.05); }
}
@keyframes type { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* هاله نور پشت */
.glow-bg-anim {
    position: absolute;
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.15) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 1;
    animation: pulseGlow 4s infinite alternate;
}

/* =========================================
   SEO GROWTH SECTION (Design Match)
   ========================================= */

.seo-growth-section {
    padding: 100px 0;
    background-color: #fff;
    overflow: hidden;
    position: relative;
    z-index: 5;
}

.growth-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- ستون راست (متن و آمار) --- */
.growth-text-col {
    flex: 1;
    min-width: 300px;
    text-align: right;
}

/* بج بالای تیتر */
.growth-badge {
    background: #e0e7ff;
    color: #4338ca;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 20px;
}

/* تنظیمات تیتر برای ایجاد فضای کافی */
.growth-text-col h2 {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.4; /* افزایش ارتفاع خط */
    color: #1e293b;
    margin-bottom: 35px; /* فاصله بیشتر از پایین */
}

/* استایل کلمه پادشاهی کنید (پایین آمده) */
.highlight-purple {
    color: #4f46e5;
    position: relative;
    
}

/* خط رنگی زیر کلمه */
.highlight-purple::after {
   content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(79,70,229,.2);
    z-index: -1;
    transform: rotate(-2deg)
}

.growth-text-col p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #64748b;
    margin-bottom: 40px;
    max-width: 550px;
}

/* بخش آمار */
.growth-stats {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
}

.g-stat-item {
    text-align: center;
}

.gs-icon {
    font-size: 1.5rem;
    color: #4f46e5;
    margin-bottom: 10px;
}

.g-stat-item strong {
    display: block;
    font-size: 1.8rem;
    font-weight: 900;
    color: #1e293b;
    line-height: 1;
    direction: ltr; /* برای نمایش صحیح عدد و درصد */
}

.g-stat-item small {
    font-size: 0.9rem;
    color: #94a3b8;
    display: block;
    margin-top: 5px;
}

.g-stat-divider {
    width: 2px;
    height: 50px;
    background: #e2e8f0;
}

/* دکمه تیره */
.btn-growth-cta {
    background: #0f172a;
    color: #fff;
    padding: 15px 35px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
}

.btn-growth-cta:hover {
    background: #334155;
    transform: translateY(-3px);
}

/* --- ستون چپ (انیمیشن گوگل) --- */
.growth-visual-col {
    flex: 1.1;
    display: flex;
    justify-content: center;
    perspective: 1500px;
}

/* استایل‌های انیمیشن گوگل (کپی شده برای اطمینان) */
.iso-browser-mockup.seo-anim-box {
    width: 100%; 
    max-width: 450px;
    background: #fff;
    border-radius: 24px; 
    box-shadow: 0 30px 80px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
    padding: 30px; 
    transform: rotateY(-10deg) rotateX(5deg); 
    transition: transform 0.5s ease-out;
    transform-style: preserve-3d;
}

.iso-browser-mockup.seo-anim-box:hover { 
    transform: rotateY(0) rotateX(0) scale(1.02); 
    box-shadow: 0 40px 100px rgba(79, 70, 229, 0.2);
}

.iso-search-bar {
    display: flex; align-items: center; padding: 12px 20px;
    border: 1px solid #dfe1e5; border-radius: 50px; margin-bottom: 35px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); background: #fff;
}
.iso-g-logo { font-weight: 900; font-size: 1.4rem; margin-left: 15px; color: #ea4335; }
.iso-typing-area { flex: 1; font-size: 1rem; color: #333; display: flex; align-items: center; }
.iso-typed-text { color: #333; min-width: 10px; font-weight: bold; }
.search-icon { color: #4285f4; font-size: 1.2rem; }
.iso-cursor { animation: isoBlink 0.7s infinite; color: #4285f4; margin-right: 2px; }

/* لیست نتایج */
.iso-serp-list { 
    opacity: 0; transform: translateY(20px); 
    transition: 0.6s; display: flex; flex-direction: column; gap: 20px;
}
.iso-serp-list.show { opacity: 1; transform: translateY(0); }

.iso-serp-item { padding-bottom: 15px; border-bottom: 1px solid #f1f5f9; position: relative; text-align: right; }
.iso-link h3 { font-size: 1.1rem; color: #1a0dab; margin: 5px 0; font-weight: 700; }
.iso-url { font-size: 0.8rem; color: #202124; display: block; margin-bottom: 5px; }
.iso-serp-item p { font-size: 0.85rem; color: #4d5156; margin: 0; line-height: 1.5; }

.rank-1 { transition: 0.5s; padding: 15px; border-radius: 12px; }
.rank-1.highlight {
    background: #f0fdf4; border: 1px solid #22c55e; 
    box-shadow: 0 10px 20px rgba(34, 197, 94, 0.15);
    transform: scale(1.05); z-index: 5;
}
.iso-rank-badge {
    position: absolute; top: -10px; left: 10px;
    background: #facc15; color: #000; font-weight: bold; font-size: 0.7rem;
    padding: 3px 10px; border-radius: 20px; opacity: 0; transform: scale(0);
    transition: 0.4s;
}
.rank-1.highlight .iso-rank-badge { opacity: 1; transform: scale(1); }

.blur-item { opacity: 0.5; filter: blur(1px); }
.iso-skeleton-line { height: 10px; background: #e2e8f0; border-radius: 4px; margin-bottom: 8px; }
.w-60 { width: 60%; } .w-80 { width: 80%; } .w-50 { width: 50%; } .w-70 { width: 70%; }

.iso-success-msg {
    position: absolute; bottom: 30px; left: 30px; right: 30px;
    background: #1e293b; color: #fff; padding: 15px; border-radius: 12px;
    text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px;
    opacity: 0; transform: translateY(30px); transition: 0.5s; z-index: 10;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.iso-success-msg.show { opacity: 1; transform: translateY(0); }
.iso-success-msg i { color: #22c55e; font-size: 1.2rem; }

@keyframes isoBlink { 50% { opacity: 0; } }

/* ریسپانسیو */
@media (max-width: 991px) {
    .growth-container { flex-direction: column-reverse; text-align: center; }
    .growth-text-col { text-align: center; }
    .growth-stats { justify-content: center; }
    .highlight-purple::after { left: 50%; transform: translateX(-50%); width: 120px; }
    .iso-browser-mockup.seo-anim-box { max-width: 100%; transform: none; }
}



/* =========================================
   MODERN FAQ SECTION STYLES
   ========================================= */

.modern-faq-section {
    padding: 100px 0;
    background-color: #f8f9fc; /* رنگ پس‌زمینه خیلی روشن */
    position: relative;
    overflow: hidden;
    font-family: inherit;
}

.faq-container {
    max-width: 900px; /* عرض کمتر برای خوانایی بهتر */
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* هدر */
.faq-section-header {
    text-align: center;
    margin-bottom: 50px;
}
.faq-section-header h2 {
    font-size: 2.2rem;
    font-weight: 900;
    color: #1e293b;
    margin-bottom: 15px;
}
.faq-section-header p {
    color: #64748b;
    font-size: 1.1rem;
}
.faq-badge {
    background: #e0e7ff;
    color: #4f46e5;
    padding: 5px 15px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.85rem;
    display: inline-block;
    margin-bottom: 15px;
}

/* کارت سوال */
.faq-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.faq-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-color: #cbd5e1;
}

/* حالت فعال (باز شده) */
.faq-card.active {
    border-color: #4f46e5;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.1);
}

/* سربرگ سوال (دکمه کلیک) */
.faq-head {
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse; /* آیکون سمت چپ باشد */
}

.faq-head h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    transition: 0.3s;
    text-align: right;
    flex: 1;
}

.faq-card.active .faq-head h3 {
    color: #4f46e5; /* تغییر رنگ متن در حالت فعال */
}

/* آیکون مثبت/منفی */
.faq-icon {
    width: 30px;
    height: 30px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-right: 15px; /* فاصله از متن */
}

.faq-card.active .faq-icon {
    background: #4f46e5;
    color: #fff;
    transform: rotate(135deg); /* چرخش به شکل ضربدر */
}

/* بدنه پاسخ */
.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease;
    opacity: 0;
    background-color: #fdfdfd;
}

.faq-card.active .faq-body {
    max-height: 300px; /* ارتفاع حداکثری برای باز شدن */
    opacity: 1;
}

.faq-body p {
    padding: 0 25px 25px 25px;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #475569;
    text-align: justify;
    border-top: 1px dashed #e2e8f0;
    padding-top: 20px;
}

/* المان تزئینی */
.faq-deco-circle {
    position: absolute;
    bottom: -50px;
    left: -50px;
    font-size: 15rem;
    font-weight: 900;
    color: rgba(79, 70, 229, 0.03); /* بسیار کمرنگ */
    z-index: 1;
    transform: rotate(-20deg);
    pointer-events: none;
    font-family: sans-serif;
}

@media (max-width: 768px) {
    .faq-head { padding: 15px 20px; }
    .faq-head h3 { font-size: 0.95rem; }
}




/* =========================================
   SEO LANDING PAGE STYLES (ISOLATED)
   ========================================= */

/* متغیرهای رنگی اختصاصی این صفحه */
#landing-seo-wrap {
    --seo-bg: #ffffff;
    --seo-primary: #5f27cd;      /* بنفش جذاب */
    --seo-accent: #00d2d3;       /* فیروزه‌ای نئونی */
    --seo-dark: #222f3e;         /* سرمه‌ای تیره */
    --seo-text: #576574;
    --seo-grad: linear-gradient(135deg, #5f27cd, #341f97);
    font-family: inherit;
    direction: rtl;
    width: 100%;
    overflow-x: hidden;
    background: var(--seo-bg);
}

#landing-seo-wrap * { box-sizing: border-box; }
#landing-seo-wrap a { text-decoration: none; }

.seo-lp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* --- 1. HERO SECTION --- */
.seo-lp-hero {
    padding: 140px 0 100px;
    background: radial-gradient(circle at 10% 20%, #f7f9fc, #fff);
    position: relative;
    overflow: hidden;
}

.hero-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.hero-text { flex: 1; text-align: right; }

.hero-badge {
    background: rgba(95, 39, 205, 0.1);
    color: var(--seo-primary);
    padding: 8px 18px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 20px;
}

.seo-lp-hero h1 {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--seo-dark);
    margin-bottom: 20px;
    line-height: 1.3;
}

.text-gradient {
    background: linear-gradient(90deg, var(--seo-primary), var(--seo-accent));
    -webkit-background-clip: text;
    color: transparent;
}

.seo-lp-hero p {
    font-size: 1.1rem;
    color: var(--seo-text);
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 550px;
}

.hero-btns {
    display: flex;
    gap: 15px;
    margin-bottom: 50px;
}

.btn-seo-primary {
    background: var(--seo-primary);
    color: #fff;
    padding: 15px 35px;
    border-radius: 12px;
    font-weight: bold;
    box-shadow: 0 10px 25px rgba(95, 39, 205, 0.3);
    transition: 0.3s;
    display: flex; align-items: center; gap: 10px;
}
.btn-seo-primary:hover { transform: translateY(-3px); background: #481cb5; }

.btn-seo-outline {
    border: 2px solid var(--seo-primary);
    color: var(--seo-primary);
    padding: 13px 30px;
    border-radius: 12px;
    font-weight: bold;
    transition: 0.3s;
    display: flex; align-items: center; gap: 10px;
}
.btn-seo-outline:hover { background: var(--seo-primary); color: #fff; }

.hero-stats-row {
    display: flex;
    gap: 30px;
    border-top: 1px solid #eee;
    padding-top: 25px;
}
.hs-item strong { display: block; font-size: 1.5rem; color: var(--seo-dark); font-weight: 800; }
.hs-item small { color: #888; font-size: 0.85rem; }

/* Visual Dashboard */
.hero-visual { flex: 1; display: flex; justify-content: center; perspective: 1000px; }

.seo-dashboard-card {
    width: 400px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.15);
    border: 1px solid #f1f1f1;
    transform: rotateY(-10deg) rotateX(5deg);
    transition: 0.5s ease;
    position: relative;
    overflow: hidden;
}
.hero-visual:hover .seo-dashboard-card { transform: rotateY(0) rotateX(0); }

.sd-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex; gap: 15px; align-items: center;
}
.sd-dots span { width: 10px; height: 10px; border-radius: 50%; background: #ddd; display: inline-block; }
.sd-dots span:nth-child(1) { background: #ff5f56; }
.sd-dots span:nth-child(2) { background: #ffbd2e; }
.sd-dots span:nth-child(3) { background: #27c93f; }
.sd-url { font-size: 0.8rem; color: #888; background: #fff; padding: 5px 15px; border-radius: 20px; width: 100%; border: 1px solid #eee; }

.sd-body { padding: 30px; height: 300px; position: relative; }

/* Animated Chart */
.sd-chart-wrapper {
    display: flex; align-items: flex-end; justify-content: space-between; height: 150px; position: relative;
}
.chart-bar {
    width: 15%;
    background: linear-gradient(to top, #eee, #ddd);
    border-radius: 5px 5px 0 0;
    animation: growBar 2s ease-out forwards;
}
.chart-bar.b1 { height: 30%; animation-delay: 0s; }
.chart-bar.b2 { height: 50%; animation-delay: 0.2s; }
.chart-bar.b3 { height: 40%; animation-delay: 0.4s; }
.chart-bar.b4 { height: 70%; animation-delay: 0.6s; }
.chart-bar.b5 { height: 90%; background: linear-gradient(to top, var(--seo-primary), var(--seo-accent)); animation-delay: 0.8s; box-shadow: 0 10px 20px rgba(95, 39, 205, 0.3); }

.chart-line-svg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
}
.chart-line-svg path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawPath 2s ease-out forwards 1s;
}

/* Floating Stats */
.sd-floating-stat {
    position: absolute;
    background: #fff;
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: flex; align-items: center; gap: 10px;
    font-size: 0.9rem;
    animation: floatStat 4s infinite ease-in-out;
}
.fs-1 { top: 20px; right: 20px; border-left: 3px solid var(--seo-accent); }
.fs-2 { bottom: 40px; left: 20px; border-left: 3px solid var(--seo-primary); animation-delay: 1s; }
.sd-floating-stat i { font-size: 1.2rem; }
.fs-1 i { color: var(--seo-accent); }
.fs-2 i { color: var(--seo-primary); }

@keyframes growBar { from { height: 0; } }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes floatStat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* --- 2. SERVICES --- */
.seo-lp-services { padding: 100px 0; background: #fff; }
.sec-header { text-align: center; margin-bottom: 60px; }
.sec-header h2 { font-size: 2.5rem; font-weight: 900; color: var(--seo-dark); margin-bottom: 15px; }
.sec-header p { color: var(--seo-text); font-size: 1.1rem; }

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.srv-card {
    background: #fff;
    padding: 35px 25px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: 0.3s;
    text-align: center;
}
.srv-card:hover { transform: translateY(-10px); border-color: var(--seo-primary); box-shadow: 0 20px 50px rgba(95, 39, 205, 0.1); }

.srv-icon {
    width: 70px; height: 70px; margin: 0 auto 20px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.i-tech { background: #e0f2f1; color: #009688; }
.i-content { background: #f3e5f5; color: #9c27b0; }
.i-link { background: #e3f2fd; color: #2196f3; }
.i-local { background: #fff3e0; color: #ff9800; }

.srv-card h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; color: var(--seo-dark); }
.srv-card p { font-size: 0.95rem; color: #7f8c8d; line-height: 1.7; }

/* =========================================
   SEO PROCESS SECTION (Exact Match)
   ========================================= */

.seo-lp-process {
    padding: 80px 0;
    background: #fdfdfd; /* پس‌زمینه سفید/خیلی روشن */
    text-align: center;
    position: relative;
    direction: rtl;
}

/* هدر وسط‌چین */
.sec-header.center-text {
    text-align: center;
    margin-bottom: 60px;
}
.sec-header.center-text h2 {
    font-size: 2.2rem;
    font-weight: 900;
    color: #1e293b;
    margin-bottom: 10px;
}
.sec-header.center-text p {
    color: #64748b;
    font-size: 1rem;
}

/* کانتینر مراحل */
.process-steps-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* خط اتصال خاکستری */
.process-line {
    position: absolute;
    top: 35px; /* تنظیم دقیق برای قرار گرفتن وسط دایره‌ها */
    left: 50px; /* فاصله از چپ */
    right: 50px; /* فاصله از راست */
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}

/* آیتم هر مرحله */
.p-step {
    position: relative;
    z-index: 1; /* روی خط قرار بگیرد */
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: transparent; /* مهم */
}

/* دایره‌ها (طبق عکس: دورخط بنفش، زمینه سفید) */
.ps-circle {
    width: 70px;
    height: 70px;
    background: #ffffff;
    border: 2px solid #5f27cd; /* رنگ بنفش */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5f27cd;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 25px;
    box-shadow: 0 0 0 10px #fdfdfd; /* فاصله سفید دور دایره برای قطع کردن خط */
    transition: 0.3s;
}

/* هاور دایره */
.p-step:hover .ps-circle {
    background: #5f27cd;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(95, 39, 205, 0.3);
}

/* متن‌ها */
.p-step h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
}

.p-step p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    max-width: 200px;
    margin: 0 auto;
}

/* ریسپانسیو (موبایل) */
@media (max-width: 768px) {
    .process-steps-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    
    /* خط عمودی شود */
    .process-line {
        width: 2px;
        height: 100%;
        top: 0;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    
    .p-step {
        width: 100%;
        flex-direction: row; /* در موبایل آیکون و متن کنار هم */
        justify-content: center;
        gap: 20px;
        text-align: right;
    }
    
    .p-step h4, .p-step p {
        text-align: right;
        margin: 0;
    }
    
    .ps-circle {
        margin-bottom: 0;
        flex-shrink: 0;
    }
}

/* --- 4. RESULTS / PORTFOLIO --- */
.seo-lp-results { padding: 100px 0; background: var(--seo-dark); color: #fff; }
.text-white h2 { color: #fff !important; }
.text-white p { color: #bdc3c7 !important; }

.results-grid { display: flex; justify-content: center; gap: 30px; margin-top: 50px; flex-wrap: wrap; }
.res-card {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px; padding: 30px; width: 350px; transition: 0.3s;
}
.res-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-5px); }

.res-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-weight: bold; font-size: 1.1rem; }
.res-header i { color: var(--seo-accent); }

.res-chart-mockup {
    height: 120px; background: rgba(0,0,0,0.2); border-radius: 10px; margin-bottom: 20px;
    position: relative; overflow: hidden; display: flex; align-items: flex-end;
}
.chart-trend {
    width: 100%; height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(0, 210, 211, 0.2) 100%);
    clip-path: polygon(0 100%, 100% 100%, 100% 20%, 75% 40%, 50% 60%, 25% 70%, 0 85%);
}
.trend-label {
    position: absolute; top: 10px; right: 10px; background: #10ac84; color: #fff;
    padding: 3px 10px; border-radius: 5px; font-size: 0.8rem; font-weight: bold;
}
.res-details { font-size: 0.95rem; line-height: 1.8; color: #dcdde1; }

/* --- 5. CTA FORM --- */
.seo-lp-cta { padding: 100px 0; background: url('https://www.transparenttextures.com/patterns/cubes.png') #fcfcfc; }
.cta-box-glass {
    background: var(--seo-grad);
    border-radius: 25px; padding: 50px;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 20px 60px rgba(95, 39, 205, 0.3);
    color: #fff; gap: 40px;
}
.cta-text { flex: 1; }
.cta-text h2 { font-size: 2.2rem; font-weight: 900; margin-bottom: 15px; }
.cta-text p { font-size: 1.1rem; opacity: 0.9; }

.cta-form { flex: 1; display: flex; flex-direction: column; gap: 15px; }
.cta-form input {
    padding: 15px; border-radius: 10px; border: none; outline: none; font-family: inherit;
}
.cta-form button {
    padding: 15px; border-radius: 10px; border: none; font-weight: bold;
    background: var(--seo-accent); color: #000; cursor: pointer; transition: 0.3s; font-size: 1.1rem;
}
.cta-form button:hover { background: #fff; }

/* --- 6. FAQ --- */
.seo-lp-faq { padding: 80px 0; background: #fff; }
.faq-accordion-seo { max-width: 800px; margin: 0 auto; }
.seo-faq-item { border-bottom: 1px solid #eee; }
.seo-faq-head {
    padding: 20px; cursor: pointer; font-weight: bold; display: flex;
    justify-content: space-between; align-items: center; color: var(--seo-dark);
}
.seo-faq-body {
    padding: 0 20px 20px; display: none; color: #666; line-height: 1.8;
}
.seo-faq-item.active .seo-faq-head { color: var(--seo-primary); }
.seo-faq-item.active .seo-faq-head i { transform: rotate(45deg); }

/* Responsive */
@media (max-width: 991px) {
    .hero-flex { flex-direction: column-reverse; text-align: center; }
    .hero-text { text-align: center; }
    .hero-btns { justify-content: center; }
    .hero-stats-row { justify-content: center; }
    .cta-box-glass { flex-direction: column; text-align: center; }
    .process-steps-wrapper { flex-direction: column; gap: 30px; }
    .process-line { width: 3px; height: 100%; top: 0; left: 50%; transform: translateX(-50%); }
    .seo-dashboard-card { width: 300px; height: 280px; }
}



/* =========================================
   SEO EDUCATION SECTION STYLES
   ========================================= */

.seo-education-wrapper {
    width: 100%;
    background-color: #fff;
    font-family: inherit;
    overflow: hidden;
}

.edu-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.edu-header {
    text-align: center;
    margin-bottom: 60px;
}
.edu-badge {
    background: #eef2ff;
    color: #4f46e5;
    padding: 5px 15px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.85rem;
    display: inline-block;
    margin-bottom: 15px;
}
.edu-header h2 {
    font-size: 2.2rem;
    font-weight: 900;
    color: #1e293b;
    margin-bottom: 15px;
}
.edu-header p {
    color: #64748b;
    font-size: 1.1rem;
}

/* --- 1. VALUE SECTION (Traffic & Sales) --- */
.seo-value-section {
    padding: 80px 0;
    background: linear-gradient(to bottom, #fff, #f8fafc);
}

.value-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.val-card {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    border: 1px solid #f1f5f9;
    position: relative;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.val-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(79, 70, 229, 0.1);
    border-color: #e0e7ff;
}

/* نوار رنگی کنار کارت */
.val-card::before {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 6px;
    background: #e2e8f0; transition: 0.3s;
}
.val-card:hover::before { background: #4f46e5; }

.val-icon-box {
    width: 70px; height: 70px;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    position: relative;
}

.v-sales .val-icon-box { background: #ecfdf5; color: #10b981; } /* سبز برای فروش */
.v-sales:hover::before { background: #10b981; }

.pulse-ring {
    position: absolute; width: 100%; height: 100%;
    border-radius: 20px; border: 2px solid currentColor;
    opacity: 0; animation: ringPulse 2s infinite;
}

.val-content h3 { font-size: 1.4rem; font-weight: 800; color: #1e293b; margin-bottom: 15px; }
.val-content p { font-size: 1rem; line-height: 1.8; color: #64748b; margin: 0; text-align: justify; }
.val-content strong { color: #4f46e5; }
.v-sales .val-content strong { color: #10b981; }

/* فلش اتصال بین دو کارت */
.val-arrow {
    position: absolute; bottom: -45px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 40px; background: #fff; border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center;
    color: #cbd5e1; z-index: 2; font-size: 0.9rem;
}

@keyframes ringPulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.4); opacity: 0; } }

/* --- 2. TYPES SECTION (Grid) --- */
.seo-types-section {
    padding: 100px 0;
    background: #fff;
}

.types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* واکنش‌گرا */
    gap: 30px;
}

.type-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px 25px;
    border: 1px solid #eee;
    text-align: center;
    transition: 0.3s;
    position: relative;
    top: 0;
}

.type-card:hover {
    top: -10px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    border-color: transparent;
}

.type-visual {
    width: 80px; height: 80px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: #f8fafc;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #94a3b8;
    transition: 0.3s;
}

/* تغییر رنگ در هاور */
.type-card:hover .type-visual { background: #4f46e5; color: #fff; transform: rotateY(180deg); }
.type-card:nth-child(2):hover .type-visual { background: #0ea5e9; } /* آبی برای محتوا */
.type-card:nth-child(3):hover .type-visual { background: #f59e0b; } /* زرد برای تکنیکال */
.type-card:nth-child(4):hover .type-visual { background: #ec4899; } /* صورتی برای تخصصی */

.type-info h3 { font-size: 1.2rem; font-weight: 800; color: #1e293b; margin-bottom: 10px; }

.type-tag {
    display: inline-block;
    background: #f1f5f9; color: #64748b;
    font-size: 0.8rem; padding: 4px 12px; border-radius: 6px;
    font-weight: bold; margin-bottom: 15px;
}

.type-info p { font-size: 0.9rem; color: #64748b; line-height: 1.7; margin: 0; }

/* ریسپانسیو */
@media (max-width: 768px) {
    .val-card { flex-direction: column; text-align: center; align-items: center; }
    .val-card::before { width: 100%; height: 6px; top: 0; right: 0; bottom: auto; }
    .val-arrow { display: none; }
    .types-grid { grid-template-columns: 1fr; }
}


/* =========================================
   SEO SERVICES EXTENDED (Neon Cards)
   ========================================= */

.seo-services-extended {
    padding: 100px 0;
    background-color: #0b1120; /* پس‌زمینه تیره */
    position: relative;
    overflow: hidden;
}

/* هدر */
.sse-header {
    text-align: center;
    margin-bottom: 60px;
}
.sse-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
    margin-bottom: 15px;
}
.sse-header h2 {
    font-size: 2.5rem;
    color: #fff;
    font-weight: 900;
    margin-bottom: 15px;
}
.sse-header p {
    color: #94a3b8;
    font-size: 1.1rem;
}

/* گرید کارت‌ها */
.sse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* استایل کلی کارت */
.sse-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.1s ease; /* برای حرکت نرم با موس */
    transform-style: preserve-3d;
}

/* رنگ‌بندی‌های اختصاصی (متغیرها) */
.technical { --card-color: #00d2d3; } /* آبی فیروزه‌ای */
.onpage { --card-color: #a55eea; }    /* بنفش */
.offpage { --card-color: #ff9f43; }   /* نارنجی */
.content-seo { --card-color: #2bcbba; } /* سبز */

/* آیکون باکس */
.sse-icon-box {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--card-color);
    margin-bottom: 25px;
    position: relative;
    transform: translateZ(20px); /* برجستگی سه بعدی */
}

/* نور پشت آیکون */
.icon-glow {
    position: absolute;
    width: 100%; height: 100%;
    background: var(--card-color);
    filter: blur(20px);
    opacity: 0.2;
    z-index: -1;
    transition: 0.3s;
}
.sse-card:hover .icon-glow { opacity: 0.5; }

/* تیتر کارت */
.sse-card h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 25px;
    transform: translateZ(10px);
}

/* لیست خدمات */
.sse-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sse-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #cbd5e1;
    margin-bottom: 15px;
    font-size: 0.95rem;
    transition: 0.3s;
    transform: translateZ(0);
}
.sse-list li i {
    color: var(--card-color);
    font-size: 0.9rem;
}

/* هاور روی آیتم‌های لیست */
.sse-list li:hover {
    color: #fff;
    transform: translateX(-5px) translateZ(5px);
}

/* افکت بردر پایین */
.card-border {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 4px;
    background: var(--card-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.sse-card:hover .card-border {
    transform: scaleX(1);
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .sse-grid { grid-template-columns: 1fr; }
    .sse-card { transform: none !important; } /* حذف تیلت در موبایل */
}
/* --- FIX 2: اصلاح چیدمان بخش خدمات --- */
.seo-services-extended {
    padding: 100px 0;
    background-color: #0b1120;
    text-align: center; /* وسط‌چین کردن کل محتوا */
    direction: rtl;
}

/* تنظیم کانتینر برای قرارگیری المان‌ها زیر هم */
.seo-services-extended .seo-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column; /* تیتر بالا، کارت‌ها پایین */
    align-items: center;
}

/* استایل هدر (تیتر) */
.sse-header {
    margin-bottom: 60px;
    width: 100%;
    text-align: center;
    order: -1; /* اطمینان از اینکه همیشه اول باشد */
}

.sse-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
    margin-bottom: 15px;
}

.sse-header h2 {
    font-size: 2.5rem;
    color: #fff;
    font-weight: 900;
    margin-bottom: 15px;
}

.sse-header p {
    color: #94a3b8;
    font-size: 1.1rem;
}

/* تنظیم شبکه کارت‌ها */
.sse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* واکنش‌گرا */
    gap: 30px;
    width: 100%;
}

/* استایل کارت‌ها */
.sse-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease;
    
    /* تنظیمات متن داخل کارت برای فارسی */
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sse-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.sse-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

/* رنگ آیکون‌ها */
.technical .sse-icon-box { color: #00d2d3; }
.onpage .sse-icon-box { color: #a55eea; }
.offpage .sse-icon-box { color: #ff9f43; }
.content-seo .sse-icon-box { color: #2bcbba; }

.sse-card h3 {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 20px;
    font-weight: 800;
}

.sse-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.sse-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cbd5e1;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.sse-list li i {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* ریسپانسیو موبایل */
@media (max-width: 768px) {
    .sse-grid {
        grid-template-columns: 1fr; /* در موبایل تک ستونه شود */
    }
    .sse-header h2 {
        font-size: 2rem;
    }
}



/* =========================================
   MODERN ROI CALCULATOR (Clean & Grid)
   ========================================= */

.roi-modern-section {
    padding: 100px 0;
    background-color: #f8faff; /* پس‌زمینه کلی سکشن */
}

/* کارت اصلی داشبورد (سفید و یکپارچه) */
.roi-dashboard-card {
    display: flex;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05); /* سایه نرم */
    border: 1px solid #eef2ff;
    overflow: hidden; /* برای گرد کردن گوشه‌ها */
    max-width: 1000px;
    margin: 0 auto;
}

/* --- ستون راست: ورودی‌ها --- */
.roi-inputs-col {
    flex: 1.5; /* فضای بیشتر برای اسلایدرها */
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
}

.roi-input-group {
    position: relative;
}

.label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.label-row label {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
}

.val-display {
    color: #4f46e5; /* رنگ بنفش برند */
    font-weight: 800;
    font-size: 1.1rem;
    font-family: sans-serif; /* برای نمایش بهتر اعداد */
    background: #eef2ff;
    padding: 4px 12px;
    border-radius: 8px;
}

/* استایل اسلایدر سفارشی */
.styled-range {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 10px;
    outline: none;
    cursor: pointer;
}

/* دکمه اسلایدر (Thumb) */
.styled-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: #4f46e5;
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4);
    margin-top: -8px; /* تراز کردن وسط خط */
    transition: transform 0.2s;
}

.styled-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* --- ستون چپ: نتیجه --- */
.roi-result-col {
    flex: 1;
    background: #1e293b; /* سرمه‌ای تیره */
    color: #fff;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* افکت نور پس‌زمینه نتیجه */
.roi-result-col::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 210, 211, 0.15), transparent 60%);
    pointer-events: none;
}

.result-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.roi-result-col h4 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    opacity: 0.9;
}

.growth-badge {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 25px;
    color: #00d2d3; /* فیروزه‌ای */
}

.final-price {
    margin-bottom: 25px;
}

.final-price span {
    display: block;
    font-size: 3rem;
    font-weight: 900;
    color: #00d2d3;
    line-height: 1;
    letter-spacing: -1px;
    text-shadow: 0 0 20px rgba(0, 210, 211, 0.3);
}

.final-price small {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-top: 5px;
    display: block;
}

.roi-result-col p {
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-bottom: 30px;
    line-height: 1.6;
}

.btn-roi-submit {
    background: #4f46e5;
    color: #fff;
    border: none;
    padding: 15px 30px;
    width: 100%;
    border-radius: 12px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-roi-submit:hover {
    background: #4338ca;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
}

/* ریسپانسیو */
@media (max-width: 900px) {
    .roi-dashboard-card {
        flex-direction: column;
    }
    .roi-inputs-col {
        padding: 30px;
    }
    .roi-result-col {
        padding: 40px 30px;
    }
}


/* =========================================
   LIVE KEYWORD TICKER (Stock Market Style)
   ========================================= */

.seo-ticker-section {
    background-color: #0f172a; /* سرمه‌ای خیلی تیره */
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    height: 60px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 20;
}

/* لیبل ثابت سمت راست (اختیاری) */
.ticker-label {
    background: #4f46e5; /* رنگ برند */
    color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-weight: bold;
    font-size: 0.9rem;
    position: relative;
    z-index: 2;
    box-shadow: 10px 0 20px rgba(0,0,0,0.5);
    white-space: nowrap;
}

.ticker-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.ticker-track {
    display: flex;
    gap: 60px; /* فاصله بین آیتم‌ها */
    width: max-content;
    animation: tickerScroll 30s linear infinite; /* سرعت حرکت */
}

/* توقف حرکت وقتی موس روی آن است */
.ticker-wrapper:hover .ticker-track {
    animation-play-state: paused;
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: inherit;
    white-space: nowrap;
}

.t-keyword {
    font-weight: 500;
    color: #e2e8f0;
    font-size: 0.95rem;
}

.t-rank {
    background: rgba(16, 185, 129, 0.15); /* پس‌زمینه سبز محو */
    color: #34d399; /* سبز روشن */
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 800;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-family: sans-serif; /* برای نمایش بهتر اعداد انگلیسی */
}

.t-icon {
    color: #34d399;
    font-size: 1rem;
    animation: blinkGreen 2s infinite;
}

/* انیمیشن حرکت نوار */
@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* چون محتوا را دوبل می‌کنیم */
}

/* انیمیشن چشمک زن آیکون */
@keyframes blinkGreen {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .ticker-label {
        display: none; /* در موبایل لیبل حذف شود تا فضای بیشتری باشد */
    }
    .seo-ticker-section {
        height: 50px;
    }
    .ticker-track {
        gap: 40px;
    }
}



/* =========================================
   NEON TILT CARD (Interactive Hero Visual)
   ========================================= */

.hero-visual-3d {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    perspective: 1000px; /* حیاتی برای افکت سه بعدی */
    transform-style: preserve-3d;
    z-index: 10;
}

/* بدنه اصلی کارت */
.neon-tilt-card {
    width: 360px;
    height: 420px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); /* زمینه تیره */
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5), /* سایه اصلی */
        0 0 30px rgba(79, 70, 229, 0.2); /* هاله نئونی بنفش */
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(0) rotateY(0);
    transition: transform 0.1s ease-out; /* نرمی حرکت با موس */
}

/* هدر مرورگر (نقطه‌ها) */
.browser-dots {
    padding: 20px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.browser-dots span {
    width: 12px; height: 12px;
    border-radius: 50%;
    background-color: #334155;
}
.browser-dots span:nth-child(1) { background-color: #ef4444; }
.browser-dots span:nth-child(2) { background-color: #f59e0b; }
.browser-dots span:nth-child(3) { background-color: #10b981; }

/* محتوای داخلی */
.card-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 60px);
    justify-content: space-between;
}

/* نمودار */
.chart-container {
    position: relative;
    height: 150px;
    width: 100%;
    margin-top: 20px;
}

.chart-line-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(0, 210, 211, 0.5)); /* درخشش خط */
    animation: drawChart 3s ease-out forwards;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
}

@keyframes drawChart {
    to { stroke-dashoffset: 0; }
}

/* نقاط تپنده روی نمودار */
.chart-point {
    position: absolute;
    width: 12px; height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 15px #fff;
    transform: translate(-50%, -50%);
    animation: pulsePoint 2s infinite;
}
.p1 { bottom: 50px; left: 40%; animation-delay: 0s; }
.p2 { bottom: 70px; left: 75%; animation-delay: 0.5s; }
.p3 { top: 10px; right: 0; background: #00d2d3; animation-delay: 1s; }

@keyframes pulsePoint {
    0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* آمار پایین */
.stats-row {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 12px;
    transform: translateZ(20px); /* برجستگی سه بعدی */
}

.stat-item { display: flex; flex-direction: column; gap: 5px; }
.stat-label { color: #94a3b8; font-size: 0.8rem; }
.stat-value { font-size: 1.1rem; font-weight: 800; }
.text-green { color: #34d399; }
.text-purple { color: #a78bfa; }

/* المان‌های شناور (Floaters) */
.floating-badge {
    position: absolute;
    background: #fff;
    color: #0f172a;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: flex; align-items: center; gap: 8px;
    transition: transform 0.2s;
}

.badge-top {
    top: -20px; right: -30px;
    transform: translateZ(40px); /* خیلی جلوتر از کارت */
    border-left: 4px solid #10b981;
}
.badge-bottom {
    bottom: 40px; left: -40px;
    transform: translateZ(30px);
    border-right: 4px solid #4f46e5;
}

/* افکت براق (Glare) */
.card-glare {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 24px;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 80%
    );
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    transition: opacity 0.3s;
    z-index: 5;
}

/* ریسپانسیو */
@media (max-width: 991px) {
    .hero-visual-3d { min-height: 450px; }
    .neon-tilt-card { width: 300px; height: 380px; }
    .badge-top { right: -10px; }
    .badge-bottom { left: -10px; }
}


/* --- اصلاح لرزش و استایل نقاط --- */

/* 1. استایل متن روی نقاط نمودار */
.point-label {
    position: absolute;
    top: -25px; /* بالای نقطه */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.9);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0; /* در حالت عادی مخفی */
    transition: 0.3s;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.2);
}

/* نمایش متن وقتی موس روی کارت است یا به صورت خودکار */
.neon-tilt-card:hover .point-label {
    opacity: 1;
    top: -30px; /* حرکت نرم به بالا */
}
/* یا اگر می‌خواهید همیشه دیده شوند خط بالا را پاک کنید و opacity: 1 را به کلاس .point-label بدهید */

/* استایل نقاط */
.chart-point {
    /* استایل‌های قبلی حفظ شود */
    cursor: pointer;
    z-index: 5;
}

/* 2. تنظیم کانتینر برای جلوگیری از لرزش */
.hero-visual-3d {
    /* اطمینان از اینکه کانتینر کل فضای لازم را پر می‌کند */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* --- FIX: Force Single Line Grid for Services --- */

@media (min-width: 1200px) {
    .sse-grid {
        /* Force 4 equal columns in one line */
        grid-template-columns: repeat(4, 1fr) !important; 
        
        /* Ensure there's no wrapping */
        grid-auto-flow: column; 
        
        /* Optional: If you want them to shrink to fit, use this instead: */
        /* display: flex; flex-wrap: nowrap; */
    }
    
    /* Ensure the container is wide enough */
    .seo-container {
        max-width: 1400px; /* Increased width to fit 4 cards comfortably */
        padding: 0 40px;
    }
}

/* Adjust card padding slightly to fit content better in one line */
.sse-card {
    padding: 25px;
}

/* --- FIX FINAL: اصلاح ترتیب موبایل (متن بالا - باکس پایین) --- */

@media (max-width: 991px) {
    
    /* 1. هدف قرار دادن کانتینر اصلی هیرو */
    .hero-layout, 
    .seo-container.hero-layout,
    .growth-container {
        display: flex !important;
        flex-direction: column !important; /* چینش ستونی */
    }

    /* 2. متن را به زور به اولین جایگاه می‌بریم */
    .hero-content, 
    .hero-text,
    .growth-content {
        order: -1 !important; /* منفی یک یعنی بالاترین اولویت */
        margin-bottom: 40px !important; /* فاصله با باکس پایین */
        padding-top: 20px !important;
    }

    /* 3. باکس/کارت را به جایگاه دوم می‌بریم */
    .hero-visual-3d, 
    .growth-visual-col,
    .growth-visual {
        order: 10 !important; /* عدد مثبت یعنی برود پایین */
        margin-bottom: 50px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* تنظیم سایز کارت در موبایل که بیرون نزند */
    .neon-tilt-card {
        width: 100% !important;
        max-width: 340px !important;
        height: 420px !important;
        transform: none !important; /* حذف چرخش در موبایل برای خوانایی */
    }
}

/* =========================================
   COMPARISON TABLE SECTION
   ========================================= */

.seo-compare-section {
    padding: 100px 0;
    background: #f8fafc;
}

.compare-table-wrapper {
    overflow-x: auto; /* اسکرول در موبایل */
    padding-bottom: 20px;
}

.compare-table {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.compare-table th, .compare-table td {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}

/* ستون ویژگی‌ها */
.feature-col {
    text-align: right !important;
    font-weight: bold;
    color: #1e293b;
    background: #f8fafc;
    width: 30%;
}

.compare-table tbody td:first-child {
    text-align: right;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
}

/* ستون وب‌کندو (برجسته) */
.webcando-col {
    background: #4f46e5;
    color: #fff;
    font-size: 1.2rem;
    position: relative;
    overflow: hidden;
    width: 25%;
}

.brand-name { position: relative; z-index: 2; font-weight: 900; }
.col-glow {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    animation: pulseGlow 3s infinite;
}

/* وضعیت‌ها */
.compare-table .check { color: #10b981; background: rgba(16, 185, 129, 0.05); font-weight: bold; }
.compare-table .cross { color: #ef4444; background: rgba(239, 68, 68, 0.05); }
.compare-table .maybe { color: #f59e0b; background: rgba(245, 158, 11, 0.05); }

/* ستون‌های دیگر */
.others-col, .freelancer-col { color: #64748b; font-size: 1rem; background: #fff; }

/* هایلایت ستون وب‌کندو در تمام ردیف‌ها */
.compare-table tbody td:nth-child(2) {
    border-left: 2px solid #4f46e5;
    border-right: 2px solid #4f46e5;
    background: rgba(79, 70, 229, 0.03);
    font-size: 1.05rem;
}

@keyframes pulseGlow { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }



/* =========================================
   MODERN & CENTERED SERVICE TABLE (FULL)
   ========================================= */

.modern-service-table-section {
    padding: 100px 0;
    background-color: #f8fafc;
    text-align: center; /* راستای مرکزی برای کل بخش */
    direction: rtl;
}

/* --- استایل هدر سکشن (جذاب‌تر شده) --- */
.sec-header h2 {
    font-size: 2.5rem;
    font-weight: 900;
    color: #1e293b;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
    z-index: 1;
}

/* خط رنگی زیر تیتر */
.sec-header h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #4f46e5, #00d2d3);
    border-radius: 4px;
}

.sec-header p {
    margin-top: 30px;
    color: #64748b;
    font-size: 1.1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* --- تنظیمات وسط‌چین کردن جدول --- */
.table-responsive-wrapper {
    overflow-x: auto;
    padding: 20px;
    margin: 40px auto 0; /* فاصله از بالا و وسط‌چین */
    max-width: 1100px;
    display: flex; /* کلیدی برای وسط‌چین در برخی مرورگرها */
    justify-content: center;
}

.wc-modern-table {
    width: 100%;
    /* حداقل عرض برداشته شد تا در صفحه‌های کوچک بیرون نزند */
    border-collapse: separate;
    border-spacing: 0 20px; /* فاصله بین ردیف‌ها */
}

/* هدر جدول (عناوین ستون‌ها) */
.wc-modern-table thead th {
    text-align: right;
    padding: 0 30px 10px;
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
}

/* --- استایل ردیف‌های عنوان فاز --- */
.phase-row td {
    padding: 40px 0 15px;
    border: none;
    text-align: right;
    background: transparent;
}

.phase-header-content {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

/* خط خاکستری بعد از عنوان فاز */
.phase-header-content::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, #cbd5e1, transparent);
    margin-right: 15px;
}

.phase-title-text {
    font-size: 1.4rem;
    font-weight: 900;
    color: #1e293b;
    background: linear-gradient(90deg, #1e293b, #475569);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* بج رنگی (فاز ۱ و...) */
.phase-badge {
    background: #4f46e5;
    color: #fff;
    padding: 8px 18px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 800;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
    position: relative;
    overflow: hidden;
}

/* افکت براق روی بج */
.phase-badge::before {
    content: '';
    position: absolute;
    top: 0; left: -50%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    animation: badgeShine 3s infinite;
}

@keyframes badgeShine {
    0% { left: -50%; }
    100% { left: 150%; }
}

/* رنگ‌بندی بج‌ها */
.phase-badge.p2 { background: linear-gradient(135deg, #00d2d3, #00b8b9); box-shadow: 0 4px 15px rgba(0, 210, 211, 0.3); }
.phase-badge.p3 { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); }
.phase-badge.p4 { background: linear-gradient(135deg, #ec4899, #db2777); box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3); }
.phase-badge.p5 { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); }

/* --- استایل ردیف‌های محتوا (کارت‌ها) --- */
.data-row td {
    background: #fff;
    padding: 25px 30px;
    border: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    text-align: right; /* محتوای داخل جدول راست چین باشد */
    transition: all 0.3s ease;
}

/* گوشه گرد سمت راست */
.data-row td:first-child {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    border-left: none;
    width: 30%;
    font-weight: 700;
    color: #1e293b;
    font-size: 1.05rem;
}

/* گوشه گرد سمت چپ */
.data-row td:last-child {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
    border-right: none;
    width: 70%;
    line-height: 1.8;
}

/* هاور روی ردیف */
.data-row:hover td {
    border-color: #cbd5e1;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transform: translateY(-3px);
}

/* آیکون چک مارک */
.icon-check {
    color: #4f46e5;
    margin-left: 10px;
    font-size: 1.1rem;
    vertical-align: middle;
}
.data-row:hover .icon-check {
    color: #00d2d3;
    transform: scale(1.1);
}

/* استایل لیست‌ها */
.col-details ul {
    margin: 0;
    padding-right: 20px;
    list-style-type: disc;
}
.col-details li {
    margin-bottom: 5px;
    color: #64748b;
}

/* --- ریسپانسیو (موبایل) --- */
@media (max-width: 768px) {
    .wc-modern-table { display: block; }
    .wc-modern-table thead { display: none; } /* حذف هدر در موبایل */
    .wc-modern-table tbody { display: block; width: 100%; }
    
    .phase-row td { display: block; width: 100%; padding: 30px 0 15px; }
    .phase-header-content::after { display: none; } /* حذف خط در موبایل */
    
    .data-row {
        display: flex;
        flex-direction: column;
        margin-bottom: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
        border-radius: 15px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
    }
    
    .data-row td {
        display: block;
        width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 15px 20px !important;
        text-align: right;
    }
    
    /* عنوان خدمت در موبایل */
    .data-row td:first-child {
        background: #f8fafc;
        border-bottom: 1px solid #eee !important;
    }
}


/* =========================================
   MODERN CORPORATE CTA SECTION
   ========================================= */

.corp-cta-modern {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    color: #fff;
}

/* پس‌زمینه و اوورلی */
.cta-bg-image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    filter: blur(2px); /* کمی تاری برای تمرکز روی محتوا */
}

.cta-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* گرادینت سرمه‌ای شرکتی */
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    z-index: 1;
}

.cta-box-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: rgba(255, 255, 255, 0.05); /* شیشه‌ای خیلی محو */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

/* --- ستون اطلاعات (راست) --- */
.cta-info-col {
    flex: 1.5;
    padding: 60px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.sub-title {
    color: #fca311; /* رنگ طلایی */
    font-size: 0.9rem;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.cta-header h3 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.4;
}

.cta-desc {
    color: #cbd5e1;
    font-size: 1.1rem;
    margin-bottom: 40px;
    line-height: 1.8;
    max-width: 600px;
}

/* آیتم‌های تماس */
.cta-contact-details {
    display: flex;
    gap: 40px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.icon-box {
    width: 50px; height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    color: #fca311;
}

.text-box span {
    display: block;
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 5px;
}

.text-box a {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: 0.3s;
}

.text-box a:hover { color: #fca311; }

/* --- ستون اکشن (چپ - دکمه) --- */
.cta-action-col {
    flex: 1;
    padding: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2); /* کمی تیره‌تر */
    position: relative;
}

.action-card {
    text-align: center;
    width: 100%;
}

.big-icon {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 20px;
}

.action-card h4 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.action-card p {
    color: #94a3b8;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

/* دکمه اصلی طلایی */
.btn-gold-glare {
    display: inline-block;
    background: linear-gradient(135deg, #fca311, #e69102);
    color: #0f172a; /* متن تیره روی دکمه طلایی */
    padding: 18px 35px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(252, 163, 17, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 300px;
}

/* افکت براق رد شونده روی دکمه */
.btn-gold-glare::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: 0.5s;
    transform: skewX(-20deg);
}

.btn-gold-glare:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(252, 163, 17, 0.4);
}

.btn-gold-glare:hover::before {
    left: 100%;
}

.security-note {
    display: block;
    margin-top: 20px;
    font-size: 0.8rem;
    color: #64748b;
    opacity: 0.8;
}

/* ریسپانسیو */
@media (max-width: 991px) {
    .cta-box-wrapper { flex-direction: column; }
    .cta-info-col { border-left: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 40px 30px; }
    .cta-action-col { padding: 40px 30px; }
    .cta-contact-details { flex-direction: column; gap: 20px; }
}



/* =========================================
   PROJECT WIZARD MODAL (Multi-Step)
   ========================================= */

.wc-modal-overlay {
    /* (کدهای قبلی overlay مودال حفظ شود) */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(8px);
    z-index: 9999; display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: 0.3s;
}
.wc-modal-overlay.is-visible { opacity: 1; visibility: visible; }

/* کانتینر اصلی ویزارد */
.wc-wizard-container {
    display: flex;
    width: 900px;
    max-width: 95%;
    min-height: 550px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    position: relative;
    transform: translateY(30px); transition: 0.4s;
}
.wc-modal-overlay.is-visible .wc-wizard-container { transform: translateY(0); }

/* --- سایدبار سمت راست --- */
.wizard-sidebar {
    width: 300px;
    background: #0f172a; /* سرمه‌ای */
    color: #fff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); /* پترن ریز */
}

.ws-logo { 
    display: flex; align-items: center; gap: 10px; font-size: 1.5rem; font-weight: bold; margin-bottom: 40px; color: #fca311; 
}
.ws-content h3 { font-size: 1.6rem; margin-bottom: 15px; }
.ws-content p { font-size: 0.9rem; color: #94a3b8; line-height: 1.6; margin-bottom: 40px; }

/* لیست مراحل در سایدبار */
.wizard-steps-list { list-style: none; padding: 0; }
.wizard-steps-list li {
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    color: #64748b;
    font-weight: bold;
    font-size: 0.95rem;
    transition: 0.3s;
    border-right: 3px solid transparent;
}
.wizard-steps-list li.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-right-color: #fca311;
}

/* --- بدنه اصلی فرم --- */
.wizard-main {
    flex: 1;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* هدر هر مرحله */
.step-header { margin-bottom: 30px; }
.step-header h4 { font-size: 1.4rem; color: #1e293b; margin-bottom: 5px; }
.step-header p { color: #64748b; font-size: 0.95rem; }

/* مخفی کردن مراحل غیرفعال */
.wizard-step { display: none; animation: fadeIn 0.5s; }
.wizard-step.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* گرید انتخاب خدمات (مرحله ۱) */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.service-card input { display: none; }
.card-inner {
    border: 2px solid #e2e8f0;
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    color: #64748b;
}
.card-inner i { font-size: 2rem; margin-bottom: 15px; display: block; }
.service-card input:checked + .card-inner {
    border-color: #4f46e5;
    background: rgba(79, 70, 229, 0.05);
    color: #4f46e5;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.15);
}

/* فرم‌های ورودی (مرحله ۲ و ۳) */
.form-row { display: flex; gap: 20px; }
.form-group { margin-bottom: 20px; width: 100%; }
.form-group.half { width: 50%; }

.form-group label { display: block; margin-bottom: 8px; font-weight: bold; font-size: 0.9rem; color: #334155; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 12px;
    border: 1px solid #cbd5e1; border-radius: 8px;
    font-family: inherit; transition: 0.3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: #4f46e5; outline: none;
}

/* دکمه‌های پایین */
.wizard-actions {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.wizard-actions button {
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
    border: none;
    transition: 0.3s;
}
.btn-prev { background: #f1f5f9; color: #64748b; }
.btn-prev:hover { background: #e2e8f0; }
.btn-prev:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-next { background: #4f46e5; color: #fff; }
.btn-next:hover { background: #4338ca; }

.btn-finish { background: #10b981; color: #fff; }
.btn-finish:hover { background: #059669; }

/* دکمه بستن مودال */
.wc-modal-close {
    position: absolute; top: 15px; left: 15px; /* سمت چپ چون فارسی هستیم */
    background: transparent; border: none; font-size: 2rem; color: #94a3b8; cursor: pointer; z-index: 10;
}
.wc-modal-close:hover { color: #ef4444; }

/* ریسپانسیو */
@media (max-width: 768px) {
    .wc-wizard-container { flex-direction: column; height: 100%; overflow-y: auto; border-radius: 0; }
    .wizard-sidebar { width: 100%; padding: 20px; flex-direction: row; align-items: center; }
    .wizard-sidebar p, .wizard-steps-list, .ws-footer { display: none; } /* ساده‌سازی در موبایل */
    .wizard-main { padding: 30px 20px; }
    .services-grid { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; gap: 0; }
    .form-group.half { width: 100%; }
}



/* =========================================
   MOBILE OPTIMIZED WIZARD (App-Like View)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. تبدیل کانتینر به تمام صفحه */
    .wc-modal-overlay {
        align-items: flex-end; /* در برخی مرورگرها کمک میکند */
        padding: 0; /* حذف فاصله از اطراف */
    }

    .wc-wizard-container {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important; /* حذف گوشه گرد */
        flex-direction: column;
        transform: none !important; /* حذف انیمیشن حرکت */
        display: flex;
    }

    /* 2. تبدیل سایدبار به یک هدر باریک */
    .wizard-sidebar {
        width: 100%;
        height: 70px; /* ارتفاع ثابت کم */
        padding: 0 20px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background-image: none; /* حذف پترن پس‌زمینه */
        flex-shrink: 0; /* جلوگیری از جمع شدن */
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        z-index: 10;
    }

    /* مخفی کردن المان‌های اضافی هدر در موبایل */
    .wizard-sidebar h3, 
    .wizard-sidebar p, 
    .wizard-steps-list, 
    .ws-footer {
        display: none !important;
    }

    /* استایل لوگو در هدر موبایل */
    .ws-logo {
        margin-bottom: 0;
        font-size: 1.2rem;
    }

    /* دکمه ضربدر (بستن) را به داخل هدر سرمه‌ای می‌آوریم */
    .wc-modal-close {
        position: relative;
        top: auto; left: auto;
        color: #fff;
        font-size: 1.8rem;
    }

    /* 3. بدنه اصلی فرم (اسکرول خور) */
    .wizard-main {
        padding: 20px 20px 80px 20px; /* پدینگ پایین زیاد برای دکمه‌ها */
        overflow-y: auto; /* اسکرول شدن محتوا */
        flex: 1; /* پر کردن فضای باقی‌مانده */
    }

    /* هدر مراحل (متن "چه خدماتی نیاز دارید") */
    .step-header {
        margin-bottom: 20px;
        text-align: center;
    }
    .step-header h4 { font-size: 1.2rem; }

    /* کارت‌های خدمات (زیر هم) */
    .services-grid {
        grid-template-columns: 1fr; /* تک ستونه */
        gap: 15px;
    }
    .card-inner {
        padding: 15px; /* کمی کوچکتر */
        display: flex;
        align-items: center;
        gap: 15px;
        text-align: right; /* متن راست‌چین */
    }
    .card-inner i {
        margin-bottom: 0;
        font-size: 1.5rem;
    }

    /* اینپوت‌ها */
    .form-row { flex-direction: column; gap: 0; }
    .form-group.half { width: 100%; }

    /* 4. دکمه‌های پایین (چسبان) */
    .wizard-actions {
        position: fixed;
        bottom: 0; left: 0; width: 100%;
        background: #fff;
        padding: 15px 20px;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
        z-index: 20;
        border-top: 1px solid #eee;
    }

    /* دکمه‌ها تمام عرض */
    .wizard-actions button {
        flex: 1; /* پر کردن فضا */
        display: flex; justify-content: center; align-items: center;
    }
    /* فاصله کوچک بین دکمه‌ها */
    .wizard-actions { gap: 10px; }
}


/* =========================================
   FIX FINAL: MOBILE HEADER & MODERN SELECT
   ========================================= */

/* استایل مدرن برای سلکت باکس‌ها (در تمام سایزها) */
.form-group select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important; /* حذف استایل پیش‌فرض */
    
    background-color: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 20px;
    padding-left: 45px !important; /* جا برای فلش سمت چپ */
    font-size: 1rem;
    font-family: inherit;
    color: #334155;
    width: 100%;
    cursor: pointer;
    
    /* فلش بنفش مدرن */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: left 15px center !important; /* فلش سمت چپ */
    background-size: 20px !important;
}

.form-group select:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
    outline: none;
}

/* --- تنظیمات مخصوص موبایل --- */
@media (max-width: 768px) {
    
    /* تمام صفحه کردن */
    .wc-modal-overlay { padding: 0 !important; align-items: flex-end !important; }
    .wc-wizard-container { 
        width: 100% !important; height: 100% !important; border-radius: 0 !important; 
        display: flex; flex-direction: column; 
    }

    /* هدر موبایل (سرمه‌ای) */
    .wizard-sidebar {
        width: 100%;
        height: 65px; /* ارتفاع ثابت */
        padding: 0 15px;
        background: #0f172a; /* رنگ پس‌زمینه هدر */
        display: flex;
        flex-direction: row-reverse; /* معکوس کردن چیدمان برای هدر */
        align-items: center;
        justify-content: space-between; /* لوگو راست، ضربدر چپ */
        flex-shrink: 0;
        z-index: 50;
    }

    /* تنظیم لوگو (سمت راست) */
    .ws-logo {
        margin: 0;
        color: #fff;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .ws-logo span { color: #fca311; } /* طلایی شدن متن */

    /* تنظیم دکمه ضربدر (سمت چپ) */
    .wc-modal-close {
        position: static !important; /* از حالت شناور خارج شود */
        background: rgba(255,255,255,0.1); /* پس زمینه شیشه‌ای */
        color: #fff !important;
        width: 35px; height: 35px;
        border-radius: 8px;
        font-size: 1.5rem !important;
        display: flex !important; align-items: center; justify-content: center;
        border: none;
        cursor: pointer;
    }

    /* مخفی کردن المان‌های دسکتاپ */
    .wizard-sidebar h3, .wizard-sidebar p, .wizard-steps-list, .ws-footer { display: none !important; }

    /* اسکرول بدنه */
    .wizard-main {
        flex: 1; overflow-y: auto; padding: 20px 20px 90px 20px;
    }

    /* دکمه‌های پایین (چسبان) */
    .wizard-actions {
        position: fixed; bottom: 0; left: 0; width: 100%;
        background: #fff; padding: 15px;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
        border-top: 1px solid #eee;
        display: flex; gap: 10px; z-index: 100;
    }
    .wizard-actions button { flex: 1; margin: 0; }
    
    /* چیدمان فرم‌ها در موبایل */
    .form-row { flex-direction: column; }
    .form-group.half { width: 100%; }
    .services-grid { grid-template-columns: 1fr; }
    .card-inner { padding: 15px; flex-direction: row; align-items: center; justify-content: flex-start; text-align: right; }
    .card-inner i { margin: 0 0 0 15px; font-size: 1.4rem; }
}


/* =========================================
   CUSTOM SELECT BOX (Like Digikala/Modern)
   ========================================= */

/* مخفی کردن سلکت اصلی */
.wc-custom-select-hidden {
    display: none !important;
}

/* کانتینر اصلی */
.wc-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
    font-family: inherit;
}

/* دکمه اصلی (تریگر) */
.wc-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 15px;
    font-size: 1rem;
    color: #334155;
    cursor: pointer;
    transition: all 0.3s;
    height: 50px; /* ارتفاع ثابت */
}

.wc-select-trigger:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

/* وقتی باز است */
.wc-select-wrapper.open .wc-select-trigger {
    border-color: #4f46e5;
    border-bottom-left-radius: 0; /* چسبیدن به لیست */
    border-bottom-right-radius: 0;
}

/* فلش سمت چپ */
.wc-select-trigger::after {
    content: '';
    width: 10px; height: 10px;
    border-left: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(-45deg);
    margin-right: 10px;
    transition: 0.3s;
}
.wc-select-wrapper.open .wc-select-trigger::after {
    transform: rotate(135deg); /* چرخش فلش */
    border-color: #4f46e5;
}

/* لیست گزینه‌ها (که باز می‌شود) */
.wc-select-options {
    position: absolute;
    top: 100%; right: 0; left: 0;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* حالت باز شدن لیست */
.wc-select-wrapper.open .wc-select-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
    border-color: #4f46e5;
}

/* آیتم‌های داخل لیست */
.wc-option {
    padding: 12px 15px;
    cursor: pointer;
    transition: 0.2s;
    color: #475569;
    border-right: 3px solid transparent; /* خط رنگی سمت راست */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wc-option:hover {
    background-color: #f1f5f9;
    color: #1e293b;
    padding-right: 20px; /* حرکت جزئی */
}

/* آیتم انتخاب شده */
.wc-option.selected {
    background-color: #eff6ff; /* آبی خیلی کمرنگ */
    color: #4f46e5;
    font-weight: bold;
    border-right-color: #4f46e5; /* خط رنگی فعال */
}

/* اسکرول بار زیبا برای لیست */
.wc-select-options::-webkit-scrollbar { width: 6px; }
.wc-select-options::-webkit-scrollbar-track { background: #f1f5f9; }
.wc-select-options::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }



/* =========================================
   MOBILE RESPONSIVE FIXES (MASTER PACK)
   ========================================= */

@media (max-width: 991px) {
    
    /* 1. جلوگیری از اسکرول افقی مزاحم */
    body, html {
        overflow-x: hidden !important;
    }
    .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 2. اصلاح سایز تیترها (خیلی بزرگ نباشند) */
    h1 { font-size: 1.8rem !important; line-height: 1.4 !important; }
    h2 { font-size: 1.5rem !important; }
    .sec-header h2 { font-size: 1.4rem !important; margin-bottom: 10px !important; }
    .sec-header p { font-size: 0.95rem !important; padding: 0 10px; }

    /* 3. اصلاح سکشن "صنایع مادر" (Industries) */
    .ind-grid {
        display: grid;
        grid-template-columns: 1fr !important; /* تک ستونه شدن */
        gap: 20px !important;
        margin-top: 30px !important;
    }
    
    .ind-card {
        height: 350px !important; /* ارتفاع کمتر برای موبایل */
    }
    
    .ind-content {
        justify-content: flex-end !important; /* متن همیشه پایین باشد */
        padding: 20px !important;
    }
    .ind-content h3 { font-size: 1.3rem !important; }

    /* 4. اصلاح سکشن "رودمپ" (Roadmap) */
    .corp-roadmap { padding: 50px 0 !important; }
    
    .roadmap-wrapper {
        flex-direction: column !important; /* عمودی شدن مراحل */
        gap: 0 !important;
    }
    
    /* خط افقی دسکتاپ حذف شود */
    .roadmap-wrapper::before { display: none !important; }
    
    .roadmap-step {
        width: 100% !important;
        flex-direction: row !important; /* دایره کنار متن */
        align-items: flex-start !important;
        text-align: right !important;
        margin-bottom: 0 !important;
        padding-bottom: 40px !important;
    }
    
    /* خط اتصال عمودی */
    .roadmap-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 60px; right: 45px; /* تنظیم دقیق وسط دایره */
        bottom: 0; width: 2px;
        background: #e2e8f0;
    }
    
    .step-number {
        min-width: 80px !important; width: 80px !important; height: 80px !important;
        font-size: 1.5rem !important; margin: 0 0 0 15px !important;
    }
    
    .step-content h4 { 
        margin-top: 10px !important; 
        justify-content: flex-start !important; 
        font-size: 1.1rem !important;
    }

    /* 5. اصلاح سکشن "CTA / درخواست مشاوره" */
    .corp-cta-modern { padding: 60px 0 !important; }
    
    .cta-box-wrapper {
        flex-direction: column !important; /* ستون‌ها زیر هم */
        text-align: center !important;
    }
    
    .cta-info-col, .cta-action-col {
        width: 100% !important;
        border: none !important;
        padding: 30px 20px !important;
    }
    
    .cta-info-col {
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    .cta-contact-details {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important; /* وسط‌چین کردن اطلاعات تماس */
    }
    
    /* 6. اصلاح جدول قیمت‌ها (اگر در صفحه هست) */
    .pricing-wrapper {
        flex-direction: column !important;
    }
    .pricing-card {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    /* 7. فاصله دکمه‌ها و عناصر */
    .btn-gold-glare, .btn-corp-primary {
        width: 100% !important; /* دکمه‌ها تمام عرض */
        max-width: 100% !important;
    }
}


/* =========================================
   ULTRA MODERN GLASS MODAL
   ========================================= */

/* پس‌زمینه اصلی تاریک و بلوری */
.wc-modal-overlay {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(15px); /* بلور قوی پشت */
    z-index: 9999;
}

/* کانتینر شیشه‌ای اصلی */
.wc-glass-container {
    width: 900px;
    max-width: 95%;
    min-height: 500px;
    background: #fff;
    border-radius: 30px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    transform: scale(0.9);
    opacity: 0;
    transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* انیمیشن فنری */
}

.wc-modal-overlay.is-visible .wc-glass-container {
    transform: scale(1);
    opacity: 1;
}

/* --- دکمه بستن شناور --- */
.wc-modal-close-floating {
    position: absolute;
    top: 20px; left: 20px;
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 100;
    color: #0f172a;
    transition: 0.3s;
    display: flex; align-items: center; justify-content: center;
}
.wc-modal-close-floating:hover { background: #ef4444; color: #fff; transform: rotate(90deg); }


/* --- سایدبار گرافیکی (سمت راست) --- */
.glass-sidebar {
    width: 35%;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    color: #fff;
    overflow: hidden;
}

/* افکت نورانی پشت سایدبار */
.sidebar-bg-glow {
    position: absolute;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(79,70,229,0.4) 0%, transparent 70%);
    top: -50px; right: -50px;
    border-radius: 50%;
    animation: pulseGlow 5s infinite alternate;
}
@keyframes pulseGlow { from { transform: scale(1); opacity: 0.5; } to { transform: scale(1.2); opacity: 0.8; } }

.sidebar-content { position: relative; z-index: 2; text-align: center; }

.sidebar-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    color: #fca311;
    text-shadow: 0 0 20px rgba(252, 163, 17, 0.5);
    transition: 0.5s;
    display: inline-block;
}

.sidebar-text-box h3 { font-size: 1.6rem; font-weight: 900; margin-bottom: 10px; }
.sidebar-text-box p { font-size: 0.95rem; color: #94a3b8; line-height: 1.6; }

/* نقاط پیشرفت */
.sidebar-step-indicator {
    display: flex; gap: 8px; justify-content: center; margin-bottom: 30px;
}
.step-dot {
    width: 10px; height: 10px; background: rgba(255,255,255,0.2); border-radius: 50%; transition: 0.3s;
}
.step-dot.active { background: #fca311; box-shadow: 0 0 10px #fca311; transform: scale(1.3); }


/* --- بخش اصلی فرم (سمت چپ) --- */
.glass-main {
    flex: 1;
    padding: 40px 50px;
    display: flex; flex-direction: column;
    background: #fff;
}

/* مخفی کردن تایتل موبایل در دسکتاپ */
.step-header-mobile { display: none; }

.wizard-step { display: none; animation: slideUpFade 0.5s forwards; }
.wizard-step.active { display: block; }

@keyframes slideUpFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }


/* --- کارت‌های سه بعدی خدمات (مرحله ۱) --- */
.services-3d-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.service-3d-card input { display: none; }
.service-3d-card .card-content {
    border: 2px solid #f1f5f9;
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: #fff;
    position: relative;
    overflow: hidden;
}
.service-3d-card .icon-glow {
    font-size: 2rem; color: #64748b; margin-bottom: 10px; transition: 0.3s;
}
.service-3d-card span { font-weight: bold; color: #334155; display: block; }

/* حالت انتخاب شده */
.service-3d-card input:checked + .card-content {
    border-color: #4f46e5;
    box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.3);
    transform: translateY(-5px);
}
.service-3d-card input:checked + .card-content .icon-glow {
    color: #4f46e5; transform: scale(1.1);
    text-shadow: 0 0 15px rgba(79, 70, 229, 0.4);
}


/* --- اینپوت‌های نئونی (مرحله ۲ و ۳) --- */
.neon-input-group { margin-bottom: 20px; position: relative; }
.neon-input-group.full { width: 100%; }
.neon-input-group label { display: block; font-size: 0.9rem; font-weight: bold; margin-bottom: 8px; color: #1e293b; }

.neon-input-group input, 
.neon-input-group select, 
.neon-input-group textarea {
    width: 100%;
    padding: 15px 20px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 15px;
    font-size: 1rem;
    transition: 0.3s;
    font-family: inherit;
}
/* آیکون داخل اینپوت */
.input-icon {
    position: absolute; top: 18px; right: 15px; color: #94a3b8; z-index: 2;
}
.neon-input-group input[type="text"], 
.neon-input-group input[type="tel"] { padding-right: 45px; } /* جا برای آیکون */

/* فوکوس روی اینپوت */
.neon-input-group input:focus, 
.neon-input-group select:focus, 
.neon-input-group textarea:focus {
    border-color: #4f46e5;
    background: #fff;
    box-shadow: 0 0 0 5px rgba(79, 70, 229, 0.1);
    outline: none;
}


/* --- اکشن بار پایین --- */
.glass-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
}

.step-counter { color: #94a3b8; font-size: 0.9rem; font-weight: bold; }

.btn-glass-prev {
    width: 45px; height: 45px;
    border-radius: 12px; border: 2px solid #e2e8f0;
    background: transparent; color: #64748b;
    cursor: pointer; transition: 0.3s;
}
.btn-glass-prev:hover:not(:disabled) { border-color: #4f46e5; color: #4f46e5; }
.btn-glass-prev:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-neon-next, .btn-neon-finish {
    padding: 12px 30px;
    border-radius: 12px; border: none;
    font-weight: bold; font-size: 1rem;
    cursor: pointer; display: flex; align-items: center; gap: 10px;
    transition: 0.3s;
}

.btn-neon-next {
    background: #1e293b; color: #fff;
    box-shadow: 0 5px 15px rgba(30, 41, 59, 0.2);
}
.btn-neon-next:hover { transform: translateY(-2px); background: #0f172a; }

.btn-neon-finish {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    color: #fff;
    box-shadow: 0 5px 20px rgba(79, 70, 229, 0.4);
}
.btn-neon-finish:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(79, 70, 229, 0.6); }


/* =========================================
   MOBILE RESPONSIVE (APP STYLE)
   ========================================= */
@media (max-width: 768px) {
    .wc-glass-container {
        flex-direction: column;
        width: 100% !important; height: 100% !important; max-width: 100%;
        border-radius: 0;
        background: #f8fafc; /* پس‌زمینه روشن کلی */
    }

    /* حذف سایدبار گرافیکی و تبدیل به نوار وضعیت بالا */
    .glass-sidebar {
        width: 100%; height: 70px;
        flex-direction: row; align-items: center; justify-content: space-between;
        padding: 0 20px;
        order: -1;
        background: #0f172a;
    }
    .sidebar-bg-glow, .sidebar-text-box, .sidebar-icon { display: none; } /* حذف اضافات */
    
    /* نمایش نقاط پیشرفت در هدر موبایل */
    .sidebar-step-indicator { margin: 0 auto; }
    
    /* دکمه بستن در هدر موبایل */
    .wc-modal-close-floating {
        position: static;
        width: 35px; height: 35px;
        background: rgba(255,255,255,0.1); color: #fff;
        border-radius: 10px;
        margin-right: auto; /* سمت چپ */
    }

    /* بدنه اصلی */
    .glass-main {
        padding: 20px 20px 100px 20px; /* فضای خالی پایین برای دکمه‌ها */
        overflow-y: auto;
        background: transparent;
    }

    /* تایتل مراحل در موبایل */
    .step-header-mobile {
        display: block; text-align: center; margin-bottom: 25px;
    }
    .step-header-mobile h4 { font-size: 1.4rem; font-weight: 800; color: #1e293b; }

    /* کارت‌ها در موبایل */
    .services-3d-grid { grid-template-columns: 1fr; gap: 15px; }
    .service-3d-card .card-content {
        padding: 15px; display: flex; align-items: center; text-align: right; gap: 15px;
        background: #fff; border: 1px solid #e2e8f0;
    }
    .service-3d-card .icon-glow { margin: 0; font-size: 1.5rem; }

    /* دکمه‌های پایین چسبان */
    .glass-actions {
        position: fixed; bottom: 0; left: 0; width: 100%;
        background: #fff; padding: 15px 20px;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
        z-index: 50; border-top: 1px solid #e2e8f0;
    }
    .step-counter { display: none; } /* در موبایل شمارنده لازم نیست */
    .glass-actions button { flex: 1; justify-content: center; }
    .btn-glass-prev { margin-left: 10px; width: 50px; }
}




/* =========================================
   MOBILE MASTER FIX (ALL IN ONE)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. اصلاح هیرو و فاصله بالا */
   
    .corp-hero {
        padding-top: 10px !important;
        padding-bottom: 30px !important;
    }
    .corp-hero .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
    }

    /* 2. دکمه‌های هیرو */
    .corp-hero-actions, .btn-wrapper {
        display: flex; flex-direction: column; gap: 10px !important; width: 100%;
    }
    .btn-gold-glare, .btn-corp-primary, a.button {
        width: 100% !important; margin: 0 !important;
        padding: 12px !important; height: auto !important;
    }

    /* 3. لوگوهای تکنولوژی (جلوگیری از بیرون زدگی) */
    .tech-stack-grid, .logo-grid, .partners-carousel {
        display: flex; flex-wrap: wrap !important; /* حیاتی */
        justify-content: center; gap: 20px !important;
        padding: 20px !important;
    }
    .tech-stack-grid img, .logo-grid img {
        max-width: 70px !important; height: auto !important;
    }

    /* 4. وسط‌چین کردن باکس‌های قیمت */
    .pricing-wrapper, .pricing-grid {
        display: flex !important; flex-direction: column !important;
        align-items: center !important;
    }
    .pricing-card, .price-box {
        margin-left: auto !important; margin-right: auto !important;
        width: 100% !important; max-width: 380px !important;
    }

    /* 5. لیست استانداردها (فاصله متن‌ها) */
    .corp-standards-grid, .tech-features-list {
        display: flex !important; flex-direction: column !important; gap: 15px !important;
    }
    .standard-item, .tech-feature-box {
        display: flex !important; align-items: center !important;
        text-align: right !important; width: 100% !important;
        padding: 10px !important; height: auto !important;
    }
    .standard-item i, .tech-feature-box i {
        margin-left: 10px !important; font-size: 1.2rem !important;
    }
}

/* =========================================
   MOBILE & TABLET OPTIMIZATION (WebCando Main)
   ========================================= */

@media (max-width: 991px) {
    
    /* --- 1. تنظیمات کلی و کانتینرها --- */
    body, html { overflow-x: hidden !important; }
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
    }
    
    /* تایپوگرافی موبایل */
    h1 { font-size: 1.8rem !important; line-height: 1.4 !important; }
    h2 { font-size: 1.5rem !important; margin-bottom: 15px !important; }
    p { font-size: 0.95rem !important; line-height: 1.7 !important; text-align: justify !important; }

    /* --- 2. هیرو سکشن (بالای صفحه) --- */
    .hero-container {
        flex-direction: column-reverse !important; /* متن بالا، عکس پایین (یا برعکس بسته به سلیقه) */
        text-align: center !important;
        padding-top: 20px !important;
        padding-bottom: 60px !important;
        gap: 40px !important;
    }
    
    /* متن هیرو */
    .hero-text-content {
        align-items: center !important; /* وسط‌چین کردن المان‌های فلکس */
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* دکمه‌های هیرو */
    .hero-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important;
    }
    .btn-primary-xl, .btn-outline-xl {
        width: 100% !important;
        justify-content: center !important;
    }

    /* آمار اعتماد (Trust Metrics) */
    .trust-metrics {
        justify-content: center !important;
        margin-top: 30px !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }
    .tm-divider { display: none !important; } /* خط‌های جداکننده حذف شوند */
    .tm-item {
        background: rgba(255,255,255,0.5);
        padding: 10px 20px;
        border-radius: 10px;
        min-width: 100px;
    }

    /* عکس هیرو */
    .hero-visual-light {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    .hero-img-anim { max-width: 80% !important; margin: 0 auto !important; display: block !important; }
    .float-card { display: none !important; } /* کارت‌های شناور ریز در موبایل مخفی شوند تا شلوغ نشود */


    /* --- 3. ویزارد (مشاور هوشمند) --- */
    .wizard-glass-box {
        flex-direction: column !important;
        padding: 25px 20px !important;
        height: auto !important;
    }
    
    .wizard-header-side {
        border-right: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
        padding-bottom: 20px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: right !important; /* یا center */
    }
    
    .wizard-form-inline {
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }
    
    .wiz-input-wrapper {
        width: 100% !important;
    }
    
    /* سلکت باکس‌ها */
    .custom-select { width: 100% !important; min-width: 100% !important; }
    
    .wiz-connector-text { display: none !important; } /* متن "هستم و هدفم" حذف شود */
    
    .btn-wiz-action {
        width: 100% !important;
        margin-top: 10px !important;
    }


    /* --- 4. گریدها (خدمات، مزایا، نمونه‌کار) --- */
    .benefits-grid, 
    .pro-srv-grid, 
    .pf-grid-light, 
    .stories-grid, 
    .team-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* تک ستونه */
        gap: 20px !important;
    }

    /* کارت‌های عریض مزایا */
    .ben-card.wide-card {
        grid-column: span 1 !important; /* از حالت عریض خارج شود */
        flex-direction: column !important;
        text-align: center !important;
    }
    .ben-text-wide { text-align: center !important; }

    /* --- 5. خدمات تخصصی (Pro Services) --- */
    .ps-card {
        padding: 20px !important;
        align-items: flex-start !important;
    }
    .ps-card.full-span { grid-column: auto !important; }


    /* --- 6. چرا ما (تب‌ها و انیمیشن) --- */
    .why-tab-wrapper {
        flex-direction: column !important;
        gap: 30px !important;
    }
    .why-tabs-list { width: 100% !important; order: 2; }
    .why-visual-display { 
        width: 100% !important; 
        order: 1; 
        height: 300px !important; /* ارتفاع فیکس برای بخش انیمیشن */
        margin-bottom: 20px;
    }
    .scene { transform: scale(0.8); } /* کوچک کردن انیمیشن */


    /* --- 7. سئو سکشن (SEO) --- */
    .growth-container {
        flex-direction: column !important;
        gap: 40px !important;
    }
    .growth-text-col, .growth-visual-col {
        width: 100% !important;
        padding: 0 !important;
    }
    .iso-browser-mockup {
        width: 100% !important;
        max-width: 100% !important;
        transform: scale(0.95);
    }


    /* --- 8. تایم‌لاین (Process) --- */
    .timeline-wrapper {
        padding-right: 0 !important;
        margin-top: 30px !important;
    }
    .timeline-track, .timeline-progress-bar {
        right: 20px !important; /* خط به سمت راست بیاید */
        left: auto !important;
        transform: none !important;
    }
    .tl-item {
        width: 100% !important;
        padding-right: 60px !important; /* جا برای دایره */
        padding-left: 0 !important;
        margin-bottom: 30px !important;
        text-align: right !important;
    }
    .tl-item:nth-child(even) {
        margin-top: 0 !important; /* حذف حالت زیگزاگ */
        align-self: flex-start !important;
    }
    .tl-dot {
        right: 0 !important;
        left: auto !important;
        top: 0 !important;
    }


    /* --- 9. سوالات متداول (FAQ) --- */
    .faq-container { width: 100% !important; }
    .faq-card { padding: 15px !important; }
    .faq-head h3 { font-size: 1rem !important; }


    /* --- 10. CTA (مشاوره پایین صفحه) --- */
    .cta-card-light {
        flex-direction: column !important;
        text-align: center !important;
        padding: 30px 20px !important;
    }
    .cta-text {
        width: 100% !important;
        margin-bottom: 20px !important;
        padding-right: 0 !important;
    }
    .cta-form-inline {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .cta-form-inline input {
        width: 100% !important;
        border-radius: 10px !important;
    }
    .cta-form-inline button {
        width: 100% !important;
        border-radius: 10px !important;
        margin: 0 !important;
    }


    /* --- 11. مودال ویزارد (نتیجه) --- */
    .wiz-modal-box {
        width: 95% !important;
        margin: 10px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    .wiz-stats-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .wiz-footer {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .btn-wiz-final, .btn-wiz-call { width: 100% !important; text-align: center; }
}

/* اصلاحات مخصوص تبلت (Landscape) */
@media (min-width: 768px) and (max-width: 991px) {
    .pro-srv-grid, .benefits-grid, .pf-grid-light {
        grid-template-columns: 1fr 1fr !important; /* دو ستونه در تبلت */
    }
}


/* =========================================
   BEFORE & AFTER SLIDER (FIXED)
   ========================================= */

.img-comp-container {
    position: relative;
    height: 400px; /* ارتفاع دلخواه */
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    /* جلوگیری از انتخاب متن هنگام کشیدن */
    user-select: none;
    -webkit-user-select: none;
}

.img-comp-img {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
}

/* استایل عکس‌ها */
.img-comp-img img {
    display: block;
    height: 100% !important;
    width: 100% !important; /* در JS بازنویسی می‌شود اما اینجا محض احتیاط */
    object-fit: cover !important; /* حیاتی: پر کردن فضا بدون دفرمه شدن */
    max-width: none !important; /* حیاتی: جلوگیری از محدودیت قالب */
    vertical-align: middle;
}

/* دکمه اسلایدر */
.img-comp-slider {
    position: absolute;
    z-index: 9;
    cursor: ew-resize; /* نشانگر موس چپ و راست */
    width: 45px;
    height: 45px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    /* مرکز کردن دقیق */
    transform: translate(-50%, -50%);
}

/* آیکون فلش داخل دکمه */
.img-comp-slider i {
    color: #4f46e5;
    font-size: 18px;
}


.cl-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.cl-faq-item.active .cl-faq-a {
    /* ارتفاع توسط جاوااسکریپت ست می‌شود، اما این کلاس برای اطمینان است */
    transition: max-height 0.5s ease-in;
}

.cl-faq-q i {
    transition: transform 0.3s ease;
}