import React from 'react';

const HeaderCardSection = () => {
  const headerStyle = {
    // We use a linear-gradient overlaying the background image
    // The gradient goes from a semi-transparent dark green to a slightly lighter green
    background: `linear-gradient(
      rgba(0, 43, 22, 0.50),
      rgba(0, 85, 42, 0.50)
    ), url("/images/bannar/header-card-bg.png")`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    padding: '120px 0',
    color: '#ffffff',
    textAlign: 'center',
    position: 'relative'
  };

  return (
    <section className="header-card-section" style={headerStyle}>
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-10">
            {/* The Main Title from the banner */}
            <h1 className="display-3 fw-bold mb-4" style={{ letterSpacing: '1px' }}>
              যোগাযোগ
            </h1>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HeaderCardSection;
