/* ============================================================
   HERO SLIDER  —  chengyangchemical.com style, RTL mirrored
   (Swiper, fade, autoplay; content right-aligned on desktop,
   centered on mobile; pagination bottom-right, arrows bottom-left)
   ============================================================ */

.hero-slider{
  position:relative;
  overflow:hidden;
  background:var(--sepka-navy-deep);
}

.hero-swiper{
  position:relative;
  width:100%;
  height:640px;
  height:clamp(600px, 100vh, 940px);
  height:clamp(600px, 100svh, 940px);
}
.hero-swiper .swiper-wrapper{ height:100%; }

.hero-slide{
  position:relative;
  display:flex;
  align-items:center;
  height:100%;
  padding-top:var(--sepka-header-h, 92px);
  background-color:var(--sepka-navy-deep);
  overflow:hidden;
}

/* لایهٔ تصویر پس‌زمینه — جدا از محتوا تا زوم آرام روی آن اجرا شود.
   زوم به‌صورت پیوسته و رفت‌وبرگشتی است؛ پس هنگام تعویض اسلاید هیچ پرشی ندارد. */
.hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--hero-bg);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1);
  transform-origin:center;
  will-change:transform;
  backface-visibility:hidden;
}
/* زوم‌این: تصویر از «دور» شروع می‌شود و آرام «نزدیک» می‌آید (هنگام لود و در هر اسلایدِ فعال) */
.hero-swiper.swiper-initialized .swiper-slide-active::before,
.hero-swiper.swiper-initialized .swiper-slide-prev::before,
.hero-slider .hero-swiper:not(.swiper-initialized) .hero-slide--n0::before{
  animation:heroZoom 9s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes heroZoom{
  from{ transform:scale(1.18); }
  to  { transform:scale(1); }
}

/* گذارِ نرم‌تر برای محو‌شدن بین اسلایدها */
.hero-swiper.swiper-fade .swiper-slide{
  transition-timing-function:cubic-bezier(.4,0,.2,1);
}

.hero-slide--defer:not(.is-ready)::before{ background-image:none; }
.hero-slide .container{ position:relative; z-index:2; }

.hero-slide__content{
  max-width:640px;
  margin-inline-start:0;
  margin-inline-end:auto;
  color:#fff;
      text-shadow: 3px 0 10px rgb(0 0 0 / 80%);
}

.hero-slide__eyebrow{
  display:inline-block;
  margin-bottom:14px;
  font-size:18px;
  font-weight:600;
  color:#fff;
}

.hero-slide__title{
  margin:0 0 18px;
  font-size:clamp(30px, 4.4vw, 60px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.01em;
  color:#fff;
      text-shadow: 3px 0 10px rgb(0 0 0 / 80%);
}

.hero-slide__text{
  margin:0 0 32px;
  font-size:16px;
  line-height:1.9;
  color:rgba(255,255,255,.9);
  text-shadow: 3px 0 10px rgb(0 0 0 / 80%);
}

.hero-slide__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 38px;
  border-radius:999px;
  background:var(--sepka-teal);
  color:#fff;
  font-size:15px;
  font-weight:700;
  transition:background .25s ease, transform .25s ease;
}
.hero-slide__btn:hover{
  background:var(--sepka-teal-dark);
  transform:translateY(-2px);
}
.hero-slide__btn svg{ width:16px; height:12px; }

/* ---- صفحه‌بندی (نقطه‌های نواری) — پایین سمت راست، هم‌تراز متن ---- */
.hero-swiper__pagination-wrap{
  position:absolute;
  z-index:5;
  right:0;
  left:0;
  bottom:56px;
  pointer-events:none;
}
.hero-slider .hero-swiper__pagination{
  position:static;
  display:flex;
  justify-content:flex-start; /* RTL: شروع = سمت راست، هم‌تراز متن */
  gap:8px;
  width:auto;
  margin:0;
  padding:0;
  transform:none;
}
.hero-slider .hero-swiper__pagination .swiper-pagination-bullet{
  pointer-events:auto;
  width:22px;
  height:4px;
  margin:0 !important;
  border-radius:2px;
  background:rgba(255,255,255,.4);
  opacity:1;
  transition:width .3s ease, background .3s ease;
}
.hero-slider .hero-swiper__pagination .swiper-pagination-bullet-active{
  width:40px;
  background:#fff;
}

/* ---- فلش‌های قبلی/بعدی — پایین سمت چپ (آینه‌ی مرجع) ---- */
.hero-swiper__nav{
  position:absolute;
  z-index:5;
  bottom:48px;
  inset-inline-end:40px; /* RTL: پایان = سمت چپ (آینه‌ی مرجع) */
  display:flex;
  gap:14px;
}
.hero-swiper__nav button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  padding:0;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:transparent;
  color:#fff;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease, opacity .25s ease;
}
.hero-swiper__nav button:hover{
  background:var(--sepka-teal);
  border-color:var(--sepka-teal);
}
.hero-swiper__nav button.swiper-button-disabled{
  opacity:.35;
  cursor:default;
}
.hero-swiper__nav svg{ width:9px; height:15px; }

/* ---- نشانگر «به پایین بروید» ---- */
.hero-scroll{
  position:absolute;
  z-index:5;
  bottom:34px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.8);
      text-shadow: 3px 0 10px rgb(0 0 0 / 80%);
}
.hero-scroll__mouse{
  width:22px;
  height:34px;
  border:2px solid rgba(255,255,255,.7);
  border-radius:12px;
  display:flex;
  justify-content:center;
  padding-top:6px;
}
.hero-scroll__mouse span{
  width:3px;
  height:7px;
  border-radius:3px;
  background:#fff;
  animation:hero-scroll-dot 1.6s ease-in-out infinite;
}
@keyframes hero-scroll-dot{
  0%,100%{ transform:translateY(0); opacity:1; }
  50%    { transform:translateY(7px); opacity:.3; }
}

/* ============ انیمیشن اسلایدر — روی بارگذاری و روی هر تعویض اسلاید ============
   - کل اسلایدر در بارگذاری اول نرم ظاهر می‌شود
   - زوم تصویر پیوسته است (بالاتر تعریف شده) پس هنگام تعویض پرشی ندارد
   - عنوان/متن/دکمهٔ اسلاید فعال نرم و کوتاه از پایین می‌آیند؛ هنگام خروج
     همراه با خودِ اسلاید محو می‌شوند (اسنپ/پرش ندارند).
   وابسته به JS نیست؛ در نبودِ Swiper همه‌چیز دیده می‌شود. */
.hero-swiper{
  animation:heroSwiperIn 1s ease .05s both;
}
@keyframes heroSwiperIn{
  from{ opacity:0; }
  to  { opacity:1; }
}

.hero-swiper.swiper-initialized .swiper-slide-active .hero-slide__content > *{
  animation:heroTextUp .85s cubic-bezier(.22,.61,.36,1) both;
}
.hero-swiper.swiper-initialized .swiper-slide-active .hero-slide__content > *:nth-child(1){ animation-delay:.12s; }
.hero-swiper.swiper-initialized .swiper-slide-active .hero-slide__content > *:nth-child(2){ animation-delay:.22s; }
.hero-swiper.swiper-initialized .swiper-slide-active .hero-slide__content > *:nth-child(3){ animation-delay:.32s; }
.hero-swiper.swiper-initialized .swiper-slide-active .hero-slide__content > *:nth-child(4){ animation-delay:.42s; }
@keyframes heroTextUp{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce){
  .hero-swiper,
  .hero-slide::before,
  .hero-swiper.swiper-initialized .swiper-slide-active .hero-slide__content > *{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}

/* ============ تبلت (≤ 991px) ============ */
@media (max-width:991px){
  .hero-swiper{ height:70vh; height:70svh; min-height:460px; }
  .hero-slide__title{ font-size:clamp(26px, 5vw, 40px); }
  .hero-slide__text{ font-size:15px; }
  .hero-swiper__nav{ display:none; }
  .hero-swiper__pagination-wrap{ bottom:34px; }
}

/* ============ موبایل (≤ 767px) ============ */
@media (max-width:767px){
  .hero-swiper{ height:62vh; height:62svh; min-height:420px; }
  .hero-slide{ padding-top:70px; }
  .hero-slide__content{
    max-width:none;
    margin-inline:auto;
    text-align:center;
  }
  .hero-slide__eyebrow,
  .hero-slide__text{ display:none; }
  .hero-slide__title{ margin-bottom:22px; }
  .hero-slide__btn{ padding:14px 32px; }
  .hero-swiper__pagination-wrap{ bottom:26px; }
  .hero-slider .hero-swiper__pagination{
    width:100%;
    justify-content:center;
  }
  .hero-scroll{ display:none; }
}


/* ============================================================
   APPLICATION FIELDS  —  chengyangchemical.com style
   یک تصویر پس‌زمینهٔ مشترک؛ هاور/کلیک روی هر ستون تصویر همان ستون را نشان می‌دهد
   ============================================================ */

.app-section{
  position:relative;
  isolation:isolate;
  background:#5e244b;
}

.app-section__head{
  position:absolute;
  top:0; left:0; right:0;
  z-index:5;
  padding-top:48px;
  pointer-events:none;
}
.app-section__eyebrow{
  display:block;
  margin-bottom:6px;
  font-size:50px;
  font-weight:600;
  letter-spacing:.02em;
  color:#fff;
}
.app-section__title{
  margin:0;
  font-size:clamp(28px, 4vw, 46px);
  font-weight:800;
  color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}

/* نوار ستون‌ها با تصویر پس‌زمینهٔ مشترک.
   بدون stacking-context مستقل تا ستونِ باز بتواند روی عنوان بخش بیاید. */
.app-strip{
  position:relative;
  display:flex;
  height:620px;
  background:#5e244b center center / cover no-repeat;
}
.app-strip__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(72,27,57,.55);
  pointer-events:none;
}

.app-panel{
  position:relative;
  z-index:2;
  flex:1 1 0%;
  min-width:0;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  cursor:pointer;
  transition:flex-grow .5s ease;
}
.app-panel + .app-panel{ box-shadow:inset 1px 0 0 rgba(255,255,255,.14); }

/* تصویر اختصاصی هر ستون (پیش‌فرض پنهان) */
.app-panel__img{
  position:absolute;
  inset:0;
  z-index:0;
  background:center center / cover no-repeat;
  opacity:0;
  transition:opacity .55s ease;
}
/* سایه برای خوانا ماندن متن */
.app-panel__shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top, rgba(57,22,45,.78) 0%, rgba(57,22,45,.15) 45%, rgba(57,22,45,0) 75%);
  opacity:0;
  transition:opacity .45s ease;
}

.app-panel__body{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
     padding: 30px 20px 74px 0;
  text-align:center;
}
.app-panel__title{
  font-size:20px;
  font-weight:700;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.app-panel__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:66px;
  height:66px;
  border:1.5px solid rgba(255,255,255,.55);
  border-radius:50%;
}
.app-panel__icon img{
  width:30px;
  height:30px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
.app-panel__icon svg{
  width:30px;
  height:30px;
  fill:#fff;
}
.app-panel__link{
  position:absolute;
  bottom:34px;
  opacity:0;
  transform:translateY(8px);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  color:#fff;
  white-space:nowrap;
  transition:opacity .3s ease, transform .3s ease;
}

/* حالت فعال (هاور یا کلیک) — z-index بالاتر از عنوان بخش تا تصویر روی متن بیفتد */
.app-panel:hover,
.app-panel.is-active{ flex-grow:1.4; z-index:6; }
.app-panel:hover .app-panel__img,
.app-panel.is-active .app-panel__img{ opacity:1; }
.app-panel:hover .app-panel__shade,
.app-panel.is-active .app-panel__shade{ opacity:1; }
.app-panel:hover .app-panel__link,
.app-panel.is-active .app-panel__link{ opacity:1; transform:none; }

@media (max-width:991px){
  .app-section__head{
    position:static;
    padding:40px 0 24px;
    text-align:center;
  }
  .app-section__title{ text-shadow:0 2px 12px rgba(0,0,0,.5); }

  .app-strip{ flex-wrap:wrap; height:auto; }
  .app-panel{
    flex:1 1 50%;
    min-height:280px;
  }
  .app-panel,
  .app-panel:hover,
  .app-panel.is-active{ flex-grow:0; }
  .app-panel__img{ opacity:0; }
  .app-panel.is-active .app-panel__img{ opacity:1; }
  .app-panel__shade{ opacity:1; }
  .app-panel__link{ opacity:1; transform:none; }
}
@media (max-width:767px){
  .app-strip{ flex-direction:column; flex-wrap:nowrap; }
  .app-panel{ flex:0 0 auto; width:100%; min-height:200px; }
  .app-panel + .app-panel{ box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
}
@media (max-width:991px){
.app-section__eyebrow {
  
    font-size: clamp(26px, 3.4vw, 40px);
}
}
/* ============================================================
   ABOUT + STATS
   ============================================================ */

.ab-section{
  position:relative;
  padding:92px 0;
  background:#fff center/cover no-repeat;
  overflow:hidden;
}
.ab-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.88);
}

.ab-marquee{
  position:absolute;
  top:36px;
  left:0;
  z-index:1;
  width:100%;
  overflow:hidden;
  pointer-events:none;
  white-space:nowrap;
}
.ab-marquee__track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:ab-marquee-scroll 90s linear infinite;
}
.ab-marquee__set{
  display:flex;
  flex:0 0 auto;
}
.ab-marquee__track span{
  display:inline-block;
  padding:0 24px;
  font-size:clamp(70px, 11vw, 170px);
  font-weight:800;
  line-height:1;
  color:var(--sepka-navy);
  opacity:.06;
  text-transform:uppercase;
  white-space:nowrap;
}
@keyframes ab-marquee-scroll{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}

.ab-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:52px 60px;
  align-items:start;
}
.ab-col{ min-width:0; }

.ab-eyebrow{
  display:block;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight:800;
  color:var(--sepka-teal);
}
.ab-eyebrow--sm{
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  margin-bottom:16px;
}
.ab-title{
      margin: 0px 0 20px;
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 800;
    line-height: 1.4;
    color: var(--sepka-navy);
    display: block;
}
.ab-title span{ color:var(--sepka-teal); }

.ab-gallery{ position:relative; }
.about-swiper{
  border-radius:16px;
  overflow:hidden;
}
.about-swiper .swiper-slide img{
  display:block;
  width:100%;
  height:420px;
  object-fit:cover;
}
.ab-gallery .about-dots{
    position: absolute;
    display: flex;
    justify-content: flex-start;
    gap: 7px;
    width: auto;
    margin: 14px 0 0;
    transform: none;
    z-index: 2;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: center;
}

.about-dots .swiper-pagination-bullet{
  width:8px; height:8px;
  border-radius:999px;
  background:#C2CEDA;
  opacity:1;
  margin:0 !important;
  transition:width .3s ease, background .3s ease;
}
.about-dots .swiper-pagination-bullet-active{
  width:24px;
  background:var(--sepka-teal);
}

.ab-text{
  margin:0 0 35px;
  font-size:15px;
  line-height:2;
  color:var(--sepka-muted);
  text-align:justify;
}

.ab-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.ab-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:150px;
  padding:26px 18px;
  border-radius:16px;
  text-align:center;
  color:#fff;
}
.ab-stat:nth-child(4n+1),
.ab-stat:nth-child(4n){ background:var(--sepka-navy); }
.ab-stat:nth-child(4n+2),
.ab-stat:nth-child(4n+3){ background:var(--sepka-teal); }
.ab-stat__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
}
.ab-stat__icon img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
.ab-stat__icon svg{
  max-width:100%;
  max-height:100%;
  fill:#fff;
}
.ab-stat__num{
  font-size:30px;
  font-weight:800;
  line-height:1;
}
.ab-stat__label{
  font-size:13px;
  opacity:.92;
}

.ab-more{
  grid-column:1 / -1;
  justify-self:center;
  margin-top:30px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 36px;
  border-radius:999px;
  border:1.5px solid var(--sepka-navy);
  color:var(--sepka-navy);
  font-size:14px;
  font-weight:700;
  transition:background .2s ease, color .2s ease;
}
.ab-more:hover{ background:var(--sepka-navy); color:#fff; }

@media (max-width:991px){
  .ab-section{ padding:56px 0; }
  .ab-grid{ grid-template-columns:1fr; gap:38px; }
  .about-swiper .swiper-slide img{ height:300px; }
}
@media (max-width:575px){
  .ab-stats{ grid-template-columns:1fr; }
  .ab-stat{ min-height:128px; }
}


.ab-section::after {
    position: absolute;
    content: "";
    background-image: url(../image/2.png);
    height: 300px;
    width: 100%;
    background-position: 152px;
    background-size: cover;
    bottom: -100px;
    background-repeat: no-repeat;
    right: 0;
}





/* ============================================================
   OUR ADVANTAGE
   ============================================================ */

.adv-section{
  padding:80px 0 0  0;
  background:#fff;
}
.adv-head{
  text-align:center;
  margin-bottom:44px;
}
.adv-title{
  margin:0 0 12px;
  font-size:clamp(24px, 3vw, 36px);
  font-weight:800;
  color:var(--sepka-navy);
}
.adv-subtitle{
  margin:0;
  font-size:15px;
  color:var(--sepka-muted);
}

.adv-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.adv-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:36px 26px;
  border-radius:16px;
  background:#f4f0f3;
  text-align:center;
  transition:transform .25s ease;
}
.adv-card:hover{ transform:translateY(-4px); }
.adv-card__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border-radius:14px;
  background:var(--sepka-teal);
}
.adv-card__icon img{
  width:28px;
  height:28px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
.adv-card__icon svg{
  width:28px;
  height:28px;
  fill:#fff;
}
.adv-card__title{
  margin:0;
  font-size:18px;
  font-weight:800;
  line-height:1.5;
  color:var(--sepka-navy);
}
.adv-card__text{
  margin:0;
  font-size:13.5px;
  line-height:1.9;
  color:var(--sepka-muted);
}
.adv-card.is-highlight{ background:var(--sepka-teal); }
.adv-card.is-highlight .adv-card__icon{ background:rgba(255,255,255,.2); }
.adv-card.is-highlight .adv-card__title,
.adv-card.is-highlight .adv-card__text{ color:#fff; }

@media (max-width:991px){
  .adv-section{        padding: 54px 0 0 0;}
  .adv-head{ margin-bottom:32px; }
  .adv-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:575px){
  .adv-grid{ grid-template-columns:1fr; }
}