/* ===== CSS Variables برای Spacing ===== */
:root {
    --space-none: 0rem;
    --space-xs: clamp(0.25rem, 0.2500rem + 0.0000vw, 0.25rem);
    --space-s: clamp(0.5rem, 0.5000rem + 0.0000vw, 0.5rem);
    --space-m: clamp(1rem, 1.0000rem + 0.0000vw, 1rem);
    --space-l: clamp(1.25rem, 1.1813rem + 0.2656vw, 1.5rem);
    --space-xl: clamp(1.5rem, 1.3625rem + 0.5312vw, 2rem);
    --space-xxl: clamp(2.5rem, 2.0876rem + 1.5936vw, 4rem);
    --space-3xl: clamp(3rem, 2.1753rem + 3.1873vw, 6rem);
    --space-4xl: clamp(4rem, 2.9004rem + 4.2497vw, 8rem);
    --color-border: #0776e4;
    --size-border: 1px;
    --type-border: solid;
    --shadow-border: 0 4px 10px rgba(0, 0, 0, 0.2);
    --radius-border-s: 0.25rem;
    --radius-border-m: 0.5rem;
    --radius-border-l: 0.75rem;
    --radius-border-xl: 1rem;
    --radius-border-xxl: 1.5rem;
}
/* ==== Global Border Color-Size-Shadow-Radius ==== */
.color-border {
  border-color: var(--color-border) !important;
}
.size-border {
  border-width: var(--size-border) !important;
}
.type-border {
  border-style: var(--type-border) !important;
}
.shadow-border {
    box-shadow: var(--shadow-border) !important;
}
.radius-border-s {
    border-radius: var(--radius-border-s) !important;
}
.radius-border-m {
    border-radius: var(--radius-border-m) !important;
}
.radius-border-l {
    border-radius: var(--radius-border-l) !important;
}
.radius-border-xl {
    border-radius: var(--radius-border-xl) !important;
}
.radius-border-xxl {
    border-radius: var(--radius-border-xxl) !important;
}
/* ===== Margin Classes ===== */

/* All Margins */
.m-none, 
.elementor-container.m-none, 
.elementor-inner.m-none { 
    margin: var(--space-none) !important; 
}

.m-xs, 
.elementor-container.m-xs, 
.elementor-inner.m-xs { 
    margin: var(--space-xs) !important; 
}

.m-s, 
.elementor-container.m-s, 
.elementor-inner.m-s { 
    margin: var(--space-s) !important; 
}

.m-m, 
.elementor-container.m-m, 
.elementor-inner.m-m { 
    margin: var(--space-m) !important; 
}

.m-l, 
.elementor-container.m-l, 
.elementor-inner.m-l { 
    margin: var(--space-l) !important; 
}

.m-xl, 
.elementor-container.m-xl, 
.elementor-inner.m-xl { 
    margin: var(--space-xl) !important; 
}

.m-xxl, 
.elementor-container.m-xxl, 
.elementor-inner.m-xxl { 
    margin: var(--space-xxl) !important; 
}

.m-3xl, 
.elementor-container.m-3xl, 
.elementor-inner.m-3xl { 
    margin: var(--space-3xl) !important; 
}

.m-4xl, 
.elementor-container.m-4xl, 
.elementor-inner.m-4xl { 
    margin: var(--space-4xl) !important; 
}

/* Margin Top */
.mt-none, 
.elementor-container.mt-none, 
.elementor-inner.mt-none { 
    margin-top: var(--space-none) !important; 
}

.mt-xs, 
.elementor-container.mt-xs, 
.elementor-inner.mt-xs { 
    margin-top: var(--space-xs) !important; 
}

.mt-s, 
.elementor-container.mt-s, 
.elementor-inner.mt-s { 
    margin-top: var(--space-s) !important; 
}

.mt-m, 
.elementor-container.mt-m, 
.elementor-inner.mt-m { 
    margin-top: var(--space-m) !important; 
}

.mt-l, 
.elementor-container.mt-l, 
.elementor-inner.mt-l { 
    margin-top: var(--space-l) !important; 
}

.mt-xl, 
.elementor-container.mt-xl, 
.elementor-inner.mt-xl { 
    margin-top: var(--space-xl) !important; 
}

.mt-xxl, 
.elementor-container.mt-xxl, 
.elementor-inner.mt-xxl { 
    margin-top: var(--space-xxl) !important; 
}

.mt-3xl, 
.elementor-container.mt-3xl, 
.elementor-inner.mt-3xl { 
    margin-top: var(--space-3xl) !important; 
}

.mt-4xl, 
.elementor-container.mt-4xl, 
.elementor-inner.mt-4xl { 
    margin-top: var(--space-4xl) !important; 
}

/* Margin Bottom */
.mb-none, 
.elementor-container.mb-none, 
.elementor-inner.mb-none { 
    margin-bottom: var(--space-none) !important; 
}

.mb-xs, 
.elementor-container.mb-xs, 
.elementor-inner.mb-xs { 
    margin-bottom: var(--space-xs) !important; 
}

.mb-s, 
.elementor-container.mb-s, 
.elementor-inner.mb-s { 
    margin-bottom: var(--space-s) !important; 
}

.mb-m, 
.elementor-container.mb-m, 
.elementor-inner.mb-m { 
    margin-bottom: var(--space-m) !important; 
}

.mb-l, 
.elementor-container.mb-l, 
.elementor-inner.mb-l { 
    margin-bottom: var(--space-l) !important; 
}

.mb-xl, 
.elementor-container.mb-xl, 
.elementor-inner.mb-xl { 
    margin-bottom: var(--space-xl) !important; 
}

.mb-xxl, 
.elementor-container.mb-xxl, 
.elementor-inner.mb-xxl { 
    margin-bottom: var(--space-xxl) !important; 
}

.mb-3xl, 
.elementor-container.mb-3xl, 
.elementor-inner.mb-3xl { 
    margin-bottom: var(--space-3xl) !important; 
}

.mb-4xl, 
.elementor-container.mb-4xl, 
.elementor-inner.mb-4xl { 
    margin-bottom: var(--space-4xl) !important; 
}

/* Margin Left */
.ml-none, 
.elementor-container.ml-none, 
.elementor-inner.ml-none { 
    margin-left: var(--space-none) !important; 
}

.ml-xs, 
.elementor-container.ml-xs, 
.elementor-inner.ml-xs { 
    margin-left: var(--space-xs) !important; 
}

.ml-s, 
.elementor-container.ml-s, 
.elementor-inner.ml-s { 
    margin-left: var(--space-s) !important; 
}

.ml-m, 
.elementor-container.ml-m, 
.elementor-inner.ml-m { 
    margin-left: var(--space-m) !important; 
}

.ml-l, 
.elementor-container.ml-l, 
.elementor-inner.ml-l { 
    margin-left: var(--space-l) !important; 
}

.ml-xl, 
.elementor-container.ml-xl, 
.elementor-inner.ml-xl { 
    margin-left: var(--space-xl) !important; 
}

.ml-xxl, 
.elementor-container.ml-xxl, 
.elementor-inner.ml-xxl { 
    margin-left: var(--space-xxl) !important; 
}

.ml-3xl, 
.elementor-container.ml-3xl, 
.elementor-inner.ml-3xl { 
    margin-left: var(--space-3xl) !important; 
}

.ml-4xl, 
.elementor-container.ml-4xl, 
.elementor-inner.ml-4xl { 
    margin-left: var(--space-4xl) !important; 
}

/* Margin Right */
.mr-none, 
.elementor-container.mr-none, 
.elementor-inner.mr-none { 
    margin-right: var(--space-none) !important; 
}

.mr-xs, 
.elementor-container.mr-xs, 
.elementor-inner.mr-xs { 
    margin-right: var(--space-xs) !important; 
}

.mr-s, 
.elementor-container.mr-s, 
.elementor-inner.mr-s { 
    margin-right: var(--space-s) !important; 
}

.mr-m, 
.elementor-container.mr-m, 
.elementor-inner.mr-m { 
    margin-right: var(--space-m) !important; 
}

.mr-l, 
.elementor-container.mr-l, 
.elementor-inner.mr-l { 
    margin-right: var(--space-l) !important; 
}

.mr-xl, 
.elementor-container.mr-xl, 
.elementor-inner.mr-xl { 
    margin-right: var(--space-xl) !important; 
}

.mr-xxl, 
.elementor-container.mr-xxl, 
.elementor-inner.mr-xxl { 
    margin-right: var(--space-xxl) !important; 
}

.mr-3xl, 
.elementor-container.mr-3xl, 
.elementor-inner.mr-3xl { 
    margin-right: var(--space-3xl) !important; 
}

.mr-4xl, 
.elementor-container.mr-4xl, 
.elementor-inner.mr-4xl { 
    margin-right: var(--space-4xl) !important; 
}

/* Margin X (Left & Right) */
.mx-none, 
.elementor-container.mx-none, 
.elementor-inner.mx-none { 
    margin-left: var(--space-none) !important;
    margin-right: var(--space-none) !important; 
}

.mx-xs, 
.elementor-container.mx-xs, 
.elementor-inner.mx-xs { 
    margin-left: var(--space-xs) !important;
    margin-right: var(--space-xs) !important; 
}

.mx-s, 
.elementor-container.mx-s, 
.elementor-inner.mx-s { 
    margin-left: var(--space-s) !important;
    margin-right: var(--space-s) !important; 
}

.mx-m, 
.elementor-container.mx-m, 
.elementor-inner.mx-m { 
    margin-left: var(--space-m) !important;
    margin-right: var(--space-m) !important; 
}

.mx-l, 
.elementor-container.mx-l, 
.elementor-inner.mx-l { 
    margin-left: var(--space-l) !important;
    margin-right: var(--space-l) !important; 
}

.mx-xl, 
.elementor-container.mx-xl, 
.elementor-inner.mx-xl { 
    margin-left: var(--space-xl) !important;
    margin-right: var(--space-xl) !important; 
}

.mx-xxl, 
.elementor-container.mx-xxl, 
.elementor-inner.mx-xxl { 
    margin-left: var(--space-xxl) !important;
    margin-right: var(--space-xxl) !important; 
}

.mx-3xl, 
.elementor-container.mx-3xl, 
.elementor-inner.mx-3xl { 
    margin-left: var(--space-3xl) !important;
    margin-right: var(--space-3xl) !important; 
}

.mx-4xl, 
.elementor-container.mx-4xl, 
.elementor-inner.mx-4xl { 
    margin-left: var(--space-4xl) !important;
    margin-right: var(--space-4xl) !important; 
}

/* Margin Y (Top & Bottom) */
.my-none, 
.elementor-container.my-none, 
.elementor-inner.my-none { 
    margin-top: var(--space-none) !important;
    margin-bottom: var(--space-none) !important; 
}

.my-xs, 
.elementor-container.my-xs, 
.elementor-inner.my-xs { 
    margin-top: var(--space-xs) !important;
    margin-bottom: var(--space-xs) !important; 
}

.my-s, 
.elementor-container.my-s, 
.elementor-inner.my-s { 
    margin-top: var(--space-s) !important;
    margin-bottom: var(--space-s) !important; 
}

.my-m, 
.elementor-container.my-m, 
.elementor-inner.my-m { 
    margin-top: var(--space-m) !important;
    margin-bottom: var(--space-m) !important; 
}

.my-l, 
.elementor-container.my-l, 
.elementor-inner.my-l { 
    margin-top: var(--space-l) !important;
    margin-bottom: var(--space-l) !important; 
}

.my-xl, 
.elementor-container.my-xl, 
.elementor-inner.my-xl { 
    margin-top: var(--space-xl) !important;
    margin-bottom: var(--space-xl) !important; 
}

.my-xxl, 
.elementor-container.my-xxl, 
.elementor-inner.my-xxl { 
    margin-top: var(--space-xxl) !important;
    margin-bottom: var(--space-xxl) !important; 
}

.my-3xl, 
.elementor-container.my-3xl, 
.elementor-inner.my-3xl { 
    margin-top: var(--space-3xl) !important;
    margin-bottom: var(--space-3xl) !important; 
}

.my-4xl, 
.elementor-container.my-4xl, 
.elementor-inner.my-4xl { 
    margin-top: var(--space-4xl) !important;
    margin-bottom: var(--space-4xl) !important; 
}

/* ===== Padding Classes ===== */

/* All Paddings */
.p-none, 
.elementor-container.p-none, 
.elementor-inner.p-none { 
    padding: var(--space-none) !important; 
}

.p-xs, 
.elementor-container.p-xs, 
.elementor-inner.p-xs { 
    padding: var(--space-xs) !important; 
}

.p-s, 
.elementor-container.p-s, 
.elementor-inner.p-s { 
    padding: var(--space-s) !important; 
}

.p-m, 
.elementor-container.p-m, 
.elementor-inner.p-m { 
    padding: var(--space-m) !important; 
}

.p-l, 
.elementor-container.p-l, 
.elementor-inner.p-l { 
    padding: var(--space-l) !important; 
}

.p-xl, 
.elementor-container.p-xl, 
.elementor-inner.p-xl { 
    padding: var(--space-xl) !important; 
}

.p-xxl, 
.elementor-container.p-xxl, 
.elementor-inner.p-xxl { 
    padding: var(--space-xxl) !important; 
}

.p-3xl, 
.elementor-container.p-3xl, 
.elementor-inner.p-3xl { 
    padding: var(--space-3xl) !important; 
}

.p-4xl, 
.elementor-container.p-4xl, 
.elementor-inner.p-4xl { 
    padding: var(--space-4xl) !important; 
}

/* Padding Top */
.pt-none, 
.elementor-container.pt-none, 
.elementor-inner.pt-none { 
    padding-top: var(--space-none) !important; 
}

.pt-xs, 
.elementor-container.pt-xs, 
.elementor-inner.pt-xs { 
    padding-top: var(--space-xs) !important; 
}

.pt-s, 
.elementor-container.pt-s, 
.elementor-inner.pt-s { 
    padding-top: var(--space-s) !important; 
}

.pt-m, 
.elementor-container.pt-m, 
.elementor-inner.pt-m { 
    padding-top: var(--space-m) !important; 
}

.pt-l, 
.elementor-container.pt-l, 
.elementor-inner.pt-l { 
    padding-top: var(--space-l) !important; 
}

.pt-xl, 
.elementor-container.pt-xl, 
.elementor-inner.pt-xl { 
    padding-top: var(--space-xl) !important; 
}

.pt-xxl, 
.elementor-container.pt-xxl, 
.elementor-inner.pt-xxl { 
    padding-top: var(--space-xxl) !important; 
}

.pt-3xl, 
.elementor-container.pt-3xl, 
.elementor-inner.pt-3xl { 
    padding-top: var(--space-3xl) !important; 
}

.pt-4xl, 
.elementor-container.pt-4xl, 
.elementor-inner.pt-4xl { 
    padding-top: var(--space-4xl) !important; 
}

/* Padding Bottom */
.pb-none, 
.elementor-container.pb-none, 
.elementor-inner.pb-none { 
    padding-bottom: var(--space-none) !important; 
}

.pb-xs, 
.elementor-container.pb-xs, 
.elementor-inner.pb-xs { 
    padding-bottom: var(--space-xs) !important; 
}

.pb-s, 
.elementor-container.pb-s, 
.elementor-inner.pb-s { 
    padding-bottom: var(--space-s) !important; 
}

.pb-m, 
.elementor-container.pb-m, 
.elementor-inner.pb-m { 
    padding-bottom: var(--space-m) !important; 
}

.pb-l, 
.elementor-container.pb-l, 
.elementor-inner.pb-l { 
    padding-bottom: var(--space-l) !important; 
}

.pb-xl, 
.elementor-container.pb-xl, 
.elementor-inner.pb-xl { 
    padding-bottom: var(--space-xl) !important; 
}

.pb-xxl, 
.elementor-container.pb-xxl, 
.elementor-inner.pb-xxl { 
    padding-bottom: var(--space-xxl) !important; 
}

.pb-3xl, 
.elementor-container.pb-3xl, 
.elementor-inner.pb-3xl { 
    padding-bottom: var(--space-3xl) !important; 
}

.pb-4xl, 
.elementor-container.pb-4xl, 
.elementor-inner.pb-4xl { 
    padding-bottom: var(--space-4xl) !important; 
}

/* Padding Left */
.pl-none, 
.elementor-container.pl-none, 
.elementor-inner.pl-none { 
    padding-left: var(--space-none) !important; 
}

.pl-xs, 
.elementor-container.pl-xs, 
.elementor-inner.pl-xs { 
    padding-left: var(--space-xs) !important; 
}

.pl-s, 
.elementor-container.pl-s, 
.elementor-inner.pl-s { 
    padding-left: var(--space-s) !important; 
}

.pl-m, 
.elementor-container.pl-m, 
.elementor-inner.pl-m { 
    padding-left: var(--space-m) !important; 
}

.pl-l, 
.elementor-container.pl-l, 
.elementor-inner.pl-l { 
    padding-left: var(--space-l) !important; 
}

.pl-xl, 
.elementor-container.pl-xl, 
.elementor-inner.pl-xl { 
    padding-left: var(--space-xl) !important; 
}

.pl-xxl, 
.elementor-container.pl-xxl, 
.elementor-inner.pl-xxl { 
    padding-left: var(--space-xxl) !important; 
}

.pl-3xl, 
.elementor-container.pl-3xl, 
.elementor-inner.pl-3xl { 
    padding-left: var(--space-3xl) !important; 
}

.pl-4xl, 
.elementor-container.pl-4xl, 
.elementor-inner.pl-4xl { 
    padding-left: var(--space-4xl) !important; 
}

/* Padding Right */
.pr-none, 
.elementor-container.pr-none, 
.elementor-inner.pr-none { 
    padding-right: var(--space-none) !important; 
}

.pr-xs, 
.elementor-container.pr-xs, 
.elementor-inner.pr-xs { 
    padding-right: var(--space-xs) !important; 
}

.pr-s, 
.elementor-container.pr-s, 
.elementor-inner.pr-s { 
    padding-right: var(--space-s) !important; 
}

.pr-m, 
.elementor-container.pr-m, 
.elementor-inner.pr-m { 
    padding-right: var(--space-m) !important; 
}

.pr-l, 
.elementor-container.pr-l, 
.elementor-inner.pr-l { 
    padding-right: var(--space-l) !important; 
}

.pr-xl, 
.elementor-container.pr-xl, 
.elementor-inner.pr-xl { 
    padding-right: var(--space-xl) !important; 
}

.pr-xxl, 
.elementor-container.pr-xxl, 
.elementor-inner.pr-xxl { 
    padding-right: var(--space-xxl) !important; 
}

.pr-3xl, 
.elementor-container.pr-3xl, 
.elementor-inner.pr-3xl { 
    padding-right: var(--space-3xl) !important; 
}

.pr-4xl, 
.elementor-container.pr-4xl, 
.elementor-inner.pr-4xl { 
    padding-right: var(--space-4xl) !important; 
}

/* Padding X (Left & Right) */
.px-none, 
.elementor-container.px-none, 
.elementor-inner.px-none { 
    padding-left: var(--space-none) !important;
    padding-right: var(--space-none) !important; 
}

.px-xs, 
.elementor-container.px-xs, 
.elementor-inner.px-xs { 
    padding-left: var(--space-xs) !important;
    padding-right: var(--space-xs) !important; 
}

.px-s, 
.elementor-container.px-s, 
.elementor-inner.px-s { 
    padding-left: var(--space-s) !important;
    padding-right: var(--space-s) !important; 
}

.px-m, 
.elementor-container.px-m, 
.elementor-inner.px-m { 
    padding-left: var(--space-m) !important;
    padding-right: var(--space-m) !important; 
}

.px-l, 
.elementor-container.px-l, 
.elementor-inner.px-l { 
    padding-left: var(--space-l) !important;
    padding-right: var(--space-l) !important; 
}

.px-xl, 
.elementor-container.px-xl, 
.elementor-inner.px-xl { 
    padding-left: var(--space-xl) !important;
    padding-right: var(--space-xl) !important; 
}

.px-xxl, 
.elementor-container.px-xxl, 
.elementor-inner.px-xxl { 
    padding-left: var(--space-xxl) !important;
    padding-right: var(--space-xxl) !important; 
}

.px-3xl, 
.elementor-container.px-3xl, 
.elementor-inner.px-3xl { 
    padding-left: var(--space-3xl) !important;
    padding-right: var(--space-3xl) !important; 
}

.px-4xl, 
.elementor-container.px-4xl, 
.elementor-inner.px-4xl { 
    padding-left: var(--space-4xl) !important;
    padding-right: var(--space-4xl) !important; 
}

/* Padding Y (Top & Bottom) */
.py-none, 
.elementor-container.py-none, 
.elementor-inner.py-none { 
    padding-top: var(--space-none) !important;
    padding-bottom: var(--space-none) !important; 
}

.py-xs, 
.elementor-container.py-xs, 
.elementor-inner.py-xs { 
    padding-top: var(--space-xs) !important;
    padding-bottom: var(--space-xs) !important; 
}

.py-s, 
.elementor-container.py-s, 
.elementor-inner.py-s { 
    padding-top: var(--space-s) !important;
    padding-bottom: var(--space-s) !important; 
}

.py-m, 
.elementor-container.py-m, 
.elementor-inner.py-m { 
    padding-top: var(--space-m) !important;
    padding-bottom: var(--space-m) !important; 
}

.py-l, 
.elementor-container.py-l, 
.elementor-inner.py-l { 
    padding-top: var(--space-l) !important;
    padding-bottom: var(--space-l) !important; 
}

.py-xl, 
.elementor-container.py-xl, 
.elementor-inner.py-xl { 
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important; 
}

.py-xxl, 
.elementor-container.py-xxl, 
.elementor-inner.py-xxl { 
    padding-top: var(--space-xxl) !important;
    padding-bottom: var(--space-xxl) !important; 
}

.py-3xl, 
.elementor-container.py-3xl, 
.elementor-inner.py-3xl { 
    padding-top: var(--space-3xl) !important;
    padding-bottom: var(--space-3xl) !important; 
}

.py-4xl, 
.elementor-container.py-4xl, 
.elementor-inner.py-4xl { 
    padding-top: var(--space-4xl) !important;
    padding-bottom: var(--space-4xl) !important; 
}