:root {
    --ct-body-setup-font-family: "Outfit", sans-serif;
    --ct-body-setup-font-size: 12px;

    /* --ct-logo-text-font-size: 16px;
    --ct-logo-text-font-weight: 600; */

    --ct-icon-size: 24px;

    /* spacing scale */
    --ct-space-xxxs: 2px;
    --ct-space-xxs: 8px;
    --ct-space-xs: 12px;
    --ct-space-sm: 14px;
    --ct-space-default: 20px;
    --ct-space-md: 30px;
    --ct-space-lg: 40px;
    --ct-space-xl: 60px;
    --ct-space-xxl: 90px;
    --ct-space-xxxl: 120px;

    /* font-size scale */
    --ct-font-size-3xs: 6px;
    --ct-font-size-2xs: 10px;
    --ct-font-size-xs: 12px;
    --ct-font-size-sm: 14px;
    --ct-font-size-base: 16px;
    --ct-font-size-md: 18px;
    --ct-font-size-lg: 20px;
    --ct-font-size-xl: 25px;
    --ct-font-size-2xl: 28px;
    --ct-font-size-3xl: 30px;
    --ct-font-size-4xl: 35px;
    --ct-font-size-5xl: 40px;


    /* font-weight */
    --font-weight-bold: 600;
    --font-weight-normal: 400;

    /* transition durations */
    --ct-transition-fast: 0.2s;
    --ct-transition-base: 0.3s;
    --ct-transition-slow: 0.6s;

    /* scroll bar */

    --ct-scrollbar-thumb-bg: #3A7AFE;

    /* font color */

    --ct-side-bar-menu-heading-color: #3A7AFE;
    --ct-anchor-tag-color: #3A7AFE;
    --ct-button-active-color: #3A7AFE;

    /* background color */

    --ct-primary-solid-color: #3A7AFE;
    --ct-tertiary-solid-color: #e0e0e0;
    --ct-quinary-solid-color: #858585;
    --ct-senary-solid-color: #f6f6f6;
    --ct-auth-side-bg-color: #EAF3FE;
    --ct-auth-side-heading-color: #101828;
    --ct-auth-side-text-color: #475467;


    --black: #000000;
    --white: #ffffff;
    --red: #dc3545;
    --green: #198754;
    --transparent: transparent;
    --white-opacue: rgba(255, 255, 255, 0.85);

    /* color palette (standard scale) */
    --ct-color-gray-100: #e4ebf5;
    --ct-color-gray-400: #6c757d;
    --ct-color-gray-700: #66615B;
    --ct-color-blue-50: #f0f7ff;
    --ct-color-blue-100: #dbeafe;
    --ct-color-green-50: #ecfff3;
    --ct-color-green-500: #16a34a;
    --ct-color-green-700: #0b8737;
    --ct-color-red-50: #fff4f2;
    --ct-color-red-400: #f04438;
    --ct-color-red-700: #b42318;
    --ct-color-shadow: rgba(0, 0, 0, 0.15);


    /* border */
    --border-radius-outer: 10px;
    --border-radius-inner: 5px;
    --border-radius-full: 9999px;

    /* box shadow */
    --ct-primary-box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);

    /* box shadow offset/blur scale (per-axis px values, composed per usage) */
    --ct-shadow-offset-sm: 8px;
    --ct-shadow-offset-md: 10px;
    --ct-shadow-offset-lg: 14px;
    --ct-shadow-blur-sm: 24px;
    --ct-shadow-blur-md: 34px;
    --ct-shadow-blur-lg: 40px;

    /* gradients */
    --ct-primary-gradient-color: linear-gradient(to right, #66a5fe 0%, #3b82f6 30%, #2d67cc 50%, #3b82f6 70%, #66a5fe 100%);
    --ct-secondary-gradient-color: linear-gradient(to right, #f0f0f0 0%, #ffffff 30%, #ffffff 50%, #ffffff 70%, #f0f0f0 100%);

}

/* 1. EXTRA SMALL DEVICES (Portrait phones) */
@media (max-width: 575.98px) {

    /* Your CSS for phones goes here */
    :root {
        --ct-body-setup-font-size: 12px;

        --ct-icon-size: 20px;
    }
}

/* 2. SMALL DEVICES (Landscape phones) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Your CSS for large phones goes here */
}

/* 3. MEDIUM DEVICES (Tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Your CSS for tablets goes here */
}

/* 4. LARGE DEVICES (Desktops and small laptops) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Your CSS for standard screens goes here */
}

/* 5. EXTRA LARGE DEVICES (Large desktop screens) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* Your CSS for wide monitors goes here */
}

/* 6. EXTRA EXTRA LARGE DEVICES (Enormous screens) */
@media (min-width: 1400px) {
    /* Your CSS for enormous screens goes here */
}