/* ============================================================
   XT skin — the XTrady Bootstrap template, re-homed.
   The ONLY custom stylesheet this skin ships: skins/<name>/skin.css
   is auto-bundled by the registry in src/skin.js. Library css
   (Bootstrap, Swiper, Fancybox, Odometer, Font Awesome) comes from
   the CDN links in guest.html; this file must load after them.

   RULES THIS FILE OBEYS
   - Every selector is scoped under :where(.xt) (the wrapper the xt
     guest _layout renders). The bundle is global, so an unscoped rule
     would leak into the /user dashboard and /cp admin. :where() adds
     no specificity, so each rule keeps the weight the template gave
     it — a plain .xt prefix let the `* { margin: 0 }` reset outrank
     Bootstrap's .container { margin: auto } and shoved every section
     to the left. Page-level rules use body:has(.xt) / html:has(.xt),
     and the template tokens sit on :root:has(.xt) so skin.js's inline
     :root values still win.
   - Colours come from the HSL channel tokens below, which skin.js
     sets per theme. --black stays dark in both themes (it is the ink
     on accent buttons); page backgrounds use --page.
   ============================================================ */

/* ======================  Flaticon icon font  ====================== */

@font-face {
  font-family: "flaticon_xtrade";
  src: url(/assets/fonts/flaticon_xtradee3d9.woff2) format("woff2"), url(/assets/fonts/flaticon_xtradee3d9.woff) format("woff"), url(/assets/fonts/flaticon_xtradee3d9.ttf) format("truetype");
}
:where(.xt) i[class^=flaticon-]:before, :where(.xt) i[class*=" flaticon-"]:before {
  font-family: flaticon_xtrade !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(.xt) .flaticon-left-chevron:before {
  content: "\f101";
}

:where(.xt) .flaticon-right-arrow:before {
  content: "\f102";
}

:where(.xt) .flaticon-upper-right-arrow:before {
  content: "\f103";
}

:where(.xt) .flaticon-arrow-upper-right:before {
  content: "\f104";
}

:where(.xt) .flaticon-arrow-upper-right-1:before {
  content: "\f105";
}

:where(.xt) .flaticon-arrow:before {
  content: "\f106";
}

:where(.xt) .flaticon-arrow-1:before {
  content: "\f107";
}

:where(.xt) .flaticon-candlestick-chart:before {
  content: "\f108";
}

:where(.xt) .flaticon-christmas-stars:before {
  content: "\f109";
}

:where(.xt) .flaticon-sparkler:before {
  content: "\f10a";
}

:where(.xt) .flaticon-sparkler-1:before {
  content: "\f10b";
}

:where(.xt) .flaticon-star:before {
  content: "\f10c";
}

:where(.xt) .flaticon-compass:before {
  content: "\f10d";
}

:where(.xt) .flaticon-chart:before {
  content: "\f10e";
}

:where(.xt) .flaticon-chart-1:before {
  content: "\f10f";
}

:where(.xt) .flaticon-christmas-star:before {
  content: "\f110";
}

:where(.xt) .flaticon-star-1:before {
  content: "\f111";
}

:where(.xt) .flaticon-market-analysis:before {
  content: "\f112";
}

:where(.xt) .flaticon-stock-market-1:before {
  content: "\f113";
}

:where(.xt) .flaticon-balance-sheet:before {
  content: "\f114";
}

:where(.xt) .flaticon-graph:before {
  content: "\f115";
}

:where(.xt) .flaticon-forex:before {
  content: "\f116";
}

:where(.xt) .flaticon-right-arrow-1:before {
  content: "\f117";
}

:where(.xt) .flaticon-check:before {
  content: "\f118";
}

:where(.xt) .flaticon-search-interface-symbol:before {
  content: "\f119";
}

:where(.xt) .flaticon-down-arrow:before {
  content: "\f11a";
}

:where(.xt) .flaticon-cam-recorder:before {
  content: "\f11b";
}

:where(.xt) .flaticon-ux:before {
  content: "\f11c";
}

:where(.xt) .flaticon-live:before {
  content: "\f11d";
}

:where(.xt) .flaticon-live-1:before {
  content: "\f11e";
}

:where(.xt) .flaticon-favorites:before {
  content: "\f11f";
}

:where(.xt) .flaticon-star-2:before {
  content: "\f120";
}

:where(.xt) .flaticon-star-3:before {
  content: "\f121";
}

:where(.xt) .flaticon-sparkle:before {
  content: "\f122";
}

:where(.xt) .flaticon-star-4:before {
  content: "\f123";
}

:where(.xt) .flaticon-star-5:before {
  content: "\f124";
}

:where(.xt) .flaticon-favourite:before {
  content: "\f125";
}

:where(.xt) .flaticon-highlight:before {
  content: "\f126";
}

:where(.xt) .flaticon-burst:before {
  content: "\f127";
}

:where(.xt) .flaticon-arrows:before {
  content: "\f128";
}

:where(.xt) .flaticon-left-arrow:before {
  content: "\f129";
}

:where(.xt) .flaticon-arrow-up:before {
  content: "\f12a";
}

:where(.xt) .flaticon-right-arrow-2:before {
  content: "\f12b";
}

:where(.xt) .flaticon-24-hours:before {
  content: "\f12c";
}

:where(.xt) .flaticon-market-share:before {
  content: "\f12d";
}

:where(.xt) .flaticon-team-leader:before {
  content: "\f12e";
}

/* ============================================================
    [Master Stylesheets]

    Theme Name:     XTrady 
    Theme URL:      https://xtrady.vercel.app/xtrady
    Description:    XTrady - Forex & Stock Broker Trading Investments HTML Template
    Version:        1.0.0

============================================================== */
/* ========================================
*********** TABLE OF CONTENTS **********

    01. CSS Variables
    02. Display Flex CSS
    03. Positioning CSS
    04. Font Size for Responsive Devices
    05. Common Typography CSS
    06. Custom Classes CSS
    07. Global Start
    08. Background Color
    09. Color CSS
    10. Margin CSS
    11. Padding CSS
    12. Border Color CSS
    13. Accordion CSS
    14. Button CSS
    15. Form CSS
    16. Modal CSS
    17. Pagination CSS
    18. Table CSS
    19. Tab CSS
    20. Badge CSS
    21. Alert CSS
    22. Preload CSS
    23. Header
    24. Footer
    25. Scroll to Top
    26. Template Selection CSS
    27. Social Icon CSS
    28. Breadcrumb CSS
    29. Banner Section
    30. Services Section
    31. Trade Section
    32. Number Section
    33. Pricing Section
    34. Testimonial Section
    35. FAQ Section
    36. Blog
    37. Call-to-Action
    38. Process
    39. Roadmap
    40. Team
    41. Contact
    42. Account
    43. Market
    44. Privacy
    45. Error

========================================*/
/* ========================= Css Variables Start ======================== */
:root:has(.xt) {
  /* Font Family */
  --heading-font: "Space Grotesk", sans-serif;
  --body-font: "Inter", sans-serif;
  /* Base Color */
  --base-h: 154;
  --base-s: 100%;
  --base-l: 54%;
  --base: var(--base-h) var(--base-s) var(--base-l);
  --base-d-100: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.1);
  --base-d-200: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.2);
  --base-d-300: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.3);
  --base-d-400: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.4);
  --base-d-500: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.5);
  --base-d-600: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.6);
  --base-d-700: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.7);
  --base-d-800: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.8);
  --base-d-900: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.9);
  --base-d-1000: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 1);
  --base-l-100: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.1);
  --base-l-200: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.2);
  --base-l-300: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.3);
  --base-l-400: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.4);
  --base-l-500: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.5);
  --base-l-600: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.6);
  --base-l-700: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.7);
  --base-l-800: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.8);
  --base-l-900: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.9);
  --base-l-1000: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 1);
  /* Base Two Color */
  --base-two-h: 72;
  --base-two-s: 100%;
  --base-two-l: 64%;
  --base-two: var(--base-two-h) var(--base-two-s) var(--base-two-l);
  --base-two-d-100: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.1);
  --base-two-d-200: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.2);
  --base-two-d-300: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.3);
  --base-two-d-400: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.4);
  --base-two-d-500: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.5);
  --base-two-d-600: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.6);
  --base-two-d-700: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.7);
  --base-two-d-800: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.8);
  --base-two-d-900: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.9);
  --base-two-d-1000: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 1);
  --base-two-l-100: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.1);
  --base-two-l-200: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.2);
  --base-two-l-300: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.3);
  --base-two-l-400: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.4);
  --base-two-l-500: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.5);
  --base-two-l-600: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.6);
  --base-two-l-700: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.7);
  --base-two-l-800: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.8);
  --base-two-l-900: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.9);
  --base-two-l-1000: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 1);
  --white: 0 0% 100%;
  --body-color: 0 0% 85%;
  --heading-color: 0 0% 93%;
  --black: 180 2% 8%;
  --page: 180 2% 8%;
  --black-two: 0 0% 11%;
  --gray: 0 0% 26%;
  --gray-two: 0 0% 85%;
  --border-color: 0 0% 88%;
  --section-bg: 208 100% 97%;
  /* ========= Bootstrap Modifier Start ========== */
  /* Primary Color */
  --primary-h: 238;
  --primary-s: 100%;
  --primary-l: 40%;
  --primary: var(--primary-h) var(--primary-s) var(--primary-l);
  --primary-d-100: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.1);
  --primary-d-200: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.2);
  --primary-d-300: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.3);
  --primary-d-400: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.4);
  --primary-d-500: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.5);
  --primary-l-100: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1);
  --primary-l-200: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.2);
  --primary-l-300: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.3);
  --primary-l-400: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.4);
  --primary-l-500: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5);
  /* Secondary Color */
  --secondary-h: 208;
  --secondary-s: 7%;
  --secondary-l: 46%;
  --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l);
  --secondary-d-100: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.1);
  --secondary-d-200: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.2);
  --secondary-d-300: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.3);
  --secondary-d-400: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.4);
  --secondary-d-500: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.5);
  --secondary-l-100: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1);
  --secondary-l-200: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.2);
  --secondary-l-300: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.3);
  --secondary-l-400: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.4);
  --secondary-l-500: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5);
  /* Success Color */
  --success-h: 112;
  --success-s: 100%;
  --success-l: 40%;
  --success: var(--success-h) var(--success-s) var(--success-l);
  --success-d-100: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.1);
  --success-d-200: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.2);
  --success-d-300: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.3);
  --success-d-400: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.4);
  --success-d-500: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.5);
  --success-l-100: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.1);
  --success-l-200: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.2);
  --success-l-300: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.3);
  --success-l-400: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.4);
  --success-l-500: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.5);
  /* Danger Color */
  --danger-h: 0;
  --danger-s: 96%;
  --danger-l: 63%;
  --danger: var(--danger-h) var(--danger-s) var(--danger-l);
  --danger-d-100: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.1);
  --danger-d-200: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.2);
  --danger-d-300: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.3);
  --danger-d-400: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.4);
  --danger-d-500: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.5);
  --danger-l-100: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.1);
  --danger-l-200: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.2);
  --danger-l-300: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.3);
  --danger-l-400: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.4);
  --danger-l-500: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.5);
  /* Warning Color */
  --warning-h: 40;
  --warning-s: 100%;
  --warning-l: 46%;
  --warning: var(--warning-h) var(--warning-s) var(--warning-l);
  --warning-d-100: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.1);
  --warning-d-200: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.2);
  --warning-d-300: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.3);
  --warning-d-400: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.4);
  --warning-d-500: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.5);
  --warning-l-100: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1);
  --warning-l-200: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.2);
  --warning-l-300: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.3);
  --warning-l-400: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.4);
  --warning-l-500: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5);
  /* Info Color */
  --info-h: 196;
  --info-s: 100%;
  --info-l: 50%;
  --info: var(--info-h) var(--info-s) var(--info-l);
  --info-d-100: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.1);
  --info-d-200: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.2);
  --info-d-300: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.3);
  --info-d-400: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.4);
  --info-d-500: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.5);
  --info-l-100: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.1);
  --info-l-200: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.2);
  --info-l-300: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.3);
  --info-l-400: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.4);
  --info-l-500: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.5);
  /* =========== Bootstrap Modifier End ============= */
}
:root:has(.xt) [data-theme=dark] {
  --white: 200 9% 7%;
  --black: 210 40% 98%;
}

/* ========================= Css Variables End =========================== */
/* Fully Fit image Css */
:where(.xt) .fit-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ============================= Display Flex Css Start ============================= */
:where(.xt) .flex-wrap, :where(.xt) .form--radio, :where(.xt) .form--check {
  display: flex;
  flex-wrap: wrap;
}

:where(.xt) .flex-align, :where(.xt) .action-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

:where(.xt) .flex-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

:where(.xt) .flex-between {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

/* ============================= Display Flex Css End ============================= */
/* ============================= Positioning Css Class Start ===================== */
:where(.xt) .pa-extend, :where(.xt) .alert__link::before {
  position: absolute;
  content: "";
}

:where(.xt) .top-center-extend, :where(.xt) .custom--accordion .accordion-button[aria-expanded=true]::after, :where(.xt) .custom--accordion .accordion-button[aria-expanded=false]::after {
  top: 50%;
  transform: translateY(-50%);
}

:where(.xt) .left-center-extend {
  left: 50%;
  transform: translateX(-50%);
}

:where(.xt) .top-left-center-extend {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ============================= Positioning Css Class End ===================== */
/* ===================== Font Size For responsive devices Start =================== */
:where(.xt) .fs-10 {
  font-size: 0.625rem;
}

:where(.xt) .fs-11 {
  font-size: 0.6875rem;
}

:where(.xt) .fs-12 {
  font-size: 0.75rem;
}

:where(.xt) .fs-13 {
  font-size: 0.8125rem;
}

:where(.xt) .fs-14 {
  font-size: 0.875rem;
}

:where(.xt) .fs-15 {
  font-size: 0.9375rem;
}

:where(.xt) .fs-16 {
  font-size: 1rem;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .fs-16 {
    font-size: 0.9375rem;
  }
}

:where(.xt) .fs-17 {
  font-size: 1.0625rem;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .fs-17 {
    font-size: 1rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-17 {
    font-size: 0.9375rem;
  }
}

:where(.xt) .fs-18 {
  font-size: 1.125rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-18 {
    font-size: 1.0625rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-18 {
    font-size: 1rem;
  }
}

:where(.xt) .fs-20 {
  font-size: 1.25rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-20 {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-20 {
    font-size: 1.0625rem;
  }
}

:where(.xt) .fs-21 {
  font-size: 1.3125rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-21 {
    font-size: 1.1875rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-21 {
    font-size: 1.125rem;
  }
}

:where(.xt) .fs-22 {
  font-size: 1.375rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-22 {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-22 {
    font-size: 1.1875rem;
  }
}

:where(.xt) .fs-23 {
  font-size: 1.4375rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-23 {
    font-size: 1.3125rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-23 {
    font-size: 1.25rem;
  }
}

:where(.xt) .fs-24 {
  font-size: 1.5rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-24 {
    font-size: 1.375rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-24 {
    font-size: 1.3125rem;
  }
}

:where(.xt) .fs-25 {
  font-size: 1.5625rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-25 {
    font-size: 1.4375rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-25 {
    font-size: 1.375rem;
  }
}

:where(.xt) .fs-26 {
  font-size: 1.625rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-26 {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-26 {
    font-size: 1.4375rem;
  }
}

:where(.xt) .fs-27 {
  font-size: 1.6875rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-27 {
    font-size: 1.5625rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-27 {
    font-size: 1.5rem;
  }
}

:where(.xt) .fs-28 {
  font-size: 1.75rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-28 {
    font-size: 1.625rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-28 {
    font-size: 1.5625rem;
  }
}

:where(.xt) .fs-29 {
  font-size: 1.8125rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-29 {
    font-size: 1.6875rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-29 {
    font-size: 1.625rem;
  }
}

:where(.xt) .fs-30 {
  font-size: 1.875rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-30 {
    font-size: 1.75rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-30 {
    font-size: 1.6875rem;
  }
}

:where(.xt) .fs-31 {
  font-size: 1.9375rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-31 {
    font-size: 1.8125rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-31 {
    font-size: 1.75rem;
  }
}

:where(.xt) .fs-32 {
  font-size: 2rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-32 {
    font-size: 1.875rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-32 {
    font-size: 1.8125rem;
  }
}

:where(.xt) .fs-33 {
  font-size: 2.0625rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-33 {
    font-size: 1.9375rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-33 {
    font-size: 1.875rem;
  }
}

:where(.xt) .fs-34 {
  font-size: 2.125rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-34 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-34 {
    font-size: 1.9375rem;
  }
}

:where(.xt) .fs-35 {
  font-size: 2.1875rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-35 {
    font-size: 2.0625rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-35 {
    font-size: 2rem;
  }
}

:where(.xt) .fs-36 {
  font-size: 2.25rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-36 {
    font-size: 2.125rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-36 {
    font-size: 2.0625rem;
  }
}

:where(.xt) .fs-37 {
  font-size: 2.3125rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-37 {
    font-size: 2.1875rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-37 {
    font-size: 2.125rem;
  }
}

:where(.xt) .fs-38 {
  font-size: 2.375rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-38 {
    font-size: 2.25rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-38 {
    font-size: 2.1875rem;
  }
}

:where(.xt) .fs-39 {
  font-size: 2.4375rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-39 {
    font-size: 2.3125rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-39 {
    font-size: 2.25rem;
  }
}

:where(.xt) .fs-40 {
  font-size: 2.5rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-40 {
    font-size: 2.375rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-40 {
    font-size: 2.3125rem;
  }
}

:where(.xt) .fs-41 {
  font-size: 2.5625rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-41 {
    font-size: 2.4375rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-41 {
    font-size: 2.375rem;
  }
}

:where(.xt) .fs-42 {
  font-size: 2.625rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-42 {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-42 {
    font-size: 2.4375rem;
  }
}

:where(.xt) .fs-43 {
  font-size: 2.6875rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-43 {
    font-size: 2.5625rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-43 {
    font-size: 2.5rem;
  }
}

:where(.xt) .fs-44 {
  font-size: 2.75rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-44 {
    font-size: 2.625rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-44 {
    font-size: 2.5625rem;
  }
}

:where(.xt) .fs-45 {
  font-size: 2.8125rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-45 {
    font-size: 2.6875rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-45 {
    font-size: 2.625rem;
  }
}

:where(.xt) .fs-46 {
  font-size: 2.875rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-46 {
    font-size: 2.75rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-46 {
    font-size: 2.6875rem;
  }
}

:where(.xt) .fs-47 {
  font-size: 2.9375rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-47 {
    font-size: 2.8125rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-47 {
    font-size: 2.75rem;
  }
}

:where(.xt) .fs-48 {
  font-size: 3rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-48 {
    font-size: 2.875rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-48 {
    font-size: 2.8125rem;
  }
}

:where(.xt) .fs-49 {
  font-size: 3.0625rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-49 {
    font-size: 2.9375rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-49 {
    font-size: 2.875rem;
  }
}

:where(.xt) .fs-50 {
  font-size: 3.125rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-50 {
    font-size: 3rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-50 {
    font-size: 2.9375rem;
  }
}

:where(.xt) .fs-51 {
  font-size: 3.1875rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-51 {
    font-size: 3.0625rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-51 {
    font-size: 3rem;
  }
}

:where(.xt) .fs-52 {
  font-size: 3.25rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-52 {
    font-size: 3.125rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-52 {
    font-size: 3.0625rem;
  }
}

:where(.xt) .fs-53 {
  font-size: 3.3125rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-53 {
    font-size: 3.1875rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-53 {
    font-size: 3.125rem;
  }
}

:where(.xt) .fs-54 {
  font-size: 3.375rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-54 {
    font-size: 3.25rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-54 {
    font-size: 3.1875rem;
  }
}

:where(.xt) .fs-55 {
  font-size: 3.4375rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-55 {
    font-size: 3.3125rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-55 {
    font-size: 3.25rem;
  }
}

:where(.xt) .fs-56 {
  font-size: 3.5rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-56 {
    font-size: 3.375rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-56 {
    font-size: 3.3125rem;
  }
}

:where(.xt) .fs-57 {
  font-size: 3.5625rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-57 {
    font-size: 3.4375rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-57 {
    font-size: 3.375rem;
  }
}

:where(.xt) .fs-58 {
  font-size: 3.625rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-58 {
    font-size: 3.5rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-58 {
    font-size: 3.4375rem;
  }
}

:where(.xt) .fs-59 {
  font-size: 3.6875rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-59 {
    font-size: 3.5625rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-59 {
    font-size: 3.5rem;
  }
}

:where(.xt) .fs-60 {
  font-size: 3.75rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .fs-60 {
    font-size: 3.625rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .fs-60 {
    font-size: 3.5rem;
  }
}

/* ===================== Font Size For responsive devices End =================== */
/* ================================= Common Typography Css Start =========================== */
:where(.xt) * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html:has(.xt) {
  overflow-x: hidden;
}

body:has(.xt) {
  font-family: var(--body-font);
  color: hsl(var(--body-color));
  word-break: break-word;
  background-color: hsl(var(--page));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* clip, not hidden: Google Translate pins body to height: 100%, and
     overflow-x: hidden would make body its own scroller, so main.js's window
     scroll handlers (the header background, scroll reveals) never fired.
     clip trims the decorative shapes that stick out without doing that. */
  overflow-x: clip;
}

:where(.xt) p {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  color: hsl(var(--body-color));
}
@media screen and (max-width: 424px) {
  :where(.xt) p {
    font-size: 0.875rem;
  }
}

:where(.xt) span {
  display: inline-block;
}

:where(.xt) figure {
  margin: 0;
}

:where(.xt) h1,
:where(.xt) h2,
:where(.xt) h3,
:where(.xt) h4,
:where(.xt) h5,
:where(.xt) h6 {
  margin: 0 0 20px 0;
  font-family: var(--heading-font);
  color: hsl(var(--heading-color));
  line-height: 1.15;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  :where(.xt) h1,
  :where(.xt) h2,
  :where(.xt) h3,
  :where(.xt) h4,
  :where(.xt) h5,
  :where(.xt) h6 {
    margin: 0 0 15px 0;
  }
}

:where(.xt) h1 {
  font-size: 3.75rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) h1 {
    font-size: 3.125rem;
  }
}
@media screen and (max-width: 1199px) {
  :where(.xt) h1 {
    font-size: 2.8125rem;
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) h1 {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 575px) {
  :where(.xt) h1 {
    font-size: 1.875rem;
  }
}
:where(.xt) h1 span {
  display: inline;
}

:where(.xt) h2 {
  font-size: 2.5rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) h2 {
    font-size: 2.8125rem;
  }
}
@media screen and (max-width: 1199px) {
  :where(.xt) h2 {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) h2 {
    font-size: 2.1875rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) h2 {
    font-size: 1.875rem;
  }
}

:where(.xt) h3 {
  font-size: 2rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) h3 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 1199px) {
  :where(.xt) h3 {
    font-size: 1.875rem;
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) h3 {
    font-size: 1.875rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) h3 {
    font-size: 1.625rem;
  }
}

:where(.xt) h4 {
  font-size: 1.5rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) h4 {
    font-size: 1.3125rem;
  }
}
@media screen and (max-width: 1199px) {
  :where(.xt) h4 {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) h4 {
    font-size: 1.1875rem;
  }
}

:where(.xt) h5 {
  font-size: 1.25rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) h5 {
    font-size: 1.1875rem;
  }
}
@media screen and (max-width: 1199px) {
  :where(.xt) h5 {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) h5 {
    font-size: 1.0625rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) h5 {
    font-size: 1rem;
  }
}
@media screen and (max-width: 575px) {
  :where(.xt) h5 {
    font-size: 1rem;
  }
}

:where(.xt) h6 {
  font-size: 1rem;
}
@media screen and (max-width: 1399px) {
  :where(.xt) h6 {
    font-size: 1rem;
  }
}
@media screen and (max-width: 1199px) {
  :where(.xt) h6 {
    font-size: 0.9375rem;
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) h6 {
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) h6 {
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 575px) {
  :where(.xt) h6 {
    font-size: 0.875rem;
  }
}

:where(.xt) h1 > a,
:where(.xt) h2 > a,
:where(.xt) h3 > a,
:where(.xt) h4 > a,
:where(.xt) h5 > a,
:where(.xt) h6 > a {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  transition: 0.2s linear;
  line-height: inherit;
}

:where(.xt) a {
  display: inline-block;
  transition: 0.2s linear;
  text-decoration: none;
  color: hsl(var(--info));
}

:where(.xt) a:hover {
  color: hsl(var(--base));
}

:where(.xt) img {
  max-width: 100%;
  height: auto;
}

:where(.xt) select {
  cursor: pointer;
}

:where(.xt) ul,
:where(.xt) ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

:where(.xt) button {
  border: 0;
  background-color: transparent;
}
:where(.xt) button:focus {
  outline: none;
  box-shadow: none;
}

:where(.xt) .form-select:focus {
  outline: 0;
  box-shadow: none;
}

:where(.xt) .dashboard-body h1,
:where(.xt) .dashboard-body h2,
:where(.xt) .dashboard-body h3,
:where(.xt) .dashboard-body h4,
:where(.xt) .dashboard-body h5,
:where(.xt) .dashboard-body h6 {
  font-family: var(--body-font);
}

/* ================================= Common Typography Css End =========================== */
/* ================================= Custom Classes Css Start =========================== */
/* Column Extra Small Screen */
@media screen and (min-width: 425px) and (max-width: 575px) {
  :where(.xt) .col-xsm-6 {
    width: 50%;
  }
}

/* Section Background */
:where(.xt) .section-bg {
  background-color: hsl(var(--section-bg));
}

:where(.xt) .text-muted {
  color: hsl(var(--white)/0.6) !important;
}

/* Bg Image Css */
:where(.xt) .bg-img {
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
}

:where(.xt) .gradient-text {
  background-image: linear-gradient(180deg, hsl(var(--base-d-200)) 0%, hsl(var(--base)) 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}
:where(.xt) .gradient-text::-moz-selection {
  color: hsl(var(--white));
  -webkit-text-fill-color: hsl(var(--white));
  background: transparent;
}
:where(.xt) .gradient-text::selection {
  color: hsl(var(--white));
  -webkit-text-fill-color: hsl(var(--white));
  background: transparent;
}

:where(.xt) .slide-transition {
  align-items: center;
  transition-timing-function: linear;
}

:where(.xt) .inner-slide-element {
  width: auto;
  display: inline-block;
  padding: 0 15px;
}

:where(.xt) .slide-text-black,
:where(.xt) .slide-text-stock {
  color: hsl(var(--black));
  text-align: center;
  font-family: "Space Grotesk";
  font-size: 80px;
  font-weight: 700;
}
@media screen and (max-width: 991px) {
  :where(.xt) .slide-text-black,
  :where(.xt) .slide-text-stock {
    font-size: 60px;
  }
}
@media screen and (max-width: 575px) {
  :where(.xt) .slide-text-black,
  :where(.xt) .slide-text-stock {
    font-size: 40px;
  }
}

@media screen and (max-width: 991px) {
  :where(.xt) .slide-icon img {
    height: 60px;
  }
}
@media msm-screen {
  :where(.xt) .slide-icon img {
    height: 50px;
  }
}

:where(.xt) .slide-text-stock {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: hsl(var(--black));
  -webkit-text-fill-color: transparent;
}

/* Overlay End */
/* ================================= Custom Classes Css End =========================== */
/* ======================  Global Start  ======================*/
:where(.xt) .wrapper {
  overflow-x: hidden;
}

:where(.xt) .section-content.text-center span {
  justify-content: center;
}
:where(.xt) .section-content h6,
:where(.xt) .section-content span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: hsl(var(--base));
  margin-bottom: 15px;
  font-weight: 400;
  font-size: 1.125rem;
}
@media screen and (max-width: 767px) {
  :where(.xt) .section-content h6,
  :where(.xt) .section-content span {
    font-size: 0.875rem;
  }
}
:where(.xt) .section-content h6::before, :where(.xt) .section-content h6::after, :where(.xt) .section-content span::before, :where(.xt) .section-content span::after {
  content: "\f110";
  font-style: normal;
  text-transform: none;
  line-height: 0;
  -webkit-font-smoothing: antialiased;
  font-family: flaticon_xtrade !important;
  font-weight: normal !important;
  font-variant: normal;
}
:where(.xt) .section-content h2 {
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  :where(.xt) .section-content h2 {
    margin-bottom: 20px;
  }
}

:where(.xt) .btn-slider-next,
:where(.xt) .btn-slider-prev {
  --nav-offset: -7%;
  border: 1px solid hsl(var(--base-two));
  width: 48px;
  height: 48px;
  border-radius: 100%;
  color: hsl(var(--white));
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  transition: all 0.5s;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .btn-slider-next,
  :where(.xt) .btn-slider-prev {
    --nav-offset: -5%;
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) .btn-slider-next,
  :where(.xt) .btn-slider-prev {
    position: relative;
    bottom: 0;
    top: auto;
    transform: translateY(0);
  }
}
:where(.xt) .btn-slider-next:hover,
:where(.xt) .btn-slider-prev:hover {
  background-color: hsl(var(--base-two));
  color: hsl(var(--black));
}
:where(.xt) .btn-slider-next::after,
:where(.xt) .btn-slider-prev::after {
  font-size: 22px;
}

:where(.xt) .btn-slider-next {
  right: var(--nav-offset);
}

:where(.xt) .btn-slider-prev {
  left: var(--nav-offset);
}

:where(.xt) .swiper-button-disabled {
  opacity: 0.2;
  cursor: auto;
}

@media screen and (max-width: 991px) {
  :where(.xt) .slider-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
  }
  :where(.xt) .btn-slider-next,
  :where(.xt) .btn-slider-prev {
    --nav-offset: 0;
    border-radius: 7px;
  }
}
:where(.xt) .progress {
  --bs-progress-height: 5px;
  border-radius: 5px;
  background-color: hsl(var(--white)/0.2);
  overflow: unset;
}
:where(.xt) .progress .progress-bar {
  transition: width 2s ease-in-out;
  width: 25%;
  background: hsl(var(--base));
  border-radius: 5px;
}

/* ======================  Global End  ======================*/
/* ================================= Background Color Css Start =========================== */
:where(.xt) .bg--base {
  background-color: hsl(var(--base)) !important;
}
:where(.xt) .bg--primary {
  background-color: hsl(var(--primary)) !important;
}
:where(.xt) .bg--secondary {
  background-color: hsl(var(--secondary)) !important;
}
:where(.xt) .bg--success {
  background-color: hsl(var(--success)) !important;
}
:where(.xt) .bg--danger {
  background-color: hsl(var(--danger)) !important;
}
:where(.xt) .bg--warning {
  background-color: hsl(var(--warning)) !important;
}
:where(.xt) .bg--info {
  background-color: hsl(var(--info)) !important;
}
:where(.xt) .bg--black {
  background-color: hsl(var(--page)) !important;
}
:where(.xt) .bg--black-two {
  background-color: hsl(var(--black-two)) !important;
}

/* The secondary surface — the xt spelling of the skins' .bg.bg-secondary
   (Bootstrap owns .bg-secondary here and the template owns .bg--secondary,
   both !important greys). Dark in
   both themes: the template tokens are swapped for the --dark-* palette
   skin.js writes, so everything inside repaints as it does in dark mode —
   including the section's own bg--black / bg--black-two background, which is
   why this class paints no background itself (the stats band keeps its brand
   colour). Sections whose artwork was drawn for a dark page wear it. The
   header's brand and buttons take it too while they float, transparent, over
   a page that opens on one of these sections. */
:where(.xt) .surface--secondary,
:where(.xt):has(> main > .surface--secondary:first-child) .navbar-main:not(.navbar-shrink) :is(.navbar-brand, .right-nav) {
  --page: var(--dark-page);
  --black-two: var(--dark-black-two);
  --white: var(--dark-white);
  --heading-color: var(--dark-heading-color);
  --body-color: var(--dark-body-color);
  --gray: var(--dark-gray);
  --gray-two: var(--dark-gray-two);
  --border-color: var(--dark-border-color);
}
:where(.xt) .surface--secondary {
  color: hsl(var(--body-color));
}

/* ================================= Background Color Css End =========================== */
/* ================================= Color Css Start =========================== */
:where(.xt) .text--base {
  color: hsl(var(--base)) !important;
}
:where(.xt) .text--primary {
  color: hsl(var(--primary)) !important;
}
:where(.xt) .text--secondary {
  color: hsl(var(--secondary)) !important;
}
:where(.xt) .text--success {
  color: hsl(var(--success)) !important;
}
:where(.xt) .text--danger {
  color: hsl(var(--danger)) !important;
}
:where(.xt) .text--warning {
  color: hsl(var(--warning)) !important;
}
:where(.xt) .text--info {
  color: hsl(var(--info)) !important;
}

/* ================================= Color Css End =========================== */
/* ================================= margin Css Start =========================== */
:where(.xt) .my-120 {
  margin-top: 60px;
  margin-bottom: 60px;
}
@media (min-width: 576px) {
  :where(.xt) .my-120 {
    margin-top: 80px;
    margin-bottom: 80px;
  }
}
@media (min-width: 992px) {
  :where(.xt) .my-120 {
    margin-top: 120px;
    margin-bottom: 120px;
  }
}

:where(.xt) .mt-120 {
  margin-top: 60px;
}
@media (min-width: 576px) {
  :where(.xt) .mt-120 {
    margin-top: 80px;
  }
}
@media (min-width: 992px) {
  :where(.xt) .mt-120 {
    margin-top: 120px;
  }
}

:where(.xt) .mb-120 {
  margin-bottom: 60px;
}
@media (min-width: 576px) {
  :where(.xt) .mb-120 {
    margin-bottom: 80px;
  }
}
@media (min-width: 992px) {
  :where(.xt) .mb-120 {
    margin-bottom: 120px;
  }
}

:where(.xt) .my-60 {
  margin-top: 30px;
  margin-bottom: 30px;
}
@media (min-width: 576px) {
  :where(.xt) .my-60 {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
@media (min-width: 992px) {
  :where(.xt) .my-60 {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

:where(.xt) .mt-60 {
  margin-top: 30px;
}
@media (min-width: 576px) {
  :where(.xt) .mt-60 {
    margin-top: 40px;
  }
}
@media (min-width: 992px) {
  :where(.xt) .mt-60 {
    margin-top: 60px;
  }
}

:where(.xt) .mb-60 {
  margin-bottom: 30px;
}
@media (min-width: 576px) {
  :where(.xt) .mb-60 {
    margin-bottom: 40px;
  }
}
@media (min-width: 992px) {
  :where(.xt) .mb-60 {
    margin-bottom: 60px;
  }
}

/* ================================= margin Css End =========================== */
/* ================================= padding Css Start =========================== */
:where(.xt) .py-120 {
  padding-top: 60px;
  padding-bottom: 60px;
}
@media (min-width: 576px) {
  :where(.xt) .py-120 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (min-width: 992px) {
  :where(.xt) .py-120 {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

:where(.xt) .pt-120 {
  padding-top: 60px;
}
@media (min-width: 576px) {
  :where(.xt) .pt-120 {
    padding-top: 80px;
  }
}
@media (min-width: 992px) {
  :where(.xt) .pt-120 {
    padding-top: 120px;
  }
}

:where(.xt) .pb-120 {
  padding-bottom: 60px;
}
@media (min-width: 576px) {
  :where(.xt) .pb-120 {
    padding-bottom: 80px;
  }
}
@media (min-width: 992px) {
  :where(.xt) .pb-120 {
    padding-bottom: 120px;
  }
}

:where(.xt) .py-60 {
  padding-top: 30px;
  padding-bottom: 30px;
}
@media (min-width: 576px) {
  :where(.xt) .py-60 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
@media (min-width: 992px) {
  :where(.xt) .py-60 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

:where(.xt) .pt-60 {
  padding-top: 30px;
}
@media (min-width: 576px) {
  :where(.xt) .pt-60 {
    padding-top: 40px;
  }
}
@media (min-width: 992px) {
  :where(.xt) .pt-60 {
    padding-top: 60px;
  }
}

:where(.xt) .pb-60 {
  padding-bottom: 30px;
}
@media (min-width: 576px) {
  :where(.xt) .pb-60 {
    padding-bottom: 40px;
  }
}
@media (min-width: 992px) {
  :where(.xt) .pb-60 {
    padding-bottom: 60px;
  }
}

/* ================================= padding Css End =========================== */
/* ================================= Border Color Css Start =========================== */
:where(.xt) .border--base {
  border-color: hsl(var(--base)) !important;
}
:where(.xt) .border--primary {
  border-color: hsl(var(--primary)) !important;
}
:where(.xt) .border--secondary {
  border-color: hsl(var(--secondary)) !important;
}
:where(.xt) .border--success {
  border-color: hsl(var(--success)) !important;
}
:where(.xt) .border--danger {
  border-color: hsl(var(--danger)) !important;
}
:where(.xt) .border--warning {
  border-color: hsl(var(--warning)) !important;
}
:where(.xt) .border--info {
  border-color: hsl(var(--info)) !important;
}

/* ================================= Border Color Css End =========================== */
/* =========================== Accordion Css start ============================= */
:where(.xt) .custom--accordion {
  font-family: "Inter";
}
:where(.xt) .custom--accordion h2 {
  font-family: "Inter";
  font-weight: 600;
}
:where(.xt) .custom--accordion .accordion-item {
  --border-radius: 10px;
  border: 1px solid hsl(var(--black)/0.09);
  background-color: transparent !important;
  border-radius: var(--border-radius);
  overflow: hidden;
}
:where(.xt) .custom--accordion .accordion-item:not(:last-child) {
  margin-bottom: 20px;
}
:where(.xt) .custom--accordion .accordion-header {
  line-height: 1;
}
:where(.xt) .custom--accordion .accordion-body {
  padding: 20px 30px;
  background-color: hsl(var(--black-two));
}
@media screen and (max-width: 575px) {
  :where(.xt) .custom--accordion .accordion-body {
    padding: 15px;
  }
}
@media screen and (max-width: 424px) {
  :where(.xt) .custom--accordion .accordion-body {
    padding: 10px;
  }
}
:where(.xt) .custom--accordion .accordion-body p {
  font-weight: 300;
}
:where(.xt) .custom--accordion .accordion-body .text {
  max-width: 60%;
}
@media screen and (max-width: 575px) {
  :where(.xt) .custom--accordion .accordion-body .text {
    max-width: 100%;
  }
}
:where(.xt) .custom--accordion:first-of-type .accordion-button.collapsed {
  border-radius: var(--border-radius);
}
:where(.xt) .custom--accordion:last-of-type .accordion-button.collapsed {
  border-radius: var(--border-radius);
}
:where(.xt) .custom--accordion .accordion-button {
  background-color: hsl(var(--black-two));
  color: hsl(var(--heading-color));
  font-size: 1.125rem;
  padding: 20px 30px;
}
@media screen and (max-width: 575px) {
  :where(.xt) .custom--accordion .accordion-button {
    padding: 13px;
    padding-right: 30px;
    font-size: 1rem;
    line-height: 1.3;
  }
}
:where(.xt) .custom--accordion .accordion-button::after {
  background-image: none;
}
:where(.xt) .custom--accordion .accordion-button:focus {
  box-shadow: none;
}
:where(.xt) .custom--accordion .accordion-button:not(.collapsed) {
  background-color: hsl(var(--base));
  color: hsl(var(--black));
  box-shadow: none;
}
:where(.xt) .custom--accordion .accordion-button:not(.collapsed)::after {
  background-image: none;
  color: hsl(var(--black));
}
:where(.xt) .custom--accordion .accordion-button[aria-expanded=true]::after, :where(.xt) .custom--accordion .accordion-button[aria-expanded=false]::after {
  font-family: "Font Awesome 6 free";
  font-weight: 900;
  content: "\f106";
  display: inline-block;
  position: absolute;
  right: 15px;
  height: unset;
}
:where(.xt) .custom--accordion .accordion-button[aria-expanded=false]::after {
  content: "\f107";
  color: hsl(var(--body-color));
}

/* ================================= Accordion Css End =========================== */
/* ================================= Button Css Start =========================== */
:where(.xt) .btn-check:checked + .btn,
:where(.xt) .btn.active,
:where(.xt) .btn.show,
:where(.xt) .btn:first-child:active,
:where(.xt) :not(.btn-check) + .btn:active {
  color: none;
  background-color: none;
  border-color: none;
}

:where(.xt) .pill {
  border-radius: 40px !important;
}

:where(.xt) .btn {
  color: hsl(var(--white));
  font-weight: 500;
  padding: 17px 29px;
  border-radius: 5px;
  position: relative;
  z-index: 1;
  border: 1px solid transparent;
  font-family: var(--title-font);
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  :where(.xt) .btn {
    padding: 14px 25px;
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 575px) {
  :where(.xt) .btn {
    padding: 12px 20px;
  }
}
:where(.xt) .btn i {
  line-height: 0;
  position: relative;
  bottom: -3px;
}
:where(.xt) .btn:hover, :where(.xt) .btn:focus, :where(.xt) .btn:focus-visible {
  box-shadow: none !important;
}
:where(.xt) .btn:active {
  top: 1px;
}
:where(.xt) .btn--lg {
  padding: 20px 35px;
}
@media screen and (max-width: 991px) {
  :where(.xt) .btn--lg {
    padding: 18px 30px;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .btn--lg {
    padding: 16px 25px;
  }
}
:where(.xt) .btn--sm {
  padding: 7px 18px;
  font-weight: 600;
  font-size: 0.75rem;
}
@media screen and (max-width: 767px) {
  :where(.xt) .btn--sm {
    padding: 8px 12px;
  }
}
:where(.xt) .btn--icon {
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 0.9375rem;
  padding: 0;
}
:where(.xt) .btn--base {
  background-color: hsl(var(--base)) !important;
  color: hsl(var(--black));
}
:where(.xt) .btn--base:hover, :where(.xt) .btn--base:focus .btn--base:focus-visible {
  background-color: hsl(var(--base)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn-outline--base {
  background-color: transparent !important;
  border: 1px solid hsl(var(--base)) !important;
  color: hsl(var(--white)) !important;
}
:where(.xt) .btn-outline--base:hover, :where(.xt) .btn-outline--base:focus .btn-outline--base:focus-visible {
  background-color: hsl(var(--base)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn--base-two {
  background-color: hsl(var(--base-two)) !important;
  color: hsl(var(--black));
}
:where(.xt) .btn--base-two:hover, :where(.xt) .btn--base-two:focus .btn--base-two:focus-visible {
  background-color: hsl(var(--base)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn-outline--base-two {
  background-color: transparent !important;
  border: 1px solid hsl(var(--base-two)) !important;
  color: hsl(var(--white)) !important;
}
:where(.xt) .btn-outline--base-two:hover, :where(.xt) .btn-outline--base-two:focus .btn-outline--base-two:focus-visible {
  background-color: hsl(var(--base-two)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn--black-two {
  background-color: hsl(var(--black-two)) !important;
  color: hsl(var(--black));
}
:where(.xt) .btn--black-two:hover, :where(.xt) .btn--black-two:focus .btn--black-two:focus-visible {
  background-color: hsl(var(--base)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn-outline--black-two {
  background-color: transparent !important;
  border: 1px solid hsl(var(--black-two)) !important;
  color: hsl(var(--white)) !important;
}
:where(.xt) .btn-outline--black-two:hover, :where(.xt) .btn-outline--black-two:focus .btn-outline--black-two:focus-visible {
  background-color: hsl(var(--black-two)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn--primary {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--black));
}
:where(.xt) .btn--primary:hover, :where(.xt) .btn--primary:focus .btn--primary:focus-visible {
  background-color: hsl(var(--base)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn-outline--primary {
  background-color: transparent !important;
  border: 1px solid hsl(var(--primary)) !important;
  color: hsl(var(--white)) !important;
}
:where(.xt) .btn-outline--primary:hover, :where(.xt) .btn-outline--primary:focus .btn-outline--primary:focus-visible {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn--secondary {
  background-color: hsl(var(--secondary)) !important;
  color: hsl(var(--black));
}
:where(.xt) .btn--secondary:hover, :where(.xt) .btn--secondary:focus .btn--secondary:focus-visible {
  background-color: hsl(var(--base)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn-outline--secondary {
  background-color: transparent !important;
  border: 1px solid hsl(var(--secondary)) !important;
  color: hsl(var(--white)) !important;
}
:where(.xt) .btn-outline--secondary:hover, :where(.xt) .btn-outline--secondary:focus .btn-outline--secondary:focus-visible {
  background-color: hsl(var(--secondary)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn--danger {
  background-color: hsl(var(--danger)) !important;
  color: hsl(var(--black));
}
:where(.xt) .btn--danger:hover, :where(.xt) .btn--danger:focus .btn--danger:focus-visible {
  background-color: hsl(var(--base)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn-outline--danger {
  background-color: transparent !important;
  border: 1px solid hsl(var(--danger)) !important;
  color: hsl(var(--white)) !important;
}
:where(.xt) .btn-outline--danger:hover, :where(.xt) .btn-outline--danger:focus .btn-outline--danger:focus-visible {
  background-color: hsl(var(--danger)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn--warning {
  background-color: hsl(var(--warning)) !important;
  color: hsl(var(--black));
}
:where(.xt) .btn--warning:hover, :where(.xt) .btn--warning:focus .btn--warning:focus-visible {
  background-color: hsl(var(--base)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn-outline--warning {
  background-color: transparent !important;
  border: 1px solid hsl(var(--warning)) !important;
  color: hsl(var(--white)) !important;
}
:where(.xt) .btn-outline--warning:hover, :where(.xt) .btn-outline--warning:focus .btn-outline--warning:focus-visible {
  background-color: hsl(var(--warning)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn--info {
  background-color: hsl(var(--info)) !important;
  color: hsl(var(--black));
}
:where(.xt) .btn--info:hover, :where(.xt) .btn--info:focus .btn--info:focus-visible {
  background-color: hsl(var(--base)) !important;
  color: hsl(var(--black)) !important;
}
:where(.xt) .btn-outline--info {
  background-color: transparent !important;
  border: 1px solid hsl(var(--info)) !important;
  color: hsl(var(--white)) !important;
}
:where(.xt) .btn-outline--info:hover, :where(.xt) .btn-outline--info:focus .btn-outline--info:focus-visible {
  background-color: hsl(var(--info)) !important;
  color: hsl(var(--black)) !important;
}

/* ================================= Button Css End =========================== */
/* ================================= Form Css Start =========================== */
/* Form Label */
:where(.xt) .form--label {
  margin-bottom: 6px;
  font-size: 0.9375rem;
  color: hsl(var(--black)/0.6);
  font-weight: 500;
}

:where(.xt) .form-group {
  margin-bottom: 1rem;
}

/* Form Select */
:where(.xt) .select {
  color: hsl(var(--black)/0.6) !important;
}
:where(.xt) .select:focus {
  border-color: hsl(var(--base));
  color: hsl(var(--black)) !important;
}
:where(.xt) .select option {
  background-color: hsl(var(--page));
  color: hsl(var(--white));
}

/* Form Select End */
/* Form Control Start */
:where(.xt) .form-control {
  border-radius: 7px;
  font-weight: 400;
  outline: none;
  width: 100%;
  padding: 18px;
  background-color: transparent;
  border: 1px solid hsl(var(--white)/0.12);
  color: hsl(var(--white));
  line-height: 1;
}
:where(.xt) .form-control::-moz-placeholder {
  color: hsl(var(--gray-two)/0.8);
  font-size: 1rem;
}
:where(.xt) .form-control::placeholder {
  color: hsl(var(--gray-two)/0.8);
  font-size: 1rem;
}
:where(.xt) .form-control:focus {
  border-color: hsl(var(--base));
  background: transparent;
  color: hsl(var(--white));
  box-shadow: none;
}
:where(.xt) .form-control:disabled, :where(.xt) .form-control[readonly] {
  background-color: hsl(var(--white)/0.12);
  opacity: 1;
  border: 0;
}
:where(.xt) .form-control[type=password] {
  color: hsl(var(--white)/0.5);
}
:where(.xt) .form-control[type=password]:focus {
  color: hsl(var(--white));
}
:where(.xt) .form-control[type=file] {
  line-height: 50px;
  padding: 0;
  position: relative;
}
:where(.xt) .form-control[type=file]::file-selector-button {
  border: 1px solid hsl(var(--white)/0.08);
  padding: 4px 6px;
  border-radius: 0.2em;
  background-color: hsl(var(--base)) !important;
  transition: 0.2s linear;
  line-height: 25px;
  position: relative;
  margin-left: 15px;
  color: hsl(var(--body-color)) !important;
}
:where(.xt) .form-control[type=file]::file-selector-button:hover {
  background-color: hsl(var(--base));
  border: 1px solid hsl(var(--base));
  color: hsl(var(--white));
}

/* Form Control End */
:where(.xt) textarea.form--control {
  height: 130px;
}

/* Autofill Css */
:where(.xt) input:-webkit-autofill,
:where(.xt) input:-webkit-autofill:hover,
:where(.xt) input:-webkit-autofill:focus,
:where(.xt) input:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: hsl(var(--white));
}

:where(.xt) input:-webkit-autofill,
:where(.xt) textarea:-webkit-autofill,
:where(.xt) select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px hsl(var(--base)/0.01) inset;
  -webkit-text-fill-color: hsl(var(--white)) !important;
  caret-color: hsl(var(--white));
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

/* input group */
:where(.xt) .input--group {
  position: relative;
}

/* Show Hide Password */
:where(.xt) input#your-password,
:where(.xt) input#confirm-password {
  padding-right: 50px;
}

:where(.xt) .password-show-hide {
  position: absolute;
  right: 20px;
  z-index: 5;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
  color: hsl(var(--black)/0.4);
}

/* --------------- Number Arrow None --------------------- */
:where(.xt) input::-webkit-outer-spin-button,
:where(.xt) input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

:where(.xt) input[type=number] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

/* Custom Checkbox Design */
:where(.xt) .form--check a {
  display: inline;
}
:where(.xt) .form--check .form-check-input {
  box-shadow: none;
  background-color: transparent;
  box-shadow: none !important;
  border: 0;
  position: relative;
  border-radius: 3px;
  width: 16px;
  height: 16px;
  border: 1px solid hsl(var(--white)/0.2);
  cursor: pointer;
}
:where(.xt) .form--check .form-check-input:checked {
  background-color: hsl(var(--base)) !important;
  border-color: hsl(var(--base)) !important;
  box-shadow: none;
}
:where(.xt) .form--check .form-check-input:checked[type=checkbox] {
  background-image: none;
}
:where(.xt) .form--check .form-check-input:checked::before {
  position: absolute;
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: hsl(var(--black));
  font-size: 0.6875rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
:where(.xt) .form--check .form-check-label {
  font-weight: 600;
  width: calc(100% - 16px);
  padding-left: 12px;
  cursor: pointer;
  font-size: 0.875rem;
}
@media screen and (max-width: 424px) {
  :where(.xt) .form--check label {
    font-size: 0.9375rem;
  }
}
@media screen and (max-width: 424px) {
  :where(.xt) .form--check a {
    font-size: 0.9375rem;
  }
}

/* Custom Radio Design */
:where(.xt) .form--radio .form-check-input {
  box-shadow: none;
  border: 1px solid hsl(var(--black)/0.2);
  position: relative;
  background-color: transparent;
  cursor: pointer;
  width: 16px;
  height: 16px;
}
:where(.xt) .form--radio .form-check-input:active {
  filter: brightness(100%);
}
:where(.xt) .form--radio .form-check-input:checked {
  background-color: transparent;
  border-color: hsl(var(--base));
}
:where(.xt) .form--radio .form-check-input:checked[type=radio] {
  background-image: none;
}
:where(.xt) .form--radio .form-check-input:checked::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  background-color: hsl(var(--base));
  border-radius: 50%;
  z-index: 999;
}
:where(.xt) .form--radio .form-check-label {
  font-weight: 600;
  width: calc(100% - 16px);
  padding-left: 12px;
  cursor: pointer;
  font-size: 0.875rem;
}

/*  Custom Switch Design */
:where(.xt) .form--switch .form-check-input {
  border-radius: 3px;
  background-image: none;
  position: relative;
  box-shadow: none;
  border: 0;
  background-color: hsl(var(--black)/0.2) !important;
  padding: 10px !important;
  margin-left: 0;
  margin-bottom: 5px;
  border-radius: 40px;
  width: 70px;
  height: 38px;
  cursor: pointer;
}
:where(.xt) .form--switch .form-check-input:focus {
  border-radius: 40px;
  background-image: none;
  position: relative;
  box-shadow: none;
  border: 0;
}
:where(.xt) .form--switch .form-check-input::before {
  position: absolute;
  content: "";
  width: 28px;
  height: 28px;
  background-color: hsl(var(--white));
  top: 50%;
  transform: translateY(-50%);
  border-radius: 2px;
  left: 5px;
  border-radius: 50%;
  transition: 0.2s linear;
}
:where(.xt) .form--switch .form-check-input:checked {
  background-color: hsl(var(--base)) !important;
}
:where(.xt) .form--switch .form-check-input:checked::before {
  left: calc(100% - 33px);
  background-color: hsl(var(--white)) !important;
}
:where(.xt) .form--switch .form-check-input:checked[type=checkbox] {
  background-image: none;
}
:where(.xt) .form--switch .form-check-label {
  width: calc(100% - 14px);
  padding-left: 5px;
  cursor: pointer;
}

/*  Custom Switch End Design */
:where(.xt) .input--group {
  border-radius: 5px;
  border: 1px solid hsl(var(--border-color));
}
:where(.xt) .input--group .form--control {
  border-width: 0px !important;
  padding-right: 5px;
  box-shadow: unset;
}
:where(.xt) .input--group .input-group-text + .form--control {
  padding-right: 20px;
  padding-left: 10px;
}
:where(.xt) .input--group:focus-within {
  border: 1px solid hsl(var(--base));
}
:where(.xt) .input--group .input-group-text {
  border-width: 0px;
  height: calc(100% - 10px);
  margin: 5px;
  border-radius: 5px;
  background-color: hsl(var(--black)/0.1);
  color: hsl(var(--body-color));
}
:where(.xt) .input--group-text {
  margin-left: 5px;
}
:where(.xt) .input--group .form--control[readonly] {
  background: hsl(var(--black)/0.3) !important;
}
:where(.xt) .input--group .form--control[readonly]:focus {
  border-color: hsl(var(--black)/0.3);
}
:where(.xt) .input--group:has(.form--control[readonly]) {
  background: hsl(var(--black)/0.3) !important;
}
:where(.xt) .input--group:has(.form--control[readonly]):focus-within {
  border-color: hsl(var(--black)/0.4) !important;
}

:where(.xt) .forgot-text {
  color: hsl(var(--body-color));
  font-size: 0.875rem;
}

/* ================================= Form Css End =========================== */
/* ================================= Modal Css Start =========================== */
:where(.xt) .custom--modal .modal-header {
  border-bottom: 1px solid hsl(var(--black)/0.12);
  padding: 15px;
}
:where(.xt) .custom--modal .modal-header.close {
  width: 35px;
  height: 35px;
  background-color: hsl(var(--danger));
  font-size: 1.5625rem;
  line-height: 1;
  border-radius: 4px;
  transition: 0.2s linear;
}
:where(.xt) .custom--modal .modal-header.close:hover {
  background-color: hsl(var(--danger-l-100));
}
:where(.xt) .custom--modal .modal-header.close :focus {
  box-shadow: none;
}
:where(.xt) .custom--modal .modal-content {
  border-radius: 10px !important;
}
:where(.xt) .custom--modal .modal-body {
  padding: 15px;
}
:where(.xt) .custom--modal .modal-icon i {
  font-size: 2rem;
  color: hsl(var(--base));
  border: 3px solid hsl(var(--base));
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
:where(.xt) .custom--modal .modal-footer {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-top: 1px solid hsl(var(--black)/0.12);
  justify-content: flex-end;
}

/* ================================= Modal Css End =========================== */
/* ================================= Pagination Css Start =========================== */
:where(.xt) .pagination {
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 56px;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .pagination {
    margin-top: 48px;
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) .pagination {
    margin-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .pagination {
    margin-top: 32px;
  }
}
:where(.xt) .pagination .page-item.active .page-link {
  background-color: hsl(var(--base));
  color: hsl(var(--black));
  border-color: hsl(var(--base));
}
:where(.xt) .pagination .page-item .page-link {
  border: 1px solid hsl(var(--black)/0.15);
  margin: 0 5px;
  border-radius: 7px;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  font-weight: 500;
  padding: 0;
  color: hsl(var(--body-color));
}
:where(.xt) .pagination .page-item .page-link:hover {
  background-color: hsl(var(--base));
  color: hsl(var(--black));
  border-color: hsl(var(--base));
}
:where(.xt) .pagination .page-item .page-link:focus {
  box-shadow: none;
}

/* ================================= Pagination Css End =========================== */
/* ================================= Table Css Start =========================== */
/* Table Content Css start */
@media screen and (max-width: 374px) {
  :where(.xt) .customer {
    display: block;
    text-align: left;
  }
}
:where(.xt) .customer__thumb {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
}
@media screen and (max-width: 374px) {
  :where(.xt) .customer__thumb {
    margin-left: auto;
  }
}
:where(.xt) .customer__content {
  width: calc(100% - 35px);
  padding-left: 15px;
  text-align: left;
}
@media screen and (max-width: 424px) {
  :where(.xt) .customer__content {
    padding-left: 8px;
  }
}
@media screen and (max-width: 374px) {
  :where(.xt) .customer__content {
    width: 100%;
    padding-left: 0px;
    padding-top: 5px;
  }
}
:where(.xt) .customer__name {
  margin-bottom: 0;
  font-size: 0.8125rem;
  color: hsl(var(--black)/0.7);
}

:where(.xt) .action-buttons {
  gap: 10px;
  justify-content: flex-end;
}

:where(.xt) .action-btn {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

:where(.xt) .edit-btn {
  color: hsl(var(--info));
  background-color: hsl(var(--info)/0.08);
}

:where(.xt) .delete-btn {
  color: hsl(var(--danger));
  background-color: hsl(var(--danger)/0.08);
}

/* Table Content Css end */
/* Table Css Start */
:where(.xt) .table {
  margin: 0;
  border-collapse: collapse;
  border-collapse: separate;
  border-spacing: 0px 0px;
}
:where(.xt) .table thead tr th {
  background-color: hsl(var(--white));
  text-align: center;
  padding: 15px 20px;
  color: hsl(var(--black)/0.7);
  font-family: var(--heading-font);
  font-weight: 600;
  border-bottom: 0;
  max-width: 170px;
  font-size: 0.875rem;
  border: 1px solid hsl(var(--black)/0.08);
  background-color: hsl(var(--base)/0.03);
}
:where(.xt) .table thead tr th:not(:first-child) {
  border-left: 0;
}
:where(.xt) .table thead tr th:first-child {
  text-align: left;
  border-radius: 6px 0 0 0;
}
:where(.xt) .table thead tr th:last-child {
  border-radius: 0 6px 0 0;
  text-align: right;
}
:where(.xt) .table thead tr th:nth-child(2) {
  text-align: left;
}
:where(.xt) .table tbody {
  border: 0 !important;
  background-color: hsl(var(--white));
}
:where(.xt) .table tbody tr {
  border-bottom: 1px solid hsl(var(--black)/0.08);
}
:where(.xt) .table tbody tr:last-child {
  border-bottom: 0;
}
:where(.xt) .table tbody tr:last-child td {
  border-bottom: 1px solid hsl(var(--black)/0.08);
}
:where(.xt) .table tbody tr:last-child td:first-child {
  border-radius: 0px 0 0 6px;
}
:where(.xt) .table tbody tr:last-child td:last-child {
  border-radius: 0 0px 6px 0;
}
:where(.xt) .table tbody tr td {
  text-align: center;
  vertical-align: middle;
  padding: 10px 15px;
  border-width: 1px;
  border: 0;
  font-family: var(--heading-font);
  color: hsl(var(--black)/0.7);
  font-weight: 500;
  max-width: 170px;
  font-size: 0.8125rem;
  border-bottom: 1px solid hsl(var(--black)/0.08);
  border-right: 1px solid hsl(var(--black)/0.08);
}
:where(.xt) .table tbody tr td::before {
  content: attr(data-label);
  font-family: var(--heading-font);
  font-size: 0.9375rem;
  color: hsl(var(--black));
  font-weight: 500;
  display: none;
  width: 45% !important;
  text-align: left;
}
:where(.xt) .table tbody tr td:first-child {
  text-align: left;
  border-left: 1px solid hsl(var(--black)/0.08);
  font-size: 0.875rem;
}
:where(.xt) .table tbody tr td:last-child {
  text-align: right;
  border-right: 1px solid hsl(var(--black)/0.08);
}

@media screen and (max-width: 767px) {
  :where(.xt) .table--responsive--md thead {
    display: none;
  }
  :where(.xt) .table--responsive--md tbody tr {
    display: block;
  }
  :where(.xt) .table--responsive--md tbody tr:last-child td {
    border-bottom: 0;
  }
  :where(.xt) .table--responsive--md tbody tr td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    text-align: right;
    padding: 10px 15px;
    border: none;
    border-bottom: 1px solid hsl(var(--black)/0.8);
    max-width: unset;
  }
  :where(.xt) .table--responsive--md tbody tr td:last-child {
    border: none;
  }
  :where(.xt) .table--responsive--md tbody tr td:first-child {
    text-align: right;
    border-left: 0;
  }
  :where(.xt) .table--responsive--md tbody tr td::before {
    display: block;
    font-size: 0.875rem;
    color: hsl(var(--black)/0.7);
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .table--responsive--md tbody tr td {
    border: 0;
  }
}

@media screen and (max-width: 991px) {
  :where(.xt) .table--responsive--lg thead {
    display: none;
  }
  :where(.xt) .table--responsive--lg tbody tr {
    display: block;
  }
  :where(.xt) .table--responsive--lg tbody tr:nth-child(even) {
    background-color: hsl(var(--black)/0.02);
  }
  :where(.xt) .table--responsive--lg tbody tr:last-child td {
    border-bottom: 0;
  }
  :where(.xt) .table--responsive--lg tbody tr td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    text-align: right;
    padding: 10px 15px;
    border: none;
    border-bottom: 1px solid hsl(var(--black)/0.08);
    max-width: unset;
  }
  :where(.xt) .table--responsive--lg tbody tr td:last-child {
    border: none;
  }
  :where(.xt) .table--responsive--lg tbody tr td:first-child {
    text-align: right;
    border-left: 0;
  }
  :where(.xt) .table--responsive--lg tbody tr td::before {
    display: block;
    font-size: 0.875rem;
    color: hsl(var(--black)/0.7);
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) .table--responsive--lg tbody tr td {
    border: none;
  }
}

@media screen and (max-width: 1199px) {
  :where(.xt) .table--responsive--xl thead {
    display: none;
  }
  :where(.xt) .table--responsive--xl tbody tr {
    display: block;
  }
  :where(.xt) .table--responsive--xl tbody tr:nth-child(even) {
    background-color: hsl(var(--black)/0.02);
  }
  :where(.xt) .table--responsive--xl tbody tr td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    text-align: right;
    padding: 10px 15px;
    border: none;
    border-bottom: 1px solid hsl(var(--black)/0.08);
    max-width: unset;
  }
  :where(.xt) .table--responsive--xl tbody tr td:last-child {
    border: none;
  }
  :where(.xt) .table--responsive--xl tbody tr td:first-child {
    text-align: right;
    border-left: 0;
  }
  :where(.xt) .table--responsive--xl tbody tr td::before {
    display: block;
    font-size: 0.875rem;
    color: hsl(var(--black)/0.7);
  }
}
@media screen and (max-width: 1199px) {
  :where(.xt) .table--responsive--xl tbody tr td {
    border: 0;
  }
}

@media screen and (max-width: 1399px) {
  :where(.xt) .table--responsive--xxl thead {
    display: none;
  }
  :where(.xt) .table--responsive--xxl tbody tr {
    display: block;
  }
  :where(.xt) .table--responsive--xxl tbody tr:last-child td {
    border-bottom: 0;
  }
  :where(.xt) .table--responsive--xxl tbody tr td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    text-align: right;
    padding: 10px 15px;
    border: none;
    border-bottom: 1px solid hsl(var(--black)/0.08);
    max-width: unset;
  }
  :where(.xt) .table--responsive--xxl tbody tr td:last-child {
    border: none;
  }
  :where(.xt) .table--responsive--xxl tbody tr td:first-child {
    text-align: right;
    border-left: 0;
  }
  :where(.xt) .table--responsive--xxl tbody tr td::before {
    display: block;
    font-size: 0.875rem;
    color: hsl(var(--black)/0.7);
  }
}
@media screen and (max-width: 1399px) {
  :where(.xt) .table--responsive--xxl tbody tr td {
    border: 0;
  }
}

/* ================================= Table Css End =========================== */
/* ================================= Tab Css Start =========================== */
:where(.xt) .custom--tab {
  justify-content: center;
  border-radius: 6px;
  margin-bottom: 40px;
}
:where(.xt) .custom--tab .nav-item {
  border-bottom: 0;
  padding: 5px;
}
:where(.xt) .custom--tab .nav-item .nav-link {
  color: hsl(var(--white));
  padding: 8px 25px;
  background-color: transparent !important;
  border-radius: 5px;
  transition: 0.4s;
  border: 1px solid hsl(var(--black)/0.08) !important;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .custom--tab .nav-item .nav-link {
    padding: 12px 15px;
  }
}
:where(.xt) .custom--tab .nav-item .nav-link.active {
  color: hsl(var(--white));
  background-color: hsl(var(--base-d-200)) !important;
  border: 1px solid transparent !important;
}
:where(.xt) .custom--tab .nav-item .nav-link.active:hover {
  color: hsl(var(--white));
}
:where(.xt) .custom--tab .nav-item .nav-link:hover {
  color: hsl(var(--base));
}

/* ================================= Tab Css End =========================== */
/* ================================= Badge Css Start =========================== */
:where(.xt) .custom--badge {
  font-size: 0.75rem;
  border-radius: 5px;
  padding: 8px 10px;
  font-weight: 500;
  position: relative;
  text-align: center;
}

:where(.xt) .badge--base {
  background-color: hsl(var(--base)/0.15) !important;
  color: hsl(var(--base)) !important;
}
:where(.xt) .badge--primary {
  background-color: hsl(var(--primary)/0.15) !important;
  color: hsl(var(--primary)) !important;
}
:where(.xt) .badge--secondary {
  background-color: hsl(var(--secondary)/0.15) !important;
  color: hsl(var(--secondary)) !important;
}
:where(.xt) .badge--success {
  background-color: hsl(var(--success)/0.15) !important;
  color: hsl(var(--success)) !important;
}
:where(.xt) .badge--danger {
  background-color: hsl(var(--danger)/0.15) !important;
  color: hsl(var(--danger)) !important;
}
:where(.xt) .badge--warning {
  background-color: hsl(var(--warning)/0.15) !important;
  color: hsl(var(--warning)) !important;
}
:where(.xt) .badge--info {
  background-color: hsl(var(--info)/0.15) !important;
  color: hsl(var(--info)) !important;
}

/* ================================= Badge Css End =========================== */
/* ====================================== Alert Css Start =============================== */
:where(.xt) .alert {
  margin-bottom: 0;
  font-weight: 400;
  padding: 17px 24px;
  border-radius: 5px;
}
@media screen and (max-width: 991px) {
  :where(.xt) .alert {
    padding: 16px;
  }
}
@media screen and (max-width: 575px) {
  :where(.xt) .alert {
    padding: 12px;
  }
}
:where(.xt) .alert__icon {
  font-size: 1.5rem;
  line-height: 1;
}
:where(.xt) .alert__content {
  width: calc(100% - 24px);
  padding-left: 32px;
}
@media screen and (max-width: 991px) {
  :where(.xt) .alert__content {
    padding-left: 16px;
  }
}
@media screen and (max-width: 575px) {
  :where(.xt) .alert__content {
    padding-left: 0;
    width: 100%;
    margin-top: 6px;
  }
}
:where(.xt) .alert__title {
  font-size: 1rem;
  color: hsl(var(--base-two)/0.8);
  font-weight: 600;
  font-family: var(--heading-font);
  margin-bottom: 6px;
}
:where(.xt) .alert__desc {
  color: hsl(var(--base-two)/0.5);
  display: block;
  line-height: 1.375;
}
@media screen and (max-width: 424px) {
  :where(.xt) .alert__desc {
    font-size: 0.8125rem;
  }
}
:where(.xt) .alert__link {
  position: relative;
}
:where(.xt) .alert__link:hover::before {
  visibility: visible;
  opacity: 1;
  bottom: 0;
}
:where(.xt) .alert__link::before {
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background-color: hsl(var(--base));
  visibility: hidden;
  opacity: 0;
  transition: 0.2s ease-in-out;
}
:where(.xt) .alert--base {
  border-color: hsl(var(--base)/0.6);
}
:where(.xt) .alert--base .alert__icon {
  color: hsl(var(--base));
}
:where(.xt) .alert--primary {
  border-color: hsl(var(--primary)/0.6);
}
:where(.xt) .alert--primary .alert__icon {
  color: hsl(var(--primary));
}
:where(.xt) .alert--success {
  border-color: hsl(var(--success)/0.6);
}
:where(.xt) .alert--success .alert__icon {
  color: hsl(var(--success));
}
:where(.xt) .alert--info {
  border-color: hsl(var(--info)/0.6);
}
:where(.xt) .alert--info .alert__icon {
  color: hsl(var(--info));
}
:where(.xt) .alert--danger {
  border-color: hsl(var(--danger)/0.6);
}
:where(.xt) .alert--danger .alert__icon {
  color: hsl(var(--danger));
}
:where(.xt) .alert--warning {
  border-color: hsl(var(--warning)/0.6);
}
:where(.xt) .alert--warning .alert__icon {
  color: hsl(var(--warning));
}
:where(.xt) .alert--secondary {
  border-color: hsl(var(--secondary)/0.6);
}
:where(.xt) .alert--secondary .alert__icon {
  color: hsl(var(--secondary));
}

/* ====================================== Alert Css End =============================== */
/* ================================= preload Css Start =========================== */
:where(.xt) #preloader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: hsl(var(--page));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: grid;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  transition: height 0.5s, opacity 0.5s, border-radius 0.5s;
}
:where(.xt) #preloader #text {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media screen and (max-width: 767px) {
  :where(.xt) #preloader #text {
    gap: 7px;
  }
}
:where(.xt) #preloader #text p {
  color: hsl(var(--white));
  font-size: 3.75rem;
  font-weight: 800;
  margin: 0;
  opacity: 0;
  animation: fadeIn 1.5s ease-in-out infinite;
  font-family: var(--title-font);
}
@media screen and (max-width: 767px) {
  :where(.xt) #preloader #text p {
    font-size: 2.5rem;
  }
}
:where(.xt) #preloader #text p.active {
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
:where(.xt) #preloader #text p:nth-child(1) {
  animation-delay: 0s;
}
:where(.xt) #preloader #text p:nth-child(2) {
  animation-delay: 0.2s;
}
:where(.xt) #preloader #text p:nth-child(3) {
  animation-delay: 0.4s;
}
:where(.xt) #preloader #text p:nth-child(4) {
  animation-delay: 0.6s;
}
:where(.xt) #preloader #text p:nth-child(5) {
  animation-delay: 0.8s;
}
:where(.xt) #preloader #text p:nth-child(6) {
  animation-delay: 1s;
}
:where(.xt) #preloader #text p:nth-child(7) {
  animation-delay: 1.2s;
}
:where(.xt) #preloader #text p:nth-child(8) {
  animation-delay: 1.4s;
}
:where(.xt) #preloader #text p:nth-child(9) {
  animation-delay: 1.6s;
}
:where(.xt) #preloader #text p:nth-child(10) {
  animation-delay: 1.8s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* ================================= preload Css End ===========================  */
/* ======================  Header Start  ======================*/
:where(.xt) .navbar-main {
  width: 100%;
  height: auto;
  z-index: 111;
  padding: 24px 0;
  position: fixed;
  top: 0;
  transition: all 0.5s;
}
:where(.xt) .navbar-main.navbar-shrink {
  -webkit-backdrop-filter: blur(50px);
          backdrop-filter: blur(50px);
  background: hsl(var(--page));
  padding: 8px 0;
}
@media screen and (max-width: 991px) {
  :where(.xt) .navbar-main .logo-img {
    height: 40px;
  }
}
:where(.xt) .navbar-main .right-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  order: 1;
}
:where(.xt) .navbar-main .right-nav .btn {
  padding: 13px 24px;
}
@media screen and (max-width: 424px) {
  :where(.xt) .navbar-main .right-nav .btn {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .navbar-main .right-nav .btn {
    padding: 13px 17px;
  }
}
@media screen and (max-width: 1199px) {
  :where(.xt) .navbar-main .right-nav {
    gap: 10px;
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) .navbar-main .right-nav {
    gap: 5px;
  }
}

:where(.xt) .navbar-toggler {
  opacity: 1;
  padding: 4px 8px;
  border-radius: 5px;
  outline: none;
  box-shadow: none !important;
  border: 1px solid hsl(var(--base));
  color: hsl(var(--white));
  transition: all 0.4s;
}
:where(.xt) .navbar-toggler:hover {
  background-color: hsl(var(--base));
  color: hsl(var(--black));
}
@media screen and (max-width: 767px) {
  :where(.xt) .navbar-toggler {
    padding: 1px 8px;
  }
}
:where(.xt) .navbar-toggler svg {
  width: 35px;
  height: 35px;
}

:where(.xt) .theme-toggler {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid hsl(var(--base));
  background: none;
  color: hsl(var(--white));
  transition: all 0.4s;
}
:where(.xt) .theme-toggler:hover {
  background-color: hsl(var(--base));
  color: hsl(var(--black));
}
@media screen and (max-width: 767px) {
  :where(.xt) .theme-toggler {
    padding: 1px 8px;
  }
}
:where(.xt) .theme-toggler i {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

:where(.xt) .offcanvas-close {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 4px 8px;
  line-height: 1;
  font-size: 1.5rem;
  color: hsl(var(--white));
  transition: all 0.3s;
}
:where(.xt) .offcanvas-close:hover {
  color: hsl(var(--base));
}

:where(.xt) .navbar-nav {
  position: relative;
}
:where(.xt) .navbar-nav .nav-item .nav-link {
  color: hsl(var(--white));
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.625rem;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:where(.xt) .navbar-nav .nav-item .nav-link.active, :where(.xt) .navbar-nav .nav-item .nav-link:hover {
  color: hsl(var(--base));
  position: relative;
}
:where(.xt) .navbar-nav .nav-item .nav-link.active span::before, :where(.xt) .navbar-nav .nav-item .nav-link:hover span::before {
  width: 100%;
  transition: all 0.5s ease-in-out;
}
:where(.xt) .navbar-nav .nav-item .dropdown-toggle::after {
  content: "\f107";
  font-weight: 900;
  font-family: "Font Awesome 6 free";
  border: 0;
  margin-left: auto;
}
:where(.xt) .navbar-nav .nav-item .dropdown-menu {
  transition: 0.5s;
  margin-top: 0;
  padding: 5px 10px;
  min-width: 220px;
  border: 0;
  border-radius: 5px;
  gap: 5px;
  background-color: hsl(var(--black-two));
}
:where(.xt) .navbar-nav .nav-item .dropdown-menu a {
  margin: 5px 0;
  background: none;
  transition: 0.5s;
  position: relative;
  font-size: 0.875rem;
  border: 0;
  color: hsl(var(--white));
  padding: 8px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  border-radius: 5px;
}
:where(.xt) .navbar-nav .nav-item .dropdown-menu a::after {
  content: "\f061";
  font-weight: 900;
  font-family: "Font Awesome 6 free";
  transform: translateX(-20px);
  transition: all 0.3s;
  opacity: 0;
}
:where(.xt) .navbar-nav .nav-item .dropdown-menu a.active, :where(.xt) .navbar-nav .nav-item .dropdown-menu a:hover {
  color: hsl(var(--black));
  background-color: hsl(var(--base));
}
:where(.xt) .navbar-nav .nav-item .dropdown-menu a.active::before, :where(.xt) .navbar-nav .nav-item .dropdown-menu a:hover::before {
  opacity: 1;
  width: 10px;
}
:where(.xt) .navbar-nav .nav-item .dropdown-menu a.active::after, :where(.xt) .navbar-nav .nav-item .dropdown-menu a:hover::after {
  transform: translateX(0px);
  opacity: 1;
}
:where(.xt) .navbar-nav .nav-item:hover .nav-link {
  color: hsl(var(--base));
}

:where(.xt) #offcanvasNavbar {
  background-color: hsl(var(--page));
  min-height: 100vh;
}
@media screen and (max-width: 767px) {
  :where(.xt) #offcanvasNavbar .btn {
    padding: 15px 20px;
  }
}

:where(.xt) .btn-close {
  outline: none;
  box-shadow: none !important;
  filter: invert(100%) sepia(0%) saturate(7498%) hue-rotate(42deg) brightness(102%) contrast(87%);
  opacity: 1;
}

/* ======================  Header End  ======================*/
/* ======================  Header-top Start  ======================*/
/* ======================  Header-top End  ======================*/
/* ============= Footer Start Here ======================= */
:where(.xt) .footer-area {
  background-color: hsl(var(--page));
  color: hsl(var(--white));
  margin-top: auto;
}
:where(.xt) .footer-area.bg-img {
  background-size: contain;
  background-position: top center;
}

@media screen and (max-width: 1199px) {
  :where(.xt) .footer-logo-con {
    text-align: center;
  }
  :where(.xt) .footer-logo-con .social-list {
    justify-content: center;
  }
}

:where(.xt) .footer-item__logo {
  margin-bottom: 20px;
}
:where(.xt) .footer-item__logo a img {
  width: 100%;
  height: 100%;
  max-width: 190px;
  max-height: 64px;
}
:where(.xt) .footer-item__title {
  color: hsl(var(--white));
  padding-bottom: 10px;
  margin-bottom: 25px;
  position: relative;
  font-size: 1.4375rem;
}
@media screen and (max-width: 767px) {
  :where(.xt) .footer-item__title {
    margin-bottom: 18px;
  }
}
:where(.xt) .footer-item .social-list {
  margin-top: 30px;
}
@media screen and (max-width: 991px) {
  :where(.xt) .footer-item .social-list {
    margin-top: 20px;
  }
}
@media screen and (max-width: 575px) {
  :where(.xt) .footer-item .social-list {
    margin-top: 15px;
  }
}

:where(.xt) .footer-widget__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 767px) {
  :where(.xt) .footer-widget__content {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
}
@media screen and (max-width: 575px) {
  :where(.xt) .footer-widget__content .footer-item:last-child {
    grid-column: span 2/span 2;
    max-width: 300px;
  }
}

/* Footer List Item */
:where(.xt) .footer-menu {
  display: flex;
  flex-direction: column;
}
:where(.xt) .footer-menu__item {
  display: block;
  padding-bottom: 16px;
}
:where(.xt) .footer-menu__item:last-child {
  padding-bottom: 0;
}
:where(.xt) .footer-menu__link {
  color: hsl(var(--body-color));
}
:where(.xt) .footer-menu__link:hover {
  color: hsl(var(--base));
  text-decoration: underline;
}

/* Footer Contact */
:where(.xt) .footer-contact-menu__item {
  display: flex;
  padding-bottom: 12px;
}
:where(.xt) .footer-contact-menu__item:last-child {
  padding-bottom: 0;
}
:where(.xt) .footer-contact-menu__item-icon {
  width: 15px;
  color: hsl(var(--base));
  font-size: 1.25rem;
}
:where(.xt) .footer-contact-menu__item-content {
  width: calc(100% - 15px);
  padding-left: 15px;
}
:where(.xt) .footer-contact-menu__item-content p:hover {
  color: hsl(var(--base));
}

:where(.xt) .bottom-footer {
  border-top: 1px solid hsl(var(--black-two));
}

:where(.xt) .bottom-footer-text a {
  color: hsl(var(--base));
}

:where(.xt) .footer-shape img {
  position: absolute;
}
:where(.xt) .footer-shape img:first-child {
  left: -15%;
}
:where(.xt) .footer-shape img:last-child {
  right: -15%;
  bottom: -10%;
}

/* ============= Footer End Here ======================= */
/* ===================== Scroll to Top Start ================================= */
:where(.xt) .progress-wrap {
  position: fixed;
  right: 50px;
  bottom: 50px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 100px;
  box-shadow: inset 0 0 0 2px hsl(var(--white)/0.7);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 200ms linear;
  background: none;
}
@media screen and (max-width: 991px) {
  :where(.xt) .progress-wrap {
    right: 10px;
    bottom: 20px;
    height: 35px;
    width: 35px;
  }
}
:where(.xt) .progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
:where(.xt) .progress-wrap:hover::after {
  opacity: 0;
}
:where(.xt) .progress-wrap:hover::before {
  opacity: 1;
}
:where(.xt) .progress-wrap::before, :where(.xt) .progress-wrap::after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f062";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  color: hsl(var(--white));
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: block;
  z-index: 2;
  transition: all 200ms linear;
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(.xt) .progress-wrap svg path {
  fill: none;
}
:where(.xt) .progress-wrap svg.progress-circle path {
  stroke: hsl(var(--base));
  stroke-width: 5;
  box-sizing: border-box;
  transition: all 200ms linear;
}

/* ===================== Scroll to Top End ================================= */
/* ================================= Template Selection Css Start =========================== */
:where(.xt) ::-moz-selection {
  color: hsl(var(--black));
  background: hsl(var(--base));
}
:where(.xt) ::selection {
  color: hsl(var(--black));
  background: hsl(var(--base));
}

/* ================================= Template Selection Css End ===========================  */
/* ================================= Social Icon Css Start =========================== */
:where(.xt) .social-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
:where(.xt) .social-list__item {
  margin-right: 10px;
}
:where(.xt) .social-list__item:last-child {
  margin-right: 0;
}
:where(.xt) .social-list__link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  cursor: pointer;
  border: 1px solid hsl(var(--base));
  color: hsl(var(--white));
}
:where(.xt) .social-list__link.active, :where(.xt) .social-list__link:hover, :where(.xt) .social-list__link:focus {
  background-color: hsl(var(--base-two));
  color: hsl(var(--black)) !important;
  border-color: hsl(var(--base-two)) !important;
}
@media screen and (max-width: 767px) {
  :where(.xt) .social-list__link {
    width: 35px;
    height: 35px;
    font-size: 0.875rem;
  }
}

:where(.xt) .social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 17px;
}
:where(.xt) .social-icon a {
  border: 1px solid hsl(var(--gray)/0.25);
  color: hsl(var(--white));
  border-radius: 5px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  transition: all 0.3s;
}
:where(.xt) .social-icon a:hover {
  background-color: hsl(var(--base));
  color: hsl(var(--black));
}

/* ================================= Social Icon Css End ===========================  */
/* ====================== Breadcrumb Css Start ==================== */
:where(.xt) .breadcrumb {
  position: relative;
  z-index: 1;
  padding: 200px 0 120px;
  margin-bottom: 0;
  background-image: url(/assets/images/breadcrumb.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 991px) {
  :where(.xt) .breadcrumb {
    padding: 115px 0 60px;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .breadcrumb {
    padding: 105px 0 40px;
  }
}
:where(.xt) .breadcrumb::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background-color: hsl(var(--page)/0.8);
  width: 100%;
  height: 100%;
  z-index: -1;
}
:where(.xt) .breadcrumb__wrapper {
  text-align: center;
}
:where(.xt) .breadcrumb__title {
  margin-bottom: 10px;
  color: hsl(var(--white));
  font-size: 3.125rem;
}
@media screen and (max-width: 991px) {
  :where(.xt) .breadcrumb__title {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .breadcrumb__title {
    font-size: 2.1875rem;
  }
}
@media screen and (max-width: 424px) {
  :where(.xt) .breadcrumb__title {
    font-size: 1.875rem;
  }
}
:where(.xt) .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: "Space Grotesk";
}
:where(.xt) .breadcrumb__item {
  color: hsl(var(--white));
  padding: 0 5px;
  font-weight: 400;
  font-size: 1.25rem;
}
@media screen and (max-width: 991px) {
  :where(.xt) .breadcrumb__item {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .breadcrumb__item {
    font-size: 1rem;
  }
}
:where(.xt) .breadcrumb__item-text {
  color: hsl(var(--base));
}
:where(.xt) .breadcrumb__item i {
  transform: translateY(3px);
}
:where(.xt) .breadcrumb__link {
  color: hsl(var(--white));
  font-weight: 400;
}
:where(.xt) .breadcrumb__link:hover {
  color: hsl(var(--base));
}
:where(.xt) .breadcrumb__date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  padding: 5px 0 0;
}
:where(.xt) .breadcrumb__date li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
:where(.xt) .breadcrumb__date li::before {
  content: "\f111";
  font-family: "Font Awesome 6 free";
  font-weight: 900;
  font-size: 7px;
  color: hsl(var(--base));
}

/* ====================== Breadcrumb Css End ==================== */
/* ======================  Banner Section Start  ======================*/
:where(.xt) .banner-one-section {
  min-height: 100vh;
  padding: 100px 0 80px;
  display: grid;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .banner-one-section {
    padding-top: 140px;
    padding-bottom: 50px;
  }
}
:where(.xt) .banner-one-section .shape-icon img {
  position: absolute;
}
:where(.xt) .banner-one-section .shape-icon img:first-child {
  left: -100px;
  top: -70px;
}
:where(.xt) .banner-one-section .shape-icon img:nth-child(2) {
  left: 48%;
  bottom: -30%;
  color: hsl(var(--base-two));
}
:where(.xt) .banner-one-section .shape-icon img:nth-child(3) {
  right: 0;
  top: -10%;
  color: hsl(var(--base));
}
:where(.xt) .banner-one-section .banner_content h1 {
  margin: 15px 0 25px;
}
:where(.xt) .banner-one-section .banner_content h1 i {
  color: hsl(var(--base-two));
  position: relative;
  bottom: -6px;
  font-size: 40px;
}
@media screen and (max-width: 991px) {
  :where(.xt) .banner-one-section .banner_content h1 i {
    font-size: 35px;
  }
}
:where(.xt) .banner-one-section .banner_content p {
  padding-bottom: 40px;
}
:where(.xt) .banner-one-section .banner-img {
  position: relative;
  z-index: 1;
}
:where(.xt) .banner-one-section .banner-img::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 616px;
  height: 616px;
  transform: translate(-50%, -50%);
  background-image: url(/assets/images/line-bar.png);
  z-index: -1;
  opacity: 0.1;
  border-radius: 50%;
}
:where(.xt) .banner-one-section .banner-img::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 416px;
  height: 416px;
  flex-shrink: 0;
  border-radius: 416px;
  opacity: 0.5;
  background: hsl(var(--base-two));
  mix-blend-mode: screen;
  filter: blur(130px);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  :where(.xt) .banner-one-section {
    padding: 80px 0 40px;
  }
  :where(.xt) .banner-one-section .banner-img::before {
    width: 300px;
    height: 300px;
  }
  :where(.xt) .banner-one-section .banner-img::after {
    width: 220px;
    height: 220px;
  }
}
@media screen and (max-width: 575px) {
  :where(.xt) .banner-one-section {
    padding: 70px 0 30px;
  }
  :where(.xt) .banner-one-section .banner-img::before {
    width: 240px;
    height: 240px;
  }
  :where(.xt) .banner-one-section .banner-img::after {
    width: 180px;
    height: 180px;
  }
}

:where(.xt) .banner-two-section {
  min-height: 100vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  justify-content: center;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .banner-two-section {
    padding: 100px 0 40px;
  }
}
:where(.xt) .banner-two-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 330px;
  background-image: url(/assets/images/wave.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.25;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .banner-two-section::after {
    height: 200px;
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) .banner-two-section::after {
    height: 200px;
  }
}
:where(.xt) .banner-two-section .sub-title {
  border: 1px solid hsl(var(--base));
  padding: 15px 20px;
  font-size: 1.25rem;
  font-weight: 500;
  border-radius: 10px;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .banner-two-section .sub-title {
    font-size: 1.125rem;
    padding: 10px 15px;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .banner-two-section .sub-title {
    font-size: 1rem;
  }
}
@media screen and (max-width: 424px) {
  :where(.xt) .banner-two-section .sub-title {
    font-size: 0.875rem;
  }
}
:where(.xt) .banner-two-section h1 {
  margin-top: 20px;
}
:where(.xt) .banner-two-section h1 strong {
  font-weight: 700;
  color: hsl(var(--base-two));
  position: relative;
  z-index: 1;
}
:where(.xt) .banner-two-section h1 strong::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 100%;
  height: 1.5px;
  background-color: hsl(var(--base-two));
  z-index: -1;
  border-radius: 10px;
}
:where(.xt) .banner-two-section p {
  max-width: 684px;
  margin: 40px auto 40px;
  font-size: 1.125rem;
  font-weight: 400;
}
@media screen and (max-width: 424px) {
  :where(.xt) .banner-two-section p {
    font-size: 1rem;
  }
}
:where(.xt) .banner-two-section .banner-content {
  position: relative;
  z-index: 1;
}
:where(.xt) .banner-two-section .banner-content::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 800px;
  height: 800px;
  transform: translate(-50%, -50%);
  background-image: url(/assets/images/line-bar.png);
  z-index: -1;
  opacity: 0.1;
  border-radius: 50%;
}
:where(.xt) .banner-two-section .banner-content::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 594px;
  height: 594px;
  flex-shrink: 0;
  border-radius: 416px;
  opacity: 0.25;
  background: hsl(var(--base-two));
  mix-blend-mode: screen;
  filter: blur(222px);
  z-index: -1;
}
:where(.xt) .banner-two-section .shape-icon img {
  position: absolute;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .banner-two-section .shape-icon img {
    transform: scale(0.7);
  }
}
:where(.xt) .banner-two-section .shape-icon img:nth-child(1) {
  left: 0;
  top: -15%;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .banner-two-section .shape-icon img:nth-child(1) {
    top: -10%;
  }
}
:where(.xt) .banner-two-section .shape-icon img:nth-child(2) {
  right: 0;
  top: 0%;
}
:where(.xt) .banner-two-section .shape-icon img:nth-child(3) {
  left: 15%;
  bottom: -5%;
}
:where(.xt) .banner-two-section .shape-icon img:nth-child(4) {
  right: 15%;
  bottom: -5%;
}

/* ======================  Banner Section End  ======================*/
:where(.xt) .info-box {
  border-radius: 8px;
  border: 2px solid hsl(var(--body-color)/0.3);
  background: hsl(var(--page)/0.3);
  text-align: center;
  padding: 20px 30px;
  min-width: 244px;
}
:where(.xt) .info-box .fs-40 {
  line-height: 0.9;
}
:where(.xt) .info-box p {
  padding-top: 10px;
}

@media screen and (max-width: 991px) {
  :where(.xt) .about-shape {
    display: none;
  }
}
:where(.xt) .about-shape img {
  position: absolute;
}
:where(.xt) .about-shape img:first-child {
  right: -10%;
}
:where(.xt) .about-shape img:last-child {
  bottom: 25%;
  left: -15%;
}

/* ======================  Services Section Start  ======================*/
@media screen and (max-width: 991px) {
  :where(.xt) .services-section .slider-btn {
    justify-content: center;
    margin-top: 24px;
  }
}

:where(.xt) .services-box {
  background-color: hsl(var(--black-two));
  padding: 40px 30px;
  border-radius: 10px;
  text-align: center;
  position: relative;
  z-index: 1;
}
:where(.xt) .services-box::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  background-color: hsl(var(--base));
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 0 auto;
  z-index: -1;
  transition: all 0.3s;
}
:where(.xt) .services-box:hover::before {
  width: 100%;
  height: 100%;
  border-radius: 0;
  top: 0;
  border-radius: 10px;
}
:where(.xt) .services-box:hover .icon {
  background-color: hsl(var(--black));
  color: hsl(var(--base));
}
:where(.xt) .services-box:hover p,
:where(.xt) .services-box:hover a {
  color: hsl(var(--black));
}
:where(.xt) .services-box .icon {
  background-color: hsl(var(--base));
  color: hsl(var(--black));
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin: 0 auto;
  transition: all 0.3s;
}
:where(.xt) .services-box .icon i {
  position: relative;
}
:where(.xt) .services-box h3 {
  margin-bottom: 0;
  padding: 15px 0;
  font-size: 1.625rem;
}
:where(.xt) .services-box .learn-more {
  margin-top: 20px;
  border-bottom: 1px solid hsl(var(--base));
  color: hsl(var(--white));
  padding-bottom: 4px;
}

:where(.xt) .services-shape img {
  position: absolute;
}
:where(.xt) .services-shape img:first-child {
  left: -10%;
  top: 20%;
}
:where(.xt) .services-shape img:last-child {
  right: -7%;
}

:where(.xt) .services-two-shape img {
  position: absolute;
}
:where(.xt) .services-two-shape img:first-child {
  right: -14%;
  bottom: 0%;
}
:where(.xt) .services-two-shape img:last-child {
  left: -9%;
}

:where(.xt) .services-details img {
  border-radius: 10px;
}
:where(.xt) .services-details .custom--accordion .accordion-button {
  background-color: hsl(var(--gray)/0.12);
}
:where(.xt) .services-details .custom--accordion .accordion-button:not(.collapsed) {
  background-color: hsl(var(--base));
  color: hsl(var(--black));
}
:where(.xt) .services-details .custom--accordion .accordion-body {
  background-color: hsl(var(--gray)/0.12);
}

/* ======================  Services Section End  ======================*/
/* ======================  Trade Section Start  ======================*/
:where(.xt) .people-shape img {
  position: absolute;
}
:where(.xt) .people-shape img:nth-child(1) {
  left: -5%;
  top: 20px;
}
:where(.xt) .people-shape img:nth-child(2) {
  right: -10%;
  bottom: 5%;
}

:where(.xt) .trade-list {
  -moz-columns: 200px 2;
       columns: 200px 2;
}
:where(.xt) .trade-list li {
  color: hsl(var(--white));
  font-weight: 500;
  padding: 5px 0;
}
:where(.xt) .trade-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 free";
  font-weight: 900;
  margin-right: 10px;
  color: hsl(var(--base));
}

:where(.xt) .trade-shape img {
  position: absolute;
}
:where(.xt) .trade-shape img:first-child {
  left: -10%;
}
:where(.xt) .trade-shape img:last-child {
  right: -7%;
  bottom: 0;
}

:where(.xt) .trabe-info {
  border-radius: 10px;
  padding: 30px;
  padding-bottom: 50px;
}

:where(.xt) .table-nav {
  border-radius: 0px;
  border-bottom: 1.5px solid hsl(var(--white)/0.15);
}
:where(.xt) .table-nav .nav {
  gap: 35px;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .table-nav .nav {
    gap: 24px;
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) .table-nav .nav {
    gap: 20px;
    row-gap: 0;
  }
}
:where(.xt) .table-nav .nav-link {
  border-radius: 0;
  background: none;
  text-transform: capitalize;
  font-size: 1.25rem;
  font-weight: 600;
  font-family: var(--heading-font);
  color: hsl(var(--white));
  padding: 0;
  padding: 20px 0 30px;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .table-nav .nav-link {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) .table-nav .nav-link {
    padding: 10px 0;
    font-size: 1rem;
  }
}
:where(.xt) .table-nav .nav-link.active {
  background: none;
  border-bottom: 2px solid hsl(var(--base));
  color: hsl(var(--base));
}
:where(.xt) .table-nav form {
  position: relative;
}
:where(.xt) .table-nav form input {
  min-width: 100%;
  max-width: 384px;
  height: 53px;
  border-radius: 8px;
  border: 1.5px solid hsl(var(--white)/0.2);
  color: hsl(var(--white));
  background: transparent;
  padding-left: 50px;
  padding-right: 10px;
}
:where(.xt) .table-nav form input::-moz-placeholder {
  color: hsl(var(--white)/0.7);
}
:where(.xt) .table-nav form input::placeholder {
  color: hsl(var(--white)/0.7);
}
:where(.xt) .table-nav form button {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: hsl(var(--white));
}

:where(.xt) .trade-content .trade-chart-head {
  cursor: pointer;
}
:where(.xt) .trade-content .trade-chart-body {
  padding: 0;
  overflow: hidden;
  border: 0;
}
:where(.xt) .trade-content .trade-chart-body iframe {
  border-top: 0;
  border: 1px solid hsl(var(--white));
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  width: 100%;
}
:where(.xt) .trade-content .tradingChart {
  height: 280px;
}
:where(.xt) .trade-content ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 50px;
  padding: 15px 15px;
  border-radius: 8px;
  border: 1.5px solid hsl(var(--white)/0.15);
  width: 100%;
}
:where(.xt) .trade-content ul.bg--base {
  border-radius: 8px;
}
:where(.xt) .trade-content ul.bg--base li {
  color: hsl(var(--black));
  font-weight: 500;
}
:where(.xt) .trade-content ul li {
  color: hsl(var(--white));
  font-size: 0.875rem;
}
:where(.xt) .trade-content ul li:last-child {
  text-align: center;
}
:where(.xt) .trade-content ul li button {
  color: hsl(var(--white));
}

:where(.xt) .trade-smartet-shape img {
  position: absolute;
}
:where(.xt) .trade-smartet-shape img:first-child {
  right: -7%;
}
:where(.xt) .trade-smartet-shape img:last-child {
  top: 15%;
  left: -7%;
}

:where(.xt) .people-trust-section .nav-link {
  border: 1px solid hsl(var(--base));
  transition: all 0.4s;
  font-weight: 500;
  color: hsl(var(--white));
  display: flex;
  align-items: center;
  height: 50px;
}
:where(.xt) .people-trust-section .nav-link i {
  color: hsl(var(--base));
  font-size: 25px;
  margin-right: 10px;
}
:where(.xt) .people-trust-section .nav-link i::before {
  line-height: auto;
}
:where(.xt) .people-trust-section .nav-link:hover, :where(.xt) .people-trust-section .nav-link.active {
  border-color: hsl(var(--base-two));
  background-color: hsl(var(--base-two));
  color: hsl(var(--black));
}
:where(.xt) .people-trust-section .nav-link:hover i, :where(.xt) .people-trust-section .nav-link.active i {
  color: hsl(var(--black));
}

:where(.xt) .people-list {
  -moz-columns: 2 200px;
       columns: 2 200px;
}
:where(.xt) .people-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
:where(.xt) .people-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 free";
  font-weight: 900;
  color: hsl(var(--base));
}

:where(.xt) .people-video img {
  border-radius: 15px;
}

:where(.xt) .people-box {
  border-radius: 8px;
  border: 2px solid hsl(var(--gray)/0.3);
  background-color: hsl(var(--black)/0.3);
  text-align: center;
  padding: 30px;
}
@media screen and (max-width: 575px) {
  :where(.xt) .people-box {
    padding: 20px;
  }
}
:where(.xt) .people-box h2 {
  line-height: 0.8;
}
@media screen and (max-width: 575px) {
  :where(.xt) .people-box h2 {
    font-size: 1.5625rem;
  }
}
@media screen and (max-width: 575px) {
  :where(.xt) .people-box p {
    font-size: 0.875rem;
  }
}

:where(.xt) .trade-table-content {
  min-width: 700px;
  margin-bottom: 12px;
}

:where(.xt) .video-container {
  position: relative;
  cursor: none;
  max-width: 100%;
}
:where(.xt) .video-container .play-button {
  position: absolute;
  border: 3px solid hsl(var(--white));
  border-radius: 100px;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  :where(.xt) .video-container .play-button {
    width: 65px;
    height: 65px;
  }
}
:where(.xt) .video-container .video {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
:where(.xt) .video-container .play-icon {
  font-size: 40px;
  color: hsl(var(--white));
}
@media screen and (max-width: 767px) {
  :where(.xt) .video-container .play-icon {
    font-size: 26px;
  }
}

/* ======================  Trade Section End  ======================*/
:where(.xt) .at-tab {
  display: none;
}

:where(.xt) .at-title {
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
  border-radius: 10px;
}
:where(.xt) .at-title:after {
  content: "\f107";
  font-family: "Font Awesome 6 free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 25px;
  transition: all 0.3s ease;
  font-size: 15px;
}
:where(.xt) .at-title:hover, :where(.xt) .at-title.active {
  background-color: hsl(var(--base));
}
:where(.xt) .at-title:hover::after, :where(.xt) .at-title.active::after {
  content: "\f106";
  color: hsl(var(--black));
}
:where(.xt) .at-title:hover li, :where(.xt) .at-title.active li {
  color: hsl(var(--black));
}
:where(.xt) .at-title.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ======================  Number Section Start  ======================*/
:where(.xt) .number-section {
  background-color: hsl(var(--base));
  position: relative;
  z-index: 1;
}
:where(.xt) .number-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(/assets/images/number-bg.png) no-repeat center;
  background-size: cover;
}
:where(.xt) .number-section .number-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
@media screen and (max-width: 767px) {
  :where(.xt) .number-section .number-count {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
  }
}
:where(.xt) .number-section .number-count .fs-60 {
  line-height: 0.8;
  display: flex;
  align-items: center;
  color: hsl(var(--black));
  justify-content: center;
}
@media screen and (max-width: 991px) {
  :where(.xt) .number-section .number-count .fs-60 {
    font-size: 40px;
  }
}
@media screen and (max-width: 575px) {
  :where(.xt) .number-section .number-count .fs-60 {
    font-size: 35px;
  }
}
:where(.xt) .number-section .number-count p {
  color: hsl(var(--black)/0.7);
  padding-top: 10px;
}
:where(.xt) .number-section .number-box {
  border-right: 2px solid hsl(var(--black));
}
:where(.xt) .number-section .number-box:last-child {
  border: 0;
}
@media screen and (max-width: 767px) {
  :where(.xt) .number-section .number-box:nth-child(2) {
    border: 0;
  }
}

/* ======================  Number Section End  ======================*/
/* ======================  Pricing Section Start  ======================*/
:where(.xt) .pricing-section .swiper-pagination {
  position: relative;
  margin-top: 40px;
}
:where(.xt) .pricing-section .swiper-pagination-bullet {
  background-color: hsl(var(--white));
  width: 10px;
  height: 10px;
  margin: 0 7px !important;
}
:where(.xt) .pricing-section .swiper-pagination-bullet-active {
  background-color: hsl(var(--base-two));
}

:where(.xt) .pricing-shape img {
  position: absolute;
}
:where(.xt) .pricing-shape img:nth-child(1) {
  right: -14%;
  top: 10%;
}
:where(.xt) .pricing-shape img:nth-child(2) {
  left: -14%;
  bottom: 0;
}

:where(.xt) .pricing-content {
  background-color: hsl(var(--gray)/0.12);
  padding: 30px;
  border-radius: 15px;
  display: grid;
  gap: 24px;
  transition: all 0.3s;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .pricing-content {
    padding: 24px;
  }
}
:where(.xt) .pricing-content h6,
:where(.xt) .pricing-content h2 {
  color: hsl(var(--white));
}
:where(.xt) .pricing-content h2 {
  font-size: 3.75rem;
  font-weight: 600;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .pricing-content h2 {
    font-size: 2.8125rem;
  }
}
:where(.xt) .pricing-content .pricing-body {
  background-color: hsl(var(--gray)/0.2);
  border-radius: 15px;
  padding: 24px;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .pricing-content .pricing-body {
    padding: 20px;
  }
}
:where(.xt) .pricing-content .pricing-body ul {
  display: grid;
  gap: 10px;
}
:where(.xt) .pricing-content .pricing-body li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .pricing-content .pricing-body li {
    font-size: 0.875rem;
  }
}
:where(.xt) .pricing-content .pricing-body li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 free";
  font-weight: 900;
  color: hsl(var(--base));
}
:where(.xt) .pricing-content .btn {
  width: 100%;
  border-radius: 15px;
  color: hsl(var(--white));
  background-color: hsl(var(--gray)/0.2) !important;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(.xt) .pricing-content .btn:hover {
  background-color: hsl(var(--base)) !important;
  color: hsl(var(--black));
}

/* ======================  Pricing Section End  ======================*/
/* ======================  Testimonial Start  ======================*/
:where(.xt) .testimonial-section .swiper-pagination {
  position: relative;
  margin-top: 40px;
  display: none;
}
:where(.xt) .testimonial-section .swiper-pagination-bullet {
  background-color: hsl(var(--white));
  width: 10px;
  height: 10px;
  margin: 0 7px !important;
}
:where(.xt) .testimonial-section .swiper-pagination-bullet-active {
  background-color: hsl(var(--base-two));
}

:where(.xt) .testimonial-shape img {
  position: absolute;
}
:where(.xt) .testimonial-shape img:first-child {
  right: -15%;
  top: -10px;
}
:where(.xt) .testimonial-shape img:last-child {
  bottom: -15%;
  left: -15%;
}

:where(.xt) .testimonial-item {
  background-color: hsl(var(--gray)/0.12);
  border-radius: 15px;
  position: relative;
  padding: 30px;
}
:where(.xt) .testimonial-item .start-client {
  position: absolute;
  background-color: hsl(var(--black-two));
  right: 0;
  top: 0;
  border-bottom-left-radius: 15px;
  padding: 0px 20px 15px;
}
:where(.xt) .testimonial-item .start-client::before, :where(.xt) .testimonial-item .start-client::after {
  content: "";
  position: absolute;
  --border-shape: 15px;
  --border2-shape: -15px;
  width: var(--border-shape);
  height: var(--border-shape);
  background-size: cover;
  background-color: hsl(var(--black-two));
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAABwCAMAAAANKy+zAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAANJQTFRFAAAAGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbn5jZLgAAAEZ0Uk5TAP8It0fK8wJvzo/6BK4XVye/d9IcImTH7wzlMfaf6l01stx/8fggQD38isSZfmIeTGfgEZVEbFCHwaPnD+3Ygiye1xXjeeHouDIAAAIPSURBVHicxdiHVhpBFMbxLwtmKSsdEYEAsawx2I0aS0ws7/9KGRL1HKWty8z8vxf4nSl7753VQW3vz7B1/cl79JJm3N+/WvkMyM9p/Dg/q24Q8r8EneNRvkjI/1e/trrFyCZRvFdn5HF2zjNdRh4f+9HZCSOblGpfIdlkt2f3Y08uSw/7XyDZnPhBHpJNsiuUbM1OIRv7OyVLcYuSzbqXvWupZeliOXsJWcHdNiRLlZ+ULK2lLmvLyioNKdksO10nsSCrmaqw2JAVPqUYF63IUufjg4MlWe0rSpb6H7xo9mRVflGyboaULN1hso6SP4gsyxokruO2ZTUfKVmNhI9A+7JukjVtB7LaGUpWkIR2Iiei3chJaEey2gufQK5knS7q2M5kNRf8VXMn6/f8hu1QVjx3OnMp6xiTVcDkcJWSFcxuXI5l7axTsi4weeYtcy9HMyq4e3nWUXuQVcZkTf2qvciNW0qeut9+5Gn77Uk+nOzVnmTlMDmcqCe+ZA2+UfJE/fYnl7YoWTVMDq4p+d0o6lMO65SsPiZHG5T8pob6lYN1StYmJp92KVk9TB5gslqYXMbk6JaSXycE/3IHk5XH5Bwml4qUrAwm5zC5gsm6x+QCJmcxOdimZFUxeROTY0weHzQjjw8aki8xuYzJFUwOu5Rsxm5KHmFyDpOzmHyIyVGRknWCyVVM7mHyJSbX/gICsCIViQTHogAAAABJRU5ErkJggg==);
          mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAABwCAMAAAANKy+zAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAANJQTFRFAAAAGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbn5jZLgAAAEZ0Uk5TAP8It0fK8wJvzo/6BK4XVye/d9IcImTH7wzlMfaf6l01stx/8fggQD38isSZfmIeTGfgEZVEbFCHwaPnD+3Ygiye1xXjeeHouDIAAAIPSURBVHicxdiHVhpBFMbxLwtmKSsdEYEAsawx2I0aS0ws7/9KGRL1HKWty8z8vxf4nSl7753VQW3vz7B1/cl79JJm3N+/WvkMyM9p/Dg/q24Q8r8EneNRvkjI/1e/trrFyCZRvFdn5HF2zjNdRh4f+9HZCSOblGpfIdlkt2f3Y08uSw/7XyDZnPhBHpJNsiuUbM1OIRv7OyVLcYuSzbqXvWupZeliOXsJWcHdNiRLlZ+ULK2lLmvLyioNKdksO10nsSCrmaqw2JAVPqUYF63IUufjg4MlWe0rSpb6H7xo9mRVflGyboaULN1hso6SP4gsyxokruO2ZTUfKVmNhI9A+7JukjVtB7LaGUpWkIR2Iiei3chJaEey2gufQK5knS7q2M5kNRf8VXMn6/f8hu1QVjx3OnMp6xiTVcDkcJWSFcxuXI5l7axTsi4weeYtcy9HMyq4e3nWUXuQVcZkTf2qvciNW0qeut9+5Gn77Uk+nOzVnmTlMDmcqCe+ZA2+UfJE/fYnl7YoWTVMDq4p+d0o6lMO65SsPiZHG5T8pob6lYN1StYmJp92KVk9TB5gslqYXMbk6JaSXycE/3IHk5XH5Bwml4qUrAwm5zC5gsm6x+QCJmcxOdimZFUxeROTY0weHzQjjw8aki8xuYzJFUwOu5Rsxm5KHmFyDpOzmHyIyVGRknWCyVVM7mHyJSbX/gICsCIViQTHogAAAABJRU5ErkJggg==);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
          mask-size: 100%;
}
:where(.xt) .testimonial-item .start-client::before {
  left: var(--border2-shape);
}
:where(.xt) .testimonial-item .start-client::after {
  bottom: var(--border2-shape);
  right: 0;
}
:where(.xt) .testimonial-item .client-text {
  padding: 26px 0;
}

/* ======================  Testimonial End  ======================*/
/* ======================  Faq Section Start  ======================*/
:where(.xt) .faq-shape img {
  position: absolute;
}
:where(.xt) .faq-shape img:first-child {
  left: -10%;
}
:where(.xt) .faq-shape img:last-child {
  bottom: 50px;
  right: -13%;
}

/* ======================  Faq Section End  ======================*/
/* ======================  Blog Start  ======================*/
:where(.xt) .blog-shape img {
  position: absolute;
}
:where(.xt) .blog-shape img:first-child {
  left: -13%;
  top: 14%;
}
:where(.xt) .blog-shape img:last-child {
  right: -15%;
  bottom: 5%;
}

:where(.xt) .blog-section .col-lg-6 .blog-item h4 {
  font-size: 1.875rem;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .blog-section .col-lg-6 .blog-item h4 {
    font-size: 1.5625rem;
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) .blog-section .col-lg-6 .blog-item h4 {
    font-size: 1.25rem;
  }
}

:where(.xt) .blog-item {
  background-color: hsl(var(--gray)/0.12);
  padding: 30px;
  border-radius: 15px;
}
@media screen and (max-width: 575px) {
  :where(.xt) .blog-item {
    padding: 20px;
  }
}
:where(.xt) .blog-item img {
  border-radius: 15px;
}
:where(.xt) .blog-item h4 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:where(.xt) .blog-item .blog-list {
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 18px 0 15px;
}
@media screen and (max-width: 767px) {
  :where(.xt) .blog-item .blog-list {
    gap: 20px;
  }
}
:where(.xt) .blog-item .blog-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
@media screen and (max-width: 575px) {
  :where(.xt) .blog-item .blog-list li {
    font-size: 14px;
  }
}
:where(.xt) .blog-item .blog-list li::before {
  content: "\f111";
  font-family: "Font Awesome 6 free";
  font-weight: 900;
  font-size: 7px;
  color: hsl(var(--base));
}
:where(.xt) .blog-item .btn {
  margin-top: 10px;
  padding: 12px 20px;
  font-weight: 600;
}

:where(.xt) .blog-details-content {
  display: grid;
  gap: 24px;
  border: 1px solid hsl(var(--gray)/0.25);
  border-radius: 15px;
  padding: 30px;
}
:where(.xt) .blog-details-content img {
  border-radius: 13px;
}
:where(.xt) .blog-details-content ul {
  display: grid;
  gap: 10px;
}
:where(.xt) .blog-details-content ul li {
  font-size: 1rem;
  font-weight: 500;
  color: hsl(var(--white));
  display: flex;
  align-items: center;
  gap: 15px;
  transition: 0.4s;
}
:where(.xt) .blog-details-content ul li::before {
  content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 8px;
  color: hsl(var(--base-two));
}

:where(.xt) .blog-que {
  background: hsl(var(--gray)/0.12);
  padding: 24px;
  border-radius: 13px;
  position: relative;
  z-index: 1;
}
:where(.xt) .blog-que svg {
  position: absolute;
  z-index: -1;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.3;
}
:where(.xt) .blog-que p {
  font-style: italic;
}
:where(.xt) .blog-que .user {
  font-size: 1.125rem;
  font-weight: 700;
  color: hsl(var(--white));
  position: relative;
  padding-left: 50px;
  margin-top: 15px;
}
:where(.xt) .blog-que .user::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 40px;
  height: 2px;
  background: hsl(var(--base));
}

:where(.xt) .sidebar-item {
  background: hsl(var(--gray)/0.12);
  padding: 24px 24px 30px;
  border-radius: 10px;
}
@media screen and (max-width: 575px) {
  :where(.xt) .sidebar-item {
    padding: 20px;
  }
}
:where(.xt) .sidebar-item h5 {
  padding-bottom: 20px;
  margin-bottom: 0;
}
:where(.xt) .sidebar-item form {
  position: relative;
}
:where(.xt) .sidebar-item form input {
  width: 100%;
  height: 62px;
  border-radius: 8px;
  border: 1px solid hsl(var(--white)/0.12);
  background: none;
  outline: none;
  box-sizing: none;
  color: hsl(var(--white));
  font-size: 1rem;
  font-weight: 400;
  padding: 0 20px;
}
:where(.xt) .sidebar-item form input::-moz-placeholder {
  color: hsl(var(--white)/0.5);
}
:where(.xt) .sidebar-item form input::placeholder {
  color: hsl(var(--white)/0.5);
}
:where(.xt) .sidebar-item form button {
  background: none;
  outline: none;
  box-shadow: none;
  position: absolute;
  right: 0;
  top: 0;
  color: hsl(var(--gray));
  padding: 18px 18px;
  transition: all 0.3s;
}
:where(.xt) .sidebar-item form button:hover {
  color: hsl(var(--white));
}
:where(.xt) .sidebar-item .category-file {
  display: grid;
  gap: 15px;
}
:where(.xt) .sidebar-item .category-file a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: hsl(var(--white)/0.5);
  border: 1px solid hsl(var(--white)/0.12);
  padding: 15px;
  border-radius: 8px;
  transition: all 0.3s;
}
:where(.xt) .sidebar-item .category-file a:hover {
  background-color: hsl(var(--base));
  color: hsl(var(--black));
}
:where(.xt) .sidebar-item .category-file a:hover .category-title i {
  color: hsl(var(--black));
}
:where(.xt) .sidebar-item .category-file .category-title i {
  color: hsl(var(--base));
  margin-right: 8px;
}
:where(.xt) .sidebar-item .recent-post {
  display: grid;
  gap: 15px;
}
:where(.xt) .sidebar-item .recent-post__item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 15px;
  background-color: hsl(var(--black-two));
  padding: 10px;
  border-radius: 10px;
  transition: all 0.4s;
  align-items: center;
}
:where(.xt) .sidebar-item .recent-post__item:hover {
  transform: translateY(-5px);
}
:where(.xt) .sidebar-item .recent-post__item .img {
  border-radius: 10px;
  overflow: hidden;
}
:where(.xt) .sidebar-item .recent-post__item .img img {
  width: 100%;
}
:where(.xt) .sidebar-item .recent-post__item .date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: hsl(var(--white)/0.7);
}
@media screen and (max-width: 424px) {
  :where(.xt) .sidebar-item .recent-post__item .date {
    font-size: 0.625rem;
  }
}
:where(.xt) .sidebar-item .recent-post__item .date::before {
  content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 6px;
  color: hsl(var(--base));
}
:where(.xt) .sidebar-item .recent-post__item h6 {
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 10px;
  color: hsl(var(--white)/0.9);
  margin-bottom: 0;
}
@media screen and (max-width: 575px) {
  :where(.xt) .sidebar-item .recent-post__item h6 {
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 424px) {
  :where(.xt) .sidebar-item .recent-post__item h6 {
    font-size: 0.75rem;
  }
}
:where(.xt) .sidebar-item .recent-post__item h6 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:where(.xt) .sidebar-item .tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
:where(.xt) .sidebar-item .tags-list a {
  padding: 8px 12px;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid hsl(var(--border-color)/0.2);
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--white)/0.7);
  transition: all 0.4s;
  font-family: "Space Grotesk";
}
:where(.xt) .sidebar-item .tags-list a:hover {
  background-color: hsl(var(--base));
  color: hsl(var(--black));
}

:where(.xt) .blogs-tags p strong {
  color: hsl(var(--white));
  margin-right: 10px;
  font-size: 1.25rem;
}
:where(.xt) .blogs-tags p a {
  color: hsl(var(--body-color));
  margin: 0 5px;
}

/* ======================  Blog End  ======================*/
/* ======================  Call-to-action Start  ======================*/
:where(.xt) .call-to-action-section {
  position: relative;
  z-index: 1;
}
:where(.xt) .call-to-action-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: hsl(var(--page));
}
@media screen and (max-width: 575px) {
  :where(.xt) .call-to-action-section h2 {
    font-size: 1.5rem;
  }
}

:where(.xt) .call-action-box {
  border: 1px solid hsl(var(--base-two));
  background-color: hsl(var(--black-two));
  border-radius: 20px;
  padding: 60px;
}
@media screen and (max-width: 575px) {
  :where(.xt) .call-action-box {
    padding: 40px;
  }
}
@media screen and (max-width: 424px) {
  :where(.xt) .call-action-box {
    padding: 20px;
  }
}

:where(.xt) .call-shape img {
  position: absolute;
  bottom: 50px;
  left: 48%;
}
@media screen and (max-width: 991px) {
  :where(.xt) .call-shape img {
    bottom: auto;
    top: 5%;
    left: 10%;
  }
}

/* ======================  Call-to-action End  ======================*/
/* ======================  Process Start  ======================*/
:where(.xt) .process-item {
  --process-p: 40px;
  background-color: hsl(var(--gray)/0.12);
  border-radius: 15px;
  padding: var(--process-p);
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  :where(.xt) .process-item {
    --process-p: 30px;
  }
}
:where(.xt) .process-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--process-p);
  top: var(--process-p);
  background-color: hsl(var(--base));
  border-radius: 100%;
  width: 60px;
  height: 60px;
  transition: all 0.4s;
}
:where(.xt) .process-item:hover::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
:where(.xt) .process-item:hover .number {
  background-color: hsl(var(--black));
  color: hsl(var(--base));
}
:where(.xt) .process-item:hover p {
  color: hsl(var(--black)/0.8);
}
:where(.xt) .process-item:hover h4 {
  color: hsl(var(--black));
}
:where(.xt) .process-item .number {
  background-color: hsl(var(--base));
  color: hsl(var(--black));
  width: 60px;
  height: 60px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5625rem;
  font-weight: 600;
  transition: all 0.3s;
}
:where(.xt) .process-item .process-title {
  max-width: 218px;
  margin-bottom: 0;
}
:where(.xt) .process-item p, :where(.xt) .process-item h4 {
  transition: all 0.4s;
}

/* ======================  Process End  ======================*/
/* ======================  Roadmap Start  ======================*/
:where(.xt) .roadmap-features {
  position: relative;
}
@media screen and (max-width: 767px) {
  :where(.xt) .roadmap-features {
    padding-left: 20px;
  }
}
:where(.xt) .roadmap-features::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: hsl(var(--white));
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  :where(.xt) .roadmap-features::before {
    left: 0;
  }
}
:where(.xt) .roadmap-features .roadmap-line {
  position: absolute;
  width: 2px;
  height: 20%;
  background-color: hsl(var(--base));
  left: 50%;
  transform: translateX(-50%);
  height: 400px;
}
@media screen and (max-width: 767px) {
  :where(.xt) .roadmap-features .roadmap-line {
    left: 0;
  }
}
:where(.xt) .roadmap-features .roadmap-line::after, :where(.xt) .roadmap-features .roadmap-line::before {
  content: "\f111";
  font-family: "Font Awesome 6 free";
  font-weight: 900;
  font-size: 10px;
  position: absolute;
  left: -9px;
  color: hsl(var(--base));
  border: 1px solid hsl(var(--white));
  border-radius: 100px;
  padding: 2.5px 4px;
}
:where(.xt) .roadmap-features .roadmap-line::before {
  top: -7px;
}
:where(.xt) .roadmap-features .roadmap-line::after {
  bottom: -7px;
}

:where(.xt) .roadmap-content {
  display: grid;
  row-gap: 60px;
}
:where(.xt) .roadmap-content .roadmap-item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px;
  align-items: center;
}
@media screen and (max-width: 767px) {
  :where(.xt) .roadmap-content .roadmap-item {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
:where(.xt) .roadmap-content .roadmap-item:nth-child(even) .roadmap-number {
  background-color: hsl(var(--base-two));
  order: 1;
  margin-right: auto;
  margin-left: 0;
}
@media screen and (max-width: 767px) {
  :where(.xt) .roadmap-content .roadmap-item:nth-child(even) .roadmap-number {
    order: 0;
    margin-right: 0;
  }
}
:where(.xt) .roadmap-content .roadmap-item .roadmap-number {
  background-color: hsl(var(--base));
  border-radius: 15px;
  padding: 35px;
  min-width: 270px;
  text-align: center;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  :where(.xt) .roadmap-content .roadmap-item .roadmap-number {
    margin-left: 0;
  }
}
:where(.xt) .roadmap-content .roadmap-item .roadmap-number h4 {
  color: hsl(var(--black));
}
:where(.xt) .roadmap-content .roadmap-item .roadmap-number p {
  color: hsl(var(--gray));
}
:where(.xt) .roadmap-content .roadmap-item .roadmap-text {
  background-color: hsl(var(--black-two));
  border: 1px solid hsl(var(--gray-two)/0.12);
  padding: 40px;
  border-radius: 15px;
}
@media screen and (max-width: 575px) {
  :where(.xt) .roadmap-content .roadmap-item .roadmap-text {
    padding: 24px;
  }
  :where(.xt) .roadmap-content .roadmap-item .roadmap-text p {
    font-size: 14px;
  }
}

/* ======================  Roadmap End  ======================*/
/* ======================  Team Start  ======================*/
:where(.xt) .team-slide .swiper-pagination {
  position: relative;
  margin-top: 40px;
}
:where(.xt) .team-slide .swiper-pagination-bullet {
  background-color: hsl(var(--white));
  width: 10px;
  height: 10px;
  margin: 0 7px !important;
}
:where(.xt) .team-slide .swiper-pagination-bullet-active {
  background-color: hsl(var(--base-two));
}

:where(.xt) .team-item {
  background-color: hsl(var(--black-two));
  border: 1px solid hsl(var(--gray)/0.25);
  border-radius: 15px;
  padding: 15px;
  transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 575px) {
  :where(.xt) .team-item {
    max-width: 300px;
    margin: 0 auto;
  }
}
:where(.xt) .team-item:hover {
  border-color: hsl(var(--base));
  box-shadow: 0 0 10px hsl(var(--base)/0.2);
}
:where(.xt) .team-item:hover img {
  transform: scale(1.05) rotate(2deg);
  filter: brightness(1.1);
}
:where(.xt) .team-item .team-img {
  overflow: hidden;
  border-radius: 10px;
  display: block;
}
:where(.xt) .team-item .team-img img {
  transition: all 0.3s ease-in-out;
  width: 100%;
}
:where(.xt) .team-item .team-content {
  text-align: center;
  padding: 20px 0 15px;
}

:where(.xt) .team-details-content .team-add-list {
  display: grid;
  gap: 5px;
}
:where(.xt) .team-details-content .team-add-list li span:first-child {
  min-width: 150px;
}
:where(.xt) .team-details-content .team-add-list li span:last-child {
  color: hsl(var(--white));
}

:where(.xt) .team-details-img img {
  border-radius: 10px;
}

:where(.xt) .professional-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  row-gap: 20px;
}
@media screen and (max-width: 991px) {
  :where(.xt) .professional-content {
    grid-template-columns: 1fr;
  }
}
:where(.xt) .professional-content .fs-16 {
  padding-bottom: 10px;
  font-weight: 500;
}
:where(.xt) .professional-content .percentage {
  font-size: 0.9375rem;
  color: hsl(var(--white));
  font-weight: 500;
  transform: translate(-20px, -30px);
}
@media screen and (max-width: 424px) {
  :where(.xt) .professional-content .percentage {
    width: 42px;
  }
}

/* ======================  Team End  ======================*/
/* ======================  Contact Start  ======================*/
:where(.xt) .contact-map {
  width: 100%;
  height: 500px;
  border-radius: 15px;
}
@media screen and (max-width: 991px) {
  :where(.xt) .contact-map {
    height: 400px;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .contact-map {
    height: 300px;
  }
}

:where(.xt) .enquiry-form,
:where(.xt) .contact-info {
  background-color: hsl(var(--gray)/0.12);
  border-radius: 15px;
  padding: 30px;
}
:where(.xt) .enquiry-form ul li,
:where(.xt) .contact-info ul li {
  align-items: center;
}
:where(.xt) .enquiry-form ul li:hover .icon,
:where(.xt) .contact-info ul li:hover .icon {
  background-color: hsl(var(--base));
  color: hsl(var(--black));
}
:where(.xt) .enquiry-form ul li:hover a,
:where(.xt) .enquiry-form ul li:hover p,
:where(.xt) .contact-info ul li:hover a,
:where(.xt) .contact-info ul li:hover p {
  color: hsl(var(--base));
}
:where(.xt) .enquiry-form ul .icon,
:where(.xt) .contact-info ul .icon {
  background: hsl(var(--white)/0.12);
  color: hsl(var(--body-color));
  width: 40px;
  height: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s;
  font-size: 1rem;
}
:where(.xt) .enquiry-form ul p,
:where(.xt) .contact-info ul p {
  max-width: 225px;
}
:where(.xt) .enquiry-form ul p a,
:where(.xt) .contact-info ul p a {
  color: hsl(var(--body-color));
}
:where(.xt) .enquiry-form .social-icon,
:where(.xt) .contact-info .social-icon {
  justify-content: start;
}
:where(.xt) .enquiry-form .social-icon a,
:where(.xt) .contact-info .social-icon a {
  width: 50px;
  height: 50px;
  font-size: 1rem;
}
:where(.xt) .enquiry-form .social-icon a:hover,
:where(.xt) .contact-info .social-icon a:hover {
  color: hsl(var(--black));
}

:where(.xt) .login-section {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 130px 0 100px;
  position: relative;
  z-index: 1;
}
:where(.xt) .login-section::before, :where(.xt) .login-section::after {
  content: "";
  position: absolute;
  width: 100%;
  background-image: url(/assets/images/wave.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -1;
}
:where(.xt) .login-section::before {
  background-image: url(/assets/images/login-bg.jpg);
  height: 100%;
  opacity: 0.05;
}
:where(.xt) .login-section::after {
  bottom: 0;
  height: 330px;
  opacity: 0.15;
}
:where(.xt) .login-section .login-content-box {
  background-color: hsl(var(--black)/0.5);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border-radius: 15px;
  padding: 50px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
}
@media screen and (max-width: 991px) {
  :where(.xt) .login-section .login-content-box {
    grid-template-columns: 1fr;
    padding: 30px;
    gap: 30px;
  }
}
:where(.xt) .login-section .forgot-password {
  grid-template-columns: 1fr;
}
:where(.xt) .login-section .forgot-password .back-home-btn {
  color: hsl(var(--white));
}
:where(.xt) .login-section .forgot-password .back-home-btn:hover {
  color: hsl(var(--base));
}
:where(.xt) .login-section .forgot-password .btn {
  width: 100%;
}

:where(.xt) .login-img-box {
  background-image: url(/assets/images/login-img.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 10px;
  padding: 50px 30px;
  display: grid;
  align-content: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
:where(.xt) .login-img-box::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(var(--black)/0.7);
  border-radius: 10px;
}
:where(.xt) .login-img-box h3 {
  padding-top: 10px;
}

:where(.xt) .or-form {
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 1px;
  justify-content: space-between;
}
:where(.xt) .or-form::after, :where(.xt) .or-form::before {
  content: "";
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 0.8px;
  background: hsl(var(--white)/0.2);
  z-index: -1;
  width: 34%;
}
:where(.xt) .or-form span {
  font-weight: 600;
  display: inline-block;
  padding: 0 10px;
  font-size: 0.875rem;
}
@media screen and (max-width: 767px) {
  :where(.xt) .or-form span {
    font-size: 0.8125rem;
    padding: 0 5px;
  }
}

:where(.xt) .other-sing {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
:where(.xt) .other-sing button {
  background: hsl(var(--base)/0.1);
  width: 100%;
  height: 50px;
  border-radius: 5px;
  font-size: 1.25rem;
  font-weight: 500;
  color: hsl(var(--white)/0.7);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  transition: all 0.4s;
}

/* ======================  Contact End  ======================*/
/* ======================  Account Start  ======================*/
:where(.xt) .account-item {
  background-color: hsl(var(--black-two));
  border-radius: 15px;
  padding: 20px;
  transition: all 0.3s ease-in-out;
  border: 1px solid hsl(var(--black-two));
}
:where(.xt) .account-item:hover {
  border-color: hsl(var(--black));
  box-shadow: 0 0 10px hsl(var(--white)/0.05);
}
:where(.xt) .account-item:hover img {
  transform: scale(1.05) rotate(2deg);
  filter: brightness(1.1);
}
:where(.xt) .account-item .account-img {
  border-radius: 15px;
  overflow: hidden;
}
:where(.xt) .account-item .account-img img {
  transition: all 0.3s ease-in-out;
}
:where(.xt) .account-item .account-text p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9375rem;
  max-width: 360px;
}
:where(.xt) .account-item .account-text .opne-account {
  color: hsl(var(--white)/0.8);
}
:where(.xt) .account-item .account-text .opne-account:hover {
  color: hsl(var(--base));
}
:where(.xt) .account-item .account-text .btn {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(.xt) .account-item .account-text .btn:hover i {
  transform: rotate(10deg);
}
:where(.xt) .account-item .account-text .btn i {
  transform: translateY(-3px);
  transition: all 0.3s ease-in-out;
}

:where(.xt) .account-details-content img {
  border-radius: 15px;
}
:where(.xt) .account-details-content .info-inner {
  position: relative;
  display: block;
  border: 1px solid hsl(var(--gray));
  border-radius: 10px;
  margin: 10px 0;
}
@media screen and (max-width: 991px) {
  :where(.xt) .account-details-content .info-inner {
    padding: 20px;
  }
}
:where(.xt) .account-details-content .info-inner .info-list:first-child {
  border-bottom: 1px solid hsl(var(--gray));
}
@media screen and (max-width: 991px) {
  :where(.xt) .account-details-content .info-inner .info-list:first-child {
    border: none;
  }
}
:where(.xt) .account-details-content .info-inner .info-list li {
  position: relative;
  float: left;
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  color: var(--title-color);
  padding: 22px 30px;
  border-right: 1px solid hsl(var(--gray));
}
:where(.xt) .account-details-content .info-inner .info-list li:last-child {
  border: none !important;
}
@media screen and (max-width: 1199px) {
  :where(.xt) .account-details-content .info-inner .info-list li {
    padding: 20px;
    font-size: 14px;
  }
}
@media screen and (max-width: 991px) {
  :where(.xt) .account-details-content .info-inner .info-list li {
    width: 50%;
    padding: 12px 20px;
  }
  :where(.xt) .account-details-content .info-inner .info-list li:nth-child(2) {
    border: none;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .account-details-content .info-inner .info-list li {
    width: 100%;
    border: 0;
  }
}

:where(.xt) .account-benefits {
  -moz-columns: 2 200px;
       columns: 2 200px;
  -moz-column-gap: 20px;
       column-gap: 20px;
}
:where(.xt) .account-benefits li {
  background-color: hsl(var(--black-two));
  padding: 14px 20px;
  border-radius: 10px;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}
:where(.xt) .account-benefits li::before {
  content: "\f14a";
  font-family: "Font Awesome 6 free";
  font-weight: 900;
  color: hsl(var(--base-two));
  font-size: 25px;
}

:where(.xt) .account-stander {
  -moz-columns: 2 250px;
       columns: 2 250px;
  -moz-column-gap: 20px;
       column-gap: 20px;
}
:where(.xt) .account-stander li {
  border: 1px solid hsl(var(--black-two));
  padding: 20px;
  border-radius: 10px;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
:where(.xt) .account-stander li span {
  font-size: 16px;
}
@media screen and (max-width: 1399px) {
  :where(.xt) .account-stander li span {
    font-size: 15px;
  }
}
@media screen and (max-width: 767px) {
  :where(.xt) .account-stander li span {
    font-size: 14px;
  }
}
:where(.xt) .account-stander li span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}
:where(.xt) .account-stander li span:first-child::before {
  content: "\f101";
  font-family: "Font Awesome 6 free";
  font-weight: 900;
  color: hsl(var(--black));
  font-size: 13px;
  background-color: hsl(var(--base-two));
  border-radius: 3px;
  padding: 2px 5px;
}

/* ======================  Account End  ======================*/
/* ======================  Market Start  ======================*/
:where(.xt) #tradingview-ticker-tape {
  background-color: hsl(var(--gray)/0.12);
  border-radius: 6px;
  padding: 15px;
}

:where(.xt) .market-card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  background-color: hsl(var(--gray)/0.12);
  border: 1px solid hsl(var(--gray)/0.12);
  border-radius: 15px;
  overflow: hidden;
  padding: 24px;
  transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
  :where(.xt) .market-card {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 424px) {
  :where(.xt) .market-card {
    padding: 15px;
  }
}
:where(.xt) .market-card:hover {
  box-shadow: 0 0 10px hsl(var(--white)/0.05);
}
:where(.xt) .market-card:hover img {
  transform: scale(1.05) rotate(2deg);
  filter: brightness(1.1);
}
:where(.xt) .market-card .market-img {
  overflow: hidden;
  border-radius: 10px;
}
:where(.xt) .market-card .market-img img {
  transition: all 0.3s ease-in-out;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
:where(.xt) .market-card .market-text .btn {
  margin-top: 24px;
  padding: 12px 20px;
  font-weight: 600;
}

:where(.xt) .market-details-content img {
  border-radius: 15px;
}
:where(.xt) .market-details-content ul {
  display: grid;
  gap: 10px;
}
:where(.xt) .market-details-content ul li {
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: 0.4s;
}
:where(.xt) .market-details-content ul li::before {
  content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 8px;
  color: hsl(var(--base-two));
}

:where(.xt) .marketview-widget-container {
  padding: 0 10px 15px;
  border-radius: 10px;
  overflow: hidden;
  background-color: hsl(var(--gray)/0.12);
  border: none !important;
  box-shadow: none !important;
}

/* ======================  Market End  ======================*/
/* ======================  Privacy Start  ======================*/
:where(.xt) .privacy-content h4 {
  font-size: 1.6875rem;
  margin-top: 15px;
}
:where(.xt) .privacy-content ul {
  display: grid;
  gap: 10px;
  margin-left: 30px;
  margin-top: 15px;
}
:where(.xt) .privacy-content ul li {
  display: flex;
  align-items: center;
  gap: 10px;
}
:where(.xt) .privacy-content ul li::before {
  content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 5px;
  color: hsl(var(--base-two));
  opacity: 0.6;
}
:where(.xt) .privacy-content ol {
  list-style: lower-alpha;
  margin-left: 35px;
  padding-top: 6px;
}

/* ======================  Privacy End  ======================*/
/* ======================  Error Start  ======================*/
:where(.xt) .error-section {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 130px 0 100px;
  position: relative;
  z-index: 1;
  background-color: hsl(var(--black)/0.98);
}
:where(.xt) .error-section::before, :where(.xt) .error-section::after {
  content: "";
  position: absolute;
  width: 100%;
  background-image: url(/assets/images/wave.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -1;
}
:where(.xt) .error-section::before {
  background-image: url(/assets/images/login-bg.jpg);
  height: 100%;
  opacity: 0.05;
}
:where(.xt) .error-section::after {
  bottom: 0;
  height: 330px;
  opacity: 0.15;
}
:where(.xt) .error-section .error-img {
  max-width: 600px;
  margin: 0 auto;
}
:where(.xt) .error-section .error-icons {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}
:where(.xt) .error-section .error-icons img {
  width: 100%;
}
:where(.xt) .error-section .error-icons img:nth-child(2) {
  animation: alltuchtopdown 1.6s ease-in-out 0s infinite alternate;
}

/* ======================  Error End  ======================*/

/* Odometer (CDN theme) — the template inherits the section's own font and line height for its counters. */
:where(.xt) .odometer.odometer-auto-theme,
:where(.xt) .odometer.odometer-theme-default {
  font-family: inherit;
  line-height: inherit;
}

@charset "UTF-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}

:root {
  /* Last-resort value only — skin.js writes --primary-button on :root from
     NODE_PRIMARY (or the active skin's entry in SKIN_PRIMARY), and an inline
     style out-ranks this. */
  --primary-button: #766fb2;

  /* material-resets-public.css styles .btn-alt-secondary, .btn-trans-secondary
     and .btn-alt-secondary:hover out of this token, but nothing in the repo has
     ever DEFINED it — those three rules have always resolved var() to nothing,
     which makes the whole declaration invalid at computed-value time, so the
     border and text colour silently fell back to inherited values. A mid slate
     reads against both the light and the dark themes. */
  --secondary-button: #6078a9;

  --secondary-link-colour: #766fb2;

  --primary-border-colour: silver;

  /* The "included" tick on the plan cards. Was hardcoded inline in three
     separate copies of the plan card; defined here so it is themeable in one
     place. The value is the teal those cards already used. */
  --plan-check-colour: #30bca6;
}

iframe[src*='embed-widget'] {
  pointer-events: none;
}

#goog-gt-vt {
  display: none;
}

iframe.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none;
}

/* Hide the Google Translate top banner */
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

/* The default app's face. Set on BODY, not on .ap — that class is only on the
   guest layout, so /user and /cp were falling back to Materialize's default
   and the three areas did not match. The app stylesheet is the last one the
   shells load, so this wins on order without needing !important. */
:root {
  --ap-font: 'Signika Negative', 'Helvetica Neue', Arial, sans-serif;
}

body {
  font-family: var(--ap-font);
}

/* SCOPING (CRITICAL): this stylesheet used to be a skin's own _css/ap.css, so
   it could style bare `body`/`h1`/`.btn`. It now lives in the DEFAULT tree and
   is imported by app/(guest)/_layout.js, which means it bundles for EVERY skin
   — an unscoped rule here repaints every other skin's buttons and headings.
   So the design-wide rules below are scoped to `.ap`, the wrapper the default
   guest chrome renders. A skin that ships its own (guest)/_layout.js never
   renders that wrapper, so it keeps its own typography and buttons. Everything
   else in this file is already `.ap-*` prefixed — keep it that way. */
.ap {
  font-size: 16px;
  font-family: var(--ap-font);
}

/* Materialize pins .btn to `height: 36px; line-height: 36px`, so vertical
   padding alone cannot make the button taller — with box-sizing: border-box it
   only shrinks the content box while the 36px line box still starts BELOW the
   top padding, dropping the label ~7.5px under centre. That read as too much
   padding on top. Releasing the fixed height and the 36px line-height lets the
   padding do what it was written to do and re-centres the label. */
.ap .btn {
  height: auto;
  line-height: 1.5;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 20px;
}

.ap .btn.btn-secondary {
  border-color: #334155;
}

/* ─── Language switcher ────────────────────────────────────────────────────
   Rendered from the footer but pinned to the viewport, matching the reference.
   Bottom-LEFT on purpose: bottom-right is where support/chat buttons live. */
.ap .ap-translator {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 900;
}

.ap .ap-translator-trigger {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border-colour);
  border-radius: 999px;
  background: var(--primary-background);
  color: var(--background-font-colour);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.ap .ap-translator-trigger .material-icons {
  font-size: 18px;
}

/* Catches the click that closes the panel without dimming the page. */
.ap .ap-translator-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.ap .ap-translator-list {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 2;
  width: 220px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  background: var(--primary-background);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.ap .ap-translator-list li {
  margin: 0;
}

.ap .ap-translator-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--background-font-colour);
  cursor: pointer;
}

.ap .ap-translator-list a:hover {
  background: var(--hover);
}

.ap .ap-translator-current {
  font-weight: 600;
  background: var(--hover);
}

/* ─── Nav brand ────────────────────────────────────────────────────────────
   An <img> in a Materialize nav sits on the text baseline of a 64px
   line-height, which parks a 36px logo well above centre — the markup used to
   correct that with an inline `top: -8px`, which still left it 21px high and
   clipping the top of the bar. Centring it properly needs no magic number. */
.ap nav .ap-nav-brand a {
  display: flex;
  align-items: center;
  height: 64px;
  margin-left: -10px; /* optical: pulls the mark back to the container edge */
}

.ap nav .ap-nav-brand img {
  display: block;
}

/* ─── Hero background video ────────────────────────────────────────────────
   The section keeps its own dark `bg bg-secondary` surface, so a failed or
   still-buffering video degrades to exactly what was there before rather than
   to a blank band. The video is painted over that, the overlay over the video,
   and the copy over the overlay. */
.ap .ap-hero {
  position: relative;
  overflow: hidden;
}

.ap .ap-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  pointer-events: none; /* decoration — never eats a click or a scroll */
}

/* Without this the copy would have to survive whatever frame is behind it. */
.ap .ap-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(1, 1, 33, 0.55);
}

.ap .ap-hero-inner {
  position: relative; /* lifts the copy above the video + overlay */
}

/* ─── The nav sits ON the hero video ───────────────────────────────────────
   This nav is a normal in-flow element (no Materialize .navbar-fixed), so the
   hero begins BELOW it and .ap-hero's overflow:hidden clips the video short of
   the bar. Lifting the nav out of flow lets the hero start at y=0 and paint
   its video the full height, nav included.

   :has() keeps all of this to pages that actually have a hero — every other
   guest page keeps its normal in-flow, solid bar. */
.ap:has(.ap-hero) {
  position: relative; /* containing block for the nav below */
}

.ap:has(.ap-hero) nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3; /* over the hero's video AND its overlay */
}

/* The nav no longer occupies flow, so the hero owes its content that height. */
.ap:has(.ap-hero) .ap-hero {
  padding-top: 64px;
}

/* No scroll-toggle back to a solid bar: this nav is not sticky, so it simply
   scrolls away with the hero and never ends up over other content. */
.ap:has(.ap-hero) nav {
  background: transparent;
  box-shadow: none;
}

.ap h1 {
  font-size: 72px;
  font-weight: 600;
}

.ap h2 {
  font-size: 40px;
  font-weight: 600;
}

/* ─── ap mobile drawer menu (skin-local, no M.Sidenav) ──────────────────── */

.ap-menu-trigger {
  cursor: pointer;
}

.ap-menu-trigger .material-icons {
  font-size: 28px;
  vertical-align: middle;
}

.ap-drawer-root {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1200;
  pointer-events: none;
}

.ap-drawer-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(4, 6, 16, 0.62);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ap-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 86vw;
  padding: 26px 24px 30px;
  overflow-y: auto;
  background: #10152a; /* solid fallback when backdrop-filter unsupported */
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -30px 0 70px rgba(4, 6, 16, 0.55);
  color: #e2e8f0;
  font-family: var(--ap-font);
  transform: translateX(102%);
  transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .ap-drawer {
    background: rgba(12, 15, 25, 0.8);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }
}

/* hairline indigo shine across the drawer top — same motif as the ap signin card */
.ap-drawer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.75), rgba(129, 140, 248, 0));
}

.ap-drawer-root.ap-open {
  pointer-events: auto;
}

.ap-drawer-root.ap-open .ap-drawer-overlay {
  opacity: 1;
}

.ap-drawer-root.ap-open .ap-drawer {
  transform: translateX(0);
}

.ap-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ap-drawer-brand {
  display: flex;
  align-items: center;
}

.ap-drawer-brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-right: 10px;
}

.ap-drawer-brand span {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #ffffff;
}

.ap-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: #a5b4fc;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ap-drawer-close:hover {
  background: rgba(79, 70, 229, 0.32);
  color: #ffffff;
}

.ap-drawer-close .material-icons {
  font-size: 21px;
}

.ap-drawer-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(165, 180, 252, 0.8);
}

.ap-drawer-links {
  margin: 0 0 24px;
}

.ap-drawer-links li {
  list-style: none;
}

.ap-drawer-links a {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 12px 14px;
  font-size: 15.5px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.85);
  border: 1px solid transparent;
  border-radius: 13px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ap-drawer-links a .material-icons {
  font-size: 20px;
  margin-right: 12px;
  color: #818cf8;
}

.ap-drawer-links a:hover {
  background: rgba(79, 70, 229, 0.16);
  border-color: rgba(129, 140, 248, 0.3);
  color: #ffffff;
}

.ap-drawer-cta .btn {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.4);
}

.ap-drawer-cta p {
  margin: 12px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: rgba(226, 232, 240, 0.5);
}

/* ─── ap page hero strip (contact + article pages) ──────────────────────── */

.ap-page-hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 5rem;
}

.ap-page-hero::before {
  content: '';
  position: absolute;
  top: -280px;
  left: 50%;
  width: 920px;
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(79, 70, 229, 0.42) 0%, rgba(79, 70, 229, 0) 70%);
  pointer-events: none;
}

.ap-page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.6), rgba(129, 140, 248, 0));
}

.ap-hero-inner {
  position: relative;
}

.ap-hero-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #a5b4fc;
}

.ap-page-hero h1 {
  margin: 0.4rem 0 1rem;
  font-size: 46px;
  color: #ffffff;
}

.ap-hero-sub {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(226, 232, 240, 0.7);
}

/* ─── ap shared frosted card ────────────────────────────────────────────── */

.ap-card {
  position: relative;
  padding: 2.2rem 2.4rem;
  background: var(--primary-background);
  border: 1px solid var(--primary-border-colour);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(8, 12, 30, 0.1);
}

.ap-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.65), rgba(129, 140, 248, 0));
}

/* ─── ap contact page ───────────────────────────────────────────────────── */

.ap-contact {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.ap-contact-panel {
  position: relative;
  overflow: hidden;
  padding: 2.2rem 1.8rem;
  background: #0c0f19;
  background-image: linear-gradient(180deg, #0f1428 0%, #0c0f19 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  color: #e2e8f0;
  box-shadow: 0 22px 60px rgba(8, 12, 30, 0.25);
}

.ap-contact-panel::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.4) 0%, rgba(79, 70, 229, 0) 70%);
  pointer-events: none;
}

.ap-contact-panel h5 {
  position: relative;
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
}

.ap-contact-panel-sub {
  position: relative;
  margin: 0 0 22px;
  font-size: 14.5px;
  color: rgba(226, 232, 240, 0.65);
}

.ap-contact-list {
  position: relative;
  margin: 0;
}

.ap-contact-list li {
  display: flex;
  align-items: center;
  padding: 11px 0;
  font-size: 15px;
  color: rgba(226, 232, 240, 0.85);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  list-style: none;
}

.ap-contact-list li:last-child {
  border-bottom: 0;
}

.ap-contact-list .material-icons {
  font-size: 19px;
  margin-right: 12px;
  padding: 6px;
  color: #818cf8;
  background: rgba(79, 70, 229, 0.16);
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 9px;
}

.ap-contact-card h5 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.ap-contact-card-sub {
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--primary-font-colour);
}

.ap-contact .ap-card .input-field input[type='text'],
.ap-contact .ap-card .input-field input[type='email'],
.ap-contact .ap-card .input-field textarea {
  box-sizing: border-box;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--primary-border-colour);
  border-radius: 13px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ap-contact .ap-card .input-field input[type='text']:focus,
.ap-contact .ap-card .input-field input[type='email']:focus,
.ap-contact .ap-card .input-field textarea:focus {
  outline: none;
  border: 1px solid #4f46e5;
  border-bottom: 1px solid #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22);
}

.ap-contact .ap-card .input-field label {
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  color: var(--primary-font-colour);
}

.ap-contact .ap-card .btn-full {
  width: 100%;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.35);
}

/* ─── ap article page ───────────────────────────────────────────────────── */

.ap-article {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.ap-article-card {
  padding: 2.6rem 2.8rem;
  font-size: 17px;
  line-height: 1.85;
  color: var(--background-font-colour);
}

.ap-article-card > div {
  margin-bottom: 0.35rem;
}

.ap-article-card b {
  color: var(--background-heading-colour);
}

.ap-article-card img.responsive-img,
.ap-article-card video {
  border-radius: 14px;
}

@media (min-width: 319px) and (max-width: 490px) {
  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 32px;
  }

  .ap-drawer {
    width: 100%;
    max-width: 100%;
    border-left: 0;
    border-radius: 0;
  }

  .ap-page-hero {
    padding: 3rem 0 3.4rem;
  }

  .ap-page-hero h1 {
    font-size: 30px;
  }

  .ap-card {
    padding: 1.6rem 1.2rem;
    border-radius: 18px;
  }

  .ap-contact {
    padding-top: 2rem;
  }

  .ap-contact-panel {
    padding: 1.8rem 1.4rem;
    border-radius: 18px;
  }

  .ap-article {
    padding-top: 2rem;
  }

  .ap-article-card {
    padding: 1.8rem 1.3rem;
    font-size: 16px;
  }
}

/* ─── Reviews list ─────────────────────────────────────────────────────────
   DELIBERATELY NOT `.ap`-SCOPED, unlike everything above. APReviewsComponent is
   reached through TourContentComponent, which 24 skins render, and a skin with
   its own (guest)/_layout.js never emits the `.ap` wrapper — scoping these
   would blank the cards there and let the page colour show through (that was
   the blue tint in `ad`, whose --background-colour is #e6f3fd).

   Safe to leave unscoped because every selector is named `.ap-review*`, which
   only ever matches markup this one component renders. Colours come from the
   theme vars, so each skin's palette applies on its own. */

.ap-reviews {
  max-width: 48rem;
  margin: 3rem auto 0;
  padding: 0 1rem;
}

.ap-review {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 1.5rem;
  padding: 1.5rem;
  margin: 0 0 2rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.ap-reviews-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.75rem;
}

.ap-reviews-stars svg {
  display: block;
  color: #06b6d4;
}

.ap-review blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--background-font-colour);
}

.ap-review figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-colour);
}

.ap-review figcaption img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

/* ============================================================
   (user) — dashboard area
   Moved here from (user)/user.css: the default skin has ONE
   stylesheet, same rule every skin follows (see ai-rules.md).
   ============================================================ */

/* Tab switches. The tab wrapper in a route file is keyed on the active tab
   (see wallets.js), so switching remounts that node and replays this
   animation — no transition library and no exit state to coordinate. Keep it
   short: this sits between the click and the content. */
.tab-fade {
  animation: tab-fade-in 220ms ease-out;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-fade {
    animation: none;
  }
}

/* ─── Asset chart (holding / mining asset tabs) ────────────────────────────
   BrokerChartsComponent fills its container, and this one had no height — so
   under two full-height buy/sell panels the chart collapsed to the widget's
   own minimum. Every wrapper down to the iframe has to be stretched, since
   the TradingView levels ask for height:100% and that resolves to nothing
   unless each ancestor has one. */

.app-asset-chart {
  height: 55vh;
  margin-top: 8px;
}

.app-asset-chart > *,
.app-asset-chart .tradingview-widget-container,
.app-asset-chart .tradingview-widget-container > div:first-child,
.app-asset-chart iframe {
  width: 100%;
  height: 100%;
}

.app-asset-chart .tradingview-widget-copyright {
  display: none;
}



/* LiveChartComponent stamps the symbol as an <h2> over the top-left of the
   plot. The page heading above already names the asset, so it is the same
   word twice — and at that size it covers the first candles. */
.app-asset-chart h2 {
  display: none;
}

/* app.css disables pointer events on every TradingView embed
   (`iframe[src*='embed-widget']`) so the DECORATIVE ones — the guest ticker
   tape, the mini sparklines — cannot swallow clicks or scroll.
   This chart is not decorative: its range switcher (1D · 1M · 3M · 1Y · 5Y ·
   All) is the whole point, and the blanket rule made those tabs dead. Give
   the interaction back here only, rather than lifting the rule globally. */
.app-asset-chart iframe[src*='embed-widget'] {
  pointer-events: auto;
}


/* ═══ /user — the dashboard ═══════════════════════════════════════════════
   Modelled on the lqo wallet layout: a glow hero carrying the headline figure
   and two pills, then two panels of rows beneath it.

   The classes are the DEFAULT skin's own (db-*), not lqo's — a skin never
   reaches into another skin's stylesheet (ai-rules #11), so the look is
   reproduced here rather than borrowed.

   Three answers and nothing else: what the account is worth, the two balances
   behind that figure, and how the closed trades have gone. */

.db-hero {
  margin: -18px -18px 20px -18px;
  padding: 30px 20px;
  border-radius: 0 0 28px 28px;
  text-align: center;
  color: #ffffff;
  background:
    radial-gradient(110% 130% at 50% 0%, rgba(230, 255, 42, 0.3), transparent 62%),
    linear-gradient(180deg, #232b06 0%, #11150a 68%, #05060a 100%);
}

.db-hero small {
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.72);
}

.db-hero h2 {
  margin: 4px 0;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  /* Tabular figures so the headline does not jitter as the live number ticks. */
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.db-hero-pnl {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 700;
}

.db-up {
  color: #0eba1f;
}

.db-down {
  color: #e5484d;
}

.db-hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.db-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.15s ease;
}

.db-pill:hover {
  transform: translateY(-1px);
}

.db-pill .material-icons {
  font-size: 17px;
}

.db-pill-volt {
  background: #e6ff2a;
  color: #030507;
}

.db-pill-white {
  background: #ffffff;
  color: #030507;
}

/* ─── Panels ────────────────────────────────────────────────────────────
   Side by side on a desktop, stacked on a phone. */

.db-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 992px) {
  .db-grid {
    grid-template-columns: 1fr;
  }
}

.db-section {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 18px;
  padding: 14px 16px;
}

/* Holds the panel's heading. Kept as a flex row so a control can sit beside
   the title later without the heading jumping. */
.db-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.db-section-head h5 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--background-heading-colour);
}

.db-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.db-row:hover {
  background: var(--hover);
}

.db-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: var(--background-colour);
  border: 1px solid var(--border-colour);
  color: var(--background-heading-colour);
  flex: 0 0 auto;
}

.db-row-icon .material-icons {
  font-size: 19px;
}

.db-row-name {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.db-row-name b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--background-heading-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-row-name small {
  font-size: 11.5px;
  color: var(--primary-font-colour);
}

.db-row-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--background-heading-colour);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.db-empty {
  text-align: center;
  padding: 16px 0;
  color: var(--primary-font-colour);
}

/* The live row gets a quiet pulse so a number that moves does not look like a
   stored one. */
.db-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0eba1f;
  margin-right: 6px;
  vertical-align: middle;
  animation: db-pulse 2.4s ease-in-out infinite;
}

@keyframes db-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .db-live-dot { animation: none; }
}

@media (max-width: 600px) {
  .db-hero h2 {
    font-size: 34px;
  }
}

/* ─── Shared lists inside a db-section ──────────────────────────────────
   The trade lists, watchlist and their kin are Materialize `collection`
   markup and stay that way: open positions carry live profit, a countdown, a
   close button and the trader-name rule, and re-drawing those rows to match
   these panels would mean re-implementing all of it.

   So the PANEL adapts instead — the collection loses its own card edge and
   sits on the panel's rhythm rather than looking like a second card dropped
   inside the first. */

.db-section .collection {
  border: 0;
  margin: 0;
  list-style: none;
  padding-left: 0;
  background: transparent;
}

.db-section .collection .collection-item {
  background: transparent;
  border-bottom: 1px solid var(--border-colour);
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.db-section .collection .collection-item:last-child {
  border-bottom: 0;
}

.db-section .collection .collection-item:hover {
  background: var(--hover);
}

/* The ticket's inputs are Materialize columns inside a panel that is already
   padded, so the row's negative gutters would push them past the edge. */
.db-section form .row {
  margin-left: 0;
  margin-right: 0;
}

/* A panel that stands on its own rather than sitting in the two-column grid —
   for rows too wide to survive half the content width. */
.db-section-stacked {
  margin-top: 18px;
}


/* ---- withdrawal view ----
   The label/value lines in the transaction summary. Materialize rows carry a
   20px bottom margin, which stacked four of them into a very tall card. */
.wv-line {
  margin-bottom: 0 !important;
}

.wv-line .col {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ─── Crypto cards (/user/cards) ─────────────────────────────────────────────
   Every rule is scoped under .cc. Colours come from the shared theme tokens
   (app/skin.js and each skin's skin.js set them), with the card artwork's own
   --cc-art-* tokens; the accent is --primary-button. */

.cc {
  /* This page renders inside every skin, and only app/skin.js sets the card
     artwork tokens — a skin that leaves them unset gets these, the values
     app/skin.js uses. */
  --cc-from: var(--cc-art-from, #1c7a4d);
  --cc-to: var(--cc-art-to, #0b3b26);
  --cc-chip: var(--cc-art-chip, #e9c46a);
  --cc-ink: var(--cc-art-ink, #ffffff);

  --cc-accent: var(--primary-button);
  --cc-accent-soft: color-mix(in srgb, var(--primary-button) 13%, transparent);
  --cc-heading: var(--background-heading-colour);
  --cc-text: var(--primary-font-colour);
  --cc-line: var(--primary-border-colour);
  --cc-surface: var(--primary-background);
  --cc-muted-surface: color-mix(in srgb, var(--primary-border-colour) 28%, var(--primary-background));

  padding: 8px 0 24px;
}

.cc h1,
.cc h2,
.cc h3,
.cc h4 {
  color: var(--cc-heading);
}

.cc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.cc-head h1 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.15;
}

.cc-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--cc-text);
  font-size: 14px;
}

.cc-crumbs a {
  color: var(--cc-text);
}

.cc-crumbs a:hover {
  color: var(--cc-accent);
}

.cc-panel {
  margin-bottom: 20px;
  padding: 28px;
  border: 1px solid var(--cc-line);
  border-radius: 18px;
  background: var(--cc-surface);
}

.cc-panel .row {
  margin-bottom: 0;
}

.cc-btn,
.cc-btn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: var(--cc-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-button) 30%, transparent);
  color: var(--nav-secondary-font-colour);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
}

.cc-btn:hover {
  background: color-mix(in srgb, var(--primary-button) 88%, var(--secondary-background));
  color: var(--nav-secondary-font-colour);
}

.cc-btn-light,
.cc-btn-light:focus {
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--cc-line);
  background: var(--cc-surface);
  box-shadow: none;
  color: var(--cc-heading);
  font-size: 14px;
}

.cc-btn-light:hover {
  background: var(--cc-muted-surface);
  color: var(--cc-heading);
}

.cc-btn-block,
.cc-btn-block:focus {
  display: flex;
  width: 100%;
}

.cc-link,
.cc-link:focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cc-accent);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.cc-link .material-icons {
  font-size: 18px;
}

.cc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
}

.cc-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  background: var(--cc-accent-soft);
  color: var(--cc-accent);
}

.cc-icon .material-icons {
  font-size: 22px;
}

.cc-icon-sm {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.cc-icon-sm .material-icons {
  font-size: 18px;
}

/* Hero */

.cc-hero {
  overflow: hidden;
  padding: 0;
}

.cc-hero > .row {
  display: flex;
  flex-wrap: wrap;
}

.cc-hero > .row > .col {
  margin-left: 0;
}

.cc-hero > .row > .col.cc-hero-copy {
  padding: 44px 40px;
}

.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--cc-accent-soft);
  color: var(--cc-accent);
  font-size: 13.5px;
  font-weight: 700;
}

.cc-badge .material-icons {
  font-size: 16px;
}

.cc-hero h2 {
  margin: 22px 0 18px;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1.08;
}

.cc-hero p {
  max-width: 440px;
  margin: 0 0 22px;
  color: var(--cc-text);
  font-size: 16px;
  line-height: 1.65;
}

.row.cc-highlights {
  margin: 0 -6px 26px;
}

.row.cc-highlights > .col {
  padding: 6px;
}

.cc-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cc-heading);
  font-size: 14.5px;
  font-weight: 600;
  word-break: normal;
}

.cc-hero > .row > .col.cc-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  background: radial-gradient(420px 260px at 70% 30%, var(--cc-accent-soft), transparent 70%), var(--cc-muted-surface);
}

/* The card. It is a size container, so every offset and font below is in
   cqw (1% of the card's own width) and the card scales as one piece — the
   numbers match a 400px-wide card. */

.cc-art {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1.586;
  overflow: hidden;
  border-radius: 4cqw;
  background: radial-gradient(circle at 18% -10%, color-mix(in srgb, var(--cc-ink) 16%, transparent) 0 42%, transparent 42.5%),
    radial-gradient(circle at 105% 115%, color-mix(in srgb, var(--cc-ink) 14%, transparent) 0 34%, transparent 34.5%),
    linear-gradient(135deg, var(--cc-from), var(--cc-to));
  box-shadow: 0 28px 60px color-mix(in srgb, var(--cc-to) 45%, transparent);
  color: var(--cc-ink);
}

.cc-art-logo {
  position: absolute;
  top: 3.5cqw;
  left: 6.5cqw;
  font-size: 16cqw;
  font-weight: 800;
  line-height: 1;
}

.cc-art-chip {
  position: absolute;
  top: 26%;
  right: 7.5cqw;
  width: 11.5cqw;
  height: 9cqw;
  border-radius: 2cqw;
  background: linear-gradient(135deg, var(--cc-chip), color-mix(in srgb, var(--cc-chip) 65%, var(--cc-to)));
}

.cc-art-number {
  position: absolute;
  top: 58%;
  left: 6.5cqw;
  font-size: 3.75cqw;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.cc-art-holder,
.cc-art-expiry {
  position: absolute;
  bottom: 5.5cqw;
  font-size: 3.25cqw;
  font-weight: 700;
  text-transform: uppercase;
}

.cc-art-holder {
  left: 6.5cqw;
  max-width: 48%;
}

.cc-art-holder b {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cc-art-expiry {
  left: 56%;
}

.cc-art small {
  display: block;
  margin-bottom: 0.75cqw;
  font-size: 2.25cqw;
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0.85;
}

.cc-art-brand {
  position: absolute;
  right: 6cqw;
  bottom: 4.5cqw;
  text-align: right;
}

.cc-art-brand b {
  font-size: 7.5cqw;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Why choose */

.cc-why {
  background: var(--cc-muted-surface);
  text-align: center;
}

.cc-why h3 {
  margin: 8px 0 8px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.cc-sub {
  margin: 0 0 28px;
  color: var(--cc-text);
  font-size: 16px;
}

.row.cc-reasons {
  display: flex;
  flex-wrap: wrap;
}

.row.cc-reasons > .col {
  display: flex;
  margin-left: 0;
  margin-bottom: 16px;
}

.cc-reason {
  flex: 1;
  padding: 24px 22px;
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  background: var(--cc-surface);
  text-align: left;
}

.cc-reason h4 {
  margin: 18px 0 10px;
  font-size: 18px;
  font-weight: 700;
}

.cc-reason p {
  margin: 0;
  color: var(--cc-text);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Secure banner */

.cc-secure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 22px;
  padding: 22px 28px;
}

.cc-secure-text {
  flex: 1;
  min-width: 220px;
}

.cc-secure h4 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 800;
}

.cc-secure p {
  margin: 0;
  color: var(--cc-text);
  font-size: 14.5px;
}

/* Request form */

.cc-panel-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
}

.cc-request .form-top-label {
  text-transform: capitalize;
}

.cc-request-side {
  display: grid;
  justify-items: center;
  gap: 20px;
}

.cc-tiers {
  width: 100%;
  margin: 0;
}

.cc-tiers li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cc-line);
  color: var(--cc-text);
  font-size: 14px;
}

.cc-tiers li:last-child {
  border-bottom: 0;
}

.cc-tiers b {
  color: var(--cc-heading);
}

.cc-fine {
  margin: 0;
  color: var(--cc-text);
  font-size: 13px;
  text-align: center;
}

.cc-note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cc-heading);
}

.cc-note .material-icons {
  color: var(--cc-accent);
}

/* Applications */

.cc-apps .collection .collection-item.cc-app {
  margin-bottom: 16px;
  padding: 22px 24px;
  border: 1px solid var(--cc-line);
  border-radius: 16px;
  background: var(--cc-surface);
}

.cc-app-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cc-app-head b {
  display: block;
  color: var(--cc-heading);
  font-size: 18px;
}

.cc-app-head small {
  color: var(--cc-text);
  font-size: 13px;
}

.cc-status {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.cc-status-pending,
.cc-status-active {
  background: var(--cc-accent-soft);
  color: var(--cc-accent);
}

.cc-status-done {
  background: var(--cc-accent);
  color: var(--nav-secondary-font-colour);
}

.cc-status-declined {
  background: var(--cc-muted-surface);
  color: var(--cc-heading);
}

.cc-steps {
  display: flex;
  gap: 6px;
  margin: 20px 0 18px;
  padding: 0;
  list-style: none;
}

.cc-steps li {
  flex: 1;
  padding: 0;
  color: var(--cc-text);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

.cc-step-dot {
  display: block;
  height: 6px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: var(--cc-muted-surface);
}

.cc-steps li.done {
  color: var(--cc-heading);
}

.cc-steps li.done .cc-step-dot {
  background: var(--cc-accent);
}

.cc-declined {
  margin: 16px 0;
  color: var(--cc-heading);
  font-weight: 600;
}

.cc-app-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 20px;
  margin: 0;
}

.cc-app-details dt {
  color: var(--cc-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cc-app-details dd {
  margin: 4px 0 0;
  color: var(--cc-heading);
  font-size: 14.5px;
}

.cc-app-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--cc-muted-surface);
  color: var(--cc-heading);
  font-size: 14px;
}

.cc-apps-cta {
  justify-content: center;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .cc-head h1 {
    font-size: 26px;
  }

  .cc-panel {
    padding: 20px;
  }

  .cc-hero > .row > .col.cc-hero-copy {
    padding: 28px 22px;
  }

  .cc-hero h2 {
    font-size: 34px;
  }

  .cc-highlight {
    gap: 8px;
    font-size: 13px;
  }

  .cc-hero > .row > .col.cc-hero-art {
    padding: 28px 20px;
  }

  .cc-why h3 {
    font-size: 24px;
  }

  .cc-steps li {
    font-size: 10.5px;
  }
}