:root {
      --font-main: 'Poppins', sans-serif;
      --color-pink: #EE72A3;
      --color-orange: #FFB200;
      --color-blue: #537BFF;
      --color-purple: #5243FA;
       --color-secondary-blue: #325CE6;
      --font-bold: 600;
      --font-light: 400;
      --gap: 32px;
      --padding: 1.5rem;
      --stat-font-size: 2rem;
      --text-font-size-sm: 14px;
      --text-font-size-sm: 14px;
      --text-font-size-sm: 14px;
      --text-font-size-sm: 14px;
      --text-font-size-sm: 14px;
      --text-font-size-sm: 14px;
      --text-line-height-medium: 24px;
       --gradient-purple: linear-gradient(84.9deg, #F2F4F8 4.74%, #EBF1FE 78.95%);
       --text-transform-uppercase: uppercase;

        /* Hover variants */
  --color-pink-hover: #d85f90;   /* ~15% darker */
  --color-secondary-blue-hover: #4266d1;   /* ~15% darker */
  --color-purple-hover: #4336c7; /* ~15% darker */
    }
    .uppercase-text {
  text-transform: var(--text-transform-uppercase);
}
    :root {
  --bg-primary: #f8fbff;
  --bg-primary-hover: #3f32c9;     /* 15% darker */
  --bg-primary-light: #5e55ff;     /* 30% lighter */
  --bg-primary-dark: #32258f;      /* deeper tone */
  --bg-primary-grey: #EEF2F6;  /* text on primary */
   --bg-primary-blue: #325CE6;  /* text on primary */
  --bg-primary-orange: #FF6325;     /* light muted background */ 
  --bg-primary-light-orange: #FFF0EB;     /* light muted background */ 
  --bg-primary-light-yellow: #FFFCF5;     /* light muted background */
  --bg-primary-transparent-10: rgba(82, 67, 250, 0.1);
  --bg-primary-transparent-20: rgba(82, 67, 250, 0.2);
  --bg-primary-transparent-40: rgba(82, 67, 250, 0.4);
  --bg-primary-gradient: linear-gradient(135deg, #5243FA, #8376fd);
}
:root {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);  /* your base */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.1);
  --shadow-inset: inset 0 2px 6px rgba(0, 0, 0, 0.05);
    --gap: 24px;
  --radius: 8px;
  --bg: #E5EBFF;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

:root {
     --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
}
:root {
  --lh-18: 18px;
  --lh-19: 19px;
  --lh-20: 20px;
  --lh-21: 21px;
  --lh-22: 22px;
  --lh-23: 23px;
  --lh-24: 24px;
  --lh-25: 25px;
  --lh-26: 26px;
  --lh-27: 27px;
  --lh-28: 28px;
  --lh-29: 29px;
  --lh-30: 30px;
  --lh-31: 31px;
  --lh-32: 32px;
  --lh-33: 33px;
  --lh-34: 34px;
  --lh-35: 35px;
  --lh-36: 36px;
  --lh-37: 37px;
  --lh-38: 38px;
  --lh-39: 39px;
  --lh-40: 40px;
  --lh-41: 41px;
  --lh-42: 42px;
  --lh-43: 43px;
  --lh-44: 44px;
  --lh-45: 45px;
  --lh-46: 46px;
  --lh-47: 47px;
  --lh-48: 48px;
  --lh-49: 49px;
  --lh-50: 50px;
  --lh-51: 51px;
  --lh-52: 52px;
   --lh-72: 72px;
}
:root {
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-21: 21px;
  --fs-22: 22px;
  --fs-23: 23px;
  --fs-24: 24px;
  --fs-25: 25px;
  --fs-26: 26px;
  --fs-27: 27px;
  --fs-28: 28px;
  --fs-29: 29px;
  --fs-30: 30px;
  --fs-31: 31px;
  --fs-32: 32px;
  --fs-33: 33px;
  --fs-34: 34px;
  --fs-35: 35px;
  --fs-36: 36px;
  --fs-37: 37px;
  --fs-38: 38px;
  --fs-39: 39px;
  --fs-40: 40px;
  --fs-41: 41px;
  --fs-42: 42px;
  --fs-43: 43px;
  --fs-44: 44px;
  --fs-45: 45px;
  --fs-46: 46px;
  --fs-47: 47px;
  --fs-48: 48px;
}
:root {
  --fw-100: 100;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;
}
:root {
  --text-primary: #070B12;
  --text-secondary: #333333;
  --text-tertiary: #44536A;
  --text-muted: #999999;
  --text-inverted: #ffffff;
  --text-accent: #007BFF; /* or any brand color */
}
:root {
  --text-1: #EE72A3;
  --text-2: #537BFF;
  --text-3: #5243FA;
  --text-4: #7a7a7a;
  --text-5: #b0b0b0;
  --text-6: #ffffff;
  --text-7: #000;
  --text-7: #646F87;
}
:root {
     --m-0: 0px;
 
  /* Margin Top */
  --mt-0: 0px;
  --mt-4: 4px;
  --mt-8: 8px;
  --mt-12: 12px;
  --mt-16: 16px;
  --mt-20: 20px;
  --mt-24: 24px;
  --mt-28: 28px;
  --mt-32: 32px;
  --mt-36: 36px;
  --mt-40: 40px;
  --mt-44: 44px;
  --mt-48: 48px;
  --mt-52: 52px;
  --mt-56: 56px;
  --mt-60: 60px;
  --mt-64: 64px;
  --mt-68: 68px;
  --mt-72: 72px;
  --mt-76: 76px;
  --mt-80: 80px;
  --mt-84: 84px;
  --mt-88: 88px;
  --mt-92: 92px;
  --mt-96: 96px;
  --mt-100: 100px;
  --mt-104: 104px;
  --mt-108: 108px;
  --mt-112: 112px;
  --mt-116: 116px;
  --mt-120: 120px;
  --mt-124: 124px;
  --mt-128: 128px;

  /* Margin Bottom */
  --mb-0: 0px;
  --mb-4: 4px;
  --mb-8: 8px;
  --mb-12: 12px;
  --mb-16: 16px;
  --mb-20: 20px;
  --mb-24: 24px;
  --mb-28: 28px;
  --mb-32: 32px;
  --mb-36: 36px;
  --mb-40: 40px;
  --mb-44: 44px;
  --mb-48: 48px;
  --mb-52: 52px;
  --mb-56: 56px;
  --mb-60: 60px;
  --mb-64: 64px;
  --mb-68: 68px;
  --mb-72: 72px;
  --mb-76: 76px;
  --mb-80: 80px;
  --mb-84: 84px;
  --mb-88: 88px;
  --mb-92: 92px;
  --mb-96: 96px;
  --mb-100: 100px;
  --mb-104: 104px;
  --mb-108: 108px;
  --mb-112: 112px;
  --mb-116: 116px;
  --mb-120: 120px;
  --mb-124: 124px;
  --mb-128: 128px;
}
:root {
  --ml-0: 0px;
  --ml-4: 4px;
  --ml-8: 8px;
  --ml-12: 12px;
  --ml-16: 16px;
  --ml-20: 20px;
  --ml-24: 24px;
  --ml-28: 28px;
  --ml-32: 32px;
  --ml-36: 36px;
  --ml-40: 40px;
  --ml-44: 44px;
  --ml-48: 48px;
  --ml-52: 52px;
  --ml-56: 56px;
  --ml-60: 60px;
  --ml-64: 64px;
  --ml-68: 68px;
  --ml-72: 72px;
  --ml-76: 76px;
  --ml-80: 80px;
  --ml-84: 84px;
  --ml-88: 88px;
  --ml-92: 92px;
  --ml-96: 96px;
  --ml-100: 100px;
  --ml-104: 104px;
  --ml-108: 108px;
  --ml-112: 112px;
  --ml-116: 116px;
  --ml-120: 120px;
  --ml-124: 124px;
  --ml-128: 128px;

  --mr-0: 0px;
  --mr-4: 4px;
  --mr-8: 8px;
  --mr-12: 12px;
  --mr-16: 16px;
  --mr-20: 20px;
  --mr-24: 24px;
  --mr-28: 28px;
  --mr-32: 32px;
  --mr-36: 36px;
  --mr-40: 40px;
  --mr-44: 44px;
  --mr-48: 48px;
  --mr-52: 52px;
  --mr-56: 56px;
  --mr-60: 60px;
  --mr-64: 64px;
  --mr-68: 68px;
  --mr-72: 72px;
  --mr-76: 76px;
  --mr-80: 80px;
  --mr-84: 84px;
  --mr-88: 88px;
  --mr-92: 92px;
  --mr-96: 96px;
  --mr-100: 100px;
  --mr-104: 104px;
  --mr-108: 108px;
  --mr-112: 112px;
  --mr-116: 116px;
  --mr-120: 120px;
  --mr-124: 124px;
  --mr-128: 128px;
}

:root {
  /* Padding Top */
   --p-0: 0px;
  --pt-1: 1px;
  --pt-2: 2px;
  --pt-3: 3px;
  --pt-4: 4px;
  --pt-5: 5px;
  --pt-6: 6px;
  --pt-7: 7px;
  --pt-8: 8px;
  --pt-9: 9px;
  --pt-10: 10px;
  --pt-11: 11px;
  --pt-12: 12px;
  --pt-13: 13px;
  --pt-14: 14px;
  --pt-15: 15px;
  --pt-16: 16px;
  --pt-17: 17px;
  --pt-18: 18px;
  --pt-19: 19px;
  --pt-20: 20px;
  --pt-21: 21px;
  --pt-22: 22px;
  --pt-23: 23px;
  --pt-24: 24px;
  --pt-25: 25px;
  --pt-26: 26px;
  --pt-27: 27px;
  --pt-28: 28px;
  --pt-29: 29px;
  --pt-30: 30px;
  --pt-31: 31px;
  --pt-32: 32px;
  --pt-33: 33px;
  --pt-34: 34px;
  --pt-35: 35px;
  --pt-36: 36px;
  --pt-37: 37px;
  --pt-38: 38px;
  --pt-39: 39px;
  --pt-40: 40px;
  --pt-41: 41px;
  --pt-42: 42px;
  --pt-43: 43px;
  --pt-44: 44px;
  --pt-45: 45px;
  --pt-46: 46px;
  --pt-47: 47px;
  --pt-48: 48px;
  --pt-49: 49px;
  --pt-50: 50px;
  --pt-51: 51px;
  --pt-52: 52px;
  --pt-53: 53px;
  --pt-54: 54px;
  --pt-55: 55px;
  --pt-56: 56px;
  --pt-57: 57px;
  --pt-58: 58px;
  --pt-59: 59px;
  --pt-60: 60px;
  --pt-61: 61px;
  --pt-62: 62px;
  --pt-63: 63px;
  --pt-64: 64px;
  --pt-65: 65px;
  --pt-66: 66px;
  --pt-67: 67px;
  --pt-68: 68px;
  --pt-69: 69px;
  --pt-70: 70px;
  --pt-71: 71px;
  --pt-72: 72px;
  --pt-73: 73px;
  --pt-74: 74px;
  --pt-75: 75px;
  --pt-76: 76px;
  --pt-77: 77px;
  --pt-78: 78px;
  --pt-79: 79px;
  --pt-80: 80px;
  --pt-81: 81px;
  --pt-82: 82px;
  --pt-83: 83px;
  --pt-84: 84px;
  --pt-85: 85px;
  --pt-86: 86px;
  --pt-87: 87px;
  --pt-88: 88px;
  --pt-89: 89px;
  --pt-90: 90px;
  --pt-91: 91px;
  --pt-92: 92px;
  --pt-93: 93px;
  --pt-94: 94px;
  --pt-95: 95px;
  --pt-96: 96px;
  --pt-97: 97px;
  --pt-98: 98px;
  --pt-99: 99px;
  --pt-100: 100px;
  --pt-101: 101px;
  --pt-102: 102px;
  --pt-103: 103px;
  --pt-104: 104px;
  --pt-105: 105px;
  --pt-106: 106px;
  --pt-107: 107px;
  --pt-108: 108px;
  --pt-109: 109px;
  --pt-110: 110px;
  --pt-111: 111px;
  --pt-112: 112px;
  --pt-113: 113px;
  --pt-114: 114px;
  --pt-115: 115px;
  --pt-116: 116px;
  --pt-117: 117px;
  --pt-118: 118px;
  --pt-119: 119px;
  --pt-120: 120px;
  --pt-121: 121px;
  --pt-122: 122px;
  --pt-123: 123px;
  --pt-124: 124px;
  --pt-125: 125px;
  --pt-126: 126px;
  --pt-127: 127px;
  --pt-128: 128px;

  /* Padding Bottom — same pattern */
  --pb-1: 1px;
  --pb-2: 2px;
  --pb-3: 3px;
  --pb-4: 4px;
  --pb-5: 5px;
  --pb-6: 6px;
  --pb-7: 7px;
  --pb-8: 8px;
  --pb-9: 9px;
  --pb-10: 10px;
  --pb-11: 11px;
  --pb-12: 12px;
  --pb-13: 13px;
  --pb-14: 14px;
  --pb-15: 15px;
  --pb-16: 16px;
  --pb-17: 17px;
  --pb-18: 18px;
  --pb-19: 19px;
  --pb-20: 20px;
  --pb-21: 21px;
  --pb-22: 22px;
  --pb-23: 23px;
  --pb-24: 24px;
  --pb-25: 25px;
  --pb-26: 26px;
  --pb-27: 27px;
  --pb-28: 28px;
  --pb-29: 29px;
  --pb-30: 30px;
  --pb-31: 31px;
  --pb-32: 32px;
  --pb-33: 33px;
  --pb-34: 34px;
  --pb-35: 35px;
  --pb-36: 36px;
  --pb-37: 37px;
  --pb-38: 38px;
  --pb-39: 39px;
  --pb-40: 40px;
  --pb-41: 41px;
  --pb-42: 42px;
  --pb-43: 43px;
  --pb-44: 44px;
  --pb-45: 45px;
  --pb-46: 46px;
  --pb-47: 47px;
  --pb-48: 48px;
  --pb-49: 49px;
  --pb-50: 50px;
  --pb-51: 51px;
  --pb-52: 52px;
  --pb-53: 53px;
  --pb-54: 54px;
  --pb-55: 55px;
  --pb-56: 56px;
  --pb-57: 57px;
  --pb-58: 58px;
  --pb-59: 59px;
  --pb-60: 60px;
  --pb-61: 61px;
  --pb-62: 62px;
  --pb-63: 63px;
  --pb-64: 64px;
  --pb-65: 65px;
  --pb-66: 66px;
  --pb-67: 67px;
  --pb-68: 68px;
  --pb-69: 69px;
  --pb-70: 70px;
  --pb-71: 71px;
  --pb-72: 72px;
  --pb-73: 73px;
  --pb-74: 74px;
  --pb-75: 75px;
  --pb-76: 76px;
  --pb-77: 77px;
  --pb-78: 78px;
  --pb-79: 79px;
  --pb-80: 80px;
  --pb-81: 81px;
  --pb-82: 82px;
  --pb-83: 83px;
  --pb-84: 84px;
  --pb-85: 85px;
  --pb-86: 86px;
  --pb-87: 87px;
  --pb-88: 88px;
  --pb-89: 89px;
  --pb-90: 90px;
  --pb-91: 91px;
  --pb-92: 92px;
  --pb-93: 93px;
  --pb-94: 94px;
  --pb-95: 95px;
  --pb-96: 96px;
  --pb-97: 97px;
  --pb-98: 98px;
  --pb-99: 99px;
  --pb-100: 100px;
  --pb-101: 101px;
  --pb-102: 102px;
  --pb-103: 103px;
  --pb-104: 104px;
  --pb-105: 105px;
  --pb-106: 106px;
  --pb-107: 107px;
  --pb-108: 108px;
  --pb-109: 109px;
  --pb-110: 110px;
  --pb-111: 111px;
  --pb-112: 112px;
  --pb-113: 113px;
  --pb-114: 114px;
  --pb-115: 115px;
  --pb-116: 116px;
  --pb-117: 117px;
  --pb-118: 118px;
  --pb-119: 119px;
  --pb-120: 120px;
  --pb-121: 121px;
  --pb-122: 122px;
  --pb-123: 123px;
  --pb-124: 124px;
  --pb-125: 125px;
  --pb-126: 126px;
  --pb-127: 127px;
  --pb-128: 128px;
}
:root {
    --pr-0: 0px;
    --pl-5: 5px;
  --pl-10: 10px;
  --pl-12: 12px;
  --pl-14: 14px;
  --pl-16: 16px;
  --pl-18: 18px;
  --pl-20: 20px;
  --pl-22: 22px;
  --pl-24: 24px;
  --pl-26: 26px;
  --pl-28: 28px;
  --pl-30: 30px;
  --pl-32: 32px;
  --pl-34: 34px;
  --pl-36: 36px;
  --pl-38: 38px;
  --pl-40: 40px;
  --pl-42: 42px;
  --pl-44: 44px;
  --pl-46: 46px;
  --pl-48: 48px;
  --pl-50: 50px;
  --pl-52: 52px;
  --pl-54: 54px;
 --pr-0: 0px;
 --pr-5: 5px;
  --pr-10: 10px;
  --pr-12: 12px;
  --pr-14: 14px;
  --pr-16: 16px;
  --pr-18: 18px;
  --pr-20: 20px;
  --pr-22: 22px;
  --pr-24: 24px;
  --pr-26: 26px;
  --pr-28: 28px;
  --pr-30: 30px;
  --pr-32: 32px;
  --pr-34: 34px;
  --pr-36: 36px;
  --pr-38: 38px;
  --pr-40: 40px;
  --pr-42: 42px;
  --pr-44: 44px;
  --pr-46: 46px;
  --pr-48: 48px;
  --pr-50: 50px;
  --pr-52: 52px;
  --pr-54: 54px;
}
:root {
  --p-4: 4px;
  --p-6: 6px;
  --p-8: 8px;
  --p-10: 10px;
  --p-12: 12px;
  --p-14: 14px;
  --p-16: 16px;
  --p-18: 18px;
  --p-20: 20px;
  --p-24: 24px;
  --p-32: 32px;
}
:root {
  --fw-100: 100;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
}


.fs-12 { font-size: var(--fs-12); }
.fs-13 { font-size: var(--fs-13); }
.fs-14 { font-size: var(--fs-14); }
.fs-15 { font-size: var(--fs-15); }
.fs-16 { font-size: var(--fs-16); }
.fs-17 { font-size: var(--fs-17); }
.fs-18 { font-size: var(--fs-18); }
.fs-19 { font-size: var(--fs-19); }
.fs-20 { font-size: var(--fs-20); }
.fs-21 { font-size: var(--fs-21); }
.fs-22 { font-size: var(--fs-22); }
.fs-23 { font-size: var(--fs-23); }
.fs-24 { font-size: var(--fs-24); }
.fs-25 { font-size: var(--fs-25); }
.fs-26 { font-size: var(--fs-26); }
.fs-27 { font-size: var(--fs-27); }
.fs-28 { font-size: var(--fs-28); }
.fs-29 { font-size: var(--fs-29); }
.fs-30 { font-size: var(--fs-30); }
.fs-31 { font-size: var(--fs-31); }
.fs-32 { font-size: var(--fs-32); }
.fs-33 { font-size: var(--fs-33); }
.fs-34 { font-size: var(--fs-34); }
.fs-35 { font-size: var(--fs-35); }
.fs-36 { font-size: var(--fs-36); }
.fs-37 { font-size: var(--fs-37); }
.fs-38 { font-size: var(--fs-38); }
.fs-39 { font-size: var(--fs-39); }
.fs-40 { font-size: var(--fs-40); }
.fs-41 { font-size: var(--fs-41); }
.fs-42 { font-size: var(--fs-42); }
.fs-43 { font-size: var(--fs-43); }
.fs-44 { font-size: var(--fs-44); }
.fs-45 { font-size: var(--fs-45); }
.fs-46 { font-size: var(--fs-46); }
.fs-47 { font-size: var(--fs-47); }
.fs-48 { font-size: var(--fs-48); }

.lh-18 { line-height: var(--lh-18); }
.lh-19 { line-height: var(--lh-19); }
.lh-20 { line-height: var(--lh-20); }
.lh-21 { line-height: var(--lh-21); }
.lh-22 { line-height: var(--lh-22); }
.lh-23 { line-height: var(--lh-23); }
.lh-24 { line-height: var(--lh-24); }
.lh-25 { line-height: var(--lh-25); }
.lh-26 { line-height: var(--lh-26); }
.lh-27 { line-height: var(--lh-27); }
.lh-28 { line-height: var(--lh-28); }
.lh-29 { line-height: var(--lh-29); }
.lh-30 { line-height: var(--lh-30); }
.lh-31 { line-height: var(--lh-31); }
.lh-32 { line-height: var(--lh-32); }
.lh-33 { line-height: var(--lh-33); }
.lh-34 { line-height: var(--lh-34); }
.lh-35 { line-height: var(--lh-35); }
.lh-36 { line-height: var(--lh-36); }
.lh-37 { line-height: var(--lh-37); }
.lh-38 { line-height: var(--lh-38); }
.lh-39 { line-height: var(--lh-39); }
.lh-40 { line-height: var(--lh-40); }
.lh-41 { line-height: var(--lh-41); }
.lh-42 { line-height: var(--lh-42); }
.lh-43 { line-height: var(--lh-43); }
.lh-44 { line-height: var(--lh-44); }
.lh-45 { line-height: var(--lh-45); }
.lh-46 { line-height: var(--lh-46); }
.lh-47 { line-height: var(--lh-47); }
.lh-48 { line-height: var(--lh-48); }
.lh-49 { line-height: var(--lh-49); }
.lh-50 { line-height: var(--lh-50); }
.lh-51 { line-height: var(--lh-51); }
.lh-52 { line-height: var(--lh-52); }
.lh-72 { line-height: var(--lh-72); }


.fw-100 { font-weight: var(--fw-100); }
.fw-200 { font-weight: var(--fw-200); }
.fw-300 { font-weight: var(--fw-300); }
.fw-400 { font-weight: var(--fw-400); }
.fw-500 { font-weight: var(--fw-500); }
.fw-600 { font-weight: var(--fw-600); }
.fw-700 { font-weight: var(--fw-700); }
.fw-800 { font-weight: var(--fw-800); }
.fw-900 { font-weight: var(--fw-900); }

.fw-normal    { font-weight: var(--fw-normal); }
.fw-medium    { font-weight: var(--fw-medium); }
.fw-semibold  { font-weight: var(--fw-semibold); }
.fw-bold      { font-weight: var(--fw-bold); }
.fw-extrabold { font-weight: var(--fw-extrabold); }
.fw-black     { font-weight: var(--fw-black); }

.mb-0   { margin-bottom: var(--mb-0); }
.mb-4   { margin-bottom: var(--mb-4); }
.mb-8   { margin-bottom: var(--mb-8); }
.mb-12  { margin-bottom: var(--mb-12); }
.mb-16  { margin-bottom: var(--mb-16); }
.mb-20  { margin-bottom: var(--mb-20); }
.mb-24  { margin-bottom: var(--mb-24); }
.mb-28  { margin-bottom: var(--mb-28); }
.mb-32  { margin-bottom: var(--mb-32); }
.mb-36  { margin-bottom: var(--mb-36); }
.mb-40  { margin-bottom: var(--mb-40); }
.mb-44  { margin-bottom: var(--mb-44); }
.mb-48  { margin-bottom: var(--mb-48); }
.mb-52  { margin-bottom: var(--mb-52); }
.mb-56  { margin-bottom: var(--mb-56); }
.mb-60  { margin-bottom: var(--mb-60); }
.mb-64  { margin-bottom: var(--mb-64); }
.mb-68  { margin-bottom: var(--mb-68); }
.mb-72  { margin-bottom: var(--mb-72); }
.mb-76  { margin-bottom: var(--mb-76); }
.mb-80  { margin-bottom: var(--mb-80); }
.mb-84  { margin-bottom: var(--mb-84); }
.mb-88  { margin-bottom: var(--mb-88); }
.mb-92  { margin-bottom: var(--mb-92); }
.mb-96  { margin-bottom: var(--mb-96); }
.mb-100 { margin-bottom: var(--mb-100); }
.mb-104 { margin-bottom: var(--mb-104); }
.mb-108 { margin-bottom: var(--mb-108); }
.mb-112 { margin-bottom: var(--mb-112); }
.mb-116 { margin-bottom: var(--mb-116); }
.mb-120 { margin-bottom: var(--mb-120); }

:root {
  --border-accent: #2244B3;
   --border-orange: #FFB200;
}
:root {
  --section-min-height656: 656px;
}
.layout-flex-split
{
    min-height: 656px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.button-solid
{
  background-color: #fff;
}
.border-left-accent {
  border-left: 4px solid var(--border-accent);
}

.border-top-accent {
  border-top: 4px solid var(--border-accent);
}

.border-right-accent {
  border-right: 4px solid var(--border-accent);
}

.border-bottom-accent {
  border-bottom: 4px solid var(--border-accent);
}
input::placeholder {
 color: #646F87;
    font-size: 14px;
     font-weight: 500;
  }
  input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #646F87;
    font-size: 14px;
     font-weight: 500;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: #646F87;
    font-size: 14px;
     font-weight: 500;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: #646F87;
    font-size: 14px;
     font-weight: 500;
  }
  :-moz-placeholder { /* Firefox 18- */
    color: #646F87;
    font-size: 14px;
     font-weight: 500;
  }
/* Universal Gradient Button */
:root {
  --btn-bg: radial-gradient(100% 1185.08% at 100% 100%, #FFB200 0%, #F57D49 42.39%, #EE72A3 100%);
  --btn-text-color: #fff;
  --btn-radius: 8px;
}

.btn-gradient {
  background: var(--btn-bg);
  border-radius: var(--btn-radius);
  padding: 1px;
  text-align: center;
  color: var(--btn-text-color);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
  cursor: pointer;
  display: inline-block;
  border: none;
  text-decoration: none; /* for links */
}

.btn-gradient span {
  border-radius: var(--btn-radius);
  padding: 8px 15px;
  font-size: 16px;
  line-height: 28px;
  position: relative;
  z-index: 10;
  display: block;
  white-space: nowrap;
}

.btn-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--btn-radius);
  transition: all 0.1s ease;
  z-index: 1;
}

.btn-gradient:hover {
  color: var(--btn-text-color);
}

.btn-gradient:hover::after {
  opacity: 0.6;
  background: var(--btn-bg);
  filter: blur(4px);
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
  border: 1px solid #e72170;
}
/* CSS */
.icon-close{
  --size: 36px;           /* button box size */
  --icon: 14px;           /* SVG intrinsic size */
  --color: #646F87;       /* default icon color */
  --hover-color: #1a1f2e; /* hover/focus color */
  --bg-hover: rgba(100,111,135,.10);

  inline-size: var(--size);
  block-size: var(--size);
  display: inline-grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
  position: absolute;
        right: 13px;
        top: 30px;
}
.icon-close img
{
  width:13px;
  height:13px;
}
.icon-close__svg{
  inline-size: var(--icon);
  block-size: var(--icon);
  display: block;
  transform-origin: 50% 50%;
  /* load-in animation */
  animation: x-in .28s cubic-bezier(.2,.7,.2,1.1) both;
}

.icon-close:hover,
.icon-close:focus-visible{
  background: var(--bg-hover);
  color: var(--hover-color);
  transform: rotate(90deg);
}

.icon-close:active{
  transform: rotate(90deg);
}

@keyframes x-in{
  from{
    transform: rotate(-90deg);
    opacity: 0;
    filter: blur(.4px);
  }
  to{
    transform: none;
    opacity: 1;
    filter: blur(0);
  }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .icon-close__svg{ animation: none; }
  .icon-close,
  .icon-close:hover,
  .icon-close:focus-visible,
  .icon-close:active{
    transition: none;
    transform: none;
  }
}

/* Dark background variant (optional) */
@media (prefers-color-scheme: dark){
  .icon-close{
    --color: #A8B0C2;
    --hover-color: #E6E8EE;
    --bg-hover: rgba(168,176,194,.14);
  }
}
/******/
.close-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    cursor: pointer;
    top: 35px;
    right: 30px;
    border: none;
    background: transparent;
}

.close-icon::before,
.close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1.5px; /* thin lines */
  background: rgba(100, 111, 135, 1);
  border-radius: 2px; /* smooth edges */
  transform-origin: center;
  transition: transform 0.25s ease;
}

.close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.close-icon:hover::before {
  transform: translate(-50%, -50%) rotate(135deg);
}

.close-icon:hover::after {
  transform: translate(-50%, -50%) rotate(-135deg);
}