#about-us {
    background-image: var(--second-background);
    background-size: cover;
    background-position: center; 
    padding: 5% 15%;
    display: flex; 
    align-items: flex-start; 
    gap: 2em;
    color: white; 
    position: relative; /* Allow absolute positioning for the button */
}

#about-us img {
    width: 88px; /* Set a max-width for the pin image */
    height: 88px; /* Maintain aspect ratio */
}

.text-content {
    display: flex;
    flex-direction: column; /* Stack text vertically */
    align-items: flex-start;
    gap: 2em; /* Space between heading and paragraph */
}

.about-heading {
    width: 377px; /* Adjust width as needed */
    height: auto; /* Allow height to adjust based on content */
    color: #fff;
    font-family: "Mrs Eaves";
    font-size: 76px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.about-paragraph {
    display: block; /* Ensure text wraps properly */
    height: auto; /* Allow height to adjust based on content */
    margin: 0; /* Remove default margin */
    padding: 0;
}

.btn-container {
    position: absolute; /* Position button relative to #about-us */
    bottom: 0; /* Align button to the bottom */
    right: 0; /* Align button to the right */
    margin: 1em; /* Space around the button */
}

.btn-learn-more {
    background-color: yellow; /* Match the button color */
    color: black;
    padding: 0.8em 1.5em; /* Adjust size */
    font-weight: 700; /* Bold font */
    letter-spacing: 1px;
    border-radius: 0.5em;
    font-size: 1.2em; /* Slightly larger font size */
    border: 2px solid;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.btn-learn-more:hover {
    background-color: darkkhaki;
}

Guys this is my css code for the page that i’m making but it is not going according to my page. Can somebody help me with this?

Click here for the image

I need to make the page like this. There’s some text that’s hidden i want to put to style it like this. i have the coded provided above for the same