@font-face{font-family:webfont;font-style:normal;font-weight:400;src:url("../fonts/webfont.woff2") format("woff2");font-display:swap}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}
:root {
  --brand-blue: #3b82f6; /* یک آبی مدرن و نرم */
}
li,ul{list-style:none}
select{width:100%}
input:focus{outline:0}
::-moz-selection{background-color:#5ed4ca}
::selection{background-color:#5ed4ca}
::-moz-selection{background-color:#5ed4ca}
html{height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{height:100%;font-size:16px;line-height:1.5;font-family:webfont,Comfortaa,cursive;overflow-x:hidden}
img{display:inline-block;max-width:100%;height:auto;vertical-align:middle;-ms-interpolation-mode:bicubic}
a:active,a:focus,a:hover{text-decoration:none;outline:0}
.sec-padding{padding:60px 40px}
.button{display:inline-block;background:0 0;color:#fff;height:45px;line-height:41px;font-size:.9375rem;padding:0 28px;border:2px solid rgba(255,255,255,.4);border-radius:5px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.button:focus,.button:hover{color:#fff;border-color:#fff;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.action-button{display:inline-block;background:#5ed4ca;color:#000;height:45px;line-height:45px;font-size:.9375rem;padding:0 28px;border:0;border-radius:5px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.action-button:focus,.action-button:hover{background:#f66051;color:#fff;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.button-white{background:#fff;color:#333}
.button-dark{color:#333;border:2px solid rgba(51,51,51,.4)}
.button-dark:focus,.button-dark:hover{color:#333;border-color:#333;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.preloader{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;z-index:2000}
.loder-content{position:absolute;top:50%;left:50%;height:90px;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.main{position:relative;color:#fff;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden;z-index:5}
#animated-gradient,#particles-js,.background-img,.background-video,.flash-gradient,.gradient-background,.kenburns-background,.solid-color{position:absolute!important;top:0;width:100%;height:100%}
.launch__side{position:absolute;right:0;top:0;width:400px;background-color:#5ed4ca;display:block;height:100%;overflow:hidden;z-index:0}
.launch__side::before{background-color:#fff;border-radius:100%;content:"";display:block;height:120%;left:-50%;position:absolute;top:-10%;-webkit-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg);width:100%}
.launch__side__icon{position:absolute;bottom:40px;right:30px;max-width:180px}
.launch .main{color:#333}
.solid-color{background-color:#f66051}
.background-img{background-attachment:fixed;background-size:cover;background-image:url(../assets/demo/images/slide1.jpg);background-position:center center;background-repeat:no-repeat;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
.gradient-background{background:#0ecde9;background:-webkit-radial-gradient(#0ecde9,#025e83);background:-o-radial-gradient(#0ecde9,#025e83);background:radial-gradient(#0ecde9,#025e83)}
.flash-gradient{background:transparent -webkit-linear-gradient(315deg,rgba(0,0,0,.6) 50%,rgba(0,0,0,.6) 0) repeat scroll 0 0;background:transparent -o-linear-gradient(315deg,rgba(0,0,0,.6) 50%,rgba(0,0,0,.6) 0) repeat scroll 0 0;background:transparent linear-gradient(135deg,rgba(0,0,0,.6) 50%,rgba(0,0,0,.6) 0) repeat scroll 0 0}
.home{position:relative;padding:40px 0}
.home h1{font-family:webfont,Satisfy,cursive;font-size:1.9rem;line-height:1.45}
.home h2{font-family:webfont;font-size:1.65rem}
.home p{max-width:760px;font-size:1.0625rem;margin:10px auto 24px; direction: rtl}
.home .button{margin-right:14px}
.logo{max-width:400px;margin:0 auto 5%}
.counter-container {
  display: flex;
  /* اگه می‌خوای کل تایمر بچسبه سمت راست، این رو بذار flex-end وگرنه بذار بمونه */
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  direction: rtl; /* اضافه شد برای چیدمان راست به چپ */
  gap: 60px; /* جایگزین خط‌های جداکننده قدیمی اگر فاصله‌ کم بود */
}

.counter-box {
  position: relative;
  display: flex;
  align-items: center;
  opacity: .6;
  padding: 10px 0;
  /* این خط باعث می‌شه عدد راست باشه و متن چپ */
  flex-direction: row;
}

/* اصلاح خط‌های جداکننده برای حالت راست‌چین */
.counter-box::after {
  content: ' ';
  position: absolute;
  top: 50%;
  right: -45px; /* از سمت راست فاصله بگیره چون الان راست‌چین هستیم */
  left: auto;
  width: 30px;
  height: 1px;
  background-color: rgba(255,255,255,.3);
  transform: translateY(-50%);
}

.counter-box .number {
  display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  margin-left: 8px; /* مارجین رو از راست به چپ منتقل کردیم تا متن بچسبه سمت چپ عدد */
  margin-right: 0;
}

.counter-box span {
  font-size: .875rem;
  white-space: nowrap; /* از شکستن متن جلوگیری می‌کنه */
}

.counter-box.first {
  opacity: 1;
  margin-right: 0; /* تغییر از margin-left به margin-right */
}

.counter-box.first::after {
  display: none;
}

.counter-box.first .number {
  font-size: 2.875rem;
  margin-left: 8px;
  margin-right: 0;
}

.launch .counter-box::after{background-color:rgba(0,0,0,.3)}
.modal-subscribe{text-align:center;-webkit-box-shadow:0 5px 40px rgba(0,0,0,.1),0 5px 20px rgba(0,0,0,.1);box-shadow:0 5px 40px rgba(0,0,0,.1),0 5px 20px rgba(0,0,0,.1)}
.modal-subscribe--icon{max-width:100px;margin:20px auto}
.modal-subscribe h4{font-size:1.5rem;font-weight:700;text-transform:uppercase}
.modal-subscribe p{color:#747c83;font-size:.9rem}
.modal-subscribe .form-group{margin-left:12%;margin-right:12%}
.message-text{position:relative;background-color:#5bc0de;color:#fff;font-size:.8125rem;text-align:left;padding:6px 8px 6px 44px;border-radius:5px;margin:10px auto}
.message-text::after{content:"";font-family:FontAwesome;position:absolute;top:50%;left:12px;width:20px;height:20px;background:rgba(0,0,0,.2);font-size:12px;text-align:center;border-radius:100%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
.message-text.error{background-color:#d9534f}
.message-text.error::after{content:"\f00d"}
.message-text.valid{background-color:#5cb85c}
.message-text.valid::after{content:"\f00c"}
.footer{position:relative}
.social{margin-bottom:8px}
.social li{display:inline-block;margin:0 4px}
.social li a{display:block;width:30px;height:30px;line-height:28px;color:#fff;font-size:1.25rem;text-align:center;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.social li a:hover{opacity:.6}
.launch .social li a{color:#333}
.halfcounter{background-color:#282b32;padding:40px 20px}
#googleMap{width:100%;height:100%;min-height:500px}
.content__overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:.7;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;z-index:6}
.content__close{display:none;position:absolute;top:12px;right:28px;width:30px;height:30px;line-height:30px;text-align:center;background-color:#282b32;color:#fff;font-size:14px;border-radius:100%;z-index:7}
.content__close:hover{color:#fff}
.info{background-color:#fff;color:#282b32}
.info h2{position:relative;font-size:2rem;font-weight:700;margin-bottom:40px;text-transform:uppercase;direction: rtl}
.info h2::after{content:' ';position:absolute;bottom:-4px;right:0;width:120px;height:3px;background-color:#282b32;border-radius:5px}
.about p{font-size:1rem;color:#44484b;line-height:1.8;direction: rtl}
.portfolio h2{margin-left:40px;margin-right:40px}
.portfolio__container{overflow:hidden}
.portfolio__item{position:relative;padding:0 4px;margin-bottom:8px}
.portfolio__item img{border-radius:5px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.portfolio__item img:hover{-webkit-filter:blur(0.5px);filter:blur(.5px)}
.portfolio__item h3{position:absolute;top:50%;left:50%;color:#fff;font-size:1.1rem;font-weight:700;text-transform:uppercase;-webkit-transform:translate(-50%,-50%) scale(0);-ms-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;z-index:2}
.portfolio__item--overlay{position:absolute;top:0;left:0;right:0;width:calc(100% - 8px);height:100%;background-color:#000;opacity:0;border-radius:5px;margin:0 auto;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;z-index:1}
.portfolio__item:hover h3{-webkit-transform:translate(-50%,-50%) scale(1);-ms-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}
.portfolio__item:hover .portfolio__item--overlay{opacity:.6}
.gettouch__item{text-align:center}
.gettouch__item i{color:#282b32;font-size:1.36rem;margin-bottom:12px}
.gettouch__item p{font-size:.9rem}
.gettouch__item a{color:inherit}
.contact__success{position:relative;background-color:#5ed4ca;color:#333;font-size:.875rem;padding:15px 5px 13px 50px;border-radius:5px}
.contact__success::after{content:"\f00c";font-family:FontAwesome;position:absolute;top:14px;left:17px;width:20px;height:20px;background:rgba(0,0,0,.2);text-align:center;border-radius:100%}
.contact textarea{resize:none}
a:focus,a:hover{color:#51f6df}
.container{position:relative}
.form-control{font-size:.8125rem;border-color:#e1e1e1;-webkit-box-shadow:none;box-shadow:none}
.form-control:active,.form-control:focus{border-color:#f66051;-webkit-box-shadow:none;box-shadow:none}
.modal-dialog{margin:10% auto}
.modal-header{border:none}
.modal-header .close{font-size:28px;opacity:.6;margin-top:-4px}
.overlay{position:absolute;top:0;left:0;width:100%;height:100%}
.bo60{background-color:rgba(0,0,0,.6)}
.bo40{background-color:rgba(0,0,0,.4)}
.op80{opacity:.8}
.tc{text-align:center}
.fw{width:100%}
.m0{margin:0}
.p0{padding:0}
@media only screen and (min-width:1024px){
  .fh{height:100%}
  .main{height:100%}
  .home{top:48%;padding:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
  .flash-background .home{max-width:600px;padding:0 45px}
  .flash-background .logo{margin-left:0}
  .flash-background .home p{margin-left:0}
  .flash-background .counter-container{margin-left:0}
  .flash-background .footer{left:60px}
  .flash-gradient{background:transparent -webkit-linear-gradient(315deg,rgba(0,0,0,.6) 50%,transparent 0) repeat scroll 0 0;background:transparent -o-linear-gradient(315deg,rgba(0,0,0,.6) 50%,transparent 0) repeat scroll 0 0;background:transparent linear-gradient(135deg,rgba(0,0,0,.6) 50%,transparent 0) repeat scroll 0 0}
  #content{position:absolute;top:0;right:0;height:100%;width:50%;overflow:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;z-index:7;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
  #content.active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
  .content__close{display:block}
  .info{max-height:100vh;overflow-y:scroll}
  .footer{ position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: max-content; /* این باعث می‌شه عرض فوتر فقط به اندازه محتواش باشه و وسط بمونه */
    text-align: center; /* برای اطمینان از وسط‌چین بودن متن‌های داخلش */}
}
@media only screen and (max-width:990px){
  .flash-background .main{text-align:center}
  .launch .action-button{background-color:#333;color:#fff}
  .launch__side__icon{opacity:.05}
}
@media only screen and (max-width:768px){
  .sec-padding{padding:40px 20px}
  .contact{padding-top:0}
  .portfolio h2{margin-left:20px;margin-right:20px}
  .button{height:40px;line-height:36px;font-size:.875rem;padding:0 20px}
  .action-button{height:40px;line-height:40px;font-size:.875rem;padding:0 20px}
  .logo{max-width:170px}
  .home h1{font-size:1.5rem}
  .home h2{font-size:1.2rem}
  .counter-box .number{font-size:1.5rem}
  .counter-box.first .number{font-size:1.75rem}
  .home p{font-size:.85rem}
  .gettouch__item{margin-bottom:8%}
  .footer{text-align:center;padding-bottom:4%}
}
@media only screen and (max-width:570px){
  .counter-container{
    -webkit-flex-wrap:nowrap;
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    gap:8px;
  }

  .counter-box{
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-flex:1;
    -webkit-flex:1 1 0;
    -ms-flex:1 1 0;
    flex:1 1 0;
    max-width:none;
    min-width:0;
    padding:8px 0;
  }

  .counter-box .number{
    font-size:1.6rem;
  }

  .counter-box span{
    font-size:.75rem;
    white-space:nowrap;
  }

  .counter-box::after{
    left:-12px;
  }

  .counter-box:nth-child(3)::after{
    display:block;
  }
}

@media only screen and (max-width:332px){
  .counter-box{
    -webkit-box-flex:1;
    -webkit-flex:1 1 0;
    -ms-flex:1 1 0;
    flex:1 1 0;
    max-width:none;
  }

  .counter-box .number{
    font-size:1.4rem;
  }

  .counter-box span{
    font-size:.7rem;
  }
}

/* تعریف رنگ برند جدید برای هماهنگی بیشتر با تم سایت */


/* استایل مشترک دکمه‌ها برای رعایت فاصله */
.home a {
  margin: 0 15px; /* فاصله افقی بین دکمه‌ها */
  display: inline-block; /* برای اینکه مارجین درست عمل کند */
}

/* دکمه اصلی (رنگی) */
.btn-primary-custom {
  background-color: var(--brand-blue);
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.3s ease;
  /* انیمیشن پالس اول */
  animation: pulsePrimary 3.5s infinite;
}

.btn-ghost-custom {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.8); /* حاشیه کمی روشن‌تر */
  padding: 12px 30px;
  border-radius: 5px;
  transition: all 0.3s ease;
  /* انیمیشن کمی سریع‌تر برای اینکه بیشتر به چشم بیاید */
  animation: pulseGhost 3s infinite;
  position: relative; /* برای مدیریت بهتر پالس */
}
.btn-ghost-custom:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); /* درخشش بیشتر هنگام هاور */
}

/* انیمیشن دکمه اصلی - کمی قوی‌تر */
@keyframes pulsePrimary {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
  50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* انیمیشن دکمه Ghost - بسیار نرم و ملایم */
@keyframes pulseGhost {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    /* سایه را بزرگتر و غلیظ‌تر کردیم */
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@media only screen and (max-width: 768px) {
  /* خنثی کردن استایل‌های تداخلی در سایز موبایل و تبلت */
  .home a {
    margin: 10px auto; /* حذف مارجین افقی و اضافه کردن مارجین عمودی */
    display: block;    /* تبدیل به بلاک برای اینکه برن زیر هم */
    width: 80%;        /* عرض مناسب برای موبایل */
  }
}

@media only screen and (max-width: 768px) {
  .btn-ghost-custom,
  .btn-primary-custom {
    display: block;
    width: 80%;
    margin: 10px auto;
    text-align: center;
  }
  .btn-primary-custom {
    margin-top: 15px;
  }
}

.rtl{direction:rtl !important;}
.email-list {
  margin: 0;
}

.cf_email {
  display: block;
  margin-bottom: 10px;
  color: inherit;
}

.cf_email:last-child {
  margin-bottom: 0;
}
/* استایل لیست شماره تلفن‌ها */
.phone-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center; /* راست‌چین یا وسط‌چین کردن بر اساس تمپلت شما */
}

/* عنوان "شماره تماس:" */
.phone-list span {
  margin-bottom: 8px; /* فاصله عنوان از اولین شماره */
  display: block;
  direction: rtl;
}

/* استایل هر شماره تلفن */
.cf_phone {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* ایجاد فاصله بین شماره اول و دوم */
.cf_phone + .cf_phone {
  margin-top: 8px;
}

/* افکت هاور ملایم برای شماره‌ها */
.cf_phone:hover {
  color: var(--brand-blue); /* یا هر رنگ هاوری که دوست داری */
}
/* =========================================
   RE-DESIGNED SIDE MENU (Blue Tech Theme)
   ========================================= */
/* =========================================
   RE-DESIGNED CONTENT (Blue Tech - Responsive)
   ========================================= */

/* --- تنظیمات کلی برای دسکتاپ (Side Menu) --- */
@media only screen and (min-width: 1024px) {
  #content {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 50%;
    z-index: 999;
    transform: translate3d(100%, 0, 0); /* مخفی در راست */
    transition: all .55s cubic-bezier(.22, 1, .36, 1);
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.98), rgba(240, 245, 250, 0.98));
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    direction: rtl;
  }

  #content.active {
    transform: translate3d(0, 0, 0); /* باز شدن منو */
  }

  .content__close {
    display: block !important;
    position: absolute;
    top: 25px;
    right: 25px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50% !important;
    background: #1a1c21;
    color: #fff;
    font-size: 18px;
    z-index: 10;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .content__close:hover {
    transform: rotate(90deg) scale(1.1);
    background: linear-gradient(135deg, #007bff, #00c6ff);
  }
}

/* --- تنظیمات کلی برای موبایل (Stack View) --- */
@media only screen and (max-width: 1023px) {
  #content {
    position: relative; /* قرار گرفتن در جریان صفحه (زیر هم) */
    width: 100%;
    height: auto;
    transform: none !important; /* حذف انیمیشن بغل */
    background: #ffffff;
    display: block;
    direction: rtl;
    overflow: visible;
  }

  .content__close {
    display: none !important; /* در موبایل دکمه بستن لازم نیست */
  }
}

/* --- استایل‌های مشترک محتوا (Premium Look) --- */
.info {
  position: relative;
  padding: 80px 40px;
}

@media (max-width: 768px) {
  .info { padding: 40px 20px; }
}

.info h2 {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 35px;
  color: #1e272e;
  text-align: right;
  position: relative;
}

.info h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 5px;
  margin-top: 10px;
  background: linear-gradient(90deg, #00c6ff, #007bff);
  border-radius: 10px;
}

/* کارت‌های بخش‌های مختلف */
.about, .gettouch {
  background: #ffffff;
  border-radius: 25px;
  padding: 35px;
  margin-bottom: 30px;
  box-shadow: 0 14px 32px rgba(0, 50, 110, 0.12);
  border: 1px solid rgba(0, 123, 255, 0.09);
}

.about p {
  font-size: 1.05rem;
  line-height: 2.1;
  color: #485460;
  text-align: justify;
  direction: rtl;
}

/* آیتم‌های تماس */
.gettouch__item {
  background: #f8faff;
  border-radius: 20px;
  padding: 25px 15px;
  text-align: center;
  transition: all 0.35s ease;
  margin-bottom: 15px;
  box-shadow: 0 6px 18px rgba(0, 60, 120, 0.08);
}
.gettouch__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0, 123, 255, 0.16);
}
.gettouch__item i {
  width: 55px;
  height: 55px;
  line-height: 55px;
  background: linear-gradient(135deg, #007bff, #00c6ff);
  color: #fff;
  border-radius: 50%;
  font-size: 20px;
  margin-bottom: 15px;
  display: inline-block;
}

.gettouch__item a {
  color: #1e272e;
  font-weight: 600;
  display: block;
  direction: ltr;
}
.about-features{
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.about-features li{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 16px;
}

.about-features i{
  color: #00a0ff; /* رنگ تیک */
  font-size: 18px;
}
/* اصلاح تداخل فوتر و المان‌ها در لپ‌تاپ‌های معمولی */
/* تنظیمات امن برای نمایش در لپ‌تاپ بدون تداخل */
/* فقط برای لپ‌تاپ‌های با ارتفاع کم (مانیتورهای عریض ولی کوتاه) */
@media only screen and (max-height: 800px) and (min-width: 992px) {
  .main {
    height: 100vh !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .home {
    position: absolute !important;
    top: 45% !important; /* کمی بالاتر آوردن کل محتوا */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
  }

  .home img {
    /* کلک اصلی اینجاست: استفاده از vh (درصد از ارتفاع صفحه) */
    max-width: 320px !important;
    max-height: 25vh !important; /* لوگو بیشتر از ۲۵٪ ارتفاع کل صفحه رو نگیره */
    width: auto !important;
    height: auto !important;
    margin-bottom: 10px !important;
  }

  .home h2 {
    font-size: 20px !important;
    margin: 5px 0 !important;
  }

  .countdown-container {
    margin: 5px 0 !important;
    transform: scale(0.85); /* کمی فشرده‌تر کردن تایمر */
  }

  .footer {
    position: absolute !important;
    bottom: 10px !important; /* چسباندن به کف */
    left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }
}