/* استایل اختصاصی هدر */
    
      
        /* .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        } */
        /* .logo {
            height: 80px;
        }
        .logo img {
            height: 100%;
            width: auto;
        } */
       
        .menu-toggle {
            font-size: 24px;
            color: #333;
            background: none;
            border: none;
            cursor: pointer;
        }
        .header-text {
            font-size: 16px;
            color: #e6e7e1;
            font-weight: 500;
        }
        
        /* Wave Animation */
        .wave-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            height: 30px;
            margin-top: -1px; /* برای اتصال به هدر */
        }
        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 100%;
            background-repeat: repeat no-repeat;
            background-position: 0 bottom;
            background-size: 50% 30px;
            animation: wave 3s linear infinite;
        }
        .wave-front {
            background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23ffffff" opacity=".25"/></svg>');
        }
        /* .wave-back {
            background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23ffffff"/></svg>');
            animation: wave 6s linear infinite;
        } */
        @keyframes wave {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* منوی آف‌کینوس */
        .offcanvas-header {
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        .offcanvas-title {
            font-weight: bold;
        }
        .nav-main a {
            color: #333;
            font-size: 16px;
        }
        .dropdown-menu {
            border: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        /* استایل موج آب با حرکت عمودی */
.water-wave {
  position: relative;
  width: 100%;
  height: 100px; /* ارتفاع موج */
  /* margin-top: -1px; */
   margin-bottom: -1px; /* اضافه شد */
  overflow: hidden;
}

.water-wave svg {
  position: absolute;
  /* bottom: 0; */
  left: 0;
  width: 100%;
  height: 100%;
    top: 0; /* اضافه شد */
}

.wave-shape {
  fill: #274af2ed;
  animation: verticalWave 4s ease-in-out infinite;
  /* transform-origin: center bottom; */
  transform-origin: center top; /* اضافه شد */
}

@keyframes verticalWave {
  0%, 100% {
    transform: scaleY(1);
    d: path("M0,60 C150,30 350,90 500,60 C650,30 850,90 1000,60 C1150,30 1200,90 1200,60 L1200,0 L0,0 Z");
  }
  25% {
    transform: scaleY(0.95);
    d: path("M0,60 C150,40 350,80 500,60 C650,40 850,80 1000,60 C1150,40 1200,80 1200,60 L1200,0 L0,0 Z");
  }
  50% {
    transform: scaleY(1.05);
    d: path("M0,60 C150,20 350,100 500,60 C650,20 850,100 1000,60 C1150,20 1200,100 1200,60 L1200,0 L0,0 Z");
  }
  75% {
    transform: scaleY(0.98);
    d: path("M0,60 C150,35 350,85 500,60 C650,35 850,85 1000,60 C1150,35 1200,85 1200,60 L1200,0 L0,0 Z");
  }
}


.water-wave-bottom {
  position: relative;
  width: 100%;
  height: 45px;
  /* margin-top: -1px; */
   margin-bottom: -1px; /* اضافه شد */
  overflow: hidden;
}

.water-wave-bottom svg {
  width: 100%;
  height: 100%;
}

.wave-shape {
  fill: #274af2ed; /* رنگ موج */
  animation: waveMove 4s linear infinite;
}

.wave-layer {
  position: absolute;
  /* bottom: 0; */
   top: 0; /* اضافه شد */
  left: 0;
  width: 100%;
  height: 100%;
}
.water-wave-bottom .wave-layer path {
  transform: rotate(180deg);
  transform-origin: center;
}
.wave-back {
  fill:#274af2ed ; /* رنگ آبی تیره */
  animation: waveMove 8s linear infinite;
}

.wave-front {
  fill: #274af2ed; /* رنگ آبی روشن */
  animation: waveMove 5s linear infinite;
  opacity: 0.8;
}

@keyframes waveMove {
  0% { transform: translateX(0); }
  100% {transform: translateX(-50%); }
}
/* .wave-back {
  fill: #f82665; رنگ صورتی تیره
}
.wave-front {
  fill: #0767f7; رنگ صورتی روشن
} */
 /* انیمیشن برای موج آبی */
@keyframes waveMoveBack {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* انیمیشن برای موج صورتی */
@keyframes waveMoveFront {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-25%) translateY(-5px); }
  100% { transform: translateX(-50%) translateY(0); }
}
@keyframes waveMove {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-10px) scaleY(1.2); }
}


#header {
	position: relative;
	left:0; top:0; right:0;
	z-index:1000;
	font-size:14px;
	background-color:#274af2ed;
	 border-bottom: rgba(0,0,0,0.05) 1px solid; 
  border-bottom: 0;
	-webkit-box-shadow: 0 0 2px rgba(0,0,0,.1) !important;
	   -moz-box-shadow: 0 0 2px rgba(0,0,0,.1) !important;
			 box-shadow: 0 0 2px rgba(0,0,0,.1) !important; 
 box-shadow: none !important; /* حذف سایه */
	-webkit-transition: all .800s;
	   -moz-transition: all .800s;
		 -o-transition: all .800s;
			transition: all .800s;
}



@media (min-width: 400.98px) { 
  .dashed-box {
  width:90%;
 
}
 }



/* استایل پاپ‌آپ راهنما */
.help-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.help-popup.active {
  opacity: 1;
  visibility: visible;
}

.help-popup-content {
  background-color: white;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 8px 20px rgba(74, 107, 255, 0.3);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.help-popup.active .help-popup-content {
  transform: translateY(0);
}

.help-popup-header {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.help-popup-title {
  color: #4a6bff;
  font-size: 20px;
  margin: 0;
  font-weight: 600;
}

.help-popup-body {
  padding: 20px;
  text-align: center;
  line-height: 1.6;
  color: #555;
}

.help-popup-footer {
  padding: 15px 20px;
  text-align: center;
  border-top: 1px solid #f0f0f0;
}

.help-popup-close-btn {
  background-color: #4a6bff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 25px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.help-popup-close-btn:hover {
  background-color: #3a5bef;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(74, 107, 255, 0.2);
}
.menu-toggle svg path {
  fill: #e6e7e1; /* برای خطوط توپر */
  /* یا */
  stroke: #e6e7e1; /* برای خطوط با stroke */
}
.menu-toggle {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.menu-toggle svg {
  width: 40px;
  height: 40px;
  transition: transform 0.2s ease;
}

.menu-toggle:hover svg {
  transform: scale(1.1);
}













/* کانتینر آیکون‌های شناور در هدر */
.header-floating-icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

/* آیکون‌های داخل هدر */
.header-floating-icons i {
    position: absolute;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    animation: floatIcon 4s infinite ease-in-out;
}

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

/* رنگ‌های سبز و زرد */
.header-floating-icons i.green {
    color: #9bb39b96;
    /* text-shadow: 0 0 5px rgba(76, 175, 80, 0.3); */
}
.header-floating-icons i.yellow {
    color: #b1ab35a0;
    /* text-shadow: 0 0 5px rgba(255, 193, 7, 0.3); */
}

.header-floating-icons i.yellow {
    color: #b1ab35a0; /* زرد */
    /* text-shadow: 0 0 5px rgba(241, 196, 15, 0.4); */
}
.header-floating-icons i.orange {
    color: #ae9076; /* نارنجی */
    /* text-shadow: 0 0 5px rgba(230, 126, 34, 0.4); */
}
.header-floating-icons {
    z-index: 1;
}

.header-content {
    position: relative;
    z-index: 2;
}

/* اگر دکمه منو یا المان‌های دیگر هم نیاز به z-index بالاتر دارند، می‌توانید آن‌ها را نیز تنظیم کنید */
.menu-toggle, .logo, .header-text {
    position: relative;
    z-index: 3; /* بالاتر از همه */
}
/* تنظیمات موبایل برای هدر */


@media only screen and (max-width: 992px) {
#header {
     height: 80px !important; 
}
}



.bgr {
   background: linear-gradient(rgba(26, 42, 108, 0.263), rgba(5,73, 133, 0.5), #3f66a2), 
              url(../images/image1/bgr2.png) center/cover no-repeat; 
               /* background: linear-gradient(45deg, rgb(26, 42, 108), rgb(5, 73, 133), #3f66a2) !important, 
              url(../images/image1/bgr2.png) center/cover no-repeat; */
}

/* 
.buttons {
  max-width: 500px;
  width: 100%;
  border-radius: 20px;
  background-color: #00000050;
  border: 1px solid #ffffff30;
  padding: 2rem;
  backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  justify-content: center;
  gap: 1.5rem;
  position: relative;
  margin: 0 auto; 
} */
/* .buttons {
   margin: 0 auto !important; 
    position: absolute;
    top: 57%;
    left: 50%;
 
    transform: translate(-50%, -50%);
    
    background: linear-gradient(135deg, #1e3c72, #2a5298) !important;
    border: 2px solid rgba(255,215,0,0.3);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    width: 100%;
    border-radius: 8px;
    background-color: #00000050;
    border: 1px solid #ffffff30;
    padding: 2rem;
    backdrop-filter: blur(12px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    gap: 1.5rem;
} */
 /* دکمه‌ها باید بالاتر از آیکون‌ها باشند */
.buttons {
    position: absolute; /* یا fixed بسته به نیاز */
    z-index: 1001 !important; /* بالاتر از آیکون‌های متحرک */
}
 .buttons {
    margin: 0 auto !important;
    position: absolute;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background: linear-gradient(135deg, #1e3c72, #2a5298) !important; */
    /* border: 2px solid rgba(255,215,0,0.3); */
    /* box-shadow: 0 15px 35px rgba(0,0,0,0.5); */
    width: 100%;
    border-radius: 8px;
    /* background-color: #00000050; */
    /* border: 1px solid #ffffff30; */
    padding: 2rem;
    /* backdrop-filter: blur(12px); */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    gap: 1.5rem;
}
.buttons::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: #00000020;
    z-index: -1;
    border-radius: inherit;
    transition: inset 500ms ease-in-out;
}

.buttons:hover::before{
    inset: -2rem;
    transition-timing-function: cubic-bezier(0.47, 1.64, 0.41, 0.8);
}

.buttons button {
  background-color: #00000050;
  border: 1px solid #ffffff30;
  padding: 1rem;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  border-radius:20px!important;
  outline: none;
  overflow: hidden;
  cursor: pointer;
  transition: 300ms ease-in-out;
  position: relative;
  isolation: isolate;
  color: #ffffff90;
}

.buttons button svg {
 width: 3rem !important;  /* افزایش سایز آیکون */
    height: 3rem !important;
    transition: all 0.4s ease;
}
/* افکت هاور: چرخش و نور */
.buttons button:hover svg {
    transform: rotate(360deg) scale(1.2);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
}

.buttons button p {
  /* position: absolute; */
  position: static;
  width: 100%;
  font-size: 0.8rem;
  /* opacity: 0; */
  opacity: 1;
  left: 0;
  bottom: 0.5rem;
  margin: 0;
  padding: 0.3rem;
  text-align: center;
  transition: all 150ms ease-in-out 0ms;
  outline: none;
  translate: 0 10px;
 
}

.buttons button:hover p {
  opacity: 1;
  translate: 0;
  transition: all 300ms ease-in-out 150ms;
}

.buttons button:focus-visible,
.buttons button:hover {
  transform: scale(1.15);
  z-index: 10;
  color: #fff;
  background-color: rgba(var(--bg), 0.5);
     box-shadow: 0 0 20px rgba(var(--bg), 0.8);
}

.buttons:has(button:focus-visible) button:not(:focus-visible),
.buttons:has(button:hover) button:not(:hover) {
  opacity: 50%;
  scale: 85%;
  z-index: -10;
}

/* ========================================== */
/* تنظیمات مخصوص موبایل (زیر 768px) */
/* ========================================== */

@media (max-width: 768px) {
    .buttons {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        margin: 95px auto !important;
        
        /* تغییرات اصلی برای کوچک شدن دکمه‌ها */
        width: calc(100% - 20px) !important;
        max-width: 280px !important; /* عرض کلی باکس خیلی کمتر شد (قبلا 400px) */
        padding: 0.4rem !important;  /* پدینگ دور باکس کم شد */
        gap: 0.4rem !important;      /* فاصله بین دکمه‌ها کم شد */
        
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
           z-index: 2000 !important; /* بالاتر از آیکون‌های متحرک */
    }
    .buttons button {
        aspect-ratio: 1/1;
        /* height: auto; */
        width: 100% !important;
        padding: 1.05rem !important; /* پدینگ داخلی دکمه خیلی کم شد */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.1rem;
        margin: 0 !important;
        border-radius: 22px !important;
    }
    .buttons button svg {
        width: 1.6rem !important; /* سایز آیکون خیلی کوچک شد (قبلا 2.8rem) */
        height: 1.6rem !important;
        flex-shrink: 0;
    }
    .buttons button p {
        position: static;
        opacity: 1;
        translate: none;
        text-align: center;
        margin: 0;
        font-size: 0.55rem !important; /* سایز فونت خیلی کوچک شد */
        font-weight: 500;
        padding: 0;
        width: 100%;
        white-space: nowrap;
        /* overflow: hidden; */
        text-overflow: ellipsis;
        line-height: 1.1;
    }
    
    /* رنگ‌بندی‌ها و سایه‌ها (حفظ ظاهر زیبا) */
    .buttons button {
        border: none !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 -2px 0 rgba(0,0,0,0.2) !important;
        transition: all 0.2s ease !important;
    }
    .buttons div[scale-up]:nth-child(1) button {  background: radial-gradient(circle at 30% 30%, #5ab3e0, #1e6a9c) !important; }
    .buttons div[scale-up]:nth-child(2) button { background: radial-gradient(circle at 30% 30%, #8fd6b0, #3a8b5e) !important; }
    .buttons div[scale-up]:nth-child(3) button { background: radial-gradient(circle at 30% 30%, #8478b5, #4a3f7a) !important; }
    .buttons div[scale-up]:nth-child(4) button { background: radial-gradient(circle at 30% 30%, #ff9da5, #c45a62) !important; }
    .buttons div[scale-up]:nth-child(5) button { background: radial-gradient(circle at 30% 30%, #f5c37c, #d49a3a) !important; }
    .buttons div[scale-up]:nth-child(6) button { background: radial-gradient(circle at 30% 30%, #ccc094, #9e9164) !important; }
    .buttons div[scale-up]:nth-child(7) button { background: radial-gradient(circle at 30% 30%, #5ab3e0, #1e6a9c) !important; }
    .buttons div[scale-up]:nth-child(8) button { background: radial-gradient(circle at 30% 30%, #8fd6b0, #3a8b5e) !important; }

    .buttons button:active {
        transform: translateY(-2px) scale(1.02) !important;
    }
}

/* موبایل‌های خیلی کوچک (زیر 360px) */
@media (max-width: 360px) {
    .buttons {
        max-width: 240px !important; /* باز هم کوچکتر */
        gap: 0.3rem !important;
        padding: 0.3rem !important;
    }
    .buttons button svg {
        width: 1.4rem !important;
        height: 1.4rem !important;
    }
    .buttons button p {
        font-size: 0.8rem !important;
    }
}



/* انیمیشن‌ها */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --d: 0;
    --ani-speed: 300ms;
  }
  [scale-up] {
    scale: 0;
    animation: scale-up var(--ani-speed) forwards;
    animation-delay: calc(var(--order, 0ms) * var(--ani-speed));
  }
}

@keyframes scale-up {
  0% { scale: 0; }
  60% { scale: 1.15; }
  100% { scale: 1; }
}




.buttons div[scale-up]:nth-child(1) {
  background-color: #73c5ed; 
  border-radius: 9px!important;
}
.buttons div[scale-up]:nth-child(2) {
  background-color: #b5dac8;
    border-radius: 9px!important; 
}
.buttons div[scale-up]:nth-child(3) {
  background-color: #8d83b7; 
   border-radius: 9px!important;
}
.buttons div[scale-up]:nth-child(4) {
  background-color: #f09ba0; 
   border-radius: 9px!important;
}
.buttons div[scale-up]:nth-child(5) {
  background-color: #f5c887;
   border-radius: 9px!important;
}
.buttons div[scale-up]:nth-child(6) {
  background-color: #c8bc94; 
   border-radius: 9px!important;
}
.buttons div[scale-up]:nth-child(7) {
  background-color: #73c5ed; 
   border-radius: 9px!important;
}
.buttons div[scale-up]:nth-child(8) {
  background-color: #b5dac8; 
   border-radius: 9px!important;
}


/* استایل پیشرفته دکمه‌ها برای دسکتاپ */
@media (min-width: 769px) {
    /* .buttons button {
        border: none !important;
        box-shadow: 
            0 10px 20px rgba(0,0,0,0.3),
            0 6px 6px rgba(0,0,0,0.2),
            inset 0 -5px 0 rgba(0,0,0,0.2),
            inset 0 0 20px rgba(255,255,255,0.4) !important;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        position: relative;
        overflow: hidden;
    } */
.buttons button p {
        font-size: 1.2rem !important;
        font-weight: bold !important;
        color: #fff !important;
        text-shadow: 2px 2px 4px #000 !important;
    }
    
    .buttons button svg {
        width: 4rem !important;
        height: 4rem !important;
    }
    /* افکت براق روی دکمه */
    .buttons button::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
            45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 70%
        );
        transform: rotate(25deg);
        animation: shine 4s infinite;
        pointer-events: none;
    }

    @keyframes shine {
        0% { transform: translateX(-100%) rotate(25deg); }
        20% { transform: translateX(100%) rotate(25deg); }
        100% { transform: translateX(100%) rotate(25deg); }
    }

    /* رنگ‌های جذاب‌تر با گرادیانت و سایه */
    .buttons div[scale-up]:nth-child(1) button {
        background: radial-gradient(circle at 30% 30%, #5ab3e0, #1e6a9c) !important;
        box-shadow: 
            0 15px 25px #1e6a9c80,
            0 8px 10px rgba(0,0,0,0.3),
            inset 0 -5px 0 #0f3a55,
            inset 0 0 30px #b0e0ff !important;
    }
    .buttons div[scale-up]:nth-child(2) button {
        background: radial-gradient(circle at 30% 30%, #8fd6b0, #3a8b5e) !important;
        box-shadow: 
            0 15px 25px #3a8b5e80,
            0 8px 10px rgba(0,0,0,0.3),
            inset 0 -5px 0 #1e5a3a,
            inset 0 0 30px #c0f0d0 !important;
    }
    .buttons div[scale-up]:nth-child(3) button {
        background: radial-gradient(circle at 30% 30%, #8478b5, #4a3f7a) !important;
        box-shadow: 
            0 15px 25px #4a3f7a80,
            0 8px 10px rgba(0,0,0,0.3),
            inset 0 -5px 0 #2e2652,
            inset 0 0 30px #c4b8f0 !important;
    }
    .buttons div[scale-up]:nth-child(4) button {
        background: radial-gradient(circle at 30% 30%, #ff9da5, #c45a62) !important;
        box-shadow: 
            0 15px 25px #c45a6280,
            0 8px 10px rgba(0,0,0,0.3),
            inset 0 -5px 0 #8a3b42,
            inset 0 0 30px #ffd0d5 !important;
    }
    .buttons div[scale-up]:nth-child(5) button {
        background: radial-gradient(circle at 30% 30%, #f5c37c, #d49a3a) !important;
        box-shadow: 
            0 15px 25px #d49a3a80,
            0 8px 10px rgba(0,0,0,0.3),
            inset 0 -5px 0 #8a6127,
            inset 0 0 30px #ffe6b0 !important;
    }
    .buttons div[scale-up]:nth-child(6) button {
        background: radial-gradient(circle at 30% 30%, #ccc094, #9e9164) !important;
        box-shadow: 
            0 15px 25px #9e916480,
            0 8px 10px rgba(0,0,0,0.3),
            inset 0 -5px 0 #5f5437,
            inset 0 0 30px #f0e6c0 !important;
    }
    .buttons div[scale-up]:nth-child(7) button {
        background: radial-gradient(circle at 30% 30%, #5ab3e0, #1e6a9c) !important;
        box-shadow: 
            0 15px 25px #1e6a9c80,
            0 8px 10px rgba(0,0,0,0.3),
            inset 0 -5px 0 #0f3a55,
            inset 0 0 30px #b0e0ff !important;
    }
    .buttons div[scale-up]:nth-child(8) button {
        background: radial-gradient(circle at 30% 30%, #8fd6b0, #3a8b5e) !important;
        box-shadow: 
            0 15px 25px #3a8b5e80,
            0 8px 10px rgba(0,0,0,0.3),
            inset 0 -5px 0 #1e5a3a,
            inset 0 0 30px #c0f0d0 !important;
    }

    /* آیکون‌های بزرگتر و براق‌تر */
    .buttons button svg {
        width: 3.5rem !important;
        height: 3.5rem !important;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        filter: drop-shadow(3px 5px 5px rgba(0,0,0,0.4));
    }

    /* افکت هاور پیشرفته */
    .buttons button:hover {
        transform: translateY(-8px) scale(1.08) !important;
        box-shadow: 
            0 20px 30px rgba(0,0,0,0.4),
            0 10px 15px rgba(0,0,0,0.3),
            inset 0 -3px 0 rgba(0,0,0,0.2),
            inset 0 0 40px rgba(255,255,255,0.7) !important;
    }

    .buttons button:hover svg {
        transform: rotate(360deg) scale(1.3);
        filter: drop-shadow(0 0 15px rgba(255,255,255,0.9)) drop-shadow(3px 5px 5px rgba(0,0,0,0.4));
    }

    /* متن زیر آیکون */
    .buttons button p {
        font-size: 1rem !important;
        font-weight: 600;
        text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
        letter-spacing: 0.5px;
        /* margin-top: 0.5rem !important; */
    }

    /* افکت حاشیه نورانی هنگام هاور */
   /* افکت حاشیه ملایم هم‌رنگ دکمه هنگام هاور */
.buttons button::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius:20px;
    background: transparent;
    border: 2px solid transparent;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

.buttons div[scale-up]:nth-child(1) button:hover::after {
    opacity: 1;
    border-color: #4aa3d1;
    box-shadow: 0 0 20px #4aa3d1;
}
.buttons div[scale-up]:nth-child(2) button:hover::after {
    opacity: 1;
    border-color: #7bc5a0;
    box-shadow: 0 0 20px #7bc5a0;
}
.buttons div[scale-up]:nth-child(3) button:hover::after {
    opacity: 1;
    border-color: #6b5f9c;
    box-shadow: 0 0 20px #6b5f9c;
}
.buttons div[scale-up]:nth-child(4) button:hover::after {
    opacity: 1;
    border-color: #e6838a;
    box-shadow: 0 0 20px #e6838a;
}
.buttons div[scale-up]:nth-child(5) button:hover::after {
    opacity: 1;
    border-color: #e0b16c;
    box-shadow: 0 0 20px #e0b16c;
}
.buttons div[scale-up]:nth-child(6) button:hover::after {
    opacity: 1;
    border-color: #b3a77c;
    box-shadow: 0 0 20px #b3a77c;
}
.buttons div[scale-up]:nth-child(7) button:hover::after {
    opacity: 1;
    border-color: #4aa3d1;
    box-shadow: 0 0 20px #4aa3d1;
}
.buttons div[scale-up]:nth-child(8) button:hover::after {
    opacity: 1;
    border-color: #7bc5a0;
    box-shadow: 0 0 20px #7bc5a0;
  
}

    @keyframes borderRotate {
        0% { background-position: 0% 50%; }
        100% { background-position: 200% 50%; }
    }
}

/* استایل دکمه‌ها برای موبایل - همه اندازه‌ها */
@media (max-width: 768px) {
    .buttons {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
        padding: 3rem !important;
    }

    .buttons button {
        border: none !important;
        box-shadow: 
            0 5px 10px rgba(0,0,0,0.3),
            0 3px 3px rgba(0,0,0,0.2),
            inset 0 -3px 0 rgba(0,0,0,0.2),
            inset 0 0 15px rgba(255,255,255,0.3) !important;
        transition: all 0.3s ease !important;
        position: relative;
        overflow: hidden;
        padding: 1.05rem !important;
    }

    /* افکت براق روی دکمه برای موبایل */
    .buttons button::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
            45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.2) 50%,
            transparent 70%
        );
        transform: rotate(25deg);
        animation: shineMobile 5s infinite;
        pointer-events: none;
    }

    @keyframes shineMobile {
        0% { transform: translateX(-100%) rotate(25deg); }
        30% { transform: translateX(100%) rotate(25deg); }
        100% { transform: translateX(100%) rotate(25deg); }
    }

    /* رنگ‌های دکمه برای موبایل */
    .buttons div[scale-up]:nth-child(1) button {
        background: radial-gradient(circle at 30% 30%, #5ab3e0, #1e6a9c) !important;
        box-shadow: 
            0 8px 15px #1e6a9c80,
            0 4px 6px rgba(0,0,0,0.3),
            inset 0 -3px 0 #0f3a55,
            inset 0 0 20px #b0e0ff !important;
    }
    .buttons div[scale-up]:nth-child(2) button {
        background: radial-gradient(circle at 30% 30%, #8fd6b0, #3a8b5e) !important;
        box-shadow: 
            0 8px 15px #3a8b5e80,
            0 4px 6px rgba(0,0,0,0.3),
            inset 0 -3px 0 #1e5a3a,
            inset 0 0 20px #c0f0d0 !important;
    }
    .buttons div[scale-up]:nth-child(3) button {
        background: radial-gradient(circle at 30% 30%, #8478b5, #4a3f7a) !important;
        box-shadow: 
            0 8px 15px #4a3f7a80,
            0 4px 6px rgba(0,0,0,0.3),
            inset 0 -3px 0 #2e2652,
            inset 0 0 20px #c4b8f0 !important;
    }
    .buttons div[scale-up]:nth-child(4) button {
        background: radial-gradient(circle at 30% 30%, #ff9da5, #c45a62) !important;
        box-shadow: 
            0 8px 15px #c45a6280,
            0 4px 6px rgba(0,0,0,0.3),
            inset 0 -3px 0 #8a3b42,
            inset 0 0 20px #ffd0d5 !important;
    }
    .buttons div[scale-up]:nth-child(5) button {
        background: radial-gradient(circle at 30% 30%, #f5c37c, #d49a3a) !important;
        box-shadow: 
            0 8px 15px #d49a3a80,
            0 4px 6px rgba(0,0,0,0.3),
            inset 0 -3px 0 #8a6127,
            inset 0 0 20px #ffe6b0 !important;
    }
    .buttons div[scale-up]:nth-child(6) button {
        background: radial-gradient(circle at 30% 30%, #ccc094, #9e9164) !important;
        box-shadow: 
            0 8px 15px #9e916480,
            0 4px 6px rgba(0,0,0,0.3),
            inset 0 -3px 0 #5f5437,
            inset 0 0 20px #f0e6c0 !important;
    }
    .buttons div[scale-up]:nth-child(7) button {
        background: radial-gradient(circle at 30% 30%, #5ab3e0, #1e6a9c) !important;
        box-shadow: 
            0 8px 15px #1e6a9c80,
            0 4px 6px rgba(0,0,0,0.3),
            inset 0 -3px 0 #0f3a55,
            inset 0 0 20px #b0e0ff !important;
    }
    .buttons div[scale-up]:nth-child(8) button {
        background: radial-gradient(circle at 30% 30%, #8fd6b0, #3a8b5e) !important;
        box-shadow: 
            0 8px 15px #3a8b5e80,
            0 4px 6px rgba(0,0,0,0.3),
            inset 0 -3px 0 #1e5a3a,
            inset 0 0 20px #c0f0d0 !important;
    }

    /* آیکون‌ها برای موبایل */
    .buttons button svg {
        width: 4rem !important;
        height: 4rem !important;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.4));
    }

    /* متن زیر آیکون برای موبایل */
    .buttons button p {
        font-size: 1.3rem !important;
        font-weight: 600;
        text-shadow: 2px 2px 3px #000;
        margin-top: 0.8rem !important;
        opacity: 5 !important;
        translate: 0 !important;
        color: white;
    }

    /* افکت هاور برای موبایل (با تاچ) */
    .buttons button:active {
        transform: translateY(-4px) scale(1.05) !important;
        box-shadow: 
            0 12px 20px rgba(0,0,0,0.4),
            0 6px 8px rgba(0,0,0,0.3),
            inset 0 -2px 0 rgba(0,0,0,0.2),
            inset 0 0 30px rgba(255,255,255,0.6) !important;
    }

    .buttons button:active svg {
        transform: rotate(180deg) scale(1.2);
        filter: drop-shadow(0 0 10px rgba(255,255,255,0.8)) drop-shadow(2px 3px 4px rgba(0,0,0,0.4));
    }

    /* افکت حاشیه برای موبایل */
    .buttons button::after {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 8px;
        background: transparent;
        border: 1.5px solid transparent;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: -1;
    }

    .buttons div[scale-up]:nth-child(1) button:active::after {
        opacity: 1;
        border-color: #4aa3d1;
        box-shadow: 0 0 15px #4aa3d1;
    }
    .buttons div[scale-up]:nth-child(2) button:active::after {
        opacity: 1;
        border-color: #7bc5a0;
        box-shadow: 0 0 15px #7bc5a0;
    }
    .buttons div[scale-up]:nth-child(3) button:active::after {
        opacity: 1;
        border-color: #6b5f9c;
        box-shadow: 0 0 15px #6b5f9c;
    }
    .buttons div[scale-up]:nth-child(4) button:active::after {
        opacity: 1;
        border-color: #e6838a;
        box-shadow: 0 0 15px #e6838a;
    }
    .buttons div[scale-up]:nth-child(5) button:active::after {
        opacity: 1;
        border-color: #e0b16c;
        box-shadow: 0 0 15px #e0b16c;
    }
    .buttons div[scale-up]:nth-child(6) button:active::after {
        opacity: 1;
        border-color: #b3a77c;
        box-shadow: 0 0 15px #b3a77c;
    }
    .buttons div[scale-up]:nth-child(7) button:active::after {
        opacity: 1;
        border-color: #4aa3d1;
        box-shadow: 0 0 15px #4aa3d1;
    }
    .buttons div[scale-up]:nth-child(8) button:active::after {
        opacity: 1;
        border-color: #7bc5a0;
        box-shadow: 0 0 15px #7bc5a0;
    }
}

/* استایل برای موبایل‌های خیلی کوچک (زیر 400px) */
@media (max-width: 400px) {
    .buttons {
        gap: 0.6rem !important;
        padding: 0.8rem !important;
    }

    .buttons button {
        padding: 0.6rem !important;
    }

    .buttons button svg {
        width: 2.2rem !important;
        height: 2.2rem !important;
    }

    .buttons button p {
        font-size: 0.7rem !important;
    }
}

/* استایل برای تبلت (بین 768px و 992px) */
@media (min-width: 769px) and (max-width: 992px) {

    .buttons {
        max-width: 700px !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 1.2rem !important;
        padding: 1.5rem !important;
    }

    .buttons button svg {
        width: 3rem !important;
        height: 3rem !important;
    }

    .buttons button p {
        font-size: 0.9rem !important;
    }
}



/* تنظیمات برای دسکتاپ - پهن‌تر کردن باکس */
 @media (min-width: 992px) {
    .buttons {
        max-width: 800px !important;
        width: 50% !important;
        padding: 5rem !important; 
        gap: 3rem !important; 
        margin: 4rem auto !important;
          z-index: 1001 !important; 
    }
    

    .buttons button svg {
        width: 5rem !important;
        height: 5rem !important;
    }
  
    .buttons button p {
        font-size: 1.3rem !important;
    }
    
    .buttons button {
        padding: 1.3rem !important;
    }
}
 






/* رنگ‌بندی پاپ‌آپ‌ها بر اساس دکمه */
#popup-manshor .help-popup-header,
#popup-manshor .help-popup-footer button {
    background-color: rgba(220, 38, 38, 0.1) !important;
}
#popup-manshor .help-popup-title,
#popup-manshor .help-popup-footer button {
    color: rgb(220, 38, 38) !important;
}

#popup-shakayat .help-popup-header,
#popup-shakayat .help-popup-footer button {
    background-color: rgba(124, 58, 237, 0.1) !important;
}
#popup-shakayat .help-popup-title,
#popup-shakayat .help-popup-footer button {
    color: rgb(124, 58, 237) !important;
}

#popup-services .help-popup-header,
#popup-services .help-popup-footer button {
    background-color: rgba(29, 78, 216, 0.1) !important;
}
#popup-services .help-popup-title,
#popup-services .help-popup-footer button {
    color: rgb(29, 78, 216) !important;
}

#popup-weather .help-popup-header,
#popup-weather .help-popup-footer button {
    background-color: rgba(21, 128, 61, 0.1) !important;
}
#popup-weather .help-popup-title,
#popup-weather .help-popup-footer button {
    color: rgb(21, 128, 61) !important;
}

#popup-safety .help-popup-header,
#popup-safety .help-popup-footer button {
    background-color: rgba(77, 124, 15, 0.1) !important;
}
#popup-safety .help-popup-title,
#popup-safety .help-popup-footer button {
    color: rgb(77, 124, 15) !important;
}

#popup-poll .help-popup-header,
#popup-poll .help-popup-footer button {
    background-color: rgba(192, 38, 211, 0.1) !important;
}
#popup-poll .help-popup-title,
#popup-poll .help-popup-footer button {
    color: rgb(192, 38, 211) !important;
}

#popup-roads .help-popup-header,
#popup-roads .help-popup-footer button {
    background-color: rgba(217, 119, 6, 0.1) !important;
}
#popup-roads .help-popup-title,
#popup-roads .help-popup-footer button {
    color: rgb(217, 119, 6) !important;
}

#popup-contest .help-popup-header,
#popup-contest .help-popup-footer button {
    background-color: rgba(162, 28, 175, 0.1) !important;
}
#popup-contest .help-popup-title,
#popup-contest .help-popup-footer button {
    color: rgb(162, 28, 175) !important;
}




/* --- استایل‌های اصلاح شده هدر و لوگو --- */

/* تنظیمات کلی هدر */
.custom-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(45deg, #1a2a6c, #054985, #3f66a2) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    padding: 10px 0; /* پدینگ هدر */
    display: flex;
   height: 100%;
    width: auto; /* جلوگیری از دفرمه شدن */
    display: block; /* حذف فاصله سفید زیر تصویر */
    max-width: 100%;
}

.header-content {
    display: flex !important;
    align-items: center !important; /* تراز عمودی محتوا */
    justify-content: space-between;
    width: 100%;
}
/* تنظیمات لوگو دسکتاپ */
.logo {
    height: 150px; /* این عدد را تغییر دهید (پیشنهاد: 90px یا 100px) */
    /* display: flex; */
    align-items: center;
    line-height: 0; /* حذف فاصله اضافی */
    margin: 0;
}

.logo img {
    height: 100%;
    width: auto; /* جلوگیری از دفرمه شدن */
    display: block; /* حذف فاصله سفید زیر تصویر */
    max-width: 100%;
}
/* --- تنظیمات موبایل (اصلاح شده برای تراز دقیق) --- */
@media (max-width: 767px) {
    .custom-header {
        padding: 10px 0 !important; /* پدینگ کمتر تا لوگو فضای بیشتری بگیرد */
        height: auto !important; /* ارتفاع خودکار بر اساس لوگو */
        display: flex;
        align-items: center !important;
    }
.buttons{
    z-index: 1001 !important; 
}
    .header-content {
        align-items: center !important; /* اجبار به تراز وسط */
        padding: 0 10px; /* فاصله از کناره‌ها */
    }

    .logo {
        height: 65px !important; /* افزایش سایز لوگو در موبایل (از 45 به 65) */
        margin: 0 !important; /* حذف هرگونه مارجین */
        display: flex;
        align-items: center;
        line-height: 0;
    }

    .logo img {
        height: 100%;
        width: auto;
        display: block;
    }

    .menu-toggle svg {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* اگر متنی کنار لوگو هست */
    .header-text {
        font-size: 13px !important;
        margin: 0 !important;
        line-height: 1.2;
    }

}

@media only screen and (max-width: 992px) {
    #header {
        height: 120px !important;
    }
}













/* <!-- اضافه کردن CSS اصلاحی --> */

@media (max-width: 768px) {
    /* آیکون‌های سراسری */
    #headerIcons1 {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }
    
    /* آیکون‌های داخل هدر */
    #headerIcons {
        z-index: 1 !important;
        pointer-events: none !important;
    }
    
    /* باکس دکمه‌ها - بالاتر از همه */
    .buttons {
        position: relative !important;
        z-index: 1001 !important;
        background: transparent !important;
        margin: 95px auto !important;
    }
    
    /* دکمه‌ها هم بالاتر */
    .buttons button {
        position: relative;
        z-index: 1002 !important;
        backdrop-filter: blur(5px); /* کمی محو کردن زمینه برای خوانایی بهتر */
    }
    
    /* محتوای هدر بالاتر از آیکون‌ها */
    .header-content {
        position: relative;
        z-index: 10 !important;
    }
    
    /* کم کردن opacity آیکون‌ها برای محو شدن بیشتر پشت دکمه‌ها */
    .header-floating-icons i {
        opacity: 8 !important;
    }
    
    /* اطمینان از عدم تداخل */
    #header {
        position: relative;
        z-index: 1000;
    }
    
    body {
        position: relative;
        overflow-x: hidden;
    }
}