/* 3. Home Section Styles */
#home {
    background: url('../assets/images/home/BackgroundSW.jpeg') no-repeat left center/cover; /* Updated background image path */
    color: black; /* Text color */
    height: 100vh; /* Full height of the viewport */
    display: flex; /* Flexbox for centering content */
    align-items: center; /* Center vertically */
    text-align: center; /* Center text */
    font-size: 60px; /* Large font size */
    transition: background-image 1s ease-in-out; 
}

.home-content {
    background: rgba(0, 0, 0, 0); /* Semi-transparent background for text */
    position: relative; /* Ensure the parent is positioned */
    height: 100vh; /* Ensure it takes the full height of the viewport */
}

/* Style for the h1 element */
.home-content h1 {
    transform: rotate(270deg); /* Rotate the text 270 degrees */
    white-space: nowrap; /* Prevent text from wrapping */
    font-size: 70; /* Use viewport width for responsive font size */
    color: rgba(0, 0, 0, 0.65); /* Change the color of the h1 */
    letter-spacing: 0px; /* Adjust the spacing between characters */
    margin-left: -200px; /* Adjust as needed */
    margin-bottom: 20px; /* Add bottom margin for spacing */
}

/* Style for the h2 element */
.home-content h2 {
    transform: rotate(270deg); /* Rotate the text 270 degrees */
    white-space: nowrap; /* Prevent text from wrapping */
    font-size: 70; /* Use viewport width for responsive font size */
    color: rgba(255, 255, 255, 0.571); /* Change the color of the h2 */
    letter-spacing: 0px; /* Adjust the spacing between characters */
    margin-left: -100px; /* Adjust as needed */
    margin-top: 20px; /* Add top margin for consistent spacing */
}



@media (max-width: 700px) {
    #home {
        background-position: -280px 0px; /* Align the background image with pixel values */
    }

    .home-content h1 {
        color: rgba(0, 0, 0, 0.65);
        margin: 0;
        position: absolute;
        top: -50px;
        font-size: 35px;
        
    }
    .home-content h2 {
        margin: 0;
        font-size: 35px;
        position: absolute;
        left: -40px;
    }

}