@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

  :root {
    --deep-purple: #1a0b2e;
    --light-purple: #8646ee;
    --sky-blue: #00ffff;
    --accent-purple: #3d1a78;
  }

  body, html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: var(--deep-purple);
    color: #ffffff;
    overflow-x: hidden;
  }

  .space-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><rect width="1000" height="1000" fill="%231a0b2e"/><circle cx="100" cy="100" r="2" fill="%23ffffff" opacity="0.5"/><circle cx="200" cy="300" r="1" fill="%23ffffff" opacity="0.3"/><circle cx="300" cy="200" r="1.5" fill="%23ffffff" opacity="0.4"/><circle cx="500" cy="100" r="1" fill="%23ffffff" opacity="0.5"/><circle cx="700" cy="300" r="2" fill="%23ffffff" opacity="0.3"/><circle cx="900" cy="200" r="1" fill="%23ffffff" opacity="0.4"/><circle cx="100" cy="500" r="1.5" fill="%23ffffff" opacity="0.5"/><circle cx="300" cy="700" r="1" fill="%23ffffff" opacity="0.3"/><circle cx="500" cy="900" r="2" fill="%23ffffff" opacity="0.4"/><circle cx="700" cy="800" r="1" fill="%23ffffff" opacity="0.5"/><circle cx="900" cy="600" r="1.5" fill="%23ffffff" opacity="0.3"/></svg>');
    background-size: cover;
    opacity: 0.8;
  }


  .text-section {
    max-width: 800px;
    margin: 60px auto;
    text-align: center;
    padding: 0 20px 20px 20px;
    font-family: 'Roboto', sans-serif;
  }

  
    .text-section h2 {
      font-size: 2.5em;
      margin-bottom: 30px;
      /*color: var(--sky-blue);*/
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 20px;
      background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
      /*text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);*/
    }
  
    .text-section p {
      font-size: 1.1em;
      line-height: 1.8;
      margin-bottom: 20px;
      color: #ffffff;
    }
  
    .expandable-text {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease;
    }
  
    .expandable-text.expanded {
      max-height: 1400px;
    }
  
    .read-more-btn {
      background: none;
      border: none;
      color: var(--sky-blue);
      font-size: 1em;
      cursor: pointer;
      text-decoration: underline;
      transition: color 0.3s ease;
    }
  
    .read-more-btn:hover {
      color: var(--light-purple);
    }
    
  @media (max-width: 768px) {
          .expandable-text {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out;
          }
      
          .expandable-text.expanded {
            max-height: 1400px; /* Adjust this value based on your content */
          }
        }