<style>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
       body {
@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 100;
  src: url("fonts/Vazir-Thin.eot");
  src: url("Vazirmatn.woff2") format("woff2"),
    url("Vazirmatn-Regular.woff2") format("woff2")
}
@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 300;
  src: url("fonts/Vazir-Light.eot");
  src: url("fonts/Vazir-Thin.eot");
  src: url("Vazirmatn.woff2") format("woff2"),
    url("Vazirmatn-Regular.woff2") format("woff2")
}

@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 400;
  src: url("fonts/Vazir-Thin.eot");
  src: url("Vazirmatn.woff2") format("woff2"),
    url("Vazirmatn-Regular.woff2") format("woff2")
}
@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 950;
  src: url("fonts/Vazir-Thin.eot");
  src: url("Vazirmatn.woff2") format("woff2"),
    url("Vazirmatn-Regular.woff2") format("woff2")
}

body {
  font-family: vazir;
  direction: rtl;
}
           background-color: #f7f7f7;
           color: #333;
           line-height: 1.6;
           padding-bottom: 60px; /* فضای کافی برای منو */
       }
       header {
           background-color: #ffcc00;
           padding: 20px;
           text-align: center;
           color: white;
           font-size: 2em;
           font-weight: bold;
       }

       .container {
           max-width: 1200px;
           margin: 0 auto;
           padding: 20px;
       }

       .video-card {
           background-color: white;
           border-radius: 10px;
           overflow: hidden;
           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
           margin-bottom: 20px;
       }

       .video-wrapper {
           position: relative;
           padding-bottom: 56.25%; /* نسبت 16:9 */
           height: 0;
           overflow: hidden;
           max-width: 100%;
           background-color: #000;
       }

       .video-wrapper iframe, .video-wrapper script {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
       }

       .video-description {
           padding: 15px;
           background-color: #f0f0f0;
       }

       .video-description h3 {
           margin: 0 0 10px 0;
           color: #ff6600;
       }

       .video-description p {
           color: #666;
       }

       .social-icons {
           display: flex;
           gap: 10px;
           margin-top: 10px;
       }

       .social-icons a {
           color: #ff6600;
           font-size: 2em;
           transition: color 0.3s ease;
       }

       .social-icons a:hover {
           color: #333;
       }

       .bottom-nav {
           position: fixed;
           bottom: 0;
           width: 100%;
           background-color: #ffcc00;
           display: flex;
           justify-content: space-around;
           align-items: center;
           padding: 10px 0;
           box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
       }

       .bottom-nav a {
           text-decoration: none;
           color: #333;
           font-size: 1.2em;
           display: flex;
           flex-direction: column;
           align-items: center;
           transition: all 0.3s ease;
       }

       .bottom-nav a:hover {
           color: #ff6600;
       }

       .bottom-nav a i {
           font-size: 1.5em;
           margin-bottom: 5px;
       }

       /* تبلیغات */
       .ad-container {
           display: flex;
           justify-content: space-between;
           margin: 20px 0;
           padding: 10px 0;
       }

       .ad {
           background-color: #eee;
           width: 728px;
           height: 90px;
           text-align: center;
           line-height: 90px;
           font-size: 1.2em;
           color: #333;
       }

       @media (max-width: 768px) {
           .ad-container {
               flex-direction: column; /* تبلیغ‌ها در موبایل زیر هم قرار بگیرند */
           }
           .ad {
               width: 100%;
               height: 150px; /* ارتفاع بیشتر در موبایل */
               line-height: 150px; /* متناسب با ارتفاع */
               font-size: 1.5em; /* اندازه متن بزرگ‌تر برای موبایل */
           }
       }

       /* بهینه‌سازی SEO */
       h1, h2, h3 {
           font-weight: 700;
       }

       p {
           font-size: 1.1em;
       }

   </style>