/* Font-face and root variables */
@font-face {
    font-family: "kalpurushregular";
    src: url("../font/Kalpurush.eot");
    src: url("../font/Kalpurush.woff") format("woff"),
    url("../font/Kalpurush.ttf") format("truetype"),
    url("../font/Kalpurush.svg#Kalpurush") format("svg"),
    url("../font/Kalpurush.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal;
}

:root {
    /**
  @font family declaration
  */
    --bd-ff-body: "Helvetica", sans-serif;
    --bd-ff-heading: "Helvetica", sans-serif;
    --bd-ff-p: "Helvetica", sans-serif;
    --bd-ff-fontawesome: "Font Awesome 6 Pro";
    /**

  @color declaration
  */
    --bd-common-white: #ffffff;
    --bd-common-black: #000;
    --bd-heading-primary: #000;
    --bd-grey-1: #f5f8fb;
    --bd-grey-2: #e2ebf4;
    --bd-text-body: #888888;
    --bd-text-1: #000;
    --bd-theme-primary: #0660bd;
    --bd-border-1: #888888;
    --bd-border-2: #b7c3cf;
    /*Added by Shams*/
    --bd-light-green: #006a4e;
    --bd-darker-green: #005e44;
    --bd-light-red: #f52b43;
    --bd-dark-red: #d92639;
    --bd-orange-yellow: #f9a73e;
    --bd-darker-blue: #264b96;
    --bd-grey-3: #434343;
    --bd-grey-4: #3d3d3d;
    /**
  @font weight declaration
  */
    --bd-fw-normal: normal;
    --bd-fw-elight: 200;
    --bd-fw-light: 300;
    --bd-fw-regular: 400;
    --bd-fw-medium: 500;
    --bd-fw-sbold: 600;
    --bd-fw-bold: 700;
    --bd-fw-ebold: 800;
    --bd-fw-black: 900;
    /**
  @font size declaration
  */
    --bd-fz-body: 14px;
    --bd-fz-p: 14px;
    --bd-fz-h1: 40px;
    --bd-fz-h2: 36px;
    --bd-fz-h3: 24px;
    --bd-fz-h4: 20px;
    --bd-fz-h5: 16px;
    --bd-fz-h6: 14px;
}

html:lang(bn) {
    --bd-ff-body: "kalpurushregular", sans-serif;
    --bd-ff-heading: "kalpurushregular", sans-serif;
    --bd-ff-p: "kalpurushregular", sans-serif;
}

/* Utility Classes */

/* Background Colors */
.u-bg-green {
    background-color: var(--bd-light-green) !important;
    color: var(--bd-common-white); /* Matched with white text */
}

.u-bg-dgreen {
    background-color: var(--bd-darker-green) !important;
    color: var(--bd-common-white);
}

.u-bg-red {
    background-color: var(--bd-light-red) !important;
    color: var(--bd-common-white);
}

.u-bg-dred {
    background-color: var(--bd-dark-red) !important;
    color: var(--bd-common-white);
}

.u-bg-gray {
    background-color: var(--bd-grey-2) !important;
    color: var(--bd-text-body);
}

/* Text Colors */
.u-text-green {
    color: var(--bd-light-green) !important;
}

.u-text-dgreen {
    color: var(--bd-darker-green) !important;
}

.u-text-red {
    color: var(--bd-light-red) !important;
}

.u-text-dred {
    color: var(--bd-dark-red) !important;
}

.u-text-gray {
    color: var(--bd-text-body) !important;
}

/* Combined Background and Text Colors */
.u-match-green {
    background-color: var(--bd-light-green) !important;
    color: var(--bd-common-white) !important;
}

.u-match-dgreen {
    background-color: var(--bd-darker-green) !important;
    color: var(--bd-common-white) !important;
}

.u-match-red {
    background-color: var(--bd-light-red) !important;
    color: var(--bd-common-white) !important;
}

.u-match-dred {
    background-color: var(--bd-dark-red) !important;
    color: var(--bd-common-white) !important;
}

/* Spacing Utilities */

/* Padding */
.u-p-0 {
    padding: 0 !important;
}

.u-p-1 {
    padding: 0.25rem !important;
}

.u-p-2 {
    padding: 0.5rem !important;
}

.u-p-3 {
    padding: 1rem !important;
}

.u-p-4 {
    padding: 1.5rem !important;
}

.u-p-5 {
    padding: 3rem !important;
}

/* Padding Left & Right */
.u-px-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.u-px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.u-px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Padding Top & Bottom */
.u-py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.u-py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.u-py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Margin */
.u-m-0 {
    margin: 0 !important;
}

.u-m-1 {
    margin: 0.25rem !important;
}

.u-m-2 {
    margin: 0.5rem !important;
}

.u-m-3 {
    margin: 1rem !important;
}

.u-m-4 {
    margin: 1.5rem !important;
}

.u-m-5 {
    margin: 3rem !important;
}

/* Margin Left & Right */
.u-mx-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}

.u-mx-2 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}

.u-mx-3 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

/* Margin Top & Bottom */
.u-my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.u-my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.u-my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

/* Button Hover, Focus, and Active Styles */
button.u-bg-green:hover,
button.u-bg-green:focus,
button.u-bg-green:active {
    background-color: var(--bd-darker-green) !important;
}

button.u-bg-red:hover,
button.u-bg-red:focus,
button.u-bg-red:active {
    background-color: var(--bd-dark-red) !important;
}

/* Additional Readability for Common Elements */
.u-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border: none;
}

.u-btn-green {
    background-color: var(--bd-light-green) !important;
    color: var(--bd-common-white) !important;
}

.u-btn-green:hover {
    background-color: var(--bd-darker-green) !important;
}

.u-btn-red {
    background-color: var(--bd-light-red) !important;
    color: var(--bd-common-white) !important;
}

.u-btn-red:hover {
    background-color: var(--bd-dark-red) !important;
}