/* common css are in root.css file*/

.header { grid-area: header; }
.menu { grid-area: menu; }
.menu1 { grid-area: menu1; }
.moksho { grid-area: moksho; }
.content { grid-area: content; }
.footer { grid-area: footer; }

body#signupPage {
    background-color: var(--background-color); /* Light background */
    display: flex;
    justify-content: space-between;
    align-items: left;
    margin: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: 5% 60% 30% 5%;
    grid-template-areas:
      'header header header header'
      'menu moksho content menu1'
      'footer footer footer footer';
    gap: 0px;
    padding: 1px;
  }

 
  
.grid-container > div,
.grid-container > section, 
.grid-container > article{    
    text-align: center;
    padding: 1px;
  }

  .mission-form {
    display: grid;
    text-align: left;
  }

  .content-form {
    display: grid;
    gap: 10px;
    justify-items: center; /* Center the items horizontally */
}
  .mid {
    display: grid;    
    padding: 5px;
    gap: 10px;
    
  }

  .signin-container {    
    padding-top: 70px;
    /*padding-bottom: 20px; /* Vertical padding */        
  }

 /* visual enhancements made to collapse the content ad expand when clicked*/
 .paragraph-container {
  margin: 5px;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, #0280be, #05c7f2); /* Gradient background */
  color: white;
  width: 90%;
  overflow: hidden; /* Ensures no overflow when content is hidden */
  text-align: left; /* Centers child elements horizontally */
}

/* Show preview and hide full content by default */
.preview {
  display: block;
}

.full-content {
  display: none;
  margin-top: 10px;
}





/* Media query for larger screens: Show full content */
@media (min-width: 768px) {
  .preview {
    display: none; /* Hide preview on larger screens */
  }

  .full-content {
    display: block; /* Show full content on larger screens */
  }

  .toggle-button {
    display: none; /* Hide toggle button on larger screens */
  }
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 100%; /* Stack columns vertically on small screens */
        grid-template-areas:
          'header'
          'moksho'
          'content'
          'footer';
    }
    .paragraph-container {
      margin: 5px;
      padding-top: 1px;
      padding-bottom: 1px; /* Vertical padding */
      padding-left: 2px;
      padding-right: 2px; /* Horizontal padding */
      border-radius: 8px; /* Makes the edges rounded */
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for better visual effect */
      color: var(--background-color);
      width: 95%;
      text-align: center; /* Centers child elements horizontally */
    }

    .preview {
      display: block;
    }
  
    .full-content {
      display: none;
    }
  
    .paragraph-container.expanded .preview {
      display: none;
    }
  
    .paragraph-container.expanded .full-content {
      display: block;
    }
  
    .toggle-button {
      display: inline-block;
    }
  
  /* Styling for toggle button */
  .toggle-button {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 50%; /* Makes the button circular */
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
  }
  
  .toggle-button:hover {
    background-color: white;
    color: #0280be;
    transition: 0.3s;
  }


  .signin-container {    
    padding-top: 2px;
    /*padding-bottom: 1px; /* Vertical padding */
        
  }


}