@font-face {
    font-family: Montserrat-Regular;
    src: url('/assets/fonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Montserrat-Bold;
    src: url('/assets/fonts/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root {

    /* ============================== */

    --c-white: #fff;
    --c-black: #000;
    --c-gray: #8F8F8F;

    --background-gradient-transparent: linear-gradient(107.56deg, #0700f8c7 40.62%, rgba(201, 12, 232, 0.5) 100%);
    --background-gradient-full: linear-gradient(90deg, #120CE8 42%, #e485f4 100%);
    --c-blue: #120CE8;
    --c-purple: #e485f4;

    --bg-purple: #f5f3fa;
    --bg-white: #fff;
    --bg-gray: #f8f8f8;

    --c-green: #2BD700;

    --c-error: #ff0000;
    --c-success: #339900;
    --c-warning: #FF8A00;
    --c-information: #120CE8;

    /* ============================== */

    --foundation-edge-value: .9375rem;

    /* ============================== */

    --f-12: .75rem;
    --f-13: .813rem;
    --f-14: .875rem;
    --f-15: .938rem;
    --f-16: 1rem;
    --f-17: 1.063rem;
    --f-18: 1.125rem;
    --f-19: 1.188rem;
    --f-20: 1.25rem;
    --f-22: 1.375rem;
    --f-24: 1.5rem;
    --f-30: 1.875rem;
    --f-48: 3rem;
    --f-bold: Montserrat-Bold;
    --f-regular: Montserrat-Regular;
    --f-uppercase: uppercase;
    --f-italic: italic;

    /* ============================== */

     --border-radius-5: .313rem;
     --border-radius-10: .625rem;
     --border-radius-15: .938rem;
     --border-radius-50-p: 50%;
     --border-radius-full: 100vw;

     --border-radius-medium: var(--border-radius-10);

    /* ============================== */

    --distance-5: .313rem;
    --distance-10: .625rem;
    --distance-15: .938rem;
    --distance-20: 1.25rem;
    --distance-25: 1.563rem;
    --distance-30: 1.875rem;
    --distance-40: 2.5rem;
    --distance-50: 3.125rem;
    --distance-80: 5rem;

    /* ============================== */

    --shadow-1: 0px 10px 34px 11px rgb(73 73 73 / 5%);
    --shadow-2: 0px 0px 22px 5px rgba(0,0,0,0.05);
    --shadow-border: #efefef;

    /* ============================== */
    
    --plyr-color-main: var(--c-blue) !important;

}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--c-white);
    color: var(--c-black);
    font-family: var(--f-regular);
}

body.scroll-stop {
    -ms-touch-action: none;
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    overscroll-behavior: none;
}

/* *,
*::after,
*::before {
    transition: .5s
} */

.no-transition,
.no-transition *,
.no-transition *::after,
.no-transition *::before {
    transition-duration: 0s !important;
}

/* .swiper-lazy {
    opacity: 0;
    transition: var(--transition);
}

.swiper-lazy-loaded {
    opacity: 1;
} */

@media all and (min-width: 1023px) and (max-width: 1366px) {
    html{
        font-size: 75%;
    }
}


@media all and (min-width: 1536px) and (-webkit-min-device-pixel-ratio: 1.25) {
    html {
        font-size: 1.707577374599787vmin;
    }
}

@media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) {
    html {
        font-size: 1.707577374599787vmin;
    }
}

@media all and (min-width: 1097px) and (-webkit-min-device-pixel-ratio: 1.75) {
    html {
        font-size: 1.707577374599787vmin;
    }
}

p,
ul,
ul ul,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

ul {
    list-style-type: none;
}


.section--swiper {
    overflow: hidden;
}

.section--swiper .swiper-container {
    overflow: visible;
}

.section--swiper .swiper-pagination {
    position: relative;
    margin-top: 3.125rem;
}

.section--swiper .swiper-pagination-bullet {
    background-color: #A09DFF;
    opacity: 1;
}

.section--swiper .swiper-pagination-bullet-active {
    background-color: var(--c-blue);
}

.section {
    position: relative;
}

.shadow--type-1 {
    box-shadow: var(--shadow-1);
}

p {
    line-height: 1.75;
}

@media (min-width: 1024px) {
    .section {
        padding: 5.625rem 0;
    }

    .section .grid-container>*:not(:last-child) {
        margin-bottom: var(--distance-50);
    }
}

@media (max-width: 1023px) {
    .section {
        padding: 2.5rem 0;
    }

    .section .grid-container>*:not(:last-child) {
        margin-bottom: var(--distance-30);
    }
}