body {
            margin: 0;
            overflow-x: hidden;
            background: black;
            color: white;
            font-family: Arial, sans-serif;
        }

        canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        /* کادر اصلی */
        .content {
            position: relative;
            z-index: 1;
            background: rgba(0, 0, 0, 0.4); /* شفاف برای نمایش ستاره‌ها */
            border-radius: 15px;
            padding: 20px;
            margin: 30px auto;
           
            max-width: 900px;
        }

        /* سبک برای تصاویر */
        .content img {
            border-radius: 10px;
            margin: 15px 0;
            max-width: 100%;
        }

        /* استایل تیتر‌ها */
        .content h1, .content h2 {
            color: #00d8ff;
            margin-bottom: 15px;
        }

        /* متن ساده */
        .content p {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 15px;
        }

        /* نکات مهم */
        .badge-danger {
            background-color: #ff4757;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
        }

        /* فرم نظر */
        .comment-form {
            margin-top: 30px;
            background: rgba(0, 0, 0, 0.8);
            padding: 20px;
            border-radius: 15px;
        }

        .comment-form input, .comment-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            background: #222;
            border: 1px solid #333;
            color: white;
            border-radius: 5px;
        }

        .comment-form button {
            background-color: #00d8ff;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .comment-form button:hover {
            background-color: #008cbb;
        }

        /* نمایش نظرات */
        .comments-section {
            margin-top: 40px;
            background: rgba(0, 0, 0, 0.8);
            padding: 20px;
            border-radius: 15px;
        }

        .comment {
            margin-bottom: 20px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
        }

        .comment h5 {
            margin-bottom: 5px;
            color: #00d8ff;
        }

        .comment p {
            font-size: 1rem;
            color: #ddd;
        }

        /* استایل رسانه‌ای */
        @media (max-width: 768px) {
            .content {
                margin: 10px auto;
                padding: 15px;
            }

            .content h1 {
                font-size: 1.8rem;
            }

            .content h2 {
                font-size: 1.5rem;
            }

            .content p {
                font-size: 1rem;
            }

            .comment-form input, .comment-form textarea {
                font-size: 0.9rem;
            }

            .comment-form button {
                font-size: 0.9rem;
            }
        }


        
/* footer css*/
.footer {
  background: #000;
  color: #fff;
  padding: 30px 20px;
  text-align: center;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-social {
  margin-bottom: 15px;
}

.footer-social a {
  color: #fff;
  margin: 0 10px;
  font-size: 24px;
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: #00d8ff;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.footer-links li {
  display: inline-block;
  margin: 0 15px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #00d8ff;
}

.footer-copyright {
  font-size: 0.9rem;
  color: #ccc;
  margin-top: 15px;
}