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;
   }



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

   .profile-img {
       width: 100px;
       height: 100px;
       border-radius: 50%;
       object-fit: cover;
       margin-bottom: 24px;
   }

   .hero h1 {
       font-family: 'Encode Sans Semi Condensed', sans-serif;
       font-size: 60px;
       font-weight: 800;
       line-height: 1.2;
       margin-bottom: 48px;
   }

   .hero p {
       font-size: 18px;
       color: #555;
       margin-bottom: 24px;
   }



   .social-icons {
       display: flex;
       gap: 16px;
   }

   .social-icons a {
       width: 40px;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 1px solid #ddd;
       border-radius: 50%;
       color: #2E354D;
       font-size: 16px;
       text-decoration: none;
       transition: background 0.2s, color 0.2s;
   }

   .social-icons a:hover {
       background: #2E354D;
       color: #fff;
   }

   /* Full-width Marquee */
   .marquee {
       width: 100vw;
       position: relative;
       left: 50%;
       margin-left: -50vw;
       overflow: hidden;
       padding: 40px 0;
   }

   .marquee .cards {
       display: flex;
       gap: 16px;
       width: max-content;
       animation: scroll 30s linear infinite;
   }

   .card {
       flex: 0 0 auto;
       width: 346px;
       height: 182px;
       border-radius: 12px;
       overflow: hidden;
   }

   .card img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s ease;
   }

   .card:hover img {
       transform: scale(1.05);
   }

   @keyframes scroll {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(-50%);
       }
   }

   .marquee:hover .cards {
       animation-play-state: paused;
   }

   /* Case Studies */
   .studies {
       background: #F3F3F2;
       padding: 40px 20px 80px;
       margin-top: 40px;
   }

   .studies h2 {
       font-size: 1.75rem;
       font-weight: 800;
       margin-bottom: 10px;
   }

   .studies p {
       font-size: 1rem;
       color: #555;
       margin-bottom: 24px;
   }

   .studies-grid {
       display: grid;
       gap: 40px;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   }

   .study-card {
       display: block;
       text-decoration: none;
       color: inherit;
       border-radius: 8px;
       overflow: hidden;
       transition: box-shadow 0.3s ease;
   }



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

   .img-wrapper img {
       width: 100%;
       transition: transform 0.5s ease;
   }

   .study-card:hover .img-wrapper img {
       transform: scale(1.05);
   }

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

   .study-card-content h3 {
       font-size: 1.75rem;
       font-weight: 600;
       margin-bottom: 16px;
       text-decoration: none;
   }

   .study-card-content p {
       color: #555;
       margin-bottom: 16px;
       text-decoration: none;
   }


   .see-link {
       opacity: 0;
       display: inline-block;
       font-weight: 600;
       color: #2E354D;
       text-decoration: none;
       transition: opacity 0.3s ease-in;
       margin-top: 16px;
   }

   .study-card:hover .see-link {
       opacity: 1;
   }

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

   .more-btn {
       display: inline-block;
       margin: 40px auto 0;
       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;
   }

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

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


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


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

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

       .studies {
           padding-left: 16px;
           padding-right: 16px;
       }

       .studies .container {
           padding: 0;
           margin: 0;
           width: 100%;
       }

       .studies-grid {
           display: grid;
           gap: 24px;
       }


       .study-card {
           display: block;
           text-decoration: none;
           /* حذف خط زیر */
           color: inherit;
           /* ارث بردن رنگ از بدنه */

           overflow: hidden;
           transition: box-shadow 0.3s ease;

           /*padding: 16px;*/
       }

       /* وقتی هاور شد، سایه بده */
       .study-card:hover {
           box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
       }

       /* همه‌ی متون داخلی لینک نباید رنگ و underline داشته باشن */
       .study-card h3,
       .study-card p,
       .study-card .see-link {
           margin-bottom: 12px;



           text-decoration: none !important;
           color: inherit !important;
       }

       /* فقط این مورد، موقع هاور، استایل بگیره */
       .study-card:hover .see-link {
           color: #007bff;
           text-decoration: underline;
       }


       .study-card:hover .see-link {
           text-decoration: underline;
       }



       .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;
       }
   }

   /* هیچ border روی خودِ عنصر اصلی نیست */
   .typewriter {
       white-space: pre-wrap;
       overflow: visible;
       display: inline-block;
       letter-spacing: .0em;
       border-right: none;
       /* مطمئن شوید اینجا none است */
   }

   /* ابتدا هیچ caret ای نداریم */
   .typewriter::after {
       content: none;
   }

   /* فقط در طول تایپ، caret کوتاه و چشمک‌زن اضافه می‌شود */
   .typewriter.typing::after {
       content: '';
       display: inline-block;
       width: .1em;
       /* عرض caret */
       height: 1em;
       /* فقط یک خط ارتفاع */
       background: #2E354D;
       margin-left: .05em;
       vertical-align: text-bottom;
       animation: blink-caret .75s step-end infinite;
   }

   @keyframes blink-caret {

       from,
       to {
           background: transparent;
       }

       50% {
           background: #333;
       }
   }