@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Regular.woff2') format('woff2'),
    url('../fonts/Manrope-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Medium.woff2') format('woff2'),
    url('../fonts/Manrope-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-SemiBold.woff2') format('woff2'),
    url('../fonts/Manrope-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Bold.woff2') format('woff2'),
    url('../fonts/Manrope-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-ExtraBold.woff2') format('woff2'),
    url('../fonts/Manrope-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-Medium.woff2') format('woff2'),
    url('../fonts/Urbanist-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-SemiBold.woff2') format('woff2'),
    url('../fonts/Urbanist-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Code Pro';
    src: url('../fonts/SourceCodePro-SemiBold.woff2') format('woff2'),
    url('../fonts/SourceCodePro-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --pe-body-font-family: Manrope;
    --pe-body-font-size: 15px;
    --pe-body-font-style: normal;
    --pe-body-font-weight: 400;
    --pe-body-line-height: 1.65;
    --pe-body-letter-spacing: 0.02em;
    --pe-paragraph-line-height-sm: 1.55;
    --pe-paragraph-line-height-lg: 1.65;
    --pe-font-family-heading: Urbanist;
    --pe-font-family-heading-secondary: Source Code Pro;
    --pe-heading-font-style: normal;
    --pe-font-size-xs: 11px;
    --pe-font-size-sm: 14px;
    --pe-font-size-md: 13px;
    --pe-font-size-lg: 16px;
    --pe-font-size-xl: 16px;
    --pe-h1-display-font-size: 60px;
    --pe-h1-font-size: 55px;
    --pe-h2-font-size: 38px;
    --pe-h3-font-size: 33px;
    --pe-h4-font-size: 24px;
    --pe-h5-font-size: 20px;
    --pe-h6-font-size: 15px;
    --pe-h1-display-font-size-md: 50px;
    --pe-h1-font-size-md: 42px;
    --pe-h2-font-size-md: 32px;
    --pe-h3-font-size-md: 28px;
    --pe-h4-font-size-md: 22px;
    --pe-h5-font-size-md: 19px;
    --pe-h6-font-size-md: 14px;
    --pe-h1-display-font-size-sm: 42px;
    --pe-h1-font-size-sm: 30px;
    --pe-h2-font-size-sm: 27px;
    --pe-h3-font-size-sm: 23px;
    --pe-h4-font-size-sm: 21px;
    --pe-h5-font-size-sm: 18px;
    --pe-h6-font-size-sm: 14px;
    --pe-h1-display-line-height-sm: 1.3;
    --pe-h1-line-height-sm: 1.3;
    --pe-h2-line-height-sm: 1.35;
    --pe-h3-line-height-sm: 1.35;
    --pe-h4-line-height-sm: 1.35;
    --pe-h5-line-height-sm: 1.5;
    --pe-h6-line-height-sm: 1.5;
    --pe-h1-display-line-height: 1.3;
    --pe-h1-line-height: 1.3;
    --pe-h2-line-height: 1.35;
    --pe-h3-line-height: 1.45;
    --pe-h4-line-height: 1.4;
    --pe-h5-line-height: 1.6;
    --pe-h6-line-height: 1.5;
    --pe-h1-display-letter-spacing: -0.02em;
    --pe-h1-letter-spacing: -0.01em;
    --pe-h2-letter-spacing: -0.01em;
    --pe-h3-letter-spacing: -0.33px;
    --pe-h4-letter-spacing: 0.02em;
    --pe-h5-letter-spacing: 0.03em;
    --pe-h6-letter-spacing: -0.02em;
    --pe-h1-display-font-weight: 500;
    --pe-h1-font-weight: 500;
    --pe-h2-font-weight: 500;
    --pe-h3-font-weight: 500;
    --pe-h4-font-weight: 600;
    --pe-h5-font-weight: 600;
    --pe-h6-font-weight: 600;
    --pe-h1-display-text-transform: none;
    --pe-h1-text-transform: none;
    --pe-h2-text-transform: none;
    --pe-h3-text-transform: none;
    --pe-h4-text-transform: capitalize;
    --pe-h5-text-transform: capitalize;
    --pe-h6-text-transform: none;
    --spacing: 5px;
    /*=============================================
=               Colors Root Var               =
=============================================*/
    --pe-body-bg: #f7f7f7;
    --pe-body-color: #141414;
    --pe-link-color: #FD5227;
    --pe-link-hover-color: #A9371A;
    --pe-color-primary: #FD5227;
    --pe-color-secondary: #89ADFF;
    --pe-color-carbon-black: #141414;
    --pe-color-cream-surface: #FDF6E3;
    --pe-color-seasalt: #F7F7F7;
    --pe-color-primary-100: #FFDCD4;
    --pe-color-primary-200: #FEC5B7;
    --pe-color-primary-300: #fea993;
    --pe-color-primary-400: #FE8C6F;
    --pe-color-primary-500: #FD6F4B;
    --pe-color-primary-600: #FD5227;
    --pe-color-primary-700: #D34421;
    --pe-color-primary-800: #A9371A;
    --pe-color-primary-900: #7F2914;
    --pe-color-primary-1000: #541B0D;
    --pe-color-primary-1100: #331008;
    --pe-color-secondary-100: #F3F7FF;
    --pe-color-secondary-200: #E7EFFF;
    --pe-color-secondary-300: #D8E4FF;
    --pe-color-secondary-400: #C4D6FF;
    --pe-color-secondary-500: #B0C8FF;
    --pe-color-secondary-600: #9DBBFF;
    --pe-color-secondary-700: #89ADFF;
    --pe-color-secondary-800: #7290D5;
    --pe-color-secondary-900: #5B73AA;
    --pe-color-secondary-1000: #455780;
    --pe-color-secondary-1100: #2E3A55;
    --pe-color-secondary-1200: #1B2333;
    --pe-color-white: #FFFFFF;
    --pe-color-gray-100: #E8E8E8;
    --pe-color-gray-200: #D0D0D0;
    --pe-color-gray-300: #B9B9B9;
    --pe-color-gray-400: #A1A1A1;
    --pe-color-gray-500: #8A8A8A;
    --pe-color-gray-600: #727272;
    --pe-color-gray-700: #5B5B5B;
    --pe-color-gray-800: #434343;
    --pe-color-gray-900: #2C2C2C;
    --pe-color-gray-1000: #141414;
    --pe-color-black: #141414;
    --pe-color-success: #198754;
    --pe-color-warning: #ffc107;
    --pe-color-danger: #dc3545;
    --pe-color-info: #17a2b8;
    /*=============================================
=               Button Root Var               =
=============================================*/
    --pe-btn-padding-x: 26px;
    --pe-btn-padding-y: 9px;
    --pe-btn-font-family: Manrope;
    --pe-btn-font-size: 15px;
    --pe-btn-font-weight: 700;
    --pe-btn-line-height: 1.7;
    --pe-btn-letter-spacing: 0.02em;
    --pe-btn-text-transform: capitalize;
    --pe-btn-color: transparent;
    --pe-btn-bg: transparent;
    --pe-btn-border-width: 1px;
    --pe-btn-border-color: transparent;
    --pe-btn-border-radius: 100px;
    --pe-btn-hover-border-color: transparent;
    --pe-x-padding-btn-sm: 26px;
    --pe-y-padding-btn-sm: 7px;
    --pe-font-size-btn-sm: 14px;
    --pe-border-radius-btn-sm: 100px;
    --pe-x-padding-btn-lg: 25px;
    --pe-y-padding-btn-lg: 12px;
    --pe-font-size-btn-lg: 15px;
    --pe-border-radius-btn-lg: 30px;
    --pe-primary-btn-color: #F7F7F7;
    --pe-primary-btn-bg: #331008;
    --pe-primary-btn-border-color: #FD5227;
    --pe-primary-btn-hover-color: #F7F7F7;
    --pe-primary-btn-hover-bg: #541B0D;
    --pe-primary-btn-hover-border-color: #FD5227;
    --pe-primary-btn-active-color: #F7F7F7;
    --pe-primary-btn-active-bg: #7F2914;
    --pe-primary-btn-active-border-color: #FD5227;
    --pe-primary-outline-color: #F7F7F7;
    --pe-primary-outline-bg: #141414;
    --pe-primary-outline-border-color: #F7F7F7;
    --pe-primary-outline-hover-color: #F7F7F7;
    --pe-primary-outline-hover-bg: #2C2C2C;
    --pe-primary-outline-hover-border-color: #F7F7F7;
    --pe-primary-outline-active-color: #F7F7F7;
    --pe-primary-outline-active-bg: #434343;
    --pe-primary-outline-active-border-color: #F7F7F7;
    --pe-secondary-btn-color: #141414;
    --pe-secondary-btn-bg: #FD6F4B;
    --pe-secondary-btn-border-color: #FD5227;
    --pe-secondary-btn-hover-color: #141414;
    --pe-secondary-btn-hover-bg: #FE8C6F;
    --pe-secondary-btn-hover-border-color: #FD5227;
    --pe-secondary-btn-active-color: #141414;
    --pe-secondary-btn-active-bg: #FEA893;
    --pe-secondary-btn-active-border-color: #FD5227;
    --pe-secondary-outline-color: #141414;
    --pe-secondary-outline-bg: #F7F7F7;
    --pe-secondary-outline-border-color: #141414;
    --pe-secondary-outline-hover-color: #141414;
    --pe-secondary-outline-hover-bg: #E8E8E8;
    --pe-secondary-outline-hover-border-color: #141414;
    --pe-secondary-outline-active-color: #141414;
    --pe-secondary-outline-active-bg: #D0D0D0;
    --pe-secondary-outline-active-border-color: #141414;
    /*=============================================
=               Link Root Var                 =
=============================================*/
    --pe-link-font-family: Manrope;
    --pe-link-font-size: 15px;
    --pe-link-font-weight: 600;
    --pe-link-line-height: 1.7;
    --pe-link-letter-spacing: 0.02em;
    --pe-link-text-transform: capitalize;
    --pe-link-primary-text-color: #F7F7F7;
    --pe-link-primary-border-color: #F7F7F7;
    --pe-link-hover-primary-text-color: #F7F7F7;
    --pe-link-hover-primary-border-color: #F7F7F7;
    --pe-link-secondary-text-color: #141414;
    --pe-link-secondary-border-color: #141414;
    --pe-link-hover-secondary-text-color: #141414;
    --pe-link-hover-secondary-border-color: #141414;
    /*=============================================
=               Badge Root Var                 =
=============================================*/
    --pe-badge-padding-x: 5px;
    --pe-badge-padding-y: 5px;
    --pe-badge-font-size: 13px;
    --pe-badge-font-weight: 600;
    --pe-badge-text-transform: uppercase;
    --pe-badge-line-height: 13px;
    --pe-badge-letter-spacing: 0.1em;
    --pe-badge-border-radius: 4px;
    --pe-new-badge-text-color: #2B2B2B;
    --pe-new-badge-bg-color: #F4E0E5;
    --pe-sale-badge-text-color: #2B2B2B;
    --pe-sale-badge-bg-color: #FDD16D;
    --pe-sold-badge-text-color: #2B2B2B;
    --pe-sold-badge-bg-color: #EAEAEA;
    --pe-best-seller-badge-text-color: #2B2B2B;
    --pe-best-seller-badge-bg-color: #FAAA63;
    /*=============================================
=               Form Root Var                 =
=============================================*/
    --pe-input-font-family: Manrope;
    --pe-input-font-weight: 400;
    --pe-input-font-size: 16px;
    --pe-input-line-height: 27px;
    --pe-input-x-padding: 0px;
    --pe-input-y-padding: 11px;
    --pe-input-text-color: #141414;
    --pe-input-border-color: #727272;
    --pe-input-border-width: 1px;
    --pe-input-border-radius: 0px;
    --pe-input-ph-text-color: #727272;
    --pe-input-bg-color: rgba(0, 0, 0, 0);
    --pe-input-focus-bg-color: rgba(0, 0, 0, 0);
    --pe-input-focus-border-color: #fd5227;
    --pe-floating-label-font-size: 16px;
    --pe-input-floating-label-color: #141414;
    --pe-input-focus-floating-label-color: #141414;
    --pe-floating-label-focus-font-size: 11px;
    --pe-floating-input-padding-top: 5px;
    --pe-floating-input-padding-bottom: 11px;
    --pe-floating-label-top-position: -20px;
    --pe-form-check-bg: rgba(0, 0, 0, 0);
    --pe-form-check-hover-bg: rgba(0, 0, 0, 0);
    --pe-form-check-active-bg: #fd5227;
    --pe-form-check-border-color: #141414;
    --pe-form-check-hover-border-color: #FD5227;
    --pe-form-check-width: 20px;
    --pe-form-check-height: 20px;
    --pe-form-check-border-radius: 4px;
    --pe-form-check-disabled-opacity: 0.5;
    --pe-section-spacing-mobile-xs: 25px;
    --pe-section-spacing-mobile-sm: 40px;
    --pe-section-spacing-mobile-md: 65px;
    --pe-section-spacing-ipad-xs: 40px;
    --pe-section-spacing-ipad-sm: 60px;
    --pe-section-spacing-ipad-md: 85px;
    --pe-section-spacing-desktop-xs: 40px;
    --pe-section-spacing-desktop-sm: 75px;
    --pe-section-spacing-desktop-md: 105px;
    --swiper-navigation-size: 45px;
    --swiper-navigation-border-size: 2px;
    --swiper-navigation-border-radius: 25px;
    --swiper-navigation-svg-size: 20px;
    --swiper-navigation-small-size: 35px;
    --swiper-navigation-small-border-size: 2px;
    --swiper-navigation-small-border-radius: 25px;
    --swiper-navigation-small-svg-size: 16px;
    --swiper-navigation-arrow-bg-color: #171717;
    --swiper-navigation-arrow-color: #FFFFFF;
    --swiper-navigation-arrow-border-color: #171717;
    --swiper-navigation-arrow-hover-bg-color: #4D4D50;
    --swiper-navigation-arrow-hover-color: #FFFFFF;
    --swiper-navigation-arrow-hover-border-color: #4D4D50;
    --swiper-navigation-secondary-arrow-bg-color: #FFFFFF;
    --swiper-navigation-secondary-arrow-color: #171717;
    --swiper-navigation-secondary-arrow-border-color: #FFFFFF;
    --swiper-navigation-secondary-arrow-hover-bg-color: #BCBCBD;
    --swiper-navigation-secondary-arrow-hover-color: #171717;
    --swiper-navigation-secondary-arrow-hover-border-color: #BCBCBD;
    --swiper-scrollbar-size: 3px;
    --swiper-scrollbar-border-radius: 10px;
    --swiper-scrollbar-primary-bg-color: #D6D6D6;
    --swiper-scrollbar-primary-drag-bg-color: #171717;
    --swiper-scrollbar-secondary-bg-color: #838383;
    --swiper-scrollbar-secondary-drag-bg-color: #FFFFFF;
    --swiper-pagination-size: 10px;
    --swiper-pagination-border-radius: 5px;
    --swiper-pagination-border-width: 0px;
    --swiper-pagination-light-border-color: #FFFFFF;
    --swiper-pagination-light-active-color: #FFFFFF;
    --swiper-pagination-light-inactive-color: #6E6E6E;
    --swiper-pagination-dark-border-color: #171717;
    --swiper-pagination-dark-active-color: #171717;
    --swiper-pagination-dark-inactive-color: #6E6E6E;
}

:root {
    --pe-container-x-padding: 20px;
    --pe-container-width: 1440px;
}

@media (min-width: 1200px) {
    :root {
        --pe-container-x-padding: 40px;
    }
}

@media (min-width: 1921px) {
    :root {
        --pe-container-x-padding: 80px;
    }
}

@media (min-width: 2560px) {
    :root {
        --pe-container-x-padding: 120px;
        /* --pe-container-width: 1440px; */
    }
}

@media only screen and (min-width: 992px) {
    :root {
        --pe-body-font-size: 16px;
        --pe-body-line-height: 1.7;
        --pe-paragraph-line-height-sm: 1.6;
        --pe-paragraph-line-height-lg: 1.6;
        --pe-font-size-xs: 12px;
        --pe-font-size-sm: 15px;
        --pe-font-size-md: 14px;
        --pe-font-size-lg: 18px;
        --pe-font-size-xl: 17px;
        --pe-btn-padding-x: 34px;
        --pe-btn-padding-y: 11px;
        --pe-btn-font-size: 16px;
        --pe-btn-border-radius: 100px;
        --pe-x-padding-btn-sm: 29px;
        --pe-y-padding-btn-sm: 8px;
        --pe-font-size-btn-sm: 15px;
        --pe-border-radius-btn-sm: 100px;
        --pe-x-padding-btn-lg: 30px;
        --pe-y-padding-btn-lg: 14px;
        --pe-font-size-btn-lg: 16px;
        --pe-border-radius-btn-lg: 30px;
        --pe-link-font-size: 16px;
        --pe-badge-padding-x: 5px;
        --pe-badge-padding-y: 5px;
        --pe-badge-font-size: 13px;
    }
}

*,
*::before,
*::after {
    /* outline: none; */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    font-family: var(--pe-body-font-family);
    font-size: var(--pe-body-font-size);
    font-weight: var(--pe-body-font-weight);
    font-style: var(--pe-body-font-style);
    line-height: var(--pe-body-line-height);
    letter-spacing: var(--pe-body-letter-spacing);
    color: var(--pe-body-color);
    background-color: var(--pe-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}