#background-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

html {
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
}

body {
    background-color: rgb(42, 42, 39);
    color: #ffffff;
    font-family: 'Cascadia Mono', monospace;
    margin: 0;
    position: relative;
    /* Make body the positioning context for the canvas */
}

section {
    height: 100vh;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .7s ease-in-out;
    opacity: 0;
}

section.active {
    opacity: 1;
}

#about {
    background-image: url('images/about1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.about-columns-wrapper {
    display: flex;
    flex-direction: row;
    gap: 50px;
    flex: 1;
}

.about-content {
    display: flex;
    flex-direction: column;
    /* gap: 50px; */
    /* This was creating too much space below the title */
    max-width: 1200px;
    padding: 20px;
}

.about-column {
    flex: 1;
}

.about-column-centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    min-width: 0;
}

.about-column p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.about-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ff5555;
    /* Using the accent color */
}

.accent-text {
    color: #ff5555;
}

.more-link {
    /* --- Your Original Styles (Kept) --- */
    text-transform: uppercase;
    cursor: pointer;
    transition: color .1s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;

    /* width: 100%; */ /* No longer needed with centered SVG */
    /* font-size: x-large; */ /* No longer needed for SVG */
    border-color: white;
    border: 1px solid transparent;
    /* Prepare for hover border */
    display: flex; /* Center the SVG */
    align-items: center; /* Vertically align SVG and text */
    padding: 10px 0; /* Add some vertical padding */
    gap: 10px; /* Add space between the arrow and the text */
}
/* Remove default link styles */
.more-link { text-decoration: none; color: inherit; }

.more-link.hover-active {
    color: #ff5555;
    background-color: rgba(255, 255, 255, 0.05);
    border-color: #ff5555;
}

.social-icons {
    display: block;
    margin-top: 15px;
    font-size: 2rem;
}

.social-icons a {
    color: #ffffff;
    margin: 0 15px;
    transition: color 0.3s ease-in-out;
}

.social-icons a:hover {
    color: #ff5555; /* Accent color on hover */
}

#learn {
    position: relative; /* Needed to position the video child */
    overflow: hidden; /* Hide video overflow */
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the section */
    z-index: -1; /* Places the video behind the content */
}

.container {
    text-align: left;
}

.learn-content {
    max-width: 900px;
    padding: 20px;
    text-align: left;
}

.learn-content p {
    font-size: 1.2rem;
    line-height: 1.7;
}

.offer-content {
    max-width: 1200px;
    padding: 20px;
}

.offer-columns {
    display: flex;
    gap: 50px;
}

.name-line {
    font-size: 5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.name-line span {
    color: #ff5555;
}

.animated-line {
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

.animated-line-text {
    display: flex;
    align-items: center;
}

.prefix {
    margin-right: 15px;
}

.typed-text-container {
    display: flex;
    align-items: center;
    position: relative;
}

.typed-text {
    color: #ffffff;
    transition: color 0.5s ease-in-out;
}

.final-red {
    color: #ff5555;
}

.cursor {
    display: inline-block;
    width: 5px;
    height: 3rem;
    background-color: #ffffff;
    margin-left: 8px;
    animation: blink 0.8s step-end infinite;
    transform: translateY(4px);
}

@keyframes blink {

    from,
    to {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@media (max-width: 768px) {
    /* Add horizontal padding on mobile to prevent text from touching the edges */
    #hero .container {
        padding: 0 20px;
        box-sizing: border-box; /* Ensures padding doesn't add to the width */
    }

    /* Heavily reduce font size for the main name line on mobile */
    #hero .name-line {
        font-size: 2.8rem; /* Drastically smaller for mobile */
    }

    /* Heavily reduce font size for the animated text line */
    .animated-line {
        font-size: 1.8rem; /* Drastically smaller for mobile */
    }

    /* Adjust cursor height to match the new font size */
    .cursor {
        height: 1.8rem;
        transform: translateY(2px); /* Fine-tune vertical alignment */
    }

    /* Stack the "I want to" prefix and the typewriter text on mobile */
    .animated-line-text {
        flex-direction: column;
        align-items: flex-start; /* Align items to the start of the container */
    }

    /* --- Stacked Column Sections for Mobile --- */

    /* Allow the section wrapper to grow to fit its children */
    #about {
        height: auto;
    }

    /* Make the column container stack vertically */
    .about-columns-wrapper {
        flex-direction: column;
    }

    /* Make each column a full-height, scroll-snapping section */
    .about-column {
        height: 100vh; /* Each column takes full viewport height */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center content vertically */
    }

    /* Reduce section title sizes on mobile */
    /* Target h2s with .name-line class in sections OTHER than the hero */
    section:not(#hero) .name-line {
        font-size: 2.2rem;
        margin-bottom: 20px;
    }
}