/**
Theme Name: Xbyteio-child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xbyteio-child
Template: astra
*/

/* Light - 300 */
@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Regular - 400 */
@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Medium - 500 */
@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-MediumItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* SemiBold - 600 */
@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-SemiBoldItalic.ttf") format("truetype");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Bold - 700 */
@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ExtraBold - 800 */
@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-ExtraBoldItalic.ttf") format("truetype");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* Black - 900 */
@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-BlackItalic.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* <!-- ***** Font Families ***** --> */
    --xbyte-font-red-hat: "Red Hat Display";
    --xbyte-font-primary: var(--xbyte-font-red-hat);
    --swiper-theme-color: #ffffff !important;

    /* <!-- ***** Font Weights ***** --> */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-xbold: 800;
    --xbyte-font-regular: 400;
    --xbyte-font-medium: 500;
    --xbyte-font-semibold: 600;
    --xbyte-font-bold: 700;
    --xbyte-font-extrabold: 800;

    /* <!-- ***** Font Styles ***** --> */
    --xbyte-font-style-normal: normal;
    --xbyte-font-style-italic: italic;
    --xbyte-font-style-oblique: oblique;

    /* <!-- ***** Responsive Font Sizes ***** --> */
    --fs-14: 14px;
    --fs-12: 12px;
    --fs-120: 100px;
    --fs-h1: clamp(2.5rem, 5vw, 56px); /* 40px → 56px */
    --fs-h2: clamp(2rem, 4vw, 42px); /* 32px → 48px */
    --fs-h3: clamp(1.5rem, 3vw, 32px); /* 24px → 32px */
    --fs-h4: clamp(1.25rem, 2.5vw, 24px); /* 20px → 24px */
    --fs-h5: clamp(1.125rem, 2vw, 20px); /* 18px → 20px */
    --fs-h6: clamp(1rem, 1.5vw, 16px); /* 16px */
    --fs-body: clamp(1rem, 1.2vw, 16px); /* 16px → 18px */
    --fs-small: clamp(.875rem, 1vw, 14px); /* 14px → 15px */
    --fs-medium: clamp(1rem, 1.5vw, 18px); /* 16px → 18px */
    --fs-large: clamp(2rem, 4vw, 48px); /* 32px → 48px */
    --fs-40: clamp(28px, 3.5vw, 40px);
    --xbyte-font-120: clamp(56px, calc(37.71px + 5.71vw), 120px);
    --xbyte-font-56: clamp(36px, calc(30.29px + 1.79vw), 56px);
    --xbyte-font-48: clamp(32px, calc(27.43px + 1.43vw), 48px);
    --xbyte-font-48: clamp(30px, calc(24.86px + 1.61vw), 48px);
    --xbyte-font-40: clamp(28px, calc(25.71px + 0.71vw), 40px);
    --xbyte-font-32: clamp(24px, calc(21.71px + 0.71vw), 32px);
    --xbyte-font-24: clamp(20px, calc(18.86px + 0.36vw), 24px);
    --xbyte-font-20: clamp(18px, calc(17.43px + 0.18vw), 20px);
    --xbyte-font-18: clamp(16px, calc(15.43px + 0.18vw), 18px);
    --xbyte-font-16: clamp(15px, calc(14.71px + 0.09vw), 16px);
    --xbyte-font-14: clamp(13px, calc(12.71px + 0.09vw), 14px);
    --xbyte-font-12: 12px;

    /* <!-- ***** Line Heights ***** --> */
    --lh-h1: 1.12;
    --lh-h2: 1.2;
    --lh-h3: 1.25;
    --lh-h4: 1.35;
    --lh-h5: 1.4;
    --lh-h6: 1.45;
    --lh-body: 1.7;
    --lh-main: clamp(24px, calc(22.857px + 0.357vw), 28px);
    --lh-ex: clamp(44px, calc(34.857px + 2.857vw), 76px);
    --lh-ex1: clamp(28px, calc(26.857px + 0.357vw), 32px);
    --lh-ex22: clamp(20px, calc(19.314px + 0.214vw), 22.4px);
    --lh-ex3: clamp(22px, calc(21.086px + 0.286vw), 25.2px);
    --lh-ex4: clamp(32px, calc(29.143px + 0.893vw), 42px);
    --lh-ex5: clamp(44px, calc(38.286px + 1.786vw), 64px);
    --lh-h3-32: clamp(28px, calc(26.857px + 0.357vw), 32px);
    --lh-h2-76: clamp(44px, calc(34.857px + 2.857vw), 76px);
    --lh-h2-19: clamp(18px, calc(17.543px + 0.143vw), 19.6px);
    --lh-24: clamp(22px, calc(21.429px + 0.179vw), 24px);
    --lh-16: clamp(16px, calc(15.771px + 0.071vw), 16.8px);
    --lh-100: 100%;
    --lh-ex: clamp(48px, 6vw, 76px);
    --lh-ex1: clamp(24px, 3vw, 32px);
    --lh-ex22: clamp(22px, 2vw, 22.4px);
    --lh-ex3: clamp(24px, 2vw, 25.2px);
    --lh-ex4: clamp(32px, 4vw, 42px);
    --lh-ex5: clamp(42px, 5vw, 64px);
    --lh-36: clamp(28px, 4vw, 36px);
    --lh-34: clamp(28px, 3vw, 34px);
    --lh-54: clamp(40px, 5vw, 54px);
    --xbyte-line-76: clamp(52px, calc(45.14px + 2.143vw), 76px);
    --xbyte-line-64: clamp(46px, calc(40.86px + 1.607vw), 64px);
    --xbyte-line-54: clamp(40px, calc(36px + 1.25vw), 54px);
    --xbyte-line-50: clamp(38px, calc(34.57px + 1.071vw), 50px);
    --xbyte-line-42: clamp(34px, calc(31.71px + 0.714vw), 42px);
    --xbyte-line-36: clamp(30px, calc(28.29px + 0.536vw), 36px);
    --xbyte-line-34: clamp(28px, calc(26.29px + 0.536vw), 34px);
    --xbyte-line-32: clamp(27px, calc(25.57px + 0.446vw), 32px);
    --xbyte-line-28: clamp(24px, calc(22.86px + 0.357vw), 28px);
    --xbyte-line-25: clamp(22px, calc(21.09px + 0.286vw), 25.2px);
    --xbyte-line-24: clamp(21px, calc(20.14px + 0.268vw), 24px);
    --xbyte-line-21: clamp(19px, calc(18.43px + 0.179vw), 21px);
    --xbyte-line-22: clamp(20px, calc(19.31px + 0.214vw), 22.4px);
    --xbyte-line-20: clamp(18px, calc(17.43px + 0.179vw), 20px);
    --xbyte-line-19: clamp(18px, calc(17.54px + 0.143vw), 19.6px);
    --xbyte-line-16: clamp(16px, calc(15.77px + 0.071vw), 16.8px);
    --xbyte-line-67-2: 67.2px;
    --xbyte-line-44: 44px;
    --xbyte-line-16: 16px;
    --xbyte-line-26: 26px;
    --xbyte-line-11: 11px;
    --xbyte-line-100: 1;
    --xbyte-line-tight: 1.1;
    --xbyte-line-heading: 1.2;
    --xbyte-line-normal: 1.4;
    --xbyte-line-body: 1.6;

    /* <!-- ***** Letter Spacing ***** --> */
    --ls-h1: -1.2px;
    --ls-h2: -0.8px;
    --ls-h3: -0.4px;
    --ls-h4: -0.2px;
    --ls-body: 0px;
    --ls-small: 0.2px;
    --normal: 8%;
    --medium: 15%;
    --xbyte-letter-normal: 0;
    --xbyte-letter-4: 0.04em;
    --xbyte-letter-wide: 0.08em;
    --xbyte-letter-extra-wide: 0.24em;
    --xbyte-letter-12: 0.12em;
    --xbyte-letter-0: 0;
    --xbyte-letter-0: 0;
    --xbyte-letter-4: 0.04em;
    --xbyte-letter-8: 0.08em;
    --xbyte-letter-12: 0.12em;
    --xbyte-letter-24: 0.24em;
    --xbyte-letter-04: 0.4%;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: clamp(16px, 2vw, 20px);
    --space-24: clamp(20px, 2vw, 24px);
    --space-32: clamp(24px, 3vw, 32px);
    --space-40: clamp(28px, 4vw, 40px);
    --space-48: clamp(32px, 5vw, 48px);
    --space-64: clamp(40px, 6vw, 64px);
    --space-80: clamp(50px, 8vw, 80px);

    /* <!-- ***** Colors ***** --> */
    --color-brand-red: #E22633;
    --color-primary-black: #070808;
    --color-dark-maroon: #5E181D;
    --color-white: #FFFFFF;
    --color-off-white: #FAFAFA;
    --color-light-grey: #E8E5EA;
    --color-medium-grey: #8D9193;
    --h1-white: #ffffff;
    --dark1: #1D1D1D;
    --red1: #E61F2D;
    --gray1: #808080;
    --h3-clr: #ffffff;
    --p: #4F4F4F;
    --p-small: #BDBDBD;
    --p-dark: #4F4F4F;
    --clr: #333333;
    --clr1: #1F1C1D;
    --clr2: #282828;
    --clr3: #828282;
    --clr4: #E0E0E0;
    --xbyte-color-black: #000000;
    --xbyte-color-white: #FFFFFF;
    --xbyte-color-primary: #E61F2D;
    --xbyte-color-light-grey: #BDBDBD;
    --xbyte-color-dark-grey: #333333;
    --xbyte-color-grey-2: #828282;
    --xbyte-color-dark: #1D1D1D;
    --xbyte-color-grey-3: #4F4F4F;
    --xbyte-color-dark-2: #1F1C1D;
    --xbyte-color-grey: #808080;
    --xbyte-color-text: #484343;
    --xbyte-color-heading: #282828;
    --xbyte-color-gray: #333333;
    --xbyte-color-light-gray: #BDBDBD;
    --xbyte-color-gray-600: #4F4F4F;
    --xbyte-color-dark-900: #1F1C1D;
    --xbyte-color-gray-500: #808080;
    --xbyte-color-charcoal: #484343;
    --xbyte-color-charcoal-dark: #282828;
    --xbyte-color-gray-200: #E0E0E0;
    --xbyte-color-gray-400: #828282;
    --xbyte-color-charcoal-1: #3B4040;
    --xbyte-color-light: #E2E2E2;
    --xbyte-color-dark-green: #1B1C1A;
    --xbyte-color-slate: #424656;

    /* <!-- ***** Semantic ***** --> */
    --color-heading: var(--color-primary-black);
    --color-text: var(--color-medium-grey);
    --color-border: var(--color-light-grey);
    --color-background: var(--color-white);
    --color-section: var(--color-off-white);
    --color-primary: var(--color-brand-red);

    /* <!-- ***** Additional Colors ***** --> */
    --xbyte-color-text-dark: #3B4040;
    --xbyte-color-border: #E2E2E2;
    --xbyte-color-heading-dark: #1B1C1A;
    --xbyte-color-secondary: #424656;
    --xbyte-color-dark-3: #202020;
    --xbyte-color-grey-light-2: #E0E0E0;
    --xbyte-color-white-transparent: #FFFFFF1A;
    --xbyte-color-white-solid: #FFFFFF;
    --xbyte-color-border-light: #EEEFEE;
    --xbyte-color-border-transparent: #EEEFEE5C;
    --xbyte-color-border-grey: #BDBDBD;
    --xbyte-color-border-grey-light: #F6F6F6;
    --xbyte-color-off-white: #F5F5F5;
    --xbyte-color-bg-light: #FBFBFB;
    --xbyte-color-grey-light: #E0E0E0;

    /* <!-- ***** Text Alignment ***** --> */
    --xbyte-text-left: left;
    --xbyte-text-center: center;
    --xbyte-text-right: right;
    --xbyte-text-justify: justify;

    /* <!-- ***** Vertical Alignment ***** --> */
    --xbyte-vertical-top: top;
    --xbyte-vertical-middle: middle;
    --xbyte-vertical-bottom: bottom;

    /* <!-- *****  Text Transform ***** --> */
    --xbyte-text-normal: none;
    --xbyte-text-uppercase: uppercase;
    --xbyte-text-lowercase: lowercase;
    --xbyte-text-capitalize: capitalize;

    /* <!-- ***** Gradients ***** --> */
    --xbyte-gradient-white-fade: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 82.22%);
    --xbyte-gradient-black-fade: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 50%, rgba(0, 0, 0, 0) 100%);
    --xbyte-gradient-dark: linear-gradient(180deg, #202020 0%, rgba(17, 17, 17, 0.0666667) 100%);
    --xbyte-gradient-red-border: linear-gradient(90deg, #E61F2D 0%, rgba(0, 0, 0, 0) 100%);
    --xbyte-color-radial-dark: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.48) 100%);

    /* <!-- ***** Border ***** --> */
    --border-color: #f5f5f5;
    --border-color-2: #eaeaea;
    --text-muted: #777;
    --bg-tag: #f8f9fa;
    --accent-glow: rgba(255, 59, 48, 0.08);
    --bg-light-gray: #f5f5f5;
    --logo-text-color: #555555;
    --bg-dark: #0b0c10;
    --text-color: #cccccc;
    --accent-red: #c026d3;
    --timeline-line: rgba(255, 255, 255, 0.15);
    --red-dot: #E62533;
    --color-txt: hsl(236 35% 14%);
    --color-hover-txt: #000000;
    --color-shaded: hsla(0, 1%, 37%, 0.4);
    --xbyte-border-width-1: 1px;
    --xbyte-border-width-2: 2px;
    --xbyte-border-width-custom: 1.38px;
    --xbyte-border-solid: solid;

    /* <!-- ***** Border Radius ***** --> */
    --radius-sm: 4px;
    --radius-md: clamp(6px, 1vw, 8px);
    --radius-lg: clamp(8px, 2vw, 12px);
    --radius-xl: clamp(12px, 3vw, 20px);

    /* <!-- ***** Shadow ***** --> */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .12);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .18);

    /* <!-- ***** Spacing Top & Bottom ***** --> */
    --top: clamp(50px, 6vw, 80px);
    --bottom: clamp(50px, 6vw, 80px);
    --left: clamp(16px, 4vw, 35px);
    --right: clamp(16px, 4vw, 35px);
    --top1: 80px;
    --bottom1: 80px;

    /* <!-- ***** Transition ***** --> */
    --transition: all .3s ease;
    --xbyte-line-item-spacing-s-plus: normal;
    --xbyte-letter-minus-168: -1.68px;

    /* <!-- ***** font-size-15, font-size-52.9 ,Line Heights :- 100% , 16px , 19 , 26 , 44 ***** --> */
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--xbyte-font-primary) !important;
    background-color: #ffffff !important;
}


/* <!-- ***** Comman class Name Root Start ***** --> */

/* 20px / Medium */
.typo-body-md-medium {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 20px / Regular */
.typo-body-md-regular {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 56px / Medium */
.typo-display-xl-medium {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
    text-transform: uppercase;
}

/* 56px / Bold / Primary */
.typo-display-xl-bold-primary {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
    text-transform: uppercase;
}

/* 24px / SemiBold */
.typo-heading-lg-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-32);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 16px / Regular */
.typo-body-sm-regular {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-light-gray);
}

/* 18px / Medium */
.typo-body-base-medium {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 48px / Bold */
.typo-display-lg-bold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* Google Sans Flex / 20px */
.typo-label-uppercase {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
    text-transform: uppercase;
}

/* 48px / Bold / 76px Line Height */
.typo-display-lg-bold-tall {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 20px / SemiBold */
.typo-body-md-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
    text-align: justify;
}

/* 20px / SemiBold / Gray */
.typo-body-md-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
    text-align: justify;
}

/* 20px / Medium / Gray */
.typo-body-md-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 20px / Medium / Dark */
.typo-body-md-medium-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark-900);
}

/* 56px / Bold / Black */
.typo-display-xl-bold-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 20px / Medium / Uppercase */
.typo-label-md-uppercase {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
    text-transform: uppercase;
}

/* 48px / Medium / Uppercase */
.typo-display-lg-medium-uppercase {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-8);
    color: var(--xbyte-color-white);
    text-transform: uppercase;
}

/* 48px / Bold / Primary */
.typo-display-lg-bold-primary {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
    text-transform: uppercase;
}

/* 16px / Bold */
.typo-body-sm-bold-muted {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-light-gray);
}

/* 32px / SemiBold */
.typo-heading-xl-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-32);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-42);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 20px / SemiBold / Muted */
.typo-body-md-semibold-muted {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-light-gray);
}

/* 48px / Medium / Dark / Uppercase */
.typo-display-lg-medium-dark-uppercase {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-8);
    color: var(--xbyte-color-dark);
    text-transform: uppercase;
}

/* 48px / Bold / Gray */
.typo-display-lg-bold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-500);
    text-transform: uppercase;
}

/* 24px / SemiBold / Dark */
.typo-heading-lg-semibold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-32);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 16px / Regular / Gray */
.typo-body-sm-regular-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 56px / Bold / White */
.typo-display-xl-bold-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 48px / ExtraBold */
.typo-display-lg-extrabold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: 800;
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 18px / Medium / Dark */
.typo-body-base-medium-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 24px / SemiBold / Center / Uppercase */
.typo-heading-lg-uppercase-center {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 28px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-charcoal);
    text-align: center;
    text-transform: uppercase;
}

/* 24px / SemiBold / Center */
.typo-heading-lg-center {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 28px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-charcoal);
    text-align: center;
}

/* 16px / Regular / White */
.typo-body-sm-regular-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 14px / Regular / Right */
.typo-body-xs-regular-right {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
    text-align: right;
}

/* 24px / SemiBold / Right */
.typo-heading-lg-semibold-right {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-32);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
    text-align: right;
}

/* 32px / SemiBold */
.typo-heading-xl-semibold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-32);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-42);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 20px / Regular / Gray */
.typo-body-md-regular-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 20px / SemiBold / Center */
.typo-body-md-semibold-center {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
    text-align: center;
}

/* 18px / SemiBold */
.typo-body-base-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 12px / Regular */
.typo-caption-regular {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-12);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-16);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 20px / Medium / Gray */
.typo-body-md-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 20px / Medium / Dark */
.typo-body-md-medium-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 14px / Regular */
.typo-body-xs-regular {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 18px / Medium / Charcoal */
.typo-body-base-medium-charcoal {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-charcoal-dark);
}

/* 56px / ExtraBold / Uppercase */
.typo-display-xl-extrabold-uppercase {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    text-transform: uppercase;
}

/* 20px / Regular / Gray */
.typo-body-md-regular-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 24px / SemiBold / White */
.typo-heading-lg-semibold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 36px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 24px / SemiBold / Dark */
.typo-heading-lg-semibold-dark-lg {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 34px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 48px / ExtraBold / White */
.typo-display-lg-extrabold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 24px / SemiBold / Light Gray */
.typo-heading-lg-semibold-muted {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 34px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 20px / Bold / Uppercase */
.typo-label-bold-uppercase {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-8);
    color: var(--xbyte-color-black);
    text-transform: uppercase;
}

/* 40px / SemiBold */
.typo-heading-xxl-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-40);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-54);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 18px / Medium / Justify */
.typo-body-base-medium-justify {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
    text-align: justify;
}

/* 20px / SemiBold / Gray */
.typo-body-md-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-400);
}

/* 18px / Medium / Gray */
.typo-body-base-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 40px / SemiBold / Dark */
.typo-heading-xxl-semibold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-40);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-54);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 20px / SemiBold / Gray */
.typo-body-md-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 48px / Bold / White / Uppercase */
.typo-display-lg-bold-uppercase-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
    text-transform: uppercase;
}

/* 20px / SemiBold / White / Uppercase */
.typo-label-md-semibold-uppercase-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-12);
    color: var(--xbyte-color-white);
    text-transform: uppercase;
}

/* 20px / SemiBold / Light Gray / Uppercase */
.typo-label-md-semibold-uppercase-muted {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-12);
    color: var(--xbyte-color-light-gray);
    text-transform: uppercase;
}

/* 24px / SemiBold / White */
.typo-heading-lg-semibold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 34px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 18px / Medium / Light Gray */
.typo-body-base-medium-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 18px / Regular / Right */
.typo-body-base-regular-right {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
    text-align: right;
}

/* 24px / SemiBold / Center / Dark */
.typo-heading-lg-semibold-center-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 34px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
    text-align: center;
}

/* 16px / Regular / Center */
.typo-body-sm-regular-center {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
    text-align: center;
}

/* 18px / Regular / Gray */
.typo-body-base-regular-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 40px / SemiBold / Center / White */
.typo-heading-xxl-semibold-center-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-40);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-54);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
    text-align: center;
}

/* 16px / Regular / Center / Light Gray */
.typo-body-sm-regular-center-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
    text-align: center;
}

/* 20px / Medium / Black */
.typo-body-md-medium-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 56px / ExtraBold / Uppercase / Black */
.typo-display-xl-extrabold-uppercase-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
    text-transform: uppercase;
}

/* 24px / SemiBold / Gray */
.typo-heading-lg-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 34px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 24px / SemiBold / Black */
.typo-heading-lg-semibold-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 34px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 16px / Regular / Gray */
.typo-body-sm-regular-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 18px / Medium / Center / Dark */
.typo-body-base-medium-center-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
    text-align: center;
}

/* 20px / Bold / Uppercase / White */
.typo-label-bold-uppercase-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-8);
    color: var(--xbyte-color-white);
    text-transform: uppercase;
}

/* 16px / Regular / Light */
.typo-body-sm-regular-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 56px / ExtraBold / Dark / Uppercase */
.typo-display-xl-extrabold-uppercase-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
    text-transform: uppercase;
}

/* 24px / SemiBold / Charcoal */
.typo-heading-lg-semibold-charcoal {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 34px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-charcoal-dark);
}

/* 18px / Regular / Light */
.typo-body-base-regular-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 40px / SemiBold / Black */
.typo-heading-xxl-semibold-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-40);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-54);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 18px / Medium / Black */
.typo-body-base-medium-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 16px / Bold / White */
.typo-body-sm-bold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 14px / Regular / Gray */
.typo-body-xs-regular-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-400);
}

/* 56px / ExtraBold / White */
.typo-display-xl-extrabold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 20px / SemiBold / Light */
.typo-body-md-semibold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 14px / Bold / Light */
.typo-body-xs-bold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 14px / Regular / Light */
.typo-body-xs-regular-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 48px / SemiBold / Dark / Sora */
.typo-display-lg-semibold-dark-sora {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 24px / Medium / Dark / Sora */
.typo-heading-lg-medium-dark-sora {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-32);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 16px / Regular / Google Sans Flex */
.typo-body-sm-regular-google {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 56px / Bold / White */
.typo-display-xl-bold-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 20px / Medium / Light */
.typo-body-md-medium-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 20px / Medium / White */
.typo-body-md-medium-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 14px / Medium / White */
.typo-body-xs-medium-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-4);
    color: var(--xbyte-color-white);
}

/* 40px / SemiBold / White */
.typo-heading-xxl-semibold-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-40);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-54);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 18px / Medium / Justify / Light */
.typo-body-base-medium-justify-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
    text-align: justify;
}

/* 20px / Regular / Light */
.typo-body-md-regular-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 16px / SemiBold / Right / Gray */
.typo-body-sm-semibold-right-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-400);
    text-align: right;
}

/* 14px / Regular / Space Mono */
.typo-code-sm-regular-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-20);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 48px / Medium / Center / Uppercase / Black */
.typo-display-lg-medium-center-uppercase-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-8);
    color: var(--xbyte-color-black);
    text-align: center;
    text-transform: uppercase;
}

/* 48px / Bold / Center / Uppercase / Red */
.typo-display-lg-bold-center-uppercase-red {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
    text-align: center;
    text-transform: uppercase;
}

/* 48px / ExtraBold / Center / Uppercase / Red */
.typo-display-lg-extrabold-center-uppercase-red {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-24);
    color: var(--xbyte-color-primary);
    text-align: center;
    text-transform: uppercase;
}

/* 18px / Regular / Gray */
.typo-body-base-regular-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 48px / ExtraBold / Center / Uppercase / Gray */
.typo-display-lg-extrabold-center-uppercase-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-24);
    color: var(--xbyte-color-gray);
    text-align: center;
    text-transform: uppercase;
}

/* 18px / Medium / Center / Dark */
.typo-body-base-medium-center-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark-alt);
    text-align: center;
}

/* 18px / Medium / Center / White */
.typo-body-base-medium-center-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
    text-align: center;
}

/* 18px / Medium / Gray */
.typo-body-base-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-400);
}

/* 18px / Medium / Charcoal */
.typo-body-base-medium-charcoal {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-charcoal);
}

/* 18px / Regular / Center / Light */
.typo-body-base-regular-center-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-light);
    text-align: center;
}

/* 56px / Bold / Center / White */
.typo-display-xl-bold-center-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
    text-align: center;
}

/* 20px / Medium / Center / Light */
.typo-body-md-medium-center-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-light);
    text-align: center;
}

/* 16px / Regular / Gray */
.typo-body-sm-regular-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-400);
}

/* 15px / SemiBold / Red */
.typo-label-sm-semibold-red {
    font-family: var(--xbyte-font-red-hat);
    font-size: 15px;
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-item-spacing-s-plus);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
}

/* 15px / SemiBold / Gray */
.typo-label-sm-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: 15px;
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-item-spacing-s-plus);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 20px / SemiBold / Dark */
.typo-body-md-semibold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 14px / Medium / Dark Green */
.typo-body-xs-medium-dark-green {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: 100%;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark-green);
}

/* 16px / Bold / White */
.typo-body-sm-bold-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 100%;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 12px / Medium / Black */
.typo-caption-md-medium-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-12);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 24px / Bold / Dark */
.typo-heading-md-bold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 18px / Medium / Gray */
.typo-body-base-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-20);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 24px / SemiBold / Center / White */
.typo-heading-lg-semibold-center-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-34);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
    text-align: center;
}

/* 18px / Bold / Dark */
.typo-body-base-bold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 16px / Medium / Gray */
.typo-body-sm-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-20);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 16px / SemiBold / Red */
.typo-body-sm-semibold-red {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
}

/* 14px / Bold / Red */
.typo-body-xs-bold-red {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
}

/* 48px / Bold / Dark */
.typo-display-lg-bold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 16px / Medium / Gray / 100% */
.typo-body-sm-medium-gray-tight {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: 100%;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 20px / SemiBold / Dark Green */
.typo-body-md-semibold-dark-green {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark-green);
}

/* 16px / Medium / Black */
.typo-body-sm-medium-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 16px / Medium / Gray */
.typo-body-sm-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 24px / SemiBold / Gray */
.typo-heading-lg-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-34);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-400);
}

/* 16px / SemiBold / White */
.typo-body-sm-semibold-white-tight {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 100%;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 18px / Regular / Gray */
.typo-body-base-regular-gray-middle {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 48px / Bold / Dark */
.typo-display-lg-bold-dark-middle {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 18px / Medium / Center / Gray */
.typo-body-base-medium-center-gray-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
    text-align: center;
}

/* 20px / SemiBold / White */
.typo-body-md-semibold-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 20px / SemiBold / White Compact */
.typo-body-md-semibold-white-compact {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 18px / Medium / Primary */
.typo-body-base-medium-primary {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
}

/* 14px / Regular / Dark */
.typo-body-xs-regular-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 18px / Italic / Slate */
.typo-body-base-italic-slate {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-regular);
    font-style: italic;
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-04);
    color: var(--xbyte-color-slate);
}

/* 16px / Medium / Dark */
.typo-body-sm-medium-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 16px / Medium / Dark Green */
.typo-body-sm-medium-dark-green {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: 100%;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark-green);
}

/* 15px / SemiBold / Black */
.typo-label-sm-semibold-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: 15px;
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-item-spacing-s-plus);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 14px / Bold / Primary */
.typo-body-xs-bold-primary {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
}

/* 52.9px / SemiBold / Custom */
.typo-display-custom-semibold-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: 52.9px;
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-67-2);
    letter-spacing: var(--xbyte-letter-minus-168);
    color: var(--xbyte-color-black);
}

/* 18px / Medium / Gray */
.typo-body-base-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 14px / SemiBold / Uppercase */
.typo-label-xs-semibold-uppercase-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-4);
    color: var(--xbyte-color-gray);
    text-transform: uppercase;
}

/* 32px / SemiBold / Black */
.typo-heading-xl-semibold-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-32);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-44);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 16px / SemiBold / Black */
.typo-body-sm-semibold-black-tight {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-16);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 16px / Regular / Gray */
.typo-body-sm-regular-gray-tight {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-16);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 16px / SemiBold / Gray */
.typo-body-sm-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 32px / SemiBold / Black */
.typo-heading-xl-semibold-black-alt {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-32);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-42);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 14px / SemiBold / Gray */
.typo-body-xs-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-20);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 18px / SemiBold / Black */
.typo-body-base-semibold-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-26);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 14px / Regular / Gray */
.typo-body-xs-regular-gray-middle {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 14px / SemiBold / Black */
.typo-body-xs-semibold-black-small {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-11);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 14px / Regular / Gray */
.typo-body-xs-regular-gray-small {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-11);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* <!-- ***** Comman class Name Root End ***** --> */

.site-content .ast-container {
    display: unset !important;
}

.section-80p {
    padding-top: var(--top1);
    padding-bottom: var(--bottom1);
}

.section-padding {
    padding-top: var(--top);
    padding-bottom: var(--bottom);
    padding-right: var(--left);
    padding-left: var(--right);
}

.section-padding1 {
    padding-top: var(--top);
    padding-bottom: var(--bottom);
    padding-left: var(--left);
    padding-right: var(--right);
}

ol,
ul {
    margin: 0;
}

h1 {
    color: var(--h1-white) !important;
    font-size: var(--fs-h1) !important;
    line-height: var(--lh-ex) !important;
    font-weight: var(--fw-medium) !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0;
    max-width: 850px
}

h1 div {
    color: #e61f2d;
    font-weight: var(--fw-bold);

}

h2 {
    text-transform: uppercase;
    color: var(--h1-white);
    text-align: left;
    font-family: var(--xbyte-font-primary);
    font-size: var(--fs-large);
    line-height: var(--lh-ex5);
    font-weight: var(--fw-medium);
    position: relative;
    flex: 1;
    letter-spacing: var(--normal);
    align-items: center;
    justify-content: center;
}

h2 div {
    letter-spacing: var(--medium) !important;
    text-transform: uppercase;
    font-size: var(--fs-large) !important;
    line-height: var(--lh-ex5) !important;
    font-weight: var(--fw-bold) !important;
    color: var(--red1) !important;
}

.h2-sub {
    letter-spacing: var(--medium);
    color: var(--h1-white);
    font-size: var(--fs-h1) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-h2-76) !important;
}

.h2-extra {
    font-size: var(--fs-large) !important;
    line-height: var(--lh-ex5) !important;
    font-weight: var(--fw-bold) !important;
    color: var(--clr) !important;
}

.h2-800 {
    font-size: var(--fs-h1) !important;
    line-height: var(--lh-ex) !important;
    font-weight: var(--fw-xbold) !important;
    color: var(--dark1) !important;
    letter-spacing: 0px;
}

.title-t {
    /* letter-spacing: var(--normal); */
    color: var(--dark1);
    text-align: left;
    font-family: var(--xbyte-font-primary);
    font-size: var(--fs-large) !important;
    line-height: var(--lh-ex5) !important;
    font-weight: var(--fw-medium) !important;
    position: relative;
    flex: 1;
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

.title-t div {
    font-size: var(--fs-large);
    line-height: var(--lh-ex5);
    font-weight: var(--fw-bold);
    color: var(--gray1) !important;
}

.t-sub {
    font-size: var(--fs-h5) !important;
    line-height: var(--lh-main) !important;
    font-weight: var(--fw-bold) !important;
    color: var(--xbyte-color-black) !important;
}


h3 {
    color: var(--h3-clr);
    line-height: var(--lh-ex4);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    margin: 0;
    transition: transform .3s ease
}

.h3-dark {
    color: var(--dark1) !important;
    line-height: var(--lh-ex4) !important;
    font-size: var(--fs-h3) !important;
    font-weight: var(--fw-semibold) !important;
    margin: 0;
    transition: transform .3s ease
}

.h3-small {
    color: var(--dark1) !important;
    line-height: var(--lh-h3-32) !important;
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-semibold) !important;
    margin: 0;
    transition: transform .3s ease
}

.h3-small-light {
    color: var(--h3-clr) !important;
    line-height: var(--lh-h3-32) !important;
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-semibold) !important;
    margin: 0;
    transition: transform .3s ease
}

.h3-small-dark {
    color: var(--dark1) !important;
    line-height: var(--lh-h3-32) !important;
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-semibold) !important;
    margin: 0;
    transition: transform .3s ease
}

.h3-42 {
    color: var(--dark1) !important;
    line-height: var(--lh-ex4) !important;
    font-size: var(--fs-h3) !important;
    font-weight: var(--fw-semibold) !important;
}

.h3-fw-600 {
    color: var(--dark1) !important;
    line-height: var(--lh-54) !important;
    font-size: var(--fs-40) !important;
    font-weight: var(--fw-semibold) !important;
}

.h3-cta-600 {
    color: var(--color-white) !important;
    line-height: var(--lh-54) !important;
    font-size: var(--fs-40) !important;
    font-weight: var(--fw-semibold) !important;
}

.h3-clr28 {
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-34) !important;
    color: var(--clr2) !important;
}

.h4-large {
    font-size: var(--fs-large) !important;
    line-height: var(--lh-ex5) !important;
    font-weight: var(--fw-xbold) !important;
    color: var(--xbyte-color-black) !important;
}

h5 {
    font-size: var(--fs-h5) !important;
    line-height: var(--lh-main) !important;
    font-weight: var(--fw-semibold) !important;
    color: var(--clr3) !important;
}

.h5-dark {
    font-size: var(--fs-h5) !important;
    line-height: var(--lh-main) !important;
    font-weight: var(--fw-semibold) !important;
    color: var(--clr) !important;
}

p {
    color: var(--p);
    font-size: var(--fs-h5);
    font-weight: var(--fw-regular);
    line-height: var(--lh-main);
}

.p-500 {
    color: var(--clr) !important;
    font-size: var(--fs-h5) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-main) !important;
}

.p-small {
    color: var(--p-small) !important;
    font-size: var(--fs-h6) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-ex22) !important;
    margin-bottom: 0px;
}

.p-600 {
    color: var(--dark1) !important;
    font-size: var(--fs-h5) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-main) !important;
    margin-bottom: 0px;
}

.p-dark {
    color: var(--p-dark) !important;
    font-size: var(--fs-h6) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-ex22) !important;
}

.p-tab {
    color: var(--color-white) !important;
    line-height: var(--lh-ex22) !important;
    font-weight: var(--fw-regular) !important;
    font-size: var(--fs-h6) !important;
}

.p-f24 {
    color: var(--color-white) !important;
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-36) !important;
}

.p-lh34 {
    color: var(--xbyte-color-black) !important;
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-34) !important;
}

.p-clr {
    color: var(--dark1) !important;
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-34) !important;
}

.p-clr-white {
    color: var(--color-white) !important;
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-34) !important;
}


.p-lh25 {
    font-size: var(--fs-medium) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-ex3) !important;
    color: var(--clr) !important;
}


.p-700 {
    font-size: var(--fs-body) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-ex22) !important;
    color: var(--color-white) !important;
}

.p-fw400 {
    font-size: var(--fs-medium) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-ex22) !important;
    color: var(--color-white) !important;
}

.p-clr33 {
    font-size: var(--fs-medium) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-ex3) !important;
    color: var(--clr) !important;
}

.p-lh224 {
    font-size: var(--fs-body) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-ex22) !important;
    color: var(--p) !important;
}

.span-sub {
    font-size: var(--fs-medium) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-ex3) !important;
    color: var(--clr4) !important;
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #222;
    text-decoration: none;
    line-height: var(--lh-main);
    font-size: var(--fs-medium);
    font-weight: var(--fw-medium);
}

.arrow-up-right {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
}

.arrow-up-right a:hover {
    text-decoration: none !important;
}

.va-minus-28 {
    vertical-align: -28px;
}

/* Top Horizontal */
.arrow-up-right::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 13px;
    height: 2px;
    background: #E61F2D;
}

/* Right Vertical */
.arrow-up-right::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 13px;
    background: #E61F2D;
}

/* Diagonal */
.arrow-up-right {
    background: linear-gradient(-45deg, transparent 43%, #E8313D 43%, #E8313D 57%, transparent 57%);
}

/* =========================
       NOISE EFFECT
    ========================= */
.noise-overlay {
    /* position: fixed;  */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    /* Keeps it on top of backgrounds, below text if adjusted */
    opacity: 0.04;
    /* CRITICAL: Keep this very low (0.02 - 0.05) so it's subtle */
    pointer-events: none;
    /* Allows users to click through the noise layer */

    /* SVG Base64 Noise Texture */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}


/* =========================
       BANNER SECTION
    ========================= */

.hero {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .5)), url(http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/image-40.png) center/cover no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 450px 0 60px;
    overflow: hidden
}

.hero .content-wrapper {
    border-top: 1px solid rgba(255, 255, 255, .24);
    padding: 64px 35px 0;
    position: relative;
    width: 100%
}

.hero .action-bar {
    position: absolute;
    top: 0;
    left: 35px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 100
}

.card-header:focus {
    background-color: white;
}

.hero .btn-schedule {
    font-weight: var(--fw-medium);
    background-color: #e61f2d;
    color: #fff;
    font-size: var(--fs-h5);
    line-height: var(--lh-main);
    padding: 8px 18px;
    letter-spacing: .3px;
    transition: .2s;
}

.hero .btn-schedule:hover {
    color: #fff;
    background-color: #cd1622;
    text-decoration: none
}

.hero .play-btn {
    width: 36px;
    height: 36px;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s
}

.hero .play-btn:hover {
    background: rgba(255, 255, 255, .1)
}

.hero .play-icon {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #fff;
    margin-left: 3px
}

.hero .left-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.hero .sub-text {
    font-size: var(--fs-h5);
    line-height: var(--lh-main);
    color: #ffffff;
    max-width: 440px;
    margin-bottom: 32px;
    font-weight: var(--fw-regular);
}

.hero .right-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: flex-start;
    padding-top: 10px
}

.hero .top-box {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    padding: 11px;
    display: flex;
    gap: 16px;
    align-items: end;
    position: relative
}

.hero .top-box img {
    height: 175px;
    object-fit: cover;
    border-radius: 2px
}

.hero .box-info h3 {
    line-height: var(--lh-ex1);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    margin-bottom: 4px;
    color: #fff
}

.hero .box-info p {
    font-size: var(--fs-h6);
    line-height: var(--lh-ex22);
    color: #9e9e9e;
    margin: 0;
    font-weight: var(--fw-regular);
}

.hero .bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.hero .card-coverage {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 140px;
    position: relative
}

.hero .card-coverage img {
    margin-bottom: 15px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    /* filter: opacity(.7) */
}

.stat-slider-card .stat-label {
    color: var(--clr) !important;
    font-size: var(--fs-h5) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-main) !important;
}

.stat-slider-card {
    color: var(--xbyte-color-black) !important;
    font-size: var(--fs-large) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-ex5) !important;
}

.hero .card-coverage h4 {
    font-size: var(--fs-medium);
    font-weight: var(--fw-medium);
    line-height: var(--lh-ex3);
    letter-spacing: .5px;
    margin: 0;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px
}

.hero .card-clients {
    gap: 15px;
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    color: #000;
    min-height: 140px;
    position: relative
}

.hero .card-clients .count {
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -.5px
}

.hero .card-clients h4 {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .5px;
    margin: 0;
    color: #666
}

.hero .dots {
    position: absolute;
    bottom: 12px;
    right: 16px;
    display: flex;
    gap: 3px
}

.hero .dot {
    width: 7px;
    height: 7px;
    background: #000;
    border-radius: 1%
}

.hero .dot.red {
    background: #e61f2d
}

@media(max-width:1199.98px) {
    .hero {
        padding: 160px 0 60px
    }

    .hero .main-heading {
        font-size: 42px;
        margin-bottom: 32px
    }

    .hero .right-column {
        margin-top: 24px
    }

    .hero .top-box {
        max-width: 440px
    }

    .hero .bottom-grid {
        max-width: 440px
    }
}

@media(max-width:991.98px) {
    .hero .content-wrapper {
        padding: 64px 24px 0
    }

    .hero .action-bar {
        left: 24px
    }

    .hero .main-heading {
        font-size: 38px
    }
}

@media(max-width:575.98px) {
    .intel-hero .bottom {
        margin: 0px !important;
    }

    .hero .content-wrapper {
        padding: 64px 15px 0
    }

    .hero .action-bar {
        left: 15px
    }

    .hero .btn-schedule {
        font-size: 13px;
        padding: 6px 12px
    }

    .hero .play-btn {
        width: 30px;
        height: 30px
    }

    .hero .main-heading {
        font-size: 28px
    }

    .hero .bottom-grid {
        grid-template-columns: 1fr
    }
}


/* =========================
       LOGO SLIDER SECTION
    ========================= */

.main-logo {
    gap: 15px;
    flex-wrap: wrap;
}

.main-logo stars {
    margin-right: 5px;
    color: #FF9D28 !important;
}

.ico {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.ico img {
    background: rgba(255, 255, 255, 0);
    border-radius: 49.85px;
    border-style: solid;
    border-color: #ffffff;
    border-width: 4.15px;
    padding: 4.15px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 49.85px;
    height: 49.85px;
    position: relative;
    box-shadow: 0px 1.04px 2.08px -1.04px rgba(0, 0, 0, 0.1), 0px 1.04px 3.12px 0px rgba(0, 0, 0, 0.1);
    transform-origin: 0 0;
    transform: rotate(5deg) scale(1, 1);
    overflow: hidden;
}

.icon2,
.icon3,
.icon4 {
    margin: 0 0 0 -7.54px;
}

.slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100px;
    background: #fff;
}

.slider::before,
.slider::after {
    content: "";
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.slider::before {
    left: 0;
    background: linear-gradient(to right,
            #fff 0%,
            rgba(255, 255, 255, 0.95) 30%,
            rgba(255, 255, 255, 0) 100%);
}

.slider::after {
    right: 0;
    background: linear-gradient(to left,
            #fff 0%,
            rgba(255, 255, 255, 0.95) 30%,
            rgba(255, 255, 255, 0) 100%);
}

.slide-track {
    display: flex;
    align-items: center;
    width: calc(250px * 16);
    /* 8 logos × 2 */
    animation: scroll 35s linear infinite;
}

.slide {
    width: 250px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.slide img {
    max-width: 160px;
    width: 100%;
    height: auto;
    opacity: 0.9;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-250px * 8));
    }
}

/* =========================
       THIRD SECTION
    ========================= */

.third {
    background: url("http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/bg-main.png") center/cover no-repeat;
    width: 100%;
    min-height: 100%;
}

.main-text div {
    color: #00000066;
    font-size: var(--fs-large);
    font-weight: var(--fw-bold);
    letter-spacing: 0.0625rem;
    line-height: var(--lh-ex);
    margin: 0;
    padding: 0;
    /* text-transform: uppercase; */
    text-align: center;

    /* CRITICAL: Allows the gradient background to wrap line-by-line */
    display: inline;
}

/* Animated on scroll */
.main-text .text-on-scroll {
    background: linear-gradient(to right,
            #000,
            var(--color-hover-txt)) no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 0%;

    /* Connects animation directly to the root document scroll */
    animation: scroll-text-color linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 8%;
}

.main-text .text-on-scroll-inte {
    background: linear-gradient(to right, #000, var(--color-hover-txt)) no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 0%;
    animation: scroll-text-color linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 12%;
    padding-left: 0;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 54px;
}

.main-text div {
    padding-left: 350px;
}

@media (max-width:1024px) {
    .main-text div {
        padding-left: 0px;
    }
}

@keyframes scroll-text-color {
    to {
        background-size: 100%;
    }
}

.third-txt {
    text-align: left;
    width: 700px;
}

.quote-icon {
    font-size: 3rem;
    color: #e5e5e5;
    line-height: 17px;
    font-family: var(--xbyte-font-primary);
    font-weight: 700;
}

.thi-1 span {
    padding-top: 10px !important;
}

.third-txt .thi-1 {
    color: var(--dark1) !important;
    font-weight: var(--fw-semibold) !important;
    font-size: var(--fs-h5);
}

.third-txt .thi-2 {
    color: var(--p-dark) !important;
    font-weight: var(--fw-semibold) !important;
}


.third-txt .thi-3 {
    margin-top: 58px;
    color: var(--p-dark) !important;
    font-weight: var(--fw-medium) !important;
}

.third-txt .thi-4 {
    margin-top: 75px;
    font-weight: var(--fw-medium) !important;
    color: var(--clr1) !important;
}

.animate-txt {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: scroll;
    background: #fff;
    scroll-timeline-name: --my-scroller;
}



.badge {
    display: inherit !important;
    --badge-size: 294px;
    /* --badge-color: var(--xbyte-color-black); */
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: var(--badge-size); */
    height: var(--badge-size);
    /* background: var(--xbyte-color-black); */
    border-radius: 100%;
    box-shadow: inset 0 0 0 0.9rem var(--badge-color);
    animation: identifier 20s linear infinite;
}

.badge__emoji {
    display: block;
    margin: 0;
    animation: identifier 20s linear infinite;
    animation-direction: reverse;
    transition: all 0.3s;
}

.badge__emoji:hover {
    opacity: 0.8;
    transform: scale(1.2);
}

.badge__char {
    --char-font-weight: 500;
    --char-font-size: 20px;
    --char-width: 10px;
    --char-font-family: "Arial", sans-serif;
    display: block;
    position: absolute;
    top: 0;
    left: calc(50% - var(--char-width) / 1);
    height: calc(var(--badge-size) / 2);
    width: var(--char-width);
    background-repeat: round;
    text-align: center;
    text-transform: uppercase;
    line-height: 1rem;
    font-weight: var(--char-font-weight);
    font-size: var(--char-font-size);
    color: #000;
    font-family: var(--char-font-family);
    transform-origin: bottom center;
    transform: rotate(var(--char-rotate));
}

@-webkit-keyframes identifier {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

@keyframes identifier {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

.ab-company {
    border-style: solid;
    border-color: transparent;
    border-width: 0px 0px 2px 0px;
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: flex-end;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 100%;
    position: relative;
}

.company-1 {
    color: var(--xbyte-color-black) !important;
    line-height: var(--lh-ex) !important;
    font-size: var(--fs-h1) !important;
    font-weight: var(--fw-bold) !important;
    text-align: left;
    font-family: var(--heading-h1-font-family);
    position: relative;
}

.company-2 {
    margin-left: 15px;
    color: var(--clr) !important;
    line-height: var(--lh-main) !important;
    font-size: var(--fs-h5) !important;
    font-weight: var(--fw-medium) !important;
    text-align: left;
    font-family: var(--xbyte-font-primary);
    text-transform: uppercase;
    position: relative;
}

@media(max-width:1024px) {
    .third-txt {
        width: 100% !important;
    }

    .badge {
        --badge-size: 243px !important;
        height: var(--badge-size) !important;
    }
}

@media(max-width:1440px) {
    .hero .top-box img {
        height: 146px;

    }

    .badge {
        --badge-size: 261px !important;
        height: var(--badge-size) !important;
    }

    .badge__emoji {
        width: 200px;
        height: 200px;
    }
}





/* =========================
       BUSINESS FORWARD
    ========================= */

.busineess-frwrd {
    width: 100%;
    min-height: 940px;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E"), url(http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/business-forward.png);
    background-position: center center;
    background-size: auto, cover;
    background-repeat: repeat, no-repeat
}

.busineess {
    padding-top: var(--top);
    padding-bottom: var(--bottom);
    padding-left: var(--left);
    padding-right: var(--right);
}

.section-title {
    font-size: 1.8rem;
    letter-spacing: 2px;
    font-weight: 700
}

.text-accent {
    color: #e62e3d;
    text-shadow: 0 0 15px rgba(230, 46, 61, .3)
}

.top-bar {
    width: 40px;
    height: 3px;
    background-color: #e62e3d;
    margin-bottom: 20px
}

.grid-box {
    min-height: 330px !important;
    padding: 35px 35px;
    border: 1px solid #bdbdbd26 !important;
    /* border-bottom: 1px solid rgba(255, 255, 255, .1); */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    cursor: pointer
}

.grid-box.no-hover {
    cursor: default
}

.grid-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    flex-grow: 1
}

.grid-content .box-title {
    font-weight: var(--xbyte-font-semibold);
    font-size: var(--xbyte-font-32);
    line-height: var(--xbyte-line-42);
    color: var(--xbyte-color-white);
}

.box-info-header {
    transition: opacity .3s ease, transform .3s ease;
    opacity: 1
}

.box-info-header .box-number {
    color: var(--p-small) !important;
    font-size: var(--fs-h6) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-ex22) !important;
}

.box-desc {
    max-width: 240px;
    margin-left: auto;
    text-align: left
}

.busineess .box-desc1 {
    width: 347px !important;
    color: var(--p-small) !important;
    font-size: var(--fs-h5) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-main) !important;
}

.hover-img-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.25, 1, .5, 1);
    z-index: 1
}

.hover-img-layer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(11, 11, 15, .4), rgba(11, 11, 15, .9))
}

.grid-box:not(.no-hover):hover .hover-img-layer {
    transform: translateY(0)
}

.box-info-header .view-all-btn {
    display: none;
}

.grid-box:not(.no-hover):hover .box-info-header .view-all-btn {
    display: block;
}

.grid-box:not(.no-hover):hover .box-info-header .box-desc {
    opacity: -1;
    transform: translateY(-10px);
    pointer-events: none
}

.view-all-link {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    font-size: .85rem;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .2s
}

.view-all-link:hover {
    color: #e62e3d
}

.center-plus {
    font-size: 52px;
    font-weight: 300;
    color: #E61F2D;
    opacity: 6.6;
    text-shadow: 0 0 10px rgba(230, 46, 61, .5);
}

@media (min-width: 768px) {
    .busineess .box-desc1 {
        width: 100%;
    }
}

@media (min-width: 425px) {
    .h-20-m {
        min-height: 20px !important;
    }
}

/* =========================
       MODERN ENTERPRISES
    ========================= */

.intel-third .eight p {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: grid;
    grid-template-columns: 0.06fr auto 1fr;
    grid-template-rows: 11px 0;
    grid-gap: 22px;
    max-width: unset !important;
}

.intel-third .text-on-scroll {
    font-size: var(--fs-40);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-54);
    color: var(--xbyte-color-black);
    padding-left: 0 !important;
}

.eight p:after,
.eight p:before {
    content: " ";
    display: block;
    border-bottom: 2px solid #E61F2D;
    /* background-color:#f8f8f8; */
}


.two {
    margin-top: 33px !important;
    position: relative;
    padding: 0;
    margin: 0;
    font-family: "Raleway", sans-serif;
    font-weight: 300;
    font-size: 40px;
    color: #080808;
    transition: all 0.4s ease;
}

.twoo {
    margin-top: 33px !important;
    position: relative;
    padding: 0;
    margin: 0;
    font-family: var(--xbyte-font-primary);
    font-weight: 300;
    font-size: 40px;
    color: #080808;
    text-align: center;
    transition: all .4s ease
}


.title-t span {
    color: #828282 !important;
}

.title-t {
    margin: 0;
}

.modern {
    box-shadow: 0 9px 9px rgb(78 78 78 / 8%);
    padding: 0;
    background: #fff;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    height: 100%;
}

.modern h5 {
    padding: 0 14px;
    margin-top: 20px;
    transition: color 0.4s ease;
}

.modern img {
    padding: 0 15px;
    border-radius: 2px;
    height: 460px;
    display: block;
    width: 100%;
    filter: grayscale(100%) brightness(.82) contrast(1.15);
    /* filter: grayscale(100%); */
    transition: filter 0.6s ease, transform 0.6s ease;
    transition-delay: 0.3s;
    object-fit: cover;
}

.modern .p-dark {
    padding: 14px 14px 18px 14px;
    font-size: 14px;
    color: #4F4F4F;
}

.modern:hover img,
.modern.active img {
    filter: sepia(100%) saturate(600%) hue-rotate(-50deg);
    transform: scale(1.03);
}

.modern:hover h5,
.modern.active h5 {
    color: #c50000;
}

/* --- RESPONSIVE ENGINE SCROLL TRACKS --- */
.scroll-container {
    position: relative;
    /* background: #fff; */
    width: 100%;
}

.pin-wrapper {
    position: relative;
    /* width: 100vw; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* min-height: 100vh; */
}

.steps-track {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.steps-track .col-md-3 {
    width: 100%;
    margin-bottom: 30px;
}

@media (min-width: 768px) {
    .pin-wrapper {
        overflow: hidden;
        /* padding: 40px 0 40px 80px;
            height: 100vh; */
    }

    .steps-track {
        flex-wrap: nowrap;
        width: max-content;
        will-change: transform;
    }

    .steps-track .col-md-3 {
        flex: 0 0 auto;
        width: 418px;
        margin-bottom: 0;
    }
}

@media (mam-width: 425px) {
    .pin-wrapper .modern .p-dark {
        padding: 28px 14px 18px 14px !important;
    }

    .pin-wrapper {
        flex-direction: row !important;
    }

    .pin-wrapper .steps-track .mt-5 {
        margin-top: 0rem !important;
    }

    .modern img {
        padding: 0 0px;
    }
}

/* =========================
       SUCCESS STORIES
    ========================= */

.success .card {
    position: relative;
    /* width: 576px; */
    height: 480px;
    overflow: hidden;
    background: #F5F5F5;
    cursor: pointer;
    border: none;
    border-radius: 2px;
}

.success .card .card-content1 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    /* Horizontal */
    align-items: center;
    /* Vertical */
    text-align: left;
    padding: 80px;
}

/* Image */
.success .card-image {
    position: absolute;
    inset: 0;
    transition: .5s ease;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content */
.card-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: .5s ease;
}

/* Number */
.card-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: var(--fs-medium) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-ex3) !important;
    color: var(--color-white);
    transition: .5s ease;
}

/* Text */
/* .card-info h2 {
    color: #fff;
    transition: .5s;
} */
.card .card-content .h3-dark-light {
    color: var(--xbyte-color-white-solid);
}

.card:hover .card-info h2 {
    color: var(--color-white) !important;
    font-size: var(--fs-large) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-ex5) !important;
}

.card:hover .card-info .p-info {
    color: var(--dark1) !important;
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-h3-32) !important;
}

.card:hover .card-info .p-info1 {
    color: var(--p-dark) !important;
    font-size: var(--fs-h6) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-ex22) !important;
}

.card:hover .card-number {
    color: var(--dark1) !important;
    font-size: var(--fs-medium) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-ex3) !important;
}

.card-info1 p {
    color: var(--clr) !important;
    font-size: var(--fs-h5) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-main) !important;
}

.card-info p {
    color: #fff;
    line-height: 1.6;
    transition: .5s;
}

/* Arrow */
.card-arrow {
    visibility: hidden;
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: 30px;
    height: 30px;
    /* border:2px solid #ff2b2b; */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff2b2b;
    font-size: 26px;
    text-decoration: none;

}

.card:hover .card-image {
    opacity: 0;
    visibility: hidden;
}

.card:hover .card-content {
    justify-content: flex-start;
}


.card:hover .card-info h2,
.card:hover .card-info h3 {
    color: #000 !important;
}

.card:hover .card-info p {
    color: #000 !important;
}

.card:hover .card-info p:first-child {
    color: #000 !important;
    font-weight: 600 !important;
}

/* Show Arrow */
.card:hover .card-arrow {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}


.circle-main {
    justify-content: center;
    /* Horizontal Center */
    align-items: center;
    /* Vertical Center */
    overflow: visible;

    width: 190px;
    height: 190px;
    border: 2px solid #d8d8d8;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Text */
.circle-main .content {
    text-align: center;
    color: #494343;
}

.circle-main .content h2 {
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
}

.circle-main .content p {
    font-size: 16px;
    margin-top: 18px;
    font-weight: 300;
}

/* Arrow Orbit */
.circle-main .orbit {
    position: absolute;
    inset: 0;
    transition: transform .8s ease;
}

/* Red Arrow */
.circle-main .arrow {
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid #ff1d25;
    transition: transform .8s ease;
}

/* Hover Animation */
.circle-main:hover .orbit {
    transform: rotate(-90deg);
}



@media (max-width:425px) {
    .success .card {
        margin-bottom: 30px;
        /* height: 270px; */
    }

    .card-txt {
        margin-bottom: 0px !important;
        height: 200px !important;
    }

    .success .card .card-content1 {
        padding: 0px 20px 0px 20px;
    }

    .circle-main {
        margin: 0px 0px 30px 0px;
    }

}


/* =========================
       DATA DELIVERY
    ========================= */
.lines {
    margin: 29px 0px;
    display: flex;
}

.data-delivery {
    background-color: var(--xbyte-color-border-grey-light);
}

.bottom-data .delivery-data {
    margin-left: 120px;
    margin-bottom: 20px;
}

.delivery-p {
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-h2-19) !important;
    color: var(--p-dark) !important;
}

.data-process .title {
    font-size: 55px;
    font-weight: 300;
    margin-bottom: 70px;
}

.data-process .title span {
    display: block;
    font-weight: 700;
    color: #777;
}

.data-process .steps {
    display: flex;
    height: 500px;
}

.data-process .step {
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 40px;
    border-left: 1px solid #e5e5e5;
    transition: .6s;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* background: white; */
}

.data-process .step.active,
.data-process .step:hover {
    flex: 3;
}

.data-process .number {
    color: #333333;
    font-size: 60px;
    font-weight: 500;

}

.data-process .content {
    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity .45s ease,
        transform .6s ease .15s;
    margin-top: 120px;
    max-width: 380px;
}

.data-process .step.active .content,
.data-process .step:hover .content {
    opacity: 1;
    transform: translateY(0);
}

.data-process .content h3 {
    font-size: 34px;
    margin-bottom: 20px;
}

.data-process .content p {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
}

.data-process .step::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    /* background: #e60023; */
    /* transform: scaleX(0);
    transition: .5s;
    transform-origin: left; */
}

/* Mobile */
@media(max-width:992px) {
    .data-process .steps {
        flex-direction: column;
        height: auto;
    }

    .data-process .step {
        height: 180px;
    }

    .data-process .step:hover {
        height: 350px;
    }

    .data-process .content {
        margin-top: 30px;
        opacity: 1;
        transform: none;
    }

    .data-process .title {
        font-size: 34px;
    }
}

@media (max-width: 1024px) {
    .bottom-data {
        margin-bottom: 5%;
    }
}

.data-process .step:hover,
.step.active {
    flex: 3;
    /* background: linear-gradient(180deg, #fff, #fafafa); */
    /* box-shadow: 0 30px 60px rgba(0, 0, 0, .08); */
}

.data-process .step:hover .content,
.step.active .content {
    opacity: 1;
    /* transform: translateY(0); */
}

.data-process .step:hover .number,
.step.active .number {
    /* transform: translateY(-15px); */
    color: #000000;
}


@media (max-width:425px) {
    .data-delivery .col-xl-8 {
        padding-left: 0px;
    }
}

/* =========================
       SECURITY & COMPLIANCE
    ========================= */


.security-card {
    /* padding: 20px;
        border: 1px solid #F5F5F5; */
    height: 470px;
    /* Same height as design */
    padding: 28px;
    border: 1px solid #E8E8E8;
    /* background: #fff; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Push image to bottom */
    transition: .3s ease;
}


.security-card img {
    width: 150px;
    max-width: 100%;
    display: block;
}

.security-txt h5 {
    margin: 0 0 12px;
    font-size: 35px;
    font-weight: 600;
    color: #1d1d1d;
    line-height: 1.2;
}

.security-txt p {
    margin: 0;
    max-width: 320px;
    font-size: 20px;
    line-height: 1.2;
    color: #555;
}

/* =========================
       DATA INTELLIGENCE
    ========================= */

.data-intelligemnce button:focus {
    outline: none;

}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: transparent !important;
}

.data-intelligemnce {
    position: relative;
    overflow: hidden;
    background-color: var(--xbyte-color-black, #090909);
    background-image: radial-gradient(ellipse 70% 130% at 100% 20%, rgba(105, 24, 40, 0.42) 0%, rgba(70, 19, 31, 0.30) 25%, rgba(42, 14, 21, 0.20) 45%, transparent 72%), radial-gradient(ellipse 55% 80% at 0% 100%, rgba(25, 25, 55, 0.25) 0%, rgba(16, 17, 34, 0.15) 35%, transparent 65%);
    background-repeat: no-repeat;
    background-size: cover;
    padding: clamp(50px, 8vw, 120px) clamp(20px, 5.5vw, 80px);
}

.intelligence-tabs .nav-link {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    padding: 18px 20px;
    margin-bottom: 8px;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: all .35s ease;
}

.intelligence-tabs .nav-link:hover,
.intelligence-tabs .nav-link.active {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, .18) 0%,
            rgba(255, 255, 255, .10) 40%,
            rgba(255, 255, 255, .04) 70%,
            rgba(255, 255, 255, 0) 100%);
}

.intelligence-tabs .nav-link>* {
    position: relative;
    z-index: 1;
}

.intelligence-tabs .nav-link h5 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: #fff;
}

.intelligence-tabs .nav-link:hover::before,
.intelligence-tabs .nav-link.active::before {
    opacity: 1;
}

.intelligence-tabs .nav-link:hover h5,
.intelligence-tabs .nav-link.active h5 {
    color: #fff;
}

.intelligence-tabs .nav-link:hover p,
.intelligence-tabs .nav-link.active p {
    color: #fff;
}

.tab-content {
    position: relative;
    min-height: 450px;
}

.tab-content .tab-pane {
    position: absolute;
    inset: 0;
    display: block !important;

    opacity: 0;
    visibility: hidden;

    transform: scale(.88) translateY(30px);
    filter: blur(15px);

    transition:
        opacity .7s cubic-bezier(.22, 1, .36, 1),
        transform .7s cubic-bezier(.22, 1, .36, 1),
        filter .7s cubic-bezier(.22, 1, .36, 1),
        visibility .7s;

    pointer-events: none;
}

.tab-content .tab-pane.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    filter: blur(0);
    z-index: 2;
    pointer-events: auto;
}

.tab-content img {
    width: 100%;
    display: block;
}

@media(max-width:768px) {
    .tab-content .tab-pane {
        position: relative !important;
        display: flex !important;
    }

}


/* =========================
      LATEST INSIGHTS FOR KNOWLEDGE
    ========================= */

.blog-sec .left-tabs {
    padding-right: 25px;
}

.blog-sec .left-tabs .nav-link {
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 20px 0;
    text-align: left;
    border-bottom: 1px solid #ececec;
    color: #222;
}

.blog-sec .left-tabs .nav-link.active {
    background: transparent;
    color: #000;
}

.blog-sec .left-tabs .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-sec .left-tabs .title span:first-child {
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* RED LINE BEFORE ACTIVE TITLE */

.blog-sec .left-tabs .nav-link.active .title span:first-child::before {
    position: relative;
    content: "";
    top: 7px;
    width: 14px;
    height: 3px;
    background: #ef3d3d;
    display: inline-block;
    margin-right: 2px;
}

.blog-sec .left-tabs .title span:last-child {
    font-size: 40px;
    font-weight: 300;
    color: #1D1D1D;
}

.blog-sec .left-tabs p {
    display: none;
}

.blog-sec .left-tabs .nav-link.active p {
    display: block;
}


/* BLOG CARD */

.blog-sec .blog-card {
    background: #fff;
    /* box-shadow: 0 8px 30px rgba(0, 0, 0, .02); */
    transition: .35s;
    height: 100%;
}

.blog-sec .blog-card:hover {
    transform: translateY(-6px);
    /* box-shadow: 0 20px 45px rgba(0, 0, 0, .12); */
}

.blog-sec .blog-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.blog-sec .blog-card h5 {
    font-size: 18px;
    line-height: 1.45;
    padding: 18px 18px 8px;
    margin: 0;
    font-weight: 500;
    color: #222;
}

.blog-sec .author {
    display: flex;
    align-items: center;
    padding: 18px;
    border-top: 1px solid #f2f2f2;
}

.blog-sec .author img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin-right: 12px;
}

.blog-sec .author h6 {
    margin: 0;
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
    line-height: var(--lh-main);
    color: var(--dark1);
}

.blog-sec .author p {
    margin: 2px 0 0;
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-h2-19) !important;
    color: var(--p-dark) !important;
}



.blog-sec .author .date {
    margin-left: auto;
    font-size: var(--fs-medium) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-ex3) !important;
    color: var(--clr2) !important;
}

.blog-sec .tab-pane .row {
    row-gap: 30px;
}

.left-tabs .nav-link,
.left-tabs .nav-link:focus,
.left-tabs .nav-link:focus-visible,
.left-tabs .nav-link.active,
.left-tabs .nav-link:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure the inactive tab pane is completely removed from the layout flow */
.tab-content>.tab-pane {
    display: none !important;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

/* Ensure the active tab pane displays properly and occupies space naturally */
.tab-content>.active {
    display: block !important;
    /* visibility: visible; */
    height: auto;
    overflow: visible;
}

.latest-insights {
    background: url("http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/bg-blog.png") center/cover no-repeat;
}

/* =========================
              CTA
    ========================= */

.cta-main {
    background: url("http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/cta.png") center/cover no-repeat;
    /* width: 100%; */
    min-height: 840px;
    position: relative;
    padding: 120px 20px;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.cta-main::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("img/cta-bg.jpg") center/cover no-repeat;
    opacity: .15;
    z-index: -2;
}

.cta-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .85);
    z-index: -1;
}

.cta-main h2 {
    text-transform: none;
    font-weight: var(--fw-bold) !important;
    font-size: var(--fs-120) !important;
    line-height: var(--lh-100) !important;
    color: var(--xbyte-color-black) !important;
}

.cta-main h2 span {
    color: #e71d2b
}

.cta-main p {
    max-width: 1000px;
    margin: 25px auto 40px;
    font-weight: var(--fw-regular) !important;
    font-size: var(--fs-h4) !important;
    line-height: var(--lh-h3-32) !important;
    color: var(--p-dark) !important;
}

.cta-main .btns {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cta-main .btn {
    text-decoration: none;
    padding: 14px 28px;
    font-weight: var(--fw-medium) !important;
    font-size: var(--fs-h5) !important;
    line-height: var(--lh-main) !important;
    color: var(--xbyte-color-black) !important;
}

.cta-main .black {
    background: #000;
    font-weight: var(--fw-medium) !important;
    font-size: var(--fs-h5) !important;
    line-height: var(--lh-main) !important;
    color: var(--color-white) !important;
}

.cta-main .link {
    color: #000;
}

.cta-main .link span {
    color: #e71d2b;
}

@media(max-width:768px) {
    .cta-main h2 {
        font-size: 40px
    }

    .cta-main p {
        font-size: 16px
    }
}

/* =========================
                FAQS
    ========================= */
.faq-main {
    background: url("http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/bg-faq.png") center/cover no-repeat;
}


.faq-main .card:first-child {
    border-top: 0;
}

#faq .card .card-header button:focus {
    background-color: transparent;
}

.faq-main .card {
    background-color: transparent !important;
    border: 0;
    border-top: 2px solid #ececec;
    border-radius: 0
}

.faq-main .card:last-child {
    border-bottom: 1px solid #ececec
}

.faq-main .card-header {
    padding: 0;
    background: none;
    border: 0
}

.faq-main .btn-link {
    /* white-space: pre-wrap; */
    width: 100%;
    padding: 0;
    display: grid;
    grid-template-columns: 447px 1fr 20px;
    align-items: stretch;
    color: #1D1D1D;
    text-decoration: none !important;
    box-shadow: none !important;
    align-items: center;
}

.faq-main .btn-link:hover {
    color: #1D1D1D
}

.faq-main .no {
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 28px 20px;
    font-size: 20px;
    color: #1D1D1D;
    /* border-right: 1px solid #ececec; */
}

.faq-main .question {
    display: flex;
    align-items: center;
    padding: 0px 20px;
    font-size: 22px;
    text-align: left
}

.faq-main .icon {
    padding-right: 15px;
    display: flex;
    align-items: center;
    justify-content: right;
    /* border-left: 1px solid #ececec; */
    font-size: 40px
}

.faq-main .btn-link.collapsed .icon:before {
    content: "+"
}

.faq-main .btn-link:not(.collapsed) .icon:before {
    content: "−"
}

.faq-main .card-body {
    margin-left: 447px;
    margin-right: 447px;
    padding: 0px 10px 10px 20px;
    /* border-left: 1px solid #ececec;
    border-right: 1px solid #ececec; */
    /* color: #777; */
    /* line-height: 1.8 */
}

@media(max-width:1440px) {
    .faq-main .btn-link {
        grid-template-columns: 189px 1fr 260px;
    }

    .faq-main .card-body {
        margin-left: 189px;
        margin-right: 189px;
    }
}

@media(max-width:1024px) {
    .faq-main {
        background: none;
    }

    .ml-md {
        margin-left: 5%;
    }

    .faq-main .question {
        font-size: 20px
    }

    .faq-main .btn-link {
        grid-template-columns: 100px 1fr 50px
    }

    .faq-main .card-body {
        margin-left: 100px;
        margin-right: 50px
    }
}

@media(max-width:767px) {
    .faq-main .faq {
        padding: 60px 0
    }

    .faq-main .btn-link {
        grid-template-columns: 60px 1fr 45px
    }

    .faq-main .no {
        padding: 20px 10px
    }

    .faq-main .question {
        padding: 20px 15px;
        font-size: 17px
    }

    .faq-main .icon {
        font-size: 22px
    }

    .faq-main .card-body {
        margin: 0 45px 0 60px;
        padding: 0 15px 20px;
        font-size: 15px
    }
}

@media(max-width:480px) {
    .faq-main .question {
        font-size: 16px
    }

    .faq-main .btn-link {
        grid-template-columns: 50px 1fr 40px;
        white-space: pre-wrap;
    }

    .faq-main .no {
        padding: 18px 8px;
        font-size: 13px
    }

    .faq-main .card-body {
        margin: 0 40px 0 50px;
        padding: 0 12px 18px;
        font-size: 14px;
        line-height: 1.7
    }
}

/* =========================
           CLIENT STORY
    ========================= */

.story-bg {
    background: url("http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/client-success.png") center / cover no-repeat;
    /* background: url("http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/bg-4.png") center/cover no-repeat; */
    width: 100%;
    /* min-height: 100%; */
}

/* background-color: #F9F9F9; */


/* video */
.video-slider {
    max-width: 900px;
    margin: 50px auto 0px auto;
    position: relative
}

.video-slider .video-box video {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    background: #000
}

.video-slider .slider-bottom {
    display: flex;
    justify-content: between;
    align-items: center;
    padding: 16px 0px 20px;
    gap: 20px;
    width: 100%
}

.video-slider .ceo {
    display: flex;
    align-items: center;
    gap: 12px
}

.video-slider .ceo img {
    width: 38px;
    height: 38px;
    object-fit: cover;
}

.video-slider .ceo h4 {
    font-size: var(--fs-medium);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-24);
    color: var(--dark1);
    margin: 0;
}

.video-slider .ceo p {
    margin: 0;
    color: var(--p) !important;
    font-size: var(--fs-12) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-16) !important;
}

.video-slider .swiper-pagination {
    position: absolute !important;
    bottom: 70px !important;
    right: 0px !important;
    left: auto !important;
    width: auto !important;
    text-align: right;
    z-index: 10
}

.video-slider .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: #000;
    opacity: 1;
    margin: 0 4px !important
}

.video-slider .swiper-pagination-bullet-active {
    background: #e61f2d
}

@media(max-width:991px) {
    sub-video-slider .video-box video {
        height: 360px
    }

    .video-slider .ceo h4 {
        font-size: 17px
    }
}

@media(max-width:768px) {
    .video-slider .video-box {
        padding: 15px
    }

    .video-slider .video-box video {
        height: 280px
    }

    .video-slider .slider-bottom {
        padding: 16px 0px 15px
    }

    .video-slider .ceo img {
        width: 45px;
        height: 45px
    }

    .video-slider .ceo h4 {
        font-size: 16px
    }

    .video-slider .ceo p {
        font-size: 13px
    }

    .video-slider .swiper-pagination {
        bottom: 30px !important;
        right: 15px !important
    }
}

@media(max-width:576px) {
    .video-slider {
        margin: 20px auto
    }

    .video-slider .video-box {
        padding: 10px
    }

    .video-slider .video-box video {
        height: 220px;
        border-radius: 10px
    }

    .video-slider .slider-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 10px;
    }

    .video-slider .swiper-pagination {
        position: relative !important;
        bottom: 0 !important;
        right: auto !important;
        left: 0 !important;
        width: 100% !important;
        text-align: left;
        margin-top: 5px
    }

    .video-slider .ceo img {
        width: 40px;
        height: 40px
    }

    .video-slider .ceo h4 {
        font-size: 15px
    }

    .video-slider .ceo p {
        font-size: 12px
    }
}

/* testimonial */
.testimonial-container {
    max-width: 800px;
    margin: 80px 0px;
    padding: 20px;
    position: relative;
}

.testimonial-container .btn-nav .bi-arrow-left {
    color: black;
}

.testimonial-container .quote-icon {
    font-size: 5rem;
    color: #e5e5e5;
    line-height: 1;
    margin-bottom: 10px;
    font-family: var(--xbyte-font-primary);
    font-weight: 700
}

.testimonial-container .testimonial-wrapper {
    position: relative;
    overflow: hidden;
    min-height: 260px
}

.testimonial-container .testimonial-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s;
    z-index: 1
}

.testimonial-container .testimonial-item.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 2
}

.testimonial-container .testimonial-text {
    font-size: 1.35rem;
    color: #222;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 40px;
    letter-spacing: -.01em;
    text-align: justify
}

@media(max-width:768px) {
    .testimonial-container the-testimonial-text {
        font-size: 1.15rem
    }

    .testimonial-container .ceo-info-wrapper {
        justify-content: flex-start !important;
        margin-left: 0 !important
    }
}

.testimonial-container .profile-img {
    margin-right: 15px;
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 0
}

.testimonial-container .author-name {
    color: var(--dark1);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ex1);
    margin: 0
}

.testimonial-container .author-role {
    font-size: .95rem;
    color: #666;
    margin: 0
}

.testimonial-container .view-all-btn {
    /* color: #000; */
    text-decoration: none;
    /* font-weight: 500; */
    /* font-size: 1.1rem; */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity .2s
}

.testimonial-container .view-all-btn:hover {
    opacity: .7;
    color: #000
}

.testimonial-container .btn-nav {
    width: 44px;
    height: 44px;
    border: 1px solid #ddd;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all .2s;
    padding: 0
}

.testimonial-container .btn-nav:hover {
    background: #f5f5f5
}

.testimonial-container .btn-nav.btn-next {
    background: #111;
    color: #fff;
    border-color: #111
}

.testimonial-container .btn-nav.btn-next:hover {
    background: #222;
    border-color: #222
}


/*Banner Slider*/
.stat-slider-card {
    position: relative;
    width: 100%;
    max-width: 300px;
    min-height: 185px;
    padding: 24px 20px 18px;
    background: #f5f5f5;
    color: #111111;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.stat-slider {
    position: relative;
    min-height: 110px;
}

.stat-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(15px);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        visibility 0.4s ease;
}

.stat-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.stat-number {
    display: block;
    margin-bottom: 14px;
    font-size: var(--fs-large);
    line-height: var(--lh-ex5);
    font-weight: var(--fw-bold);
    letter-spacing: -0.03em;
}

.stat-label {
    margin: 0;
    font-size: var(--fs-h5);
    line-height: var(--lh-main);
    font-weight: var(--fw-medium);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.stat-dots {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: auto;
}

.stat-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    background: #171717;
    opacity: 0.4;
    cursor: pointer;
    transition:
        opacity 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.stat-dot:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.stat-dot.active {
    background: #ff2336;
    opacity: 1;
}

@media (max-width: 1440px) {
    .stat-slider1-card1 {
        min-height: 219px !important;
    }

    .stat-slider1-card1 .stat-slider1 .stat-slide1 .top-box .box-info .mb-5 {
        margin-bottom: 0px !important;
    }
}

@media (max-width: 1024px) {
    .stat-slider1-card1 {
        min-height: 169px !important;
    }
}

@media (max-width: 767px) {
    .stat-slider-card {
        max-width: 100%;
        min-height: 175px;
    }

    .stat-number {
        font-size: 42px;
    }

    .stat-slider1-card1 {
        max-width: 100%;
        min-height: 175px;
    }

    .stat-number {
        font-size: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .stat-slide,
    .stat-dot {
        transition: none;
    }

    .stat-slide1,
    .stat-dot1 {
        transition: none;
    }
}

@media (max-width: 375px) {
    .stat-slider1-card1 {
        min-height: 216px !important;
    }
}

.stat-slider1-card1 {
    position: relative;
    width: 100%;
    /* max-width: 300px; */
    min-height: 202px;
    /* padding: 24px 20px 18px;
    background: #f5f5f5; */
    color: #111111;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.stat-slider1 {
    position: relative;
    min-height: 110px;
}

.stat-slide1 {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(15px);
    transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0.4s ease;
}

.stat-slide1.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.stat-dot1s {
    display: none;
}


/*End*/


/* =========================
           INTELLIGENCE PAGE
    ========================= */
.main-btn {
    border-radius: 0px;
    background-color: var(--red1);
    color: #ffffff;
    font-size: var(--fs-h5) !important;
    font-weight: var(--lh-main) !important;

}

.main-btn .arrow-up-right {
    margin-left: 5px;
    background: linear-gradient(-45deg, transparent 43%, #ffffff 43%, #ffffff 57%, transparent 57%);
}

.main-btn .arrow-up-right::before {
    background-color: #ffffff;
}

.main-btn .arrow-up-right::after {
    background-color: #ffffff;
}



.intel-hero {
    background: url("http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/inte-banner.png") center / cover no-repeat;
    /* width: 100%; */
    min-height: 100%;
    height: 480px;
}

.bottom p {
    color: white !important;
}

.intel-hero .bottom {
    padding: 31px;
    margin: 40px;
    position: absolute;
    bottom: 0;
    padding: 30 px;
    color: #ffffff;
    background: #99949426;
}


/* =========================
           SECOND SECTION
    ========================= */

.second .intel-box {
    position: relative;
    padding: 32px 36px;
    background-color: var(--xbyte-color-off-white);
    border-radius: 2px;
    height: 100%
}

.second .intel-box h4 {
    font-weight: var(--fw-xbold);
    font-size: var(--xbyte-font-48);
    line-height: var(--xbyte-line-64);
}

.second .intel-box p {
    font-weight: var(--xbyte-font-semibold);
    font-size: var(--xbyte-font-24);
    line-height: var(--xbyte-line-34);

}

.second .intel-box .box-icon {
    position: absolute;
    top: 20px;
    right: 25px;
    color: #E61E2A;
    font-size: 20px;
    -webkit-text-stroke: .5px
}

.second .intel-box.active {
    background-color: #1A1A1A
}

.second .intel-box.active h4 {
    color: #fff
}

.second .intel-box.active p {
    color: #a0a0a0
}

@media(min-width:992px) {
    .custom-wide {
        flex: 0 0 34% !important;
        max-width: 34% !important;
    }

    .custom-small {
        flex: 0 0 22% !important;
        max-width: 22% !important;
    }
}


/* =========================
           LOGO SLIDER SECTIO
    ========================= */

.success-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.success-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-size: var(--xbyte-font-18);
}

.success-list li::before {
    content: "\F26E";
    font-family: bootstrap-icons;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #E61F2D;
    font-size: 22px;
    font-weight: 700
}

.success-ul li::before {
    color: #333333 !important;
}


/* =========================
           RAW MARKET TAB SECTION
    ========================= */

#bizTabsContent {
    border-bottom: 1px solid #8080803b;
}

.tab-content#bizTabsContent .tab-pane {
    position: unset;
}

.biz-section {
    background: url("http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/data-intelligence-1.png") center / cover no-repeat;
    /* min-height: 100%;
    height: 480px; */
    padding: 60px 0;
}

.biz-section .red-line {
    width: 30px;
    height: 3px;
    background-color: #e61e2a;
    margin-bottom: 15px
}

.biz-section h2 {
    font-size: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: 600
}

.biz-section h3 {
    color: #e61e2a !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 35px
}

.biz-section .usecase-tabs {
    background: linear-gradient(to right, rgb(0 0 0 / 25%), rgb(235 235 235 / 6%));
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 40px;
    border: none
}

.biz-section .usecase-tabs .nav-link {
    color: #b3b3b3;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 22px 25px;
    text-align: center;
    border: none;
    background: transparent;
    transition: all .3s ease
}

.biz-section .usecase-tabs .nav-link.active {
    background-color: #e61e2a !important;
    color: #fff !important
}

.biz-section .content-text p {
    /* font-size: 16px !important;
    line-height: 1.6 !important;
    color: #ccc !important; */
    margin-bottom: 25px
}

.biz-section .success-list {
    list-style: none;
    padding-left: 0
}

.biz-section .success-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    line-height: var(--lh-ex3);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h5);
    color: var(--clr4);
}

.biz-section .success-list li::before {
    content: "\F26E";
    font-family: bootstrap-icons;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #e61e2a;
    font-size: 18px;
    font-weight: 700
}

.biz-section .tab-img-wrap {
    border: 1px solid #262626;
    padding: 10px;
    background: #111;
    border-radius: 4px
}


/* =========================
           BUINESS OUTCOMES SECTION
    ========================= */

.overlapping {
    position: relative;
    padding-bottom: 5vh
}

.overlapping .scroll-card {
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    background: #ffffff;
    border-radius: 8px;
    min-height: 70vh;
    transition: transform .3s ease
}

.scroll-card h3 {
    color: black !important;
}

.overlapping .scroll-card:nth-child(2) {

    background: #ffffff;
}

.overlapping .success-list {
    list-style: none;
    padding-left: 0
}

@media(max-width:767px) {
    .overlapping .scroll-card {
        top: 40px;
        min-height: auto;
        margin-bottom: 40px
    }
}


/* =========================
           DATA SOURCES SECTION
    ========================= */

.border-intel {
    border-top: 1px solid #e9e9e970;
    border-bottom: 1px solid #e9e9e970;
}

.border-intel .sub {
    padding: 40px;
}

.data-sorces {
    background: url("http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/data.png") center/cover no-repeat;
    width: 100%;
    min-height: 100%;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    /* background: #fff; */
    font-family: var(--xbyte-font-primary);
}

.features-grid .feature-col {
    gap: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem;
    text-align: center;
    border-right: 1px solid var(--border-color);
}

.features-grid .feature-col:last-child {
    border-right: none;
}

/* Element position helpers */
.features-grid .mt-auto {
    margin-top: auto !important;
}

.features-grid .my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

/* Grid Layout for Column 1 Badges (2x2 Pair Arrangement) */
.features-grid .logo-badge-container {
    position: relative;
    margin-bottom: 2.5rem;
    padding: 1rem;
}

/* Creates the faint red radial glow behind the badges */
.features-grid .feature-col:hover {
    background: radial-gradient(circle, var(--accent-glow) 0%, rgba(255, 255, 255, 0) 70%);
}

.features-grid .logo-badge-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Set to 2-2 layout */
    gap: 0.6rem;
    z-index: 1;
}

.features-grid .badge-card {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #444;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    white-space: nowrap;
}

.features-grid .badge-card img {
    height: 14px;
}

/* Badge Hover State */
.features-grid .badge-card:hover {
    background: #fff5f5 !important;
    /* Minor tint change to a soft red/pink */
    border-color: #ffcccc !important;
    /* Minor red border definition */
    transform: translateY(-1px) !important;
}

/* Rows for Column 3 & 4 Logos */

/* Left Shadow */
.features-grid .overlay::before {
    background: transparent !important;
}

.features-grid .overlay::after {
    background: transparent !important;
}


.features-grid .logo-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 90px;
    height: 100%;
    z-index: 5;
    background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, .9) 70%, rgba(255, 255, 255, 0) 100%);
}

/* Right Shadow */
.features-grid .logo-row::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 90px;
    height: 100%;
    z-index: 5;
    background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, .9) 70%, rgba(255, 255, 255, 0) 100%);
}

.features-grid .logo-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    /* width: 100%; */
}

.features-grid .logo-row img {
    max-width: 80px;
    object-fit: contain;
}

.intel-third {
    background: url("http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/stretegic-intel.png") center/cover no-repeat;
    width: 100%;
    min-height: 100%;
    /* background-color: #F9F9F9; */
}

.features-grid .logo-row img.box-logo {
    border: 1px solid #ddd;
    border-radius: 4px;
    /* padding: 0.4rem; */
    height: 55px;
}

/* Tag Pills Styles */
.features-grid .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.features-grid .tag {
    background: var(--bg-tag);
    /* color: #555; */
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    /* font-size: 14px; */
    border: 1px solid #f0f0f0;
    transition: all 0.2s;
    cursor: pointer;
}

.features-grid .tag:hover {
    background: #eee;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .features-grid .feature-col {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .features-grid .feature-col:last-child {
        border-bottom: none;
    }
}

/* =========================
          MODERN ENTERPRICES
    ========================= */

.modern-intel {
    background: url("http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/modern-enterprise.png") center/cover no-repeat;
    width: 100%;
    min-height: 100%;
}

.main-card {
    /*    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;*/
    /* background-color: #ffffff; */
    color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Changed to start so margins work cleanly */
    /* min-height: 100vh; */
    /* padding: 60px 20px; */
}

/* --- Grid Container --- */
.main-card .metrics-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* max-width: 1200px; */
    width: 100%;
    /* background: #ffffff; */
}

/* --- Individual Card Styles --- */
.main-card .metric-card {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    transition: margin-top 0.3s ease;
}


/* --- Card Wise Staggered Margin Top (Desktop) --- */
.main-card .metric-card:nth-child(1) {
    margin-top: 0px;
}

.main-card .metric-card:nth-child(2) {
    margin-top: 60px;
}

.main-card .metric-card:nth-child(3) {
    margin-top: 120px;
}

.main-card .metric-card:nth-child(4) {
    margin-top: 180px;
}

.main-card .graphic-box img {
    width: 90px;
    height: auto;
    object-fit: contain;
}

/* --- Typography Styles --- */
.main-card .metric-value {
    color: var(--xbyte-color-black) !important;
    line-height: var(--lh-ex) !important;
    font-size: var(--fs-h1) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: -1px;
    margin-bottom: 8px;
}

.main-card .metric-title {
    margin-bottom: 12px;
}

@media (max-width:1024px) {
    .main-card .metrics-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px
    }

    .main-card .metric-card {
        border: 1px solid #f0f0f0;
        border-radius: 6px
    }

    .main-card .metric-card:not(:last-child)::after {
        display: none
    }

    .main-card .metric-card:nth-child(1),
    .main-card .metric-card:nth-child(2) {
        margin-top: 0
    }

    .main-card .metric-card:nth-child(3),
    .main-card .metric-card:nth-child(4) {
        margin-top: 30px
    }
}

@media (max-width:576px) {
    .main-card .metrics-container {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 20px
    }

    .main-card .metric-card:nth-child(n) {
        margin-top: 0 !important
    }
}

.cta-intelligence {
    padding: 60px 0px;
    background: url("http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/cta-intel.png") center / cover no-repeat;
    /* height: 400px !important; */
    /* width: 100%; */
    min-height: 100%;
    /* height: 480px; */
}

.cta-intelligence .txt {
    border: 1px solid #ffffff14;
    padding: 60px 300px;
}

.cta-intelligence .txt-btn {
    background: #ffffff;
    color: #000000;
}

.cta-intelligence .link {
    color: #ffffff;
}

@media (max-width: 425px) {
    .cta-intelligence .txt {
        padding: 60px 0px;
    }
}



/* *********************************
          INDUSTRY PAGE
   ******************************** */

.main-logos img {
    width: 100%;
}

.scraping .sec {
    background: #fff;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    overflow: hidden;
}

/* Border on every column */
.scraping .row>[class*="col"] {
    /* border-right:1px solid #eee; */
    border-bottom: 1px solid #eee;
}

/* Remove right border of last column */
.scraping .row>[class*="col"]:last-child {
    border-right: 0;
}

/* Content */
.scraping .item,
.scraping .cta,
.scraping .logo-box {
    padding: 35px 22px;
    height: 100%;
    border: 0;
}

.scraping .item {
    min-height: 150px;
}

.scraping .item h5,
.xbyte-industry-scraping-section .xbyte-industry-scraping-box h3 {
    font-weight: var(--xbyte-font-semibold);
    font-size: var(--xbyte-font-24);
    line-height: var(--xbyte-line-34);
    color: var(--xbyte-color-black);
}

.scraping .item span {
    display: block;
    width: 49px;
    height: 3px;
    background: #E61F2D;
    margin-bottom: 18px;
    margin-top: 15px;
}

.scraping .item p,
.xbyte-industry-scraping-section .xbyte-industry-scraping-box p {
    font-weight: var(--xbyte-font-regular);
    font-size: var(--xbyte-font-16);
    line-height: var(--xbyte-line-22);
    color: var(--xbyte-color-dark-grey);
}

.scraping .logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    min-height: 100%;
}

.scraping .logo-box h1 {
    font-size: 130px;
    color: #f1f1f1;
    margin: 0;
    line-height: 1;
}

.scraping .cta,
.xbyte-industry-scraping-section .cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.scraping .cta p,
.xbyte-industry-scraping-section .cta p {
    font-weight: var(--xbyte-font-medium);
    font-size: var(--xbyte-font-18);
    line-height: var(--xbyte-line-25);
    text-align: var(--xbyte-text-center);
}

.scraping .cta a {
    text-decoration: none;
    color: #111;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.scraping .cta a::after {
    content: "\F135";
    font-family: bootstrap-icons;
    color: #ff3b3b;
    margin-left: 2px;
    font-size: 26px;
    width: 20px;
    align-self: center;
    transform: rotate(-45deg);
}

@media(max-width:991px) {

    .scraping .row>[class*="col"] {
        border-right: 0;
    }

    .scraping .logo-box {
        min-height: 220px;
    }

    .scraping .logo-box h1 {
        font-size: 90px;
    }
}

.border-light1 {
    border: 1px solid #ffffff1c;
}

/* Container wrapper just to showcase the grid nicely */
.grid-container {
    margin: 40px auto;
    padding: 0 15px;
}

/* Modern Responsive CSS Grid System */
.grid-ind .logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

/* Individual Grid Box Items */
.grid-ind .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* aspect-ratio: 1.5 / 1; */
    /* Matches the rectangular aspect ratio in your crop */
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background-color: #ffffff;
    padding: 20px 10px;
    text-align: center;
    box-sizing: border-box;
}

/* 4-Column Checkerboard pattern math mapping the image exactly */
.grid-ind .logo-grid .grid-item:nth-child(1),
.grid-ind .logo-grid .grid-item:nth-child(3),
.grid-ind .logo-grid .grid-item:nth-child(6),
.grid-ind .logo-grid .grid-item:nth-child(8) {
    background-color: var(--bg-light-gray);
}

/* Logo Image Style */
.grid-ind .grid-item img {
    /* max-width: 40px; */
    height: auto;
    margin-bottom: 14px;
}

/* Small Label Styles */
.grid-ind .grid-item span {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--logo-text-color);
    text-transform: uppercase;
    font-family: var(--xbyte-font-primary);
}



/* Tablet and Mobile Breakpoint */
@media (max-width: 768px) {
    .grid-ind .logo-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Scales to 2 columns seamlessly */
    }

    /* Reset color rules dynamically for a perfect 2-column checkerboard */
    .grid-ind .logo-grid .grid-item {
        background-color: #ffffff;
    }

    .grid-ind .logo-grid .grid-item:nth-child(1),
    .grid-ind .logo-grid .grid-item:nth-child(4),
    .grid-ind .logo-grid .grid-item:nth-child(5),
    .grid-ind .logo-grid .grid-item:nth-child(8) {
        background-color: var(--bg-light-gray);
    }
}

/* Ultra Small Screens */
@media (max-width: 400px) {
    .grid-ind .grid-item {
        aspect-ratio: 1.2 / 1;
        /* Prevents text crowding on tiny viewports */
    }
}

@media (max-width: 1440px) {


    .grid-ind .logo-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .logos {
        flex-wrap: wrap;
    }

    .grid-ind .logo-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-ind .logo-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 425px) {
    .grid-ind .logo-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .ind-txt {
        text-align: left !important;
    }
}

.main-logos .box {
    padding: clamp(10px, 2vw, 15px);
    background-color: var(--xbyte-color-bg-light);
}

.main-logos .box .count-box-industry {
    padding: 7px clamp(20px, calc(15.43px + 1.43vw), 36px);
}

.main-logos .box .count-box-industry .box-icon {
    color: var(--color-brand-red);
}

.count-box-industry .ind-txt .top p {
    font-weight: var(--fw-semibold);
    font-size: var(--xbyte-font-24);
    line-height: var(--xbyte-line-34);
    letter-spacing: 0%;
    color: var(--xbyte-color-dark-grey);
}

/*------------------------------------
         DATA DELIVERY
-----------------------------------------/ */
.data-delivery-ind {
    background-image: url("industry/dd-ind.png");
}

/* Target Section Wrapper */
.delivery-ind .delivery-section {
    background-color: var(--bg-dark);
    padding: 60px 0;
    display: flex;
    align-items: center;
    min-height: 250px;
}

/* Outlined Outer Card Area from the image */
.delivery-ind .delivery-card {
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: clamp(30px, 5vw, 60px) clamp(20px, 8vw, 140px);
    position: relative;
    background: linear-gradient(135deg, #0d0e12 0%, #08090c 100%);
}

/* Main Responsive Grid Layout containing Title, Description, and Icons */
.delivery-ind .delivery-grid {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    align-items: center;
    gap: 30px;
    position: relative;
}

/* Heading Styling with Inline Red Accent Line & Dot */
.delivery-ind .title-wrapper {
    margin-bottom: clamp(50px, 5vw, 100px);
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.delivery-ind .red-square-dot {
    width: 6px;
    height: 6px;
    background-color: var(--red-dot);
    flex-shrink: 0;
}

.delivery-ind .delivery-grid h2 {
    color: var(--xbyte-color-white);
    font-size: var(--xbyte-font-18) !important;
    font-weight: var(--xbyte-font-bold) !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
}

/* Central Description Context */
.delivery-ind .description-text {
    max-width: 420px;
    font-weight: var(--xbyte-font-regular);
    font-size: var(--xbyte-font-16);
    line-height: var(--xbyte-line-22);
    vertical-align: middle;
    color: var(--xbyte-color-grey-light-2);
}

/* Horizontal Timeline Line Behind Elements */
.delivery-ind .delivery-grid::before {
    content: "";
    position: absolute;
    left: 200px;
    right: 0;
    top: 50px;
    height: 1px;
    background: linear-gradient(90deg, var(--red-dot) 0%, rgba(255, 255, 255, 0.1) 100%);
    z-index: 1;
}

/* Format Icons Horizontal Node Track */
.delivery-ind .formats-track {
    display: flex;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.delivery-ind .format-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 66px;
    position: relative;
}

/* Thin top vertical line attached to the horizontal line */
.delivery-ind .format-node::before {
    content: "";
    width: 1px;
    height: 25px;
    /* background-color: rgba(255, 255, 255, 0.2); */
    margin-bottom: 5px;
}

.delivery-ind .format-node img {
    width: 47px;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.2));
}

/* Bottom Label beneath the connector dot */
.delivery-ind .format-node span {
    font-size: 0.65rem;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 15px;
    position: relative;
}

/* Tiny Connector node square directly above the label text */
.delivery-ind .format-node span::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: #444;
}

/* Make fading effect at the end of the chain like the target image */
.delivery-ind .format-node:nth-last-child(2) {
    opacity: 0.6;
}

.delivery-ind .format-node:last-child {
    opacity: 0.25;
}

/* Responsive Media Adjustments */
@media (max-width: 1200px) {
    .delivery-ind .delivery-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .delivery-ind .delivery-grid::before {
        display: none;
        /* Hide background bar line when layout drops vertically */
    }

    .delivery-ind .description-text {
        max-width: 100%;
    }

    .delivery-ind .formats-track {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 10px;
    }
}

.grid-border {
    border: 1px solid #80808042;
    padding: 30px;
}


/* *********************************
          BRAND PAGE
   ******************************** */


/* ======================= DATA SOURCES SECTION ======================== */
/* --- Desktop Staggered Layout --- */
.outcomes-wrapper {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* Row 1 takes the normal left alignment */
.row-1 {
    padding-right: 12%;
    /* Leaves room on the right side */
}

/* Row 2 is indented from the left to create the exact staggered offset */
.row-2 {
    padding-left: 12%;
    /* Shifts the entire bottom row to the right */
}

.item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Icon Container & Left Line Accent */
.icon-wrapper {
    position: relative;
    padding-left: 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    height: 24px;
}

/* Vertical grey line accent beside the icon */
.icon-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: -4px;
    bottom: -4px;
    width: 1px;
    background-color: #dcdcdc;
}

/* SVG Icon */
.icon {
    width: 22px;
    height: 22px;
    display: block;
}

/* Label Styling */
.label {
    font-size: 15px;
    font-weight: 500;
    color: #222222;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

/* --- Tablet Responsive Layout --- */
@media (max-width: 900px) {
    .outcomes-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 36px 24px;
    }

    .row-1,
    .row-2 {
        padding: 0;
    }
}

/* --- Mobile Responsive Layout --- */
@media (max-width: 600px) {
    .outcomes-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 16px;
    }
}

@media (max-width: 400px) {
    .outcomes-wrapper {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* ======================= EXTRACTION SERVICES SECTION ======================== */

pre code {
    color: #000000 !important;
}

.rg-dataset-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 16px;
}

.rg-dataset-main-title {
    margin: 0;
    color: #8a8a8a;
    font-size: clamp(30px, 3.3vw, 52px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: clamp(3px, 0.5vw, 8px);
    text-transform: uppercase;
}

.rg-dataset-main-title span {
    display: block;
    color: #292929;
    font-size: 0.78em;
    font-weight: 500;
    letter-spacing: clamp(2px, 0.4vw, 6px);
}

.rg-dataset-tabs {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 6px;
    background: #f5f5f5;
}

.rg-dataset-tab {
    min-width: 82px;
    height: 42px;
    padding: 8px 18px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #202020;
    font-family: var(--xbyte-font-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.rg-dataset-tab:hover {
    background: #000000;
}

.rg-dataset-tab.active {
    background: #202020;
    color: #ffffff;
}

.rg-dataset-box {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.5fr);
    align-items: center;
    gap: clamp(35px, 5vw, 85px);
    min-height: 410px;
    padding: clamp(8px, 5vw, 30px);
    background: #fafafa;
}

.rg-dataset-content {
    width: 100%;
    max-width: 460px;
}

.rg-dataset-content h3 {
    margin: 0 0 20px;
    color: #141414;
    font-size: clamp(28px, 2.3vw, 40px);
    font-weight: 500;
    line-height: 1.2;
}

.rg-dataset-content p {
    margin: 0 0 30px;
    color: #333333;
    font-size: clamp(14px, 1vw, 17px);
    font-weight: 400;
    line-height: 1.55;
}

.rg-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 11px 18px;
    border: 1px solid #e61f2d;
    background: #e61f2d;
    color: #ffffff;
    font-family: var(--xbyte-font-primary);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.rg-download-btn span {
    font-size: 18px;
    line-height: 1;
}

.rg-download-btn:hover {
    background: #c91623;
    border-color: #c91623;
    transform: translateY(-2px);
}

.rg-dataset-preview {
    width: 100%;
    min-width: 0;
    height: 400px;
    padding: clamp(16px, 2vw, 28px);
    background: #f1f1f1;
}

.rg-tab-content {
    display: none;
    width: 100%;
    min-width: 0;
}

.rg-tab-content.active {
    display: block;
}

.rg-dataset-table th {
    border: 0;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
}

.rg-dataset-table td {
    border: 0;
}

.rg-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.rg-dataset-table {
    border: 0;
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    table-layout: auto;
    background: transparent;
}

.rg-dataset-table th,
.rg-dataset-table td {
    padding: 11px 12px;
    color: #3f3f3f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
}

.rg-dataset-table th {
    border-right: 1px solid #ffffff;
    border-bottom: 0;
    background: #202020;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}

.rg-dataset-table th:first-child {
    text-align: center;
}

.rg-dataset-table td:first-child {
    text-align: center;
}

.rg-dataset-table tbody tr:nth-child(even) {
    background: #e7e7e7;
}

.rg-dataset-table tbody tr:nth-child(odd) {
    background: #f6f6f6;
}

.rg-dataset-table tbody tr:hover {
    background: #dedede;
}

.rg-json-wrapper {
    width: 100%;
    max-width: 100%;
    height: 330px;
    overflow: auto;
    background: #202020;
}

.rg-json-code {
    min-width: 540px;
    min-height: 100%;
    margin: 0;
    padding: 24px;
    color: #eeeeee;
    font-family: var(--xbyte-font-primary);
    font-size: 13px;
    line-height: 1.65;
    tab-size: 4;
    white-space: pre;
}

@media (max-width: 1199px) {

    .rg-dataset-box {
        grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.3fr);
        gap: 35px;
        padding: 45px 30px;
    }

    .rg-dataset-table th,
    .rg-dataset-table td {
        padding: 10px;
        font-size: 12px;
    }
}

@media (max-width: 991px) {
    .use-case .brand-box {
        padding: 0px 0px;
    }

    .rg-dataset-header {
        align-items: center;
    }

    .rg-dataset-box {
        display: flex;
        flex-direction: column;
        min-height: auto;
        gap: 32px;
    }

    .rg-dataset-preview {
        order: 1;
        width: 100%;
        min-width: 0;
    }

    .rg-dataset-content {
        order: 2;
        width: 100%;
        max-width: 700px;
    }
}

@media (max-width: 767px) {
    .rg-dataset-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .rg-dataset-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        margin-bottom: 20px;
    }

    .rg-dataset-tabs {
        width: 100%;
    }

    .rg-dataset-tab {
        flex: 1;
        min-width: 0;
    }

    .rg-dataset-box {
        gap: 32px;
        padding: 32px 18px;
    }

    .rg-dataset-content h3 {
        margin-bottom: 15px;
    }

    .rg-dataset-content p {
        margin-bottom: 24px;
    }

    .rg-download-btn {
        width: 100%;
    }

    .rg-dataset-preview {
        padding: 12px;
    }

    .rg-json-wrapper {
        height: 360px;
    }
}

@media (max-width: 479px) {
    .rg-dataset-main-title {
        font-size: 27px;
        letter-spacing: 2px;
    }

    .rg-dataset-main-title span {
        font-size: 20px;
        letter-spacing: 2px;
        margin-bottom: 5px;
    }

    .rg-dataset-box {
        padding: 26px 14px;
    }

    .rg-dataset-preview {
        padding: 8px;
    }

    .rg-dataset-table {
        min-width: 800px;
    }

    .rg-json-code {
        min-width: 500px;
        padding: 18px;
        font-size: 12px;
    }
}

/* Dark Card Styling */
.extraction .catalog-card {
    background: #7c78780d;
    /* border: 1px solid #1c1a29; */
    /* border-radius: 8px; */
    padding: 28px 24px;
    height: 100%;
}

.extraction .catalog-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 40px;
    color: #ffffff;
}

/* Flexbox Tag Grid */
.extraction .tags-wrapper {
    margin-top: 45px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.extraction .tag {
    background-color: #ffffff14;
    color: #E0E0E0;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 400;
    transition: all 0.2s ease;
}

.extraction .tag:hover {
    background-color: #252336;
    color: #ffffff;
}

.extraction {
    background: url(http://xbyteio.xbytedev.co/wp-content/uploads/2026/07/data-intelligence-1.png) center / cover no-repeat;
}

.brand-box .brd {
    padding: 10px 0px;
    border-top: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
}

/*use-cases*/
.use-case .brand-box {
    padding: 0px 40px;
    margin-bottom: 55px;
}

.rg-dataset-section,
.rg-dataset-section * {
    box-sizing: border-box;
}

.rg-dataset-section {
    width: 100%;
    background: #ffffff;
    overflow: hidden;
}

pre code {
    color: #000000 !important;
}


/* New style css Start Css */

/* =========================
       SUCCESS STORIES
    ========================= */

.xbyio-success .card {
    position: relative;
    height: 480px;
    overflow: hidden;
    background: #F5F5F5;
    cursor: pointer;
    border: none;
}

.row.xbyio-success {
    row-gap: 35px;
}

.xbyio-success .card .card-content1 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    /* Horizontal */
    align-items: center;
    /* Vertical */
    text-align: left;
    padding: clamp(20px, 3vw, 80px);
}

/* Image */
.xbyio-success .card-image {
    position: absolute;
    inset: 0;
    transition: .5s ease;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content */
.card-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: .5s ease;
}

/* Number */
.card-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: var(--xbyte-font-18) !important;
    font-weight: var(--xbyte-font-medium) !important;
    line-height: var(--lh-ex3) !important;
    color: var(--color-white);
    transition: .5s ease;
}

/* Text */
.card:hover .card-info h2 {
    color: var(--color-white) !important;
    font-size: var(--fs-large) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-ex5) !important;
}

.card:hover .card-info .p-info {
    color: var(--dark1) !important;
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-h3-32) !important;
}

.card:hover .card-info .p-info1 {
    color: var(--p-dark) !important;
    font-size: var(--fs-h6) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-ex22) !important;
}

.card:hover .card-number {
    color: var(--dark1) !important;
    font-size: var(--fs-medium) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-ex3) !important;
}

.card-info1 p {
    color: var(--clr) !important;
    font-size: var(--fs-h5) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-main) !important;
}

.card-info p {
    color: #fff;
    line-height: 1.6;
    transition: .5s;
}

/* Arrow */
.card-arrow {
    visibility: hidden;
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff2b2b;
    font-size: 26px;
    text-decoration: none;
}

.card:hover .card-image {
    opacity: 0;
    visibility: hidden;
}

.card:hover .card-content {
    justify-content: flex-start;
}

.card:hover .card-info h2,
.card:hover .card-info h3 {
    color: #000 !important;
}

.card:hover .card-info p {
    color: #000 !important;
}

.card:hover .card-info p:first-child {
    color: #000 !important;
    font-weight: 600 !important;
}

/* Show Arrow */
.card:hover .card-arrow {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.circle-main {
    justify-content: center;
    /* Horizontal Center */
    align-items: center;
    /* Vertical Center */
    overflow: visible;
    width: 190px;
    height: 190px;
    border: 2px solid #d8d8d8;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Text */
.circle-main .content {
    text-align: center;
    color: #494343;
}

.circle-main .content h2 {
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
}

.circle-main .content p {
    font-size: 16px;
    margin-top: 18px;
    font-weight: 300;
}

/* Arrow Orbit */
.circle-main .orbit {
    position: absolute;
    inset: 0;
    transition: transform .8s ease;
}

/* Red Arrow */
.circle-main .arrow {
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid #ff1d25;
    transition: transform .8s ease;
}

/* Hover Animation */
.circle-main:hover .orbit {
    transform: rotate(-90deg);
}

.xbyio-success-col-none {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width:991px) {
    .xbyio-success-col-none {
        display: none !important;
    }
}

@media (max-width:425px) {
    .xbyio-success .card {
        margin-bottom: 30px;
    }

    .card-txt {
        margin-bottom: 0px !important;
        height: 200px !important;
    }

    .success .card .card-content1 {
        padding: 0px 20px 0px 20px;
    }

    .circle-main {
        margin: 0px 0px 30px 0px;
    }
}

/* <!-- ***** SUCCESS STORIES Section End ***** --> */

/* <!-- ***** Crawlers- Main Page Start ***** --> */

/* banner start  */
.apis-crawlers-main-section {
    padding: 120px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at top right, #220008, transparent 40%), #050505;
    color: #fff;
}

.apis-crawlers-main-content {
    width: 100%;
    max-width: 900px;
}

ol.apis-crawlers-main-ol {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0;
    gap: 5px;
}

.apis-crawlers-main-ol li a,
.apis-crawlers-main-ol li {
    font-weight: 400;
    font-size: 18px;
    line-height: 25.2px;
    color: #E2E2E2;
}

li.apis-crawlers-breadcrumb-active {
    color: #E61F2D;
}

h1.apis-crawlers-main-heading {
    font-weight: 700;
    font-size: 56px;
    line-height: 76px;
}

.api-hero h1 {
    margin: 0 0 15px;
    font-family: var(--xbyte-font-primary);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-semibold);
    line-height: var(--xbyte-line-76);
}

.api-hero p {
    margin: 0 auto 30px;
    color: #E2E2E2;
    font-size: var(--xbyte-font-20);
    line-height: var(--xbyte-line-body);
}

.api-search {
    max-width: 360px;
    height: 40px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    background: #FFFFFF14;
    border-top: 1px solid #E0E0E014
}

.api-search span {
    color: #ff2438;
}

.api-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--xbyte-color-white);
    font-size: var(--xbyte-font-16);
}

.api-search input::placeholder {
    color: #999;
}

.api-search b {
    color: #aaa;
    font-size: 16px;
}

/* Responsive */
@media(max-width:768px) {
    .api-hero {
        min-height: 450px;
    }

    .api-hero h1 {
        font-size: 32px;
    }

    .api-hero p {
        font-size: 14px;
    }

    .api-hero p br {
        display: none;
    }
}

/* banner end  */

.xbyte-crawler-main-heading {
    font-size: var(--xbyte-font-48);
    line-height: var(--xbyte-line-64);
    font-weight: var(--xbyte-font-bold);
    color: var(--xbyte-color-dark);
    text-align: var(--xbyte-text-left);
    text-transform: var(--xbyte-text-uppercase);
    max-width: 50%;
    letter-spacing: 8%;
}

.xbyte-crawler-main-heading span {
    font-size: var(--xbyte-font-48);
    line-height: var(--xbyte-line-64);
    font-weight: var(--xbyte-font-bold);
    color: var(--xbyte-color-grey);
}

.xbyte-crawler-main-paragraph {
    font-size: var(--xbyte-font-20);
    line-height: var(--xbyte-line-28);
    color: var(--xbyte-color-grey-3);
    font-weight: var(--xbyte-font-semibold);
    max-width: 50%;
}

.xbyte-crawler-main-box {
    border: 1px solid #EEEFEE;
    margin: 12px 0px;
}

.xbyte-crawler-main-box .xbyte-crawler-catagory-box {
    background: #EEEFEE;
    padding: 5px 24px;
}

.xbyte-crawler-main-box .xbyte-crawler-catagory-box {
    display: block;
    font-size: var(--xbyte-font-12);
    line-height: var(--xbyte-line-24);
    font-weight: var(--xbyte-font-medium);
    color: var(--xbyte-color-black);
    text-align: var(--xbyte-text-left);
}

.xbyte-crawler-content-main {
    padding: 24px;

}

.xbyte-crawler-content-main .xbyte-crawler-logo-img {
    border: 1px solid #EEEFEE;
    padding: 16px;
    background: var(--xbyte-color-white);
    display: inline-block;
}

.xbyte-crawler-content-main .xbyte-crawler-box-head {
    font-size: var(--xbyte-font-24);
    line-height: var(--xbyte-line-28);
    font-weight: var(--xbyte-font-bold);
    color: var(--xbyte-color-dark);
    margin-top: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.xbyte-crawler-content-main .xbyte-crawler-box-paragraph,
.xbyte-crawler-content-main .xbyte-crawler-box-paragraph p {
    font-size: var(--xbyte-font-16);
    line-height: var(--xbyte-line-19);
    font-weight: var(--xbyte-font-medium);
    color: var(--xbyte-color-grey-3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

/* ==============================
   CRAWLER CATEGORY TABS
================================ */
.xbyte-crawler-tabs {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 7px 0px;
    padding: 10px 0px;
}

.xbyte-crawler-tab {
    border: 0;
    background: transparent;
    text-align: var(--xbyte-text-left);
    padding: 8px 16px;
    font-size: var(--xbyte-font-14);
    color: #222;
    cursor: pointer;
}

.crawler-tabs-main-box-content {
    border-left: 1px solid #EEEFEE;
    padding-left: 20px;
}

.xbyte-crawler-tab.active {
    color: var(--xbyte-color-primary);
    background: #0000000A;
}

.xbyte-crawler-tab:hover {
    color: var(--xbyte-color-primary);
}

@media(max-width:767px) {
    .xbyte-crawler-tabs {
        margin-bottom: 30px;
    }
}

.xbyte-industry-cta-section {
    position: relative;
    overflow: hidden;
    /* Fallback background color */
    background-color: var(--xbyte-color-black, #090909);
    /* Corner gradient effects */
    background-image: radial-gradient(ellipse 70% 130% at 100% 20%, rgba(105, 24, 40, 0.42) 0%, rgba(70, 19, 31, 0.30) 25%, rgba(42, 14, 21, 0.20) 45%, transparent 72%), radial-gradient(ellipse 55% 80% at 0% 100%, rgba(25, 25, 55, 0.25) 0%, rgba(16, 17, 34, 0.15) 35%, transparent 65%);
    background-repeat: no-repeat;
    background-size: cover;
    padding: clamp(50px, 8vw, 120px) clamp(20px, 5.5vw, 80px);
}

.crawler-cta-main {
    padding: 50px 0px;
    background: var(--xbyte-color-black);
}

.xbyte-industry-cta-main {
    width: 100%;
    max-width: clamp(50%, 600px, 100%);
    margin: auto;
}

.crawler-cta-main .crawler-cta-heading,
.xbyte-industry-cta-section .xbyte-industry-cta-main .crawler-cta-heading {
    font-weight: var(--xbyte-font-semibold);
    font-size: var(--xbyte-font-40);
    line-height: var(--xbyte-line-54);
    text-align: var(--xbyte-text-center);
    color: var(--xbyte-color-white);
    text-transform: capitalize;
}

.crawler-cta-paragraph {
    font-size: var(--xbyte-font-16);
    line-height: var(--xbyte-line-22);
    font-weight: var(--xbyte-font-regular);
    color: var(--xbyte-color-grey-light);
    text-align: var(--xbyte-text-center);
}

.crawler-cta-button-main {
    text-align: var(--xbyte-text-center);
    margin: clamp(20px, 2.5vw, 35px) 0 0;
    gap: 0px 25px;
    display: flex;
    justify-content: var(--xbyte-text-center);
    align-items: var(--xbyte-text-center);
}

.crawler-cta-button-main .crawler-cta-btn-white {
    color: var(--xbyte-color-black);
    padding: 6px 12px;
    background: var(--xbyte-color-white);
    font-size: var(--xbyte-font-16);
    line-height: var(--xbyte-line-22);
    font-weight: var(--xbyte-font-medium);
    text-decoration: none;
}

.crawler-cta-button-main .crawler-cta-btn-black {
    color: var(--xbyte-color-white);
    font-size: var(--xbyte-font-16);
    line-height: var(--xbyte-line-22);
    font-weight: var(--xbyte-font-medium);
    text-decoration: none;
}

.quick-form {
    margin-top: 35px;
    padding: var(--xbyte-font-16);
    background: #F5F5F5;
    border: 2px solid #EEEEEE;
    border-radius: 4px;
}

.quick-form h3 {
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    color: var(--xbyte-color-dark);
}

.form-group {
    margin: 10px 0px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: var(--xbyte-font-medium);
    font-size: var(--xbyte-font-14);
    color: #1B1C1A;
}

.form-group input,
.form-group select {
    width: 100%;
    height: 45px;
    padding: 0 12px;
    background: var(--xbyte-color-white);
    font-size: var(--xbyte-font-14);
    color: #CCCCCC;
    outline: none;
    border: 1px solid #EEEFEE;
    border-radius: 2px;
}

.form-group input::placeholder {
    color: #c9c9c9;
}

.form-group select {
    appearance: auto;
}

.inquiry-btn {
    margin-top: 24px;
    padding: 8px 12px;
    border: 0;
    background: var(--xbyte-color-primary);
    color: var(--xbyte-color-white);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--xbyte-color-primary);
}

.inquiry-btn span {
    font-size: var(--xbyte-font-32);
    line-height: 1;
}

/* Responsive */
@media(max-width:767px) {
    .quick-form {
        padding: 25px 18px;
    }

    .quick-form h2 {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .form-group label {
        font-size: 18px;
    }

    .form-group input,
    .form-group select {
        height: 55px;
        font-size: 16px;
    }

    .inquiry-btn {
        font-size: 18px;
    }
}

/* pagination start  */
.crawler-pagination-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.crawler-pagination-container a.crawler-page-link {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dedede;
    background: #fff;
    color: #222;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
}

/* Number buttons */

.crawler-pagination-container .crawler-page-link:not(:first-child):not(:last-child) {
    width: auto;
    height: auto;
    border: 0;
    font-size: 20px;
    font-weight: 600;
    padding: 0 15px;
}

/* Active number */
.crawler-pagination-container a.crawler-page-link.active {
    color: #ed1b2f;
    background: transparent;
}

/* Next button */
.crawler-pagination-container a.crawler-page-link:last-child {
    background: #211f20;
    color: #fff;
    border-color: #211f20;
}

/* Disabled */
.crawler-pagination-container a.crawler-page-link:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Hover */

/* Mobile */
@media(max-width:767px) {
    .crawler-pagination-container {
        gap: 20px;
    }

    .crawler-pagination-container a.crawler-page-link {
        width: 45px;
        height: 45px;
        font-size: 25px;
    }

    .crawler-pagination-container a.crawler-page-link:not(:first-child):not(:last-child) {
        font-size: 22px;
        padding: 0 8px;
    }
}

/* pagination end  */
/* <!-- ***** Crawlers- Main Page End ***** --> */

@media (max-width: 575px) {
    .security-card img {
        width: 79px;
        max-width: 100%;
        display: block;
    }

    .security-card {
        height: 250px !important;
    }

    .xbyte-data-security-col {
        padding: 0px !important;
    }
}

@media (max-width: 1024px) {
    .security-card {
        height: 310px;
        margin-bottom: 20px;
    }

    .security-card img {
        width: 90px;
    }

    .xbyte-data-security-card img {
        width: 90px !important;
    }

    .xbyte-data-security-card {
        padding: 20px;
    }
}

/* new section start  */
.xbyte-sec-com-head {
    letter-spacing: 8%;
    color: #1d1d1d;
    text-align: left;
    font-family: var(--xbyte-font-primary);
    font-size: clamp(2rem, 4vw, 48px) !important;
    line-height: clamp(42px, 5vw, 64px) !important;
    font-weight: 500;
    position: relative;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;

}

.xbyte-section-com-head-black-bg,
.xbyte-sec-com-head-left {
    letter-spacing: 8%;
    color: #1d1d1d;
    text-align: left;
    font-family: var(--xbyte-font-primary);
    font-size: clamp(2rem, 4vw, 48px) !important;
    line-height: clamp(42px, 5vw, 64px) !important;
    font-weight: 500;
    position: relative;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: left;
    position: relative;
}

.xbyte-section-com-head-black-bg .xbyte-sec-com-head-line1 {
    color: #fff !important;
}

.xbyte-section-com-head-black-bg .xbyte-sec-com-head-line2 {
    color: #E61F2D !important;
    font-weight: var(--xbyte-font-bold);
}

.xbyte-section-com-head-black-bg::before,
.xbyte-sec-com-head-left::before {
    content: "";
    display: block;
    position: absolute;
    top: -20px;
    width: 80px;
    height: 3px;
    margin: 0 auto 25px;
    background: #c50000;
    left: 0px !important;
}

.xbyte-sec-com-head-left {
    position: relative;
}

.xbyte-sec-com-head::before {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    margin: 0 auto 25px;
    background: #c50000;
}

.xbyte-sec-com-head span.light-head {
    color: var(--color-white) !important;
}

.xbyte-sec-com-head span,
.xbyte-section-com-head-black-bg span,
.xbyte-sec-com-head-left span {
    display: block;
}

.xbyte-sec-com-head-line1,
.xbyte-sec-com-head-left .xbyte-sec-com-head-line1 {
    color: #111;
}

.xbyte-sec-com-head-line2,
.xbyte-sec-com-head-left .xbyte-sec-com-head-line2 {
    color: #8d8d8d;
    font-weight: var(--xbyte-font-bold);
}

@media (max-width:768px) {
    .xbyte-sec-com-head span {
        display: inline;
    }

    .xbyte-sec-com-head-line2::before {
        content: " ";
    }

    .xbyte-data-security-card {
        height: 380px !important;
    }
}

@media (max-width:525px) {
    .xbyte-data-security-card {
        height: 300px !important;
    }

    .xbyte-data-security-card img {
        width: 85px !important;
    }

    .xbyte-data-security-section-row-1 {
        margin-right: 0px !important;
        margin-left: 0px !important;
    }
}

.xbyte-data-security-card {
    height: 459px;
    padding: 28px;
    border: 1px solid var(--xbyte-color-grey-light-2);
    background: var(--xbyte-color-white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: .3s ease;
    margin: 12px 0px;
}

.xbyte-data-security-card-sec-txt .xbyte-data-security-card-sec-txt-head {
    color: var(--xbyte-color-dark) !important;
}

.xbyte-data-security-card img {
    width: 150px;
    max-width: 100%;
    display: block;
}

.xbyte-data-security-card-sec-txt .xbyte-data-security-card-sec-txt-p {
    margin: 0;
    max-width: 320px;
    font-size: var(--xbyte-font-20);
    line-height: var(--xbyte-line-heading);
    color: var(--xbyte-color-grey-3);
}

/* new section end  */

/* logo slider start  */
.xb-logo-section {
    width: 100%;
    min-height: 90px;
    padding: 13px 40px;
    display: grid;
    align-items: center;
    gap: 40px;
    background: #ffffff;
    overflow: hidden;
}

.xb-slider {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000000 7%, #000000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000000 7%, #000000 93%, transparent 100%);
}

.xb-slider-track {
    width: max-content;
    display: flex;
    animation: xbLogoScroll 25s linear infinite;
    will-change: transform;
}

.xb-logo-list {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 90px;
    padding-right: 90px;
}

.xb-logo-item {
    width: 160px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.xb-logo-item img {
    width: 100%;
    max-width: 160px;
    max-height: 52px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.9;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.xb-logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

.xb-slider:hover .xb-slider-track {
    animation-play-state: paused;
}

@keyframes xbLogoScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 1199px) {
    .xb-logo-section {
        gap: 65px;
        padding: 24px 25px;
    }

    .xb-logo-item {
        width: 145px;
    }
}

@media (max-width: 991px) {
    .xb-logo-section {
        gap: 20px;
        padding: 22px 20px;
    }

    .xb-logo-item {
        width: 130px;
        height: 60px;
    }
}

@media (max-width: 767px) {
    .xb-logo-section {
        gap: 45px;
        --slider-speed: 18s;
        min-height: auto;
        padding: 25px 15px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
    }

    .xb-slider {
        width: calc(100% + 30px);
        margin-left: -15px;
    }

    .xb-logo-item {
        width: 120px;
        height: 55px;
    }
}

@media (max-width: 480px) {
    .xb-logo-list {
        gap: 35px;
    }

    .xb-logo-section {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .xb-logo-item {
        width: 105px;
    }

    .xb-logo-list {
        padding-right: 35px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xb-slider-track {
        animation-play-state: paused;
    }
}

/* logo slider end  */

/* ==============================
    APP CATEGORY SECTION
============================== */

.app-category-section {
    width: 100%;
    padding: 30px 0 0;
    background: #ffffff;
    overflow: hidden;
}

.app-category-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.app-category-list {
    display: grid;
    grid-template-columns: repeat(8, minmax(210px, 1fr));
    min-width: 1680px;
}

.app-category-card {
    min-height: 220px;
    padding: 35px 20px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    text-align: center;
    background: #ffffff;
    border-right: 1px solid #eeeeee;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.app-category-card:first-child {
    border-left: 1px solid #eeeeee;
}

.app-category-card:hover {
    background: #fafcff;
}

.app-category-icon {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.app-category-icon img {
    width: 56px;
    height: 56px;
    display: block;
}

.app-category-title {
    margin: 0;
    font-size: var(--xbyte-font-20) !important;
    line-height: var(--xbyte-line-normal) !important;
    font-weight: var(--xbyte-font-regular) !important;
    color: var(--xbyte-color-dark) !important;
    white-space: nowrap;
}

/* Custom Scrollbar */

.app-category-scroll::-webkit-scrollbar {
    height: 6px;
}

.app-category-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.app-category-scroll::-webkit-scrollbar-thumb {
    background: #b8b8b8;
    border-radius: 10px;
}

.app-category-scroll::-webkit-scrollbar-thumb:hover {
    background: #888888;
}

/* ==============================
    RESPONSIVE
============================== */

@media (max-width: 1199px) {
    .app-category-list {
        grid-template-columns: repeat(8, 210px);
        min-width: max-content;
    }

    .app-category-card {
        min-height: 205px;
    }
}

@media (max-width: 767px) {
    .app-category-section {
        padding-top: 15px;
    }

    .app-category-list {
        grid-template-columns: repeat(8, 175px);
    }

    .app-category-card {
        min-height: 180px;
        padding: 25px 15px;
        gap: 18px;
    }

    .app-category-icon {
        width: 70px;
        height: 70px;
    }

    .app-category-icon img {
        width: 48px;
        height: 48px;
    }

    .app-category-title {
        white-space: normal;
    }
}

/* ==============================
    APP CATEGORY SECTION END
============================== */
/* ==============================
    METHODOLOGY SECTION START
============================== */

.methods-section {
    border-top: 1px solid #ededed;
    border-left: 1px solid #ededed;
}

.method-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 145px;
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
}

.method-number,
.method-content {
    padding: clamp(20px, 2vw, 32px);
}

.method-number {
    border-right: 1px solid #ededed;
}

.method-number::before {
    content: "";
    display: block;
    width: 52px;
    height: 1px;
    margin-bottom: 10px;
    background: #333;
}

.method-number span {
    display: block;
    font-size: clamp(30px, 2.5vw, 38px);
    font-weight: 600;
    line-height: 1;
}

.method-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 25px;
}

.method-content h3 {
    margin: 0;
    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 600;
    line-height: 1.3;
}

.method-content p {
    max-width: 330px;
    margin: 0;
    color: #555;
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 991.98px) {
    .method-card {
        grid-template-columns: 180px 1fr;
        min-height: auto;
    }

    .method-content {
        min-height: 180px;
    }
}

@media (max-width: 575.98px) {
    .method-card {
        grid-template-columns: 1fr;
    }

    .method-number {
        padding-bottom: 15px;
        border-right: 0;
        border-bottom: 1px solid #ededed;
    }

    .method-content {
        min-height: auto;
        padding-top: 20px;
        gap: 16px;
    }

    .method-number::before {
        width: 45px;
    }
}

/* ==============================
    METHODOLOGY SECTION END
============================== */

.crawler-search-box {
    max-width: 450px;
    margin: 20px auto 0px auto;
}

.apis-crawlers-main-section .apis-crawlers-main-content p {
    color: #E2E2E2;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

.crawler-tabs-main-box {
    position: sticky !important;
    top: 50px;
    height: fit-content;
}

.crawler-category-filter {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 7px 0px;
    padding: 10px 0px;
}

.crawler-category-filter .crawler-cat-link {
    padding: 8px 16px;
    display: inline-block;
    color: #222;
    border-radius: 8px;
    font-size: var(--xbyte-font-16);
    background: transparent;
    text-decoration: none;
}

.crawler-category-filter .crawler-cat-link:focus {
    outline: none;
}

.crawler-category-filter .crawler-cat-link.active {
    background: #0000000A;
    color: var(--xbyte-color-primary);
}

.xbyte-industry-heading-h2 {
    letter-spacing: 0;
    color: var(--dark1);
    text-align: left;
    font-size: var(--xbyte-font-56) !important;
    line-height: var(--lh-h2-76) !important;
    font-weight: var(--fw-bold) !important;
    position: relative;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.ind-txt .top h4 {
    font-weight: 800 !important;
}

.intel-hero .bottom p {
    font-weight: var(--fw-semibold);
    font-style: var(--xbyte-font-semibold);
    font-size: var(--xbyte-font-24);
    line-height: var(--xbyte-line-36);
}

.xbyte-cunsul-button-industry {
    text-align: var(--xbyte-text-right);
    padding: 40px 20px;
    color: var(--xbyte-color-white);
    font-size: var(--xbyte-font-20);
    line-height: var(--xbyte-line-28);
}

.xbyte-cunsul-button-industry a {
    color: var(--xbyte-color-white);
}

.xbyte-enterprice-solution p {
    font-weight: var(--xbyte-font-medium);
    font-size: var(--xbyte-font-18);
    line-height: var(--xbyte-line-25);
    text-align: var(--xbyte-text-justify);
}

.xbyte-industry-scraping-solution ul li,
.industry_platform_key_capabilities ul li {
    padding-left: 20px;
    list-style: none;
    position: relative;
}

.xbyte-industry-scraping-solution ul li::before,
.industry_platform_key_capabilities ul li::before {
    content: "\F26E";
    font-family: bootstrap-icons;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #e61e2a;
    font-size: 18px;
    font-weight: 700
}

.xbyte-industry-scraping-solution p {
    font-weight: var(--fw-semibold);
    font-size: var(--xbyte-font-20);
    line-height: var(--xbyte-line-28);
    color: var(--xbyte-color-grey-2) !important;
}

.xbyte-industry-smarter-bussiness-section .xbyte-industry-smarter-bussiness-box h3 {
    font-weight: var(--xbyte-font-semibold);
    font-size: var(--xbyte-font-24);
    line-height: var(--xbyte-line-34);
    color: var(--xbyte-color-white);
    margin: 15px 0px;
}

.xbyte-industry-smarter-bussiness-section .xbyte-industry-smarter-bussiness-box p {
    font-weight: var(--xbyte-font-regular);
    font-size: var(--xbyte-font-16);
    line-height: var(--xbyte-line-22);
    color: var(--xbyte-color-light-grey);
}

.xbyte-industry-modern-enterprice-section .xbyte-industry-modern-enterprice h3 {
    font-weight: var(--xbyte-font-semibold);
    font-size: var(--xbyte-font-40);
    line-height: var(--xbyte-line-54);
    color: var(--xbyte-color-dark);
}

.xbyte-industry-modern-enterprice-section .xbyte-industry-modern-enterprice h4 {
    font-weight: var(--xbyte-font-semibold);
    font-size: var(--xbyte-font-20);
    line-height: var(--xbyte-line-28);
    color: var(--xbyte-color-dark-grey);
}

.xbyte-industry-modern-enterprice-section .xbyte-industry-modern-enterprice p {
    font-weight: var(--xbyte-font-medium);
    font-size: var(--xbyte-font-18);
    line-height: var(--xbyte-line-25);
    text-align: var(--xbyte-text-justify);
    color: var(--xbyte-color-dark-grey);
}

.xbyte-industry-modern-enterprice-section .xbyte-industry-modern-enterprice .success-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.xbyte-industry-modern-enterprice-section .xbyte-industry-modern-enterprice .success-list li {
    position: relative;
    padding-left: var(--xbyte-line-25);
    margin-bottom: 10px;
    font-size: var(--xbyte-font-18);
}

.xbyte-industry-modern-enterprice-section .xbyte-industry-modern-enterprice .success-list li::before {
    content: "\F26E";
    font-family: bootstrap-icons;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--xbyte-color-primary);
    font-size: var(--xbyte-line-21);
    font-weight: var(--xbyte-font-bold);
}

.xbyte-industry-modern-enterprice-section .xbyte-industry-modern-enterprice .success-ul li::before {
    color: var(--xbyte-color-dark-grey);
}

/* New Style Css End */

/* <!-- ***** Blog Inner Page Start ***** --> */
/* <!-- ***** Blog Inner Page End ***** --> */

/* <!-- ***** APIs Inner Page Start ***** --> */
.apis-template-default.single-apis .ast-container {
    padding: 0;
    margin: 0px;
}

/* <!-- ***** APIs Inner Page End ***** --> */