/* style.css */

html {
    scroll-behavior: smooth;
  }
  
  body {
    /*background-color: #000;*/
    /*color: #fff;*/
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    font-family: 'Vazirmatn', sans-serif;
    margin: 0;
  }
  
  .title-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }
  
  .main-title {
    font-size: 3rem;
    font-weight: bold;
    padding-bottom: 0.5rem;
  }
  
  .content-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-grow: 1;
  }
  
  .list-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    margin-bottom: 5rem;
  }
  
  .list-wrapper h2 {
    font-size: 2rem;
    font-weight: bold;
  }
  
  .list-wrapper ul {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: 300;
  }
  
  .list-wrapper li {
    margin-bottom: 1rem;
  }
  
  /* Styles for the new full-screen section */
  .full-screen-section {
    width: 100%;
    /*height: 100vh;*/
    display: flex;
    /*justify-content: center;*/
    /*align-items: center;*/
    padding: 20px;
    /*box-sizing: border-box;*/
    flex-direction: column;
    margin-top: 150px;
  }
  
  .full-screen-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .figma-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .section-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 2rem;
    text-align: center; /* This will center the title */
  }
  
  .section-text-container {
    flex: 3;
    /*flex-direction: column;*/
    align-items: flex-end; /* This aligns the text content to the right */
    text-align: right; /* This ensures the text inside the container is right-aligned */
    margin: 50px;
  }
  
  .image-container {
    flex: 1;
  }
  
  .section-text-container p {
    font-size: 1.25rem;
    /*margin-bottom: 2rem;*/
  }
  
  .weakness-list {
    list-style: outside;
    padding: 0;
    margin: 0 50px;
    text-align: right;
  }
  
  .weakness-list li {
    /*margin-bottom: 1.5rem;*/
  }
  
  .weakness-title {
    font-size: 1.5rem;
    font-weight: bold;
    /*margin-bottom: 0.5rem;*/
  }
  
  .weakness-text {
    font-size: 1.1rem;
    font-weight: 300;
  }
  
  .scroll-to-top-btn {
    position: fixed; /* Fixes the button relative to the viewport */
    bottom: 20px; /* Positions it 20px from the bottom */
    right: 20px; /* Positions it 20px from the right */
    background-color: #007BFF; /* A nice button color */
    color: white; /* White text */
    padding: 10px 15px;
    text-decoration: none; /* Removes the underline from the link */
    border-radius: 5px; /* Rounded corners */
    z-index: 1000; /* Ensures the button is on top of other content */
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .main-title {
      font-size: 2rem;
    }
  
    .list-wrapper h2 {
      font-size: 1.5rem;
    }
  
    .list-wrapper ul {
      font-size: 1rem;
    }
  
    .section-title {
      font-size: 1.8rem;
    }
  
    .section-text-container p,
    .weakness-text {
      font-size: 1rem;
    }
  
    .weakness-title {
      font-size: 1.2rem;
    }
  }