/* aboutsection.css */
.aboutTextContainer {
        display: flex;
        flex-direction: column;
        align-items: end;
        padding: 2vmin;
        background: linear-gradient(to right, rgb(0, 0, 0), rgb(46, 46, 46));
        border: 1vmin solid;
        border-image: linear-gradient(to right, var(--accent), rgb(6, 6, 6)) 1;

        width: 70%;
        /* IMPORTANT: Changed to fit-content so it grows when text appears */
        height: fit-content; 
        min-height: 40vmin; /* Keeps the original size when closed */
        
        border-radius: 1vmin;

        p {
            word-spacing: 1vmin;
            font-size: 4vw;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            margin-bottom: 2vmin;
        }

        /* 1. Default State: HIDDEN */
        .readmoretext {
            display: none;
        }

        /* 2. Active State: VISIBLE 
           We use the '&' or verify specific nesting. 
           This selector is stronger than the one above. */
        .readmoretext.show-read-more {
            display: block !important; /* Force it to show */
            animation: fadeIn 0.5s ease;
        }
    }

/* Add this animation at the bottom of your file if not there */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.AboutSection {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    min-height: 100vmin;
    align-items: center;
    gap: 5vmin;

    /* Base theme colors (optional, if you want to enforce theme here) */
    /* background-color: var(--color-bg-body); */

    .aboutP {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 10vmin;
        width: 100%;

        .socialpage {
            width: 100vmin;
            margin-right: 2vmin;
            height: fit-content;
            display: flex;
            justify-content: center;
            align-items: center;

            .p1 {
                position: absolute;
                width: 30vmin;
                height: 30vmin;
                border-radius: 100%;
                z-index: 1;
                transition: all 4s ease-out;
            }

            .container {
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                width: 70vmin;
                height: 70vmin;
                border-radius: 100%;
                rotate: 45deg;
                transition: all 1s ease;

                a {
                    img {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        border-radius: 100%;
                        rotate: -45deg;
                        box-shadow: 0 0 5vmin var(--accent);
                        transition: all 1s ease, box-shadow .15s ease-in;
                    }
                }
            }

            .container:hover {
                rotate: 0deg;

                img {
                    rotate: 0deg;
                }

                img:hover {
                    box-shadow: 0 0 5vmin black;
                }
            }

            .link {
                position: absolute;
                width: 10vmin;
                height: 10vmin;
                background-color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #333;
                text-align: center;
                border-radius: 100%;
                text-decoration: none;
                transition: all 0.3s ease;
            }

            .link:hover {
                background-color: var(--accent);
                color: #fff;
            }

            /* Position the links around the image */
            .link1 { top: 85%; left: 50%; transform: translate(-50%, -50%); }
            .link2 { top: 50%; left: 90%; transform: translate(-50%, -50%); }
            .link3 { bottom: 85%; left: 50%; transform: translate(-50%, 50%); }
            .link4 { top: 50%; right: 90%; transform: translate(50%, -50%); }
        }

        .AboutPageP {
            display: flex;
            /* Remove fixed width so it adapts */
            width: fit-content;
            height: fit-content;
            flex-direction: column;
            align-items: center;
            gap: 2vmin;
            /* REMOVED: overflow: hidden; -> prevents cutting off content */
            overflow: visible; 
        }
    }

    h1 {
        text-shadow: 1.3vmin 1.3vmin 0vmin black;
        span {
            color: var(--accent);
        }
        margin: 0px;
        margin-top: 4vmin;
        font-size: 10vmin;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

    .aboutTextContainer {
        display: flex;
        flex-direction: column;
        align-items: end;
        padding: 2vmin;
        background: linear-gradient(to right, rgb(0, 0, 0), rgb(46, 46, 46));
        
        border: 1vmin solid;
        border-image: linear-gradient(to right, var(--accent), rgb(6, 6, 6)) 1;

        width: 70%;
        
        /* FIX 1: Changed from fixed 100vmin to fit-content so it grows */
        height: fit-content; 
        min-height: 40vmin; /* Ensures it has a base size */
        
        border-radius: 1vmin;

        p {
            word-spacing: 1vmin;
            font-size: 4vw;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            margin-bottom: 2vmin; /* Spacing between paragraphs */
        }

        /* FIX 2: Logic moved INSIDE here to match specificity */
        .readmoretext {
            display: none; /* Hidden by default */
        }
        
        /* When JS adds this class, we override the display: none */
        .readmoretext.show-read-more {
            display: block;
            animation: fadeIn 0.5s ease;
        }
    }

    button {
        border-radius: 1vmin;
        width: fit-content;
        height: 8vmin;
        padding: 2.5vmin;
        border-image: linear-gradient(to right, var(--accent), rgb(6, 6, 6)) 1;
        background-color: rgb(0, 0, 0);
        color: white;
        font-size: 2.5vmin;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        transition: all .3s ease;
    }

    button:hover {
        border-image: linear-gradient(to right, rgb(6, 6, 6), var(--accent)) 1;
        color: black;
        background-color: var(--accent);
        font-size: 2.5vmin;
    }
}

/* Animation Definition */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}