In our previous conversation I asked you this:
I have this HTML:
<section id=&quot;about&quot; class=&quot;about section light-background&quot;>

            <div class=&quot;container&quot;>
                <div class=&quot;content&quot;>
                    <div class=&quot;row justify-content-center&quot;>
                        <div class=&quot;col-sm-12 col-md-5 col-lg-4 col-xl-4 order-lg-2 offset-xl-1 mb-4&quot;>
                            <div class=&quot;img-wrap text-center text-md-left aos-init aos-animate&quot; data-aos=&quot;fade-up&quot; data-aos-delay=&quot;100&quot;>
                                <div class=&quot;img&quot;>
                                    <video class=&quot;img-fluid&quot; autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot;>
                                        <source src=&quot;assets/img/about.mp4&quot; type=&quot;video/mp4&quot;>
                                        Your browser does not support the video tag.
                                    </video>
                                </div>
                            </div>
                        </div>

                        <div class=&quot;offset-md-0 offset-lg-1 col-sm-12 col-md-5 col-lg-5 col-xl-4 aos-init aos-animate&quot; data-aos=&quot;fade-up&quot;>
                            <div class=&quot;px-3&quot;>
                                <span class=&quot;content-subtitle&quot;>About Studio LSD</span>
                                <h2 class=&quot;content-title text-start&quot;>
                                    Innovative storytelling rooted in creativity and excellence!
                                </h2>
                                <p class=&quot;lead&quot;>
                                    Studio LSD is a vibrant Mumbai-based multimedia production house specializing in original storytelling for television and OTT platforms.
                                    With a pan-India presence, we collaborate with talented individuals to create captivating and genre-defining content.
                                </p>
                                <p class=&quot;mb-5&quot;>
                                    Our journey began with a mission to push the boundaries of storytelling, partnering with visionary creatives to develop shows that showcase
                                    our craft. With years of industry expertise and a commitment to excellence, we've established ourselves as a go-to production house
                                    for premium content creation.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

And following CSS:
.about .content {
    background-color: var(--surface-color);
    padding-top: 50px;
    padding-bottom: 50px;
}

.about .content-subtitle {
    font-size: 15px;
    margin-bottom: 10px;
    display: block;
    color: var(--default-color);
}

.about .content-title {
    color: var(--heading-color);
    font-size: 22px;
    margin-bottom: 30px;
}

.about p {
    line-height: 1.7;
    color: var(--default-color);
}

.about .btn-get-started {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    border-radius: 30px;
    padding: 8px 30px;
    border: 2px solid transparent;
    transition: 0.3s all ease-in-out;
    font-size: 14px;
}

.about .btn-get-started:hover {
    border-color: var(--accent-color);
    background-color: transparent;
    color: var(--accent-color);
}

.about .lead {
    line-height: 1.6;
    font-size: 18px;
    font-weight: normal;
    color: var(--default-color);
}

.about .img-wrap .img {
    overflow: hidden;
    max-height: 540px;
}

.about .img-wrap .img video {
    max-width: 100%;
}


Now, I want 'Laxmi | Saraswati | Durga' text written vertically (rotated at -90 degrees) on the left of .content element.


And got your following response:
To add the text &quot;Laxmi | Saraswati | Durga&quot; vertically (rotated at -90 degrees) to the left of your `.content` element, we'll need to modify your HTML structure slightly and apply some CSS styling. Below are the steps to achieve this effect:

**1. Modify the HTML Structure**

Wrap your existing `.content` inside a new wrapper div and add a new div for the vertical text. Here's how your modified HTML should look:

```html
<section id=&quot;about&quot; class=&quot;about section light-background&quot;>
    <div class=&quot;container&quot;>
        <div class=&quot;about-content-wrapper&quot;>
            <div class=&quot;vertical-text&quot;>
                Laxmi | Saraswati | Durga
            </div>
            <div class=&quot;content&quot;>
                <!-- Existing content goes here -->
                <div class=&quot;row justify-content-center&quot;>
                    <!-- Existing columns and content -->
                </div>
            </div>
        </div>
    </div>
</section>
```

**2. Update Your CSS**

Add the following CSS to style the new `.about-content-wrapper` and `.vertical-text` elements:

```css
/* Wrap the content and vertical text */
.about .about-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Style for the vertical text */
.about .vertical-text {
    transform: rotate(-90deg);
    transform-origin: top left;
    margin-right: 20px; /* Adjust spacing as needed */
    font-size: 18px;
    white-space: nowrap; /* Prevent the text from wrapping */
}
```

**3. Make It Responsive**

To ensure the layout looks good on all screen sizes, we'll use media queries to adjust the layout on smaller screens. On mobile devices, it's often better to place the vertical text above the content or hide it:

```css
/* For screens wider than 768px */
@media (min-width: 768px) {
    .about .about-content-wrapper {
        flex-direction: row;
    }

    .about .vertical-text {
        transform: rotate(-90deg);
        margin-right: 20px;
        margin-bottom: 0;
    }
}

/* For screens smaller than 768px */
@media (max-width: 767px) {
    .about .about-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .about .vertical-text {
        transform: none;
        margin-right: 0;
        margin-bottom: 20px; /* Add spacing below the text */
    }
}
```

**4. Adjust the Content Width if Necessary**

If you find that the content is squished due to the added vertical text, you can adjust the flex properties:

```css
.about .content {
    flex-grow: 1; /* Allow the content to take up the remaining space */
}
```

**Explanation:**

- **HTML Changes:**
  - We introduced a new wrapper `.about-content-wrapper` to contain both the vertical text and the existing `.content`.
  - The vertical text is placed in a new div with the class `.vertical-text`.

- **CSS Styling:**
  - We set `.about-content-wrapper` to `display: flex` to place `.vertical-text` and `.content` side by side.
  - The `.vertical-text` is rotated using `transform: rotate(-90deg);` to display it vertically.
  - We used `transform-origin: top left;` to set the point around which the rotation occurs.
  - `white-space: nowrap;` ensures that the text doesn't wrap to the next line.

- **Responsiveness:**
  - Media queries adjust the layout for different screen sizes.
  - On smaller screens (less than 768px), we stack the elements vertically to ensure readability and usability.

**Final Result:**

With these changes, the vertical text &quot;Laxmi | Saraswati | Durga&quot; will appear to the left of your `.content` section, rotated at -90 degrees. It will look elegant on larger screens and adjust gracefully on smaller devices.

**Note:** Ensure that any changes to the HTML structure are compatible with your existing content and that you test the layout across different devices and browsers.