/* Reset and Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            color: #424242;
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* Section Common Styles */
        section {
            min-height: 100vh;
            padding: 20px 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        h1, h2, h3 {
            margin: 0px;
        }

        p {
            margin-bottom: 15px;
            max-width: 800px;
        }
        
        .container {
            margin: 40px auto;
            position: relative;
            z-index: 2;
            border-radius: 20px;
            color: #333;
            
        }
        .btn-container {
            gap: 20px;
            margin: 20px;
        }
        .tagline {
            font-size: 1rem;
            color: #4242480;
            margin-top: 1rem;
            max-width: 80ch;
            line-height: 1.5;
            font-style: italic;
            font-weight: 300;

        }
        .btn,
        .btn-demo {
            display: inline-block;
            padding: 12px 30px;
            background: linear-gradient(135deg, #DA415B 0%, #A82B40 100%);
            text-shadow: 0 1px 3px #57161180;
            color: white;
            text-decoration: none;
            border-radius: 15px;
            font-weight: bold;
            transition: all 0.3s ease;
            margin: 30px;
            border: 1px solid #42424280;
            width: 150px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -3px 0 rgba(0,0,0,0.2), 0 6px 18px rgba(0, 0, 0, 0.1);
        }
        .btn-demo {
            background: linear-gradient(135deg, #E9BF50 0%, #CFA636 100%); /* #e6b83c */
        }

        .btn:hover, .btn-demo:hover
         {
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -3px 0 rgba(0,0,0,0.3), 0 10px 24px rgba(0, 0, 0, 0.4);
        }

        /* Welcome Section */
        #welcome {
            background: url('/flashcards/assets/svg/sky-fuji-sakura.svg') no-repeat bottom center/cover;
            color: white;
            text-align: center;
        }

        .logo-container {
            position: absolute;
            top: 75px;
            width: 500px;
            max-width: 30vw;
            height: auto;
            margin: 0px auto;
            z-index: 999;

        }
        
        .logo {
          height: 100%;
          width: 100%;
          object-fit: contain;  /* maintains aspect ratio */
        }

        #welcome h1 {
            font-size: 2rem;
            margin-top: 100px;
            font-weight: 300;
            color: #333;
        }

        #welcome h2 {
            margin-top: 25px;
            font-size: 1.5rem;
            font-weight: 300;
        /*    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); */
            color: #333;
            margin-left: 15%;
            margin-right: 15%;
        }
       /* Instructions Section */
        #instructions {
            background: linear-gradient(135deg, #fafaf5 30%, #8fa6c9 70%, #a6cbe9 100%); /* linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) ; linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('img/sky-birds.svg') no-repeat center center/cover */
            color: white;
        }

        #instructions h2 {
            font-size: 2.5rem;
            margin-bottom: 30px;
            color: #86527E;
        }
        #instructions .container {
            width: 80vw;
            text-align: center; /* This centers all text inside */
            display: flex;
            flex-direction: column;
            align-items: center; /* This centers child elements */

        }
        .steps {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            
        }
        .step {
            flex: 1 1 250px;
            padding: 30px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            backdrop-filter: blur(5px);
            border: 1px solid #42424280;
        }
        .step-number {
            display: inline-block;
            width: 40px;
            height: 40px;
            background: #86527E;
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        /* CTA Section */
        #cta {
            background: url('../img/begin-journey.svg')  no-repeat bottom center/cover;
            color: black;
        }

        #cta h2 {
            font-size: 2.0rem;
            font-weight: 300;
            color: white;
            text-shadow: 1px 1px 1px #42424260;
        }
        #cta .container {
            margin: 0 auto; /* This centers the container itself */
            text-align: center; /* This centers all text inside */
            display: flex;
            flex-direction: column;
            align-items: center; /* This centers child elements */    
        }


        /* Intro Section */
        #intro {
            background: linear-gradient(135deg, #fafaf5 20%, #b3daf6 80%, #c0def6 100%); /*linear-gradient(135deg, #fafaf5 30%, #c3cfe2 70%, #a6cbe9 100%); */
        }

        #intro h2 {
            color: #333;
            font-size: 1.5rem;
            font-weight: 300;
        }
        #intro h3,
        .feature {
            color: #333;
            font-size: 1.25rem;
            font-weight: 300;
            text-align: left;
        }

        .features {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            margin-top: 50px auto 0;
            max-width: 1300px;
        }

        .feature {
            flex: 1 1 300px;
            padding: 20px;
            min-width: 350px; 
            transition: transform 0.3s ease;
        /*    border: 3px solid #748EA3; */
            color: #333;
            
        }

        .feature i {
            font-size: 3rem;
            color: #333;
            margin-bottom: 20px;
        }
        /* New for Intro section */
        
        .profile-container {
          max-width: 1300px;
          margin: 0 auto;
          position: relative;
          z-index: 2;
          color: #333;
        }
        
        .profile-card {
          display: flex;
          flex-direction: row; /* Change from column to row */
          align-items: center; /* Align items to top */
          gap: 40px; /* Space between avatar and text */
          padding: 40px;
          border-radius: 15px;
          backdrop-filter: blur(5px);
          margin: 0 auto 50px;
        }
        
        .profile-avatar {
          width: 250px; /* Slightly larger for side layout */
          height: 250px;
          border-radius: 5%;
          object-fit: cover;
          border: 1px solid #333;

          flex-shrink: 0; /* Prevents image from shrinking */
        }
        
        .profile-message {
          text-align: left; /* Change from center to left */

        }
        
 

        /* Parallax Effect */
        .parallax-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* Navigation */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            z-index: 1000;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(0.5px);
      /*      box-shadow: 0px 10px 10px #ffffff80; */
        }

        nav.scrolled {
            background: rgba(0,0,0,0.5);
            padding: 15px 20px;
        }

        nav ul {
            display: flex;
            justify-content: center;
            list-style: none;
        }

        nav li {
            margin: 0 15px;
            color: white;
        }
        nav a {
            text-decoration: none;
            font-weight: normal;
            padding: 10px 15px;
            border-radius: 5px;
            transition: all 0.3s ease;
            font-size: 1.25rem;
            color:  #42424290;
        }
        nav.scrolled a {
            color: #fafaf5;
        }
        nav a:hover {
            text-shadow: 1px 1px 2px #42424280;
        }
        nav.scrolled a:hover {
            text-shadow: 1px 1px 2px black;
        }
        .visually-hidden {
          position: absolute;
          width: 1px;
          height: 1px;
          margin: -1px;
          padding: 0;
          overflow: hidden;
          clip: rect(0 0 0 0);
          white-space: nowrap;
          border: 0;
        }

        li::marker {
          color: #333;
          font-size: 1rem;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .logo-container {
              max-width: 85vw;
              position: absolute;
              margin: 20px auto;
              top: 20px;
            }
            .profile-card {
                display: flex;
                flex-direction: column;
            }
            .container {
                margin: 0 auto;
                position: relative;
                z-index: 2;
                border-radius: 20px;
                padding: 10px 0px;
                width: 100%;
            }

            #welcome h1 {
                font-size: 1.5rem;
                margin-bottom: 40px;
            }

            #welcome h2 {
                font-size: 1rem;
                margin-left: 12%;
                margin-right: 12%;
            }

            .btn,
        .btn-demo {
            margin: 10px;
        }
                    .btn {
            margin-top: 40px;
            }
                    
            section {
                padding: 20px 20px;
            }

            nav {
                display: auto;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 1000;
                transition: all 0.3s ease;
                padding: 0 0;
            }
            ul { 
                margin: 10px 5px;
                padding-left: 0px;
                font-size: 18px;
            }
            nav ul {
                flex-wrap: nowrap;
                font-weight: bold;
                
            }
            nav a {
                font-size: 18px;
                margin: 0 0;
                padding: 6px;
                margin-left: auto;
                margin-right: auto;
                
            }

            nav.scrolled {
                padding: 10px 0px;
            }
            nav li {
                margin: 0 0;
                font-size: auto;
                padding: 0;
                text-align: center;
            }
        }