@font-face {
    font-family: "Manrope";
    src: url("/local/templates/it-vector-new/fonts/Manrope/Manrope-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --black: #18091D;
    --grey: #7F7582;
    --line: #EBE7ED;
    --indigo: #390894;
    --purple: #7F0AAD;
    --violet: #AC11FF;
    --orange: #FD5B03;
    --cyan: #28DFFF;
    --lime: #E2FD14;
    --brand-gradient-action: linear-gradient(135deg, #2b0758 0%, #5d0aa9 48%, #9411ba 72%, #fd5b03 118%);
    --brand-gradient-action-hover: linear-gradient(135deg, #390894 0%, #7f0aad 50%, #b31a9c 70%, #ff6a16 108%);
    --brand-gradient-panel: linear-gradient(145deg, #21052c 0%, #3d076f 38%, #700c9e 70%, #c53b2c 115%);
    --brand-gradient-line: linear-gradient(90deg, #390894 0%, #8d10bb 62%, #fd5b03 100%);
    --brand-shadow: 0 20px 38px -12px rgba(78, 10, 142, .3), 0 10px 24px -16px rgba(253, 91, 3, .2);
    --card-hover-border: rgba(127, 10, 173, .34);
    --card-hover-shadow: 0 32px 68px -16px rgba(57, 8, 148, .28), 0 14px 30px -20px rgba(253, 91, 3, .2);
    --card-hover-shadow-strong: 0 38px 82px -18px rgba(57, 8, 148, .34), 0 16px 34px -22px rgba(253, 91, 3, .24);
    --bg: #F7F7F7;
    --container: min(1536px, calc(100vw - 48px));
    --wide: min(1696px, calc(100vw - 48px));
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html {
        overflow-x: clip;
    }
}

body {
    min-width: 320px;
    margin: 0;
    color: var(--black);
    background: var(--bg);
    font-family: "Manrope", Arial, sans-serif;
    letter-spacing: -0.03em;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

main {
    width: 100%;
}

@media (max-width: 1700px) {
    :root {
        --container: min(1200px, calc(100vw - 64px));
        --wide: min(1280px, calc(100vw - 64px));
    }
}

@media (max-width: 900px) {
    :root {
        --container: calc(100vw - 32px);
        --wide: calc(100vw - 32px);
    }
}

@media (max-width: 640px) {
    :root {
        --container: min(360px, calc(100vw - 24px));
        --wide: min(360px, calc(100vw - 24px));
    }
}