html {
       scroll-behavior: smooth;
       overflow-x: hidden;
   }

   *,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }

   /* global font */
   body {
       font-family: 'Encode Sans', sans-serif;
       line-height: 1.5;
       background: #fafafa;
       color: #2E354D;
   }

   img {
       display: block;
       max-width: 100%;
       height: auto;
   }


   .container {
       max-width: 1272px;
       margin: 0 auto;
       padding: 0 20px;
   }


   .sec {
       margin-top: 16px;
       margin-bottom: 16px;
   }



   /* More Button */
   .more-container {
       text-align: center;
   }




   /* Responsive */
   @media screen and (max-width: 768px) {

       .more-container {
           gap: 32px;
           /* فاصله عمودی بیشتر */
       }

       .more-btn {
           width: 100%;
           /* دقیقاً هم‌اندازه */
           max-width: 320px;
           /* اختیاری ولی خیلی UX-friendly */
           text-align: center;
       }


       .more-btndark {
           width: 100%;
           /* دقیقاً هم‌اندازه */
           max-width: 320px;
           /* اختیاری ولی خیلی UX-friendly */
           text-align: center;
       }

       .hero {
           padding: 100px 0 60px;
           margin-top: 0px;
       }

       .hero h1 {
           font-size: 32px;
       }

       .card {
           width: 300px;
           height: 160px;
       }

       .studies .blogcontainer {
           padding: 0 !important;
       }

       .studies-grid {
           display: block;
       }

       .study-card {
           margin: 0 auto 20px;
           border-radius: 12px;
           overflow: hidden;
       }

       .img-wrapper {
           border-radius: 12px;
       }

       .img-wrapper img {
           width: 100%;
           height: auto;
       }

       .study-card-content {
           padding: 16px 0 !important;
       }

       .see-link {
           display: none;
       }
   }

   @media (min-width: 769px) {
       .studies-grid {
           display: grid !important;
           grid-template-columns: repeat(2, 1fr);
           gap: 40px;
       }
   }




   .blogcontainer {
       max-width: 680px;
       margin: 0 auto;
       padding: 0 16px;
   }

   .blog {
       padding: 24px 0px 60px;
       margin-top: 60px;
   }

   /* Title */
   .blog h1 {
       font-family: 'Encode Sans Semi Condensed', sans-serif;
       line-height: 1.2;
       font-size: 40px;
       font-weight: 800;
       margin-bottom: 8px;
   }

   .blog h2 {
       font-size: 24px;
       font-weight: 800;
       margin-bottom: 8px;
   }

   /* Image row */
   .image-row {
       display: flex;
       flex-wrap: wrap;
       gap: 16px;
       /* فاصله بین تصاویر */
       justify-content: center;
   }

   .image-row img {
       flex: 1 1 calc(50% - 10px);
       max-width: calc(50% - 10px);
       height: auto;
       object-fit: cover;
       border-radius: 8px;
   }


   /* Highlighted large image (no border) */
   .image-large {
       overflow: hidden;
   }

   .image-large img {
       width: 100%;
       height: 100%;
       display: block;
       border-radius: 8px;
       margin-top: 12px;
       margin-bottom: 12px;
   }

   /* Text blocks */
   .text-block p {
       font-size: 18px;
       color: #555;
       margin-bottom: 24px;
   }

   .custom-list {
       text-align: left;
       padding-left: 0;
       /* حذف پدینگ پیش‌فرض */
       list-style: none;
       /* حذف بولت‌های پیش‌فرض */
   }

   .custom-list li {
       font-size: 18px;
       margin-bottom: 12px;
       color: #555;
       position: relative;
       padding-left: 12px;
   }

   .custom-list li::before {
       content: '•';
       /* افزودن بولت دستی */
       position: absolute;
       left: 0;
       color: #2E354D;
   }

   /* More Button */
   .more-container {
       text-align: center;
       margin-top: 80px;
   }

   /* More Button */
   .more-btnRow {
       display: flex;
       justify-content: center;
       gap: 16px;
       flex-wrap: wrap;
       margin-top: 40px;
   }

   .more-btn {
       padding: 12px 24px;
       border: 1px solid #2E354D;
       background: transparent;
       color: #2E354D;
       border-radius: 6px;
       font-weight: 600;
       text-decoration: none;
       transition: background 0.2s, color 0.2s;
       margin: 0;
   }

   .more-btn:hover {
       background: #2E354D;
       color: #fff;
   }


   .more-btndark {
       padding: 12px 24px;
       border: 1px solid #ffffff;
       background: #2E354D;
       color: #ffffff;
       border-radius: 6px;
       font-weight: 600;
       text-decoration: none;
       transition: background 0.2s, color 0.2s;
       margin: 0;
   }

   .more-btndark:hover {
       background: #fff;
       color: #2E354D;
       border: 1px solid #2E354D;
   }

   /* Responsive adjustments */

   @media (max-width: 680px) {
       .image-row img {
           flex: 1 1 100%;
           max-width: 100%;
       }
   }



   /* for open Big Image and close it*/
   .zoomable {
       cursor: pointer;
       transition: 0.3s;
   }

   /* Overlay styles */
   .overlay {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100vw;
       height: 100vh;
       background-color: rgba(0, 0, 0, 0.8);
       justify-content: center;
       align-items: center;
       z-index: 999;
   }

   .fullImage {
       max-width: 90vw;
       max-height: 90vh;
       width: auto;
       height: auto;
       cursor: pointer;
       object-fit: contain;
       border-radius: 12px;
   }


   .closeimage-btn {
       position: absolute;
       top: 24px;
       right: 32px;
       width: 32px;
       height: 32px;
       background-color: transparent;
       border: none;
       cursor: pointer;
       z-index: 11000;
       background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
       background-repeat: no-repeat;
       background-position: center;
       transition: filter 0.2s ease;
   }