@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);*,.badane>*,.social,.toc{font-family:B-NAZANIN,sans-serif}
.toc,.toc h2{background-color:#f9f9f9}
.box a,.toc a{display:inline-block;text-decoration:none}.badane>*,.breadcrumbs,.emtiyaz,.nmn,.search-box,
.shomare{direction:rtl}#recordBtn,.search-button,.star{cursor:pointer}.emtiyaz,.emtiyaz button,
.hosh{
    box-shadow:0 0 10px rgba(0,0,0,.8);
    border-radius: 10px;
 }
 .hosh button {
    border-radius: 8px;             /* گوشه‌های گرد */
    padding: 0.6rem 1.5rem;        /* فاصله داخلی مناسب */
    font-size: 1rem;                /* اندازه متن */
    font-weight: 600;               /* متن کمی بولد */
    color: #ffffff;                 /* رنگ متن */
    background: linear-gradient(135deg, #6a11cb, #2575fc); /* گرادیان جذاب */
    border: none;                   /* بدون حاشیه */
    cursor: pointer;                /* شکل موس */
    transition: all 0.3s ease;      /* انیمیشن نرم */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* سایه ملایم */
}

/* افکت هاور */
.hosh button:hover {
    transform: translateY(-3px) scale(1.05); /* کمی بالا آمدن و بزرگ شدن */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* سایه قوی‌تر */
}

/* افکت کلیک */
.hosh button:active {
    transform: translateY(0px) scale(0.98); /* کمی فشرده شدن */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.video-container{display:flex;justify-content:center;align-items:center;height:320px;padding:10px 0}.video-container video{border:1px solid #000;box-shadow:0 0 5px rgba(0,0,0,.8)}
.link{transition:transform .3s}.fig{position:relative;overflow:hidden}
.para{font-size:1.3rem}.fig:after,.fig:before{content:'';background-color:rgba(79,79,79,.5);transition:transform 1s}.fig .caption,.fig:after,.fig:before{position:absolute;height:100%}@font-face{font-family:B-NAZANIN;src:url("https://irsaze.com/fonts/BNaznnBd.woff2") format("truetype");font-display:swap}body{margin:0}.title{padding-right:30px;margin-bottom:1rem}.para{text-align:justify;padding:30px;line-height:2rem}.hosh,.tarikh{text-align:right}.badane h2,.link{text-align:center}.title{font-size:2rem}


.baneeeri{width:100%;height:478px}.emtiyaz,.hosh{height:400px;border:1px solid #000}.firtl-container img{height:350px}.badane>*{margin:10px}.badane{display:grid;grid-template-columns:auto 300px;grid-template-rows:100px auto 300px auto;grid-template-areas:"mohtava tarikh " "mohtava fehrest " "mohtava hosh " "mohtava emtiyaz " "mohtava linkha " "mohtava . " "mohtava . " "mohtava . " "mohtava . " "mohtava . " "mohtava . "}#recordBtn,.emtiyaz,.kilidha,.rating,.toc,.vorodi{display:flex}.mahsolat{grid-template-rows:auto}.toc{grid-area:fehrest;margin-bottom:20px;padding:15px;border:1px solid #ddd;border-radius:5px;max-height:50vh;overflow-y:auto;flex-direction:column}.toc h2{font-size:18px;margin-bottom:10px;color:#333;position:sticky;top:0;z-index:1;padding-bottom:5px}.toc ul{list-style-type:none;margin:0;padding:0}
.toc li{margin:5px 0}

.toc .level-1{margin-right:0;font-size:18px}.toc .level-2{margin-right:10px;font-size:16px}.toc .level-3{margin-right:20px;font-size:15px}.toc .level-4{margin-right:30px;font-size:14px}.toc .level-5{margin-right:40px;font-size:14px}.toc .level-6{margin-right:50px;font-size:14px}.toc a{color:#0073e6;font-size:14px;padding:5px}.toc a:hover{color:#005bb5;text-decoration:underline}.mohtava{grid-area:mohtava}.tarikh{grid-area:tarikh}.hosh{grid-area:hosh}
.linkha{grid-area:linkha}.emtiyaz{grid-area:emtiyaz;flex-direction:column;justify-content:center;align-items:center;margin:300px 20px}.emtiyaz button{height:70px;width:100px;font-size:20px}.rating{flex-direction:row-reverse;align-items:center}.rating span{margin:0 5px;font-size:40px}
.mahsolat{background-color:#f1f1f1;width:100%;display:grid;grid-template-areas:"title title title title title title" "mahsole1 mahsole1 mahsole1 mahsole2 mahsole2 mahsole2" "mahsole3 mahsole3 mahsole4 mahsole4 mahsole5 mahsole5" "mahsole6 mahsole6 mahsole6 mahsole7 mahsole7 mahsole7";justify-content:center;align-items:center;margin:0 auto}.mahsole1,.mahsole2,.mahsole3,.mahsole4,.mahsole5,.mahsole6,.mahsole7{height:350px;margin:25px}.fig .caption,.title{display:flex;text-align:center}.title{grid-area:title;justify-content:center;align-items:center;font-family:'B Titr',sans-serif}.mahsole1{grid-area:mahsole1;width:520px;background-color:#00f}.mahsole1 img,.mahsole2 img,.mahsole6 img,.mahsole7 img{width:520px;height:350px}.mahsole2{grid-area:mahsole2;width:520px;background-color:green}.mahsole3{grid-area:mahsole3;width:330px;background-color:#ff0}.mahsole3 img,.mahsole5 img{width:330px;height:350px}.mahsole4{grid-area:mahsole4;width:330px;background-color:red}.mahsole4 img{width:350px;height:350px}.mahsole5{grid-area:mahsole5;width:330px;background-color:#8b008b}.mahsole6,.mahsole7{width:520px}.mahsole6{grid-area:mahsole6;background-color:#d2691e}.mahsole7{grid-area:mahsole7;background-color:#006400}#box,.divider{margin:0 auto}.divider{display:block;width:50%;height:1px;background-color:#fff}.fig{color:#fff;font-family:Raleway;border:10px solid #f1f1f1;box-shadow:0 0 4px rgba(0,0,0,.5)}
#box,.fig img,.mobi{width:100%}.fig:before{width:50%;transform-origin:bottom left;transform:rotate(-90deg)}.fig:after{width:50%;transform-origin:left bottom;transform:rotateY(180deg) rotate(-90deg)}.fig:hover:before{transform:rotate(0)}.fig:hover:after{transform-origin:left bottom;transform:rotateY(180deg) rotate(0)}.fig .caption{top:0;width:100%;flex-direction:column;align-items:center;justify-content:center;transform:translateY(-20px);opacity:0;transition:.25s}.fig h3,.fig h5{margin:0;letter-spacing:1px}.fig h3{text-transform:uppercase;font-weight:400;margin-bottom:5px}.fig h5{background-color:#ae895d;padding:3px 5px}
.fig:hover .caption{opacity:1;transition-delay:0.3s;z-index:1}


.mobi{
    z-index: 1000;
    position:fixed;
    left:0;bottom:20px;height:70px;background-color:rgba(2,202,2,.815);border-radius:200px 100px 100px 200px}.circle,.moj{position:absolute;width:100px;height:100px}
.shomare {
    font-size: 60px;
    max-width: calc(100vw - 110px);
    padding-right: 30px;
    padding-left: 100px;
    position: absolute;     /* اضافه شده */
    top: 50%;               /* وسط عمودی */
    right: 0;               /* چسبیده به راست صفحه */
    transform: translateY(-50%); /* وسط چین عمودی */
    text-align: right;      /* متن داخلش هم راست‌چین شود */
}
.circle{top:-20%;left:0;background-color:rgba(0,255,34,.884);border-radius:50%;box-shadow:0 0 0 5px #000 inset}.moj,.vorodi button{border:1px solid #000}.circle img{animation:1s infinite alternate rotateImage}@keyframes rotateImage{0%{transform:rotate(0)}100%{transform:rotate(30deg)}}.moj{top:-1%;left:-1%;border-radius:50%}
#scroll-to-social,.scroll-to-toc{position:fixed;left:20px;cursor:pointer}.moj:first-child{animation:2s infinite scaleUp}.moj:nth-child(2){animation:2s .5s infinite scaleUp}.moj:nth-child(3){animation:2s 1s infinite scaleUp}@keyframes scaleUp{0%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}}.irsaze{color:#000}#chat-messages{height:180px;overflow-y:scroll;border:1px solid #ccc;padding:10px}#message,.user-message{padding:5px;margin-top:10px;margin-bottom:10px;width:70%}.vorodi button{width:20%;margin:5px;font-size:16px;border-radius:10px;padding:5px}.vorodi input{width:75%;margin:5px;height:48px;font-size:14px}.kilidha{justify-content:space-between}.kilidha button{flex-grow:1;width:calc(25% - 10px);margin:5px;font-size:14px;padding:5px;border:1px solid #000;box-shadow:0 0 3px rgba(0,0,0,.9)}.user-message{background-color:#dbd8d8}
#scroll-to-social{
    z-index: 1000;
    bottom:140px;width:80px;height:80px;font-size:50px;line-height:100px;background:rgba(49,253,0,.3);color:#fff;border-radius:50%;text-align:center}.breadcrumbs{font-size:30px;margin:10px}.search-box{background-color:#f1f1f1;height:60px;width:100%}.search-box form{float:left;margin-left:30px}.search-box input{width:250px;height:40px;font-size:24px;border-radius:15px}.search-button{background-color:transparent;border:none;font-size:24px}@media screen and (max-width:750px){.search-box{height:80px}.search-box form{margin-left:15px}.search-box input{width:200px;font-size:18px;border-radius:10px}}@media screen and (max-width:420px){.search-box{height:100px}.search-box form label::after{content:"\A";white-space:pre}}@media screen and (max-width:277px){.search-box form{margin-left:0;margin-right:2px}.search-box{height:130px}}@media screen and (max-width:230px){.search-box input{width:150px;font-size:14px;border-radius:3px}}#recordBtn{background:0 0;border:none;outline:0;width:60px;height:60px;justify-content:center;align-items:center;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:background .1s}#recordBtn:hover{background:rgba(0,0,0,.1)}svg{fill:#000000;width:24px;height:24px;transition:fill .1s}.recording svg{fill:#FF0000}.box{border:2px solid #4caf50;padding:10px;width:80%;margin:10px auto;border-radius:10px;background-color:#f9f9f9;text-align:center}.box a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}

@media screen and (max-width:1180px){.hosh,.navbarr,.tarikh{padding:10px}.badane,.mahsolat{grid-template-rows:auto}.badane{grid-template-columns:auto;grid-template-areas:"tarikh" "hosh" "fehrest" "mohtava" "emtiyaz" "linkha"}.emtiyaz{margin:30px 20px}.tarikh{grid-area:tarikh}.hosh{grid-area:hosh;height:350px}.kilidha button{margin:15px}

.mahsolat img,.mahsole1,.mahsole2,.mahsole3,.mahsole4,.mahsole5,.mahsole6,.mahsole7{width:336px;height:350px}.mahsolat{display:grid;grid-template-areas:"title title" "mahsole1 mahsole2" "mahsole3 mahsole4" "mahsole5 mahsole6" ". mahsole7"}.title{grid-area:title}.mahsole1{grid-area:mahsole1;background-color:#00f}.mahsole2{grid-area:mahsole2;background-color:green}.mahsole3{grid-area:mahsole3;background-color:#ff0}.mahsole4{grid-area:mahsole4;background-color:red}.mahsole5{grid-area:mahsole5;background-color:#8b008b}.mahsole6{grid-area:mahsole6;background-color:#d2691e}.mahsole7{grid-area:mahsole7;background-color:#006400}.navbarr{display:flex;direction:rtl;background-color:#f1f1f1;justify-content:space-between;align-items:center}.navbarr-logo{display:flex;align-items:center}.navbarr-logo img{margin-right:10px}.navbarr-logo h1{margin:0}.navbarr-toggle{display:inline-block;cursor:pointer}.navbarr-menu{position:fixed;direction:ltr;top:70px;right:0;bottom:0;width:70%;background-color:rgba(216,216,216,.664);border-radius:5px;transform:translateX(100%);transition:transform 1s ease-in-out;height:80vh}.navbarr-menu a{display:block;border:1px solid #131212;border-radius:5px;background-color:rgba(30,68,238,.801);margin:10px auto;max-width:fit-content;padding:10px;color:#fff;font-weight:700;font-size:14px;text-align:center;text-decoration:none}.navbarr-menu.show{transform:translateX(-2%)}.navbarr-toggle span{display:block;width:24px;height:2px;background-color:#333;margin-bottom:4px;transition:transform .3s ease-in-out,opacity .3s ease-in-out}.navbarr-toggle.close span:first-child{transform:rotate(-45deg) translate(-3px,5px)}.navbarr-toggle.close span:nth-child(2){opacity:0}.navbarr-toggle.close span:nth-child(3){transform:rotate(45deg) translate(-3px,-5px)}}
@media screen and (min-width:1180px){.navbarr{display:flex;flex-wrap:wrap;direction:rtl;background-color:#f1f1f1;justify-content:space-between;align-items:center;padding:10px;transform:translateZ(-1)}.navbarr-logo{display:flex;align-items:center}.navbarr-logo img{margin-right:10px}.navbarr-logo h1{margin:0}.navbarr-link,.navbarr-menu a{margin-right:10px;text-decoration:none}.navbarr-link{color:#333;font-weight:700}.navbarr-menu a{border:1px solid #131212;background-color:rgba(57,7,151,.801);border-radius:5px;padding:10px;color:#fff;font-size:18px}}

@media screen and (max-width:800px){.baneeeri{width:100%;height:326px}.mahsolat img,.mahsole1,.mahsole2,.mahsole3,.mahsole4,.mahsole5,.mahsole6,.mahsole7{width:336px;height:350px}.mahsolat{display:grid;grid-template-rows:auto;grid-template-areas:"title" "mahsole1" "mahsole2" "mahsole3" "mahsole4" "mahsole5" "mahsole6" "mahsole7"}.title{grid-area:title}.mahsole1{grid-area:mahsole1;background-color:#00f}.mahsole2{grid-area:mahsole2;background-color:green}.mahsole3{grid-area:mahsole3;background-color:#ff0}.mahsole4{grid-area:mahsole4;background-color:red}.mahsole5{grid-area:mahsole5;background-color:#8b008b}.mahsole6{grid-area:mahsole6;background-color:#d2691e}.mahsole7{grid-area:mahsole7;background-color:#006400}}
@media screen and (max-width:700px){.breadcrumbs{font-size:16px}}
@media screen and (max-width:633px){.hosh{height:400px}}
@media (min-width:525px){.circle,.icon,.irsaze,.mobi,.moj,.shomare{display:none}}@media screen and (max-width:420px){#message-input,#send-button{margin:15px;padding:15px;font-size:14px}#send-button-sot{margin:15px;padding:10px;font-size:5px;border-radius:50%}.hosh{height:480px}
.shomare{font-size:60px;line-height:12vh}.vorodi button{width:20%;margin:0;font-size:14px;border-radius:0;padding:0}.vorodi input{width:75%;margin:0;height:48px;font-size:14px}.kilidha{display:flex;flex-wrap:wrap}.kilidha button{height:48px;flex:1;flex-basis:calc(30% - 5px);margin:10px;font-size:14px;border:1px solid #000;box-shadow:0 0 3px rgba(0,0,0,.9)}}
@media(max-width:390px){
    
    .shomare{font-size:50px;line-height:12vh}.mahsolat img,.mahsole1,.mahsole2,.mahsole3,.mahsole4,.mahsole5,.mahsole6,.mahsole7{width:220px;height:250px}.mahsolat{display:grid;grid-template-rows:auto;grid-template-areas:"title" "mahsole1" "mahsole2" "mahsole3" "mahsole4" "mahsole5" "mahsole6" "mahsole7"}.title{grid-area:title}.mahsole1{grid-area:mahsole1;background-color:#00f}.mahsole2{grid-area:mahsole2;background-color:green}.mahsole3{grid-area:mahsole3;background-color:#ff0}.mahsole4{grid-area:mahsole4;background-color:red;margin:25px}.mahsole5{grid-area:mahsole5;background-color:#8b008b}.mahsole6{grid-area:mahsole6;background-color:#d2691e}.mahsole7{grid-area:mahsole7;background-color:#006400}}
    @media(max-width:379px){.shomare{font-size:40px;line-height:12vh}}
  @media screen and (max-width:290px){
   .shomare{font-size:25px;line-height:12vh}#chat-messages,.kilidha button,.para,.title,.vorodi button,.vorodi input{font-size:14px}.para{line-height:1rem}.title{grid-area:title;grid-area:title}.mahsolat img,.mahsole1,.mahsole2,.mahsole3,.mahsole4,.mahsole5,.mahsole6,.mahsole7{width:190px;height:230px}.mahsolat{display:grid;grid-template-rows:auto;grid-template-areas:"title" "mahsole1" "mahsole2" "mahsole3" "mahsole4" "mahsole5" "mahsole6" "mahsole7"}.mahsole1{grid-area:mahsole1;background-color:#00f}.mahsole2{grid-area:mahsole2;background-color:green}.mahsole3{grid-area:mahsole3;background-color:#ff0}.mahsole4{grid-area:mahsole4;background-color:red;margin:25px}.mahsole5{grid-area:mahsole5;background-color:#8b008b}.mahsole6{grid-area:mahsole6;background-color:#d2691e}.mahsole7{grid-area:mahsole7;background-color:#006400}.hosh{height:700px}.vorodi{flex-direction:column}.vorodi button,.vorodi input{width:90%;margin-top:10px;font-size:14px}#message-input{margin:10px;width:100px}#box{display:flex;flex-direction:column}.kilidha{display:flex;flex-wrap:wrap}.kilidha button{flex:1;flex-basis:calc(50% - 2px);margin:10px0px;border:1px solid #000;box-shadow:0 0 3px rgba(0,0,0,.9)}}@media screen and (max-width:270px){.mahsolat img,.mahsole1,.mahsole2,.mahsole3,.mahsole4,.mahsole5,.mahsole6,.mahsole7{width:160px;height:190px}.emtiyaz{border:1px solid #000;box-shadow:0 0 0 transparent;margin:30px 0}.rating span{font-size:30px}}
   @media screen and (max-width:260px){.firtl-container img{height:0}.badane>*,.social{margin:0}#chat-messages,.vorodi button,.vorodi input{font-size:12px}.navbarr-logo{width:150px!important;height:30px!important}.navbarr-logo img{width:30px!important;height:30px!important}.shomare{font-size:15px;line-height:12vh}
   .mahsole1,.mahsole2,.mahsole3,.mahsole4,.mahsole5,.mahsole6,.mahsole7{width:140px;height:180px;margin:10px 0;border:1px solid #000}.mahsolat img{width:140px;height:180px}
   
   .hosh,.mahsolat{width:90%}.vorodi{flex-direction:column}.vorodi button,.vorodi input{width:90%;margin-top:10px}#message-input{margin:10px;width:100px}#box{display:flex;flex-direction:column}.kilidha{display:flex;flex-wrap:wrap}.kilidha button{flex:1;flex-basis:calc(100%);margin:10px0px;font-size:14px;border:1px solid #000;box-shadow:0 0 3px rgba(0,0,0,.9)}}
   @media screen and (max-width:200px){.hosh,.vorodi button,.vorodi input{box-shadow:0 0 0}
   .vorodi button{margin:0;font-size:14px;border-radius:0;padding:0}.vorodi input{margin:0;height:48px;font-size:14px}.kilidha button{flex:1;flex-basis:calc(50% - 2px);margin:10px0px;font-size:14px;border:1px solid #000;box-shadow:0 0 0 rgba(0,0,0,.9)}.mahsole1,.mahsole2,.mahsole3,.mahsole4,.mahsole5,.mahsole6,.mahsole7{width:90px;height:150px;margin:10px 0;border:1px solid #000}.mahsolat img{width:90px;height:150px}#scroll-to-social{bottom:200px}
   
   .vorodi{flex-direction:column}.vorodi button,.vorodi input{width:90%;margin-top:10px}#message-input{margin:10px;width:100px}#box{display:flex;flex-direction:column}.hosh{height:700px}}@media (max-width:250px){#scroll-to-social{display:none}}.scroll-to-toc{bottom:250px;padding:10px 15px;background-color:#0073e6e0;color:#000;border:none;border-radius:5px;font-family:B-NAZANIN,sans-serif;font-size:14px;box-shadow:0 4px 6px rgba(0,0,0,.1);z-index:1000;transition:background-color .3s}.scroll-to-toc:hover{background-color:#005bb5;color:#fff}
/* برید کرامبس */
.breadcrumbs {
  font-family: "Vazirmatn", sans-serif;
  font-size: 0.95rem;
  text-align: right; /* راست‌چین */
  direction: rtl; /* برای سازگاری بهتر در فارسی */
  margin: 20px auto;
  padding: 12px 18px;
  background: linear-gradient(135deg, #fdfbfb, #ebedee);
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: block;
  max-width: 90%;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none; /* فایرفاکس */
}

.breadcrumbs::-webkit-scrollbar {
  display: none; /* کروم و ... */
}

.breadcrumbs p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* بچه‌ها از راست شروع بشن */
  gap: 8px;
  flex-wrap: wrap;
  color: #444;
  font-weight: 500;
}

.breadcrumbs a {
  color: #0d47a1;
  text-decoration: none;
  position: relative;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.breadcrumbs a:hover {
  background: #0d47a1;
  color: #fff;
  box-shadow: 0 3px 8px rgba(13,71,161,0.4);
}

.breadcrumbs p a::after {
  
  margin-right: 8px;
  color: #999;
  font-weight: bold;
}

.breadcrumbs p a:last-of-type::after {
  content: "";
}

.breadcrumbs p a:first-child {
  font-weight: 600;
}








/*هدر------------------*/
:root {
    /* حالت پیشفرض: روز */
    --primary-color: #2196f3;
    --primary-glow: rgba(33, 150, 243, 0.8);
    --secondary-color: #9c27b0;
    --text-color: #0a0a12; /* متن تیره برای روز */
    --bg-color: #ffffff;   /* پس‌زمینه روشن */
    --nav-bg: rgba(255, 255, 255, 0.8);
    --dropdown-bg: rgba(240, 240, 255, 0.9);
    --hover-color: #3f51b5;
    --border-color: rgba(0, 0, 0, 0.08);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --neon-glow: 0 0 10px rgba(33, 150, 243, 0.5),
                0 0 20px rgba(33, 150, 243, 0.3),
                0 0 30px rgba(33, 150, 243, 0.1);
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --gradient-bg: linear-gradient(135deg, var(--bg-color), #f0f4ff);
    --glass-effect: saturate(180%) blur(10px);
    --border-radius: 12px;
    --text-description: rgba(0, 0, 0, 0.7);
    }
    .picture {
    position: relative;
    width: 100%;
    overflow: hidden;
    max-height: 80vh; /* در صورت نیاز محدودیت ارتفاع */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

/* نسبت تصویر دسکتاپ */
@media (min-width: 801px) {
    .picture {
        aspect-ratio: 1335 / 478; /* نسبت تصویر دسکتاپ */
    }
}

/* نسبت تصویر موبایل */
@media (max-width: 800px) {
    .picture {
        aspect-ratio: 618 / 489; /* نسبت تصویر موبایل */
    }
}

.picture picture,
.picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease, filter 0.5s ease;
    border-radius: inherit;
}

/* افکت هاور مدرن */
.picture:hover img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* اورلی ملایم روی عکس برای خوانایی متن */
.picture::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
}

        
        
    
        /* انیمیشن ورود نرم */
        .baneeeri {
        animation: fadeInZoom 1.2s ease-out;
        }
    
        @keyframes fadeInZoom {
        0% {
            opacity: 0;
            transform: scale(1.1);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
        }


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--gradient-bg);
            color: var(--text-color);
            line-height: 1.6;
            min-height: 100vh;
        }

        /* Header and Navbar */
        .header {
            direction: rtl;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1100;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            background: var(--nav-bg);
            backdrop-filter: var(--glass-effect);
            -webkit-backdrop-filter: var(--glass-effect);
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 4px 30px var(--shadow-color);
            transition: var(--transition-medium);
        }

        /* Logo */
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: var(--neon-glow);
            position: relative;
            display: inline-block;
            transition: var(--transition-medium);
        }

        .logo:hover {
            transform: translateY(-2px);
            text-shadow: 0 0 15px var(--primary-glow),
                        0 0 30px var(--primary-glow);
        }

        .logo::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background: var(--primary-color);
            bottom: -4px;
            left: 0;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform var(--transition-medium);
            box-shadow: var(--neon-glow);
        }

        .logo:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }

        /* Navigation Menu */
        .nav-menu {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        .nav-list {
            display: flex;
            gap: 1.5rem;
            list-style: none;
        }

        .nav-item {
            position: relative;
        }

        .nav-link {
            color: var(--text-color);
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius);
            transition: all var(--transition-medium);
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--primary-color);
            text-shadow: var(--neon-glow);
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-2px);
        }

        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 5px;
            height: 5px;
            background-color: var(--primary-color);
            border-radius: 50%;
            box-shadow: var(--neon-glow);
        }

        /* icon1s */
        .icon1 {
            transition: var(--transition-medium);
            vertical-align: middle;
        }

        .chevron-icon1 {
            transition: transform var(--transition-medium);
        }

        .has-dropdown:hover .chevron-icon1 {
            transform: rotate(180deg);
        }

        .hidden {
            display: none;
        }

        /* Dropdown Menus */
        .has-dropdown {
            position: relative;
        }

        .dropdown {
            position: absolute;
            top: calc(100% + 10px);
            left: 0;
            min-width: 220px;
            background: var(--dropdown-bg);
            backdrop-filter: var(--glass-effect);
            -webkit-backdrop-filter: var(--glass-effect);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 0.5rem;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px) scale(0.98);
            transition: all var(--transition-medium);
            box-shadow: 0 10px 30px var(--shadow-color);
            z-index: 100;
        }

        .has-dropdown:hover .dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        .dropdown::before {
            content: '';
            position: absolute;
            top: -6px;
            left: 20px;
            width: 12px;
            height: 12px;
            background: var(--dropdown-bg);
            border-left: 1px solid var(--border-color);
            border-top: 1px solid var(--border-color);
            transform: rotate(45deg);
            backdrop-filter: var(--glass-effect);
            -webkit-backdrop-filter: var(--glass-effect);
        }

        .dropdown li {
            list-style: none;
        }

        .dropdown a {
            color: var(--text-color);
            text-decoration: none;
            padding: 0.7rem 1rem;
            display: block;
            border-radius: var(--border-radius);
            transition: all var(--transition-medium);
            margin-bottom: 2px;
        }

        .dropdown a:hover {
            background: rgba(33, 150, 243, 0.15);
            color: var(--primary-color);
            transform: translateX(5px);
        }

        /* Search Bar */
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .search-container {
            position: relative;
            display: flex;
            align-items: center;
        }

        .search-input {
            padding: 0.6rem 1rem;
            border: none;
            border-radius: 20px;
            background: rgba(37, 29, 29, 0.9);
            color: var(--text-color);
            width: 180px;
            transition: all var(--transition-medium);
            font-size: 0.9rem;
        }

        .search-input:focus {
            outline: none;
            background: rgb(236, 236, 236);
            width: 240px;
            box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
        }

        .search-input::placeholder {
            color: #fff;
        }

        .search-input:focus::placeholder {
            color: #000;
        }

        .search-btn {
            background: none;
            border: none;
            color: var(--text-color);
            cursor: pointer;
        
            /* افزایش اندازه هدف لمسی */
            width: 44px;
            height: 44px;
            padding: 0; /* padding داخلی حذف شد چون width/height تعیین شده */
        
            position: absolute;
            left: 5px; /* میتونی کمی بیشترش کنی اگر لازم بود */
            top: 50%;
            transform: translateY(-50%); /* وسط چین عمودی */
        
            transition: var(--transition-fast);
        }
        
        .search-btn:hover {
            color: var(--primary-color);
            transform: scale(1.1);
        }
        

        /* Theme Toggle */
        .theme-toggle {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid var(--border-color);
            color: var(--text-color);
            cursor: pointer;
            padding: 0.6rem;
            font-size: 1.2rem;
            transition: all var(--transition-medium);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .theme-toggle:hover {
            color: var(--primary-color);
            text-shadow: var(--neon-glow);
            background: rgba(255, 255, 255, 0.15);
            transform: rotate(15deg);
        }

        /* Hamburger Menu */
        .nav-toggle {
            display: none;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 0.6rem;
            transition: var(--transition-medium);
        }

        .nav-toggle:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        .hamburger {
            width: 24px;
            height: 20px;
            position: relative;
        }

        .hamburger span {
            display: block;
            width: 100%;
            height: 2px;
            background: var(--text-color);
            position: absolute;
            transition: all var(--transition-medium);
            border-radius: 10px;
        }

        .hamburger span:first-child {
            top: 0;
        }

        .hamburger span:nth-child(2) {
            top: 9px;
            width: 70%;
        }

        .hamburger span:last-child {
            top: 18px;
        }

        /* Mobile Menu Active State */
        .nav-active .hamburger span:first-child {
            transform: rotate(45deg);
            top: 9px;
        }

        .nav-active .hamburger span:nth-child(2) {
            opacity: 0;
            width: 0;
        }

        .nav-active .hamburger span:last-child {
            transform: rotate(-45deg);
            top: 9px;
        }

        /* Content Styling */
        .content {
            margin-top: 70px;
            padding: 2rem 0 2rem 0;
        }

        

        
    .center-button{
      display: flex;
        justify-content: center; /* وسط چین افقی */
        align-items: center;    /* وسط چین عمودی */
        margin-top: -100px;
        
    }
    


    .cta-button {
        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        color: white;
        border: none;
        padding: 0.8rem 2rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 30px;
        cursor: pointer;
        transition: var(--transition-medium);
        box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4);
        z-index: 1000;
    }

    .cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(33, 150, 243, 0.6);
    }

    .section {
        padding: 5rem 2rem;
        margin-top: -50px;
    }

    .spans {
        text-align: center;
        margin-bottom: 3rem;
        font-size: 2.5rem;
        color: var(--primary-color);
    }

    .features {
        direction: rtl;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .feature {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(10px);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        padding: 2rem;
        transition: var(--transition-medium);
    }

    .feature:hover {
        transform: translateY(-10px);
        background: rgba(255, 255, 255, 0.06);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        border-color: rgba(33, 150, 243, 0.3);
    }

    .h3s {
        color: var(--primary-color);
        margin-bottom: 1rem;
        font-size: 1.3rem;
    }

    .feature p {
        color: var(--text-description);
    }

    /* Responsive Design */
    @media (max-width: 968px) {
        .nav-toggle {
            display: flex;
        }

        .nav-menu {
            position: fixed;
            top: 70px;
            right: -100%;
            flex-direction: column;
            align-items: flex-start;
            background: var(--nav-bg);
            backdrop-filter: var(--glass-effect);
            -webkit-backdrop-filter: var(--glass-effect);
            width: 80%;
            height: calc(100vh - 70px);
            padding: 2rem;
            transition: right var(--transition-slow);
            box-shadow: -10px 0 30px var(--shadow-color);
            border-left: 1px solid var(--border-color);
        }

        .nav-active .nav-menu {
            right: 0;
        }

        .nav-list {
            flex-direction: column;
            width: 100%;
            margin-bottom: 2rem;
        }

        .nav-item {
            width: 100%;
        }

        .nav-link {
            width: 100%;
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .nav-link.active::after {
            display: none;
        }

        .nav-link.active {
            background: rgba(33, 150, 243, 0.15);
        }

        .dropdown {
            position: static;
            width: 100%;
            background: rgba(0, 0, 0, 0.2);
            border: none;
            padding: 0;
            padding-left: 1rem;
            margin-left: 1rem;
            display: none;
            box-shadow: none;
            border-left: 1px solid var(--border-color);
            transform: none;
            transition: all var(--transition-medium);
        }

        .dropdown::before {
            display: none;
        }

        .has-dropdown.active .dropdown {
            display: block;
            opacity: 1;
            visibility: visible;
        }

        .dropdown a {
            padding: 0.8rem 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .nav-actions {
            width: 100%;
            flex-direction: column;
            gap: 1rem;
        }

        .search-container {
            width: 100%;
        }

        .search-input, 
        .search-input:focus {
            width: 100%;
        }

        .search-input {
            padding: 0.8rem 1rem;
        }

        .theme-toggle {
            align-self: flex-start;
        }

        .chevron-icon1 {
            position: absolute;
            right: 1rem;
        }

        .has-dropdown.active .chevron-icon1 {
            transform: rotate(180deg);
        }
        
        /* 🔹 موبایل: کاروسل کارت محور */

    
        .section {
            padding: 5rem 2rem 0 2rem;
        }
        
        .features {
            display: block;
            position: relative;
            max-width: 90%;
            margin: 0 auto;
            min-height: 180px;
        }

        .feature {
            position: absolute;
            inset: 0;
            opacity: 0;
            transform: translateY(20px) scale(.98);
            transition: opacity 480ms cubic-bezier(.2,.9,.25,1),
                        transform 480ms cubic-bezier(.2,.9,.25,1);
            pointer-events: none;
        }

        .feature.active {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
            z-index: 2;
        }

        /* دکمه‌ها */
        .controls {
            position: absolute;
            top: -3rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 1rem;
        }
        .controls button {
            background: var(--primary-color);
            border: none;
            color: #fff;
            padding: 0.4rem 0.8rem;
            border-radius: 10px;
            cursor: pointer;
            font-weight: bold;
        }

    }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }








/*نوار خبرررررررررررررررررررررر*/
/* 🎯 استایل نوار خبر با سرعت ثابت */
:root {
    --primary-color: #0d47a1;
  }
  
  .ticker-wrapper {
    background: linear-gradient(90deg, #0d47a1, #1976d2);
    padding: 12px 0;
    overflow: hidden;
    position: relative;
    margin-top: -10px;
  }
  
  .ticker-scroll {
    direction: rtl;
    display: flex;
    width: max-content;
    animation: scrollTicker linear infinite; /* زمان انیمیشن در JS ست می‌شود */
    user-select: none;
  }
  
  .ticker-wrapper:hover .ticker-scroll,
  .ticker-wrapper.dragging .ticker-scroll {
    animation-play-state: paused;
  }
  
  .ticker-item {
    display: inline-flex;
    align-items: center;
    padding: 0 1.2rem;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
    font-size: 1rem;
    position: relative;
    font-weight: 500;
    flex-shrink: 0;
  }
  .ticker-item::before {
    content: '🔔';
    margin-left: 0.6rem;
    animation: ring 2s infinite ease-in-out;
  }
  .ticker-item:not(:last-child)::after {
    content: "|";
    margin: 0 10px;
    color: #ffd700;
  }
  .ticker-item:hover {
    color: #ffd700;
    transform: scale(1.05);
    transition: all 0.3s ease;
  }
  
  @keyframes scrollTicker {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
  }
  
  @keyframes ring {
    0%,100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
  }
  
  .ticker-wrapper::-webkit-scrollbar { display: none; }
  .ticker-wrapper { -ms-overflow-style: none; scrollbar-width: none; }
  
  
  
  
  /* ✨ پنجره‌ی توضیح (Tooltip) */
  .ticker-tooltip {
  direction:rtl;
    position: absolute;
    max-width: 260px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    pointer-events: none;       /* موس داخل نشه */
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 9999;
  }
  
  
  .mobile-tooltip {
  display: none;
  background: #333;
  color: #fff;
  padding: 8px;
  margin-top: 4px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
}
  
  
  
  
  
  
  
  /*استوریییییییییییییییییی------------------*/
  .story-bar {
    display: flex;
    direction: rtl;
    overflow-x: auto;
    gap: 12px;
    padding: 16px;
    scrollbar-width: none;
    margin-top: 50px;
    }
    .story-bar::-webkit-scrollbar { display: none; }

    .story-item {
    flex: 0 0 auto;
    width: 90px;
    text-align: center;
    cursor: pointer;
    }
    .story-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgb(73,26,241);
    padding: 2px;
    background: white;
    transition: transform 0.3s ease;
    }
    .story-item img:hover { transform: scale(1.05); }
    .story-title {
    margin-top: 6px;
    font-size: 12px;
    color: #333;
    line-height: 1.4;
    max-width: 70px;
    overflow: hidden;
    word-wrap: break-word;
    margin: 6px auto 0;
    }

    /* Modal */
    .modalstory {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 1000;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    z-index: 1200;
    }
    .modalstory-content {
    position: relative;
    background: rgba(255,255,255,0.95);
    border-radius: 16px;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
    overflow: hidden;
    }
    .modalstory-content video {
    width: 100%;
    max-height: 50vh;
    border-radius: inherit;
    display: block;
    margin: auto;
    }

    .modalstory-close {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.85);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.2s;
    }
    .modalstory-close:hover {
    background: rgba(56,50,50,0.9);
    color: #fff;
    transform: rotate(90deg);
    }
    .close-icon { font-size: 25px; font-weight: bold; transform: translateY(-3px); display: inline-block; }

    @keyframes fadeIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
    }

    .modalstory-stats {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 6px 12px;
    border-radius: 8px;
}
.like-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.2s ease, transform 0.1s ease;
}

.like-btn:hover {
    background: rgba(255,255,255,0.1);
}

.like-btn.liked {
    color: #e0245e; /* قرمز اینستاگرام */
}

.like-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.like-btn.liked .heart-outline {
    fill: none;
}

.like-btn.liked .heart-filled {
    fill: #e0245e; /* قرمز اینستاگرام */
}

.like-btn:not(.liked) .heart-filled {
    fill: none;
}

.like-btn:active .like-icon {
    transform: scale(1.2); /* انیمیشن کلیک */
}

.like-count {
    font-weight: 500;
}

    .modalstory-comments {
    margin-top: 10px;
    background: #f7f7f7;
    border-radius: 8px;
    padding: 10px;
    color: #333;
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 250px;
    overflow: hidden; /* جلوگیری از اسکرول مستقیم این بخش */
    }

    .modalstory-comments h4 { 
    margin-bottom: 8px; 
    font-size: 14px; 
    color: #444; 
    }

    .comments-list {
    overflow-y: auto;
    flex: 1;
    padding: 0 4px;
    margin-bottom: 0; /* فضای کافی برای فرم فیکس */
    }

    .comment-item {
    padding: 5px;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
    }

    /* فرم کامنت فیکس در پایین مودال */
    .comment-form {
    display: flex;
    gap: 6px;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f7f7f7;
    padding: 10px;
    border-top: 1px solid #ddd;
    z-index: 10;
    }
    .comment-form input {
    flex: 1;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    }
    .comment-form button {
    padding: 6px 12px;
    border: none;
    background: #007bff;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    }
    .comment-form button:hover { background: #0056b3; }


















/* --- فقط داخل کارت --- */
.card { 
    background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%); 
    border-radius: 20px; 
    padding: 2rem; 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0,0,0,0.05); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    position: relative; overflow: hidden; 
    text-align: center;
} /* افکت نوری ملایم روی کارت */ 
.card::before { 
    content: ''; 
    position: absolute; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
    background: radial-gradient(circle at center, rgba(255,255,255,0.3), transparent 70%); 
    opacity: 0.3; 
    transform: rotate(45deg); 
} /* hover مدرن */ 
.card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.15), 0 15px 25px rgba(0,0,0,0.1); 
} /* --- حالت پایه متن‌ها همیشه قابل دیدن --- */ 
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card p, .card a, .card blockquote, .card strong, .card em, .card ul, .card ul li { 
    opacity: 1; transform: translateY(30px) scale(0.95); 
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
     /* --- وقتی in-view میشه، حرکت و scale --- */ 
.card.in-view h1, .card.in-view h2, .card.in-view h3, .card.in-view h4, .card.in-view h5, .card.in-view h6, .card.in-view p, .card.in-view a, .card.in-view blockquote, .card.in-view strong, .card.in-view em, .card.in-view ul, .card.in-view ul li { 
    transform: translateY(0) scale(1); 
} /* --- رنگ و استایل متن‌ها --- */ 
.card.in-view h1 { 
    background: linear-gradient(90deg, #1976d2, #ff4081); 
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
} 
.card.in-view h2,
.card.in-view h3 {
    color: #1976d2; /* یا #1565c0 برای h3 */

    /* اجازه شکستن خط فقط بین کلمات */
    white-space: normal;        /* متن می‌تواند روی چند خط برود */
    word-wrap: break-word;      /* فقط اگر کل کلمه بزرگ بود */
    overflow-wrap: break-word;  /* پشتیبانی مرورگرها */
    hyphens: auto;              /* اختیاری، نیم‌خط خودکار */
    
    max-width: 100%;            /* جلوگیری از خارج شدن متن */
    box-sizing: border-box;
}

.card.in-view h4 { color: #0d47a1; } .card.in-view h5 { color: #444; font-weight: 600; } .card.in-view h6 { color: #555; font-style: italic; } .card.in-view p { color: #333; line-height: 1.8; } .card.in-view li { color: #444; line-height: 1.7; } .card.in-view a { color: #ff4081; text-decoration: none; } .card.in-view a:hover { text-decoration: underline; } .card.in-view strong { color: #000; font-weight: bold; } .card.in-view em { color: #555; font-style: italic; } .card.in-view blockquote { border-left: 4px solid #1976d2; padding-left: 1rem; color: #555; font-style: italic; } /* --- انیمیشن‌های مختلف (CSS keyframes) --- */ @keyframes fadeUp { 0% { transform: translateY(30px) scale(0.95); } 100% { transform: translateY(0) scale(1); } } @keyframes fadeDown { 0% { transform: translateY(-30px) scale(0.95); } 100% { transform: translateY(0) scale(1); } } @keyframes fadeLeft { 0% { transform: translateX(-30px) scale(0.95); } 100% { transform: translateX(0) scale(1); } } @keyframes fadeRight { 0% { transform: translateX(30px) scale(0.95); } 100% { transform: translateX(0) scale(1); } } @keyframes fadeScale { 0% { transform: scale(0.8); } 100% { transform: scale(1); } } /* کلاس‌های انیمیشن */ .animate-fadeUp { animation: fadeUp 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; } .animate-fadeDown { animation: fadeDown 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; } .animate-fadeLeft { animation: fadeLeft 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; } .animate-fadeRight { animation: fadeRight 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; } .animate-fadeScale { animation: fadeScale 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; }









.img-bozorg {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    border-radius: 20px;
    border: 5px solid #fff;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

.img-bozorg img {
    width: 100%;
    height: auto; /* حفظ ریسپانسیو */
    display: block;
    object-fit: cover; /* دسکتاپ: قاب را پر کند */
    border-radius: 15px;
    transition: transform 0.6s ease;
}

.img-bozorg:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.img-bozorg:hover img {
    transform: scale(1.1);
}

.img-bozorg .caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    padding: 35px 15px 15px 15px;
    line-height: 1.5;
    font-family: 'Vazir', 'Tahoma', sans-serif;
    border-radius: 0 0 16px 16px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
    transition: all 0.4s ease;
    z-index: 2;
}

.img-bozorg:hover .caption {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 70%, transparent 100%);
    padding-top: 45px;
    font-size: 16px;
}

/* موبایل: تضمین ریسپانسیو بودن تصاویر و کپشن */
@media (max-width: 768px) {
    .img-bozorg img {
        object-fit: contain; /* کل تصویر دیده شود */
    }

    .img-bozorg .caption {
        padding: 20px 10px 10px 10px;
        font-size: 13px;
    }

    .img-bozorg:hover .caption {
        padding-top: 25px;
        font-size: 14px;
    }
}











  


  /* --- لیست لینک‌ها --- */
  .linkha {
    background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
    border-radius: 25px;
    padding: 2.5rem;
    max-width: 280px;
    margin: 2.5rem auto;
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.5s ease;
    will-change: transform, box-shadow, background;
}
@media (max-width: 1180px) {
    .linkha {
        max-width: 100%;
    }
}

.linkha:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
}

.linkha h2 {
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 2rem;
    color: #1e293b;
    text-align: center;
    position: relative;
    letter-spacing: 0.5px;
}

.linkha h2::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #6366f1, #3b82f6);
    margin: 0.5rem auto 0;
    border-radius: 3px;
    animation: glowLine 2s infinite alternate;
}

@keyframes glowLine {
    0% { box-shadow: 0 0 5px #6366f1, 0 0 10px #3b82f6; }
    100% { box-shadow: 0 0 15px #6366f1, 0 0 25px #3b82f6; }
}

/* --- لینک‌ها --- */
.link {
    margin: 0.7rem 0;
}

.link a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.3rem;
    background: linear-gradient(135deg, #f0fdf4, #c6f6d5); /* سبز روشن‌تر برای کنتراست */
    border-radius: 15px;
    color: #064e3b; /* متن تیره برای حداکثر خوانایی */
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.6;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    overflow: hidden;
    position: relative;
    transition: all 0.35s ease, background 0.5s ease, color 0.5s ease;
    transform-origin: left center;
}










.link a::before {
    content: "📰";
    font-size: 1.3rem;
    display: inline-block;
    flex-shrink: 0;
    transition: transform 0.35s ease, color 0.35s ease;
}

.link a:hover::before {
    transform: scale(1.5) rotate(-15deg);
    color: #6366f1;
}

.link a::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(99,102,241,0.15), rgba(99,102,241,0));
    transition: all 0.4s ease;
}

.link a:hover::after {
    left: 0;
}

.link a:hover {
    background: linear-gradient(135deg, #c6f6d5, #38a169); /* سبز زنده در هاور */
    color: #064e3b; /* متن ثابت و با کنتراست بالا */
    transform: translateX(6px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.link p {
    margin: 0;
    font-size: 1rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5rem;
    transition: all 0.3s ease, color 0.35s ease;
    color: #1a1a1a; /* متن تقریبا مشکی برای کنتراست مناسب با سبز */
}

.link a:hover p {
    color: #111111; /* کمی تیره‌تر در هاور، کنتراست حفظ شده */
}



/* --- ریسپانسیو --- */
@media (max-width: 768px) {
    .linkha { padding: 2rem 1.5rem; }
    .linkha h2 { font-size: 1.6rem; }
    .link a { font-size: 1rem; padding: 0.95rem 1rem; }
}

@media (max-width: 480px) {
    .linkha { padding: 1.5rem 1rem; }
    .linkha h2 { font-size: 1.35rem; }
    .link a { font-size: 0.95rem; padding: 0.8rem 0.9rem; }
}


/* استایل کلی لیست */
/* لیست شماره‌دار */
ol {
    counter-reset: item;
    list-style: none;
    padding-left: 0;
    max-width: 100%;
    margin: 2rem auto;
    font-family: 'Tahoma', sans-serif;
}

/* هر آیتم لیست */
ol li {
    counter-increment: item;
    margin: 1rem 0;
    padding: 1rem 1.5rem;
    position: relative;
    background: linear-gradient(135deg, #f5f7fa, #e4f0f9);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* شماره هر آیتم سمت راست */
ol li::before {
    content: counter(item);
    position: absolute;
    right: -1.5rem; /* تغییر به راست */
    top: 50%;
    transform: translateY(-50%);
    background: #4caf50;
    color: white;
    font-weight: bold;
    width: 2rem;
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: background 0.3s;
}

/* افکت هاور */
ol li:hover {
    transform: translateX(-10px); /* به سمت چپ حرکت کند چون شماره سمت راست است */
    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

ol li:hover::before {
    background: #66bb6a;
}

/* ریسپانسیو */
@media (max-width: 500px) {
    ol li {
        padding: 1rem;
    }
    ol li::before {
        right: -2rem;
        width: 2.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
    }
}أ

/* استایل متن بولد داخل مربع */
/* ===== Bold ===== */
p.para span.bold {
  position: relative;
  display: inline-block;
  padding: 0.4rem 1rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: #2e7d32;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  vertical-align: middle;
}

p.para span.bold::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

p.para span.bold:hover {
  color: #1b5e20;
  transform: scale(1.1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

p.para span.bold:hover::before {
  transform: translateX(100%);
}

/* ===== Italic ===== */
p.para span.italic {
  font-style: italic;
  position: relative;
  display: inline-block;
  color: #212121;
  font-weight: 500;
  transition: color 0.3s ease;
}

p.para span.italic::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 6px;
  background: linear-gradient(120deg, #ffeb3b, #ffc107);
  transform: skewX(-20deg);
  z-index: -1;
  border-radius: 3px;
  transition: transform 0.4s ease;
}

p.para span.italic:hover {
  color: #000;
}

p.para span.italic:hover::after {
  transform: skewX(-20deg) scaleX(1.2);
}

/* ===== Underline ===== */
p.para span.underline {
  position: relative;
  text-decoration: none;
  font-weight: 500;
  color: #212121;
  padding-bottom: 3px;
  transition: color 0.3s ease;
}

p.para span.underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #2196f3, #00bcd4);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

p.para span.underline:hover {
  color: #0d47a1;
}

p.para span.underline:hover::after {
  transform: scaleX(1);
}

/* ===== Highlight ===== */
p.para span.has-hl {
  position: relative;
  display: inline-block;
  direction: rtl;
  text-align: right;
  padding: 2px 6px;
  font-weight: 600;
  color: #111;
  border-radius: 4px;
  transition: transform .18s ease;
}

p.para span.has-hl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,230,0,0.6);
  opacity: 0.45;
  border-radius: 4px;
  z-index: -1;
  transition: opacity .2s ease, transform .25s ease;
}

p.para span.has-hl:hover {
  transform: translateY(-2px);
}

p.para span.has-hl:hover::before {
  opacity: 0.6;
  transform: scaleX(1.02);
}

  
  /*بلاگ کوچک*/
  
  .sliderBlogKochak-container {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    margin: auto;
}
.sliderBlogKochak {
    display: flex;
    transition: transform 0.4s ease;
    gap: 1rem;
}
.slide {
    flex: 0 0 auto;
    width: 300px;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-align: center;
    transition: transform 0.3s ease;
    min-height: 380px; /* ارتفاع کلی بیشتر شد */
}

.slide:hover { transform: scale(1.05); }

.slide img {
    width: 100%;
    height: 200px; /* تصویر بزرگ‌تر شد */
    object-fit: cover;
}

.slide h3 {
    font-size: 1.1rem;
    margin: 0.7rem 0 0.4rem;
    color: #111;
    font-weight: 600;
}

.slide .desc {
    font-size: 0.9rem;
    color: #555;
    padding: 0 0.7rem 1rem;
    line-height: 1.6;
    max-height: 4.8em;  /* حدود 3 خط */
    overflow: hidden;
    text-overflow: ellipsis;
}



.slide p { padding: 0.7rem; font-size: 1rem; color: #333; }


.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.9);
    border: none;
    font-size: 3rem; /* بزرگ‌تر شد */
    cursor: pointer;
    padding: 0.5rem 1rem; /* بزرگ‌تر شدن کلید */
    border-radius: 50%;
    z-index: 10;
    transition: all 0.3s;
}
.arrow.left { left: 10px; } /* کمی فاصله بیشتر از چپ */
.arrow.right { right: 10px; } /* فاصله بیشتر از راست */
.arrow:hover:not(.disabled) { background: #3b82f6; color: white; }
.arrow.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}


.fixed-calculator {
        position: fixed;
        direction: rtl;
        bottom: 100px;
        right: 20px;
        background-color: #0056b3; /* آبی حرفه‌ای و تیره */
        color: #ffffff; /* متن سفید */
        padding: 12px 20px;
        border-radius: 50px;
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        z-index: 9999;
        cursor: pointer;
        /* انیمیشن اولیه */
        animation: float 2s ease-in-out infinite;
        transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .fixed-calculator:hover {
        background-color: #007bff; /* آبی روشن‌تر */
        transform: scale(1.1);
        box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    }

    /* حرکت ملایم بالا و پایین */
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }
    
    
    
    
    
    
    
/* ================== H1 (قاب انیمیشنی + مداد) ================== */
    h1.title {
        position: relative;
        display: inline-block;
        padding: 20px 40px;
        font-size: 2.8rem;
        font-weight: 800;
        color: #222;
        margin: 15px auto;
    }
    @media (max-width: 768px) {
        h1.title {
            font-size: 1.5rem; /* سایز استاندارد موبایل */
            padding: 10px 15px; /* کاهش فاصله‌ها برای موبایل */
        }
    }

    /* قاب انیمیشنی فقط برای H1 */
    h1.title::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border: 3px solid #ff5722;
        border-radius: 8px;
        box-sizing: border-box;
        animation: drawBorder 7s ease infinite;
    }

    /* مسیر کشیده شدن قاب با مکث 2 ثانیه */
    @keyframes drawBorder {
        0%   { clip-path: inset(0 100% 0 0); }
        25%  { clip-path: inset(0 0 100% 0); }
        50%  { clip-path: inset(0 0 0 100%); }
        75%  { clip-path: inset(100% 0 0 0); }
        90%  { clip-path: inset(0 0 0 0); }
        100% { clip-path: inset(0 0 0 0); }
    }

    /* آیکون مداد */
    h1.title::after {
        content: "✏️"; /* آیکون مداد */
        position: absolute;
        font-size: 1.5rem;
        animation: pencilMove 7s linear infinite;
    }

    /* مسیر حرکت مداد، بالاتر از خط پایین */
    @keyframes pencilMove {
        0%   { left: 0; top: -30px; }                            /* خط بالا */
        25%  { left: calc(100% - 4px); top: -30px; }            /* خط بالا راست */
        50%  { left: calc(100% - 4px); top: calc(100% - 40px); }/* خط پایین، کمی بالاتر */
        75%  { left: 0; top: calc(100% - 40px); }               /* خط پایین، کمی بالاتر */
        90%  { left: 0; top: -15px; }                            /* بازگشت به بالا */
        100% { left: 0; top: -15px; }                            /* مکث */
    }

    /* ================== H2 (گرادینت متحرک + زیرخط درخشان) ================== */
    h2.title {
        position: relative;
        font-size: clamp(1.3rem, 4vw, 1.8rem);
        font-weight: 800;
        margin-top: 3em;
        color: #222;
        background: linear-gradient(270deg,#2196f3,#9c27b0,#e91e63,#ff9800);
        background-size: 600% 600%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradientFlow 6s ease infinite;
        letter-spacing: 1px;
    }
    h2.title::after {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 4px;
        background: linear-gradient(90deg,#2196f3,#e91e63,#ffeb3b);
        border-radius: 2px;
        animation: underlineGlow 2s ease-in-out infinite;
        filter: blur(1px);
    }
    @keyframes gradientFlow {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    @keyframes underlineGlow {
        0%, 100% { box-shadow: 0 0 6px #2196f3, 0 0 12px #e91e63; }
        50%      { box-shadow: 0 0 12px #ffeb3b, 0 0 20px #9c27b0; }
    }

    /* ================== H3 (ملایم با خط چپ رنگی) ================== */
    h3.title {
        position: relative;
        font-size: 1.6rem;
        font-weight: 700;
        color: #333;
        padding-left: 18px;
        margin-top: 2.5em;
    }
    h3.title::before {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 70%;
        background: linear-gradient(180deg,#4caf50,#81c784);
        border-radius: 3px;
    }

    /* ================== H4 (متن خاکستری + افکت سایه نرم) ================== */
    h4.title {
        font-size: 1.4rem;
        font-weight: 600;
        color: #555;
        margin-top: 2em;
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        letter-spacing: 0.5px;
    }

    /* ================== H5 (کپسولی با پس‌زمینه ملایم) ================== */
    h5.title {
        display: inline-block;
        font-size: 1.2rem;
        font-weight: 600;
        color: #444;
        margin-top: 1.8em;
        padding: 0.4em 1.2em;
        background: #e0f7fa;
        border-radius: 20px;
        box-shadow: 0 0 6px rgba(0,0,0,0.08);
    }

    /* ================== H6 (ساده با خط زیر کم‌رنگ) ================== */
    h6.title {
        font-size: 1rem;
        font-weight: 600;
        color: #555;
        margin-top: 1.5em;
        border-bottom: 2px solid #ddd;
        display: inline-block;
        padding-bottom: 0.2em;
    }
    
    
    /* لینک داخل H1 */
h1.title a,
h2.title a,
h3.title a,
h4.title a,
h5.title a,
h6.title a {
    color: inherit;           /* رنگ متن را از هدر بگیرد */
    text-decoration: none;    /* بدون زیرخط */
    transition: color 0.3s;   /* افکت نرم برای هاور */
}

h1.title a:hover,
h2.title a:hover,
h3.title a:hover,
h4.title a:hover,
h5.title a:hover,
h6.title a:hover {
    color: #ff5722;           /* رنگ هاور دلخواه */
}

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .khatdorep {
    font-weight: bold;
    color: #27ae60;
    font-size: 1.5rem;
    direction: rtl;
}

.highlightacckhatdorep {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #27ae60;
}

.highlightacckhatdorep svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    overflow: visible;
    pointer-events: none;
}

.highlightacckhatdorep path {
    fill: none;
    stroke: #f50909;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    pathLength: 1;
    animation: draw 3s linear infinite;
}



@keyframes draw {
    0% { stroke-dashoffset: 1; }
    100% { stroke-dashoffset: 0; }
}



/* کل بخش فروش فوق‌العاده */
.fh-fogholade{
    padding:20px;
    background:#f5f5f7;
    font-family:tahoma,sans-serif;
    direction:rtl;
    text-align:right;
}

.fh-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:20px;
}

.fh-card{
    background:#fff;
    border-radius:12px;
    box-shadow:0 4px 10px rgba(0,0,0,.1);
    overflow:hidden;
    position:relative;
    transition: transform .3s ease, box-shadow .3s ease;
}
.fh-card:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 25px rgba(0,0,0,.2);
}

.fh-img-wrap{
    position:relative;
    width:100%;
    height:400px;
    overflow:hidden;
    border-bottom:1px solid #eee;
}
.fh-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.fh-corner-logo{
    position:absolute;
    top:10px;
    right:10px;
    text-align:center;
}
.fh-corner-logo svg{width:30px;height:30px;display:block;margin:0 auto}
.fh-corner-logo div{font-weight:700;font-size:12px;color:#7a5f2c}

.fh-content{padding:15px;}
.fh-title{font-weight:bold;font-size:16px;margin-bottom:5px;color:#333;}
.fh-subtitle{font-size:14px;color:#666;margin-bottom:10px;}
.fh-price-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
    flex-direction:row-reverse;
}
.fh-price{color:#e53935;font-weight:bold;font-size:18px;}
.fh-badge{background:#eee;padding:4px 10px;border-radius:6px;font-size:12px;}
.fh-progress-wrap{margin-bottom:12px;}
.fh-progress{height:8px;background:#eee;border-radius:6px;overflow:hidden;}
.fh-progress i{display:block;height:100%;background:#e53935;width:0%;transition:width .8s ease-out;}
.fh-labels{display:flex;justify-content:space-between;font-size:12px;color:#555;margin-top:4px;}
.fh-meta{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    color:#555;
    margin-top:8px;
    flex-direction:row-reverse;
}
.fh-stat{text-align:center;margin-right:10px;}
.fh-icons{
    display:flex;
    gap:10px;
    margin-top:10px;
    font-size:12px;
    color:#555;
    flex-direction:row-reverse;
}
.fh-icon-btn{display:flex;align-items:center;gap:4px;}
.fh-icon-btn svg{width:16px;height:16px;}

/* تیتر فروش فوق‌العاده */
.fh-super-sale {
  font-family: Tahoma, sans-serif;
  font-size: 2rem;
  font-weight: bold;
  max-width: 90%;
  text-align: center;
  color: #fff;
  padding: 12px 25px;
  margin: 30px auto;
  background: linear-gradient(45deg,#ffb300,#ff5252);
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform .3s ease;
}
.fh-super-sale::after {
  content: "";
  position: absolute;
  top:0; right:-75%;
  width:50%; height:100%;
  background: rgba(255,255,255,0.3);
  transform: skewX(-20deg);
  transition: right 0.7s ease;
}
.fh-super-sale:hover { transform: scale(1.05);}
.fh-super-sale:hover::after { right:130%;}



.fh-clock {
  cursor: pointer;
  position: relative;
}

.clock-tooltip {
  position: absolute;
  top: 30px; /* زیر ساعت */
  left: 0;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  display: none;
  white-space: nowrap;
}

.fh-clock:hover + .clock-tooltip,
.fh-clock.active + .clock-tooltip {
  display: block;
}


/* دسکتاپ بزرگ */
@media (min-width: 1200px) {
  .fh-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* لپ‌تاپ */
@media (max-width: 1199px) and (min-width: 992px) {
  .fh-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* تبلت */
@media (max-width: 991px) and (min-width: 768px) {
  .fh-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fh-img-wrap { height: 260px; }
}

/* موبایل (تا جای ممکن 2 ستون) */
@media (max-width: 767px) {
  .fh-grid {
    grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
    gap: 12px;
  }
  .fh-img-wrap { height: 200px; }
  .fh-title { font-size: 14px; }
  .fh-subtitle { font-size: 12px; }
  .fh-price { font-size: 15px; }
}

/* موبایل خیلی کوچک - تا وقتی بالای 300 باشه همچنان دو تا */
@media (max-width: 480px) {
  .fh-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .fh-img-wrap { height: 160px; }
  .fh-title { font-size: 13px; }
  .fh-subtitle { font-size: 11px; }
  .fh-price { font-size: 14px; }
}

/* فقط وقتی کمتر از 300 بشه یکی زیر یکی */
@media (max-width: 300px) {
  .fh-grid {
    grid-template-columns: 1fr;
  }
  .fh-img-wrap { height: 150px; }
}



/*امتیاز*/
.emtiyaz-vasat-chin{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 10px;
}

.emtiyaz {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
    border-radius: 25px;
    padding: 2.5rem 2rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 280px;
    color: #1e293b;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.emtiyaz:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.15);
}

.emtiyaz h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    position: relative;
}

.emtiyaz h2::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    margin: 0.5rem auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #6366f1, #3b82f6);
    animation: glowLine 2s infinite alternate;
}

@keyframes glowLine {
    0% { box-shadow: 0 0 5px #6366f1, 0 0 10px #3b82f6; }
    100% { box-shadow: 0 0 15px #6366f1, 0 0 25px #3b82f6; }
}

.emtiyaz .nmn {
    font-size: 0.95rem;
    color: #475569;
    margin-bottom: 1.5rem;
}

.rating {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.star {
    font-size: 2.3rem;
    cursor: pointer;
    color: #e2e8f0;
    transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
    user-select: none;
}

.star:hover,
.star:hover ~ .star {
    color: #facc15;
    transform: scale(1.4) rotate(-10deg);
    text-shadow: 0 6px 14px rgba(250, 204, 21, 0.7);
}

.emtiyaz p {
    font-size: 1rem;
    color: #334155;
    margin: 0.5rem 0 1.5rem;
}

#rating {
    font-weight: bold;
    color: #f59e0b;
}

.emtiyaz button {
    padding: 0.9rem 1.8rem;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    background: linear-gradient(90deg, #6366f1, #3b82f6);
    color: #fff;
    box-shadow: 0 8px 20px rgba(99,102,241,0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.emtiyaz button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 28px rgba(99,102,241,0.5);
    background: linear-gradient(90deg, #4f46e5, #2563eb);
}

.emtiyaz button:active {
    transform: scale(0.97);
}

/* --- ریسپانسیو --- */
@media (max-width: 768px) {
    .emtiyaz {
        max-width: 90%;
        padding: 1.2rem 1rem;
    }

    .emtiyaz h2 {
        font-size: 1.2rem;
    }

    .emtiyaz .nmn {
        font-size: 0.85rem;
    }

    .staremtiyaz {
        font-size: clamp(1rem, 10vw, 1.6rem);
    }

    .emtiyaz p {
        font-size: 0.9rem;
    }

    .emtiyaz button {
        width: 100%;
        font-size: 0.9rem;
        padding: 0.7rem 1rem;
    }

    .rating {
        gap: 0.4rem; /* فاصله کمتر روی موبایل */
    }
}

@media (max-width: 370px) {
    .staremtiyaz {
        font-size: clamp(0.9rem, 12vw, 1.4rem); /* کوچک‌ترین سایز ستاره */
    }
    .rating {
        gap: 0.3rem;
    }
}



.bolded {
  font-weight: 700;                 /* ضخامت واقعی متن */
  color: #222;                      /* رنگ اصلی متن (تیره‌تر برای خوانایی) */
  background: linear-gradient(90deg, #ffbf00 0%, #ff8000 100%);
  -webkit-background-clip: text;    /* اعمال گرادینت فقط روی متن */
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(255, 140, 0, 0.2);
  padding: 0 3px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.bolded:hover {
  text-shadow: 0 0 15px rgba(255, 140, 0, 0.5);
  transform: scale(1.02);
}



 /* این CSS رو یک بار توی پروژه‌ات بذار و دیگه هیچ‌وقت مشکل اسکرول افقی نخواهی داشت */


/* والد گرید (یا هر کانتینری که display: grid یا flex داره) */
.mohtava {
  min-width: 0;                    /* این خط کل مشکل گرید رو حل می‌کنه */
  overflow-x: hidden;              /* یا auto اگر خودت می‌خوای اسکرول افقی بدی */
}

/* جدول اصلی */
.modern-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    text-align: center;
    direction: rtl; /* راست به چپ */
}

/* هدر جدول */
.modern-table th {
    background-color: #2e7d32;
    color: #fff;
    font-weight: 600;
    padding: 12px 15px;
    position: sticky;
    top: 0; /* هدر ثابت هنگام اسکرول */
}

/* سلول‌ها */
.modern-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
}

/* ردیف‌های جدول هنگام هاور */
.modern-table tr:hover td {
    background-color: #f1f8e9;
}

/* ردیف‌های زوج و فرد متفاوت */
.modern-table tr:nth-child(even) td {
    background-color: #f9f9f9;
}

/* کانتینر اسکرول جدول */
/* والد کانتینر جدول برای اسکرول */
.table-wrapper {
  overflow-x: auto;        /* مهم: hidden نباشه */
  -webkit-overflow-scrolling: touch; 
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* خود جدول */
.responsive-table {
  width: 100%;             /* عرض جدول مطابق والد */
  min-width: 90%;        /* عرض حداقل جدول، باعث اسکرول افقی می‌شود اگر والد کوچکتر باشد */
  border-collapse: collapse;
  background: #fff;
  table-layout: auto;      /* مهم: اگر fixed باشه، محتوا ممکنه نریزه بیرون */
}

/* سلول‌ها */
.responsive-table th,
.responsive-table td {
  padding: 14px 12px;
  text-align: center;
  border-bottom: 1px solid #eee;
  white-space: nowrap;     /* جلوگیری از شکست متن */
}

/* هدر ثابت */
.responsive-table th {
  background: #2c3e50;
  color: white;
  position: sticky;
  top: 0;
  z-index: 10;
}


/* اسکرول‌بار قشنگ */
.table-wrapper::-webkit-scrollbar {
  height: 10px;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background: #95a5a6;
  border-radius: 10px;
}
.table-wrapper::-webkit-scrollbar-track {
  background: #ecf0f1;
}



.faq-section {
  max-width: 800px;
  margin: 3rem auto;
  padding: 1rem;
  font-family: "Tahoma", sans-serif;
}

.faq-section h2 {
  text-align: center;
  color: #333;
  margin-bottom: 2rem;
  font-size: 1.6rem;
}

.faq-section details {
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 1rem;
  padding: 1rem 1.2rem;
  transition: all 0.3s ease;
}

.faq-section details[open] {
  background: #e9f5ff;
  border-color: #4caf50;
}

.faq-section summary {
  font-weight: bold;
  color: #222;
  cursor: pointer;
  list-style: none;
}

.faq-section p {
  margin-top: 0.8rem;
  color: #444;
  line-height: 1.7;
}
/* اضافه کردن علامت + و - به FAQ */
.faq-section summary {
  position: relative;
  padding-left: 25px; /* فاصله برای علامت */
}

.faq-section summary::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #4caf50;
  transition: transform 0.3s ease;
}

.faq-section details[open] summary::before {
  content: "-";
  color: #f44336; /* رنگ متفاوت برای باز بودن */
}





/* ===== Action Wrapper ===== */
#actionWrapper{
  direction: rtl;
  position: fixed;
  left: -220px;
  bottom: 25%;
  z-index: 20000;
  display: flex;
  align-items: center;
  transition: left .35s ease;
}

/* باز شدن */
#actionWrapper.active{
  left: 0;
}

/* ===== Arrow Handle ===== */
#arrowHandle{
  width: 36px;
  height: 64px;
  background: #111;
  color: #fff;
  border-radius: 0 12px 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  box-shadow: 4px 0 20px rgba(0,0,0,.35);
}

/* فلش */
#arrow{
  transition: transform .35s ease;
}

/* چرخش فلش */
#actionWrapper.active #arrow{
  transform: rotate(180deg);
}

/* ===== Left Bar ===== */
#leftBar{
  width: 220px;
  padding: 12px;
  background: rgba(20,20,25,.9);
  backdrop-filter: blur(12px);
  border-radius: 0 16px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== Base Buttons ===== */
#leftBar button,
#leftBar a{
  all: unset;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  transition: background .25s, transform .2s;
  text-align: right;
}

/* Hover */
#leftBar button:hover,
#leftBar a:hover{
  transform: translateX(4px);
}

/* ===== Individual Colors ===== */

/* فهرست مطالب */
#leftBar .toc{
  background: #6f42c1;
}
#leftBar .toc:hover{
  background: #5a34a3;
}
.toc button {
    min-width: 14px;
    min-height: 14px;
    
    font-size: 1.2rem;
}


/* شبکه‌های اجتماعی */
#leftBar .social{
  background: #fd7e14;
}
#leftBar .social:hover{
  background: #e96b07;
}

/* واتساپ */
#leftBar .whatsapp{
  background: #25D366;
  color: #000;
  font-weight: 600;
}
#leftBar .whatsapp:hover{
  background: #1ebe5d;
}
/* مسیر یاب بلد */
#leftBar .balad {
    background: #ff5722; /* نارنجی روشن */
    color: #fff;
    font-weight: 600;
    transition: background 0.3s ease;
}
#leftBar .balad:hover {
    background: #e64a19; /* نارنجی تیره‌تر */
}

/* مسیر یاب نشان */
#leftBar .nashan {
    background: #4caf50; /* سبز روشن */
    color: #fff;
    font-weight: 600;
    transition: background 0.3s ease;
}
#leftBar .nashan:hover {
    background: #388e3c; /* سبز تیره‌تر */
}
/* تماس با مدیر */
#leftBar .call{
  background: #0d6efd;
  font-weight: 600;
}
#leftBar .call:hover{
  background: #0b5ed7;
}


@keyframes shakeRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}

/* اعمال انیمیشن روی actionWrapper وقتی باز نیست */
#actionWrapper:not(.active) {
  animation: shakeRight 1s ease-in-out infinite;
}


/*footer--------------------*/
.irs-footer-scope {
    --footer-bg: #333333;
    --footer-text: #e0e0e0;
    --footer-heading: #ffffff;
    --footer-link-hover: #f0f0f0;
    --footer-border: #4f4f4f;

    direction: rtl;
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 3rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
    padding-bottom: 100px;
    margin-bottom: -20px;
    
    
}

/* reset داخلی برای جلوگیری از تداخل */
.irs-footer-scope *,
.irs-footer-scope *::before,
.irs-footer-scope *::after {
    box-sizing: border-box;
}

/* ===== CONTAINER ===== */
.irs-footer-scope .container-footer {
    width: 90%;
    max-width: 1140px;
    margin-inline: auto;
}

/* ===== MAIN GRID ===== */
.irs-footer-scope .footer__main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--footer-border);
}

/* ===== DETAILS ===== */
.irs-footer-scope .footer__details h3 {
    color: var(--footer-heading);
    font-size: 1.25rem;
    margin: 0 0 1.5rem;
}

.irs-footer-scope .footer__details p {
    margin: 0 0 1rem;
}

.irs-footer-scope .footer__details a {
    color: var(--footer-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.irs-footer-scope .footer__details a:hover {
    color: var(--footer-link-hover);
    text-decoration: underline;
}

/* ===== HOURS ===== */
.irs-footer-scope .footer__hours-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.irs-footer-scope .footer__hours-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
}

.irs-footer-scope .footer__hours-list span:first-child {
    font-weight: 500;
}

/* ===== MAP ===== */
.irs-footer-scope .footer__map iframe {
    width: 100%;
    min-height: 250px;
    border: 0;
    border-radius: 8px;
}

/* ===== BOTTOM ===== */
.irs-footer-scope .footer__bottom {
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
}

.irs-footer-scope .footer__copyright {
    margin: 0;
}

/* ===== SOCIAL ICONS (FULLY ISOLATED) ===== */
.irs-footer-scope .footer__social ul {
    all: unset;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.irs-footer-scope .footer__social li,
.irs-footer-scope .footer__social i {
    all: unset;
}

.irs-footer-scope .footer__social a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    transition: background 0.25s ease, transform 0.2s ease;
}

.irs-footer-scope .footer__social a:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-3px);
}

.irs-footer-scope .footer__social img {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
}

/* ===== MOBILE ===== */
@media (max-width: 480px) {
    .irs-footer-scope .footer__social a {
        width: 40px;
        height: 40px;
    }
    .irs-footer-scope .footer__social img {
        width: 20px;
        height: 20px;
    }
}

/* ===== DESKTOP ===== */
@media (min-width: 992px) {
    .irs-footer-scope .footer__main {
        grid-template-columns: 1fr 1.2fr;
        gap: 4rem;
    }

    .irs-footer-scope .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }

    .irs-footer-scope .footer__social ul {
        justify-content: flex-end;
    }

    .irs-footer-scope .footer__social a {
        width: 48px;
        height: 48px;
    }

    .irs-footer-scope .footer__social img {
        width: 24px;
        height: 24px;
    }
}

/* استایل ایزوله برای لینک کپی‌رایت */
.irs-footer-scope .footer__copyright a {
    color: #ffd966; /* زرد روشن برای کنتراست با بک‌گراند تیره */
    font-weight: 600;
    text-decoration: underline; /* زیرخط برای مشخص شدن لینک */
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.irs-footer-scope .footer__copyright a:hover {
    color: #fff; /* سفید در هاور */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* ایجاد جلوه برجسته */
}