.transparent-bg {
    background-image: url('images/Back ground/i1.jpg'); /* Your background image */
    background-size: cover;               /* Make sure the image covers the entire section */
    background-position: center;          /* Centers the background image */
    background-repeat: no-repeat;         /* Prevents the background image from repeating */
    background-attachment: fixed;         /* Optional: creates a parallax effect */
    width: 100%;                          /* Ensure the background spans the full width */
    height: 100vh;                        /* Makes the section fill the entire viewport height */
    position: relative;                   /* Relative positioning to avoid affecting child elements */
    display: flex;                        /* Use flexbox for centering content */
    align-items: center;                  /* Vertically centers the content */
    justify-content: center;              /* Horizontally centers the content */
    z-index: 1;                           /* Set z-index to ensure background is behind content */
}

/* Optional: Adjust text styling to fit over the background */
.text-column h4, 
.text-column h3 {
    color: #fff;                          /* White text color for contrast */
    z-index: 2;                           /* Ensure text appears above the background */
}

/* Optional: Add a semi-transparent overlay effect */
.transparent-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);       /* Semi-transparent black overlay */
    z-index: 1;                           /* Keep overlay above background but below content */
}