/* style.css */
.why-choose-us {
    /* === IMPORTANT: Replace 'background.jpg' with your actual background image file === */
    background-image: linear-gradient(rgba(227, 213, 213, 0.8), rgba(244, 243, 243, 0.6)), url('../../images/project-highlight-bg.webp');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 180px 10px 120px 0; /* Adjust padding (top/bottom left/right) as needed */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center heading and text block horizontally */
    box-sizing: border-box;
    min-height: 60vh; /* Give the section some minimum height */
}

.why-choose-us-section-heading {
    color: #000000; /* Black heading text */
    font-size: 3em;   /* Adjust font size */
    font-weight: 700; /* Bold */
    margin-bottom: 10px; /* Space below the heading */
    text-align: center;
     /* Optional: add text-shadow if needed for contrast */
     /* text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7); */
}

.text-block {
    background-color: #3484B8; /* The specific blue color from the image (adjust if needed) */
    color: #ffffff; /* White text */
    padding: 45px; /* Padding inside the blue box */
    border-radius: 12px; /* Rounded corners */
    max-width: 1300px; /* Maximum width of the text block */
    width: 80%;       /* Responsive width */
    box-sizing: border-box;
    text-align: left; /* Align text to the left inside the block */
    position: relative; /* Needed for the watermark pseudo-element */
    overflow: hidden;   /* Ensure watermark doesn't spill out if larger */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Optional subtle shadow */
}

/* --- Optional Watermark --- */
/* If you have a watermark image (like the faint circles), use this block. */
/* If not, you can delete or comment out this entire '.text-block::before' rule. */
.text-block::before {
    content: '';
    position: absolute;
    /* === IMPORTANT: Replace 'watermark.png' with your actual watermark image file === */
    background-image: url('../../images/hero-graphic.png');
    background-size: contain; /* Adjusts size to fit */
    background-repeat: no-repeat;
    background-position: center;
    top: 40%;           /* Center vertically */
    left: 50%;          /* Center horizontally */
    transform: translate(-50%, -50%); /* Fine-tune centering */
    width: 230px;       /* Adjust width of watermark */
    height: 230px;      /* Adjust height of watermark */
    opacity: 0.2;       /* Adjust visibility (0 = invisible, 1 = fully visible) */
    z-index: 0;         /* Place it behind the text content */
    pointer-events: none; /* Make sure it doesn't interfere with text selection */
}
/* --- End Optional Watermark --- */


.text-block p {
    margin: 0; /* Remove default paragraph margin */
    font-size: 1.1em; /* Adjust text size */
    line-height: 1.7; /* Improve readability */
    position: relative; /* Ensure text is layered above the watermark */
    z-index: 1;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .why-choose-us {
        padding: 60px 15px;
    }
    .why-choose-us-section-heading {
        font-size: 2.4em;
        margin-bottom: 20px;
    }
    .text-block {
        padding: 35px;
        width: 95%;
    }
    .text-block p {
        font-size: 1em;
    }
    /* Optional: Adjust watermark size on smaller screens */
    .text-block::before {
         width: 200px;
         height: 200px;
    }
}

@media (max-width: 480px) {
    .why-choose-us {
        padding: 40px 10px;
    }
    .why-choose-us-section-heading {
        font-size: 2em;
        margin-bottom: 10px;
    }
    .text-block {
        padding: 25px;
        border-radius: 8px;
    }
    /* Optional: Adjust watermark size on smallest screens */
    .text-block::before {
         width: 100px;
         height: 100px;
         opacity: 0.08;
    }
}