body::-webkit-scrollbar {
  width: 12px;
  }
  body::-webkit-scrollbar-track {
  background: #f1f1f1;
  }
  body::-webkit-scrollbar-thumb {
  background-color: #f1f1f1; 
  border-radius: 6px; 
  border: 1px solid #333; 
  }
  a {color: #cc9933;
  }
  .scrollmenu {
  overflow: auto;
  height: 650px;
  width: 500px;
  }
  .redtext {
  color: brown;
  font-size: 13px;
  text-align: center;
  padding: 2px;
  }
  /*search result test */
   #avsyRoot{ font-family: inherit; }
  #avsyRoot *{ box-sizing: border-box; }

  .search-results-wrap{ max-width:1320px; margin:0 auto; padding:0 20px 60px; }
  .search-results-head{ margin:34px 0 26px; text-align:center; }
  .search-results-head .product-p{ margin:6px 0 0; color:#888; font-size:14px; }

  /* ---- نوار فیلتر برند ---- */
  .avsy-filters{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:28px; }
  .avsy-filters button{
    border:1px solid #ddd; background:#fff; padding:7px 18px; border-radius:24px;
    font-size:12.5px; cursor:pointer; color:#444; transition:.15s;
  }
  .avsy-filters button:hover{ border-color:#999; }
  .avsy-filters button.is-active{ background:#1a1a1a; color:#fff; border-color:#1a1a1a; }

  /* ---- گرید محصولات ---- */
  .search-results-grid{
    display:grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap:24px;
  }

  .avsy-card{
    display:flex !important; flex-direction:column !important;
    background:#fff; border-radius:16px; overflow:hidden;
    text-decoration:none !important; color:#1a1a1a !important;
    border:1px solid #ececec;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .avsy-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 34px rgba(0,0,0,.10);
    border-color:#e2e2e2;
  }

  .avsy-card__media{
    position:relative; width:100%; aspect-ratio:1/1; background:#f6f6f7;
    display:flex !important; align-items:center; justify-content:center; overflow:hidden;
  }
  .avsy-card__media img{
    width:100%; height:100%; object-fit:contain; padding:14px;
    transition:transform .3s ease;
  }
  .avsy-card:hover .avsy-card__media img{ transform:scale(1.05); }

  .avsy-card__brand-badge{
    position:absolute; top:10px; right:10px;
    background:rgba(255,255,255,.92); backdrop-filter:blur(2px);
    font-size:10.5px; font-weight:700; letter-spacing:.04em;
    padding:4px 10px; border-radius:20px; color:#1a1a1a;
    text-transform:uppercase;
  }

  .avsy-card__body{ padding:16px 16px 18px; display:flex !important; flex-direction:column !important; flex:1; }
  .avsy-card__title{
    font-size:14.5px; font-weight:700; line-height:1.6; margin:0 0 8px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .avsy-card mark{ background:#ffe28a; padding:0 2px; border-radius:2px; }

  .avsy-card__meta{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:12px; border-top:1px solid #f1f1f1; }
  .avsy-card__cat{ font-size:11.5px; color:#999; }
  .avsy-card__cta{
    font-size:12px; font-weight:600; color:#1a1a1a;
    display:flex; align-items:center; gap:4px;
  }
  .avsy-card__cta::after{ content:"←"; transition:transform .2s; }
  .avsy-card:hover .avsy-card__cta::after{ transform:translateX(-4px); }

  /* ---- اسکلت بارگذاری (به‌جای متن ساده‌ی "در حال بارگذاری") ---- */
  .avsy-skeleton-card{ background:#fff; border-radius:16px; border:1px solid #ececec; overflow:hidden; }
  .avsy-skeleton-media{ width:100%; aspect-ratio:1/1; background:linear-gradient(90deg,#f0f0f0 25%,#f7f7f7 37%,#f0f0f0 63%); background-size:400% 100%; animation:avsyShimmer 1.4s ease infinite; }
  .avsy-skeleton-line{ height:10px; background:#eee; border-radius:6px; margin:14px 16px; }
  .avsy-skeleton-line.short{ width:60%; }
  @keyframes avsyShimmer{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

  /* ---- خالی / خطا ---- */
  #avsySearchEmpty{ text-align:center; padding:80px 16px; color:#999; }
  #avsySearchEmpty .avsy-empty-icon{ font-size:40px; margin-bottom:14px; opacity:.5; }
  #avsySearchEmpty .avsy-empty-hint{ font-size:13px; color:#bbb; margin-top:6px; }

  /* ---- محصولات مرتبط ---- */
  .avsy-related-heading{ max-width:1320px; margin:44px auto 16px; padding:0 20px; font-size:16px; font-weight:700; border-right:4px solid #1a1a1a; padding-right:14px; }
  .avsy-related-row{ max-width:1320px; margin:0 auto 10px; padding:0 20px; display:flex !important; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; }
  .avsy-related-row .avsy-card{ min-width:190px; max-width:190px; flex:0 0 auto; scroll-snap-align:start; }
  /* header */
  /* Countdown Timer */
  /* sociali */
  .socialicone {
  color: #333;
  text-align: center;
  font-size: 18px;
  opacity: 0.8;
  }
  .ulso {
  transform: translate(-5%, -5%);
  margin:10%;
  padding:2px;
  display:flex;
  justify-content: left;
  }
  .liso {
  list-style: none;
  }
  .liso a {
  width:50px;
  height:50px;
  display:block;
  text-align:center;
  margin:0 10px;
  border-radius: 50%;
  padding: 6px;
  box-sizing: border-box;
  text-decoration:none;
  box-shadow: 0 10px 15px rgba(0,0,0,0.3);
  background: linear-gradient(0deg, #ddd, #f1f1f1);
  transition: .5s;
  }
  .liso a:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }
  .liso a .fab {
  width: 100%;
  height:100%;
  display:block;
  background: linear-gradient(0deg, #f1f1f1, #ddd);
  border-radius: 50%;
  line-height: calc(60px - 12px);
  font-size:25px;
  color: #262626;
  transition: transform .6s;
  }
  .liso:nth-child(1) a:hover .fab {
  color: #e4405f;
  }
  .liso:nth-child(2) a:hover .fab {
  color: #fa2943;
  }
  .liso:nth-child(3) a:hover .fab {
  color: #00aced;
  }
  .liso:nth-child(4) a:hover .fab {
  color: #1fd861;
  }
  .liso:nth-child(5) a:hover .fab {
  color: #ff0033;
  }
  
  .liso:nth-child(6) a:hover .fab {
  color: #e60023;
  }
  /* logo */
  .navbarLogo a {
   display: flex;
   } 
  .logo-responsive{
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-left:auto;
  margin-right:auto;
  width: min(50vw, 200px);
  padding: 5px 5px;
  opacity: 0.8;
  transition: transform .5s;
  }
  .logo-responsive:hover{
  transform: scale(1.05); 
  opacity: 1;
  }
  /* search1 */
  .sbtn {
  position: relative;
  display: flex;
  justify-content: center;
  padding:2px;
  width: 300px;
  flex-direction: row;
  height: 100px;
  }
  .searchbt{
appearance:none;
-webkit-appearance:none;
border:none;
outline:none;
padding:0;
margin:0;
background:linear-gradient(0deg,#ddd,#f1f1f1);
}
  button.searchbt {
  position: absolute; 
  margin: auto;
  text-align:center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  padding: 6px;
  background: linear-gradient(0deg, #ddd, #f1f1f1);
  box-sizing: border-box;
  border-radius: 50%;
    z-index: 4;
  transition: all 1s;
  box-shadow: 0 10px 15px rgba(0,0,0,0.3);
  }
  button.searchbt:hover {
  cursor: pointer;
  }
  button.searchbt::before {
  content: "";
  position: absolute;
  margin: auto;
  top: 22px;
  right: 0;
  bottom: 0;
  left: 22px;
  width: 12px;
  height: 2px;
  background: #333;
  transform: rotate(45deg);
  transition: all 0.5s;
  }
  button.searchbt::after {
  content: "";
  position: absolute;
  margin: auto;
  top: -5px;
  right: 0;
  bottom: 0;
  left: -5px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 2px solid #333;
  transition: all 0.5s;
  }
   .sbtn input {
  all: unset;
  font-family: Helvetica;
  font-size: 15px;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  outline: none;
  border: none;
  background: #f1f1f1;
  color: #333;
  text-shadow: 0 0 10px #f1f1f1;
  padding: 0 80px 0 20px;
  border-radius: 30px;
  box-shadow: 0 0 25px 0 #f1f1f1, 0 20px 25px 0 rgba(0, 0, 0, 0.2);
  transition: all 1s;
  opacity: 0;
  z-index: 5;
  letter-spacing: 0.1em;
  }
   .sbtn input:hover {
  cursor: pointer;
  }
   .sbtn input:focus {
  width: 300px;
  opacity: 1;
  cursor: text;
  }
   .sbtn input:focus ~ .searchbt {
  right: -250px;
  background: #f1f1f1;
  z-index: 6;
  }
  .sbtn input:focus ~ .searchbt::before {
  top: 0;
  left: 0;
  width: 25px;
  }
  .sbtn input:focus ~ .searchbt::after {
  top: 0;
  left: 0;
  width: 25px;
  height: 2px;
  border: none;
  background: #333;
  border-radius: 0%;
  transform: rotate(-45deg);
  }
  .imgGH{
  font-family: Helvetica;
  font-size: 1em;
  color: #333;
   }
   /*==============================
SEARCH CARD
===============================*/

  #avsyRoot{ font-family: Arial, Helvetica, sans-serif; }
  #avsyRoot *{ box-sizing: border-box; }

  .search-results-wrap{ max-width:1320px; margin:0 auto; padding:0 20px 60px; }
  .search-results-head{ margin:34px 0 26px; text-align:center; }
  .search-results-head .product-p{font-weight: 500; letter-spacing: 1.5px; line-height: 1.42;
  margin: 2%; color:#333; font-size:13px; word-wrap: break-word;  text-align: justify;  padding: 10px; }

  /* ---- فیلتر برند ---- */
  .avsy-filters{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:28px; }
  .avsy-filters button{ border:1px solid #ddd; background:#fff; padding:7px 18px; border-radius:24px; font-size:12.5px; cursor:pointer; color:#444; transition:.15s; }
  .avsy-filters button:hover{ border-color:#999; }
  .avsy-filters button.is-active{ background:#1a1a1a; color:#fff; border-color:#1a1a1a; }

  /* ---- سرتیتر گروه‌بندی (Product / Category / Page) ---- */
  .avsy-group-heading{ font-size:14px; font-weight:700; color:#555; margin:36px 0 16px; padding-right:12px; border-right:3px solid #1a1a1a; }
  .avsy-group-heading:first-of-type{ margin-top:0; }

  /* ============================================================
     کارت فشرده (grid) — طبق مشخصات: عکس ۱۴۰-۱۶۰px، عنوان،
     برند/دسته/سری، توضیح کوتاه، "مشاهده محصول"
     ============================================================ */
  .search-results-grid{
    display:grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap:18px;
  }
  .avsy-card{
    display:flex !important; flex-direction:row !important; gap:14px;
    background:#fff; border-radius:14px; padding:12px;
    text-decoration:none !important; color:#1a1a1a !important;
    border:1px solid #ececec; box-shadow:0 1px 3px rgba(0,0,0,.04);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .avsy-card:hover{ transform:translateY(-3px); box-shadow:0 14px 26px rgba(0,0,0,.09); border-color:#e2e2e2; }

  .avsy-card__media{
    flex:0 0 140px; width:140px; height:140px; border-radius:10px;
    background:#f6f6f7; display:flex !important; align-items:center; justify-content:center; overflow:hidden;
    position:relative;
  }
  .avsy-card__media img{ width:100%; height:100%; object-fit:contain; padding:8px; }
  .avsy-card__badge{ position:absolute; top:6px; right:6px; background:#1a1a1a; color:#fff; font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:10px; }

  .avsy-card__body{ display:flex !important; flex-direction:column !important; flex:1; min-width:0; }
  .avsy-card__title{ font-size:14px; font-weight:700; line-height:1.5; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .avsy-card__meta{ font-size:11.5px; color:#999; margin-bottom:6px; }
  .avsy-card__meta b{ color:#666; font-weight:600; }
  .avsy-card__desc{ font-size:12px; color:#777; line-height:1.6; margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .avsy-card__cta{ margin-top:auto; font-size:12px; font-weight:700; color:#1a1a1a; display:flex; align-items:center; gap:4px; }
  .avsy-card__cta::after{ content:"←"; transition:transform .2s; }
  .avsy-card:hover .avsy-card__cta::after{ transform:translateX(-4px); }
  .avsy-card mark{ background:#ffe28a; padding:0 2px; border-radius:2px; }

  /* ============================================================
     Hero Card — وقتی فقط یک نتیجه پیدا شود
     ============================================================ */
  .avsy-hero{
    display:flex !important; gap:36px; background:#fff; border:1px solid #ececec;
    border-radius:20px; padding:30px; box-shadow:0 4px 20px rgba(0,0,0,.05);
  }
  .avsy-hero__media{ flex:0 0 320px; height:320px; background:#f6f6f7; border-radius:16px; display:flex !important; align-items:center; justify-content:center; overflow:hidden; position:relative; }
  .avsy-hero__media img{ width:100%; height:100%; object-fit:contain; padding:20px; }
  .avsy-hero__badge{ position:absolute; top:14px; right:14px; background:#1a1a1a; color:#fff; font-size:11px; font-weight:700; padding:4px 12px; border-radius:14px; }

  .avsy-hero__body{ flex:1; display:flex !important; flex-direction:column !important; justify-content:center; }
  .avsy-hero__meta{ font-size:12.5px; color:#999; margin-bottom:8px; }
  .avsy-hero__meta b{ color:#555; font-weight:700; }
  .avsy-hero__title{ font-size:24px; font-weight:800; margin:0 0 14px; line-height:1.5; }
  .avsy-hero__title mark, .avsy-hero__desc mark{ background:#ffe28a; padding:0 3px; border-radius:2px; }
  .avsy-hero__desc{ font-size:14.5px; color:#555; line-height:2; margin:0 0 18px; }
  .avsy-hero__features{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
  .avsy-hero__features span{ background:#f4f4f5; color:#555; font-size:11.5px; padding:5px 12px; border-radius:16px; }
  .avsy-hero__cta{ display:inline-flex; align-items:center; gap:6px; background:#1a1a1a; color:#fff !important; text-decoration:none !important; padding:12px 26px; border-radius:10px; font-size:14px; font-weight:700; width:fit-content; transition:.2s; }
  .avsy-hero__cta:hover{ background:#000; }
  .avsy-hero__cta::after{ content:"←"; }

  /* ---- انتخاب مدل دیگر همان سری (از related) ---- */
  .avsy-variants{ margin-top:26px; }
  .avsy-variants h4{ font-size:12.5px; color:#888; margin:0 0 10px; font-weight:600; }
  .avsy-variants__list{ display:flex; flex-wrap:wrap; gap:8px; }
  .avsy-variants__item{
    display:flex; align-items:center; gap:6px; border:1px solid #ddd; border-radius:8px;
    padding:8px 14px; font-size:12.5px; color:#333; text-decoration:none !important;
    transition:.15s;
  }
  .avsy-variants__item:hover{ border-color:#1a1a1a; background:#faf9f8; }
  .avsy-variants__item .avsy-checkbox{ width:14px; height:14px; border:1.5px solid #999; border-radius:3px; flex:0 0 auto; }

  /* ---- اسکلت بارگذاری ---- */
  .avsy-skeleton-card{ display:flex; gap:14px; background:#fff; border:1px solid #ececec; border-radius:14px; padding:12px; }
  .avsy-skeleton-media{ flex:0 0 140px; width:140px; height:140px; border-radius:10px; background:linear-gradient(90deg,#f0f0f0 25%,#f7f7f7 37%,#f0f0f0 63%); background-size:400% 100%; animation:avsyShimmer 1.4s ease infinite; }
  .avsy-skeleton-lines{ flex:1; padding-top:6px; }
  .avsy-skeleton-line{ height:10px; background:#eee; border-radius:6px; margin-bottom:10px; }
  .avsy-skeleton-line.short{ width:55%; }
  @keyframes avsyShimmer{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

  #avsySearchEmpty{ text-align:center; padding:80px 16px; color:#999; }
  #avsySearchEmpty .avsy-empty-icon{ font-size:40px; margin-bottom:14px; opacity:.5; }
  #avsySearchEmpty .avsy-empty-hint{ font-size:13px; color:#bbb; margin-top:6px; }

  .avsy-related-heading{ max-width:1320px; margin:44px auto 16px; padding:0 20px; font-size:16px; font-weight:700; border-right:4px solid #1a1a1a; padding-right:14px; }
  .avsy-related-row{ max-width:1320px; margin:0 auto 10px; padding:0 20px; display:flex !important; gap:14px; overflow-x:auto; scroll-snap-type:x proximity; }
  .avsy-related-row .avsy-card{ min-width:250px; max-width:250px; flex:0 0 auto; flex-direction:column !important; scroll-snap-align:start; }
  .avsy-related-row .avsy-card__media{ width:100%; height:140px; flex:none; }

  /* ---- ریسپانسیو ---- */
  @media (max-width:640px){
    .search-results-grid{ grid-template-columns:1fr !important; }
    .avsy-card{ flex-direction:row !important; }
    .avsy-card__media{ flex-basis:110px; width:110px; height:110px; }
    .avsy-hero{ flex-direction:column !important; padding:20px; gap:20px; }
    .avsy-hero__media{ flex-basis:auto; width:100%; height:240px; }
    .avsy-hero__title{ font-size:19px; }
  }
  /*serch test result*/
  .autocombox li{
  background-color: #333;
   width: 350px;
  list-style: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 3px;
  }
  .autocombox li:hover {
  background-color: #f1f1f1;
  }
  .resultBox li{
  list-style: none;
  padding: 8px 12px;
  display: none;
  width: 100%;
  cursor: default;
  border-radius: 3px;
  }
  .searchInput.active .resultBox li{
  display: block;
  }
  .resultBox li:hover{
  background: #f1f1f1;
  }
  .searchInput .icon{
  position: absolute;
  right: 0px;
  top: 0px;
  height: 55px;
  width: 55px;
  text-align: center;
  line-height: 55px;
  font-size: 20px;
  color: #333;
  cursor: pointer;
  }
  /*Scroll Back To Top*/
  #topBtn{
display:none;
position:fixed;
right:65px;
bottom:30px;
z-index:9999;
width:60px;
height:60px;
padding:0;
border:none;
outline:none;
border-radius:40%;
background:transparent ;
cursor:pointer;
opacity:.7;
transition:.3s ease;
}
#topBtn:hover{
opacity:1;
}
.to-top{
display:block;
width:100%;
height:100%;
position:relative;
color:#f1f1f1;
transition:.3s ease;
}
.to-top::before{
content:"▲";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:1.5em;
height:1.5em;
line-height:1.35em;
text-align:center;
font-size:2em;
border:.13em solid currentColor;
border-radius:50%;
transition:transform .5s ease;
}
#topBtn:hover .to-top{
color:#333;
}
#topBtn:hover .to-top::before{
transform:translate(-50%,-50%) rotate(360deg);
}
  /*side barmenu */
  .dot, .dot:before, .dot:after {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: #333;
  }
  .dot {
  margin-top: -10px;
  margin-left: -10px;
  }
  .dot:before, .dot:after {
  content: "";
  }
  .dot:before {
  right: 25px;
  transition: right .3s ease-out;
  }
  .dot:after {
  left: 25px;
  transition: left .3s ease-out;
  }
  .dots:hover .dot:before {
  right: -25px;
  }
  .dots:hover .dot:after {
  left: -25px;
  }
  .avaHover::before {
  transform: scaleX(0);
  transform-origin: bottom right;
  }
  .avaHover:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  }
  .avaHover::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: #333;
  opacity: 0.6;
  z-index: -1;
  transition: transform .3s ease;
  }
  .avaHover {
  position: relative;
  font-size: 2rem;
  }
  @media (orientation: landscape) {
  body {
  grid-auto-flow: column;
  }
  }
  .opennAvaAnimate {
   display: inline;
   cursor: pointer;
  }
  .accordion {
  border-radius: 2px;
  border: none;
  color: #333;
  text-align: left;
  font-size: 16px;
  padding: 8px;
  width: 100%;
  transition: all 0.5s;
  cursor: pointer;
  margin: 1px;
  }
  .accordion h2 {
  font-size: 13px;
  cursor: pointer;
  display: inline-block;
  transition: 0.5s;
  }
  .accordion h2:after {
  content: '\00bb';
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  }
  .accordion:hover h2 {
  padding-right: 20px;
  }
  .accordion:hover h2n:after {
  opacity: 1;	
  border-color:#333;
  right: 0;
  }
  .accordion.active,
.accordion:hover {
  background-color:#333;
  font-weight: bold;
  width: 100%;
  opacity: 0.5;
  color: #f1f1f1; 
  transition: 0.5s;
  padding-right: 25px;
  }
  .panel {
  padding: 0px;
  background-color: #f1f1f1;
  display: none;
  overflow: auto;
  }
  .nav-item h2,h3 {
  font-size: 12px;
  }
  .nav-item h2,h3:hover{
  font-size:13px;
  font-weight: bold; 
  transition: 0.5s;
  
  }
  /* Breadcrumbs */ 
  .breadcrumb-wrapper{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

  ul.breadcrumb {
  display: flex;
  flex-wrap: wrap;          /* اجازه‌ی شکستن خط، به جای بیرون‌زدگی */
  align-items: center;
  padding: 10px 16px;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
  }
  ul.breadcrumb li {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #cc9933;
  white-space: nowrap;
  }
  ul.breadcrumb li:last-child{
  color: #333;
  font-weight: 600;
  white-space: normal;
}
  ul.breadcrumb li+li:before {
  content: "/";
  padding: 0 8px;
  color: #cc9933;
  font-family: Helvetica, Arial, sans-serif;
  }
  ul.breadcrumb li a {
  text-decoration: none;
  color: #6e6e6e;
  opacity: 0.7;
  transition: opacity .2s ease, color .2s ease;
  }
 ul.breadcrumb li a:hover,
ul.breadcrumb li a:focus-visible{
  opacity: 1;
  color: #cc9933;
}
  .text-right {
  text-align: justify;
   text-align-last: right;
  }
  /* Breadcrumb با لوگو */
ul.breadcrumblogo{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 0;
  list-style: none;
}

ul.breadcrumblogo li{
  width: 100px;
}

ul.breadcrumblogo li img{        /* سلکتور اشتباه .ul.breadcrumblogo اصلاح شد */
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

ul.breadcrumblogo li + li::before{
  padding: 10px;
  color: #333;
  font-family: Helvetica, Arial, sans-serif;
  cursor: pointer;
}

ul.breadcrumblogo li a{
  text-decoration: none;
  color: #6e6e6e;
  opacity: 0.6;
  transition: opacity .2s ease, color .2s ease;
}

ul.breadcrumblogo li a:hover{
  opacity: 1;
  color: #333;
}

.breadcrumblogo p{
  font-size: 1rem;
  margin: 0 0 9.5px;
}

/* واکنش‌گرا برای موبایل */
@media (max-width: 576px){
  ul.breadcrumb{ padding: 8px 12px; }
  ul.breadcrumb li{ font-size: 12px; }
  ul.breadcrumb li + li::before{ padding: 0 5px; }
}
   /* tabs */ 
   .downloadLink a:link, a:visited {
   color: #333;
   display:block;
   text-align:center;
   margin:0 5px;
   border-radius: 25px;
   padding: 2px;
   box-sizing: border-box;
   text-decoration:none;
   box-shadow: 0 10px 15px rgba(0,0,0,0.3);
   background: linear-gradient(0deg, #ddd, #f1f1f1);
   transition: .5s;
  }
  .downloadLink a:hover, a:active {
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }
  /* small postcard info */ 
  .sPo-card-4 {
  max-width: 300px;
  height: 400px;
  background-color: #f1f1f1;
  border-radius: 20px;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  margin: 10px auto;
  cursor: pointer;
  }
  .product-p-flex {
  display: flex;
  flex-wrap: wrap;
  }
  .product-p-r {
  padding: 10px;
  flex: 50%;
  }
  .product-p-l {
  padding: 10px;
  flex: 50%; 
   }
  @media (max-width: 800px) {
  .product-p-r, .product-p-l {
  flex-direction: column;
  }
  }
  .sPo-card img{
  max-width: 250px;
  height: auto;
  background-color: #f1f1f1;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
  overflow: hidden;
  position: relative;
  margin: 10px auto;
  cursor: pointer; 
  }
  .sPo-card-4 img {
  transition: all 0.25s linear;
  }
  .sPo-card-4 .sPo-content {
  position: relative;
  padding: 15px;
  background-color: #f1f1f1;
  }
  .sPo-card-4 .sPo-name {
  position: absolute;
  left: 0px;
  right: 0px;
  top: -70px;
  color: #333;
  font-size: 17px;
  }
  .sPo-card-4 .sPo-name p {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  }
  .sPo-card-4 .sPo-description {
  color: #777;
  font-size: 12px;
  padding: 10px;
  }
  .sPo-card-4 .sPo-overview {
  padding: 15px 0px;
  }
  .sPo-card-4 .sPo-overview p {
  font-size: 10px;
  font-weight: 600;
  color: #777;
  }
  .sPo-card-4 .sPo-overview h4 {
  color: #273751;
  font-weight: bold;
  }
  .sPo-card-4 .sPo-content::before {
  content: "";
  position: absolute;
  height: 20px;
  top: -10px;
  left: 0px;
  right: 0px;
  background-color: #f1f1f1;
  z-index: 0;
  transform: skewY(3deg);
  }
  .sPo-card-4:hover img {
  transform: rotate(5deg) scale(1.1, 1.1);
  filter: brightness(110%);
  }
  /* Image Grid */ 
  .ImageGridRow {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  }
  .ImageGridColumn {
  flex: 25%;
  max-width: 25%;
   }
  .ImageGridColumn img {
  vertical-align: middle;
  padding: 10px;
  width: 100%;
  }
  .container {
  position: relative;
  }
  .image {
  display: block;
  width: 640px;
  height: auto;
  }
  .topOverlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(200, 200, 200, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  height: 100px;
  transition: .5s ease;
  opacity:1;
  color: #f1f1f1;
  font-size: 20px;
  padding: 20px;
  margin-bottom: 100px;
  text-align: center;
  border-radius: 5px;
  }
  .container:hover .topOverlay {
  opacity: 0;
  }
  .ImageGridColumn a{
  display: block;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.5s;
   }
  .ImageGridColumn h5 {
  font-family: Helvetica;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
   } 
  .textTopBott {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  }
  @media screen and (max-width: 800px) {
  .ImageGridColumn {
  flex: 50%;
  max-width: 50%;
  }
  }
  @media screen and (max-width: 600px) {
  .ImageGridColumn {
  flex: 100%;
  max-width: 100%;
  }
  } 
  /*slide show*/
  .slider {
  width: 100%;
  min-height: 700px; 
  margin-top: 10px;
  position: relative;
   }
  .slideshowpic {
  list-style-type: none;
  }
  /** slideshowpic **/
  .slideshowpic,
  .slideshowpic:after {
  top: 50px;
  width: 100%;
  height: 100%;
  }
  .brandsimgbg {
  background-color:hsla(0, 18%, 89%, 0.344);
  border-radius: 8px;
   }
  .brandsimgbga {
  width: 100px;
  margin: 5px;
  padding: 5px;
  cursor: pointer;
  }
  .slideshowpic li span {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 5%;
  background-position: center;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  opacity: 0;
  z-index: 0;
  animation: imageAnimation 42s linear infinite 0s;
  }
  
  .slideshowpic li:nth-child(1) span {
  background-image: url("../pic/banner-HIFI-speakers-without-compromise.png");
  }
  .slideshowpic li:nth-child(2) span {
  background-image: url("../pic/concept_500_Q-Acoustics-quickly-built.jpg");
  animation-delay: 6s;
  }
  .slideshowpic li:nth-child(3) span {
  background-image: url("../pic/qacoustics-SUB80-white-with-M40.1.jpg");
animation-delay: 12s;
  }
  .slideshowpic li:nth-child(4) span {
  background-image: url("../pic/advance-paris_homepage-header-banner.png");
  animation-delay: 18s;
  }
  .slideshowpic li:nth-child(5) span {
  background-image: url("../pic/goldring-banner-gr3.jpg");
  animation-delay: 24s;
  }
  .slideshowpic li:nth-child(6) span {
  background-image: url("../pic/qedfront.jpg");
  animation-delay: 30s;
  }
  .slideshowpic li:nth-child(7) span {
  background-image: url("../pic/ifi-ZEN-CAN-SIGNATURE.webp");
  animation-delay: 36s;
  }
  .slideshowpic li:nth-child(8) span {
  background-image: url("../pic/advanceparis-myconnect-250-all-in-one-banner.webp");
  animation-delay: 42s;
  }
  @keyframes imageAnimation {
  0% {
  opacity: 0;
  animation-timing-function: ease-in;
  }
  8% {
  opacity: 1;
  animation-timing-function: ease-out;
  }
  17% {
  opacity: 1;
  }
  25% {
  opacity: 0;
  }
  100% {
  opacity: 0;
  }
  }
  @keyframes titleAnimation {
  0% {
  opacity: 0;
  }
  8% {
  opacity: 1;
  }
  17% {
  opacity: 1;
  }
  19% {
  opacity: 0;
  }
  100% {
  opacity: 0;
  }
  }
  .no-cssanimations .cb-slideshowpic li span {
  opacity: 1;
  }
  /*parallex*/
  .parallaxtextIn {
  font-size: xx-large;
  color: #f1f1f1;
  font-weight:bolder;
  text-align: center;
  padding: auto;
  }
  .parallaxtext {
  font-size: xx-large;
  font-weight:bolder;
  color: #f1f1f1;
  text-align: center;
  letter-spacing: 5px;
  top: 50%;
  left: 50%;
  padding: 150px;
  opacity: 0.5;
  }
  /*parallex2*/
  .parallax-inner{
  position:relative;
  min-height: 500px;
  background-position: top center;
  background-attachment: fixed;
  background-size: cover;
  border-radius: 5%;
  }
  .parallax-inner > h4{
  color: #333;
  background-color: rgba(255 255 255 / 0.2);
  text-transform: uppercase;
  letter-spacing: 10px;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -20.5px;
  width: 100%;
  text-align: center;
  }
  .bgrs {background: url("../pic/parallaxContainer_image_speaker.jpg");}
  .bgrfs {background: url("../pic/parallaxContainer_image_speaker.jpg");}
  .bgr5s {background: url("../pic/banner-50505040.webp");} 
  .bgr3cs {background: url("../pic/3000c-pp4-4c.webp");}
  .bgr3s {background: url("../pic/banner-3000series.webp");} 
  .bgrfs2 {background-image: url("../pic/concept_500_Q-Acoustics-quickly-built.jpg");}
  .bgrfs2b {background-image: url("../pic/concept_500_Evolution-Refinement-Perfection.jpg");}
  .bgras {background-image: url("../pic/Q_Active_400_Design.jpg");}
  .bgrWOS {background-image: url("../pic/q_Active_200_Design.jpg");}
  .bgrdspb {background-image: url("../pic/parallax-YSP-banner-5600_main.jpg");}
  .bghd2 {background-image: url("../pic/ifi-hip-dac-2-Shooting-from-the-hip-banner.webp");}
  .bghipd2 {background-image: url("../pic/iFi-hd2-banner.webp");}
  .bghipdac2 {background-image: url("../pic/hip-dac2-banner3.webp");}
  .bgGp {background-image: url("../pic/ifi-go-pod-GO-wireless-GO-pod-gp-ear.webp");}
  .bgpis {background-image: url("../pic/Pro-iCAN-signature-PCB_banner.webp"); }
  .bgpisb {background-image: url("../pic/iCAN-Signature-by-name-banner.webp");}
  .bgpicans {background-image: url("../pic/iPower-Elite-Power-is-everything.webp");}
  .bg2is {background-image: url("../pic/ifi-A-tale-of-two-input-stages-DSCF.webp");}
  .bgu {background-image: url("../pic/uno-small enough-banner.webp");}
  .bguno {background-image: url("../pic/ifi-uno-DAC-s-the-ticket-banner.webp");}
  .bgun {background-image: url("../pic/uno-Work-Chill-Play-banner.webp"); }
  .bgipah {background-image: url("../pic/iFi-Phantom-network-connected-control-banner.webp");}
  .bgicanph{background-image: url("../pic/iFi-Phantom-Bias-voltage-simplified.webp");}
  .bgGpo{background-image: url("../pic/ifi-go-pod-Hooks-cropped-a2dc.webp");}
  .bgrBSh {background-image: url("../pic/q-ACOUSTICS-M20-music,-movies-and-gamingb.jpg");}
  .bgcs {background-image: url("../pic/q-Acoustics-3090Ci-center-speaker-banner.jpg");}
  .bgavr {background-image: url("../pic/paralleximg-Receiver-Banner_Product_v6a.jpg");}
  .bgrinA {background-image: url("../pic/advanceparis-LIFESTYLE-A10-Classic_11zon.webp");}
  .bgrpreA {background-image: url("../pic/XP700-Backpanel.jpg");}
  .bgrcas {background-image: url("../pic/q-A…300_Silver_Ebony_Stands_Grille-Off_Lifestyle.jpeg");}
  .bgrpa {background-image: url("../pic/yamaha-M-5000_ap.jpg");}
  .bgneoidsd {background-image: url("../pic/neo-idsd-_Movies-and-gaming-upsampled-.webp");}
  .bgneoIdsdhiRes {background-image: url("../pic/banner-Hi-res-heaven.webp");}
  .bgrcdp {background-image: url("../pic/parallaxContainer-STEREO & NETWORK RECEIVER-r-n803__main.jpg");}
  .bgrSUB {background-image: url("../pic/q-SUB-series-web-banner-Desktop.png");}
  .bgrSP {background-image: url("../pic/home-cinema-banner.jpg");}
  .bgpsnr {background-image: url("../pic/r-n803__Optimised-for-the-ultimate.webp");}
  .bgpps {background-image: url("../pic/ifi-zen-phono-banner.webp");}
  .bgpps2 {background-image: url("../pic/ifi-ZEN-Air-Phono-banner.webp");}
  .bgppdab {background-image: url("../pic/GO-link-Headphone-heaven.webp");}
  .bgrpAm {background-image: url("../pic/advanceparis-X-A160-EVO_BACK_V2.jpg");}
  .bgrin {background-image: url("../pic/in-Wall-Speaker-Banner.webp");}
  .bgron {background-image: url("../pic/rain-or-shine-yamaha-NS-AW294.jpg");}
  .bgrnP {background-image: url("../pic/banner-NETWORKSTREAMER-neos.webp");}
  .bgrsc {background-image: url("../pic/speakercable.webp");}
  .bgrpas {background-image: url("../pic/ifi-aurora-speakers-banner.webp");}
  .bgrsnR {background-image: url("../pic/yamaha-R-N803_ap.jpg");}
  .bgrtT {background-image: url("../pic/goldring-GR3-with-Q-Acoustics-M40.jpg");}
  .bgrhphr {background-image: url("../pic/parallaxContainer_headphone_BrandImage2021.jpg");}
  .bgracces {background-image: url("../pic/parallaxContainer_image_goldring_turntable_eroica_hx.jpg");}
  .bgpdab {background-image: url("../pic/parallaxContainer_image_portale-dac-amp-blutooth.jpg");}
  .bgpdabi {background-image: url("../pic/GO_blu_pocket-rocket-portable-HD-DAC.webp");}
  .bgpdha {background-image: url("../pic/iFi-Zen-Dac-Signature-V2-A-Bit-special.webp");}
  .bgpdhb {background-image: url("../pic/uno-small enough-banner.webp");}
  .bgpIA {background-image: url("../pic/advance-paris-LIFESTYLE-A12-Classic.webp");}
  .bgphaxc {background-image: url("../pic/prallex-xCan-Lifestyle-8.webp");}
  .bgbbxdsd {background-image: url("../pic/banner-Brilliant-Bluetooth.webp");}
  .bggl {background-image: url("../pic/gO-link-The-missing-link-banner.webp");}
  .bggbl {background-image: url("../pic/GO_blu_pocket-rocket-portable-HD-DAC.webp");}
  .bgglu {background-image: url("../pic/gO-link-hardware-based-volume-control-banner-.webp");}
  .bggblu {background-image: url("../pic/banner-Superior-sound-iFI_AUDIO_KEY2-5.webp");}
  .bgut {background-image: url("../pic/ifi-up-travel-banner.webp");}
  .bgupt {background-image: url("../pic/ifi-banner2-Call-Quality.webp");}
  .bggb {background-image: url("../pic/go-bar-banner.webp");}
  .bggob {background-image: url("../pic/go-bar-Balance-of-power-banner.webp");}
  .bggoba {background-image: url("../pic/ifi-GO_blu_Air_Web_Banner_Outlasts-Your-Flight.webp");}
  .bggobak {background-image: url("../pic/banner-iFi-audio-GO-bar-kensai.webp");}
  .bguptb {background-image: url("../pic/ifi-up_travel_car_05_light.webp");}
  .bgbogxdsd {background-image: url("../pic/banner-Balance-of-Power.webp");}
  .bghipcas {background-image: url("../pic/banner-Hip-case-protects-your-hip-dac-3.webp");}
  .bgos {background-image: url("../pic/banner-OLED-Seen-but-not-heard.jpg");}   
  .bgpxdsd {background-image: url("../pic/banner-Fantastic BeastsI.webp");}
  .bghip {background-image: url("../pic/baner-Titanium-shadow-hd3-plug-phones.webp");}
  .bghipd3 {background-image: url("../pic/iFi_hip-dac-3-gold_Photo-2.webp");}
  .bgphaxca {background-image: url("../pic/prallex-xCan-Lifestyle.webp");}
  .bgpidsda {background-image: url("../pic/parallaxContainer_image_diablox-iems-bgpidsda.webp");}
  .bgpidsdb {background-image: url("../pic/parallaxContainer_image_diablox-iems-bgpidsdb.webp");}
  .bgpidsdc {background-image: url("../pic/parallaxContainer_image_diablox-iems.webp");}
  .bgrac {background-image: url("../pic/parallaxContainer_acimage_image_DIFUSER_ABSORBER_BASS_TRAP.webp");}
  .bgrwma {background-image: url("../pic/e50background.jpg");}
  .bgrwm2 {background-image: url("../pic/wall-mount-amplifier-e-120-Overview.jpg");}
  .bgrhdmi {background-image: url("../pic/hdmi-cable-Performance-Series-Active-HDMI.jpg");}
  .bgrhth {background-image: url("../pic/home-cinema-banner.png");}
  .bgrcas {background-image: url("../pic/banner-yotube-Milty-Zerostat-3.jpg");}
  .bgrvp {background-image: url("../pic/panasonic_vmz71_pressit_high.jpg");}
  .bgpdab2 {background-image: url("../pic/banner-hip-dac-3-your-power-hungry-headphonehd3-table-coffee.webp");}
  .bgrcdpa {background-image: url("../pic/features__yamaha_cd-s3000_super_audio_cd_player.jpg");} 
  .bgrcdpb {background-image: url("../pic/feature-High-precision-CD-drive-for-greater.webp");} 
  .bgrpg {background-image: url("../pic/feel.jpg");}
  .bgrcas {background-image: url("../pic/e2-moving-magnet-banner.jpg");}
  .bgrdai {background-image: url("../pic/digital-Audio-Interconnects-REFERENCE-DIGITAL-AUDIO-40.jpg");}
  .bgsc {background-image: url("../pic/qed-supremus-cable-and-box.jpg");}
  .bgni2 {background-image: url("../pic/banner-NEO-iDSD2-WATE4R-DROP.webp");}
  .bgneid {background-image: url("../pic/ifi-0GMT-Femto-Precision-Clock.jpg");}
  .bgneoi2 {background-image: url("../pic/introducing-the-new-iFi-Nexis-App-Nexis-Phone.webp");}
  .bgzos {background-image: url("../pic/banner-ifi-Zen-One-Sig-5.webp");}
  .bgzosig {background-image: url("../pic/ifi-zen-one-sig-Awesome-Analogue-zo-rear.webp");}
  .bgzosbd {background-image: url("../pic/iFi-ZEN-ONE-STUDIO-2-Lights-banner.webp");}
  .bgzds {background-image: url("../pic/iFi-Zen-Dac-Signature-V2-Enjoy-an-enhanced-experience.webp");}
  .bgzdsv2 {background-image: url("../pic/iFi-Zen-Dac-Signature-V2-A-Bit-special.webp");}
  .bgzdasv2 {background-image: url("../pic/ifi-Zen-Dac-Signature-V2-Confident-connections-banner.webp");}
  .bgzdasv2i {background-image: url("../pic/iFi-ZEN-Signature-Set-HFM-4-Crucial-combo.webp");}
  .bgzcs {background-image: url("../pic/iFi-ZEN-CAN-SIGNATURE-banner.webp");}
  .bgzcsh {background-image: url("../pic/ifi-ZEN-CAN-SIGNATURE-Because-More-Power-Matters.webp");}
  .bgzcsha {background-image: url("../pic/ifi-ZEN-CAN-SIGNATURE-No-Pain-Just-Gain-and-Bass.jpg");}
  .bgizcsh {background-image: url("../pic/ifi-ZEN-can-Signature-set.jpg");}
  .bgzdv2 {background-image: url("../pic/ifi-zen-dac-v2-Smooth-and-balanced.webp");}
  .bgzdv {background-image: url("../pic/ifi-Power-Drive-Performance-zen-dac-v2.webp");}
  .bgzps {background-image: url("../pic/ifi-zen-phono-Hissless-whisper.webp");}
  .bgmi {background-image: url("../pic/banner-ifi-iPhono3-BL.webp");}
  .bgmip {background-image: url("../pic/banner-ifi-iPhono3.webp"); }
  .bgNs {background-image: url("../pic/ifi-neos-Simply-seamless-streaming-banner.webp");}
  .bgneos {background-image: url("../pic/ifi-banner-neos.webp");}
  .bgZs {background-image: url("../pic/iFi-ZenStream-Exclusive-for-your-ears-only.webp");}
  .bgpcac {background-image: url("../pic/banner-powerstataion-ac-ipurifier-2.webp");}
  .bgpen {background-image: url("../pic/ifi-LAN-iSilencer-banner.webp");}
  /* Skill Bar */
  .skills {
  text-align: right;
  padding: 1%;
  margin: 5px;
  color: #f1f1f1;
  border-radius: 5%;
  }
  .skill1 {width: 100%;background-color: #dd4b39;}
  .skill2 {width: 80%; background-color: #dd4b39;}
  .skill3 {width: 35%; background-color: #dd4b39;}
  .skill4 {width: 25%; background-color: #dd4b39;}
  /* Contact Us */
  input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 10px;
  margin-bottom: 16px;
  border-radius: 8px;
  resize: vertical;
  }
  .subject {
  height: 170px;
  }
  input[type=submit] {
  margin:0 10px;
  border-radius: 8px;
  padding: 6px;
  box-sizing: border-box;
  text-decoration:none;
  box-shadow: 0 10px 15px rgba(0,0,0,0.3);
  background: linear-gradient(0deg, #ddd, #f1f1f1);
  transition: .5s;
  cursor: pointer;
  border: none;
  }
  input[type=submit]:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }
  .contactUs {
  padding: 10px;
  margin-top: 10px;
  }
  .contactUsp {
  text-decoration-line: overline;
  font-family: Helvetica;
  color: #333;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
  }
  .contactUsp a {
  color: #333;
  }
  .column {
  float:left;
  width: 50%;
  margin-top: 6px;
  padding: 15px;
  }
  .row:after {
  content: "";
  display: table;
  clear: both;
  }@media screen and (max-width: 600px) {
  .column, input[type=submit] {
  width: 100%;
  margin-top: 0;
  }
  }
  /* video */
  video {
  width: 100%;
  height: auto;
  }
  /* 404 error pages */
  .error40{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh
  }
  .error404h{
  color: #333;
  margin: 100px;
  font-size: 50px;
  text-align: center;
  font-weight: bold;
  font-family: Helvetica;
  letter-spacing: 8px;
  }
  .error404h a{
  color: #333
  }
  .error404h span{
  transition: .5s linear
  }
  .error404h:hover span:nth-child(1){
  margin-right: 5px
  }
  .error404h:hover span:nth-child(1):after{
  content: "'";
  }
  .error404h:hover span:nth-child(2){
  margin-left: 30px
  }
  .error404h:hover span{
  color: #777;
  text-shadow: 0 0 10px #f1f1f1,
   0 0 20px #f1f1f1, 
   0 0 40px #f1f1f1;
  }
  /* ScrollBox gallery */
  .ScrollBoxGallery,
  main {
  width: 80vw;
  margin: 0 auto;
  }
  #ScrollCards {
  list-style: none;
  outline: calc(var(--outline-width) * 10) solid blue;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--numcards), var(--card-height));
  gap: var(--card-margin);
  list-style-type: none;
  }
  .overviewimg {
  border-radius: 25px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin: 2%;
  width: 100%; 
  padding: 10px;
  box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
  }
  .tp{
  position: relative;
  text-align: center;
  padding: 15px;
  }
  .top-left {
  max-width: 475px;
  position: absolute;
  height: 100%;
  padding: 6%;
  background-color: rgba(255, 255, 255, 0.7);
  top: 10px;
  left: 5px;
  }
  .svgimg {
  border-radius: 15px;
  height: auto;
  width: 125px; 
  padding: 10px;
  box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
  }
  .svgimg:hover {
  width: 135px; 
  }
  .ScrollCard {
  outline: var(--outline-width) solid hotpink;
  }
  .ScrollCard__content {
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);
  background: rgb(255, 255, 255);
  color: rgb(10, 5, 7);
  border-radius: 1em;
  overflow: hidden;
  display: grid;
  grid-template-areas: "text img";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  align-items: stretch;
  outline: var(--outline-width) solid lime;
  }
  .ScrollCard__content > div {
  grid-area: text;
  width: 85%;
  place-self: center;
  text-align: left;
  display: grid;
  gap: 1em;
  place-items: start;
  }
  .ScrollCard__content > figure {
  grid-area: img;
  overflow: hidden;
  }
  .trustedLink {
  color: #333;
  text-decoration: none;
  margin-left: 4%;
  }
  .trustedLink :hover {
  color: #cc9933;
  }
  figure {
  margin: 0 0 0;
  }
  .ScrollCard__content > figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
  aside {
  width: 50vw;
  margin: 0 auto;
  text-align: left;
  }
  /*overview 2*/
  a,
  a:hover {
  text-decoration: none;
  transition: color 0.3s ease-in-out;
  }
  #pageHeaderTitle {
  margin: 2rem 0;
  text-transform: uppercase;
  text-align: center;
  font-size: 2.5rem;
  }
  /* tab features */
  .tabFeatures {
  background: #f1f1f1;
  height: 400px;
  margin: 0 0 2rem 0;
  display: flex;
  box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
  border-radius: 10px;
  flex-direction: row;
  cursor: pointer;
  margin: 10px 0;
  }
  .tabbox {
  position: relative;
  height: 100%;
  flex: 1;
  background-position: left;
  background-size: cover;
  transition: 0.7s;
  box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
  }
  .tabbox:hover {
  flex: 7;
  height: 400px;
  }
  .a1tab {
  width: auto;
  height: auto;
  }
  .taba2 {
  width: auto;
  height: auto;
  }
  .taba3 {
  width: auto;
  height: auto;
  }
  .taba4 {
  width: auto;
  height: auto;
  }
  .taba5 {
  width: auto;
  height: auto;
  }
  .taba6 {
  width: auto;
  height: auto;
  }
  .text {
  position: absolute;
  bottom: 0;
  opacity: 0;
  padding: 10px;
  }
  .tabbox:hover .text {
  opacity: 1;
  }
  @media screen and (max-width: 800px) {
   .tabFeatures {
  flex-direction: column;
  height: 700px;
  box-shadow: none;
  }
  .tabbox {
  box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
  }
  .tabbox:hover {
  flex: 7;
  }
  }
  /* Cards */
  .postcard {
  flex-wrap: wrap;
  display: flex;
  box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
  border-radius: 10px;
  margin: 0 0 2rem 0;
  overflow: hidden;
  position: relative;
  color: #f1f1f1;
  }
  .postcard.dark {
  background-color: #000000;
  }
  .postcard.light {
  background-color: #f1f1f1;
  }
  .postcard .t-dark {
  color: #000000;
  }
  .postcard a {
  color: inherit;

  }
  .postcard h6,
  .postcard .h6 {
  margin-bottom: 0.5rem;
  margin-left: 2rem;
  font-weight: 500;
  line-height: 1.2;
  }
  .postcard .small {
  font-size: 80%;
  }
  .postcard .postcard__title {
  font-size: 1.75rem;
  }
  .postcard .postcard__img {
  padding: 2px;
  border-radius: 5%;
  width: 80%;
  object-fit: cover;
  position: relative;
  }
  
  .postcard .postcard__img_link {
  display: contents;
  }
  .postcard .postcard__bar {
  width: 50px;
  height: 10px;
  margin: 10px 0;
  border-radius: 5px;
  background-color: #333;
  transition: width 0.2s ease;
  }
  .postcard .postcard__text {
  padding: 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  }
  .postcard .postcard__preview-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  height: 100%;
  }
  .postcard {
  display: flex;
  flex-flow: row wrap;
  font-size: 14px;
  margin: 20px 0 0 0;
  padding: 0;
  justify-content: center;
  }
  .postcard .tag__item {
  display: inline-block;
  background: rgba(83, 83, 83, 0.4);
  border-radius: 3px;
  padding: 2.5px 10px;
  margin: 0 5px 5px 0;
  cursor: default;
  user-select: none;
  transition: background-color 0.3s;
  }
  .postcard .tag__item:hover {
  background: rgba(83, 83, 83, 0.8);
  }
  .postcard:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(-70deg, #333, transparent 50%);
  opacity: 1;
  border-radius: 10px;
  }
  .postcard:hover .postcard__bar {
  width: 100px;
  }
  @media screen and (min-width: 769px) {
  .postcard {
  flex-wrap: inherit;
  }
  .postcard .postcard__title {
  font-size: 2rem;
  }
  .postcard {
  justify-content: start;
  }
  .postcard .postcard__img {
  max-width: 40%;
  max-height: 100%;
  transition: transform 0.3s ease;
  }
  .postcard .postcard__text {
  padding: 3rem;
  width: 100%;
  }
  .postcard .media.postcard__text:before {
  content: "";
  position: absolute;
  display: block;
  background: #18151f;
  top: -20%;
  height: 100%;
  width: 55px;
  }
  .postcard:hover .postcard__img {
  transform: scale(1.1);
  }
  .postcard:nth-child(2n+1) {
  flex-direction: row;
  }
  .postcard:nth-child(2n+0) {
  flex-direction: row-reverse;
  }
  .postcard:nth-child(2n+1) .postcard__text::before {
  left: -12px !important;
  transform: rotate(4deg);
  }
  .postcard:nth-child(2n+0) .postcard__text::before {
  right: -12px !important;
  transform: rotate(-4deg);
  }
  }
  @media screen and (min-width: 1024px) {
  .postcard__text {
  padding: 2rem 3.5rem;
  }
  .postcard__text:before {
  content: "";
  position: absolute;
  display: block;
  top: -20%;
  height: 130%;
  width: 55px;
  }
  .postcard.dark .postcard__text:before {
  background: #000000;
  }
  .postcard.light .postcard__text:before {
  background: #e1e5ea;
  }
  }
  /* COLORS */
  .postcard .green.play:hover {
  background: #cc9933;
  color: #000000;
  }
  .green .postcard__title:hover {
  color: #cc9933;
  }
  .green .postcard__bar {
  background-color: #cc9933;
  }
  .green::before {
  background-image: linear-gradient(-30deg, rgba(121, 221, 9, 0.1), transparent 50%);
  }
  .green:nth-child(2n)::before {
  background-image: linear-gradient(30deg, rgba(121, 221, 9, 0.1), transparent 50%);
  }
  .postcard .blue.play:hover {
  background: #333;
  }
  .blue .postcard__title:hover {
  color: #333;
  }
  .blue .postcard__bar {
  background-color: #333;
  }
  .blue::before {
  background-image: linear-gradient(-30deg, rgba(0, 118, 189, 0.1), transparent 50%);
  }
  .blue:nth-child(2n)::before {
  background-image: linear-gradient(30deg, rgba(0, 118, 189, 0.1), transparent 50%);
  }
  .postcard .red.play:hover {
  background: #333;
  }
  .red .postcard__title:hover {
  color: #333;
  }
  .red .postcard__bar {
  background-color: #333;
  }
  .red::before {
  background-image: linear-gradient(-30deg, rgba(189, 21, 11, 0.1), transparent 50%);
  }
  .red:nth-child(2n)::before {
  background-image: linear-gradient(30deg, rgba(189, 21, 11, 0.1), transparent 50%);
  }
  .postcard .yellow.play:hover {
  background: #cc9933;
  color: #000000;
  }
  .yellow .postcard__title:hover {
  color: #cc9933;
  }
  .yellow .postcard__bar {
  background-color: #cc9933;
  }
  .yellow::before {
  background-image: linear-gradient(-30deg, rgba(189, 187, 73, 0.1), transparent 50%);
  }
  .yellow:nth-child(2n)::before {
  background-image: linear-gradient(30deg, rgba(189, 187, 73, 0.1), transparent 50%);
  }
  @media screen and (min-width: 769px) {
  .green::before {
  background-image: linear-gradient(-80deg, rgba(121, 221, 9, 0.1), transparent 50%);
  }
  .green:nth-child(2n)::before {
  background-image: linear-gradient(80deg, rgba(121, 221, 9, 0.1), transparent 50%);
  }
  .blue::before {
  background-image: linear-gradient(-80deg, rgba(0, 118, 189, 0.1), transparent 50%);
  }
  .blue:nth-child(2n)::before {
  background-image: linear-gradient(80deg, rgba(0, 118, 189, 0.1), transparent 50%);
  }
  .red::before {
  background-image: linear-gradient(-80deg, rgba(189, 21, 11, 0.1), transparent 50%);
  }
  .red:nth-child(2n)::before {
  background-image: linear-gradient(80deg, rgba(189, 21, 11, 0.1), transparent 50%);
  }
  .yellow::before {
  background-image: linear-gradient(-80deg, rgba(189, 187, 73, 0.1), transparent 50%);
  }
  .yellow:nth-child(2n)::before {
  background-image: linear-gradient(80deg, rgba(189, 187, 73, 0.1), transparent 50%);
  }
  }
  /* masterHead*/
  .masterHead {
  border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
  text-align: center;
  font-size: large;
  /* margin: 25px; */
  padding: 20px;
  font-family: 'B Nazanin, Helvetica';
  }
  .masterHeaden {
  font-family: Helvetica;
  color: #777;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: 3px;
  margin: 30px auto;
  padding-left: 40px;
  border-top: 2px solid #c7c7c7;
  }
   /*product gallery test*/
  .productSlide {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  margin-top: 2%;
  }
  .SlideCarosel {
  background-color: #fff;
  opacity: 1; 
  }
   .SlideProduct {
  display: flex;
  width: 640px;
  box-sizing: border-box;
  height: 100vmin;
  }
  .SlideBox {
  flex: 1;
  overflow: hidden;
  transition: 0.5s;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
  line-height: 0;
  }
  .SlideBox > img {
  width: 200%;
  height: calc(100% - 10vh);
  object-fit: cover;
  transition: 0.5s;
  }
  .SlideBox > span {
  font-size: 3.8vh;
  display: block;
  text-align: center;
  height: 10vh;
  line-height: 2.6;
  }
  .SlideBox:hover {
  flex: 1 1 100%;
  }
  .SlideBox:hover > img {
  width: 100%;
  height: 100%;
  }
  /*awards*/
  .awards {
  width: 100%;
  padding: 30px 0 40px;
  margin-bottom: 30px;
  background-color: #f1f1f1;
  border-radius: 15px;
  text-align: center;
  overflow: hidden;
  position: relative;
  }
  .awards .awardsPic {
  display: inline-block;
  height: 130px;
  width: 130px;
  margin-bottom: 50px;
  z-index: 1;
  position: relative;
  }
  .awards .awardsPic::before {
  content: "";
  width: 100%;
  height: 0;
  border-radius: 50%;
  background-color: #ccc;
  position: absolute;
  bottom: 135%;
  right: 0;
  left: 0;
  opacity: 0.9;
  transform: scale(3);
  transition: all 0.3s linear 0s;
  }
  .awards:hover .awardsPic::before {
  height: 100%;
  }
  .awards .awardsPic::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #8d8d8d;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  }
  .awards .awardsPic img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  transform: scale(1);
  transition: all 0.9s ease 0s;
  }
  .awards:hover .awardsPic img {
  box-shadow: 0 0 0 14px #f7f5ec;
  transform: scale(0.7);
  }
  .awards .title {
  display: block;
  font-size: 13px;
  color: #333;
  text-transform: capitalize;
  }
  .awards .awardslinks {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #cc9933;
  position: absolute;
  bottom: -100px;
  left: 0;
  transition: all 0.5s ease 0s;
  }
  .awards:hover .awardslinks {
  bottom: 0;
  }
  .awards .awardslinks li {
  display: inline-block;
  }
  .awards .awardslinks li a {
  display: block;
  padding: 10px;
  font-size: 17px;
  color: white;
  transition: all 0.3s ease 0s;
  text-decoration: none;
  }
  .awards .awardslinks li a:hover {
  color: #cc9933;
  background-color: #f7f5ec;
  }
  /*product-information*/
  .product-name {
  color: #333;
  font-size: 20px;
  font-weight: 800;
  text-decoration-line: overline;
  text-decoration-color: #cc9933;
  text-decoration-thickness: 15%;
  margin: 5%;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 4;
  }
  .product-subname {
  color: #333;
  font-weight: 500;
  text-align: justify;
  font-size: 15px;
   text-decoration-thickness: 15%;
  margin-right: 10%;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 1%;
  }
  .product-p {
  font-weight: 500;
  color: #333;
  letter-spacing: 1.5px;
  line-height: 1.42;
  margin: 2%;
  font-size: 13px;
  width: 95%; 
  word-wrap: break-word;
  text-align: justify;
  padding: 10px;
  }
  .product-p-fa {
direction: rtl;
text-align: right;
text-align: justify;
line-height: 1.8; 
}
  .productMarkers li{
  letter-spacing: 1px;
   margin-left: 5%;
   width: 90%;
  color: #262626;
  word-wrap: break-word;
  text-align: justify;
  list-style-type: circle;
  }
  /*news*/
.flipNews {
  position: relative;
  white-space: wrap;
}
.flipNews > .front,
.flipNews > .back {
  display: block;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 2s;
  transition-property: transform, opacity;
}
.flipNews > .front {
  transform: rotateY(0deg);
}
.flipNews > .back {
  position: absolute;
  opacity: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transform: rotateY(-180deg);
}
.flipNews:hover > .front {
  transform: rotateY(180deg);
}
.flipNews:hover > .back {
  opacity: 1;
  transform: rotateY(0deg); 
}
.flipNews > .back {
  transform: rotateX(-180deg);
}
.flipNews:hover > .front {
  transform: rotateX(180deg);
}
.flipNews:hover > .back {
  transform: rotateX(0deg);
}
.flipNews {
  position: relative;
  display: inline-block;
  margin-right: 2px;
  margin-bottom: 1em;
  width: 400px;
}
.flipNews > .front,
.flipNews > .back {
  display: block;
  color: white;
  width: inherit;
  background-size: cover !important;
  background-position: center !important;
  height: 220px;
  padding: 1em 2em;
  background: #333;
  border-radius: 10px;
}
.flipNews > .front p,
.flipNews > .back p {
  font-size: 0.9125rem;
  line-height: 160%;
  color: #f1f1f1;
}
.text-shadow {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04), 11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04), 13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04), 0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04), 17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04), 19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
}
/*Brands*/
.Brands {
width: 100%;
overflow-x: auto; 
display: flex;
justify-content: center; 
margin-bottom: 30px;
}
.Bransc {
  padding-left: 10%;
  }
  .brandsItem {
display: inline-block;
}
.brandsimg {
  width: 150px;
  margin: 5px;
  padding: 5px;
  cursor: pointer;
   }
  .brandsimg:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: 0.3s;
  }
.brandsItemPic {
 width: auto;
margin: auto;
max-height: 1080px;
border-radius: 5%;
}
.brandsimges {
  width: 25%;
  margin-bottom:60%;
  padding: 5px;
  cursor: pointer;
   }
  .brandsimges:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: 0.3s;
  }
  .Brands::-webkit-scrollbar {
  width: 12px;
  }
  .Brands::-webkit-scrollbar-track {
  background: #f1f1f1;
  }
  .Brands::-webkit-scrollbar-thumb {
  background-color: #f1f1f1; 
  border-radius: 6px; 
  border: 1px solid #333; 
  }
  .hidden {
  opacity: 0;
  }
  /*Text slide show*/
.brand-story-section{
background:#f8f9fa;
position:relative;
overflow:hidden;
padding-top:50px;
padding-bottom:50px;
}
.brand-logo{
display:block;
margin:auto;
max-height:120px;
width:auto;
margin-bottom:30px;
transition:.4s;
cursor:pointer;
filter:none;
}
.brand-main-title{
font-size:2.2rem;
font-weight:700;
color:#202020;
margin-bottom:15px;
}
.brand-main-description{
max-width:900px;
margin:auto;
font-size:1.05rem;
color:#666;
line-height:2;
}
.brand-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 60px rgba(0,0,0,.12);
}
.brand-logo:hover {
transform:scale(1.05);
}
.brand-title{
font-size:2rem;
font-weight:700;
color:#111;
margin-bottom:30px;
letter-spacing:.5px;
}
.brand-text{
line-height:2.4;
font-size:18px;
color:#333;
text-align:justify;
margin-bottom:40px;
}
.btn-brand{
background:#fff;
color:#111;
border:2px solid #111;
border-radius:40px;
padding:12px 34px;
font-size:1rem;
font-weight:600;
letter-spacing:.3px;
transition:.3s;
}
.btn-brand:hover{
background:#111;
color:#fff;
box-shadow:0 12px 30px rgba(0,0,0,.15);
}
.carousel-item{
padding-top:25px;
padding-bottom:70px;
}
#BrandStorySlider .carousel-indicators{
bottom:20px;
margin-bottom:0;
}
#BrandStorySlider .carousel-indicators button{
width:14px;
height:14px;
border-radius:50%;
background:#bbb;
opacity:1;
margin:0 6px;
border:2px solid #666;
transition:.3s;
}
#BrandStorySlider .carousel-indicators .active{
background:#111;
border-color:#111;
transform:scale(1.25);
}
#BrandStorySlider .carousel-indicators button:hover{
background:#555;
transform:scale(1.15);
}
.carousel-control-prev{
width:70px;
}
.carousel-control-next{
width:70px;
}
.carousel-control-prev-icon,.carousel-control-next-icon{
width:40px;
height:40px;
border-radius:50%;
background-color:#000;
padding:18px;
}
.brand-card a{
text-decoration:none;
}
.brand-card strong{
color:#000;
}
.brand-card p{
margin-bottom:35px;
}
.brand-card img{
object-fit:contain;
}
.carousel-fade .carousel-item{
transition:opacity .8s ease-in-out;
}
.brand-story-section::before{
content:"";
position:absolute;
width:350px;
height:350px;
border-radius:50%;
left:-120px;
top:-120px;
}
.brand-story-section::after{
content:"";
position:absolute;
width:320px;
height:320px;
border-radius:50%;
right:-120px;
bottom:-120px;
}

/*======================================
 FIX BOOTSTRAP CAROUSEL
======================================*/
#BrandStorySlider .carousel-item{
opacity:1 !important;
visibility:visible !important;
background:#fff;
}
#BrandStorySlider .carousel-item.active{
opacity:1 !important;
}
#BrandStorySlider .brand-card{
min-height:520px;
padding:55px 50px;
background:#fff;
opacity:1 !important;
}
#BrandStorySlider .brand-logo{
opacity:1 !important;
filter:none !important;
transform:none !important;
}
#BrandStorySlider .brand-title{
color:#111 !important;
opacity:1 !important;
}
#BrandStorySlider .brand-text{
color:#444 !important;
opacity:1 !important;
}
#BrandStorySlider .btn-brand{
opacity:1 !important;
}
/* Fade Animation */
#BrandStorySlider .carousel-item.active .brand-logo{
animation:logoFade .8s ease;
}
#BrandStorySlider .carousel-item.active .brand-title{
animation:titleFade .9s ease;
}
#BrandStorySlider .carousel-item.active .brand-text{
animation:textFade 1.1s ease;
}
#BrandStorySlider .carousel-item.active .btn-brand{
animation:buttonFade 1.3s ease;
}
@keyframes logoFade{
from{opacity:0;
transform:translateY(-40px);
}
to{opacity:1;
transform:translateY(0);
}}
@keyframes titleFade{
from{opacity:0;
transform:translateX(-35px);
}to{opacity:1;
transform:translateX(0);
}}
@keyframes textFade{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}}

@keyframes buttonFade{
from{
opacity:0;
transform:scale(.8);
}
to{
opacity:1;
transform:scale(1);
}}
.brand-card{
overflow:hidden;
}
.brand-card::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:5px;
background:#111;
}
.brand-card:hover .brand-title{
color:#000;
}
.brand-text strong{
font-weight:700;
}
.carousel-control-prev-icon,.carousel-control-next-icon{
transition:.3s;
}
.carousel-control-prev:hover .carousel-control-prev-icon,.carousel-control-next:hover .carousel-control-next-icon{
transform:scale(1.12);
}
#BrandStorySlider .carousel-indicators button:hover{
transform:scale(1.3);
}
/*====================== DESKTOP ==========================*/
@media (min-width:1400px){
.brand-card{
max-width:1000px;
margin:auto;
}
.brand-title{
font-size:2.4rem;
}
.brand-text{
font-size:1.15rem;
}
.brand-logo{
max-height:135px;
}}
/*====================== LAPTOP ===========================*/

@media (max-width:1199px){
.brand-card{
padding:45px;
}
.brand-logo{
max-height:110px;
}
.brand-title{
font-size:2rem;
}
.brand-text{
font-size:1rem;
}}
/*====================== TABLET ===========================*/
@media (max-width:992px){
.brand-main-title{
font-size:1.8rem;
}
.brand-main-description{
font-size:1rem;
}
.brand-card{
min-height:auto;
padding:40px 30px;
}
.brand-logo{
max-height:95px;
}
.brand-title{
font-size:1.8rem;
}
.brand-text{
text-align:center;
font-size:.98rem;
line-height:2.1;
}
.carousel-control-prev,.carousel-control-next{
width:55px;
}}
/*======================= MOBILE ==========================*/
@media (max-width:768px){
.brand-story-section{
padding-top:45px;
padding-bottom:45px;
}
.brand-main-title{
font-size:1.55rem;
}
.brand-main-description{
font-size:.95rem;
}
.brand-card{
padding:30px 20px;
border-radius:15px;
}
.brand-logo{
max-height:90px;
margin-bottom:20px;
}
.brand-title{
font-size:1.45rem;
margin-bottom:18px;
}
.brand-text{
font-size:.92rem;
line-height:2;
}
.carousel-control-prev,.carousel-control-next{
display:none;
}}
/* SMALL MOBILE */
@media (max-width:480px){
.brand-main-title{
font-size:1.3rem;
}
.brand-card{
padding:25px 18px;
}
.brand-logo{
max-height:65px;
}
.brand-title{
font-size:1.2rem;
}
.brand-text{
font-size:.88rem;
}}
.brand-card{
background:#fff;
border-radius:20px;
padding:50px 40px;
box-shadow:0 10px 35px rgba(0,0,0,.08);
transition:.35s;
position:relative;
overflow:hidden;
max-width:850px;
margin:auto;
}
/* END */  
   /*tubnail Products change */
  .suggestion {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
   }
  .tubnailProducts {
  position: relative;
  flex: 25%;
  width: 100%;
  background: white;
  margin: auto;
  padding: 20px 50px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  }
  .tubnailProducts:hover {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  animation-name: example;
  animation-duration: 0.25s;
  border-left: 8px solid rgba(51, 51, 51, 0.8);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }
  .tubnailPic {
   width: 100%;
   opacity: 1;
  cursor: pointer;
  }
  .tubnailPic:hover{
  opacity: 0.8;
  transition: 3ms;
  }
  @media screen and (max-width: 800px) {
  .tubnailProducts {
  flex: 50%;
  max-width: 50%;
  }
  }
  @media screen and (max-width: 600px) {
  .tubnailProducts {
  flex: 100%;
  max-width: 100%;
  }  }
 /*NEW PRODUCT*/
  .centered {
position: absolute;
width: 20%;
top: 30%;
left: 20%;
transform: translate(-50%, -50%);
  }
  /* tabs*/
   .tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
  }
  .tabset .tab-panel {
  display: none;
  }
  .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
  .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
  .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
  .tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
  .tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
  .tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
  }
  .tabset > label {
  position: relative;
  display: inline-block;
  padding: 15px 15px 25px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 600;
  }
  .tabset > label::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 10px;
  width: 22px;
  height: 4px;
  background: #8d8d8d;
  }
  .tabset > label:hover,
  .tabset > input:focus + label {
  color: #333;
  }
  .tabset > label:hover::after,
  .tabset > input:focus + label::after,
  .tabset > input:checked + label::after {
  background: #cc9933;
  }
  .tabset > input:checked + label {
  border-color: #ccc;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: -1px;
  }
  .tab-panel {
  padding: 30px 0;
  border-top: 1px solid #ccc;
  }
  /* download link*/
  #circle-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  }
  .circle {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  margin: auto;
  }
  .oneR:before {
  content: "Special Contents";
  }
  .oneL:before {
  content: "Apps";
  }
  .oneM:before {
  content: "Brochure";
  }
  .oneMiddle:before {
  content: "About US";
  }
  #one {
  background-color: rgba(0,0,225, 0.45);
  font-size: 14px;
  font-family: Helvetica,'B Nazanin';
  letter-spacing: 1.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  transition: 1s;
  }
  #two {
  background-color: green;
  transition: 1s;
  opacity: 0.5;
  }
  #three {
  background-color: red;
  transition: 1s;
  opacity: 0.5;
  }
  #four {
  background-color: orange;
  transition: 1s;
  opacity: 0.5;
  }
  #five {
  background-color: green;
  transition: 1s;
  opacity: 0.5;
  }
  #cc {
  position:relative;
  width: 50vh;
  height: 50vh;
  border-radius: 50%;
  overflow: hidden;
  }
  #cc:hover #two {
  transform: translate(0px, 75px);
  }
  #cc:hover #three {
  transform: translate(0px, -75px);
  }
  #cc:hover #four {
  transform: translate(75px, 0px);
  }
  #cc:hover #five {
  transform: translate(-75px, 0px);
  }
  @media (max-width: 800px) {
  #circle-container {
  flex: 100%;
  }
  }
  /*brands with filtering*/
  .rowfilter {
   display: flex;
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: flex-start; 
  gap: 20px; 
  margin: 0 auto; 
  }
  .all {
   width: 100%;
  max-width: 340px;
  display: none;
  margin: 1%;
  }
  .show {
   display: block;
  }
  .rowfilter:after {
   content: "";
   display: table;
   clear: both;
  }
  .filtercontent a {
   text-decoration: none;
   color: #333;
  }
  .filterimg {
   width: 100%;
  }
  .filtertext {
   background-color: #000;
   color: #f1f1f1;
   padding-left: 8px;
   padding-right: 8px;
  }
  .filtercontent {
   background-color: white;
   padding: 10px;
  }
  #myBtnContainer .btn {
   border: none;
   outline: none;
   padding: 12px 16px;
   background-color: white;
   cursor: pointer;
  }
  #myBtnContainer .btn:hover {
   background-color: #ddd;
   border-radius: 8px;
  }
  #myBtnContainer .factive {
   background-color: #6e6e6e;
   border-radius: 8px;
  color: white;
  }
  /* product slider */
   /* distinct */
  .distinct {
  display: flex;
  justify-content: center;
   flex-wrap: wrap;
  max-width: 600px;
  margin: 1vw auto;
  text-align: center;
  width: 94vw;
  }
  .hints {
  flex: auto;
  font-size: 1.5rem;
  margin: 0 1vw calc(1vw + 50px) 1vw;
  min-width: calc(33% - 2vw);
  position: relative;
  }
  .hints:before {
  content: "";
  float: left;
  padding-top: 100%;
  }
  .dhContent {
  background: white;
  border-radius: 30%;
  height: 84%;
  margin: 8%;
  position: absolute;
  width: 84%;
  vertical-align: middle;
  z-index: 5000;
  }
  .hints:hover .effect-1,
  .hints:hover .effect-2 {
  display: block;
  }
  .effect-1,
  .effect-2 {
  border-radius: 30%;
  display: none;
  mix-blend-mode: multiply;
  height: 84%;
  opacity: 1;
  position: absolute;
  width: 84%;
  z-index: 3000;
  }
  .effect-1 {
  animation: rotate 1.8s linear infinite;
  background: cyan;
  }
  .effect-2 {
  animation: rotate 1.2s linear reverse infinite;
  background: #e7a9ff;
  }
  @keyframes rotate {
  0% {
  top: 0;
  left: 8%;
  }
  25% {
  top: 8%;
  left: 0%;
  }
  50% {
  top: 16%;
  left: 8%;
  }
  75% {
  top: 8%;
  left: 16%;
  }
  100% {
  top: 0;
  left: 8%;
  }
  }
  .titledh {
  position: relative;
  top: calc(100% + 16px);
  }
  .titledh span {
  display: block;
  font-family: Helvetica;
  font-size: 0.6rem;
  letter-spacing: 0.1rem;
  margin-top: 8px;
  text-transform: uppercase;
  }
  .Motivation {
  background-image: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  border-radius: 5px;
  height: 50%;
  margin: 25%;
  width: 50%;
  }
  .craft {
  background-image: linear-gradient(to top, #f1f1eb 0%, #ace0f9 100%);
  border-radius: 50%;
  height: 50%;
  margin: 25%;
  width: 50%;
  }
  .science{
  background-image: linear-gradient(
  to top,
  #f3e7e9 0%,
  #e3eeff 99%,
  #e3eeff 100%
  );
  border-radius: 5px;
  height: 40%;
  margin: 30%;
  transform: rotate(45deg);
  width: 40%;
  }
  /* work shop slide show */
  @media screen and (min-width: 601px) {
  .wSh h4,p{
  font-size: 16px;
  }
  }
  @media screen and (max-width: 600px) {
  .wSh h4,p{
  font-size: 10px;
  }
  }
  .cardWsh {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 0 6px;
  width: 100%;
  }
  .wShoimg {
  filter: grayscale(100%);
  }
  .wShoimg:hover {
  filter: none;
  }
  @media only screen and (max-width: 700px) {
  .cardWsh {
  width: 100%;
  }
  }
  @media only screen and (max-width: 500px) {
  .cardWsh {
   width: 100%;
  }
  }
  .cardWsh:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  .wSh {
  padding: 2px 16px;
  }
  /* projectplan */
  .projectplan {
  display: flex;
  font-family:'B Nazanin', Helvetica;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  height: auto;
  margin: 0;
  }
  .projecinfo {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 280px;
   }
  .project {
  border-radius: 50%;
  height: 312px;
  -webkit-tap-highlight-color: transparent;
  transform: scale(0.48);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 400px;
  }
  .project:after {
  background-color: #f2f2f2;
  content: "";
  height: 10px;
  position: absolute;
  top: 390px;
  width: 100%;
  }
  .project:hover {
  transform: scale(0.54);
  }
  .project-inner {
  clip-path: path(
  "M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 390 Z"
  );
  position: relative;
  transform-origin: 50%;
  top: -200px;
  }
  .projectcircle {
  background-color: #f1f1f1;
  border-radius: 50%;
  cursor: pointer;
  height: 380px;
  opacity: 0.5;
  left: 10px;
  pointer-events: none;
  position: absolute;
  top: 200px;
  width: 380px;
  }
  .projectimg {
  pointer-events: none;
  position: relative;
  transform: translateY(20px) scale(1.15);
  transform-origin: 50% bottom;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .project:hover .projectimg {
  transform: translateY(0) scale(1.2);
  }
  .projectimg1 {
  left: 22px;
  top: 164px;
  width: 350px;
  }
  .projectimg2 {
  left: 22px;
  top: 166px;
  width: 350px;
  }
  .projectimg3 {
  left: 22px;
  top: 194px;
  width:350px;
  }
  .projectimg4 {
  left: 22px;
  top: 204px;
  width: 350px;
  }
  .projectName {
  color: #333;
  font-size: 30px;
  font-weight: 600;
  margin: 5%;
  text-align: center;
  }
  .projectTitle {
  color: #333;
  font-family:'B Nazanin', Helvetica;
  font-weight: bold;
  text-align: center;
  }
  /* footer */
   .fcolumn {
  display: flex;
  height: auto; 
  background-color: #f2f2f2;
  }
  .fProduct {
  justify-content: center;
  width: 100%;
  height: auto;
  overflow: visible;
  }
  .fiProduct {
  border-top: 1px solid #f1f1f1;
  background: #f2f2f2;
  color: #333;
  list-style-type: none;
  }
  .fbtn {
  display: block;
  font-size: 11px;
  padding: 10px 10px;
  background: #f2f2f2;
  color: #333;
  position: relative;
  text-decoration: none;
  }
  .fbtn:hover {
  color: #333;
  font-weight: bolder;
  }
  .fbtn:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #333;
  opacity: 0.5;
  left: 20px;
  bottom: -7px;
  transform: rotate(45deg);
  }
  .fbtn i {
  margin-right: 10px;
  }
  .smenu {
  background: #f2f2f2;
  overflow:visible;
  max-height: 100%;
  transition: max-height 0.3s ease;
  }
  .smenu a {
  color: #333;
  display: block;
  padding: 3px 36px;
  font-size: 10px;
  margin: 4px 0;
  text-decoration: none;
  }
  .underline{
  position: relative;
   padding: 3px 3px;
  font-size: 12px;
  margin: auto;
  text-decoration: none;
  }
  .underline::before{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 1px;
  opacity: 0.5;
  background-color: #333;
  transition: width 0.1s cubic-bezier(0.25, 1, 0.5, 1);
  }
  @media (hover: hover) and (pointer: fine) {
  .underline:hover::before{
  left: 0;
  right: auto;
  width: 100%;
  }
  }