/** @format */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import "@/assets/rebond-grotesque.css";

:root {
    --neutral-color-50: #f8fafc;
    --neutral-color-100: #f8fafc;
    --neutral-color-200: #e2e8f0;
    --neutral-color-300: #cbd5e1;
    --neutral-color-400: #94a3b8;
    --neutral-color-500: #64748b;
    --neutral-color-600: #475569;
    --neutral-color-700: #334155;
    --neutral-color-800: #1e293b;
    --neutral-color-900: #0f172a;
    --primary-color-50: #f2fcff;
    --primary-color-100: #d9f6ff;
    --primary-color-200: #c0f0ff;
    --primary-color-300: #99e7ff;
    --primary-color-400: #5ad7ff;
    --primary-color-500: #1d4ed8;
    --primary-color-600: #00ade4;
    --primary-color-700: #008cb9;
    --primary-color-800: #005672;
    --primary-color-900: #003647;
    --secondary-color-50: #fffaf2;
    --secondary-color-100: #fff0d9;
    --secondary-color-200: #ffe0b3;
    --secondary-color-300: #ffc266;
    --secondary-color-400: #ffad33;
    --secondary-color-500: #ff9900;
    --secondary-color-600: #c87800;
    --secondary-color-700: #a46200;
    --secondary-color-800: #804d00;
    --secondary-color-900: #492c00;
    --success-color-50: #ecfdf5;
    --success-color-100: #d1fae5;
    --success-color-200: #a7f3d0;
    --success-color-300: #6ee7b7;
    --success-color-400: #34d399;
    --success-color-500: #10b981;
    --success-color-600: #059669;
    --success-color-700: #047857;
    --success-color-800: #065f46;
    --success-color-900: #064e3b;
    --warning-color-50: #fffbeb;
    --warning-color-100: #fef3c7;
    --warning-color-200: #fde68a;
    --warning-color-300: #fcd34d;
    --warning-color-400: #fbbf24;
    --warning-color-500: #f59e0b;
    --warning-color-600: #d97706;
    --warning-color-700: #b45309;
    --warning-color-800: #92400e;
    --warning-color-900: #78350f;
    --danger-color-50: #fef2f2;
    --danger-color-100: #fee2e2;
    --danger-color-200: #fecaca;
    --danger-color-300: #fca5a5;
    --danger-color-400: #f87171;
    --danger-color-500: #ef4444;
    --danger-color-600: #dc2626;
    --danger-color-700: #b91c1c;
    --danger-color-800: #991b1b;
    --danger-color-900: #7f1d1d;
    --box-shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
    --box-shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1),
    0px 1px 2px rgba(16, 24, 40, 0.06);
    --box-shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    --box-shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.1),
    0px 4px 6px -2px rgba(16, 24, 40, 0.05);
    --blur-sm: blur(4px);
    --blur-md: blur(8px);
    --blur-lg: blur(12px);
    --blur-xl: blur(20px);
    --shade-0: #ffffff;
    --shade-100: #000000;
    --primary-font-family: "Inter", sans-serif;
    --secondary-font-family: "Rebond Grotesque", sans-serif;
    --desktop-breakpoint: 1280px;
    --tablet-breakpoint: 834px;
    --mobile-breakpoint: 375px;
    --gutter-x: 1rem;
    --gutter-y: 1rem;
    --primary-transition: 0.3s ease-in-out;
    --sidebar-width: 250px;
}

.primary-font{
    font-family: var(--primary-font-family);
}
.inner__content {
    padding: 28px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 500;
    font-family: var(--primary-font-family);
}

html {
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
}

a {
    font-family: var(--secondary-font-family);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-decoration-line: underline;
    color: var(--secondary-color-500);
}

.heading__xxl {
    font-size: 3.75rem;
    line-height: 78px;
}


.heading__xl {
    font-size: 3rem;
    line-height: 64px;
}

.heading__lg {
    font-size: 2.25rem;
    line-height: 52px;
}

.heading__md {
    font-size: 1.87rem;
    line-height: 44px;
}

.heading__sm {
    font-size: 1.5rem;
    line-height: 36px;
}

.heading__xs {
    font-size: 1.35rem;
    line-height: 32px;
}

.text__xl {
    font-size: 1.25rem;
    line-height: 34px;
}

.text__lg {
    font-size: 1.125rem;
    line-height: 28px;
}

.text__md {
    font-size: 1rem;
    line-height: 24px;
}

.text__sm {
    font-size: 0.875rem;
    line-height: 20px;
}

.text__xs {
    font-size: 0.75rem;
    line-height: 18px;
}

.text__xxs {
    font-size: 0.625rem;
    line-height: 16px;
}

.text__neutral__50 {
    color: var(--neutral-color-50);
}

.text__neutral__100 {
    color: var(--neutral-color-100);
}

.text__neutral__200 {
    color: var(--neutral-color-200);
}

.text__neutral__300 {
    color: var(--neutral-color-300);
}

.text__neutral__400 {
    color: var(--neutral-color-400);
}

.text__neutral__500 {
    color: var(--neutral-color-500);
}

.text__neutral__600 {
    color: var(--neutral-color-600);
}

.text__neutral__700 {
    color: var(--neutral-color-700);
}

.text__neutral__800 {
    color: var(--neutral-color-800);
}

.text__neutral__900 {
    color: var(--neutral-color-900);
}

.text__primary__50 {
    color: var(--primary-color-50);
}

.text__primary__100 {
    color: var(--primary-color-100);
}

.text__primary__200 {
    color: var(--primary-color-200);
}

.text__primary__300 {
    color: var(--primary-color-300);
}

.text__primary__400 {
    color: var(--primary-color-400);
}

.text__primary__500 {
    color: var(--primary-color-500);
}

.text__primary__600 {
    color: var(--primary-color-600);
}

.text__primary__700 {
    color: var(--primary-color-700);
}

.text__primary__800 {
    color: var(--primary-color-800);
}

.text__primary__900 {
    color: var(--primary-color-900);
}

.text__secondary__50 {
    color: var(--secondary-color-50);
}

.text__secondary__100 {
    color: var(--secondary-color-100);
}

.text__secondary__200 {
    color: var(--secondary-color-200);
}

.text__secondary__300 {
    color: var(--secondary-color-300);
}

.text__secondary__400 {
    color: var(--secondary-color-400);
}

.text__secondary__500 {
    color: var(--secondary-color-500);
}

.text__secondary__600 {
    color: var(--secondary-color-600);
}

.text__secondary__700 {
    color: var(--secondary-color-700);
}

.text__secondary__800 {
    color: var(--secondary-color-800);
}

.text__secondary__900 {
    color: var(--secondary-color-900);
}

.text__success__50 {
    color: var(--success-color-50);
}

.text__success__100 {
    color: var(--success-color-100);
}

.text__success__200 {
    color: var(--success-color-200);
}

.text__success__300 {
    color: var(--success-color-300);
}

.text__success__400 {
    color: var(--success-color-400);
}

.text__success__500 {
    color: var(--success-color-500);
}

.text__success__600 {
    color: var(--success-color-600);
}

.text__success__700 {
    color: var(--success-color-700);
}

.text__success__800 {
    color: var(--success-color-800);
}

.text__success__900 {
    color: var(--success-color-900);
}

.text__warning__50 {
    color: var(--warning-color-50);
}

.text__warning__100 {
    color: var(--warning-color-100);
}

.text__warning__200 {
    color: var(--warning-color-200);
}

.text__warning__300 {
    color: var(--warning-color-300);
}

.text__warning__400 {
    color: var(--warning-color-400);
}

.text__warning__500 {
    color: var(--warning-color-500);
}

.text__warning__600 {
    color: var(--warning-color-600);
}

.text__warning__700 {
    color: var(--warning-color-700);
}

.text__warning__800 {
    color: var(--warning-color-800);
}

.text__warning__900 {
    color: var(--warning-color-900);
}

.text__danger__50 {
    color: var(--danger-color-50);
}

.text__danger__100 {
    color: var(--danger-color-100);
}

.text__danger__200 {
    color: var(--danger-color-200);
}

.text__danger__300 {
    color: var(--danger-color-300);
}

.text__danger__400 {
    color: var(--danger-color-400);
}

.text__danger__500 {
    color: var(--danger-color-500);
}

.text__danger__600 {
    color: var(--danger-color-600);
}

.text__danger__700 {
    color: var(--danger-color-700);
}

.text__danger__800 {
    color: var(--danger-color-800);
}

.text__danger__900 {
    color: var(--danger-color-900);
}

.text__dark {
    color: var(--shade-100);
}

.text__light {
    color: var(--shade-0);
}

.text__gradient {
    background: linear-gradient(
            95.53deg,
            #01c2ff 2%,
            rgba(255, 1, 245, 0.61) 36.48%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.bg__neutral__50 {
    background-color: var(--neutral-color-50);
}

.bg__neutral__100 {
    background-color: var(--neutral-color-100);
}

.bg__neutral__200 {
    background-color: var(--neutral-color-200);
}

.bg__neutral__300 {
    background-color: var(--neutral-color-300);
}

.bg__neutral__400 {
    background-color: var(--neutral-color-400);
}

.bg__neutral__500 {
    background-color: var(--neutral-color-500);
}

.bg__neutral__600 {
    background-color: var(--neutral-color-600);
}

.bg__neutral__700 {
    background-color: var(--neutral-color-700);
}

.bg__neutral__800 {
    background-color: var(--neutral-color-800);
}

.bg__neutral__900 {
    background-color: var(--neutral-color-900);
}

.bg__primary__50 {
    background-color: var(--primary-color-50);
}

.bg__primary__100 {
    background-color: var(--primary-color-100);
}

.bg__primary__200 {
    background-color: var(--primary-color-200);
}

.bg__primary__300 {
    background-color: var(--primary-color-300);
}

.bg__primary__400 {
    background-color: var(--primary-color-400);
}

.bg__primary__500 {
    background-color: var(--primary-color-500);
}

.bg__primary__600 {
    background-color: var(--primary-color-600);
}

.bg__primary__700 {
    background-color: var(--primary-color-700);
}

.bg__primary__800 {
    background-color: var(--primary-color-800);
}

.bg__primary__900 {
    background-color: var(--primary-color-900);
}

.bg__secondary__50 {
    background-color: var(--secondary-color-50);
}

.bg__secondary__100 {
    background-color: var(--secondary-color-100);
}

.bg__secondary__200 {
    background-color: var(--secondary-color-200);
}

.bg__secondary__300 {
    background-color: var(--secondary-color-300);
}

.bg__secondary__400 {
    background-color: var(--secondary-color-400);
}

.bg__secondary__500 {
    background-color: var(--secondary-color-500);
}

.bg__secondary__600 {
    background-color: var(--secondary-color-600);
}

.bg__secondary__700 {
    background-color: var(--secondary-color-700);
}

.bg__secondary__800 {
    background-color: var(--secondary-color-800);
}

.bg__secondary__900 {
    background-color: var(--secondary-color-900);
}

.bg__success__50 {
    background-color: var(--success-color-50);
}

.bg__success__100 {
    background-color: var(--success-color-100);
}

.bg__success__200 {
    background-color: var(--success-color-200);
}

.bg__success__300 {
    background-color: var(--success-color-300);
}

.bg__success__400 {
    background-color: var(--success-color-400);
}

.bg__success__500 {
    background-color: var(--success-color-500);
}

.bg__success__600 {
    background-color: var(--success-color-600);
}

.bg__success__700 {
    background-color: var(--success-color-700);
}

.bg__success__800 {
    background-color: var(--success-color-800);
}

.bg__success__900 {
    background-color: var(--success-color-900);
}

.bg__warning__50 {
    background-color: var(--warning-color-50);
}

.bg__warning__100 {
    background-color: var(--warning-color-100);
}

.bg__warning__200 {
    background-color: var(--warning-color-200);
}

.bg__warning__300 {
    background-color: var(--warning-color-300);
}

.bg__warning__400 {
    background-color: var(--warning-color-400);
}

.bg__warning__500 {
    background-color: var(--warning-color-500);
}

.bg__warning__600 {
    background-color: var(--warning-color-600);
}

.bg__warning__700 {
    background-color: var(--warning-color-700);
}

.bg__warning__800 {
    background-color: var(--warning-color-800);
}

.bg__warning__900 {
    background-color: var(--warning-color-900);
}

.bg__danger__50 {
    background-color: var(--danger-color-50);
}

.bg__danger__100 {
    background-color: var(--danger-color-100);
}

.bg__danger__200 {
    background-color: var(--danger-color-200);
}

.bg__danger__300 {
    background-color: var(--danger-color-300);
}

.bg__danger__400 {
    background-color: var(--danger-color-400);
}

.bg__danger__500 {
    background-color: var(--danger-color-500);
}

.bg__danger__600 {
    background-color: var(--danger-color-600);
}

.bg__danger__700 {
    background-color: var(--danger-color-700);
}

.bg__danger__800 {
    background-color: var(--danger-color-800);
}

.bg__danger__900 {
    background-color: var(--danger-color-900);
}

.bg__dark {
    background-color: var(--shade-100);
}

.bg__light {
    background-color: var(--shade-0);
}

.font__weight__100 {
    font-weight: 100;
}

.font__weight__200 {
    font-weight: 200;
}

.font__weight__300 {
    font-weight: 300;
}

.font__weight__400 {
    font-weight: 400;
}

.font__weight__500 {
    font-weight: 500;
}

.font__weight__600 {
    font-weight: 600;
}

.font__weight__700 {
    font-weight: 700;
}

.font__weight__800 {
    font-weight: 800;
}

.font__weight__900 {
    font-weight: 900;
}

/* Container */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    width: 100%;
    padding-right: var(--gutter-x, 0.75rem);
    padding-left: var(--gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container,
    .container-sm {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container,
    .container-md,
    .container-sm {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1320px;
    }
}

.btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    gap: 8px;
    text-decoration: none;
    font-weight: 500;
    box-shadow: var(--box-shadow-sm);
    border-radius: 8px;
    transition: var(--primary-transition);
    border-width: 1px;
    border-style: solid;
}

.btn:focus-visible {
    outline: none;
}

.btn.btn__sm {
    padding: 10px 14px;
}

.btn.btn__md {
    padding: 10px 16px;
}

.btn.btn__lg {
    padding: 10px 18px;
}

.btn.btn__xl {
    padding: 10px 20px;
}

.btn.btn__xxl {
    padding: 16px 28px;
}

.btn.btn__primary {
    background: var(--primary-color-600);
    border-color: var(--primary-color-600);
    color: var(--shade-0);
}

.btn.btn__primary:hover {
    background: var(--primary-color-700);
    border-color: var(--primary-color-700);
}

.btn.btn__primary:focus {
    background: var(--primary-color-700);
    border: 3px solid var(--primary-color-100);
}

.btn.btn__primary:disabled {
    background: var(--primary-color-200);
    border-color: var(--primary-color-200);
}

.btn.btn__secondary {
    background: var(--primary-color-100);
    border-color: var(--primary-color-100);
    color: var(--primary-color-700);
}

.btn.btn__secondary:hover {
    background: var(--primary-color-600);
    border-color: var(--primary-color-600);
    color: var(--shade-0);
}

.btn.btn__secondary:focus {
    background: var(--primary-color-100);
    border: 3px solid var(--primary-color-400);
    color: var(--primary-color-700);
}

.btn.btn__secondary:disabled {
    background: var(--primary-color-100);
    border-color: var(--primary-color-100);
    color: var(--primary-color-400);
}

.btn.btn__outline {
    background: transparent;
    border-color: var(--primary-color-600);
    color: var(--primary-color-600);
}

.btn.btn__outline:hover {
    background: var(--primary-color-200);
    border-color: var(--primary-color-200);
    color: var(--primary-color-600);
}

.btn.btn__outline:focus {
    background: transparent;
    outline: var(--primary-color-200) solid 3px;
    border: 3px solid var(--primary-color-400);
    color: var(--primary-color-700);
}

.btn.btn__outline:disabled {
    background: var(--primary-color-50);
    border-color: var(--primary-color-50);
    color: var(--primary-color-300);
}

.show__mobile {
    display: none;
}

/* Mobile Breakpoint */
@media screen and (max-width: 850px) {
    /*img {*/
    /*    min-width: 100%;*/
    /*}*/

    .show__mobile {
        display: block;
    }

    .show__desktop {
        display: none;
    }

    .alert {
        height: 75px !important;
        gap: 20px;
    }

    .alert .link {
        font-size: 10px !important;
        line-height: unset !important;
        text-align: left !important;
    }

    .alert .link .link__btn {
        justify-content: left !important;
    }

    .alert .link .link__btn .text {
        font-size: 10px !important;
        line-height: unset !important;
    }

    .alert .link .link__btn svg {
        width: 10px !important;
    }

    .mobile__order__1 {
        order: 1;
    }

    .mobile__order__2 {
        order: 2;
    }
}

/* Desktop Breakpoint */
@media screen and (min-width: 1280px) {
}

/* Tablet Breakpoint */
@media screen and (min-width: 834px) {
}


.text-center {
    text-align: center;
}

.header__content__area {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  
    @media (max-width: 768px) {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 1em;
      align-items: flex-start;
    }
  }