@charset "UTF-8";
/* Arcraft Infotech – public stylesheet.
   Derived from a licensed ThemeForest template (Corebiz); class names have been renamed to arcraft-*
   but the underlying rules are still template-derived. Keep the original licence (or replace the CSS) before resale/redistribution. */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/**
 * Typography
 */
/*-- Variables --*/
:root {

    --color-primary: #3FAE4A;
    --color-secondary: #6BCB70;
    --color-primary-alt: #2E8B3A;
    --color-secondary-alt: #55BC5D;

    --color-secondary-shade: #EEF9EF;
    --color-white-shade: #F3F4F6;

    --color-primary-100: #FAFDFA;
    --color-primary-200: #F3FAF4;
    --color-primary-300: #EAF7EB;
    --color-primary-400: #DDF1DF;
    --color-primary-500: #C5E8C8;
    --color-primary-600: #A3D9A7;
    --color-primary-700: #6BCB70;
    --color-primary-800: #55BC5D;
    --color-primary-900: #3FAE4A;

    --color-primary-alt-100: #F5FBF6;
    --color-primary-alt-200: #EEF9EF;
    --color-primary-alt-300: #E2F4E4;
    --color-primary-alt-400: #D1ECD4;
    --color-primary-alt-500: #B9E1BD;
    --color-primary-alt-600: #9BD39F;
    --color-primary-alt-700: #7CC681;
    --color-primary-alt-800: #55BC5D;
    --color-primary-alt-900: #2E8B3A;

    --color-secondary-100: #F5FBF6;
    --color-secondary-200: #EEF9EF;
    --color-secondary-300: #E2F4E4;
    --color-secondary-400: #D1ECD4;
    --color-secondary-500: #B9E1BD;
    --color-secondary-600: #9BD39F;
    --color-secondary-700: #7CC681;
    --color-secondary-800: #55BC5D;
    --color-secondary-900: #3FAE4A;

    --color-secondary-alt-100: #F5FBF6;
    --color-secondary-alt-200: #EEF9EF;
    --color-secondary-alt-300: #E2F4E4;
    --color-secondary-alt-400: #D1ECD4;
    --color-secondary-alt-500: #B9E1BD;
    --color-secondary-alt-600: #9BD39F;
    --color-secondary-alt-700: #7CC681;
    --color-secondary-alt-800: #55BC5D;
    --color-secondary-alt-900: #3FAE4A;

/* =====================================
       PRIMARY OPACITY
    ====================================== */

    --color-primary-opacity-0: rgba(63, 174, 74, 0);
    --color-primary-opacity-50: rgba(63, 174, 74, 0.05);
    --color-primary-opacity-100: rgba(63, 174, 74, 0.10);
    --color-primary-opacity-200: rgba(63, 174, 74, 0.20);
    --color-primary-opacity-300: rgba(63, 174, 74, 0.30);
    --color-primary-opacity-400: rgba(63, 174, 74, 0.40);
    --color-primary-opacity-500: rgba(63, 174, 74, 0.50);
    --color-primary-opacity-600: rgba(63, 174, 74, 0.60);
    --color-primary-opacity-700: rgba(63, 174, 74, 0.70);
    --color-primary-opacity-800: rgba(63, 174, 74, 0.80);
    --color-primary-opacity-900: rgba(63, 174, 74, 0.90);

/* =====================================
       SECONDARY OPACITY
    ====================================== */

    --color-secondary-alt-opacity-0: rgba(85, 188, 93, 0);
    --color-secondary-alt-opacity-50: rgba(85, 188, 93, 0.05);
    --color-secondary-alt-opacity-100: rgba(85, 188, 93, 0.10);
    --color-secondary-alt-opacity-200: rgba(85, 188, 93, 0.20);
    --color-secondary-alt-opacity-300: rgba(85, 188, 93, 0.30);
    --color-secondary-alt-opacity-400: rgba(85, 188, 93, 0.40);
    --color-secondary-alt-opacity-500: rgba(85, 188, 93, 0.50);
    --color-secondary-alt-opacity-600: rgba(85, 188, 93, 0.60);
    --color-secondary-alt-opacity-700: rgba(85, 188, 93, 0.70);
    --color-secondary-alt-opacity-800: rgba(85, 188, 93, 0.80);
    --color-secondary-alt-opacity-900: rgba(85, 188, 93, 0.90);

/* =====================================
       WHITE OPACITY
    ====================================== */

    --color-white-opacity-0: rgba(255, 255, 255, 0);
    --color-white-opacity-50: rgba(255, 255, 255, 0.05);
    --color-white-opacity-100: rgba(255, 255, 255, 0.10);
    --color-white-opacity-200: rgba(255, 255, 255, 0.20);
    --color-white-opacity-300: rgba(255, 255, 255, 0.30);
    --color-white-opacity-400: rgba(255, 255, 255, 0.40);
    --color-white-opacity-500: rgba(255, 255, 255, 0.50);
    --color-white-opacity-600: rgba(255, 255, 255, 0.60);
    --color-white-opacity-700: rgba(255, 255, 255, 0.70);
    --color-white-opacity-800: rgba(255, 255, 255, 0.80);
    --color-white-opacity-900: rgba(255, 255, 255, 0.90);

/* =====================================
       BLACK OPACITY
    ====================================== */

    --color-black-opacity-0: rgba(0, 35, 75, 0);
    --color-black-opacity-50: rgba(0, 35, 75, 0.05);
    --color-black-opacity-100: rgba(0, 35, 75, 0.10);
    --color-black-opacity-200: rgba(0, 35, 75, 0.20);
    --color-black-opacity-300: rgba(0, 35, 75, 0.30);
    --color-black-opacity-400: rgba(0, 35, 75, 0.40);
    --color-black-opacity-500: rgba(0, 35, 75, 0.50);
    --color-black-opacity-600: rgba(0, 35, 75, 0.60);
    --color-black-opacity-700: rgba(0, 35, 75, 0.70);
    --color-black-opacity-800: rgba(0, 35, 75, 0.80);
    --color-black-opacity-900: rgba(0, 35, 75, 0.90);

/* =====================================
       EXTRA COLORS
    ====================================== */

    /*
       Kept variable name "purple"
       because the template may use it.
       Value changed to green.
    */
    --color-purple: #3FAE4A;

    --color-green: #3FAE4A;

    --color-orange: #F2994A;

    --color-red: #FF4141;

    --color-black-opacity: rgba(2, 44, 10, 0.702);

    --color-white: #FFFFFF;

/* =====================================
       TEXT / HEADING COLORS
    ====================================== */

    --color-heading: #24552A;

    --color-black: #163B1B;

    --color-black-2: #102B14;

    --color-body: #68756B;

    --color-body-2: #9AA59C;

    --color-light: #F5FAF5;

    --color-gray-light: #E6E9ED;

    --color-gray: #838A95;

    --color-gray-2: #767689;

    --color-gray-3: #B6B5BB;

    --color-gray-4: #CCD3DB;

    --color-gray-5: #F3F5FB;

/* =====================================
       BORDER
    ====================================== */

    --border-width: 2px;

    --border-width-1: 1px;

    --color-border: rgb(207, 232, 209);

    --color-border-1: rgb(228, 228, 228);

    --color-border-2: rgb(237, 237, 237);

    --color-border-3: rgb(220, 237, 222);

    --color-border-4: rgba(255, 255, 255, 0.2);

    --color-border-5: rgba(203, 208, 226, 0.302);

    --color-border-6: rgba(63, 174, 74, 0.102);

/* =====================================
       DARK
    ====================================== */

    --color-dark: #00234b26;

    --color-dark-2: #2D2730;

/* =====================================
       RATING
    ====================================== */

    --color-rating: #FFC36E;

    --color-rating-green: #3FAE4A;

/* =====================================
       RADIUS
    ====================================== */

    --radius-full: 100%;

    --radius-100: 100px;

    --radius-48: 48px;

    --radius-xxl: 20px;

    --radius-xl: 16px;

    --radius-lg: 12px;

    --radius-md: 10px;

    --radius-sm: 8px;

    --radius: 4px;

/* =====================================
       FONT WEIGHT
    ====================================== */

    --f-light: 300;

    --f-regular: 400;

    --f-medium: 500;

    --f-semibold: 600;

    --f-bold: 700;

    --f-extrabold: 800;

    --f-black: 900;

/* =====================================
       TRANSITIONS
    ====================================== */

    --transition: 0.2s;

    --transition-1: all 0.3s ease-in-out;

    --transition-2: 256ms ease-in-out;

    --transition-3:
        transform .85s cubic-bezier(.23, 1, .32, 1),
        background .3s,
        border .3s,
        border-radius .3s,
        box-shadow .3s;

    --transition-4: all .25s cubic-bezier(.645, .045, .355, 1);

    --transition-5: all 0.5s ease-in-out;

    --transition-6: all 0.3s linear;

/* =====================================
       FONTS
    ====================================== */

    --font-primary: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --font-autograph: 'autograph', sans-serif;

/* =====================================
       DISPLAY FONT
    ====================================== */

    --display-font: 100px;

    --display-font-1: 80px;

    --display-font-2: 70px;

    --display-font-3: 60px;

/* =====================================
       FONT SIZE
    ====================================== */

    --font-size-b1: 18px;

    --font-size-b2: 16px;

    --font-size-b3: 15px;

    --font-size-b4: 14px;

    --font-size-b5: 12px;

    --font-size-b6: 10px;

/* =====================================
       LETTER SPACING
    ====================================== */

    --letter-spacing-b1: -0.18px;

    --letter-spacing-b3: -0.15px;

    --letter-spacing-b5: -0.12px;

/* =====================================
       HEADINGS
    ====================================== */

    --h1: 48px;

    --h2: 40px;

    --h3: 32px;

    --h4: 24px;

    --h5: 22px;

    --h6: 20px;

/* =====================================
       LINE HEIGHT
    ====================================== */

    --line-height-b1: 1.78;

    --line-height-b2: 1.75;

    --line-height-b3: 1.47;

    --line-height-b4: 1.57;

    --line-height-b5: 1.5;

    --line-height-h1: 1.25;

    --line-height-h2: 1.5;

    --line-height-h3: 1.32;

    --line-height-h4: 1.5;

    --line-height-h5: 1.55;

    --line-height-h6: 1.6;

/* =====================================
       HEADING LETTER SPACING
    ====================================== */

    --letter-spacing-h1: -0.48px;

    --letter-spacing-h3: -0.32px;

    --letter-spacing-h4: -0.24px;

    --letter-spacing-h5: -0.22px;

    --letter-spacing-h6: -0.2px;

    --letter-spacing-normal: normal;

/* =====================================
       GREEN GRADIENTS
    ====================================== */

    --gradient-1:
        linear-gradient(
            90deg,
            #2E8B3A 0%,
            #3FAE4A 50%,
            #6BCB70 100%
        );

    --gradient-2:
        linear-gradient(
            90deg,
            #2E8B3A 0%,
            #3FAE4A 100%
        );

    --gradient-3:
        linear-gradient(
            135deg,
            #2E8B3A 3.15%,
            #3FAE4A 96.28%
        );

/* =====================================
       LIGHT GREEN GRADIENTS
    ====================================== */

    --gradient-light1:
        linear-gradient(
            135deg,
            #F1F9F2 0%,
            #F8FCF8 100%
        );

    --gradient-light2:
        linear-gradient(
            135deg,
            #F5FBF5 0%,
            #F8FCF8 100%
        );

/* =====================================
       TEXT SHADOW
    ====================================== */

    --text-shadow-1:
        1px 2px 1px rgba(36, 85, 42, 0.30);

    --text-shadow-2:
        1px 1px 1px rgba(0, 0, 0, 0.25);

/* =====================================
       SHADOWS
    ====================================== */

    --shadow-1:
        0px 2px 12px 0px rgba(3, 7, 27, 0.10);

    --shadow-2:
        -3px -4px 7px 0px
        var(--color-white-opacity-200) inset,
        4px 10px 20px 0px
        var(--color-primary-opacity-50);

    --shadow-3:
        0px 20px 46.3px 0px
        var(--color-primary-opacity-100) inset,
        2.25px -7px 43.7px 0px
        var(--color-primary-opacity-0) inset;

}
/*
****************************************************
    Reset Styles
****************************************************
*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden] {
  display: none;
}
a {
  color: var(--color-primary);
  text-decoration: none;
  outline: none;
  transition: 0.2s;
}
a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: none;
}
a:focus {
  outline: none;
}
address {
  margin: 0 0 24px;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
mark {
  background: var(--color-primary);
  color: #ffffff;
}
code,
kbd,
pre,
samp {
  font-size: var(--font-size-b3);
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  color: var(--color-primary);
}
kbd,
ins {
  color: #ffffff;
}
pre {
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: var(--font-size-b3);
  margin: 10px 0;
  overflow: auto;
  padding: 20px;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--color-body);
  background: var(--color-lighter);
}
small {
  font-size: smaller;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
dl {
  margin-top: 0;
  margin-bottom: 10px;
}
dd {
  margin: 0 15px 15px;
}
dt {
  font-weight: bold;
  color: var(--color-heading);
}
menu,
ol,
ul {
  margin: 16px 0;
  padding: 0 0 0 40px;
}
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}
li > ul,
li > ol {
  margin: 0;
}
ol ul {
  margin-bottom: 0;
}
img {
  -ms-interpolation-mode: bicubic;
  border: 0;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 0;
}
form {
  margin: 0;
}
fieldset {
  border: 1px solid var(--color-border);
  margin: 0 2px;
  min-width: inherit;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
  white-space: normal;
}
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  max-width: 100%;
  vertical-align: baseline;
}
button,
input {
  line-height: normal;
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  cursor: pointer;
}
button[disabled],
input[disabled] {
  cursor: default;
}
input[type=checkbox],
input[type=radio] {
  padding: 0;
}
input[type=search] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  appearance: textfield;
  padding-right: 2px;
  width: 270px;
}
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
caption,
th,
td {
  font-weight: normal;
}
th {
  font-weight: 500;
}
td {
  border: 1px solid var(--color-border);
  padding: 7px 10px;
}
del {
  color: #333;
}
ins {
  background: rgba(255, 47, 47, 0.4);
  text-decoration: none;
}
hr {
  background-size: 4px 4px;
  border: 0;
  height: 1px;
  margin: 0 0 24px;
}
table a,
table a:link,
table a:visited {
  text-decoration: underline;
}
dt {
  font-weight: bold;
  margin-bottom: 10px;
}
dd {
  margin: 0 15px 15px;
}
caption {
  caption-side: top;
}
kbd {
  background: var(--color-heading);
}
dfn,
cite,
em {
  font-style: italic;
}
/* BlockQuote  */
blockquote,
q {
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
blockquote {
  font-size: var(--font-size-b1);
  font-style: italic;
  font-weight: var(--f-light);
  margin: 24px 40px;
}
blockquote blockquote {
  margin-right: 0;
}
blockquote cite,
blockquote small {
  font-size: var(--font-size-b3);
  font-weight: normal;
}
blockquote strong,
blockquote b {
  font-weight: 700;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--color-heading);
  transition: var(--transition-1);
}
@font-face {
  font-family: "autograph";
  src: url("../fonts/autography.otf") format("opentype");
}
* {
  box-sizing: border-box;
}

/* Common site font: every public page uses the same family as the home page */
html, body, button, input, select, textarea, optgroup, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-primary);
}
html {
  margin: 0;
  padding: 0;
  font-size: 10px;
}
body {
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--color-body);
  font-weight: var(--f-light);
  scroll-behavior: auto;
  position: relative;
  overflow-y: scroll;
  scrollbar-width: thin;
}
@media only screen and (max-width: 767px) {body {
    font-size: 16px;
    line-height: 1.5;
  }
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
address,
p,
pre,
blockquote,
menu,
ol,
ul,
table,
hr {
  margin: 0;
  margin-bottom: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
address,
p,
pre,
blockquote,
menu,
ol,
ul,
table,
hr {
    margin-bottom: 15px;
  }
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
address,
p,
pre,
blockquote,
menu,
ol,
ul,
table,
hr {
    margin-bottom: 12px;
  }
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5 {
  word-break: break-word;
  font-family: var(--font-primary);
  line-height: 1.4074;
  color: var(--color-heading);
}
h1,
.h1 {
  font-size: var(--h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}
h2,
.h2 {
  font-size: var(--h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-normal);
}
h3,
.h3 {
  font-size: var(--h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}
h4,
.h4 {
  font-size: var(--h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}
h5,
.h5 {
  font-size: var(--h5);
  line-height: var(--line-height-h5);
  letter-spacing: var(--letter-spacing-h5);
}
h6 {
  font-size: var(--h6);
  line-height: var(--line-height-h6);
  letter-spacing: var(--letter-spacing-h6);
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.h1 a,
.h2 a,
.h3 a,
.h4 a,
.h5 a {
  color: inherit;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {h1,
  .h1 {
    font-size: var(--h2);
  }
h2,
  .h2 {
    font-size: var(--h3);
  }
h3,
  .h3 {
    font-size: var(--h4);
  }
h4,
  .h4 {
    font-size: var(--h5);
  }
h5,
  .h5 {
    font-size: var(--h6);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {h1,
  .h1 {
    font-size: var(--h3);
  }
h2,
  .h2 {
    font-size: var(--h4);
  }
h3,
  .h3 {
    font-size: var(--h5);
  }
h4,
  .h4 {
    font-size: var(--h6);
  }
h5,
.h5,
h6 {
    font-size: var(--font-size-b1);
  }
}
@media only screen and (max-width: 767px) {h1,
  .h1 {
    font-size: var(--h3);
  }
h2,
  .h2 {
    font-size: var(--h4);
  }
h3,
  .h3 {
    font-size: var(--h5);
  }
h4,
  .h4 {
    font-size: var(--h6);
  }
h5,
  .h5 {
    font-size: var(--font-size-b1);
  }
h6 {
    font-size: var(--font-size-b2);
  }
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
  font-weight: var(--f-semibold);
}
h4,
.h4,
h5,
.h5 {
  font-weight: var(--f-semibold);
}
h6 {
  font-weight: var(--f-semibold);
}
p {
  font-size: var(--font-size-b2);
  line-height: 1.7;
  margin-bottom: 30px;
  font-weight: var(--f-light);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {p {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {p {
    font-size: 16px;
  }
}
p:last-child {
  margin-bottom: 0;
}
.b1 {
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
}
@media only screen and (max-width: 767px) {.b1 {
    font-size: var(--font-size-b2);
    line-height: 28px;
  }
}
.b2 {
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
}
@media only screen and (max-width: 767px) {.b2 {
    font-size: var(--font-size-b2);
    line-height: 28px;
  }
}
.b4 {
  font-size: var(--font-size-b4);
  line-height: var(--line-height-b4);
}
@media only screen and (max-width: 767px) {.b4 {
    font-size: var(--font-size-b2);
    line-height: 28px;
  }
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 0 20px;
  width: 100%;
}
table a,
table a:link,
table a:visited {
  text-decoration: none;
}
cite {
  color: var(--heading-color);
}
var {
  font-family: "Courier 10 Pitch", Courier, monospace;
}
/*---------------------------
     List Style 
 ---------------------------*/
ul,
ol {
  padding-left: 18px;
}
li {
  position: relative;
}
li::marker {
  color: var(--color-gray-2);
}
ul {
  list-style: disc;
  margin-bottom: 30px;
  padding-left: 20px;
}
ul li {
  margin-top: 15px;
  margin-bottom: 15px;
  color: var(--color-body);
}
ul li a {
  text-decoration: none;
  transition: var(--transition);
}
ul li a:hover {
  color: var(--color-primary);
}
ul ul {
  margin-bottom: 0;
}
ol {
  margin-bottom: 30px;
}
ol li {
  color: var(--color-body);
  margin-top: 10px;
  margin-bottom: 10px;
}
ol li a {
  color: var(--heading-color);
  transition: var(--transition);
  text-decoration: none;
}
ol li a:hover {
  color: var(--color-primary);
}
ol ul {
  padding-left: 30px;
}
.arcraft-display-font-1 {
  font-size: var(--display-font-1);
  letter-spacing: -1.64px;
  color: var(--color-heading);
  line-height: 1.15;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {.arcraft-display-font-1 {
    font-size: 66px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-display-font-1 {
    font-size: 56px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-display-font-1 {
    font-size: 48px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-display-font-1 {
    font-size: 32px;
  }
}
.z-4 {
  z-index: 4 !important;
}
/*=====================
    All Extend Here
=======================*/
/* -----------------------------
    Hover Dropdown Extend  
--------------------------------*/
.arcraft-mainmenu li.has-dropdown .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  visibility: hidden;
  clip: rect(0px, 200vw, 0, 0px);
  opacity: 0;
  transition: opacity 0.4s linear, clip 0.6s linear, visibility 0s 0.4s;
  transform: translateZ(0);
}
.arcraft-mainmenu li.has-dropdown:hover > .submenu {
  top: 100%;
  visibility: visible;
  opacity: 1;
  clip: rect(0px, 100vw, 200vh, -30px);
  transition: clip 0.6s linear, opacity 0.4s linear;
}
/*-----------------------------
    Rbt Background Gradient
-------------------------------*/
/*----------------------
    Bg Image  
------------------------*/
/*-----------------------------
    Rbt Background Gradient
-------------------------------*/
/*-------------------------------------
    Background Opacity With Text Colors  
---------------------------------------*/
/*---------------------- 
    Common Css 
--------------------------*/
/*-------------------------------------------------------------------------
                            Utilities
-------------------------------------------------------------------------*/
.fix {
  overflow: hidden;
}
@media only screen and (max-width: 767px) {.container {
    padding-right: 15px;
    padding-left: 15px;
  }
}
/*-------------------------------------------------------------------------
                                Height and width 
--------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------
                                    Custom Row
-------------------------------------------------------------------------*/
.row--5 {
  margin-left: -5px;
  margin-right: -5px;
}
.row--5 > [class*=col] {
  padding-left: 5px;
  padding-right: 5px;
}
.row--15 {
  margin-left: -15px;
  margin-right: -15px;
}
.row--15 > [class*=col] {
  padding-left: 15px;
  padding-right: 15px;
}
.row--20 {
  margin-left: -20px;
  margin-right: -20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {.row--20 {
    margin-left: -15px;
    margin-right: -15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.row--20 {
    margin-left: -15px;
    margin-right: -15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.row--20 {
    margin-left: -15px;
    margin-right: -15px;
  }
}
@media only screen and (max-width: 767px) {.row--20 {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
}
.row--20 > [class*=col], .row--20 > [class*=col-] {
  padding-left: 20px;
  padding-right: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {.row--20 > [class*=col], .row--20 > [class*=col-] {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.row--20 > [class*=col], .row--20 > [class*=col-] {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.row--20 > [class*=col], .row--20 > [class*=col-] {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
@media only screen and (max-width: 767px) {.row--20 > [class*=col], .row--20 > [class*=col-] {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
.row--30 {
  margin-left: -30px;
  margin-right: -30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {.row--30 {
    margin-left: -30px;
    margin-right: -30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.row--30 {
    margin-left: -15px;
    margin-right: -15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.row--30 {
    margin-left: -15px;
    margin-right: -15px;
  }
}
@media only screen and (max-width: 767px) {.row--30 {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
}
.row--30 > [class*=col], .row--30 > [class*=col-] {
  padding-left: 30px;
  padding-right: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {.row--30 > [class*=col], .row--30 > [class*=col-] {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.row--30 > [class*=col], .row--30 > [class*=col-] {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.row--30 > [class*=col], .row--30 > [class*=col-] {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
@media only screen and (max-width: 767px) {.row--30 > [class*=col], .row--30 > [class*=col-] {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
/*--------------------------------------------
        Input Placeholder
--------------------------------------------*/
input:-moz-placeholder,
textarea:-moz-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
/*-------------------------------------------
        Overlay styles 
-------------------------------------------*/
[data-overlay],
[data-black-overlay],
[data-white-overlay],
[data-gradient-overlay] {
  position: relative;
}
[data-overlay] > div,
[data-overlay] > *,
[data-black-overlay] > div,
[data-black-overlay] > *,
[data-white-overlay] > div,
[data-white-overlay] > *,
[data-gradient-overlay] > div,
[data-gradient-overlay] > * {
  position: relative;
  z-index: 2;
}
[data-overlay]:before,
[data-black-overlay]:before,
[data-white-overlay]:before,
[data-gradient-overlay]:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}
[data-overlay]:before {
  background: var(--color-primary);
}
[data-black-overlay]:before {
  background-color: #020129;
}
[data-white-overlay]:before {
  background-color: #ffffff;
}
[data-gradient-overlay]:before {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}
[data-overlay="1"]:before,
[data-black-overlay="1"]:before,
[data-white-overlay="1"]:before,
[data-gradient-overlay="1"]:before {
  opacity: 0.1;
}
[data-overlay="2"]:before,
[data-black-overlay="2"]:before,
[data-white-overlay="2"]:before,
[data-gradient-overlay="2"]:before {
  opacity: 0.2;
}
[data-overlay="3"]:before,
[data-black-overlay="3"]:before,
[data-white-overlay="3"]:before,
[data-gradient-overlay="3"]:before {
  opacity: 0.3;
}
[data-overlay="4"]:before,
[data-black-overlay="4"]:before,
[data-white-overlay="4"]:before,
[data-gradient-overlay="4"]:before {
  opacity: 0.4;
}
[data-overlay="5"]:before,
[data-black-overlay="5"]:before,
[data-white-overlay="5"]:before,
[data-gradient-overlay="5"]:before {
  opacity: 0.5;
}
[data-overlay="6"]:before,
[data-black-overlay="6"]:before,
[data-white-overlay="6"]:before,
[data-gradient-overlay="6"]:before {
  opacity: 0.6;
}
[data-overlay="7"]:before,
[data-black-overlay="7"]:before,
[data-white-overlay="7"]:before,
[data-gradient-overlay="7"]:before {
  opacity: 0.7;
}
[data-overlay="8"]:before,
[data-black-overlay="8"]:before,
[data-white-overlay="8"]:before,
[data-gradient-overlay="8"]:before {
  opacity: 0.8;
}
[data-overlay="9"]:before,
[data-black-overlay="9"]:before,
[data-white-overlay="9"]:before,
[data-gradient-overlay="9"]:before {
  opacity: 0.9;
}
[data-overlay="10"]:before,
[data-black-overlay="10"]:before,
[data-white-overlay="10"]:before,
[data-gradient-overlay="10"]:before {
  opacity: 1;
}
[data-overlay="1"]:after,
[data-black-overlay="1"]:after,
[data-white-overlay="1"]:after,
[data-gradient-overlay="1"]:after {
  opacity: 0.1;
}
[data-overlay="2"]:after,
[data-black-overlay="2"]:after,
[data-white-overlay="2"]:after,
[data-gradient-overlay="2"]:after {
  opacity: 0.2;
}
[data-overlay="3"]:after,
[data-black-overlay="3"]:after,
[data-white-overlay="3"]:after,
[data-gradient-overlay="3"]:after {
  opacity: 0.3;
}
[data-overlay="4"]:after,
[data-black-overlay="4"]:after,
[data-white-overlay="4"]:after,
[data-gradient-overlay="4"]:after {
  opacity: 0.4;
}
[data-overlay="5"]:after,
[data-black-overlay="5"]:after,
[data-white-overlay="5"]:after,
[data-gradient-overlay="5"]:after {
  opacity: 0.5;
}
[data-overlay="6"]:after,
[data-black-overlay="6"]:after,
[data-white-overlay="6"]:after,
[data-gradient-overlay="6"]:after {
  opacity: 0.6;
}
[data-overlay="7"]:after,
[data-black-overlay="7"]:after,
[data-white-overlay="7"]:after,
[data-gradient-overlay="7"]:after {
  opacity: 0.7;
}
[data-overlay="8"]:after,
[data-black-overlay="8"]:after,
[data-white-overlay="8"]:after,
[data-gradient-overlay="8"]:after {
  opacity: 0.8;
}
[data-overlay="9"]:after,
[data-black-overlay="9"]:after,
[data-white-overlay="9"]:after,
[data-gradient-overlay="9"]:after {
  opacity: 0.9;
}
[data-overlay="10"]:after,
[data-black-overlay="10"]:after,
[data-white-overlay="10"]:after,
[data-gradient-overlay="10"]:after {
  opacity: 1;
}
[data-arcraft-position-top="0"] {
  top: 0%;
}
[data-arcraft-position-top="1"] {
  top: 1%;
}
[data-arcraft-position-top="2"] {
  top: 2%;
}
[data-arcraft-position-top="3"] {
  top: 3%;
}
[data-arcraft-position-top="4"] {
  top: 4%;
}
[data-arcraft-position-top="5"] {
  top: 5%;
}
[data-arcraft-position-top="6"] {
  top: 6%;
}
[data-arcraft-position-top="7"] {
  top: 7%;
}
[data-arcraft-position-top="8"] {
  top: 8%;
}
[data-arcraft-position-top="9"] {
  top: 9%;
}
[data-arcraft-position-top="10"] {
  top: 10%;
}
[data-arcraft-position-top="11"] {
  top: 11%;
}
[data-arcraft-position-top="12"] {
  top: 12%;
}
[data-arcraft-position-top="13"] {
  top: 13%;
}
[data-arcraft-position-top="14"] {
  top: 14%;
}
[data-arcraft-position-top="15"] {
  top: 15%;
}
[data-arcraft-position-top="16"] {
  top: 16%;
}
[data-arcraft-position-top="17"] {
  top: 17%;
}
[data-arcraft-position-top="18"] {
  top: 18%;
}
[data-arcraft-position-top="19"] {
  top: 19%;
}
[data-arcraft-position-top="20"] {
  top: 20%;
}
[data-arcraft-position-top="21"] {
  top: 21%;
}
[data-arcraft-position-top="22"] {
  top: 22%;
}
[data-arcraft-position-top="23"] {
  top: 23%;
}
[data-arcraft-position-top="24"] {
  top: 24%;
}
[data-arcraft-position-top="25"] {
  top: 25%;
}
[data-arcraft-position-top="26"] {
  top: 26%;
}
[data-arcraft-position-top="27"] {
  top: 27%;
}
[data-arcraft-position-top="28"] {
  top: 28%;
}
[data-arcraft-position-top="29"] {
  top: 29%;
}
[data-arcraft-position-top="30"] {
  top: 30%;
}
[data-arcraft-position-top="31"] {
  top: 31%;
}
[data-arcraft-position-top="32"] {
  top: 32%;
}
[data-arcraft-position-top="33"] {
  top: 33%;
}
[data-arcraft-position-top="34"] {
  top: 34%;
}
[data-arcraft-position-top="35"] {
  top: 35%;
}
[data-arcraft-position-top="36"] {
  top: 36%;
}
[data-arcraft-position-top="37"] {
  top: 37%;
}
[data-arcraft-position-top="38"] {
  top: 38%;
}
[data-arcraft-position-top="39"] {
  top: 39%;
}
[data-arcraft-position-top="40"] {
  top: 40%;
}
[data-arcraft-position-top="41"] {
  top: 41%;
}
[data-arcraft-position-top="42"] {
  top: 42%;
}
[data-arcraft-position-top="43"] {
  top: 43%;
}
[data-arcraft-position-top="44"] {
  top: 44%;
}
[data-arcraft-position-top="45"] {
  top: 45%;
}
[data-arcraft-position-top="46"] {
  top: 46%;
}
[data-arcraft-position-top="47"] {
  top: 47%;
}
[data-arcraft-position-top="48"] {
  top: 48%;
}
[data-arcraft-position-top="49"] {
  top: 49%;
}
[data-arcraft-position-top="50"] {
  top: 50%;
}
[data-arcraft-position-top="51"] {
  top: 51%;
}
[data-arcraft-position-top="52"] {
  top: 52%;
}
[data-arcraft-position-top="53"] {
  top: 53%;
}
[data-arcraft-position-top="54"] {
  top: 54%;
}
[data-arcraft-position-top="55"] {
  top: 55%;
}
[data-arcraft-position-top="56"] {
  top: 56%;
}
[data-arcraft-position-top="57"] {
  top: 57%;
}
[data-arcraft-position-top="58"] {
  top: 58%;
}
[data-arcraft-position-top="59"] {
  top: 59%;
}
[data-arcraft-position-top="60"] {
  top: 60%;
}
[data-arcraft-position-top="61"] {
  top: 61%;
}
[data-arcraft-position-top="62"] {
  top: 62%;
}
[data-arcraft-position-top="63"] {
  top: 63%;
}
[data-arcraft-position-top="64"] {
  top: 64%;
}
[data-arcraft-position-top="65"] {
  top: 65%;
}
[data-arcraft-position-top="66"] {
  top: 66%;
}
[data-arcraft-position-top="67"] {
  top: 67%;
}
[data-arcraft-position-top="68"] {
  top: 68%;
}
[data-arcraft-position-top="69"] {
  top: 69%;
}
[data-arcraft-position-top="70"] {
  top: 70%;
}
[data-arcraft-position-top="71"] {
  top: 71%;
}
[data-arcraft-position-top="72"] {
  top: 72%;
}
[data-arcraft-position-top="73"] {
  top: 73%;
}
[data-arcraft-position-top="74"] {
  top: 74%;
}
[data-arcraft-position-top="75"] {
  top: 75%;
}
[data-arcraft-position-top="76"] {
  top: 76%;
}
[data-arcraft-position-top="77"] {
  top: 77%;
}
[data-arcraft-position-top="78"] {
  top: 78%;
}
[data-arcraft-position-top="79"] {
  top: 79%;
}
[data-arcraft-position-top="80"] {
  top: 80%;
}
[data-arcraft-position-top="81"] {
  top: 81%;
}
[data-arcraft-position-top="82"] {
  top: 82%;
}
[data-arcraft-position-top="83"] {
  top: 83%;
}
[data-arcraft-position-top="84"] {
  top: 84%;
}
[data-arcraft-position-top="85"] {
  top: 85%;
}
[data-arcraft-position-top="86"] {
  top: 86%;
}
[data-arcraft-position-top="87"] {
  top: 87%;
}
[data-arcraft-position-top="88"] {
  top: 88%;
}
[data-arcraft-position-top="89"] {
  top: 89%;
}
[data-arcraft-position-top="90"] {
  top: 90%;
}
[data-arcraft-position-top="91"] {
  top: 91%;
}
[data-arcraft-position-top="92"] {
  top: 92%;
}
[data-arcraft-position-top="93"] {
  top: 93%;
}
[data-arcraft-position-top="94"] {
  top: 94%;
}
[data-arcraft-position-top="95"] {
  top: 95%;
}
[data-arcraft-position-top="96"] {
  top: 96%;
}
[data-arcraft-position-top="97"] {
  top: 97%;
}
[data-arcraft-position-top="98"] {
  top: 98%;
}
[data-arcraft-position-top="99"] {
  top: 99%;
}
[data-arcraft-position-top="100"] {
  top: 100%;
}
[data-arcraft-position-top="101"] {
  top: 101%;
}
[data-arcraft-position-top="102"] {
  top: 102%;
}
[data-arcraft-position-top="103"] {
  top: 103%;
}
[data-arcraft-position-top="104"] {
  top: 104%;
}
[data-arcraft-position-top="105"] {
  top: 105%;
}
[data-arcraft-position-top="106"] {
  top: 106%;
}
[data-arcraft-position-top="107"] {
  top: 107%;
}
[data-arcraft-position-top="108"] {
  top: 108%;
}
[data-arcraft-position-top="109"] {
  top: 109%;
}
[data-arcraft-position-top="110"] {
  top: 110%;
}
[data-arcraft-position-top="111"] {
  top: 111%;
}
[data-arcraft-position-top="112"] {
  top: 112%;
}
[data-arcraft-position-top="113"] {
  top: 113%;
}
[data-arcraft-position-top="114"] {
  top: 114%;
}
[data-arcraft-position-top="115"] {
  top: 115%;
}
[data-arcraft-position-top="116"] {
  top: 116%;
}
[data-arcraft-position-top="117"] {
  top: 117%;
}
[data-arcraft-position-top="118"] {
  top: 118%;
}
[data-arcraft-position-top="119"] {
  top: 119%;
}
[data-arcraft-position-top="120"] {
  top: 120%;
}
[data-arcraft-position-top="121"] {
  top: 121%;
}
[data-arcraft-position-top="122"] {
  top: 122%;
}
[data-arcraft-position-top="123"] {
  top: 123%;
}
[data-arcraft-position-top="124"] {
  top: 124%;
}
[data-arcraft-position-top="125"] {
  top: 125%;
}
[data-arcraft-position-top="126"] {
  top: 126%;
}
[data-arcraft-position-top="127"] {
  top: 127%;
}
[data-arcraft-position-top="128"] {
  top: 128%;
}
[data-arcraft-position-top="129"] {
  top: 129%;
}
[data-arcraft-position-top="130"] {
  top: 130%;
}
[data-arcraft-position-top="131"] {
  top: 131%;
}
[data-arcraft-position-top="132"] {
  top: 132%;
}
[data-arcraft-position-top="133"] {
  top: 133%;
}
[data-arcraft-position-top="134"] {
  top: 134%;
}
[data-arcraft-position-top="135"] {
  top: 135%;
}
[data-arcraft-position-top="136"] {
  top: 136%;
}
[data-arcraft-position-top="137"] {
  top: 137%;
}
[data-arcraft-position-top="138"] {
  top: 138%;
}
[data-arcraft-position-top="139"] {
  top: 139%;
}
[data-arcraft-position-top="140"] {
  top: 140%;
}
[data-arcraft-position-top="141"] {
  top: 141%;
}
[data-arcraft-position-top="142"] {
  top: 142%;
}
[data-arcraft-position-top="143"] {
  top: 143%;
}
[data-arcraft-position-top="144"] {
  top: 144%;
}
[data-arcraft-position-top="145"] {
  top: 145%;
}
[data-arcraft-position-top="146"] {
  top: 146%;
}
[data-arcraft-position-top="147"] {
  top: 147%;
}
[data-arcraft-position-top="148"] {
  top: 148%;
}
[data-arcraft-position-top="149"] {
  top: 149%;
}
[data-arcraft-position-top="150"] {
  top: 150%;
}
[data-arcraft-position-top="151"] {
  top: 151%;
}
[data-arcraft-position-top="152"] {
  top: 152%;
}
[data-arcraft-position-top="153"] {
  top: 153%;
}
[data-arcraft-position-top="154"] {
  top: 154%;
}
[data-arcraft-position-top="155"] {
  top: 155%;
}
[data-arcraft-position-top="156"] {
  top: 156%;
}
[data-arcraft-position-top="157"] {
  top: 157%;
}
[data-arcraft-position-top="158"] {
  top: 158%;
}
[data-arcraft-position-top="159"] {
  top: 159%;
}
[data-arcraft-position-top="160"] {
  top: 160%;
}
[data-arcraft-position-top="161"] {
  top: 161%;
}
[data-arcraft-position-top="162"] {
  top: 162%;
}
[data-arcraft-position-top="163"] {
  top: 163%;
}
[data-arcraft-position-top="164"] {
  top: 164%;
}
[data-arcraft-position-top="165"] {
  top: 165%;
}
[data-arcraft-position-top="166"] {
  top: 166%;
}
[data-arcraft-position-top="167"] {
  top: 167%;
}
[data-arcraft-position-top="168"] {
  top: 168%;
}
[data-arcraft-position-top="169"] {
  top: 169%;
}
[data-arcraft-position-top="170"] {
  top: 170%;
}
[data-arcraft-position-top="171"] {
  top: 171%;
}
[data-arcraft-position-top="172"] {
  top: 172%;
}
[data-arcraft-position-top="173"] {
  top: 173%;
}
[data-arcraft-position-top="174"] {
  top: 174%;
}
[data-arcraft-position-top="175"] {
  top: 175%;
}
[data-arcraft-position-top="176"] {
  top: 176%;
}
[data-arcraft-position-top="177"] {
  top: 177%;
}
[data-arcraft-position-top="178"] {
  top: 178%;
}
[data-arcraft-position-top="179"] {
  top: 179%;
}
[data-arcraft-position-top="180"] {
  top: 180%;
}
[data-arcraft-position-top="181"] {
  top: 181%;
}
[data-arcraft-position-top="182"] {
  top: 182%;
}
[data-arcraft-position-top="183"] {
  top: 183%;
}
[data-arcraft-position-top="184"] {
  top: 184%;
}
[data-arcraft-position-top="185"] {
  top: 185%;
}
[data-arcraft-position-top="186"] {
  top: 186%;
}
[data-arcraft-position-top="187"] {
  top: 187%;
}
[data-arcraft-position-top="188"] {
  top: 188%;
}
[data-arcraft-position-top="189"] {
  top: 189%;
}
[data-arcraft-position-top="190"] {
  top: 190%;
}
[data-arcraft-position-top="191"] {
  top: 191%;
}
[data-arcraft-position-top="192"] {
  top: 192%;
}
[data-arcraft-position-top="193"] {
  top: 193%;
}
[data-arcraft-position-top="194"] {
  top: 194%;
}
[data-arcraft-position-top="195"] {
  top: 195%;
}
[data-arcraft-position-top="196"] {
  top: 196%;
}
[data-arcraft-position-top="197"] {
  top: 197%;
}
[data-arcraft-position-top="198"] {
  top: 198%;
}
[data-arcraft-position-top="199"] {
  top: 199%;
}
[data-arcraft-position-top="200"] {
  top: 200%;
}
[data-arcraft-position-bottom="0"] {
  bottom: 0%;
}
[data-arcraft-position-bottom="1"] {
  bottom: 1%;
}
[data-arcraft-position-bottom="2"] {
  bottom: 2%;
}
[data-arcraft-position-bottom="3"] {
  bottom: 3%;
}
[data-arcraft-position-bottom="4"] {
  bottom: 4%;
}
[data-arcraft-position-bottom="5"] {
  bottom: 5%;
}
[data-arcraft-position-bottom="6"] {
  bottom: 6%;
}
[data-arcraft-position-bottom="7"] {
  bottom: 7%;
}
[data-arcraft-position-bottom="8"] {
  bottom: 8%;
}
[data-arcraft-position-bottom="9"] {
  bottom: 9%;
}
[data-arcraft-position-bottom="10"] {
  bottom: 10%;
}
[data-arcraft-position-bottom="11"] {
  bottom: 11%;
}
[data-arcraft-position-bottom="12"] {
  bottom: 12%;
}
[data-arcraft-position-bottom="13"] {
  bottom: 13%;
}
[data-arcraft-position-bottom="14"] {
  bottom: 14%;
}
[data-arcraft-position-bottom="15"] {
  bottom: 15%;
}
[data-arcraft-position-bottom="16"] {
  bottom: 16%;
}
[data-arcraft-position-bottom="17"] {
  bottom: 17%;
}
[data-arcraft-position-bottom="18"] {
  bottom: 18%;
}
[data-arcraft-position-bottom="19"] {
  bottom: 19%;
}
[data-arcraft-position-bottom="20"] {
  bottom: 20%;
}
[data-arcraft-position-bottom="21"] {
  bottom: 21%;
}
[data-arcraft-position-bottom="22"] {
  bottom: 22%;
}
[data-arcraft-position-bottom="23"] {
  bottom: 23%;
}
[data-arcraft-position-bottom="24"] {
  bottom: 24%;
}
[data-arcraft-position-bottom="25"] {
  bottom: 25%;
}
[data-arcraft-position-bottom="26"] {
  bottom: 26%;
}
[data-arcraft-position-bottom="27"] {
  bottom: 27%;
}
[data-arcraft-position-bottom="28"] {
  bottom: 28%;
}
[data-arcraft-position-bottom="29"] {
  bottom: 29%;
}
[data-arcraft-position-bottom="30"] {
  bottom: 30%;
}
[data-arcraft-position-bottom="31"] {
  bottom: 31%;
}
[data-arcraft-position-bottom="32"] {
  bottom: 32%;
}
[data-arcraft-position-bottom="33"] {
  bottom: 33%;
}
[data-arcraft-position-bottom="34"] {
  bottom: 34%;
}
[data-arcraft-position-bottom="35"] {
  bottom: 35%;
}
[data-arcraft-position-bottom="36"] {
  bottom: 36%;
}
[data-arcraft-position-bottom="37"] {
  bottom: 37%;
}
[data-arcraft-position-bottom="38"] {
  bottom: 38%;
}
[data-arcraft-position-bottom="39"] {
  bottom: 39%;
}
[data-arcraft-position-bottom="40"] {
  bottom: 40%;
}
[data-arcraft-position-bottom="41"] {
  bottom: 41%;
}
[data-arcraft-position-bottom="42"] {
  bottom: 42%;
}
[data-arcraft-position-bottom="43"] {
  bottom: 43%;
}
[data-arcraft-position-bottom="44"] {
  bottom: 44%;
}
[data-arcraft-position-bottom="45"] {
  bottom: 45%;
}
[data-arcraft-position-bottom="46"] {
  bottom: 46%;
}
[data-arcraft-position-bottom="47"] {
  bottom: 47%;
}
[data-arcraft-position-bottom="48"] {
  bottom: 48%;
}
[data-arcraft-position-bottom="49"] {
  bottom: 49%;
}
[data-arcraft-position-bottom="50"] {
  bottom: 50%;
}
[data-arcraft-position-bottom="51"] {
  bottom: 51%;
}
[data-arcraft-position-bottom="52"] {
  bottom: 52%;
}
[data-arcraft-position-bottom="53"] {
  bottom: 53%;
}
[data-arcraft-position-bottom="54"] {
  bottom: 54%;
}
[data-arcraft-position-bottom="55"] {
  bottom: 55%;
}
[data-arcraft-position-bottom="56"] {
  bottom: 56%;
}
[data-arcraft-position-bottom="57"] {
  bottom: 57%;
}
[data-arcraft-position-bottom="58"] {
  bottom: 58%;
}
[data-arcraft-position-bottom="59"] {
  bottom: 59%;
}
[data-arcraft-position-bottom="60"] {
  bottom: 60%;
}
[data-arcraft-position-bottom="61"] {
  bottom: 61%;
}
[data-arcraft-position-bottom="62"] {
  bottom: 62%;
}
[data-arcraft-position-bottom="63"] {
  bottom: 63%;
}
[data-arcraft-position-bottom="64"] {
  bottom: 64%;
}
[data-arcraft-position-bottom="65"] {
  bottom: 65%;
}
[data-arcraft-position-bottom="66"] {
  bottom: 66%;
}
[data-arcraft-position-bottom="67"] {
  bottom: 67%;
}
[data-arcraft-position-bottom="68"] {
  bottom: 68%;
}
[data-arcraft-position-bottom="69"] {
  bottom: 69%;
}
[data-arcraft-position-bottom="70"] {
  bottom: 70%;
}
[data-arcraft-position-bottom="71"] {
  bottom: 71%;
}
[data-arcraft-position-bottom="72"] {
  bottom: 72%;
}
[data-arcraft-position-bottom="73"] {
  bottom: 73%;
}
[data-arcraft-position-bottom="74"] {
  bottom: 74%;
}
[data-arcraft-position-bottom="75"] {
  bottom: 75%;
}
[data-arcraft-position-bottom="76"] {
  bottom: 76%;
}
[data-arcraft-position-bottom="77"] {
  bottom: 77%;
}
[data-arcraft-position-bottom="78"] {
  bottom: 78%;
}
[data-arcraft-position-bottom="79"] {
  bottom: 79%;
}
[data-arcraft-position-bottom="80"] {
  bottom: 80%;
}
[data-arcraft-position-bottom="81"] {
  bottom: 81%;
}
[data-arcraft-position-bottom="82"] {
  bottom: 82%;
}
[data-arcraft-position-bottom="83"] {
  bottom: 83%;
}
[data-arcraft-position-bottom="84"] {
  bottom: 84%;
}
[data-arcraft-position-bottom="85"] {
  bottom: 85%;
}
[data-arcraft-position-bottom="86"] {
  bottom: 86%;
}
[data-arcraft-position-bottom="87"] {
  bottom: 87%;
}
[data-arcraft-position-bottom="88"] {
  bottom: 88%;
}
[data-arcraft-position-bottom="89"] {
  bottom: 89%;
}
[data-arcraft-position-bottom="90"] {
  bottom: 90%;
}
[data-arcraft-position-bottom="91"] {
  bottom: 91%;
}
[data-arcraft-position-bottom="92"] {
  bottom: 92%;
}
[data-arcraft-position-bottom="93"] {
  bottom: 93%;
}
[data-arcraft-position-bottom="94"] {
  bottom: 94%;
}
[data-arcraft-position-bottom="95"] {
  bottom: 95%;
}
[data-arcraft-position-bottom="96"] {
  bottom: 96%;
}
[data-arcraft-position-bottom="97"] {
  bottom: 97%;
}
[data-arcraft-position-bottom="98"] {
  bottom: 98%;
}
[data-arcraft-position-bottom="99"] {
  bottom: 99%;
}
[data-arcraft-position-bottom="100"] {
  bottom: 100%;
}
[data-arcraft-position-bottom="101"] {
  bottom: 101%;
}
[data-arcraft-position-bottom="102"] {
  bottom: 102%;
}
[data-arcraft-position-bottom="103"] {
  bottom: 103%;
}
[data-arcraft-position-bottom="104"] {
  bottom: 104%;
}
[data-arcraft-position-bottom="105"] {
  bottom: 105%;
}
[data-arcraft-position-bottom="106"] {
  bottom: 106%;
}
[data-arcraft-position-bottom="107"] {
  bottom: 107%;
}
[data-arcraft-position-bottom="108"] {
  bottom: 108%;
}
[data-arcraft-position-bottom="109"] {
  bottom: 109%;
}
[data-arcraft-position-bottom="110"] {
  bottom: 110%;
}
[data-arcraft-position-bottom="111"] {
  bottom: 111%;
}
[data-arcraft-position-bottom="112"] {
  bottom: 112%;
}
[data-arcraft-position-bottom="113"] {
  bottom: 113%;
}
[data-arcraft-position-bottom="114"] {
  bottom: 114%;
}
[data-arcraft-position-bottom="115"] {
  bottom: 115%;
}
[data-arcraft-position-bottom="116"] {
  bottom: 116%;
}
[data-arcraft-position-bottom="117"] {
  bottom: 117%;
}
[data-arcraft-position-bottom="118"] {
  bottom: 118%;
}
[data-arcraft-position-bottom="119"] {
  bottom: 119%;
}
[data-arcraft-position-bottom="120"] {
  bottom: 120%;
}
[data-arcraft-position-bottom="121"] {
  bottom: 121%;
}
[data-arcraft-position-bottom="122"] {
  bottom: 122%;
}
[data-arcraft-position-bottom="123"] {
  bottom: 123%;
}
[data-arcraft-position-bottom="124"] {
  bottom: 124%;
}
[data-arcraft-position-bottom="125"] {
  bottom: 125%;
}
[data-arcraft-position-bottom="126"] {
  bottom: 126%;
}
[data-arcraft-position-bottom="127"] {
  bottom: 127%;
}
[data-arcraft-position-bottom="128"] {
  bottom: 128%;
}
[data-arcraft-position-bottom="129"] {
  bottom: 129%;
}
[data-arcraft-position-bottom="130"] {
  bottom: 130%;
}
[data-arcraft-position-bottom="131"] {
  bottom: 131%;
}
[data-arcraft-position-bottom="132"] {
  bottom: 132%;
}
[data-arcraft-position-bottom="133"] {
  bottom: 133%;
}
[data-arcraft-position-bottom="134"] {
  bottom: 134%;
}
[data-arcraft-position-bottom="135"] {
  bottom: 135%;
}
[data-arcraft-position-bottom="136"] {
  bottom: 136%;
}
[data-arcraft-position-bottom="137"] {
  bottom: 137%;
}
[data-arcraft-position-bottom="138"] {
  bottom: 138%;
}
[data-arcraft-position-bottom="139"] {
  bottom: 139%;
}
[data-arcraft-position-bottom="140"] {
  bottom: 140%;
}
[data-arcraft-position-bottom="141"] {
  bottom: 141%;
}
[data-arcraft-position-bottom="142"] {
  bottom: 142%;
}
[data-arcraft-position-bottom="143"] {
  bottom: 143%;
}
[data-arcraft-position-bottom="144"] {
  bottom: 144%;
}
[data-arcraft-position-bottom="145"] {
  bottom: 145%;
}
[data-arcraft-position-bottom="146"] {
  bottom: 146%;
}
[data-arcraft-position-bottom="147"] {
  bottom: 147%;
}
[data-arcraft-position-bottom="148"] {
  bottom: 148%;
}
[data-arcraft-position-bottom="149"] {
  bottom: 149%;
}
[data-arcraft-position-bottom="150"] {
  bottom: 150%;
}
[data-arcraft-position-bottom="151"] {
  bottom: 151%;
}
[data-arcraft-position-bottom="152"] {
  bottom: 152%;
}
[data-arcraft-position-bottom="153"] {
  bottom: 153%;
}
[data-arcraft-position-bottom="154"] {
  bottom: 154%;
}
[data-arcraft-position-bottom="155"] {
  bottom: 155%;
}
[data-arcraft-position-bottom="156"] {
  bottom: 156%;
}
[data-arcraft-position-bottom="157"] {
  bottom: 157%;
}
[data-arcraft-position-bottom="158"] {
  bottom: 158%;
}
[data-arcraft-position-bottom="159"] {
  bottom: 159%;
}
[data-arcraft-position-bottom="160"] {
  bottom: 160%;
}
[data-arcraft-position-bottom="161"] {
  bottom: 161%;
}
[data-arcraft-position-bottom="162"] {
  bottom: 162%;
}
[data-arcraft-position-bottom="163"] {
  bottom: 163%;
}
[data-arcraft-position-bottom="164"] {
  bottom: 164%;
}
[data-arcraft-position-bottom="165"] {
  bottom: 165%;
}
[data-arcraft-position-bottom="166"] {
  bottom: 166%;
}
[data-arcraft-position-bottom="167"] {
  bottom: 167%;
}
[data-arcraft-position-bottom="168"] {
  bottom: 168%;
}
[data-arcraft-position-bottom="169"] {
  bottom: 169%;
}
[data-arcraft-position-bottom="170"] {
  bottom: 170%;
}
[data-arcraft-position-bottom="171"] {
  bottom: 171%;
}
[data-arcraft-position-bottom="172"] {
  bottom: 172%;
}
[data-arcraft-position-bottom="173"] {
  bottom: 173%;
}
[data-arcraft-position-bottom="174"] {
  bottom: 174%;
}
[data-arcraft-position-bottom="175"] {
  bottom: 175%;
}
[data-arcraft-position-bottom="176"] {
  bottom: 176%;
}
[data-arcraft-position-bottom="177"] {
  bottom: 177%;
}
[data-arcraft-position-bottom="178"] {
  bottom: 178%;
}
[data-arcraft-position-bottom="179"] {
  bottom: 179%;
}
[data-arcraft-position-bottom="180"] {
  bottom: 180%;
}
[data-arcraft-position-bottom="181"] {
  bottom: 181%;
}
[data-arcraft-position-bottom="182"] {
  bottom: 182%;
}
[data-arcraft-position-bottom="183"] {
  bottom: 183%;
}
[data-arcraft-position-bottom="184"] {
  bottom: 184%;
}
[data-arcraft-position-bottom="185"] {
  bottom: 185%;
}
[data-arcraft-position-bottom="186"] {
  bottom: 186%;
}
[data-arcraft-position-bottom="187"] {
  bottom: 187%;
}
[data-arcraft-position-bottom="188"] {
  bottom: 188%;
}
[data-arcraft-position-bottom="189"] {
  bottom: 189%;
}
[data-arcraft-position-bottom="190"] {
  bottom: 190%;
}
[data-arcraft-position-bottom="191"] {
  bottom: 191%;
}
[data-arcraft-position-bottom="192"] {
  bottom: 192%;
}
[data-arcraft-position-bottom="193"] {
  bottom: 193%;
}
[data-arcraft-position-bottom="194"] {
  bottom: 194%;
}
[data-arcraft-position-bottom="195"] {
  bottom: 195%;
}
[data-arcraft-position-bottom="196"] {
  bottom: 196%;
}
[data-arcraft-position-bottom="197"] {
  bottom: 197%;
}
[data-arcraft-position-bottom="198"] {
  bottom: 198%;
}
[data-arcraft-position-bottom="199"] {
  bottom: 199%;
}
[data-arcraft-position-bottom="200"] {
  bottom: 200%;
}
[data-arcraft-position-left="0"] {
  left: 0%;
}
[data-arcraft-position-left="1"] {
  left: 1%;
}
[data-arcraft-position-left="2"] {
  left: 2%;
}
[data-arcraft-position-left="3"] {
  left: 3%;
}
[data-arcraft-position-left="4"] {
  left: 4%;
}
[data-arcraft-position-left="5"] {
  left: 5%;
}
[data-arcraft-position-left="6"] {
  left: 6%;
}
[data-arcraft-position-left="7"] {
  left: 7%;
}
[data-arcraft-position-left="8"] {
  left: 8%;
}
[data-arcraft-position-left="9"] {
  left: 9%;
}
[data-arcraft-position-left="10"] {
  left: 10%;
}
[data-arcraft-position-left="11"] {
  left: 11%;
}
[data-arcraft-position-left="12"] {
  left: 12%;
}
[data-arcraft-position-left="13"] {
  left: 13%;
}
[data-arcraft-position-left="14"] {
  left: 14%;
}
[data-arcraft-position-left="15"] {
  left: 15%;
}
[data-arcraft-position-left="16"] {
  left: 16%;
}
[data-arcraft-position-left="17"] {
  left: 17%;
}
[data-arcraft-position-left="18"] {
  left: 18%;
}
[data-arcraft-position-left="19"] {
  left: 19%;
}
[data-arcraft-position-left="20"] {
  left: 20%;
}
[data-arcraft-position-left="21"] {
  left: 21%;
}
[data-arcraft-position-left="22"] {
  left: 22%;
}
[data-arcraft-position-left="23"] {
  left: 23%;
}
[data-arcraft-position-left="24"] {
  left: 24%;
}
[data-arcraft-position-left="25"] {
  left: 25%;
}
[data-arcraft-position-left="26"] {
  left: 26%;
}
[data-arcraft-position-left="27"] {
  left: 27%;
}
[data-arcraft-position-left="28"] {
  left: 28%;
}
[data-arcraft-position-left="29"] {
  left: 29%;
}
[data-arcraft-position-left="30"] {
  left: 30%;
}
[data-arcraft-position-left="31"] {
  left: 31%;
}
[data-arcraft-position-left="32"] {
  left: 32%;
}
[data-arcraft-position-left="33"] {
  left: 33%;
}
[data-arcraft-position-left="34"] {
  left: 34%;
}
[data-arcraft-position-left="35"] {
  left: 35%;
}
[data-arcraft-position-left="36"] {
  left: 36%;
}
[data-arcraft-position-left="37"] {
  left: 37%;
}
[data-arcraft-position-left="38"] {
  left: 38%;
}
[data-arcraft-position-left="39"] {
  left: 39%;
}
[data-arcraft-position-left="40"] {
  left: 40%;
}
[data-arcraft-position-left="41"] {
  left: 41%;
}
[data-arcraft-position-left="42"] {
  left: 42%;
}
[data-arcraft-position-left="43"] {
  left: 43%;
}
[data-arcraft-position-left="44"] {
  left: 44%;
}
[data-arcraft-position-left="45"] {
  left: 45%;
}
[data-arcraft-position-left="46"] {
  left: 46%;
}
[data-arcraft-position-left="47"] {
  left: 47%;
}
[data-arcraft-position-left="48"] {
  left: 48%;
}
[data-arcraft-position-left="49"] {
  left: 49%;
}
[data-arcraft-position-left="50"] {
  left: 50%;
}
[data-arcraft-position-left="51"] {
  left: 51%;
}
[data-arcraft-position-left="52"] {
  left: 52%;
}
[data-arcraft-position-left="53"] {
  left: 53%;
}
[data-arcraft-position-left="54"] {
  left: 54%;
}
[data-arcraft-position-left="55"] {
  left: 55%;
}
[data-arcraft-position-left="56"] {
  left: 56%;
}
[data-arcraft-position-left="57"] {
  left: 57%;
}
[data-arcraft-position-left="58"] {
  left: 58%;
}
[data-arcraft-position-left="59"] {
  left: 59%;
}
[data-arcraft-position-left="60"] {
  left: 60%;
}
[data-arcraft-position-left="61"] {
  left: 61%;
}
[data-arcraft-position-left="62"] {
  left: 62%;
}
[data-arcraft-position-left="63"] {
  left: 63%;
}
[data-arcraft-position-left="64"] {
  left: 64%;
}
[data-arcraft-position-left="65"] {
  left: 65%;
}
[data-arcraft-position-left="66"] {
  left: 66%;
}
[data-arcraft-position-left="67"] {
  left: 67%;
}
[data-arcraft-position-left="68"] {
  left: 68%;
}
[data-arcraft-position-left="69"] {
  left: 69%;
}
[data-arcraft-position-left="70"] {
  left: 70%;
}
[data-arcraft-position-left="71"] {
  left: 71%;
}
[data-arcraft-position-left="72"] {
  left: 72%;
}
[data-arcraft-position-left="73"] {
  left: 73%;
}
[data-arcraft-position-left="74"] {
  left: 74%;
}
[data-arcraft-position-left="75"] {
  left: 75%;
}
[data-arcraft-position-left="76"] {
  left: 76%;
}
[data-arcraft-position-left="77"] {
  left: 77%;
}
[data-arcraft-position-left="78"] {
  left: 78%;
}
[data-arcraft-position-left="79"] {
  left: 79%;
}
[data-arcraft-position-left="80"] {
  left: 80%;
}
[data-arcraft-position-left="81"] {
  left: 81%;
}
[data-arcraft-position-left="82"] {
  left: 82%;
}
[data-arcraft-position-left="83"] {
  left: 83%;
}
[data-arcraft-position-left="84"] {
  left: 84%;
}
[data-arcraft-position-left="85"] {
  left: 85%;
}
[data-arcraft-position-left="86"] {
  left: 86%;
}
[data-arcraft-position-left="87"] {
  left: 87%;
}
[data-arcraft-position-left="88"] {
  left: 88%;
}
[data-arcraft-position-left="89"] {
  left: 89%;
}
[data-arcraft-position-left="90"] {
  left: 90%;
}
[data-arcraft-position-left="91"] {
  left: 91%;
}
[data-arcraft-position-left="92"] {
  left: 92%;
}
[data-arcraft-position-left="93"] {
  left: 93%;
}
[data-arcraft-position-left="94"] {
  left: 94%;
}
[data-arcraft-position-left="95"] {
  left: 95%;
}
[data-arcraft-position-left="96"] {
  left: 96%;
}
[data-arcraft-position-left="97"] {
  left: 97%;
}
[data-arcraft-position-left="98"] {
  left: 98%;
}
[data-arcraft-position-left="99"] {
  left: 99%;
}
[data-arcraft-position-left="100"] {
  left: 100%;
}
[data-arcraft-position-left="101"] {
  left: 101%;
}
[data-arcraft-position-left="102"] {
  left: 102%;
}
[data-arcraft-position-left="103"] {
  left: 103%;
}
[data-arcraft-position-left="104"] {
  left: 104%;
}
[data-arcraft-position-left="105"] {
  left: 105%;
}
[data-arcraft-position-left="106"] {
  left: 106%;
}
[data-arcraft-position-left="107"] {
  left: 107%;
}
[data-arcraft-position-left="108"] {
  left: 108%;
}
[data-arcraft-position-left="109"] {
  left: 109%;
}
[data-arcraft-position-left="110"] {
  left: 110%;
}
[data-arcraft-position-left="111"] {
  left: 111%;
}
[data-arcraft-position-left="112"] {
  left: 112%;
}
[data-arcraft-position-left="113"] {
  left: 113%;
}
[data-arcraft-position-left="114"] {
  left: 114%;
}
[data-arcraft-position-left="115"] {
  left: 115%;
}
[data-arcraft-position-left="116"] {
  left: 116%;
}
[data-arcraft-position-left="117"] {
  left: 117%;
}
[data-arcraft-position-left="118"] {
  left: 118%;
}
[data-arcraft-position-left="119"] {
  left: 119%;
}
[data-arcraft-position-left="120"] {
  left: 120%;
}
[data-arcraft-position-left="121"] {
  left: 121%;
}
[data-arcraft-position-left="122"] {
  left: 122%;
}
[data-arcraft-position-left="123"] {
  left: 123%;
}
[data-arcraft-position-left="124"] {
  left: 124%;
}
[data-arcraft-position-left="125"] {
  left: 125%;
}
[data-arcraft-position-left="126"] {
  left: 126%;
}
[data-arcraft-position-left="127"] {
  left: 127%;
}
[data-arcraft-position-left="128"] {
  left: 128%;
}
[data-arcraft-position-left="129"] {
  left: 129%;
}
[data-arcraft-position-left="130"] {
  left: 130%;
}
[data-arcraft-position-left="131"] {
  left: 131%;
}
[data-arcraft-position-left="132"] {
  left: 132%;
}
[data-arcraft-position-left="133"] {
  left: 133%;
}
[data-arcraft-position-left="134"] {
  left: 134%;
}
[data-arcraft-position-left="135"] {
  left: 135%;
}
[data-arcraft-position-left="136"] {
  left: 136%;
}
[data-arcraft-position-left="137"] {
  left: 137%;
}
[data-arcraft-position-left="138"] {
  left: 138%;
}
[data-arcraft-position-left="139"] {
  left: 139%;
}
[data-arcraft-position-left="140"] {
  left: 140%;
}
[data-arcraft-position-left="141"] {
  left: 141%;
}
[data-arcraft-position-left="142"] {
  left: 142%;
}
[data-arcraft-position-left="143"] {
  left: 143%;
}
[data-arcraft-position-left="144"] {
  left: 144%;
}
[data-arcraft-position-left="145"] {
  left: 145%;
}
[data-arcraft-position-left="146"] {
  left: 146%;
}
[data-arcraft-position-left="147"] {
  left: 147%;
}
[data-arcraft-position-left="148"] {
  left: 148%;
}
[data-arcraft-position-left="149"] {
  left: 149%;
}
[data-arcraft-position-left="150"] {
  left: 150%;
}
[data-arcraft-position-left="151"] {
  left: 151%;
}
[data-arcraft-position-left="152"] {
  left: 152%;
}
[data-arcraft-position-left="153"] {
  left: 153%;
}
[data-arcraft-position-left="154"] {
  left: 154%;
}
[data-arcraft-position-left="155"] {
  left: 155%;
}
[data-arcraft-position-left="156"] {
  left: 156%;
}
[data-arcraft-position-left="157"] {
  left: 157%;
}
[data-arcraft-position-left="158"] {
  left: 158%;
}
[data-arcraft-position-left="159"] {
  left: 159%;
}
[data-arcraft-position-left="160"] {
  left: 160%;
}
[data-arcraft-position-left="161"] {
  left: 161%;
}
[data-arcraft-position-left="162"] {
  left: 162%;
}
[data-arcraft-position-left="163"] {
  left: 163%;
}
[data-arcraft-position-left="164"] {
  left: 164%;
}
[data-arcraft-position-left="165"] {
  left: 165%;
}
[data-arcraft-position-left="166"] {
  left: 166%;
}
[data-arcraft-position-left="167"] {
  left: 167%;
}
[data-arcraft-position-left="168"] {
  left: 168%;
}
[data-arcraft-position-left="169"] {
  left: 169%;
}
[data-arcraft-position-left="170"] {
  left: 170%;
}
[data-arcraft-position-left="171"] {
  left: 171%;
}
[data-arcraft-position-left="172"] {
  left: 172%;
}
[data-arcraft-position-left="173"] {
  left: 173%;
}
[data-arcraft-position-left="174"] {
  left: 174%;
}
[data-arcraft-position-left="175"] {
  left: 175%;
}
[data-arcraft-position-left="176"] {
  left: 176%;
}
[data-arcraft-position-left="177"] {
  left: 177%;
}
[data-arcraft-position-left="178"] {
  left: 178%;
}
[data-arcraft-position-left="179"] {
  left: 179%;
}
[data-arcraft-position-left="180"] {
  left: 180%;
}
[data-arcraft-position-left="181"] {
  left: 181%;
}
[data-arcraft-position-left="182"] {
  left: 182%;
}
[data-arcraft-position-left="183"] {
  left: 183%;
}
[data-arcraft-position-left="184"] {
  left: 184%;
}
[data-arcraft-position-left="185"] {
  left: 185%;
}
[data-arcraft-position-left="186"] {
  left: 186%;
}
[data-arcraft-position-left="187"] {
  left: 187%;
}
[data-arcraft-position-left="188"] {
  left: 188%;
}
[data-arcraft-position-left="189"] {
  left: 189%;
}
[data-arcraft-position-left="190"] {
  left: 190%;
}
[data-arcraft-position-left="191"] {
  left: 191%;
}
[data-arcraft-position-left="192"] {
  left: 192%;
}
[data-arcraft-position-left="193"] {
  left: 193%;
}
[data-arcraft-position-left="194"] {
  left: 194%;
}
[data-arcraft-position-left="195"] {
  left: 195%;
}
[data-arcraft-position-left="196"] {
  left: 196%;
}
[data-arcraft-position-left="197"] {
  left: 197%;
}
[data-arcraft-position-left="198"] {
  left: 198%;
}
[data-arcraft-position-left="199"] {
  left: 199%;
}
[data-arcraft-position-left="200"] {
  left: 200%;
}
[data-arcraft-position-right="0"] {
  right: 0%;
}
[data-arcraft-position-right="1"] {
  right: 1%;
}
[data-arcraft-position-right="2"] {
  right: 2%;
}
[data-arcraft-position-right="3"] {
  right: 3%;
}
[data-arcraft-position-right="4"] {
  right: 4%;
}
[data-arcraft-position-right="5"] {
  right: 5%;
}
[data-arcraft-position-right="6"] {
  right: 6%;
}
[data-arcraft-position-right="7"] {
  right: 7%;
}
[data-arcraft-position-right="8"] {
  right: 8%;
}
[data-arcraft-position-right="9"] {
  right: 9%;
}
[data-arcraft-position-right="10"] {
  right: 10%;
}
[data-arcraft-position-right="11"] {
  right: 11%;
}
[data-arcraft-position-right="12"] {
  right: 12%;
}
[data-arcraft-position-right="13"] {
  right: 13%;
}
[data-arcraft-position-right="14"] {
  right: 14%;
}
[data-arcraft-position-right="15"] {
  right: 15%;
}
[data-arcraft-position-right="16"] {
  right: 16%;
}
[data-arcraft-position-right="17"] {
  right: 17%;
}
[data-arcraft-position-right="18"] {
  right: 18%;
}
[data-arcraft-position-right="19"] {
  right: 19%;
}
[data-arcraft-position-right="20"] {
  right: 20%;
}
[data-arcraft-position-right="21"] {
  right: 21%;
}
[data-arcraft-position-right="22"] {
  right: 22%;
}
[data-arcraft-position-right="23"] {
  right: 23%;
}
[data-arcraft-position-right="24"] {
  right: 24%;
}
[data-arcraft-position-right="25"] {
  right: 25%;
}
[data-arcraft-position-right="26"] {
  right: 26%;
}
[data-arcraft-position-right="27"] {
  right: 27%;
}
[data-arcraft-position-right="28"] {
  right: 28%;
}
[data-arcraft-position-right="29"] {
  right: 29%;
}
[data-arcraft-position-right="30"] {
  right: 30%;
}
[data-arcraft-position-right="31"] {
  right: 31%;
}
[data-arcraft-position-right="32"] {
  right: 32%;
}
[data-arcraft-position-right="33"] {
  right: 33%;
}
[data-arcraft-position-right="34"] {
  right: 34%;
}
[data-arcraft-position-right="35"] {
  right: 35%;
}
[data-arcraft-position-right="36"] {
  right: 36%;
}
[data-arcraft-position-right="37"] {
  right: 37%;
}
[data-arcraft-position-right="38"] {
  right: 38%;
}
[data-arcraft-position-right="39"] {
  right: 39%;
}
[data-arcraft-position-right="40"] {
  right: 40%;
}
[data-arcraft-position-right="41"] {
  right: 41%;
}
[data-arcraft-position-right="42"] {
  right: 42%;
}
[data-arcraft-position-right="43"] {
  right: 43%;
}
[data-arcraft-position-right="44"] {
  right: 44%;
}
[data-arcraft-position-right="45"] {
  right: 45%;
}
[data-arcraft-position-right="46"] {
  right: 46%;
}
[data-arcraft-position-right="47"] {
  right: 47%;
}
[data-arcraft-position-right="48"] {
  right: 48%;
}
[data-arcraft-position-right="49"] {
  right: 49%;
}
[data-arcraft-position-right="50"] {
  right: 50%;
}
[data-arcraft-position-right="51"] {
  right: 51%;
}
[data-arcraft-position-right="52"] {
  right: 52%;
}
[data-arcraft-position-right="53"] {
  right: 53%;
}
[data-arcraft-position-right="54"] {
  right: 54%;
}
[data-arcraft-position-right="55"] {
  right: 55%;
}
[data-arcraft-position-right="56"] {
  right: 56%;
}
[data-arcraft-position-right="57"] {
  right: 57%;
}
[data-arcraft-position-right="58"] {
  right: 58%;
}
[data-arcraft-position-right="59"] {
  right: 59%;
}
[data-arcraft-position-right="60"] {
  right: 60%;
}
[data-arcraft-position-right="61"] {
  right: 61%;
}
[data-arcraft-position-right="62"] {
  right: 62%;
}
[data-arcraft-position-right="63"] {
  right: 63%;
}
[data-arcraft-position-right="64"] {
  right: 64%;
}
[data-arcraft-position-right="65"] {
  right: 65%;
}
[data-arcraft-position-right="66"] {
  right: 66%;
}
[data-arcraft-position-right="67"] {
  right: 67%;
}
[data-arcraft-position-right="68"] {
  right: 68%;
}
[data-arcraft-position-right="69"] {
  right: 69%;
}
[data-arcraft-position-right="70"] {
  right: 70%;
}
[data-arcraft-position-right="71"] {
  right: 71%;
}
[data-arcraft-position-right="72"] {
  right: 72%;
}
[data-arcraft-position-right="73"] {
  right: 73%;
}
[data-arcraft-position-right="74"] {
  right: 74%;
}
[data-arcraft-position-right="75"] {
  right: 75%;
}
[data-arcraft-position-right="76"] {
  right: 76%;
}
[data-arcraft-position-right="77"] {
  right: 77%;
}
[data-arcraft-position-right="78"] {
  right: 78%;
}
[data-arcraft-position-right="79"] {
  right: 79%;
}
[data-arcraft-position-right="80"] {
  right: 80%;
}
[data-arcraft-position-right="81"] {
  right: 81%;
}
[data-arcraft-position-right="82"] {
  right: 82%;
}
[data-arcraft-position-right="83"] {
  right: 83%;
}
[data-arcraft-position-right="84"] {
  right: 84%;
}
[data-arcraft-position-right="85"] {
  right: 85%;
}
[data-arcraft-position-right="86"] {
  right: 86%;
}
[data-arcraft-position-right="87"] {
  right: 87%;
}
[data-arcraft-position-right="88"] {
  right: 88%;
}
[data-arcraft-position-right="89"] {
  right: 89%;
}
[data-arcraft-position-right="90"] {
  right: 90%;
}
[data-arcraft-position-right="91"] {
  right: 91%;
}
[data-arcraft-position-right="92"] {
  right: 92%;
}
[data-arcraft-position-right="93"] {
  right: 93%;
}
[data-arcraft-position-right="94"] {
  right: 94%;
}
[data-arcraft-position-right="95"] {
  right: 95%;
}
[data-arcraft-position-right="96"] {
  right: 96%;
}
[data-arcraft-position-right="97"] {
  right: 97%;
}
[data-arcraft-position-right="98"] {
  right: 98%;
}
[data-arcraft-position-right="99"] {
  right: 99%;
}
[data-arcraft-position-right="100"] {
  right: 100%;
}
[data-arcraft-position-right="101"] {
  right: 101%;
}
[data-arcraft-position-right="102"] {
  right: 102%;
}
[data-arcraft-position-right="103"] {
  right: 103%;
}
[data-arcraft-position-right="104"] {
  right: 104%;
}
[data-arcraft-position-right="105"] {
  right: 105%;
}
[data-arcraft-position-right="106"] {
  right: 106%;
}
[data-arcraft-position-right="107"] {
  right: 107%;
}
[data-arcraft-position-right="108"] {
  right: 108%;
}
[data-arcraft-position-right="109"] {
  right: 109%;
}
[data-arcraft-position-right="110"] {
  right: 110%;
}
[data-arcraft-position-right="111"] {
  right: 111%;
}
[data-arcraft-position-right="112"] {
  right: 112%;
}
[data-arcraft-position-right="113"] {
  right: 113%;
}
[data-arcraft-position-right="114"] {
  right: 114%;
}
[data-arcraft-position-right="115"] {
  right: 115%;
}
[data-arcraft-position-right="116"] {
  right: 116%;
}
[data-arcraft-position-right="117"] {
  right: 117%;
}
[data-arcraft-position-right="118"] {
  right: 118%;
}
[data-arcraft-position-right="119"] {
  right: 119%;
}
[data-arcraft-position-right="120"] {
  right: 120%;
}
[data-arcraft-position-right="121"] {
  right: 121%;
}
[data-arcraft-position-right="122"] {
  right: 122%;
}
[data-arcraft-position-right="123"] {
  right: 123%;
}
[data-arcraft-position-right="124"] {
  right: 124%;
}
[data-arcraft-position-right="125"] {
  right: 125%;
}
[data-arcraft-position-right="126"] {
  right: 126%;
}
[data-arcraft-position-right="127"] {
  right: 127%;
}
[data-arcraft-position-right="128"] {
  right: 128%;
}
[data-arcraft-position-right="129"] {
  right: 129%;
}
[data-arcraft-position-right="130"] {
  right: 130%;
}
[data-arcraft-position-right="131"] {
  right: 131%;
}
[data-arcraft-position-right="132"] {
  right: 132%;
}
[data-arcraft-position-right="133"] {
  right: 133%;
}
[data-arcraft-position-right="134"] {
  right: 134%;
}
[data-arcraft-position-right="135"] {
  right: 135%;
}
[data-arcraft-position-right="136"] {
  right: 136%;
}
[data-arcraft-position-right="137"] {
  right: 137%;
}
[data-arcraft-position-right="138"] {
  right: 138%;
}
[data-arcraft-position-right="139"] {
  right: 139%;
}
[data-arcraft-position-right="140"] {
  right: 140%;
}
[data-arcraft-position-right="141"] {
  right: 141%;
}
[data-arcraft-position-right="142"] {
  right: 142%;
}
[data-arcraft-position-right="143"] {
  right: 143%;
}
[data-arcraft-position-right="144"] {
  right: 144%;
}
[data-arcraft-position-right="145"] {
  right: 145%;
}
[data-arcraft-position-right="146"] {
  right: 146%;
}
[data-arcraft-position-right="147"] {
  right: 147%;
}
[data-arcraft-position-right="148"] {
  right: 148%;
}
[data-arcraft-position-right="149"] {
  right: 149%;
}
[data-arcraft-position-right="150"] {
  right: 150%;
}
[data-arcraft-position-right="151"] {
  right: 151%;
}
[data-arcraft-position-right="152"] {
  right: 152%;
}
[data-arcraft-position-right="153"] {
  right: 153%;
}
[data-arcraft-position-right="154"] {
  right: 154%;
}
[data-arcraft-position-right="155"] {
  right: 155%;
}
[data-arcraft-position-right="156"] {
  right: 156%;
}
[data-arcraft-position-right="157"] {
  right: 157%;
}
[data-arcraft-position-right="158"] {
  right: 158%;
}
[data-arcraft-position-right="159"] {
  right: 159%;
}
[data-arcraft-position-right="160"] {
  right: 160%;
}
[data-arcraft-position-right="161"] {
  right: 161%;
}
[data-arcraft-position-right="162"] {
  right: 162%;
}
[data-arcraft-position-right="163"] {
  right: 163%;
}
[data-arcraft-position-right="164"] {
  right: 164%;
}
[data-arcraft-position-right="165"] {
  right: 165%;
}
[data-arcraft-position-right="166"] {
  right: 166%;
}
[data-arcraft-position-right="167"] {
  right: 167%;
}
[data-arcraft-position-right="168"] {
  right: 168%;
}
[data-arcraft-position-right="169"] {
  right: 169%;
}
[data-arcraft-position-right="170"] {
  right: 170%;
}
[data-arcraft-position-right="171"] {
  right: 171%;
}
[data-arcraft-position-right="172"] {
  right: 172%;
}
[data-arcraft-position-right="173"] {
  right: 173%;
}
[data-arcraft-position-right="174"] {
  right: 174%;
}
[data-arcraft-position-right="175"] {
  right: 175%;
}
[data-arcraft-position-right="176"] {
  right: 176%;
}
[data-arcraft-position-right="177"] {
  right: 177%;
}
[data-arcraft-position-right="178"] {
  right: 178%;
}
[data-arcraft-position-right="179"] {
  right: 179%;
}
[data-arcraft-position-right="180"] {
  right: 180%;
}
[data-arcraft-position-right="181"] {
  right: 181%;
}
[data-arcraft-position-right="182"] {
  right: 182%;
}
[data-arcraft-position-right="183"] {
  right: 183%;
}
[data-arcraft-position-right="184"] {
  right: 184%;
}
[data-arcraft-position-right="185"] {
  right: 185%;
}
[data-arcraft-position-right="186"] {
  right: 186%;
}
[data-arcraft-position-right="187"] {
  right: 187%;
}
[data-arcraft-position-right="188"] {
  right: 188%;
}
[data-arcraft-position-right="189"] {
  right: 189%;
}
[data-arcraft-position-right="190"] {
  right: 190%;
}
[data-arcraft-position-right="191"] {
  right: 191%;
}
[data-arcraft-position-right="192"] {
  right: 192%;
}
[data-arcraft-position-right="193"] {
  right: 193%;
}
[data-arcraft-position-right="194"] {
  right: 194%;
}
[data-arcraft-position-right="195"] {
  right: 195%;
}
[data-arcraft-position-right="196"] {
  right: 196%;
}
[data-arcraft-position-right="197"] {
  right: 197%;
}
[data-arcraft-position-right="198"] {
  right: 198%;
}
[data-arcraft-position-right="199"] {
  right: 199%;
}
[data-arcraft-position-right="200"] {
  right: 200%;
}
/*-----------------------------------------
        Scroll Up 
-----------------------------------------*/
/*------------------------------------------
        Contact Form 
-------------------------------------------*/
.arcraft-scroll::-webkit-scrollbar {
  width: 10px;
}
.arcraft-scroll::-webkit-scrollbar-thumb {
  background-color: #e8e6e9 !important;
  outline: 0;
  border-radius: 10px;
}
.arcraft-scroll::-webkit-scrollbar-track {
  box-shadow: 0 0 1px #cecdcd;
  background: #f6f6f6 !important;
  padding: 1px;
  border-radius: 8px;
}
/*-------------------------------------------
        position styles 
--------------------------------------------*/
[data-arcraft-position-vertical="1"] {
  top: 1%;
}
[data-arcraft-position-vertical="2"] {
  top: 2%;
}
[data-arcraft-position-vertical="3"] {
  top: 3%;
}
[data-arcraft-position-vertical="4"] {
  top: 4%;
}
[data-arcraft-position-vertical="5"] {
  top: 5%;
}
[data-arcraft-position-vertical="6"] {
  top: 6%;
}
[data-arcraft-position-vertical="7"] {
  top: 7%;
}
[data-arcraft-position-vertical="8"] {
  top: 8%;
}
[data-arcraft-position-vertical="9"] {
  top: 9%;
}
[data-arcraft-position-vertical="10"] {
  top: 10%;
}
[data-arcraft-position-vertical="11"] {
  top: 11%;
}
[data-arcraft-position-vertical="12"] {
  top: 12%;
}
[data-arcraft-position-vertical="13"] {
  top: 13%;
}
[data-arcraft-position-vertical="14"] {
  top: 14%;
}
[data-arcraft-position-vertical="15"] {
  top: 15%;
}
[data-arcraft-position-vertical="16"] {
  top: 16%;
}
[data-arcraft-position-vertical="17"] {
  top: 17%;
}
[data-arcraft-position-vertical="18"] {
  top: 18%;
}
[data-arcraft-position-vertical="19"] {
  top: 19%;
}
[data-arcraft-position-vertical="20"] {
  top: 20%;
}
[data-arcraft-position-vertical="21"] {
  top: 21%;
}
[data-arcraft-position-vertical="22"] {
  top: 22%;
}
[data-arcraft-position-vertical="23"] {
  top: 23%;
}
[data-arcraft-position-vertical="24"] {
  top: 24%;
}
[data-arcraft-position-vertical="25"] {
  top: 25%;
}
[data-arcraft-position-vertical="26"] {
  top: 26%;
}
[data-arcraft-position-vertical="27"] {
  top: 27%;
}
[data-arcraft-position-vertical="28"] {
  top: 28%;
}
[data-arcraft-position-vertical="29"] {
  top: 29%;
}
[data-arcraft-position-vertical="30"] {
  top: 30%;
}
[data-arcraft-position-vertical="31"] {
  top: 31%;
}
[data-arcraft-position-vertical="32"] {
  top: 32%;
}
[data-arcraft-position-vertical="33"] {
  top: 33%;
}
[data-arcraft-position-vertical="34"] {
  top: 34%;
}
[data-arcraft-position-vertical="35"] {
  top: 35%;
}
[data-arcraft-position-vertical="36"] {
  top: 36%;
}
[data-arcraft-position-vertical="37"] {
  top: 37%;
}
[data-arcraft-position-vertical="38"] {
  top: 38%;
}
[data-arcraft-position-vertical="39"] {
  top: 39%;
}
[data-arcraft-position-vertical="40"] {
  top: 40%;
}
[data-arcraft-position-vertical="41"] {
  top: 41%;
}
[data-arcraft-position-vertical="42"] {
  top: 42%;
}
[data-arcraft-position-vertical="43"] {
  top: 43%;
}
[data-arcraft-position-vertical="44"] {
  top: 44%;
}
[data-arcraft-position-vertical="45"] {
  top: 45%;
}
[data-arcraft-position-vertical="46"] {
  top: 46%;
}
[data-arcraft-position-vertical="47"] {
  top: 47%;
}
[data-arcraft-position-vertical="48"] {
  top: 48%;
}
[data-arcraft-position-vertical="49"] {
  top: 49%;
}
[data-arcraft-position-vertical="50"] {
  top: 50%;
}
[data-arcraft-position-vertical="51"] {
  top: 51%;
}
[data-arcraft-position-vertical="52"] {
  top: 52%;
}
[data-arcraft-position-vertical="53"] {
  top: 53%;
}
[data-arcraft-position-vertical="54"] {
  top: 54%;
}
[data-arcraft-position-vertical="55"] {
  top: 55%;
}
[data-arcraft-position-vertical="56"] {
  top: 56%;
}
[data-arcraft-position-vertical="57"] {
  top: 57%;
}
[data-arcraft-position-vertical="58"] {
  top: 58%;
}
[data-arcraft-position-vertical="59"] {
  top: 59%;
}
[data-arcraft-position-vertical="60"] {
  top: 60%;
}
[data-arcraft-position-vertical="61"] {
  top: 61%;
}
[data-arcraft-position-vertical="62"] {
  top: 62%;
}
[data-arcraft-position-vertical="63"] {
  top: 63%;
}
[data-arcraft-position-vertical="64"] {
  top: 64%;
}
[data-arcraft-position-vertical="65"] {
  top: 65%;
}
[data-arcraft-position-vertical="66"] {
  top: 66%;
}
[data-arcraft-position-vertical="67"] {
  top: 67%;
}
[data-arcraft-position-vertical="68"] {
  top: 68%;
}
[data-arcraft-position-vertical="69"] {
  top: 69%;
}
[data-arcraft-position-vertical="70"] {
  top: 70%;
}
[data-arcraft-position-vertical="71"] {
  top: 71%;
}
[data-arcraft-position-vertical="72"] {
  top: 72%;
}
[data-arcraft-position-vertical="73"] {
  top: 73%;
}
[data-arcraft-position-vertical="74"] {
  top: 74%;
}
[data-arcraft-position-vertical="75"] {
  top: 75%;
}
[data-arcraft-position-vertical="76"] {
  top: 76%;
}
[data-arcraft-position-vertical="77"] {
  top: 77%;
}
[data-arcraft-position-vertical="78"] {
  top: 78%;
}
[data-arcraft-position-vertical="79"] {
  top: 79%;
}
[data-arcraft-position-vertical="80"] {
  top: 80%;
}
[data-arcraft-position-vertical="81"] {
  top: 81%;
}
[data-arcraft-position-vertical="82"] {
  top: 82%;
}
[data-arcraft-position-vertical="83"] {
  top: 83%;
}
[data-arcraft-position-vertical="84"] {
  top: 84%;
}
[data-arcraft-position-vertical="85"] {
  top: 85%;
}
[data-arcraft-position-vertical="86"] {
  top: 86%;
}
[data-arcraft-position-vertical="87"] {
  top: 87%;
}
[data-arcraft-position-vertical="88"] {
  top: 88%;
}
[data-arcraft-position-vertical="89"] {
  top: 89%;
}
[data-arcraft-position-vertical="90"] {
  top: 90%;
}
[data-arcraft-position-vertical="91"] {
  top: 91%;
}
[data-arcraft-position-vertical="92"] {
  top: 92%;
}
[data-arcraft-position-vertical="93"] {
  top: 93%;
}
[data-arcraft-position-vertical="94"] {
  top: 94%;
}
[data-arcraft-position-vertical="95"] {
  top: 95%;
}
[data-arcraft-position-vertical="96"] {
  top: 96%;
}
[data-arcraft-position-vertical="97"] {
  top: 97%;
}
[data-arcraft-position-vertical="98"] {
  top: 98%;
}
[data-arcraft-position-vertical="99"] {
  top: 99%;
}
[data-arcraft-position-vertical="100"] {
  top: 100%;
}
[data-arcraft-position-horigental="1"] {
  left: 1%;
}
[data-arcraft-position-horigental="2"] {
  left: 2%;
}
[data-arcraft-position-horigental="3"] {
  left: 3%;
}
[data-arcraft-position-horigental="4"] {
  left: 4%;
}
[data-arcraft-position-horigental="5"] {
  left: 5%;
}
[data-arcraft-position-horigental="6"] {
  left: 6%;
}
[data-arcraft-position-horigental="7"] {
  left: 7%;
}
[data-arcraft-position-horigental="8"] {
  left: 8%;
}
[data-arcraft-position-horigental="9"] {
  left: 9%;
}
[data-arcraft-position-horigental="10"] {
  left: 10%;
}
[data-arcraft-position-horigental="11"] {
  left: 11%;
}
[data-arcraft-position-horigental="12"] {
  left: 12%;
}
[data-arcraft-position-horigental="13"] {
  left: 13%;
}
[data-arcraft-position-horigental="14"] {
  left: 14%;
}
[data-arcraft-position-horigental="15"] {
  left: 15%;
}
[data-arcraft-position-horigental="16"] {
  left: 16%;
}
[data-arcraft-position-horigental="17"] {
  left: 17%;
}
[data-arcraft-position-horigental="18"] {
  left: 18%;
}
[data-arcraft-position-horigental="19"] {
  left: 19%;
}
[data-arcraft-position-horigental="20"] {
  left: 20%;
}
[data-arcraft-position-horigental="21"] {
  left: 21%;
}
[data-arcraft-position-horigental="22"] {
  left: 22%;
}
[data-arcraft-position-horigental="23"] {
  left: 23%;
}
[data-arcraft-position-horigental="24"] {
  left: 24%;
}
[data-arcraft-position-horigental="25"] {
  left: 25%;
}
[data-arcraft-position-horigental="26"] {
  left: 26%;
}
[data-arcraft-position-horigental="27"] {
  left: 27%;
}
[data-arcraft-position-horigental="28"] {
  left: 28%;
}
[data-arcraft-position-horigental="29"] {
  left: 29%;
}
[data-arcraft-position-horigental="30"] {
  left: 30%;
}
[data-arcraft-position-horigental="31"] {
  left: 31%;
}
[data-arcraft-position-horigental="32"] {
  left: 32%;
}
[data-arcraft-position-horigental="33"] {
  left: 33%;
}
[data-arcraft-position-horigental="34"] {
  left: 34%;
}
[data-arcraft-position-horigental="35"] {
  left: 35%;
}
[data-arcraft-position-horigental="36"] {
  left: 36%;
}
[data-arcraft-position-horigental="37"] {
  left: 37%;
}
[data-arcraft-position-horigental="38"] {
  left: 38%;
}
[data-arcraft-position-horigental="39"] {
  left: 39%;
}
[data-arcraft-position-horigental="40"] {
  left: 40%;
}
[data-arcraft-position-horigental="41"] {
  left: 41%;
}
[data-arcraft-position-horigental="42"] {
  left: 42%;
}
[data-arcraft-position-horigental="43"] {
  left: 43%;
}
[data-arcraft-position-horigental="44"] {
  left: 44%;
}
[data-arcraft-position-horigental="45"] {
  left: 45%;
}
[data-arcraft-position-horigental="46"] {
  left: 46%;
}
[data-arcraft-position-horigental="47"] {
  left: 47%;
}
[data-arcraft-position-horigental="48"] {
  left: 48%;
}
[data-arcraft-position-horigental="49"] {
  left: 49%;
}
[data-arcraft-position-horigental="50"] {
  left: 50%;
}
[data-arcraft-position-horigental="51"] {
  left: 51%;
}
[data-arcraft-position-horigental="52"] {
  left: 52%;
}
[data-arcraft-position-horigental="53"] {
  left: 53%;
}
[data-arcraft-position-horigental="54"] {
  left: 54%;
}
[data-arcraft-position-horigental="55"] {
  left: 55%;
}
[data-arcraft-position-horigental="56"] {
  left: 56%;
}
[data-arcraft-position-horigental="57"] {
  left: 57%;
}
[data-arcraft-position-horigental="58"] {
  left: 58%;
}
[data-arcraft-position-horigental="59"] {
  left: 59%;
}
[data-arcraft-position-horigental="60"] {
  left: 60%;
}
[data-arcraft-position-horigental="61"] {
  left: 61%;
}
[data-arcraft-position-horigental="62"] {
  left: 62%;
}
[data-arcraft-position-horigental="63"] {
  left: 63%;
}
[data-arcraft-position-horigental="64"] {
  left: 64%;
}
[data-arcraft-position-horigental="65"] {
  left: 65%;
}
[data-arcraft-position-horigental="66"] {
  left: 66%;
}
[data-arcraft-position-horigental="67"] {
  left: 67%;
}
[data-arcraft-position-horigental="68"] {
  left: 68%;
}
[data-arcraft-position-horigental="69"] {
  left: 69%;
}
[data-arcraft-position-horigental="70"] {
  left: 70%;
}
[data-arcraft-position-horigental="71"] {
  left: 71%;
}
[data-arcraft-position-horigental="72"] {
  left: 72%;
}
[data-arcraft-position-horigental="73"] {
  left: 73%;
}
[data-arcraft-position-horigental="74"] {
  left: 74%;
}
[data-arcraft-position-horigental="75"] {
  left: 75%;
}
[data-arcraft-position-horigental="76"] {
  left: 76%;
}
[data-arcraft-position-horigental="77"] {
  left: 77%;
}
[data-arcraft-position-horigental="78"] {
  left: 78%;
}
[data-arcraft-position-horigental="79"] {
  left: 79%;
}
[data-arcraft-position-horigental="80"] {
  left: 80%;
}
[data-arcraft-position-horigental="81"] {
  left: 81%;
}
[data-arcraft-position-horigental="82"] {
  left: 82%;
}
[data-arcraft-position-horigental="83"] {
  left: 83%;
}
[data-arcraft-position-horigental="84"] {
  left: 84%;
}
[data-arcraft-position-horigental="85"] {
  left: 85%;
}
[data-arcraft-position-horigental="86"] {
  left: 86%;
}
[data-arcraft-position-horigental="87"] {
  left: 87%;
}
[data-arcraft-position-horigental="88"] {
  left: 88%;
}
[data-arcraft-position-horigental="89"] {
  left: 89%;
}
[data-arcraft-position-horigental="90"] {
  left: 90%;
}
[data-arcraft-position-horigental="91"] {
  left: 91%;
}
[data-arcraft-position-horigental="92"] {
  left: 92%;
}
[data-arcraft-position-horigental="93"] {
  left: 93%;
}
[data-arcraft-position-horigental="94"] {
  left: 94%;
}
[data-arcraft-position-horigental="95"] {
  left: 95%;
}
[data-arcraft-position-horigental="96"] {
  left: 96%;
}
[data-arcraft-position-horigental="97"] {
  left: 97%;
}
[data-arcraft-position-horigental="98"] {
  left: 98%;
}
[data-arcraft-position-horigental="99"] {
  left: 99%;
}
[data-arcraft-position-horigental="100"] {
  left: 100%;
}
/*----------------------------------------------
        text & bg-color class generate
------------------------------------------------*/
.arcraft-bg-primary-500 {
  background-color: var(--color-primary-500) !important;
}
.arcraft-text-white {
  color: var(--color-white) !important;
}
.arcraft-bg-black-2 {
  background-color: var(--color-black-2) !important;
}
.arcraft-text-heading {
  color: var(--color-heading) !important;
}
.arcraft-text-body {
  color: var(--color-body) !important;
}
.arcraft-text-gray-4 {
  color: var(--color-gray-4) !important;
}
/*----------------------------------------------
        border color class generate
------------------------------------------------*/
/*---------------------------------------------
        font weight class generate
----------------------------------------------*/
.arcraft-fw-light {
  font-weight: var(--f-light) !important;
}
.arcraft-fw-regular {
  font-weight: var(--f-regular) !important;
}
.arcraft-fw-medium {
  font-weight: var(--f-medium) !important;
}
.arcraft-fw-semibold {
  font-weight: var(--f-semibold) !important;
}
/*------------------------------------------
        gap class generate
--------------------------------------------*/
.arcraft-row-gap-10 {
  row-gap: 10px !important;
}
.arcraft-gap-20 {
  gap: 20px !important;
}
.arcraft-row-gap-25 {
  row-gap: 25px !important;
}
.arcraft-row-gap-30 {
  row-gap: 30px !important;
}
.arcraft-gap-40 {
  gap: 40px !important;
}
/*-----------------------------------------
        margin decrease class generate
------------------------------------------*/
/*------------------------------------------
        top class generate
--------------------------------------------*/
/*=========================
    Section Separation 
==========================*/
radius-smposition-to-top {
  position: relative;
  margin-top: -300px;
}
.arcraft-section-gap {
  padding: 120px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-section-gap {
    padding: 80px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-section-gap {
    padding: 60px 0;
  }
}
@media only screen and (max-width: 767px) {.arcraft-section-gap {
    padding: 40px 0;
  }
}
.arcraft-section-gap2 {
  padding: 100px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-section-gap2 {
    padding: 60px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-section-gap2 {
    padding: 50px 0;
  }
}
@media only screen and (max-width: 767px) {.arcraft-section-gap2 {
    padding: 40px 0;
  }
}
.arcraft-section-gapBottom {
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-section-gapBottom {
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-section-gapBottom {
    padding-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-section-gapBottom {
    padding-bottom: 40px;
  }
}
.arcraft-section-gap2Bottom {
  padding-bottom: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-section-gap2Bottom {
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-section-gap2Bottom {
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-section-gap2Bottom {
    padding-bottom: 40px;
  }
}
.arcraft-section-gapTop {
  padding-top: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-section-gapTop {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-section-gapTop {
    padding-top: 50px;
  }
}
/* .arcraft-section-gap2Top {
  padding-top: 100px;
} */
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-section-gap2Top {
    padding-top: 60px;
  }
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-section-gap2Top {
    padding-top: 50px;
  }
}
.ptb--0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.pt--0 {
  padding-top: 0px !important;
}
.pb--0 {
  padding-bottom: 0px !important;
}
.mb--0 {
  margin-bottom: 0px !important;
}
.pb--5 {
  padding-bottom: 5px !important;
}
.mb--10 {
  margin-bottom: 10px !important;
}
.pb--20 {
  padding-bottom: 20px !important;
}
.pr--20 {
  padding-right: 20px !important;
}
.mt--20 {
  margin-top: 20px !important;
}
.mb--20 {
  margin-bottom: 20px !important;
}
.mb--25 {
  margin-bottom: 25px !important;
}
.pt--30 {
  padding-top: 30px !important;
}
.mt--30 {
  margin-top: 30px !important;
}
.mb--30 {
  margin-bottom: 30px !important;
}
.pb--35 {
  padding-bottom: 35px !important;
}
.pt--40 {
  padding-top: 40px !important;
}
.pb--40 {
  padding-bottom: 40px !important;
}
.mt--40 {
  margin-top: 40px !important;
}
.mb--40 {
  margin-bottom: 40px !important;
}
.ml--40 {
  margin-left: 40px !important;
}
.pb--50 {
  padding-bottom: 50px !important;
}
.pl--50 {
  padding-left: 50px !important;
}
.pr--50 {
  padding-right: 50px !important;
}
.mb--50 {
  margin-bottom: 50px !important;
}
.pr--60 {
  padding-right: 60px !important;
}
.mb--60 {
  margin-bottom: 60px !important;
}
.ml--95 {
  margin-left: 95px !important;
}
.pt--150 {
  padding-top: 150px !important;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.ml_lg--0 {
    margin-left: 0px !important;
  }
.pl_lg--30 {
    padding-left: 30px !important;
  }
.pr_lg--30 {
    padding-right: 30px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.pr_md--0 {
    padding-right: 0px !important;
  }
.mb_md--15 {
    margin-bottom: 15px !important;
  }
.mb_md--25 {
    margin-bottom: 25px !important;
  }
.mt_md--30 {
    margin-top: 30px !important;
  }
.mb_md--40 {
    margin-bottom: 40px !important;
  }
}
@media only screen and (max-width: 767px) {.pr_sm--0 {
    padding-right: 0px !important;
  }
.ml_sm--0 {
    margin-left: 0px !important;
  }
.ptb_sm--5 {
    padding: 5px 0 !important;
  }
.plr_sm--10 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
.mb_sm--15 {
    margin-bottom: 15px !important;
  }
.pb_sm--20 {
    padding-bottom: 20px !important;
  }
.pl_sm--20 {
    padding-left: 20px !important;
  }
.pr_sm--20 {
    padding-right: 20px !important;
  }
.mb_sm--20 {
    margin-bottom: 20px !important;
  }
.mb_sm--25 {
    margin-bottom: 25px !important;
  }
.mt_sm--30 {
    margin-top: 30px !important;
  }
.mb_sm--30 {
    margin-bottom: 30px !important;
  }
.mt_sm--40 {
    margin-top: 40px !important;
  }
.mb_sm--40 {
    margin-bottom: 40px !important;
  }
.pt_sm--80 {
    padding-top: 80px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.ml_md--0 {
    margin-left: 0px !important;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {.ml_xl--0 {
    margin-left: 0px !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.ml_lg--0 {
    margin-left: 0px !important;
  }
}
@media only screen and (max-width: 575px) {.pl_mobile--5 {
    padding-left: 5px !important;
  }
.pr_mobile--30 {
    padding-right: 30px !important;
  }
}
/* ========= Forms Styles ========= */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
input,
select,
textarea {
  width: 100%;
  transition: 0.3s;
}
input {
  height: 40px;
  padding: 0 15px;
}
select {
  transition: 0.3s;
  height: 50px;
  display: inline-block;
  width: 100%;
  line-height: 135%;
  padding: 10px 20px;
  outline: none;
  color: var(--color-gray-6);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: var(--f-regular);
  padding-right: 30px;
}
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=tel],
input[type=date],
textarea {
  font-size: 16px;
  font-family: var(--font-primary);
  font-weight: var(--f-regular);
  height: 50px;
  line-height: 1.75;
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 0 15px;
  outline: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-body);
  /* -- Placeholder -- */
}
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=email]::placeholder,
input[type=number]::placeholder,
input[type=tel]::placeholder,
input[type=date]::placeholder,
textarea::placeholder {
  color: var(--color-body);
  /* Firefox */
  opacity: 1;
}
input[type=text]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=date]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--color-body);
  opacity: 1;
}
input[type=text]::-ms-input-placeholder,
input[type=password]::-ms-input-placeholder,
input[type=email]::-ms-input-placeholder,
input[type=number]::-ms-input-placeholder,
input[type=tel]::-ms-input-placeholder,
input[type=date]::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--color-body);
  opacity: 1;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=date]:focus,
textarea:focus {
  border-color: var(--color-primary);
}
input[type=checkbox],
input[type=radio] {
  opacity: 0;
  position: absolute;
}
input[type=checkbox] ~ label,
input[type=radio] ~ label {
  position: relative;
  font-size: 15px;
  line-height: 25px;
  color: var(--color-body);
  font-weight: 400;
  padding-left: 25px;
  cursor: pointer;
  margin-bottom: 0;
}
input[type=checkbox] ~ label::before,
input[type=radio] ~ label::before {
  content: " ";
  position: absolute;
  top: 5px;
  left: 0;
  width: 16px;
  height: 16px;
  border: var(--border-width-1) solid var(--color-gray);
  border-radius: 3px;
  transition: all 0.3s;
}
input[type=checkbox] ~ label::after,
input[type=radio] ~ label::after {
  content: " ";
  position: absolute;
  top: 9px;
  left: 3px;
  width: 10px;
  height: 5px;
  border-bottom: var(--border-width) solid var(--color-white);
  border-left: var(--border-width) solid var(--color-white);
  border-radius: 2px;
  transform: rotate(-45deg);
  opacity: 0;
  transition: all 0.3s;
}
input[type=checkbox]:checked ~ label::before,
input[type=radio]:checked ~ label::before {
  border-color: var(--color-primary);
}
input[type=checkbox]:checked ~ label::after,
input[type=radio]:checked ~ label::after {
  opacity: 1;
  border-color: var(--color-primary);
}
input[type=radio] ~ label::before {
  border-radius: 50%;
}
input[type=radio] ~ label::after {
  width: 8px;
  height: 8px;
  left: 4px;
  background: var(--color-primary);
  border-radius: 50%;
}
input[type=radio]:checked ~ label::before {
  border-color: var(--color-primary);
}
input[type=radio]:checked ~ label::after {
  opacity: 1;
  transform: none;
  border: none;
}
textarea {
  padding: 10px 15px;
  height: auto;
}
input[type=submit] {
  width: auto;
  letter-spacing: 2px;
  padding: 15px 20px;
  border-radius: 6px;
  display: block;
  font-weight: 500;
  transition: 0.3s;
  border: var(--border-width) solid var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
  height: 60px;
  margin-top: 30px;
}
input[type=submit]:hover {
  color: #ffffff;
  -webkit-box-shadow: 0 10px 15px 0 rgba(249, 0, 77, 0.1);
  box-shadow: 0 10px 15px 0 rgba(249, 0, 77, 0.1);
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}
input[disabled] {
  display: none;
}
/* For Image Radio  */
/*-------------------------
    Rbt Default
-------------------------*/
.sticky-top {
  top: 30px;
  z-index: 7;
}
/*-------------------------
    Rbt Round Btn
-------------------------*/
.arcraft-round-btn {
  width: 40px;
  height: 40px;
  line-height: 41px;
  text-align: center;
  border-radius: 100%;
  position: relative;
  z-index: 1;
  background: transparent;
  padding: 0;
  border: 0 none;
  display: block;
}
@media only screen and (max-width: 767px) {.arcraft-round-btn {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
}
.arcraft-round-btn i {
  margin-right: 0;
}
.arcraft-round-btn::after {
  background: var(--color-gray-light);
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: 0.4s;
  opacity: 0;
  transform: scale(0.8);
  border-radius: 100%;
  z-index: -1;
}
.arcraft-round-btn:hover, .arcraft-round-btn.open {
  color: var(--color-primary);
}
.arcraft-round-btn:hover::after, .arcraft-round-btn.open::after {
  opacity: 1;
  transform: scale(1);
}
/*------------------------------
    Rbt Hover Style
-------------------------------*/
/*------------------------------
    Rbt Theme Gradient
-------------------------------*/
/*------------------------------
    Rbt Slider Gutter
-------------------------------*/
/*------------------------------
    Rbt rating
-------------------------------*/
.rating a {
  display: inline-block;
}
.rating a i {
  color: var(--color-warning);
  font-style: normal;
}
/*------------------------------
    Rbt Shape Style
-------------------------------*/
/*-------------------------
    Card Author Meta 
-------------------------*/
/*-----------------------------
    Rbt Border Style  
------------------------------*/
.border-right-dot-1 {
  position: relative;
  border-right: 1px solid var(--color-primary);
}
.border-right-dot-1::before, .border-right-dot-1::after {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  right: -4px;
}
@media only screen and (max-width: 575px) {.border-right-dot-1::before, .border-right-dot-1::after {
    content: none;
  }
}
.border-right-dot-1::before {
  top: 0;
}
.border-right-dot-1::after {
  bottom: 0;
}
@media only screen and (max-width: 575px) {.border-right-sm-0 {
    border-right: 1px solid transparent;
  }
}
.arcraft-separator {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--color-primary-opacity-100);
}
.arcraft-separator-vertical {
  display: inline-block;
  min-height: 15px;
  height: 100%;
  width: 1px;
  background: var(--color-primary-opacity-100);
}
/*-----------------------------
    Rbt Border Radius  
-------------------------------*/
.arcraft-radius-10 {
  border-radius: 10px !important;
}
/*-----------------------------
    Rbt Background Image
--------------------------------*/
.arcraft-gradient-text-2 {
  background-image: linear-gradient(90deg, #91c2fe 0%, var(--color-purple) 50%, var(--color-secondary-alt-opacity-900) 100%);
  background-repeat: no-repeat;
  background-position: right center;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.arcraft-text-body-90 {
  color: rgba(from var(--color-body) r g b/0.9) !important;
}
.arcraft-radius-sm {
  border-radius: var(--radius-sm) !important;
}
.arcraft-radius-md {
  border-radius: var(--radius-md) !important;
}
.arcraft-scroll::-webkit-scrollbar {
  width: 10px;
  height: 4px;
}
.arcraft-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-3) !important;
  outline: 0;
  border-radius: 10px;
}
.arcraft-scroll::-webkit-scrollbar-track {
  background: var(--color-primary-200) !important;
  padding: 1px;
  border-radius: 8px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) {.wdt_lg--100 {
    width: 100%;
  }
}
/**************************************
    Header Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-mainmenu {
  margin: 0;
  padding: 0;
  display: flex;
}
.arcraft-mainmenu li {
  padding: 0;
  margin: 0;
}
.arcraft-mainmenu li.arcraft-has-megamenu svg,
.arcraft-mainmenu li.arcraft-has-megamenu i {
  position: relative;
}
.arcraft-mainmenu li.arcraft-has-megamenu svg.arcraft-dropdown-arrow {
  transition: var(--transition-6);
}
.arcraft-mainmenu li.arcraft-has-megamenu:hover svg.arcraft-dropdown-arrow {
  transform: rotate(180deg);
}
.arcraft-mainmenu li.arcraft-has-megamenu:hover > a {
  color: var(--color-primary);
}
.arcraft-mainmenu li > a {
  height: 70px;
  line-height: 70px;
  padding: 0 15px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {.arcraft-mainmenu li > a {
    padding: 0 12px;
  }
}
.arcraft-mainmenu li a {
  color: var(--color-gray);
  font-family: var(--font-primary);
  font-size: var(--font-size-b2);
  font-weight: var(--f-medium);
  display: flex;
  gap: 6px;
}
.arcraft-mainmenu li.has-dropdown .submenu {
  min-width: 300px;
  height: auto;
  z-index: 90;
  text-align: left;
  padding: 12px 0;
  border-radius: 12px;
  left: -50%;
  background-color: var(--color-white);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(230, 227, 241, 0.3098039216);
}
.arcraft-mainmenu li.has-dropdown .submenu li {
  position: relative;
}
.arcraft-mainmenu li.has-dropdown .submenu li a {
  font-weight: var(--f-medium);
  padding: 10px 20px;
  font-size: var(--font-size-b2);
  display: block;
  color: var(--color-body);
  margin: 0 10px;
  border-radius: var(--radius-sm);
  height: unset;
  line-height: 1.7;
  transition: var(--transition);
}
.arcraft-mainmenu li.has-dropdown .submenu li a i {
  transition: var(--transition);
  transform: rotate(88deg);
}
.arcraft-mainmenu li.has-dropdown .submenu li a:hover {
  color: var(--color-primary) !important;
  background: var(--color-secondary-shade);
}
.arcraft-mainmenu li.has-dropdown .submenu li a:hover i {
  transition: var(--transition);
  transform: rotate(0deg);
}
.arcraft-mainmenu li.has-dropdown .submenu li a.active {
  color: var(--color-primary) !important;
  background: var(--color-secondary-shade);
}
.arcraft-mainmenu li.has-dropdown .submenu li ul.submenu {
  left: 100%;
  top: 0;
  text-align: left;
}
.arcraft-mainmenu li.with-megamenu {
  position: relative;
}
.arcraft-mainmenu.arcraft-text-heading li a {
  color: var(--color-heading);
}
.arcraft-mainmenu.arcraft-text-heading li a:hover {
  color: var(--color-primary);
}
/* megamenu */
.arcraft-has-megamenu {
  position: static;
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
header {
  position: relative;
  z-index: 99;
}
header .arcraft-separator-vertical {
  min-height: 20px;
}
.arcraft-header-sticky {
  position: fixed;
  width: 100%;
  top: -70px;
  left: 0;
  padding: 0;
  box-shadow: var(--shadow-1);
  transition: var(--transition-5);
}
.arcraft-header-sticky.sticky {
  top: 0;
}
.arcraft-header-mainbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-header-mainbar {
    padding: 12px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-header-mainbar {
    padding: 12px 0;
  }
}
@media only screen and (max-width: 767px) {.arcraft-header-mainbar {
    padding: 8px 0;
  }
}
.arcraft-header-content {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 767px) {.arcraft-header-content .arcraft-header-info .arcraft-btn {
    box-shadow: none;
    padding: 12px 20px;
    height: 40px;
  }
}
.arcraft-header-content .arcraft-separator::after {
  height: 30px;
}
.arcraft-header-content > .arcraft-header-info {
  margin: 0 15px;
}
@media only screen and (min-width: 1600px) and (max-width: 1919px) {.arcraft-header-content > .arcraft-header-info {
    margin: 0 6px;
  }
}
.arcraft-header-content > .arcraft-header-info:first-child {
  margin-left: 0;
}
.arcraft-header-content > .arcraft-header-info:last-child {
  margin-right: 0;
}
@media only screen and (max-width: 767px) {.arcraft-header-content > .arcraft-header-info:last-child {
    margin-left: 0;
  }
}
@media only screen and (min-width: 1200px) {.arcraft-logo a {
    display: inline-block;
  }
}
.arcraft-hamberger .arcraft-hamberger-btn {
  border: none;
  outline: none;
  height: 44px;
  width: 44px;
  margin-left: 15px;
  background: transparent;
  border: var(--border-width) solid var(--color-border-3);
  border-radius: var(--radius-full);
}
.arcraft-hamberger .arcraft-hamberger-btn svg {
  stroke: var(--color-body);
  transition: var(--transition);
}
.arcraft-hamberger .arcraft-hamberger-btn:hover svg {
  stroke: var(--color-primary);
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/*-----------------------------------------
            count badge
-------------------------------------------*/
/* header background color */
/*-----------------------------------------
        mini cart
-------------------------------------------*/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/*------------------------------
    Popup Menu Styles  
--------------------------------*/
.popup-mobile-menu {
  z-index: 99;
  position: fixed;
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease-out;
}
@media only screen and (min-width: 1200px) {.popup-mobile-menu {
    display: none;
  }
}
.popup-mobile-menu .inner-wrapper {
  width: 400px;
  z-index: 12;
  position: absolute;
  background-color: var(--color-white);
  height: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  left: -150px;
  transition: all 0.5s ease-out;
  padding: 40px 50px;
  height: 100%;
  position: relative;
  overflow-y: auto;
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {.popup-mobile-menu .inner-wrapper {
    padding: 30px;
  }
}
@media only screen and (max-width: 575px) {.popup-mobile-menu .inner-wrapper {
    width: 300px;
    padding: 30px 20px;
  }
}
.popup-mobile-menu .inner-wrapper .inner-top {
  border-bottom: 1px solid var(--color-primary-opacity-50);
  padding-bottom: 25px;
  margin-bottom: 25px;
}
@media only screen and (max-width: 767px) {.popup-mobile-menu .inner-wrapper .inner-top {
    padding-bottom: 15px;
    margin-bottom: 0px;
  }
}
.popup-mobile-menu .inner-wrapper .inner-top .content {
  display: flex;
  justify-content: space-between;
}
.popup-mobile-menu .inner-wrapper .inner-top .logo a img {
  max-height: 45px;
}
.popup-mobile-menu .inner-wrapper .inner-top .close-button {
  background: var(--color-white);
  border: 0 none;
  color: var(--color-heading);
  width: 40px;
  height: 40px;
  font-size: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}
.popup-mobile-menu .inner-wrapper .content {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 767px) {.popup-mobile-menu .inner-wrapper .content {
    display: block;
  }
}
.popup-mobile-menu .inner-wrapper .description {
  padding-right: 18%;
  margin-top: 20px;
}
@media only screen and (max-width: 767px) {.popup-mobile-menu .inner-wrapper .description {
    padding-right: 0;
  }
}
.popup-mobile-menu.active {
  visibility: visible;
  opacity: 1;
}
.popup-mobile-menu.active .inner-wrapper {
  opacity: 1;
  left: 0;
  overflow-y: auto;
}
.popup-mobile-menu .mainmenu {
  list-style: none;
  padding: 0;
  margin: 0;
  padding: 15px 0px;
}
.popup-mobile-menu .mainmenu li {
  margin: 0;
}
.popup-mobile-menu .mainmenu li a {
  padding: 8px 0;
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-heading);
}
.popup-mobile-menu .mainmenu li a.active {
  color: var(--color-primary) !important;
}
.popup-mobile-menu .mainmenu li a.open {
  color: var(--color-primary) !important;
}
.popup-mobile-menu .mainmenu li a i {
  display: none;
}
.popup-mobile-menu .mainmenu li + li {
  border-top: 1px solid var(--color-primary-opacity-100);
}
.popup-mobile-menu .mainmenu .has-dropdown .submenu {
  padding: 0;
  max-width: 100%;
  list-style: none;
  padding-left: 14px;
  display: none;
}
.popup-mobile-menu .mainmenu .has-dropdown .submenu li a {
  font-size: 15px;
}
.popup-mobile-menu .mainmenu .has-dropdown .submenu li a.active {
  color: var(--color-primary) !important;
}
.popup-mobile-menu .mainmenu .has-menu-child-item > a,
.popup-mobile-menu .mainmenu .has-dropdown > a {
  position: relative;
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
  color: var(--color-heading);
}
.popup-mobile-menu .mainmenu .has-menu-child-item > a::after,
.popup-mobile-menu .mainmenu .has-dropdown > a::after {
  position: absolute;
  content: "+";
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.4s;
}
.popup-mobile-menu .mainmenu .has-menu-child-item > a.open::after,
.popup-mobile-menu .mainmenu .has-dropdown > a.open::after {
  content: "\f068";
}
.popup-mobile-menu .mainmenu .has-menu-child-item > a .arcraft-dropdown-arrow,
.popup-mobile-menu .mainmenu .has-dropdown > a .arcraft-dropdown-arrow {
  transition: var(--transition-5);
}
.popup-mobile-menu .mainmenu .has-menu-child-item > a.open .arcraft-dropdown-arrow,
.popup-mobile-menu .mainmenu .has-dropdown > a.open .arcraft-dropdown-arrow {
  rotate: 180deg;
}
.popup-mobile-menu .mainmenu .arcraft-mobile-megamenu {
  padding: 0;
  max-width: 100%;
  list-style: none;
  padding-left: 14px;
  display: none;
}
.popup-mobile-menu .arcraft-btn i {
  display: block !important;
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/**************************************
    Elements Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-section-title {
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-section-title {
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-section-title {
    margin-bottom: 25px;
  }
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/*---------- button group----------*/
/*---------- button variation----------*/
.arcraft-btn {
  cursor: pointer;
  color: var(--color-white);
  text-shadow: var(--text-shadow-2);
  font-family: var(--font-primary);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  letter-spacing: var(--letter-spacing-b3);
  font-weight: var(--f-semibold);
  display: inline-flex;
  gap: 10px;
  height: 60px;
  padding: 16px 40px;
  justify-content: center;
  align-items: center;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  border: none;
  position: relative;
  white-space: nowrap;
  transition: var(--transition-1);
}
.arcraft-btn:hover {
  transform: translateY(-2px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-btn {
    height: 55px;
    padding: 16px 32px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-btn {
    height: 50px;
    padding: 16px 28px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-btn {
    height: 45px;
    padding: 14px 24px;
    font-size: var(--font-size-b2);
  }
}

.arcraft-btn.arcraft-btn-gradient {
  background-image: radial-gradient(83.54% 74.04% at 37.13% 12%, var(--color-white-opacity-400) 0%, var(--color-primary-opacity-0) 69.79%, var(--color-primary-opacity-0) 100%), linear-gradient(var(--color-primary), var(--color-primary));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: -3px -4px 7px 0px var(--color-white-opacity-100) inset, 0px 10px 40.6px 0px var(--color-primary-opacity-300);
}

.arcraft-btn.arcraft-btn-split .inner {
  position: relative;
  overflow: hidden;
  padding: 0;
  line-height: 1;
}
.arcraft-btn.arcraft-btn-split .inner .default-text {
  display: inline-block;
  transition: var(--transition-5);
}
.arcraft-btn.arcraft-btn-split .inner .hover-text {
  transform: translateY(300%) rotate(20deg);
  position: absolute;
  left: 0;
  transition: var(--transition-5);
  bottom: -5px;
}
.arcraft-btn.arcraft-btn-split:hover {
  transform: translateY(0px);
}
.arcraft-btn.arcraft-btn-split:hover .default-text {
  transform: translateY(-210%) rotate(10deg);
}
.arcraft-btn.arcraft-btn-split:hover .hover-text {
  transform: translateY(0) rotate(0);
  bottom: 0;
}
.arcraft-btn.arcraft-btn-split-2 .inner {
  overflow: hidden;
  transition: var(--transition-6);
  height: 100%;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.arcraft-btn.arcraft-btn-split-2 .inner .default-text,
.arcraft-btn.arcraft-btn-split-2 .inner .hover-text {
  position: relative;
  display: block;
  perspective: 108px;
}
.arcraft-btn.arcraft-btn-split-2 .inner .default-text span,
.arcraft-btn.arcraft-btn-split-2 .inner .hover-text span {
  display: inline-block;
  transition: var(--transition-6);
}
.arcraft-btn.arcraft-btn-split-2 .inner .default-text span {
  transform-origin: top;
}
.arcraft-btn.arcraft-btn-split-2 .inner .hover-text {
  position: absolute;
}
.arcraft-btn.arcraft-btn-split-2 .inner .hover-text span {
  opacity: 0;
  transform: rotateX(-90deg) scaleX(0.9) translate3d(0, 10px, 0);
  transform-origin: bottom;
}
.arcraft-btn.arcraft-btn-split-2:hover {
  transform: translateY(0px);
}
.arcraft-btn.arcraft-btn-split-2:hover .default-text span {
  opacity: 0;
  transform: rotateX(90deg) scaleX(0.9) translate3d(0, -10px, 0);
}
.arcraft-btn.arcraft-btn-split-2:hover .hover-text span {
  opacity: 1;
  transform: rotateX(0deg) scaleX(1) translateZ(0);
  transition: var(--transition-6);
}

.arcraft-btn.btn-gradient-text {
  background: linear-gradient(90deg, var(--color-primary-opacity-900) 0%, var(--color-secondary-alt-opacity-900) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  height: fit-content;
  padding: 0;
  border-radius: 0;
  padding-inline-end: 20px;
  overflow: hidden;
  font-size: var(--font-size-b2);
  font-weight: var(--f-medium);
  line-height: normal;
}
.arcraft-btn.btn-gradient-text .btn-icon {
  position: absolute;
  transition: var(--transition-6);
}
.arcraft-btn.btn-gradient-text .default-text {
  display: inline-block;
  transition: var(--transition-6);
  background: inherit;
  background-clip: inherit;
  -webkit-background-clip: inherit;
  -webkit-text-fill-color: inherit;
}
.arcraft-btn.btn-gradient-text .hover-text {
  transform: translateY(160%) rotate(8deg);
  position: absolute;
  left: 0;
  transition: var(--transition-6);
  background: inherit;
  background-clip: inherit;
  -webkit-background-clip: inherit;
  -webkit-text-fill-color: inherit;
}
.arcraft-btn.btn-gradient-text:hover {
  transform: none;
}
.arcraft-btn.btn-gradient-text:hover .default-text {
  transform: translateY(-160%) rotate(8deg);
}
.arcraft-btn.btn-gradient-text:hover .hover-text {
  transform: translateY(0) rotate(0);
  font-weight: var(--f-bold);
}

.arcraft-btn.arcraft-btn-outline {
  background: transparent;
  border: var(--border-width) solid var(--color-primary-opacity-100);
  color: var(--color-body);
  text-shadow: none;
  transition: var(--transition-1);
}
.arcraft-btn.arcraft-btn-outline::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: radial-gradient(83.54% 74.04% at 37.13% 12%, var(--color-white-opacity-400) 0%, var(--color-primary-opacity-0) 69.79%, var(--color-primary-opacity-0) 100%), linear-gradient(var(--color-primary), var(--color-primary));
  box-shadow: -3px -4px 7px 0px var(--color-white-opacity-100) inset, 0px 10px 40.6px 0px var(--color-primary-opacity-300);
  border-radius: var(--radius-md);
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-1);
}
.arcraft-btn.arcraft-btn-outline:hover {
  color: var(--color-white);
}
.arcraft-btn.arcraft-btn-outline:hover::after {
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  opacity: 1;
  visibility: visible;
}
.arcraft-btn.arcraft-btn-outline .hover-text {
  color: var(--color-white);
}

.arcraft-btn.arcraft-btn-rounded {
  border-radius: 100px;
}
.arcraft-btn.arcraft-btn-rounded::after, .arcraft-btn.arcraft-btn-rounded:before {
  border-radius: 100px;
}

.arcraft-btn.arcraft-btn-sm {
  height: 45px;
  padding: 14px 24px;
  font-size: var(--font-size-b4);
  line-height: normal;
  letter-spacing: normal;
}
.arcraft-btn.arcraft-btn-lg {
  height: 60px;
  padding: 16px 40px;
  font-size: var(--font-size-b1);
  letter-spacing: var(--letter-spacing-b1);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-btn.arcraft-btn-lg {
    height: 50px;
    padding: 16px 28px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-btn.arcraft-btn-lg {
    height: 45px;
    padding: 8px 24px;
  }
}
.arcraft-hover-underline {
  position: relative;
}
.arcraft-hover-underline::after {
  position: absolute;
  content: "";
  left: auto;
  bottom: 0;
  background: currentColor;
  width: 0;
  height: 2px;
  transition: 0.3s;
  right: 0;
}
.arcraft-hover-underline:hover::after {
  width: 100%;
  left: 0;
  right: auto;
}
/*---------- button Circle ----------*/
/*---------- button Shape ----------*/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-progress-chart-2 {
  max-width: 552px;
  width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-progress-chart-2 {
    margin: 0 auto;
  }
}
.arcraft-progress-chart-2 .circles {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  margin-bottom: 28px;
}
.arcraft-progress-chart-2 .circles .circle {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  color: var(--color-white);
  font-weight: bold;
  font-size: 16px;
}
.arcraft-progress-chart-2 .circles .circle-3 {
  width: 549px;
  aspect-ratio: 2/1;
  border-top-left-radius: 274px;
  border-top-right-radius: 274px;
  position: relative;
  left: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {.arcraft-progress-chart-2 .circles .circle-3 {
    width: 420px;
    border-top-left-radius: 220px;
    border-top-right-radius: 220px;
  }
}
@media only screen and (max-width: 575px) {.arcraft-progress-chart-2 .circles .circle-3 {
    width: 260px;
  }
}
.arcraft-progress-chart-2 .circles .circle-3::after {
  position: absolute;
  content: "";
  left: 0;
  background: #A2AFF8;
  width: 549px;
  aspect-ratio: 2/1;
  border-top-left-radius: 274px;
  border-top-right-radius: 274px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {.arcraft-progress-chart-2 .circles .circle-3::after {
    width: 420px;
    border-top-left-radius: 220px;
    border-top-right-radius: 220px;
  }
}
@media only screen and (max-width: 575px) {.arcraft-progress-chart-2 .circles .circle-3::after {
    width: 260px;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 1919px), only screen and (min-width: 1200px) and (max-width: 1599px) {.arcraft-progress-chart-2 .circles .circle-3 span {
    right: -20px !important;
  }
}
.arcraft-progress-chart-2 .circles .circle span {
  position: absolute;
  bottom: 0;
  left: unset;
  right: 0;
  transform: translateX(-50%);
  font-size: 40px;
  font-weight: 500;
  line-height: 0.8;
  z-index: 5;
}
@media only screen and (max-width: 575px) {.arcraft-progress-chart-2 .circles .circle span {
    font-size: 18px !important;
  }
}
@media only screen and (max-width: 767px) {.arcraft-progress-chart-2 .circles .circle span {
    font-size: 32px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {.arcraft-progress-chart-2 .circles .circle span {
    font-size: 30px;
  }
}
.arcraft-progress-chart-2 {
  max-width: unset;
  position: relative;
}
.arcraft-progress-chart-2 .circles .circle-3 {
  width: 900px;
  height: 450px;
  border-top-left-radius: 900px;
  border-top-right-radius: 900px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-progress-chart-2 .circles .circle-3 {
    width: 800px;
    height: 400px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-progress-chart-2 .circles .circle-3 {
    width: 700px;
    height: 350px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-progress-chart-2 .circles .circle-3 {
    width: 500px;
    height: 250px;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
@media only screen and (max-width: 575px) {.arcraft-progress-chart-2 .circles .circle-3 {
    width: 320px;
    height: 320px;
    transform: none;
    left: unset;
  }
}
.arcraft-progress-chart-2 .circles .circle-3::after {
  background: linear-gradient(180deg, rgba(81, 99, 255, 0.26) 0%, rgba(81, 99, 255, 0) 52.43%);
  width: 900px;
  height: 450px;
  border-top-left-radius: 900px;
  border-top-right-radius: 900px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-progress-chart-2 .circles .circle-3::after {
    width: 800px;
    height: 400px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-progress-chart-2 .circles .circle-3::after {
    width: 700px;
    height: 350px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-progress-chart-2 .circles .circle-3::after {
    width: 500px;
    height: 250px;
  }
}
@media only screen and (max-width: 575px) {.arcraft-progress-chart-2 .circles .circle-3::after {
    width: 320px;
    height: 320px;
    left: unset;
  }
}
.arcraft-progress-chart-2 .circles .circle-3::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 50px;
  background: var(--color-white);
  z-index: 12;
  filter: blur(30px);
  bottom: 0;
}
.arcraft-progress-chart-2 .arch-container {
  position: absolute;
  width: 900px;
  height: 900px;
  margin: 20px auto;
  border-radius: 900px;
  z-index: 1;
  left: 0;
  top: -70px;
  animation: rotation 40s linear infinite;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-progress-chart-2 .arch-container {
    width: 800px;
    height: 800px;
    border-radius: 800px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-progress-chart-2 .arch-container {
    width: 700px;
    height: 700px;
    border-radius: 700px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-progress-chart-2 .arch-container {
    width: 500px;
    height: 500px;
    border-radius: 500px;
  }
}
@media only screen and (max-width: 575px) {.arcraft-progress-chart-2 .arch-container {
    width: 320px;
    height: 320px;
    border-radius: 320px;
    display: none;
  }
}
.arcraft-progress-chart-2 .arch-icon {
  position: absolute;
  width: 85px;
  height: 85px;
  background: var(--color-white);
  border: 1px solid rgba(81, 99, 255, 0.1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rotation 40s linear infinite reverse;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-progress-chart-2 .arch-icon {
    width: 65px;
    height: 65px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-progress-chart-2 .arch-icon {
    width: 50px;
    height: 50px;
  }
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-default-tab > ul {
  border: none;
  margin-bottom: 0;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 5px 0;
  padding-bottom: 30px;
}
.arcraft-default-tab > ul::-webkit-scrollbar {
  display: none;
}
.arcraft-default-tab > ul li {
  margin: 0;
}
.arcraft-default-tab .arcraft-tab-btn {
  color: var(--color-body);
  font-family: var(--font-primary);
  font-size: var(--font-size-b2);
  font-weight: var(--f-semibold);
  line-height: var(--line-height-b4);
  padding: 12px 17px;
  white-space: nowrap;
  border-radius: var(--radius-lg) !important;
  transition: var(--transition-1);
  border: none;
  position: relative;
  z-index: 1;
}
.arcraft-default-tab .arcraft-tab-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(83.54% 74.04% at 37.13% 12%, rgba(255, 255, 255, 0.31) 0%, rgba(255, 255, 255, 0) 55.41%, rgba(255, 255, 255, 0) 100%), #4C5DEF;
  box-shadow: -3px -4px 7px 0px var(--color-white-opacity-200) inset, 4px 10px 20px 0px var(--color-primary-opacity-300);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  z-index: -1;
  scale: 0.2;
  opacity: 0;
  transition: 0.3s;
}
.arcraft-default-tab .arcraft-tab-btn.active {
  color: var(--color-white);
  background: none;
}
.arcraft-default-tab .arcraft-tab-btn.active::before {
  opacity: 1;
  scale: 1;
  box-shadow: none;
}
.arcraft-default-tab .arcraft-tab-btn.active:hover {
  background-size: 150% 100%;
}
.arcraft-default-tab .arcraft-tab-btn:not(.active):hover {
  color: var(--color-primary);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-default-tab .tab-content {
    padding: 0 20px;
  }
}
/*----------------------
VenoBox Video Styles  
-----------------------*/
/*----------------------
Elastic tab effect 
-----------------------*/
.arcraft-nav-effect-activation {
  position: relative;
}
.arcraft-nav-effect-activation .arcraft-bg-highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--color-primary);
  border-radius: 8px;
  transition: var(--transition-1);
  transition: width 0.3s, left 0.3s;
  z-index: 0;
  border-radius: var(--radius-lg);
}
.arcraft-nav-effect-activation .arcraft-bg-highlight.arcraft-bg-gradient {
  background-image: radial-gradient(83.54% 74.04% at 37.13% 12%, var(--color-white-opacity-400) 0%, var(--color-primary-opacity-0) 69.79%, var(--color-primary-opacity-0) 100%), linear-gradient(var(--color-primary), var(--color-primary));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: -3px -4px 7px 0px var(--color-white-opacity-200) inset, 4px 10px 20px 0px var(--color-primary-opacity-300);
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-nav-effect-activation .arcraft-bg-highlight {
    display: none;
  }
}
/*---------------------------------
tab content changing animation
-----------------------------------*/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-list {
  padding: 0;
  margin: 0;
  margin-left: 5px;
}
.arcraft-list li {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: center;
  padding-left: 26px;
  color: var(--color-body);
  font-family: var(--font-primary);
  font-size: var(--font-size-b1);
  font-weight: var(--f-light);
  line-height: var(--line-height-b1);
  margin: 0 0 15px -10px;
  overflow: hidden;
}
.arcraft-list li:last-child {
  margin: 0 0 0 -10px;
}
.arcraft-list li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: rgba(from var(--color-gray-2) r g b/0.8);
  border-radius: var(--radius-full);
  position: absolute;
  top: 12px;
  transform: translateX(-15px) translateY(0);
  transition: var(--transition-1);
}
.arcraft-list.is-gradient-hover a {
  color: rgba(from var(--color-white) r g b/0.9);
  padding-left: 0px !important;
  transition: var(--transition-6);
}
.arcraft-list.is-gradient-hover a:hover {
  background: linear-gradient(101deg, var(--color-primary-opacity-900) 0%, var(--color-secondary-alt-opacity-900) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-left: 20px !important;
  transition: var(--transition-6);
}
.arcraft-list.is-gradient-hover a:hover i,
.arcraft-list.is-gradient-hover a:hover svg {
  color: var(--color-primary);
  transform: translateY(-13px) translateX(4px);
  opacity: 1;
}
.arcraft-list.arcraft-list-3 li {
  display: flex;
  gap: 16px;
  align-items: start;
  margin-left: 0;
  padding-left: 0;
}
.arcraft-list.arcraft-list-3 li::before {
  display: none;
}
.arcraft-list.arcraft-list-3 li img {
  width: 20px;
  height: 20px;
  margin-top: 8px;
}
.arcraft-list.arcraft-list-has-left-icon li {
  padding-left: 0;
  width: fit-content;
}
.arcraft-list.arcraft-list-has-left-icon li::before {
  transform: translateX(6px) translateY(0);
}
.arcraft-list.arcraft-list-has-left-icon li i,
.arcraft-list.arcraft-list-has-left-icon li svg {
  position: absolute;
  top: 23px;
  left: -1%;
  transform: translateY(0) translateX(-6px);
  transition: var(--transition-1);
  opacity: 0;
}
.arcraft-list.arcraft-list-has-left-icon li:hover::before {
  transform: translateX(14px) translateY(-8px);
  opacity: 0;
}
.arcraft-list.arcraft-list-has-left-icon li:hover a {
  color: var(--color-primary);
}
.arcraft-list.arcraft-list-has-left-icon li:hover a i,
.arcraft-list.arcraft-list-has-left-icon li:hover a svg {
  color: var(--color-primary);
  transform: translateY(-13px) translateX(4px);
  opacity: 1;
}
.arcraft-list.arcraft-list-has-left-icon li a {
  color: var(--color-body);
  padding-left: 20px;
}
.arcraft-list.arcraft-list-has-left-icon li a:hover {
  color: var(--color-primary);
}
.arcraft-list.arcraft-list-has-left-icon li a:hover i,
.arcraft-list.arcraft-list-has-left-icon li a:hover svg {
  color: var(--color-primary);
  transform: translateY(-13px) translateX(4px);
  opacity: 1;
}
.arcraft-list.arcraft-list-marker-none li::before {
  content: none;
}
.arcraft-list.arcraft-list-marker-none li a {
  padding-left: 0;
  transition: var(--transition-1);
  color: rgba(from var(--color-white) r g b/0.9);
}
.arcraft-list.arcraft-list-marker-none.arcraft-list-has-left-icon li i,
.arcraft-list.arcraft-list-marker-none.arcraft-list-has-left-icon li svg {
  position: absolute;
  left: 6px;
  top: 16px;
  transform: translateY(10%) translateX(-17px);
  transition: var(--transition-1);
  opacity: 0;
}
.arcraft-list.arcraft-list-marker-none.arcraft-list-has-left-icon li a:hover {
  padding-left: 26px;
  color: var(--color-primary);
}
.arcraft-list.arcraft-list-marker-none.arcraft-list-has-left-icon li a:hover i,
.arcraft-list.arcraft-list-marker-none.arcraft-list-has-left-icon li a:hover svg {
  color: var(--color-primary);
  transform: translateY(-65%) translateX(0px);
  opacity: 1;
}
.arcraft-list.has-transparent-text li > *:hover {
  background: linear-gradient(102deg, var(--color-primary) -0.32%, var(--color-secondary-alt) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.arcraft-list.arcraft-list-gripped li {
  margin: 0 0 12px 0;
}
.arcraft-list.arcraft-list-gripped li:last-child {
  margin-bottom: 0;
}
.arcraft-list.list-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
@media only screen and (max-width: 767px) {.arcraft-list.list-row {
    flex-direction: column;
    align-items: start;
  }
}
.arcraft-list.list-row li {
  margin-bottom: 0;
  padding-left: 24px;
  color: inherit;
}
.arcraft-list.list-row li:first-child {
  padding-left: 0;
}
@media only screen and (max-width: 767px) {.arcraft-list.list-row li:first-child {
    padding-left: 24px;
  }
}
.arcraft-list.list-row li:first-child::before {
  content: none;
}
@media only screen and (max-width: 767px) {.arcraft-list.list-row li:first-child::before {
    content: "";
  }
}
.arcraft-list.list-row li a {
  color: inherit;
}
.arcraft-list.arcraft-list-bg-dark {
  color: var(--color-gray-4);
}
.arcraft-list.arcraft-list-bg-dark li a:hover {
  color: var(--color-white);
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.scroll-animation-wrapper {
  position: relative;
  z-index: 1;
}
.scroll-animation-wrapper::before, .scroll-animation-wrapper::after {
  position: absolute;
  height: 100%;
  width: 100px;
  background: -webkit-gradient(linear, left top, right top, from(#fff), to(hsla(0, 0%, 100%, 0)));
  background: -webkit-linear-gradient(left, #fff, hsla(0, 0%, 100%, 0));
  background: -moz-linear-gradient(left, #fff 0, hsla(0, 0%, 100%, 0) 100%);
  background: linear-gradient(90deg, #fff 0, hsla(0, 0%, 100%, 0));
  z-index: 2;
  content: "";
}
@media only screen and (max-width: 767px) {.scroll-animation-wrapper::before, .scroll-animation-wrapper::after {
    width: 50px;
  }
}
.scroll-animation-wrapper::before {
  top: 0;
  left: 0;
}
.scroll-animation-wrapper::after {
  top: 0;
  right: 0;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.scroll-animation {
  display: flex;
  gap: 20px;
  width: -webkit-calc((420px * 16) + (30px * 16));
  width: -moz-calc((420px * 16) + (30px * 16));
  width: 7200px;
  position: relative;
}
.scroll-animation.scroll-right-left {
  -webkit-animation: scroll 80s linear infinite;
  -moz-animation: scroll 80s linear infinite;
  animation: scroll 80s linear infinite;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
/* rotate animation */

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-2200px);
    -moz-transform: translateX(-2200px);
    transform: translateX(-2200px);
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 12px;
  align-items: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-social {
    gap: 8px;
  }
}
.arcraft-social li {
  margin: 0;
  padding: 0;
}
.arcraft-social li a {
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  background: rgba(from var(--color-white) r g b/0.1);
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-social li a {
    height: 35px;
    width: 35px;
  }
}
.arcraft-social li a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0.8);
  background: linear-gradient(90deg, var(--color-primary-alt) 0%, var(--color-secondary-alt-opacity-900) 100%);
  border-radius: var(--radius-sm);
  z-index: -1;
  opacity: 0;
  transition: var(--transition-6);
}
.arcraft-social li a:hover {
  color: var(--color-white);
}
.arcraft-social li a:hover::after {
  opacity: 1;
  transform: scale(1);
}
.arcraft-social.arcraft-social-secondary-shade li a {
  background: var(--color-secondary-shade);
  color: var(--color-body);
}
.arcraft-social.arcraft-social-secondary-shade li a:hover {
  color: var(--color-white);
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/

/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-badge {
  border-radius: var(--radius-48);
  background: linear-gradient(90deg, var(--color-primary-opacity-50) 0%, var(--color-secondary-alt-opacity-100) 100%);
  box-shadow: 0px -2px 4px 0px var(--color-secondary-alt-opacity-200) inset, 0px -4px 4px 0px var(--color-primary-opacity-200) inset;
  display: inline-flex;
  align-items: center;
  padding: 8px 22px;
  max-width: fit-content;
  gap: 10px;
  margin-bottom: 30px;
  color: var(--color-gray-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {.arcraft-badge {
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-badge {
    padding: 4px 14px;
    margin-bottom: 10px;
    gap: 5px;
  }
}
.arcraft-badge.arcraft-badge-2 {
  background: linear-gradient(90deg, var(--color-primary-alt) 0%, var(--color-secondary-alt) 100%);
  box-shadow: 0px -2px 4px 0px var(--color-primary-opacity-0) inset, 0px -4px 18.5px 0px var(--color-white-opacity-800) inset;
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: var(--font-size-b4);
  font-weight: var(--f-medium);
  line-height: 1.73;
  letter-spacing: -0.15px;
}
.arcraft-badge.arcraft-badge-4 {
  background: transparent;
  color: var(--color-white);
  position: relative;
  z-index: 1;
}
.arcraft-badge.arcraft-badge-4::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(102deg, var(--color-primary) -0.32%, var(--color-secondary-alt) 100%);
  border-radius: inherit;
  z-index: -1;
}
.arcraft-badge.arcraft-badge-md {
  padding: 10px 18px;
  font-size: var(--font-size-b4);
  line-height: 1;
}
.arcraft-badge svg {
  max-width: 20px;
  max-height: 24px;
}
@media only screen and (max-width: 767px) {.arcraft-badge svg {
    max-height: 20px;
  }
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.swiper .swiper-slide {
  width: fit-content;
}
.arcraft-swiper-pagination {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.swiper-scrollbar {
  background: var(--color-border-6);
  position: static !important;
}
.swiper-scrollbar-drag {
  background: linear-gradient(90deg, var(--color-primary-alt) 0%, var(--color-secondary-alt-opacity-900) 100%);
}
.arcraft-swiper-activation-7 .swiper-wrapper {
  padding: 5px 0 40px;
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-swiper-activation-7 .swiper-wrapper {
    padding: 5px 0 0px;
  }
}
.arcraft-swiper-activation-7 .swiper-scrollbar {
  width: -webkit-fill-available;
}
.arcraft-swiper-activation-7 .swiper-scrollbar.swiper-scrollbar-horizontal {
  height: 6px;
}
.arcraft-swiper-activation-7 .swiper-scrollbar-drag {
  height: 4px;
  margin-top: 1px;
}
.marquee-swiper,
.marquee-swiper-reverse {
  max-width: 2180px;
  width: 100%;
  overflow: hidden;
}
.marquee-swiper .swiper-wrapper,
.marquee-swiper-reverse .swiper-wrapper {
  transition-timing-function: linear;
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-curved-notch-md {
  min-height: 55px;
  min-width: 200px;
  border-radius: 40px 40px 0 0;
  background: var(--color-white);
  position: absolute;
  z-index: 4;
}
.arcraft-curved-notch-md::before,
.arcraft-curved-notch-md::after {
  content: "";
  display: inline-block;
  height: 55px;
  width: 55px;
  -webkit-border-radius: 0;
  border-radius: 0;
  box-shadow: 0 20px 0 0 var(--color-white);
  position: absolute;
}
.arcraft-curved-notch-md::before {
  border-bottom-right-radius: 30px;
  bottom: 0;
  left: -54px;
}
.arcraft-curved-notch-md::after {
  border-bottom-left-radius: 30px;
  bottom: 0;
  right: -54px;
}
.arcraft-curved-notch-md.bottom-center {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.arcraft-curved-notch-md {
  min-height: 70px;
  min-width: 280px;
}
@media only screen and (max-width: 767px) {.arcraft-curved-notch-md {
    min-height: 55px;
    min-width: 200px;
  }
}
.arcraft-curved-notch-md::before, .arcraft-curved-notch-md::after {
  height: 55px;
  width: 55px;
}
.arcraft-curved-notch-md::before {
  bottom: 5px !important;
  left: -55px !important;
  transform: rotate(-16deg);
}
@media only screen and (max-width: 767px) {.arcraft-curved-notch-md::before {
    bottom: 0px !important;
    left: -52px !important;
    transform: rotate(0);
  }
}
.arcraft-curved-notch-md::after {
  bottom: 5px !important;
  right: -55px !important;
  transform: rotate(16deg);
}
@media only screen and (max-width: 767px) {.arcraft-curved-notch-md::after {
    bottom: 0px !important;
    right: -52px !important;
    transform: rotate(0);
  }
}
.arcraft-shape-left {
  position: absolute;
  top: calc(50% - 30px);
  left: 0;
  transform: translateY(-50%);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-shape-left {
    left: -4px;
  }
.arcraft-shape-left svg {
    height: 350px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-shape-left {
    top: 50%;
  }
}
.arcraft-shape-right {
  position: absolute;
  top: 5%;
  right: 0;
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-section-bg-17 {
  background: var(--color-white);
  box-shadow: 0px 20px 46px 0px var(--color-primary-300) inset, 2.25px -7px 44px 0px var(--color-primary-300) inset;
  position: relative;
}
.arcraft-section-bg-17::after {
  content: "";
  position: absolute;
  width: 208px;
  height: 36px;
  background: var(--color-secondary);
  opacity: 0.4;
  top: 35%;
  left: 7%;
  filter: blur(85px);
}
.arcraft-section-bg-25 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin: 0 8px;
  border-radius: 20px;
  padding: 60px 0 10px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-section-bg-25 {
    padding: 80px 30px 120px 30px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-section-bg-25 {
    padding: 60px 0 90px 0;
  }
}
.arcraft-section-bg-28 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.arcraft-watermark {
  font-size: 200px;
  font-weight: var(--f-bold);
  background: linear-gradient(180deg, rgba(from var(--color-primary) r g b/0.08) 8.26%, rgba(254, 113, 185, 0) 80.17%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  line-height: 0.85;
  z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {.arcraft-watermark {
    font-size: 170px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-watermark {
    font-size: 140px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-watermark {
    font-size: 100px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-watermark {
    font-size: 48px;
    top: -25px;
  }
}
.arcraft-round-blur-shape {
  width: fit-content;
  position: absolute;
  z-index: -3;
}
.arcraft-round-blur-shape .blur-shape-inner {
  height: 500px;
  width: 510px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(40px);
  border-radius: 50%;
  position: relative;
  z-index: 4;
}
@media only screen and (max-width: 575px) {.arcraft-round-blur-shape .blur-shape-inner {
    max-width: 320px;
  }
}
.arcraft-round-blur-shape::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 200px;
  background: var(--color-secondary);
  border-radius: 50%;
  left: 30%;
  top: 40%;
  z-index: -1;
}
.arcraft-round-blur-shape::after {
  content: "";
  position: absolute;
  height: 140px;
  width: 95px;
  background: var(--color-primary);
  border-radius: 50%;
  left: 40%;
  top: 32%;
  z-index: -2;
}
.arcraft-round-blur-shape.arcraft-blur-primary::before {
  background: var(--color-primary);
}
.arcraft-round-blur-shape.arcraft-blur-primary::after {
  background: var(--color-primary);
}
.arcraft-round-blur-shape.arcraft-blur-primary .blur-shape-inner {
  backdrop-filter: blur(40px);
}
.arcraft-round-blur-shape.arcraft-round-blur-bottom-right {
  bottom: 0;
  right: 0;
}
.arcraft-round-blur-shape.arcraft-round-blur-bottom-center {
  bottom: -12%;
  left: 50%;
  transform: translateX(-80%);
}
.arcraft-round-blur-shape.arcraft-round-blur-top-left {
  top: -20%;
  left: -5%;
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1599px) {.arcraft-round-blur-shape.arcraft-round-blur-top-left {
    left: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1600px) and (max-width: 1919px), only screen and (min-width: 1200px) and (max-width: 1599px) {.arcraft-round-blur-shape.arcraft-round-blur-top-left {
    top: 0%;
  }
}
.arcraft-round-blur-shape.arcraft-round-blur-top-right {
  top: -20%;
  right: 0;
}
.arcraft-round-blur-shape.arcraft-it-blur-bottom-right {
  bottom: 115px;
  right: -230px;
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-thumbnail-content {
  position: relative;
  height: 600px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-thumbnail-content {
    height: 550px;
    margin-bottom: 40px;
  }
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-thumbnail-content {
    height: unset;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
}
.arcraft-thumbnail-content .arcraft-thumbnail-img {
  position: absolute;
}
.arcraft-thumbnail-img img {
  border-radius: var(--radius-md);
  max-width: fit-content;
  max-height: 480px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-thumbnail-img img {
    max-height: 480px;
    max-width: 350px;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
@media only screen and (max-width: 767px) {.arcraft-thumbnail-img img {
    max-height: 480px;
    max-width: 230px;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
.arcraft-quick-info {
  display: flex;
  gap: 15px;
  align-items: center;
}
.arcraft-quick-info .arcraft-icon {
  background: linear-gradient(102deg, var(--color-primary-opacity-100) -0.32%, var(--color-secondary-alt-opacity-100) 100%);
  height: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-brand-area-4 {
  background: var(--color-white);
  box-shadow: 0px 20px 46px 0px #f1f3ff inset, 2.25px -7px 44px 0px #f1f3ff inset;
  padding: 60px 120px;
  border-radius: var(--radius-lg);
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 1200px) and (max-width: 1599px) {.arcraft-brand-area-4 {
    padding: 30px 35px;
  }
}
.arcraft-brand-area-4::before,
.arcraft-brand-area-4::after {
  content: "";
  position: absolute;
  height: 15%;
  width: 8%;
  background: var(--color-secondary);
  filter: blur(75px);
}
.arcraft-brand-area-4::before {
  left: 10%;
  top: -25%;
}
.arcraft-brand-area-4::after {
  right: 18%;
  bottom: -25%;
}
.arcraft-brand-area-4 {
  padding: 50px 2px;
}
@media only screen and (max-width: 767px) {.arcraft-brand-area-4 {
    padding: 25px 15px;
  }
}
.arcraft-brand-area-4 {
  padding: 30px;
}
@media only screen and (max-width: 575px) {.arcraft-brand-area-4 {
    padding: 30px 10px;
  }
}
.arcraft-brand-area-4 .arcraft-counterup-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px 55px;
}
@media only screen and (max-width: 575px) {.arcraft-brand-area-4 .arcraft-counterup-area {
    display: flex;
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 767px) {.arcraft-brand-area-4 .arcraft-counterup-area {
    gap: 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-brand-area-4 .arcraft-counterup-area {
    gap: 20px;
  }
}
@media only screen and (max-width: 575px) {.arcraft-brand-area-4 .arcraft-counterup {
    min-width: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-brand-area-4 .arcraft-counterup {
    min-width: 150px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {.arcraft-brand-area-4 .arcraft-counterup {
    min-width: 170px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {.arcraft-brand-area-4 .arcraft-counterup .counter {
    font-size: var(--display-font-3) !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-brand-area-4 .arcraft-counterup .counter {
    font-size: var(--h2);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (max-width: 767px) {.arcraft-brand-area-4 .arcraft-counterup .arcraft-counter-text {
    font-size: var(--font-size-b4);
  }
}
.arcraft-brand-default .arcraft-single-brand {
  max-width: 160px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arcraft-brand-default .scroll-animation {
  gap: 55px;
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-progress-default .progress {
  height: 6px;
  width: 100%;
  background-color: var(--color-white);
}
.arcraft-progress-default .progress .progress-bar {
  background-color: var(--color-primary);
  border-radius: var(--radius-md);
}
.arcraft-progress-wrapper {
  border-radius: var(--radius-md);
  border: 1px solid #F6F7FF;
  background: var(--gradient-light2);
  padding: 20px 24px;
  max-width: 100%;
  width: 100%;
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-accordion .accordion-item {
  background: transparent;
  color: var(--color-body);
  border: none;
  border-top: var(--border-width) solid var(--color-border-6);
  border-radius: 0;
  padding: 24px 16px 24px 0;
}
.arcraft-accordion .accordion-item:last-child {
  border-bottom: var(--border-width) solid var(--color-border-6);
}
@media only screen and (max-width: 767px) {.arcraft-accordion .accordion-item {
    padding: 16px 0 16px 0;
  }
}
.arcraft-accordion .accordion-header .accordion-button {
  font-size: var(--h6);
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
  display: flex;
  gap: 30px;
  align-items: start;
  justify-content: space-between;
}
@media only screen and (max-width: 767px) {.arcraft-accordion .accordion-header .accordion-button {
    gap: 16px;
    font-size: var(--font-size-b1);
  }
}
.arcraft-accordion .accordion-header .accordion-button:focus {
  box-shadow: none;
}
.arcraft-accordion .accordion-header .accordion-button:not(.collapsed) {
  box-shadow: none;
}
.arcraft-accordion .accordion-header .accordion-button::after {
  content: none;
}
.arcraft-accordion .accordion-header .accordion-button .arcraft-accordion-arrow {
  transform: rotate(0deg);
  transition: var(--transition);
}
.arcraft-accordion .accordion-header .accordion-button.collapsed .arcraft-accordion-arrow {
  transform: rotate(90deg);
}
.arcraft-accordion .accordion-header .accordion-button.collapsed .arcraft-accordion-arrow svg stop {
  stop-color: var(--color-gray-light);
}
.arcraft-accordion .accordion-header .accordion-button.collapsed .arcraft-accordion-arrow svg stop:last-child {
  stop-color: var(--color-primary);
}
.arcraft-accordion .accordion-body {
  padding: 0;
  padding-right: 30px;
  position: relative;
  z-index: 7;
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-counterup-area {
  display: flex;
  flex-wrap: wrap;
  gap: 70px;
}
@media only screen and (min-width: 1200px) {.arcraft-counterup-area {
    column-gap: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {.arcraft-counterup-area {
    column-gap: 30px;
    row-gap: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-counterup-area {
    column-gap: 22px;
    row-gap: 45px;
  }
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-counterup-area {
    column-gap: 20px;
    row-gap: 40px;
  }
}
@media only screen and (max-width: 575px) {.arcraft-counterup-area {
    column-gap: 10px;
    row-gap: 10px;
  }
}
.arcraft-counterup {
  border-radius: 5px;
  position: relative;
  min-width: 200px;
  padding-top: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-counterup {
    min-width: 170px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-counterup {
    min-width: 156px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-counterup {
    min-width: 140px;
  }
}
.arcraft-counterup::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--color-primary);
  opacity: 0.15;
}
.arcraft-counterup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--color-primary);
  opacity: 0.15;
  transition: var(--transition);
}
.arcraft-counterup:hover::before {
  opacity: 1;
  width: 100%;
}
.arcraft-counterup .arcraft-counter-inner .arcraft-counter-content .counter {
  margin: 10px 0;
  width: fit-content;
  padding-right: 24px;
  display: flex;
  align-items: center;
}
.arcraft-counterup .arcraft-counter-inner .arcraft-counter-content .counter .odometer {
  margin-top: 5px;
}
.arcraft-counterup.arcraft-counterup-2 {
  padding-top: 0;
}
.arcraft-counterup.arcraft-counterup-2 .arcraft-counter-inner .counter {
  margin: 4px 0;
  font-size: var(--display-font-1);
  font-weight: var(--f-regular);
  align-items: end;
  line-height: 1.3;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {.arcraft-counterup.arcraft-counterup-2 .arcraft-counter-inner .counter {
    font-size: var(--display-font-2);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-counterup.arcraft-counterup-2 .arcraft-counter-inner .counter {
    font-size: var(--display-font-3);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-counterup.arcraft-counterup-2 .arcraft-counter-inner .counter {
    font-size: var(--h2);
  }
}
@media only screen and (max-width: 767px) {.arcraft-counterup.arcraft-counterup-2 .arcraft-counter-inner .counter {
    font-size: var(--h3);
    margin-bottom: 0;
  }
}
.arcraft-counterup.arcraft-counterup-2 .arcraft-counter-inner .counter .arcraft-counter-suffix {
  font-size: 50px;
  margin-bottom: 8px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-counterup.arcraft-counterup-2 .arcraft-counter-inner .counter .arcraft-counter-suffix {
    font-size: var(--h3);
  }
}
@media only screen and (max-width: 767px) {.arcraft-counterup.arcraft-counterup-2 .arcraft-counter-inner .counter .arcraft-counter-suffix {
    font-size: var(--h5);
    margin-bottom: 4px;
  }
}
@media only screen and (max-width: 575px) {.arcraft-counterup.arcraft-counterup-2 .arcraft-counter-inner .arcraft-counter-text {
    font-size: 12px;
  }
}
.arcraft-counterup .odometer-formatting-mark {
  display: none;
}
.arcraft-counterup.is-dot .odometer-formatting-mark {
  display: inline;
}
.odometer-value,
.odometer-digit {
  display: inline-block;
  line-height: 1 !important;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-timeline {
  position: relative;
  margin-bottom: 60px;
}
.arcraft-timeline::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 37.5px;
  bottom: 25px;
  background: var(--color-heading);
  width: 2px;
  z-index: -1;
  opacity: 0.1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {.arcraft-timeline::after {
    bottom: 100px;
  }
}
@media only screen and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-timeline::after {
    left: 25px;
    bottom: 100px;
  }
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-timeline {
    margin-bottom: 30px;
  }
}
.arcraft-timeline .arcraft-timeline-line {
  position: absolute;
  top: 0;
  left: 37.5px;
  width: 2px;
  height: 0%;
  background: linear-gradient(90deg, var(--color-primary-alt) 0%, var(--color-secondary-alt-opacity-900) 100%);
}
@media only screen and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-timeline .arcraft-timeline-line {
    left: 25px;
  }
}
.arcraft-timeline .arcraft-timeline-list {
  display: grid;
  gap: 40px;
}
.arcraft-timeline .arcraft-timeline-item {
  display: flex;
  gap: 50px;
}
@media only screen and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-timeline .arcraft-timeline-item {
    gap: 25px;
  }
}
.arcraft-timeline .arcraft-timeline-item .arcraft-timeline-point {
  min-width: 75px;
  width: 75px;
  height: 77px;
  background: var(--gradient-light1);
  box-shadow: 0px -2px 4px 0px var(--color-secondary-alt-opacity-200) inset, 0px -4px 4px 0px var(--color-primary-opacity-200) inset;
  border-radius: var(--radius-full);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-body);
  font-family: var(--font-primary);
  font-size: var(--h4);
  font-weight: var(--f-semibold);
  line-height: normal;
  z-index: 1;
  transition: var(--transition-1);
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-timeline .arcraft-timeline-item .arcraft-timeline-point {
    width: 50px;
    min-width: 50px;
    height: 52px;
    font-size: var(--font-size-b1);
  }
}
@media only screen and (max-width: 767px) {.arcraft-timeline .arcraft-timeline-item .arcraft-timeline-point {
    width: 50px;
    min-width: 50px;
    height: 52px;
    font-size: var(--font-size-b1);
  }
}
.arcraft-timeline .arcraft-timeline-item .arcraft-timeline-point::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary-alt) 0%, var(--color-secondary-alt-opacity-900) 100%);
  box-shadow: 0px -2px 4px 0px rgba(20, 1, 11, 0.25) inset, 0px -4px 4px 0px rgba(8, 28, 111, 0.19) inset;
  border-radius: var(--radius-full);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: var(--h4);
  font-weight: var(--f-semibold);
  line-height: normal;
  transform: scale(0.95);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-1);
  z-index: -1;
}
.arcraft-timeline .arcraft-timeline-item .arcraft-title {
  margin-bottom: 5px;
}
.arcraft-timeline .arcraft-timeline-item:hover .arcraft-timeline-point,
.arcraft-timeline .arcraft-timeline-item.active-item .arcraft-timeline-point {
  color: var(--color-white);
}
.arcraft-timeline .arcraft-timeline-item:hover .arcraft-timeline-point::after,
.arcraft-timeline .arcraft-timeline-item.active-item .arcraft-timeline-point::after {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.arcraft-timeline .arcraft-timeline-item:hover .arcraft-timeline-point-text svg path,
.arcraft-timeline .arcraft-timeline-item.active-item .arcraft-timeline-point-text svg path {
  fill: var(--color-white);
}
.arcraft-about-sec-thumbnail {
  height: 734px;
  position: relative;
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-about-sec-thumbnail {
    height: unset;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
}
@media only screen and (max-width: 575px) {.arcraft-about-sec-thumbnail {
    gap: 15px;
  }
}
.arcraft-about-sec-thumbnail .arcraft-thumbnail-img {
  position: absolute;
  max-height: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-about-sec-thumbnail .arcraft-thumbnail-img {
    position: static;
    max-width: 300px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-about-sec-thumbnail .arcraft-thumbnail-img {
    position: static;
    max-width: 200px;
    max-height: 280px;
  }
}
@media only screen and (max-width: 479px) {.arcraft-about-sec-thumbnail .arcraft-thumbnail-img {
    max-width: 160px;
    max-height: 280px;
  }
}
.arcraft-about-sec-thumbnail .arcraft-thumbnail-img img {
  border: 4px solid var(--color-white);
  border-radius: var(--radius-md);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-about-sec-thumbnail .arcraft-thumbnail-img.thumbnail-1 {
    left: 0;
    top: 0;
    width: 350px;
    height: 420px;
  }
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-about-sec-thumbnail .arcraft-thumbnail-img.thumbnail-1 {
    position: static;
  }
}
.arcraft-about-sec-thumbnail .arcraft-thumbnail-img.thumbnail-1 {
  left: 105px;
  top: -50px;
  width: 377px;
  height: 477px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) {.arcraft-about-sec-thumbnail .arcraft-thumbnail-img.thumbnail-1 {
    top: 0;
    left: 0;
  }
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-about-sec-thumbnail .arcraft-thumbnail-img.thumbnail-1 {
    height: auto;
    width: 100%;
  }
}
.arcraft-about-sec-thumbnail .arcraft-thumbnail-img.thumbnail-1 img {
  width: 101%;
  height: 101%;
  max-width: unset;
  max-height: unset;
  object-fit: cover;
}
.arcraft-about-sec-thumbnail .arcraft-thumbnail-img.thumbnail-2 {
  left: auto;
  top: auto;
  right: 0;
  bottom: -30px;
  border: none;
  height: 500px;
  width: 350px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-about-sec-thumbnail .arcraft-thumbnail-img.thumbnail-2 {
    bottom: -25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-about-sec-thumbnail .arcraft-thumbnail-img.thumbnail-2 {
    position: static;
    height: auto;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {.arcraft-about-sec-thumbnail .arcraft-thumbnail-img.thumbnail-2 {
    position: static;
    height: auto;
    width: 100%;
  }
}
.arcraft-about-sec-thumbnail .arcraft-thumbnail-img.thumbnail-2 img {
  border-radius: var(--radius-lg) var(--radius-48) var(--radius-lg) var(--radius-lg);
  max-height: unset;
  max-width: unset;
  height: 101%;
  width: 101%;
  object-fit: cover;
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-showcase-btn-center {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-overlap-layout {
  position: relative;
}
.arcraft-overlap-layout.arcraft-overlap-layout-1 {
  min-height: 636px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-overlap-layout.arcraft-overlap-layout-1 {
    min-height: 530px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-overlap-layout.arcraft-overlap-layout-1 {
    min-height: 518px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-overlap-layout.arcraft-overlap-layout-1 {
    min-height: 380px;
  }
}
.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content {
  width: fit-content;
  position: absolute;
}
.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content img {
  border: 4px solid var(--color-white);
  border-radius: var(--radius-md);
}
.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content.arcraft-overlap-content-6 {
  right: 56%;
  top: 14%;
}
.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content.arcraft-overlap-content-4 {
  right: 0;
  top: -20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content.arcraft-overlap-content-4 {
    top: 10%;
    max-width: 205px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content.arcraft-overlap-content-4 {
    right: 80px;
    max-width: 270px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content.arcraft-overlap-content-4 {
    max-width: 200px;
  }
}
.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content.arcraft-overlap-content-5 {
  right: 88px;
  top: 40%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content.arcraft-overlap-content-5 {
    right: 58px;
    max-width: 248px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content.arcraft-overlap-content-5 {
    right: 170px;
    max-width: 310px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content.arcraft-overlap-content-5 {
    max-width: 230px;
  }
}
.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content.arcraft-overlap-content-4 {
  right: -16px;
  top: -30px;
}
.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content.arcraft-overlap-content-5 {
  top: 48%;
}
.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content.arcraft-overlap-content-6 {
  top: 23%;
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/*-------------------
    Bootstrap Select  
----------------------*/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
/*-------------------------
    Back To Top  
---------------------------*/
.arcraft-back-circle path {
    fill: none;
    stroke: #3fae4a;
    stroke-width: 3;
}

.arcraft-progress-parent {
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.arcraft-progress-parent.is-visible {
    opacity: 1;
    visibility: visible;
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.arcraft-footer-style-8 {
  position: relative;
  background: var(--color-black-2);
}
.arcraft-footer-style-8::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}
.arcraft-footer-box {
  padding: 50px 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #1A1554 -2.12%, #3C0E3B 121.13%);
  box-shadow: 0 2px 40.4px 0 rgba(238, 239, 255, 0.06) inset, 2.25px -7px 43.7px 0 rgba(255, 255, 255, 0.02) inset;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-footer-box {
    padding: 25px;
  }
}
@media only screen and (max-width: 767px) {.arcraft-footer-box {
    padding: 25px;
  }
}
.arcraft-footer-box.arcraft-variation-3 {
  background: linear-gradient(145deg, rgba(254, 113, 185, 0.04) -2.12%, rgba(20, 2, 73, 0.01) 121.13%);
  box-shadow: 0 20px 122px 0 rgba(19, 7, 150, 0.08) inset, 2.25px -7px 43.7px 0 rgba(255, 255, 255, 0.02) inset;
}
.arcraft-footer-box.arcraft-light-shape {
  position: relative;
  overflow: hidden;
}
.arcraft-footer-box.arcraft-light-shape::before {
  position: absolute;
  content: "";
  width: 104.55px;
  height: 143.273px;
  transform: rotate(-45.416deg);
  background: linear-gradient(180deg, rgba(253, 67, 130, 0.22) 0%, #5163FF 100%);
  filter: blur(100px);
  bottom: -10px;
  right: 50px;
  opacity: 0.6;
}
.top-indicator {
  position: relative;
}
.top-indicator::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary-alt) 0%, var(--color-secondary-alt-opacity-900) 100%);
  opacity: 0.2;
}
.top-indicator.indicator-md::before {
  width: 50px;
}
.top-indicator.indicator-lg::before {
  width: 70px;
}
.top-indicator.indicator-xl::before {
  width: 70px;
}
.arcraft-footer-widget ul,
.arcraft-footer-widget .arcraft-list {
  min-width: 200px;
}
.arcraft-footer-widget ul li,
.arcraft-footer-widget .arcraft-list li {
  font-size: var(--font-size-b2);
}
.arcraft-footer-widget p {
  color: rgba(from var(--color-white) r g b/0.9);
}
.arcraft-footer-widget input[type=checkbox] ~ label,
.arcraft-footer-widget input[type=radio] ~ label {
  color: var(--color-gray-3);
}
.arcraft-footer-widget input[type=checkbox] ~ label::before,
.arcraft-footer-widget input[type=radio] ~ label::before {
  border-color: var(--color-gray-2);
}
.arcraft-footer-widget input[type=checkbox]:checked ~ label::before,
.arcraft-footer-widget input[type=radio]:checked ~ label::before {
  border-color: var(--color-primary);
}
.arcraft-copyright-area {
  padding: 10px 0;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {.arcraft-copyright-area {
    padding: 20px 0;
  }
}
@media only screen and (max-width: 767px) {.arcraft-copyright-area {
    padding: 20px 0;
    flex-direction: column;
  }
.arcraft-copyright-area .arcraft-copyright {
    order: 2;
  }
.arcraft-copyright-area .arcraft-social {
    order: 1;
  }
}
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/

/**************************************
    Other Pages
***************************************/
/* (template header removed – see note at top of file) */
/**************************************************************
  STYLESHEET INDEXING
  |
  |
  |___ Default Styles
  | |
  | |___ variables
  | |___ mixins
  | |___ reset
  | |___ typography
  | |___ extend
  | |___ shortcode
  | |___ spacing
  | |___ forms
  | |___ common
  | |___ utilize
  | |___ cursor-anim
  |
  |
  |___Header Styles
  | |___ nav
  | |___ header
  | |___ header-common
  | |___ mobilemenu
  | |___ offcanvas/offcanvas
  |
  |
  |___Elements Styles
  | |___ style-guide
  | |___ section-title
  | |___ button
  | |___ advantage
  | |___ tabs
  | |___ list-style
  | |___ avatar
  | |___ tooltip
  | |___ animation
  | |___ campaign
  | |___ category
  | |___ social-share
  | |___ sidebar
  | |___ card
  | |___ case
  | |___ blog
  | |___ filter
  | |___ gallery
  | |___ pagination
  | |___ badge
  | |___ testimonial
  | |___ swiper
  | |___ banner
  | |___ call-to-action
  | |___ section-common
  | |___ about-us
  | |___ newsletter
  | |___ meta
  | |___ purchase-table
  | |___ accordion
  | |___ counter
  | |___ timeline
  | |___ contact
  | |___ project-showcase
  | |___ overlap-layout
  | |___ select-style
  | |___ insta
  | |___ fancybox-style
  | |___ back-to-top
  | |___ footer
  |
  |
  |___Others styles
  | |___ others
  |
  |
  |___ END STYLESHEET INDEXING
***************************************************************/
/**************************************
    Default Styles
***************************************/
.magnetic-area-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  z-index: 2;
}
/* Tag row */
/* Feature icons row */
/* Floating badge cards on the image */
/* =====================================================
   MAIN SECTION
===================================================== */
.arcraft-tech-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background: #ffffff;
}
/* =====================================================
   SUBTLE BACKGROUND
===================================================== */
.tech-bg-glow {
    position: absolute;
    width: 420px;
    height: 420px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(80px);

    opacity: .35;
}
.tech-bg-glow-one {
    top: -220px;
    left: -180px;
    background: rgba(63, 174, 74, .10);
}
.tech-bg-glow-two {
    bottom: -250px;
    right: -180px;
    background: rgba(63, 174, 74, .08);
}
/* =====================================================
   BADGE
===================================================== */
.arcraft-tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 17px;

    border-radius: 50px;

    background: #eaf7ec;

    color: #278a35;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    margin-bottom: 20px;
}
.badge-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #3fae4a;
}
/* =====================================================
   TITLE
===================================================== */
.arcraft-tech-title {
    margin: 0;

    font-size: clamp(36px, 4vw, 54px);

    line-height: 1.12;

    font-weight: 700;

    color: #171b18;

    letter-spacing: -1.5px;
}
.arcraft-tech-title span {
    display: inline-block;

    color: #3fae4a;
}
/* =====================================================
   DESCRIPTION
===================================================== */
.arcraft-tech-description {
    max-width: 650px;

    margin: 20px auto 0;

    color: #6f7772;

    font-size: 16px;

    line-height: 1.8;
}
/* =====================================================
   MARQUEE
===================================================== */
.premium-tech-marquee {
    position: relative;

    margin-top: 65px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    gap: 20px;
}
/* =====================================================
   SIDE FADE
===================================================== */
.tech-fade {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 150px;

    z-index: 10;

    pointer-events: none;
}
.tech-fade-left {
    left: 0;

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255,255,255,.85) 25%,
        rgba(255,255,255,0) 100%
    );
}
.tech-fade-right {
    right: 0;

    background: linear-gradient(
        270deg,
        #ffffff 0%,
        rgba(255,255,255,.85) 25%,
        rgba(255,255,255,0) 100%
    );
}
/* =====================================================
   ROW
===================================================== */
.tech-marquee-row {
    display: flex;

    width: max-content;

    flex-shrink: 0;
}
.tech-marquee-group {
    display: flex;

    align-items: center;

    gap: 18px;

    padding-right: 18px;
}
/* =====================================================
   ANIMATION
===================================================== */
.tech-row-left {
    animation:
        techLeft 38s linear infinite;
}
.tech-row-right {
    animation:
        techRight 42s linear infinite;
}
@keyframes techLeft {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}
@keyframes techRight {

    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }

}
/* =====================================================
   CARD
===================================================== */
.premium-tech-card {
    position: relative;

    width: 175px;

    min-width: 175px;

    height: 125px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 11px;

    background: rgba(255,255,255,.95);

    border: 1px solid #e7ece8;

    border-radius: 20px;

    box-shadow:
        0 10px 35px rgba(30, 50, 35, .055);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    backdrop-filter: blur(10px);
}
/* =====================================================
   LOGO CIRCLE
===================================================== */
.tech-logo {
    width: 58px;
    height: 58px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1px solid #e8ede9;

    box-shadow:
        0 6px 20px rgba(0,0,0,.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}
/* ORIGINAL BRAND COLORS */
.tech-logo img {
    width: 34px;
    height: 34px;

    object-fit: contain;

    display: block;

    filter: none;

    transition: transform .35s ease;
}
/* =====================================================
   TEXT
===================================================== */
.premium-tech-card span {
    font-size: 14px;

    font-weight: 600;

    color: #252a27;

    white-space: nowrap;
}
/* =====================================================
   HOVER
===================================================== */
.premium-tech-card:hover {
    transform: translateY(-7px);

    border-color: rgba(63,174,74,.45);

    box-shadow:
        0 18px 45px rgba(63,174,74,.13);
}
.premium-tech-card:hover .tech-logo {
    transform: scale(1.06);

    box-shadow:
        0 10px 25px rgba(63,174,74,.12);
}
.premium-tech-card:hover .tech-logo img {
    transform: scale(1.08);
}
/* =====================================================
   PAUSE ON HOVER
===================================================== */
.premium-tech-marquee:hover .tech-marquee-row {
    animation-play-state: paused;
}
/* =====================================================
   TABLET
===================================================== */
@media (max-width: 991px) {.arcraft-tech-section {
        padding: 85px 0;
    }
.premium-tech-marquee {
        margin-top: 50px;
    }
.premium-tech-card {
        width: 155px;
        min-width: 155px;
        height: 112px;
    }
.tech-logo {
        width: 53px;
        height: 53px;
    }
.tech-logo img {
        width: 31px;
        height: 31px;
    }
}
/* =====================================================
   MOBILE
===================================================== */
@media (max-width: 575px) {.arcraft-tech-section {
        padding: 70px 0;
    }
.arcraft-tech-title {
        font-size: 34px;

        letter-spacing: -1px;
    }
.arcraft-tech-description {
        padding: 0 18px;

        font-size: 14px;
    }
.premium-tech-marquee {
        margin-top: 42px;

        gap: 14px;
    }
.tech-marquee-group {
        gap: 12px;

        padding-right: 12px;
    }
.premium-tech-card {
        width: 130px;
        min-width: 130px;

        height: 102px;

        border-radius: 16px;
    }
.tech-logo {
        width: 47px;
        height: 47px;
    }
.tech-logo img {
        width: 27px;
        height: 27px;
    }
.premium-tech-card span {
        font-size: 12px;
    }
.tech-fade {
        width: 60px;
    }
}
/* =====================================================
   REDUCED MOTION ACCESSIBILITY
===================================================== */
@media (prefers-reduced-motion: reduce) {.tech-row-left,
    .tech-row-right {
        animation: none;
    }
}
/* =========================================
       TRAINING BANNER
    ========================================= */
/* Decorative background */
/* =========================================
       CONTENT
    ========================================= */
/* Badge */
.training-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 24px;
        padding: 9px 16px;
        border-radius: 50px;
        color: #278a35;
        background: rgba(63, 174, 74, 0.10);
        border: 1px solid rgba(63, 174, 74, 0.18);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.4px;
    }
.training-badge span {
        width: 25px;
        height: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #ffffff;
        background: #3fae4a;
        font-size: 12px;
    }
/* Heading */
/* Description */
.training-description {
        max-width: 600px;
        margin-top: 24px;
        margin-bottom: 30px;
        color: #667085;
        font-size: 18px;
        line-height: 1.7;
    }
/* =========================================
       FEATURES
    ========================================= */
.training-feature-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #eaf7ec;
        color: #3fae4a;
        font-size: 17px;
        transition: all 0.3s ease;
    }
/* =========================================
       BUTTONS
    ========================================= */
/* =========================================
       IMAGE
    ========================================= */
/* =========================================
       FLOATING CARDS
    ========================================= */
@keyframes trainingFloat {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
        }

    }
/* =========================================
       TABLET
    ========================================= */
/* =========================================
       MOBILE
    ========================================= */
@media (max-width: 767px) {.training-description {
            font-size: 16px;
            line-height: 1.65;
            margin-top: 18px;
        }
.training-feature-icon {
            width: 36px;
            height: 36px;
            font-size: 15px;
        }
}
/* ---- Arcraft additions: scroll reveal (JS adds .arcraft-reveal, so content is visible without JS) ---- */
.arcraft-reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--arcraft-delay, 0s); }
.arcraft-reveal.is-visible { opacity: 1; transform: none; }
.arcraft-video-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 20px; }
.arcraft-video-frame { width: min(960px, 100%); aspect-ratio: 16 / 9; }
.arcraft-video-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }
.arcraft-video-close { position: absolute; top: 14px; right: 20px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {.arcraft-reveal { opacity: 1; transform: none; transition: none; }
}
/* =========================================
   ARCRAFT ABOUT VIDEO
========================================= */
.arcraft-video-wrapper {
    position: relative;
    width: 100%;
    min-height: 520px;
    border-radius: 20px;
    overflow: hidden;
    background: #111;
}
.arcraft-about-video {
    width: 100%;
    height: 520px;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Dark gradient overlay */
.arcraft-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.03) 0%,
        rgba(0, 0, 0, 0.15) 100%
    );
    pointer-events: none;
}
/* Muted indicator */
/* Mobile */
@media (max-width: 767px) {.arcraft-video-wrapper {
        min-height: 320px;
        border-radius: 14px;
    }
.arcraft-about-video {
        height: 320px;
    }
}
/* =========================================================
   ARCRAFT SERVICES - CONTINUOUS AUTO SLIDER
   ========================================================= */
.arcraft-swiper-activation-7 {
    width: 100%;
    overflow: hidden;
}
.arcraft-swiper-activation-7 .swiper-wrapper {
    transition-timing-function: linear !important;
    align-items: stretch;
}
.arcraft-swiper-activation-7 .swiper-slide {
    height: auto;
}
/* Prevent the card from shrinking */
/* Optional: hide pagination for a clean continuous slider */
.arcraft-swiper-activation-7 .arcraft-swiper-pagination {
    display: none;
}
/* Mobile */
@media (max-width: 767px) {.arcraft-swiper-activation-7 .swiper-slide {
        width: 85%;
    }
}
/* =========================================================
   ARCRAFT – HOME PAGE IMAGE FIX + ANIMATIONS
   Paste this at the VERY END of your stylesheet
   (it must come after all existing rules so it overrides them)
   ========================================================= */
/* ---------- 0. Safe defaults ---------- */
img { max-width: 100%; height: auto; }
/* Independent "translate" / "scale" properties are used for
   animation so they never clash with the template's own
   transform-based parallax / tilt effects. */
@keyframes arcraftFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}
@keyframes arcraftPulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.06; }
}
@keyframes arcraftKenBurns {
  from { scale: 1; }
  to   { scale: 1.08; }
}
@keyframes arcraftImgIn {
  from { opacity: 0; scale: .93; }
  to   { opacity: 1; scale: 1; }
}

/* ---------- 1. HERO ---------- */
.arcraft-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arcraft-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arcraft-main-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
  animation: arcraftFloat 6s ease-in-out infinite;
}
.arcraft-image-circle {
  animation: arcraftPulse 7s ease-in-out infinite;
}
.arcraft-floating-card {
  animation: arcraftFloat 5s ease-in-out infinite;
}
.arcraft-floating-card.card-mobile { animation-delay: -1.2s; }
.arcraft-floating-card.card-ai     { animation-delay: -2.4s; }
.arcraft-floating-card.card-cloud  { animation-delay: -3.6s; }
@media (max-width: 767px) {.arcraft-hero-visual { margin-top: 30px; }
.arcraft-main-image { max-width: 340px; }
.arcraft-floating-card { transform-origin: center; scale: .8; }
}
/* ---------- 2. BRAND LOGO STRIP ---------- */
.brand-default-logo { width: 100%; text-align: center; }
.brand-default-logo img {
  width: auto;
  max-width: 140px;
  max-height: 50px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .65;
  transition: filter .3s ease, opacity .3s ease, scale .3s ease;
}
.arcraft-single-brand:hover .brand-default-logo img {
  filter: none;
  opacity: 1;
  scale: 1.08;
}
/* ---------- 3. ABOUT – overlapping 3 images ----------
   IMPORTANT: remove style="height:400px" from the 3 <img> tags in HTML.
   (height:auto !important below also overrides it if you forget.) */
.arcraft-overlap-layout-1 .arcraft-overlap-content img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  max-width: none;
  box-shadow: 0 18px 45px rgba(22, 59, 27, .16);
}
.arcraft-overlap-layout-1 .arcraft-overlap-content-6 { width: 40%; }
.arcraft-overlap-layout-1 .arcraft-overlap-content-4 { width: 46%; }
.arcraft-overlap-layout-1 .arcraft-overlap-content-5 { width: 44%; }
/* gentle staggered float on the photos */
.arcraft-overlap-layout-1 .arcraft-overlap-content-6 img { animation: arcraftFloat 7s ease-in-out infinite; }
.arcraft-overlap-layout-1 .arcraft-overlap-content-4 img { animation: arcraftFloat 8s ease-in-out infinite -2s; }
.arcraft-overlap-layout-1 .arcraft-overlap-content-5 img { animation: arcraftFloat 6.5s ease-in-out infinite -4s; }
/* tablet + mobile: turn the absolute collage into a neat grid */
@media (max-width: 991px) {.arcraft-overlap-layout-1 {
    min-height: 0 !important;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding-right: 0;
  }
.arcraft-overlap-layout-1 .arcraft-overlap-content {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
  }
.arcraft-overlap-layout-1 .arcraft-overlap-content-6 { grid-column: 1 / -1; }
.arcraft-overlap-layout-1 .arcraft-overlap-content-6 img { aspect-ratio: 16 / 9; }
.arcraft-overlap-layout-1 .arcraft-overlap-content-4 img,
  .arcraft-overlap-layout-1 .arcraft-overlap-content-5 img { aspect-ratio: 1 / 1; }
}
/* ---------- 4. VIDEO / OVERVIEW IMAGE ---------- */
.arcraft-magnetic-area { border-radius: 16px; }
.arcraft-magnetic-area .arcraft-section-img { margin: 0; overflow: hidden; border-radius: 16px; }
.arcraft-magnetic-area .arcraft-section-img img {
  display: block;
  width: 100%;
  height: 390px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  animation: arcraftKenBurns 14s ease-in-out infinite alternate;
}
@media (max-width: 991px) {.arcraft-magnetic-area .arcraft-section-img img { aspect-ratio: 16 / 10; }
}
/* ---------- 5. SERVICES SLIDER ---------- */
.arcraft-swiper-activation-7 .swiper-slide { width: 380px; max-width: 90vw; }
@media (max-width: 575px) {.arcraft-swiper-activation-7 .swiper-slide { width: 85%; }
}
/* light sweep on hover */
/* ---------- 6. WORKING PROCESS – 2 photos ---------- */
.arcraft-about-sec-thumbnail .arcraft-thumbnail-img { overflow: visible; }
.arcraft-about-sec-thumbnail .arcraft-thumbnail-img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  box-shadow: 0 20px 50px rgba(22, 59, 27, .18);
}
.arcraft-about-sec-thumbnail .thumbnail-1 img { animation: arcraftFloat 7s ease-in-out infinite; }
.arcraft-about-sec-thumbnail .thumbnail-2 img { animation: arcraftFloat 8s ease-in-out infinite -3s; }
@media (max-width: 991px) {.arcraft-about-sec-thumbnail {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px !important;
    height: auto !important;
    margin-top: 30px;
  }
.arcraft-about-sec-thumbnail .arcraft-thumbnail-img {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    transform: none !important;
  }
.arcraft-about-sec-thumbnail .arcraft-thumbnail-img img {
    height: auto;
    aspect-ratio: 4 / 5;
  }
}
@media (max-width: 479px) {.arcraft-about-sec-thumbnail { grid-template-columns: 1fr; }
.arcraft-about-sec-thumbnail .arcraft-thumbnail-img img { aspect-ratio: 16 / 11; }
}
/* ---------- 7. ADVANTAGE VIDEO (keeps ratio on every screen) ---------- */
.arcraft-video-wrapper { min-height: 0; aspect-ratio: 16 / 10; }
.arcraft-about-video { height: 100%; }
@media (max-width: 767px) {.arcraft-video-wrapper { min-height: 0; aspect-ratio: 4 / 3; }
.arcraft-about-video { height: 100%; }
}
/* ---------- 8. CTA LOGO + ORBIT ICONS ---------- */
.arcraft-progress-chart-2 .circle-3 > div > img {
  width: min(250px, 60vw) !important;   /* overrides inline width:250px */
  height: auto;
}
.arcraft-progress-chart-2 .arch-icon img {
  max-width: 60%;
  max-height: 60%;
  object-fit: contain;
}
/* =========================================================
   arcraft-responsive.css
   Load AFTER the theme CSS in layouts/public.blade.php:
   <link rel="stylesheet" href="{{ asset('assets/css/arcraft-responsive.css') }}">
   Targets: mobile (<576), tablet (576-991), laptop (992-1599),
            large desktop (1600-2559), 4K (>=2560)
   ========================================================= */

/* ---------- 0. Global safety ---------- */
body { overflow-x: clip; }
img, video, svg { max-width: 100%; height: auto; }
main section { max-width: 100vw; }

/* ---------- 2. Hero ---------- */
.arcraft-hero { padding-block: clamp(70px, 8vw, 140px); }
.arcraft-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.arcraft-benefit-divider { display: none; }
.arcraft-hero-visual { max-width: 640px; margin-inline: auto; }
.arcraft-main-image { width: 100%; height: auto; }

@media (max-width: 991.98px) {
  .arcraft-hero .row { row-gap: 40px; text-align: center; }
  .arcraft-hero-description { margin-inline: auto; }
  .arcraft-benefits { justify-items: center; }
  .arcraft-floating-card { transform: scale(.8); transform-origin: center; }
  .arcraft-edge, .arcraft-hero-glow { opacity: .5; }
}
@media (max-width: 575.98px) {
  .arcraft-floating-card { display: none; }      /* avoids overlap/overflow on phones */
  .arcraft-since, .arcraft-bottom-notch { display: none; }
}
@media (min-width: 992px) {
  .arcraft-benefits { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 20px; }
  .arcraft-benefit-divider { display: block; }
}

/* ---------- 3. About: remove desktop-only paddings on small screens ---------- */
@media (max-width: 991.98px) {
  .arcraft-overlap-layout { max-width: 460px; margin-inline: auto; }
  .pr--60 { padding-right: 12px !important; }
  [data-parallax] { transform: none !important; }  /* parallax off on touch/tablet */
}

/* ---------- 4. Counters: clean grid ---------- */
.arcraft-counterup-area {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (min-width: 576px) { .arcraft-counterup-area { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.arcraft-counterup { width: auto !important; max-width: none !important; text-align: center; }
.arcraft-counter-text { display: block; }

/* ---------- 5. Services grid ---------- */
.arcraft-svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 32px);
}
@media (min-width: 640px)  { .arcraft-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .arcraft-svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.arcraft-svc-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.arcraft-svc-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 6. Timeline / process ---------- */
@media (max-width: 991.98px) {
  .arcraft-about-sec-thumbnail { max-width: 520px; margin: 40px auto 0; }
}

/* ---------- 7. Tech marquee ---------- */
.premium-tech-card { flex: 0 0 auto; }
.tech-logo img { width: clamp(32px, 3vw, 56px); height: clamp(32px, 3vw, 56px); object-fit: contain; }
@media (max-width: 575.98px) {
  .tech-fade { width: 40px; }
  .premium-tech-card { padding-inline: 14px; }
}

/* ---------- 8. Bento gallery ---------- */
@media (max-width: 991.98px) {
  #arcraftBento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 16px; }
  #arcraftBento .arcraft-tile { grid-column: auto !important; grid-row: auto !important; min-height: 0; }
  #arcraftBento .arcraft-tile:first-child { grid-column: 1 / -1 !important; }
}
@media (max-width: 575.98px) {
  #arcraftBento { grid-template-columns: 1fr; grid-auto-rows: 240px; }
}
.arcraft-tile-media img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) {            /* touch: no tilt / cursor-light jitter */
  .arcraft-tile, .arcraft-tilt-anim { transform: none !important; }
  .arcraft-tile-glow { display: none; }
}

/* ---------- 9. Advantage video + chips ---------- */
.arcraft-adv-frame { max-width: 100%; }
.arcraft-about-video { aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 575.98px) {
  .arcraft-adv-chip { position: static !important; margin-top: 12px; }
  .arcraft-adv-frame { display: grid; gap: 0; }
}
.arcraft-nav-effect-activation { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.arcraft-nav-effect-activation::-webkit-scrollbar { display: none; }

/* ---------- 10. Testimonials ---------- */
.arcraft-tst-card { width: clamp(270px, 82vw, 420px); }
@media (min-width: 1600px) { .arcraft-tst-card { width: 460px; } }

/* ---------- 11. FAQ ---------- */
.arcraft-accordion .accordion-button { gap: 12px; text-align: left; }
.arcraft-accordion-arrow { flex: 0 0 auto; margin-left: auto; }

/* ---------- 13. Large desktop + 4K scaling ---------- */
@media (min-width: 1600px) {
  .container { max-width: 1520px; }
}
@media (min-width: 1920px) {
  .container { max-width: 1760px; }
}
@media (min-width: 2560px) {
  .container { max-width: 2200px; }
  .arcraft-hero { min-height: 70vh; display: flex; align-items: center; }
}

/* ---------- 14. Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .tech-marquee-row, .arcraft-tst-track { animation: none !important; }
}

/* ---------- 9. ONE scroll reveal for images (modern browsers only) ----------
   Falls back to "always visible" where unsupported. */
@supports (animation-timeline: view()) {.arcraft-magnetic-area,
  .arcraft-about-sec-thumbnail .arcraft-thumbnail-img,
  .arcraft-video-wrapper {
    animation: arcraftImgIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }
}
/* ---------- 10. Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {.arcraft-main-image,
  .arcraft-image-circle,
  .arcraft-floating-card,
  .arcraft-overlap-layout-1 .arcraft-overlap-content img,
  .arcraft-magnetic-area .arcraft-section-img img,
  .arcraft-about-sec-thumbnail .arcraft-thumbnail-img img,
  .arcraft-magnetic-area,
  .arcraft-about-sec-thumbnail .arcraft-thumbnail-img,
  .arcraft-video-wrapper {
    animation: none !important;
  }
}
/* =========================================================
   ARCRAFT – ABOUT SECTION IMAGES (grid layout)
   Paste at the VERY END of your stylesheet.
   Also DELETE "3. ABOUT – overlapping 3 images" from
   arcraft-images-fix.css (this replaces it).
   ========================================================= */
.arcraft-overlap-layout.arcraft-overlap-layout-1 {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  min-height: 0 !important;
  align-items: stretch;
  padding: 10px 0 30px;
}
/* reset the template's absolute positioning */
.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content {
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0;
}
/* LEFT: one tall photo spanning both rows */
.arcraft-overlap-layout-1 .arcraft-overlap-content-6 {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 320px;
}
.arcraft-overlap-layout-1 .arcraft-overlap-content-6 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  aspect-ratio: auto;
  object-fit: cover;
}
/* RIGHT: two square photos */
.arcraft-overlap-layout-1 .arcraft-overlap-content-4 { grid-column: 2; grid-row: 1; }
.arcraft-overlap-layout-1 .arcraft-overlap-content-5 { grid-column: 2; grid-row: 2; }
.arcraft-overlap-layout-1 .arcraft-overlap-content-4 img,
.arcraft-overlap-layout-1 .arcraft-overlap-content-5 img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* shared look */
.arcraft-overlap-layout-1 .arcraft-overlap-content img {
  border: 4px solid #fff;
  border-radius: 16px;
  max-width: none;
  box-shadow: 0 18px 45px rgba(22, 59, 27, .16);
}
/* gentle float (translate does not clash with parallax/tilt) */
.arcraft-overlap-layout-1 .arcraft-overlap-content-6 img { animation: arcraftFloat 7s ease-in-out infinite; }
.arcraft-overlap-layout-1 .arcraft-overlap-content-4 img { animation: arcraftFloat 8s ease-in-out infinite -2s; }
.arcraft-overlap-layout-1 .arcraft-overlap-content-5 img { animation: arcraftFloat 6.5s ease-in-out infinite -4s; }
/* mobile: no parallax shifting, tighter gaps */
@media (max-width: 991px) {.arcraft-overlap-layout.arcraft-overlap-layout-1 .arcraft-overlap-content { transform: none !important; }
.arcraft-overlap-layout.arcraft-overlap-layout-1 { gap: 14px; padding-right: 0; }
}
@media (max-width: 479px) {.arcraft-overlap-layout-1 .arcraft-overlap-content-6 { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {.arcraft-overlap-layout-1 .arcraft-overlap-content img { animation: none !important; }
}
/* =========================================================
   ARCRAFT – Bento gallery (3D tilt + cursor light)
   Paste at the END of your stylesheet.
   ========================================================= */
.arcraft-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 230px;
  gap: 18px;
  perspective: 1200px;
}
/* desktop placement */
.arcraft-bento .tile-a { grid-column: 1 / 3; grid-row: 1 / 3; }
.arcraft-bento .tile-b { grid-column: 3;     grid-row: 1; }
.arcraft-bento .tile-c { grid-column: 4;     grid-row: 1 / 3; }
.arcraft-bento .tile-d { grid-column: 3;     grid-row: 2; }
.arcraft-bento .tile-e { grid-column: 1 / 5; grid-row: 3; }
.arcraft-tile {
  --rx: 0;
  --ry: 0;
  --mx: 50%;
  --my: 50%;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: var(--color-black-2);
  color: #fff;
  cursor: pointer;
  transform: rotateX(calc(var(--ry) * -7deg)) rotateY(calc(var(--rx) * 7deg));
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1),
              box-shadow .4s ease,
              opacity .8s ease,
              translate .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: 0s, 0s, calc(var(--i) * 90ms), calc(var(--i) * 90ms);
  will-change: transform;
}
.arcraft-tile.is-hover {
  transition-duration: .12s, .4s, .8s, .9s;   /* follows cursor tightly */
  box-shadow: 0 30px 60px rgba(22, 59, 27, .28);
}
/* entrance (only hidden when JS has armed the grid) */
.arcraft-bento.is-armed .arcraft-tile:not(.is-in) {
  opacity: 0;
  translate: 0 50px;
}
/* photo: oversized so it can slide opposite to the tilt */
.arcraft-tile-media {
  position: absolute;
  inset: -22px;
  transform: translate(calc(var(--rx) * -14px), calc(var(--ry) * -14px)) scale(1.02);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.arcraft-tile.is-hover .arcraft-tile-media {
  transition-duration: .12s;
  transform: translate(calc(var(--rx) * -14px), calc(var(--ry) * -14px)) scale(1.08);
}
.arcraft-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* dark base so text is readable */
.arcraft-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(16, 43, 20, .9) 0%, rgba(16, 43, 20, .3) 50%, rgba(16, 43, 20, 0) 100%);
  pointer-events: none;
}
/* light that follows the cursor */
.arcraft-tile-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(107, 203, 112, .38), transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.arcraft-tile.is-hover .arcraft-tile-glow { opacity: 1; }
/* text floats slightly above the photo (3D depth) */
.arcraft-tile-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 24px;
  transform: translateZ(40px);
}
.arcraft-tile-chip {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: 12px;
  font-weight: 600;
}
.arcraft-tile-info h3 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.3;
}
.arcraft-tile-info p {
  max-width: 460px;
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: 15px;
  line-height: 1.55;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s ease, opacity .4s ease, margin .4s ease;
}
.arcraft-tile.is-hover .arcraft-tile-info p,
.arcraft-tile:focus-within .arcraft-tile-info p {
  max-height: 90px;
  opacity: 1;
  margin-top: 8px;
}
/* corner arrow */
.arcraft-tile-arrow {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 3;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 18px;
  transform: translateZ(50px);
  transition: background .3s ease, rotate .5s cubic-bezier(.22, 1, .36, 1);
}
.arcraft-tile:hover .arcraft-tile-arrow {
  background: var(--color-primary);
  rotate: 45deg;
}
/* tablet: 2 columns */
@media (max-width: 991px) {.arcraft-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
  }
.arcraft-bento .tile-a { grid-column: 1 / 3; grid-row: auto; }
.arcraft-bento .tile-b,
  .arcraft-bento .tile-c,
  .arcraft-bento .tile-d { grid-column: auto; grid-row: auto; }
.arcraft-bento .tile-e { grid-column: 1 / 3; grid-row: auto; }
}
/* mobile: 1 column, no tilt, text always visible */
@media (max-width: 575px) {.arcraft-bento { grid-template-columns: 1fr; grid-auto-rows: 240px; gap: 14px; }
.arcraft-bento .tile-a,
  .arcraft-bento .tile-e { grid-column: auto; }
.arcraft-tile-info p { max-height: 90px; opacity: 1; margin-top: 8px; }
}
/* touch screens: text always visible, no tilt */
@media (hover: none) {.arcraft-tile { transform: none; }
.arcraft-tile-info p { max-height: 90px; opacity: 1; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {.arcraft-tile, .arcraft-tile-media { transition: none !important; transform: none !important; }
.arcraft-bento.is-armed .arcraft-tile:not(.is-in) { opacity: 1; translate: none; }
}
/* =========================================================
   ARCRAFT – Animated services cards
   Paste at the END of your stylesheet.
   (The old .arcraft-swiper-activation-7 rules are no longer
    used by this section and can stay or be deleted.)
   ========================================================= */
@property --arcraft-ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes arcraftSpin { to { --arcraft-ang: 360deg; } }
.arcraft-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
/* ---------- card shell + spinning border ---------- */
.arcraft-svc {
  position: relative;
  display: block;
  padding: 2px;
  border-radius: 24px;
  background: #dcecde;
  color: inherit;
  text-decoration: none;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1),
              box-shadow .5s ease,
              opacity .8s ease,
              translate .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: 0s, 0s, calc(var(--i) * 90ms), calc(var(--i) * 90ms);
}
.arcraft-svc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--arcraft-ang),
              transparent 0 50%, var(--color-secondary) 75%, var(--color-primary) 100%);
  opacity: 0;
  transition: opacity .4s ease;
  animation: arcraftSpin 2.8s linear infinite;
}
.arcraft-svc:hover,
.arcraft-svc:focus-visible {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(22, 59, 27, .18);
  transition-delay: 0s;
}
.arcraft-svc:hover::before,
.arcraft-svc:focus-visible::before { opacity: 1; }
.arcraft-svc:focus-visible { outline: none; }
.arcraft-svc-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
}
/* ---------- image with curved edge that opens on hover ---------- */
.arcraft-svc-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  clip-path: ellipse(78% 96% at 50% 0%);
  transition: clip-path .8s cubic-bezier(.22, 1, .36, 1);
}
.arcraft-svc:hover .arcraft-svc-media { clip-path: ellipse(150% 100% at 50% 0%); }
.arcraft-svc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}
.arcraft-svc:hover .arcraft-svc-media img { transform: scale(1.12) rotate(1.5deg); }
.arcraft-svc-media::after {          /* green tint that fades in */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(46, 139, 58, .55), rgba(46, 139, 58, 0) 65%);
  opacity: 0;
  transition: opacity .5s ease;
}
.arcraft-svc:hover .arcraft-svc-media::after { opacity: 1; }
/* ---------- body ---------- */
.arcraft-svc-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 44px 26px 26px;
}
.arcraft-svc-icon {
  position: absolute;
  top: -32px;
  left: 26px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--color-primary-alt), var(--color-secondary));
  color: #fff;
  font-size: 26px;
  box-shadow: 0 12px 26px rgba(63, 174, 74, .35);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.arcraft-svc:hover .arcraft-svc-icon { transform: perspective(400px) rotateY(360deg); }
.arcraft-svc-body h3 {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--color-heading);
}
.arcraft-svc-body p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
}
.arcraft-svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.arcraft-svc-tags span {
  padding: 4px 12px;
  border-radius: 50px;
  background: var(--color-secondary-shade);
  color: var(--color-primary-alt);
  font-size: 12px;
  font-weight: 600;
  transition: background .3s ease, color .3s ease;
}
.arcraft-svc:hover .arcraft-svc-tags span {
  background: var(--color-primary);
  color: #fff;
}
.arcraft-svc:hover .arcraft-svc-tags span:nth-child(2) { transition-delay: .06s; }
.arcraft-svc:hover .arcraft-svc-tags span:nth-child(3) { transition-delay: .12s; }
.arcraft-svc-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary-alt);
  transition: gap .4s ease;
}
.arcraft-svc-cta i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-secondary-shade);
  transition: background .3s ease, color .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.arcraft-svc:hover .arcraft-svc-cta { gap: 16px; }
.arcraft-svc:hover .arcraft-svc-cta i {
  background: var(--color-primary);
  color: #fff;
  transform: rotate(-45deg);
}
/* ---------- entrance (only hidden when JS armed the grid) ---------- */
.arcraft-svc-grid.is-armed .arcraft-svc:not(.is-in) {
  opacity: 0;
  translate: 0 60px;
}
/* ---------- desktop: middle column sits lower for rhythm ---------- */
@media (min-width: 992px) {.arcraft-svc:nth-child(3n + 2) { margin-top: 36px; }
}
/* ---------- tablet / mobile ---------- */
@media (max-width: 991px) {.arcraft-svc-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 575px) {.arcraft-svc-grid { grid-template-columns: 1fr; gap: 20px; }
.arcraft-svc-body { padding: 42px 20px 22px; }
.arcraft-svc-body h3 { font-size: 20px; }
}
/* touch screens: keep the image curve open, no lift */
@media (hover: none) {.arcraft-svc-media { clip-path: ellipse(150% 100% at 50% 0%); }
.arcraft-svc:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {.arcraft-svc, .arcraft-svc-media, .arcraft-svc-media img,
  .arcraft-svc-icon, .arcraft-svc-cta i { transition: none !important; }
.arcraft-svc::before { animation: none; }
.arcraft-svc-grid.is-armed .arcraft-svc:not(.is-in) { opacity: 1; translate: none; }
}
/* =========================================================
   ARCRAFT – Advantage + Testimonial redesign
   Paste at the END of your stylesheet.
   ========================================================= */
@keyframes arcraftRise {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes arcraftDrift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 10px -10px; }
}
@keyframes arcraftTst {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* =====================================================
   ADVANTAGE – framed video
   ===================================================== */
.arcraft-adv-frame {
  position: relative;
  padding: 0 0 30px 30px;
}
.arcraft-adv-frame::before {          /* green shape sitting behind the video */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72%;
  height: 72%;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--color-primary-alt), var(--color-secondary));
  animation: arcraftDrift 8s ease-in-out infinite;
}
.arcraft-adv-frame .arcraft-video-wrapper {
  position: relative;
  z-index: 1;
  border-radius: 26px;
  box-shadow: 0 30px 60px rgba(22, 59, 27, .22);
}
/* sound button */
.arcraft-adv-sound {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: background .3s ease, scale .3s ease;
}
.arcraft-adv-sound:hover { background: var(--color-primary); scale: 1.1; }
.arcraft-adv-sound:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* floating stat chips */
.arcraft-adv-chip {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(22, 59, 27, .18);
  animation: arcraftFloat 5s ease-in-out infinite;
}
.arcraft-adv-chip.chip-1 { top: 26px; right: -18px; }
.arcraft-adv-chip.chip-2 { bottom: 70px; left: 0; animation-delay: -2.5s; }
.arcraft-adv-chip-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--color-secondary-shade);
  color: var(--color-primary);
  font-size: 22px;
}
.arcraft-adv-chip strong {
  display: block;
  font-size: 20px;
  line-height: 1.1;
  color: var(--color-heading);
}
.arcraft-adv-chip small {
  display: block;
  font-size: 12px;
  color: var(--color-body);
}
/* tabs: content rises in when a tab opens */
.arcraft-adv-tabs .tab-pane.active > p { animation: arcraftRise .6s cubic-bezier(.22, 1, .36, 1) both; }
.arcraft-adv-tabs .tab-pane.active .arcraft-list li { animation: arcraftRise .6s cubic-bezier(.22, 1, .36, 1) both; }
.arcraft-adv-tabs .tab-pane.active .arcraft-list li:nth-child(1) { animation-delay: .10s; }
.arcraft-adv-tabs .tab-pane.active .arcraft-list li:nth-child(2) { animation-delay: .18s; }
.arcraft-adv-tabs .tab-pane.active .arcraft-list li:nth-child(3) { animation-delay: .26s; }
.arcraft-adv-tabs .tab-pane.active .arcraft-list li:nth-child(4) { animation-delay: .34s; }
.arcraft-adv-tabs .arcraft-list li { transition: translate .3s ease, color .3s ease; }
.arcraft-adv-tabs .arcraft-list li:hover { translate: 6px 0; color: var(--color-heading); }
@media (max-width: 767px) {.arcraft-adv-frame { padding: 0 0 20px 16px; }
.arcraft-adv-chip { padding: 8px 14px 8px 8px; }
.arcraft-adv-chip.chip-1 { right: 8px; top: 14px; }
.arcraft-adv-chip.chip-2 { left: 0; bottom: 56px; }
.arcraft-adv-chip-icon { width: 36px; height: 36px; font-size: 18px; }
.arcraft-adv-chip strong { font-size: 17px; }
}
/* =====================================================
   TESTIMONIALS – scrolling feedback cards
   ===================================================== */
.arcraft-tst {
  position: relative;
  overflow: hidden;
  padding: 20px 0 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.arcraft-tst-track {
  display: flex;
  width: max-content;
}
.arcraft-tst.is-ready .arcraft-tst-track {
  animation: arcraftTst 55s linear infinite;
}
.arcraft-tst:hover .arcraft-tst-track { animation-play-state: paused; }
.arcraft-tst-group {
  display: flex;
  align-items: stretch;
  gap: 22px;
  padding-right: 22px;
}
.arcraft-tst-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 380px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid #dcecde;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(22, 59, 27, .06);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1),
              box-shadow .45s ease,
              border-color .3s ease;
}
.arcraft-tst-card::before {           /* big quote mark */
  content: "\201C";
  position: absolute;
  top: 6px;
  right: 24px;
  font-size: 110px;
  line-height: 1;
  font-family: Georgia, serif;
  color: var(--color-primary);
  opacity: .14;
  transition: opacity .3s ease, transform .5s ease;
}
.arcraft-tst-card::after {            /* top bar that draws in on hover */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary-alt), var(--color-secondary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.arcraft-tst-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-primary);
  box-shadow: 0 26px 50px rgba(63, 174, 74, .16);
}
.arcraft-tst-card:hover::before { opacity: .3; transform: translateY(4px) scale(1.1); }
.arcraft-tst-card:hover::after  { transform: scaleX(1); }
/* stars: filled width follows the rating (0-5) */
.arcraft-tst-stars {
  margin-bottom: 14px;
  font-size: 20px;
  letter-spacing: 3px;
  line-height: 1;
  background: linear-gradient(90deg, #F7A51E calc(var(--r, 0) / 5 * 100%), #d5e2d6 0);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}
.arcraft-tst-text {
  flex: 1;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-body);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.arcraft-tst-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #e6efe7;
}
.arcraft-tst-avatar {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-alt), var(--color-secondary));
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.arcraft-tst-card:hover .arcraft-tst-avatar { transform: rotate(360deg) scale(1.08); }
.arcraft-tst-who { flex: 1; min-width: 0; }
.arcraft-tst-who strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  color: var(--color-heading);
}
.arcraft-tst-who small { font-size: 12px; color: var(--color-body); }
.arcraft-tst-score {
  padding: 4px 12px;
  border-radius: 50px;
  background: var(--color-secondary-shade);
  color: var(--color-primary-alt);
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 575px) {.arcraft-tst-card { width: 300px; padding: 24px; }
.arcraft-tst-text { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {.arcraft-adv-frame::before,
  .arcraft-adv-chip,
  .arcraft-adv-tabs .tab-pane.active > p,
  .arcraft-adv-tabs .tab-pane.active .arcraft-list li { animation: none !important; }
.arcraft-tst { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
.arcraft-tst.is-ready .arcraft-tst-track { animation: none; }
}
/* =========================================================
   ARCRAFT – ABOUT PAGE
   Paste at the END of your stylesheet.
   ========================================================= */

/* ---------- scroll reveal (only hidden when JS is running) ---------- */
/* ---------- 3D tilt (shared) ---------- */
[data-tilt] {
  --rx: 0; --ry: 0; --mx: 50%; --my: 50%;
  transform: perspective(900px) rotateX(calc(var(--ry) * -6deg)) rotateY(calc(var(--rx) * 6deg));
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
[data-tilt].is-hover { transition-duration: .12s; }
/* ---------- shared bits ---------- */

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {[data-tilt] { transform: none !important; }
}
.hx-hero {
    padding: 130px 0 100px;
    background: linear-gradient(135deg, #f8fcf9 0%, #ffffff 60%, #edf8ef 100%);
    overflow: hidden;
}
.hx-slats {
    display: flex;
    gap: 10px;
    height: 590px;
}
.hx-slat {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    color: #fff;
    background: var(--img) calc(var(--i) * 33.3%) center / cover no-repeat;
    filter: saturate(.55) brightness(.92);
    transition: flex .7s cubic-bezier(.2,.7,.2,1), filter .5s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.hx-slat:nth-child(even) { transform: translateY(34px); }
.hx-slat:nth-child(odd)  { transform: translateY(-10px); }
.hx-slat::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,34,22,.05) 35%, rgba(16,34,22,.82));
}
.hx-slat.is-active {
    flex: 4.4;
    filter: none;
}
.hx-slat:focus-visible {
    outline: 3px solid var(--about-green);
    outline-offset: 3px;
}
 
/* collapsed label */
.hx-tag {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 26px;
    writing-mode: vertical-rl;
    transform: translateX(-50%) rotate(180deg);
    font-size: 14px;
    font-weight: var(--f-semibold);
    letter-spacing: .02em;
    white-space: nowrap;
    transition: opacity .3s ease;
}
.hx-slat.is-active .hx-tag { opacity: 0; }
 
/* open content */
.hx-detail {
    position: absolute;
    z-index: 2;
    left: 28px;
    right: 28px;
    bottom: 28px;
    max-width: 380px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .4s ease, transform .5s ease;
}
.hx-slat.is-active .hx-detail {
    opacity: 1;
    transform: none;
    transition-delay: .25s;
}
.hx-detail i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 12px;
    font-size: 20px;
    color: #fff;
    background: var(--about-green);
}
.hx-detail strong {
    display: block;
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 6px;
}
.hx-detail small {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,.85);
}
 
@media (max-width: 991px) {
    .hx-hero { padding: 90px 0 70px; }
    .hx-slats { height: 520px; }
}
@media (max-width: 767px) {
    .hx-slats {
        flex-direction: column;
        height: 560px;
    }
    .hx-slat,
    .hx-slat:nth-child(even),
    .hx-slat:nth-child(odd) { transform: none; background-position: center calc(var(--i) * 33.3%); }
    .hx-slat.is-active { flex: 4; }
    .hx-tag {
        writing-mode: horizontal-tb;
        transform: none;
        left: 20px;
        bottom: auto;
        top: 50%;
        margin-top: -10px;
    }
    .hx-detail { left: 20px; right: 20px; bottom: 20px; }
    .hx-detail i { width: 38px; height: 38px; margin-bottom: 8px; }
    .hx-detail strong { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .hx-slat, .hx-detail { transition: none; }
}

.arch-container {
  position: relative;
  width: 900px;
  height: 900px;
  max-width: 100%;
  margin: 0 auto;
}
.arch-icon {
  position: absolute;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
}
.arch-icon img { width: 36px; height: 36px; object-fit: contain; }
.arch-icon.is-fallback { font-weight: 600; font-size: 20px; color: var(--color-primary, #3cff8f); }

@media (max-width: 1199px) { .arch-container { width: 800px; height: 800px; } }
@media (max-width: 991px)  { .arch-container { width: 700px; height: 700px; } }
@media (max-width: 767px)  { .arch-container { width: 500px; height: 500px; } }
@media (max-width: 575px)  { .arch-container { width: 320px; height: 320px; } }

.arcraft-hero {

        min-height: 760px;

        padding:100px 0 100px;
        background:
            radial-gradient(
                circle at 75% 45%,
                rgba(63, 174, 74, 0.12),
                transparent 34%
            ),
            linear-gradient(
                135deg,
                #f8fffa 0%,
                #eef9f1 48%,
                #ffffff 100%
            );

        position: relative;

    }
/* ========================================
       CONTENT
       ======================================== */
.arcraft-hero-content {

        position: relative;

        z-index: 5;

        padding-right: 20px;

    }
/* ========================================
       EYEBROW
       ======================================== */
.arcraft-eyebrow {

        display: flex;

        align-items: center;

        gap: 12px;

        margin-bottom: 25px;

        font-size: 13px;

        font-weight: 600;

        letter-spacing: 1.5px;

        color: #698078;

    }
.arcraft-eyebrow strong {

        color: #1d2930;

    }
.arcraft-eyebrow b {

        color: #4ab45a;

        font-weight: 500;

    }
.arcraft-eyebrow-line {

        width: 27px;

        height: 3px;

        border-radius: 10px;

        background: #3fae4a;

    }
/* ========================================
       HEADING
       ======================================== */
.arcraft-hero-title {

        margin: 0;

        max-width: 650px;

        font-size: clamp(
            48px,
            5vw,
            76px
        );

        line-height: 1.03;

        letter-spacing: -2.8px;

        font-weight: 700;

        color: #102238;

    }
.arcraft-green-text {

        color: #18a957;

        display: inline-block;

    }
/* ========================================
       DESCRIPTION
       ======================================== */
.arcraft-hero-description {

        max-width: 600px;

        margin:
            30px
            0
            32px;

        color: #526979;

        font-size: 17px;

        line-height: 1.75;

        font-weight: 400;

    }
/* ========================================
       CTA
       ======================================== */
/* ========================================
       BENEFITS
       ======================================== */
.arcraft-benefits {

        display: flex;

        align-items: center;

        gap: 17px;

        margin-top: 55px;

    }
.arcraft-benefit {

        display: flex;

        align-items: center;

        gap: 9px;

        color: #183148;

        font-size: 13px;

        line-height: 1.35;

        font-weight: 600;

    }
.arcraft-benefit-icon {

        width: 35px;

        height: 35px;

        display: flex;

        align-items: center;

        justify-content: center;

        color: #15a05b;

        font-size: 21px;

    }
.arcraft-benefit-divider {

        width: 1px;

        height: 38px;

        background: rgba(
            25,
            100,
            65,
            0.18
        );

    }
/* ========================================
       RIGHT VISUAL
       ======================================== */
.arcraft-hero-visual {

        min-height: 570px;

        position: relative;

        display: flex;

        align-items: center;

        justify-content: center;

    }
/* ========================================
       IMAGE
       ======================================== */
.arcraft-image-wrapper {

        position: relative;

        width: 100%;

        max-width: 640px;

        z-index: 2;

    }
.arcraft-main-image {

        width: 100%;

        height: auto;

        display: block;

        position: relative;

        z-index: 3;

        object-fit: contain;

        filter:
            drop-shadow(
                0 30px 45px
                rgba(30, 90, 55, 0.13)
            );

    }
/* Green organic background */
.arcraft-image-circle {

        position: absolute;

        width: 72%;

        height: 75%;

        top: 14%;

        left: 18%;

        background:
            linear-gradient(
                135deg,
                #bcefc7,
                #48bd73
            );

        border-radius:
            48%
            52%
            60%
            40%;

        transform:
            rotate(
                -12deg
            );

        opacity: .75;

        filter:
            blur(.2px);

        z-index: 1;

    }
/* ========================================
       FLOATING CARDS
       ======================================== */
.arcraft-floating-card {

        position: absolute;

        z-index: 8;

        display: flex;

        align-items: center;

        gap: 10px;

        min-width: 125px;

        padding: 13px 15px;

        border-radius: 18px;

        background:
            rgba(
                255,
                255,
                255,
                .94
            );

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                .8
            );

        box-shadow:
            0 18px 45px
            rgba(
                23,
                75,
                48,
                .13
            );

        backdrop-filter:
            blur(15px);

        color: #173248;

        font-size: 12px;

        line-height: 1.25;

        font-weight: 600;

        animation:
            arcraftFloat
            4s
            ease-in-out
            infinite;

    }
.arcraft-floating-icon {

        width: 38px;

        height: 38px;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 12px;

        background:
            #effaf1;

        color: #149d58;

        font-size: 19px;

    }
.card-software {

        top: 11%;

        left: 3%;

        animation-delay: 0s;

    }
.card-mobile {

        left: 0%;

        top: 48%;

        animation-delay: .8s;

    }
.card-ai {

        right: 2%;

        top: 20%;

        animation-delay: 1.4s;

    }
.card-cloud {

        right: -2%;

        top: 52%;

        animation-delay: 2s;

    }
/* ========================================
       FLOAT ANIMATION
       ======================================== */
@keyframes arcraftFloat {

        0%,
        100% {

            transform:
                translateY(0);

        }

        50% {

            transform:
                translateY(-10px);

        }

    }
/* ========================================
       DOTS
       ======================================== */
.arcraft-dots {

        position: absolute;

        right: 2%;

        top: 5%;

        width: 100px;

        height: 75px;

        opacity: .45;

        background-image:
            radial-gradient(
                #3fae4a 2px,
                transparent 2px
            );

        background-size:
            15px 15px;

        z-index: 1;

    }
/* ========================================
       SINCE 2026
       ======================================== */
.arcraft-since {

        position: absolute;

        top: 48px;

        right: 7%;

        display: flex;

        align-items: center;

        gap: 14px;

        z-index: 10;

        color: #15975b;

        font-size: 15px;

    }
.arcraft-since span {

        width: 50px;

        height: 1px;

        background: #27a967;

    }
/* ========================================
       GREEN SIDE EDGES
       ======================================== */
.arcraft-edge {

        position: absolute;

        top: 0;

        bottom: 80px;

        width: 25px;

        background:
            linear-gradient(
                180deg,
                #61c66b,
                #079c62
            );

        z-index: 1;

    }
.arcraft-edge-left {

        left: 0;

        border-radius:
            0 35px 35px 0;

    }
.arcraft-edge-right {

        right: 0;

        border-radius:
            35px 0 0 35px;

    }
/* ========================================
       GLOW
       ======================================== */
.arcraft-hero-glow {

        position: absolute;

        border-radius: 50%;

        filter: blur(70px);

        pointer-events: none;

    }
.arcraft-glow-1 {

        width: 350px;

        height: 350px;

        right: 20%;

        top: 10%;

        background:
            rgba(
                86,
                203,
                111,
                .13
            );

    }
.arcraft-glow-2 {

        width: 250px;

        height: 250px;

        left: 10%;

        bottom: 0;

        background:
            rgba(
                53,
                177,
                91,
                .08
            );

    }
/* ========================================
       BOTTOM NOTCH
       ======================================== */
.arcraft-bottom-notch {

        position: absolute;

        left: 0;

        bottom: -1px;

        width: 100%;

        height: 55px;

        background: #ffffff;

        clip-path:
            polygon(
                0 65%,
                45% 65%,
                48% 65%,
                49% 25%,
                50% 0,
                51% 25%,
                52% 65%,
                55% 65%,
                100% 65%,
                100% 100%,
                0 100%
            );

        z-index: 9;

    }
/* ========================================
       LARGE LAPTOP
       ======================================== */
@media (max-width: 1399px) {.arcraft-hero {

            padding-top: 100px;

        }
.arcraft-hero-title {

            font-size: 64px;

        }
.arcraft-floating-card {

            transform: scale(.9);

        }
}
/* ========================================
       TABLET
       ======================================== */
@media (max-width: 991px) {.arcraft-hero {

            min-height: auto;

            padding:
                100px
                0
                90px;

        }
.arcraft-hero-content {

            text-align: center;

            padding-right: 0;

        }
.arcraft-eyebrow {

            justify-content: center;

        }
.arcraft-hero-title {

            max-width: 750px;

            margin-left: auto;

            margin-right: auto;

            font-size: 54px;

        }
.arcraft-hero-description {

            margin-left: auto;

            margin-right: auto;

        }
.arcraft-benefits {

            justify-content: center;

            flex-wrap: wrap;

            margin-top: 40px;

        }
.arcraft-hero-visual {

            min-height: 520px;

            margin-top: 35px;

        }
.arcraft-since {

            top: 30px;

            right: 5%;

        }
}
/* ========================================
       MOBILE
       ======================================== */
@media (max-width: 767px) {.arcraft-hero {

            padding:
                90px
                15px
                70px;

        }
.arcraft-edge {

            width: 10px;

        }
.arcraft-hero-title {

            font-size: 43px;

            line-height: 1.05;

            letter-spacing: -1.8px;

        }
.arcraft-hero-description {

            font-size: 15px;

            line-height: 1.65;

            margin-top: 22px;

        }
.arcraft-eyebrow {

            gap: 7px;

            font-size: 10px;

            letter-spacing: 1px;

        }
.arcraft-eyebrow-line {

            width: 20px;

        }
.arcraft-benefits {

            gap: 12px;

        }
.arcraft-benefit {

            font-size: 11px;

        }
.arcraft-benefit-divider {

            display: none;

        }
.arcraft-hero-visual {

            min-height: 390px;

            margin-top: 20px;

        }
.arcraft-floating-card {

            min-width: 95px;

            padding: 8px;

            gap: 6px;

            border-radius: 13px;

            font-size: 9px;

        }
.arcraft-floating-icon {

            width: 30px;

            height: 30px;

            border-radius: 9px;

            font-size: 14px;

        }
.card-software {

            left: 0;

            top: 5%;

        }
.card-mobile {

            left: -2%;

            top: 48%;

        }
.card-ai {

            right: 0;

            top: 15%;

        }
.card-cloud {

            right: -2%;

            top: 50%;

        }
.arcraft-since {

            top: 20px;

            right: 20px;

            font-size: 12px;

        }
.arcraft-since span {

            width: 30px;

        }
.arcraft-bottom-notch {

            height: 35px;

        }
}
/* ========================================
       SMALL MOBILE
       ======================================== */
@media (max-width: 480px) {.arcraft-hero-title {

            font-size: 37px;

        }
.arcraft-hero-description {

            font-size: 14px;

        }
.arcraft-hero-visual {

            min-height: 310px;

        }
.arcraft-floating-card {

            transform: scale(.82);

        }
.arcraft-benefit-icon {

            width: 27px;

            height: 27px;

            font-size: 17px;

        }
}
/* ========================================
   TECHNOLOGY STACK SECTION
   ======================================== */
.arcraft-tech-section {
    position: relative;
    padding: 100px 0 90px;
    overflow: hidden;
    background: #fbfffe;
}
.tech-bg-glow {
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.tech-bg-glow-one {
    top: -160px;
    left: -120px;
    background: rgba(63, 174, 74, 0.14);
}
.tech-bg-glow-two {
    bottom: -180px;
    right: -140px;
    background: rgba(63, 174, 74, 0.10);
}
.arcraft-tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(63, 174, 74, 0.25);
    border-radius: 30px;
    background: rgba(63, 174, 74, 0.06);
    color: #3fae4a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
}
.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3fae4a;
    flex-shrink: 0;
}
.arcraft-tech-title {
    margin-bottom: 16px;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.25;
    color: #10241a;
}
.arcraft-tech-title span {
    color: #3fae4a;
}
.arcraft-tech-description {
    max-width: 560px;
    margin: 0 auto;
    color: #698078;
    font-size: 16px;
    line-height: 1.7;
}
/* Marquee */
.premium-tech-marquee {
    position: relative;
    z-index: 1;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.tech-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.tech-fade-left {
    left: 0;
    background: linear-gradient(90deg, #fbfffe 0%, rgba(251, 255, 254, 0) 100%);
}
.tech-fade-right {
    right: 0;
    background: linear-gradient(270deg, #fbfffe 0%, rgba(251, 255, 254, 0) 100%);
}
.tech-marquee-row {
    display: flex;
    width: max-content;
    overflow: hidden;
}
.tech-row-left .tech-marquee-group {
    animation: arcraft-marquee-left 32s linear infinite;
}
.tech-row-right .tech-marquee-group {
    animation: arcraft-marquee-right 32s linear infinite;
}
.tech-marquee-row:hover .tech-marquee-group {
    animation-play-state: paused;
}
.tech-marquee-group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 18px;
    padding: 0 9px;
}
@keyframes arcraft-marquee-left {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
@keyframes arcraft-marquee-right {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
.premium-tech-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 140px;
    height: 120px;
    flex-shrink: 0;
    border: 1px solid #eef3f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(16, 36, 26, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.premium-tech-card:hover {
    transform: translateY(-4px);
    border-color: rgba(63, 174, 74, 0.3);
    box-shadow: 0 14px 30px rgba(63, 174, 74, 0.14);
}
.tech-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}
.tech-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.premium-tech-card span {
    font-size: 13px;
    font-weight: 600;
    color: #10241a;
}
@media (prefers-reduced-motion: reduce) {.tech-marquee-group {
        animation: none;
    }
}
/* ========================================
       LARGE LAPTOP
       ======================================== */
@media (max-width: 1199px) {.arcraft-tech-title {
        font-size: 36px;
    }
.premium-tech-card {
        width: 128px;
        height: 112px;
    }
}
/* ========================================
       TABLET
       ======================================== */
@media (max-width: 991px) {.arcraft-tech-section {
        padding: 80px 0 70px;
    }
.tech-fade {
        width: 70px;
    }
.premium-tech-card {
        width: 116px;
        height: 104px;
        gap: 10px;
    }
.tech-logo {
        width: 34px;
        height: 34px;
    }
.tech-row-left .tech-marquee-group,
    .tech-row-right .tech-marquee-group {
        animation-duration: 26s;
    }
}
/* ========================================
       MOBILE
       ======================================== */
@media (max-width: 767px) {.arcraft-tech-section {
        padding: 60px 0 50px;
    }
.arcraft-tech-title {
        font-size: 28px;
    }
.arcraft-tech-description {
        font-size: 15px;
    }
.tech-bg-glow {
        width: 300px;
        height: 300px;
        filter: blur(60px);
    }
.premium-tech-marquee {
        margin-top: 35px;
        gap: 14px;
    }
.tech-marquee-group {
        gap: 12px;
        padding: 0 6px;
    }
.premium-tech-card {
        width: 96px;
        height: 92px;
        border-radius: 12px;
    }
.tech-logo {
        width: 28px;
        height: 28px;
    }
.premium-tech-card span {
        font-size: 11px;
    }
.tech-row-left .tech-marquee-group,
    .tech-row-right .tech-marquee-group {
        animation-duration: 20s;
    }
}
/* ========================================
       SMALL MOBILE
       ======================================== */
@media (max-width: 480px) {.arcraft-tech-badge {
        font-size: 11px;
        padding: 6px 14px;
    }
.arcraft-tech-title {
        font-size: 24px;
    }
.tech-fade {
        width: 40px;
    }
.premium-tech-card {
        width: 82px;
        height: 82px;
    }
.tech-logo {
        width: 24px;
        height: 24px;
    }
}
/* =========================================================
   arcraft-responsive.css
   Load AFTER the theme CSS in layouts/public.blade.php:
   <link rel="stylesheet" href="{{ asset('assets/css/arcraft-responsive.css') }}">
   Targets: mobile (<576), tablet (576-991), laptop (992-1599),
            large desktop (1600-2559), 4K (>=2560)
   ========================================================= */

/* ---------- 0. Global safety ---------- */
body { overflow-x: clip; }
img, video, svg { max-width: 100%; height: auto; }
main section { max-width: 100vw; }

/* ---------- 2. Hero ---------- */
.arcraft-hero { padding-block: clamp(70px, 8vw, 140px); }
.arcraft-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.arcraft-benefit-divider { display: none; }
.arcraft-hero-visual { max-width: 640px; margin-inline: auto; }
.arcraft-main-image { width: 100%; height: auto; }

@media (max-width: 991.98px) {
  .arcraft-hero .row { row-gap: 40px; text-align: center; }
  .arcraft-hero-description { margin-inline: auto; }
  .arcraft-benefits { justify-items: center; }
  .arcraft-floating-card { transform: scale(.8); transform-origin: center; }
  .arcraft-edge, .arcraft-hero-glow { opacity: .5; }
}
@media (max-width: 575.98px) {
  .arcraft-floating-card { display: none; }      /* avoids overlap/overflow on phones */
  .arcraft-since, .arcraft-bottom-notch { display: none; }
}
@media (min-width: 992px) {
  .arcraft-benefits { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 20px; }
  .arcraft-benefit-divider { display: block; }
}

/* ---------- 3. About: remove desktop-only paddings on small screens ---------- */
@media (max-width: 991.98px) {
  .arcraft-overlap-layout { max-width: 460px; margin-inline: auto; }
  .pr--60 { padding-right: 12px !important; }
  [data-parallax] { transform: none !important; }  /* parallax off on touch/tablet */
}

/* ---------- 4. Counters: clean grid ---------- */
.arcraft-counterup-area,
.arcraft-brand-area-4 .arcraft-counterup-area {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (min-width: 576px) {
  .arcraft-counterup-area,
  .arcraft-brand-area-4 .arcraft-counterup-area { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.arcraft-counterup,
.arcraft-brand-area-4 .arcraft-counterup { width: auto !important; min-width: 0 !important; max-width: none !important; text-align: center; }
.arcraft-counterup .arcraft-counter-inner .arcraft-counter-content .counter { margin-inline: auto; padding-right: 0; justify-content: center; }
.arcraft-counter-text { display: block; overflow-wrap: anywhere; }

/* ---------- 5. Services grid ---------- */
.arcraft-svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 32px);
}
@media (min-width: 640px)  { .arcraft-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .arcraft-svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.arcraft-svc-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.arcraft-svc-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 6. Timeline / process ---------- */
@media (max-width: 991.98px) {
  .arcraft-about-sec-thumbnail { max-width: 520px; margin: 40px auto 0; }
}

/* ---------- 7. Tech marquee ---------- */
.premium-tech-card { flex: 0 0 auto; }
.tech-logo img { width: clamp(32px, 3vw, 56px); height: clamp(32px, 3vw, 56px); object-fit: contain; }
@media (max-width: 575.98px) {
  .tech-fade { width: 40px; }
  .premium-tech-card { padding-inline: 14px; }
}

/* ---------- 8. Bento gallery ---------- */
@media (max-width: 991.98px) {
  #arcraftBento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 16px; }
  #arcraftBento .arcraft-tile { grid-column: auto !important; grid-row: auto !important; min-height: 0; }
  #arcraftBento .arcraft-tile:first-child { grid-column: 1 / -1 !important; }
}
@media (max-width: 575.98px) {
  #arcraftBento { grid-template-columns: 1fr; grid-auto-rows: 240px; }
}
.arcraft-tile-media img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) {            /* touch: no tilt / cursor-light jitter */
  .arcraft-tile, .arcraft-tilt-anim { transform: none !important; }
  .arcraft-tile-glow { display: none; }
}

/* ---------- 9. Advantage video + chips ---------- */
.arcraft-adv-frame { max-width: 100%; }
.arcraft-about-video { aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 575.98px) {
  .arcraft-adv-chip { position: static !important; margin-top: 12px; }
  .arcraft-adv-frame { display: grid; gap: 0; }
}
.arcraft-nav-effect-activation { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.arcraft-nav-effect-activation::-webkit-scrollbar { display: none; }

/* ---------- 10. Testimonials ---------- */
.arcraft-tst-card { width: clamp(270px, 82vw, 420px); }
@media (min-width: 1600px) { .arcraft-tst-card { width: 460px; } }

/* ---------- 11. FAQ ---------- */
.arcraft-accordion .accordion-button { gap: 12px; text-align: left; }
.arcraft-accordion-arrow { flex: 0 0 auto; margin-left: auto; }

/* ---------- 12. CTA logo + icon arch ---------- */
/* only the big logo, NOT the 40px arch icons */
.arcraft-progress-chart-2 .circle-3 > div:first-child > img {
  width: min(100%, 900px) !important;
  height: auto;
  margin-inline: auto;
  display: block;
}
/* fluid arch: icons are positioned in % by the script (see arch-fluid.js) */
.arcraft-progress-chart-2 .arch-container {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.arcraft-progress-chart-2 .arch-icon {
  position: absolute;
  width: 11.5%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
}
.arcraft-progress-chart-2 .arch-icon img { width: 100% !important; height: 100% !important; object-fit: contain; }

/* ---------- 13. Large desktop + 4K scaling ---------- */
@media (min-width: 1600px) {
  .container { max-width: 1520px; }
}
@media (min-width: 1920px) {
  .container { max-width: 1760px; }
}
@media (min-width: 2560px) {
  .container { max-width: 2200px; }
  .arcraft-hero { min-height: 70vh; display: flex; align-items: center; }
}

/* ---------- 14. Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .tech-marquee-row, .arcraft-tst-track { animation: none !important; }
}

/* ---------- 15. Tech icon arch: look + rotation (works on mobile, laptop, 4K) ---------- */
.arcraft-progress-chart-2 .arch-container::before {      /* orbit ring */
  content: "";
  position: absolute;
  inset: 15.6%;                                          /* matches radius 34.4% */
  border: 1px dashed rgba(127, 127, 127, .35);
  border-radius: 50%;
  pointer-events: none;
}
.arcraft-progress-chart-2 .arch-container {
  animation: archSpin 40s linear infinite;
  will-change: transform;
}
.arcraft-progress-chart-2 .arch-icon {
  display: grid;
  place-items: center;
  padding: 2.2%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.arcraft-progress-chart-2 .arch-icon img {
  animation: archSpinRev 40s linear infinite;            /* keeps logos upright */
}
.arcraft-progress-chart-2 .arch-container:hover,
.arcraft-progress-chart-2 .arch-container:hover .arch-icon img { animation-play-state: paused; }

@keyframes archSpin    { to { transform: rotate(360deg); } }
@keyframes archSpinRev { to { transform: rotate(-360deg); } }

@media (max-width: 575.98px) {
  .arcraft-progress-chart-2 .arch-container,
  .arcraft-progress-chart-2 .arch-icon img { animation-duration: 55s; }   /* calmer on phones */
  .arcraft-progress-chart-2 .arch-icon { box-shadow: 0 3px 10px rgba(0, 0, 0, .15); }
}
@media (prefers-reduced-motion: reduce) {
  .arcraft-progress-chart-2 .arch-container,
  .arcraft-progress-chart-2 .arch-icon img { animation: none !important; }
}

.arcraft-cta { padding: clamp(56px, 9vw, 100px) 0; }
 
    .arcraft-cta .cta-lead { max-width: 560px; margin: 0 auto 1.6rem; opacity: .75; padding: 0 .5rem; }
 
    /* Buttons */
    .arcraft-cta .cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-bottom: 1.25rem; }
 
    .arcraft-cta .cta-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
        padding: .85rem 1.6rem; border-radius: 999px; font-weight: 600; text-decoration: none;
        transition: transform .2s, box-shadow .2s, border-color .2s;
    }
    .arcraft-cta .cta-btn:hover { transform: translateY(-2px); }
    .arcraft-cta .cta-btn-primary { background: var(--arcraft-primary, #3b5bdb); color: #fff; box-shadow: 0 10px 24px -8px rgba(59,91,219,.6); }
    .arcraft-cta .cta-btn-primary:hover { color: #fff; box-shadow: 0 14px 28px -8px rgba(59,91,219,.7); }
    .arcraft-cta .cta-btn-ghost { border: 1.5px solid rgba(128,138,160,.45); color: inherit; }
    .arcraft-cta .cta-btn-ghost:hover { border-color: var(--arcraft-primary, #3b5bdb); color: inherit; }
 
    /* Perks */
    .arcraft-cta .cta-perks { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center; list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: .9rem; opacity: .85; }
    .arcraft-cta .cta-perks li { display: inline-flex; align-items: center; gap: .4rem; }
    .arcraft-cta .cta-perks svg { color: #2f9e44; flex: none; }
 
    /* ---------- Bubble field ---------- */
    .arcraft-cta .cta-bubbles {
        position: relative;
        width: 100%;
        height: clamp(430px, 62vw, 620px);
        margin: 0 auto;
        touch-action: pan-y;
        user-select: none;
        -webkit-user-select: none;
    }
 
    .arcraft-cta .cta-bubbles::before {
        content: "";
        position: absolute;
        inset: 6% 8%;
        border-radius: 50%;
        background:
            radial-gradient(circle at 50% 50%, rgba(59,91,219,.16), rgba(59,91,219,0) 62%),
            radial-gradient(circle at 25% 30%, rgba(15,157,154,.12), rgba(15,157,154,0) 45%),
            radial-gradient(circle at 78% 72%, rgba(112,72,232,.12), rgba(112,72,232,0) 45%);
        filter: blur(14px);
        pointer-events: none;
    }
 
    /* Logo in the middle */
    .arcraft-cta .cta-bubble-logo {
        position: absolute;
        top: 50%; left: 50%;
        width: clamp(96px, 20vw, 150px);
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        display: grid; place-items: center;
        background: #fff;
        border-radius: 50%;
        z-index: 2;
        box-shadow: 0 18px 44px -14px rgba(27,35,64,.45);
        pointer-events: none;
    }
    .arcraft-cta .cta-bubble-logo img { width: 62%; height: auto; position: relative; z-index: 1; }
 
    .arcraft-cta .cta-bubble-logo::before,
    .arcraft-cta .cta-bubble-logo::after {
        content: "";
        position: absolute; inset: 0;
        border-radius: 50%;
        border: 2px solid rgba(59,91,219,.35);
        animation: ctaPing 3.2s ease-out infinite;
        pointer-events: none;
    }
    .arcraft-cta .cta-bubble-logo::after { animation-delay: 1.6s; }
 
    @keyframes ctaPing {
        0%   { transform: scale(1);   opacity: .8; }
        100% { transform: scale(1.9); opacity: 0; }
    }
 
    /* A bubble: JS moves .bubble, CSS bobs .b-bob, hover scales .b-inner */
    .arcraft-cta .bubble {
        position: absolute;
        left: 0; top: 0;
        width: var(--s, 56px);
        height: var(--s, 56px);
        will-change: transform;
        cursor: grab;
        touch-action: none;
        z-index: 1;
    }
    .arcraft-cta .bubble.is-drag { cursor: grabbing; z-index: 6; }
    .arcraft-cta .bubble:hover { z-index: 5; }
    .arcraft-cta .bubble:focus-visible { outline: 3px solid #8fb4ff; outline-offset: 3px; border-radius: 50%; }
 
    .arcraft-cta .b-bob { width: 100%; height: 100%; animation: ctaBob 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
 
    @keyframes ctaBob {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50%      { transform: translateY(-7px) rotate(3deg); }
    }
 
    .arcraft-cta .b-inner {
        position: relative;
        width: 100%; height: 100%;
        display: grid; place-items: center;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 24%,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.55) 34%,
            color-mix(in srgb, var(--c) 14%, white) 68%,
            color-mix(in srgb, var(--c) 34%, white) 100%);
        border: 1px solid color-mix(in srgb, var(--c) 38%, white);
        box-shadow:
            inset -6px -8px 14px color-mix(in srgb, var(--c) 22%, transparent),
            inset 5px 6px 10px rgba(255,255,255,.9),
            0 14px 26px -14px var(--c);
        transition: transform .22s cubic-bezier(.3,1.6,.5,1), box-shadow .22s;
    }
 
    /* glossy highlight */
    .arcraft-cta .b-inner::before {
        content: "";
        position: absolute;
        top: 11%; left: 17%;
        width: 34%; height: 20%;
        border-radius: 50%;
        background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0));
        transform: rotate(-28deg);
        pointer-events: none;
    }
 
    .arcraft-cta .bubble:hover .b-inner {
        transform: scale(1.16);
        box-shadow:
            inset -6px -8px 14px color-mix(in srgb, var(--c) 26%, transparent),
            inset 5px 6px 10px rgba(255,255,255,.9),
            0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent),
            0 18px 30px -12px var(--c);
    }
 
    .arcraft-cta .bubble[data-type="tech"] img { width: 52%; height: 52%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
 
    /* Social bubbles: solid brand colour with a white icon */
    .arcraft-cta .b-social {
        background: radial-gradient(circle at 30% 24%, color-mix(in srgb, var(--c) 55%, white) 0%, var(--c) 60%, color-mix(in srgb, var(--c) 78%, black) 100%);
        border-color: color-mix(in srgb, var(--c) 70%, white);
    }
    .arcraft-cta .b-social .ico {
        width: 44%; height: 44%;
        background-color: #fff;
        -webkit-mask: var(--icon) center / contain no-repeat;
        mask: var(--icon) center / contain no-repeat;
        position: relative; z-index: 1;
        pointer-events: none;
    }
 
    /* Name label */
    .arcraft-cta .bubble::after {
        content: attr(data-name);
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%) scale(.9);
        background: #1b2340; color: #fff;
        font-size: .72rem; padding: .2rem .55rem; border-radius: 6px;
        white-space: nowrap; opacity: 0; pointer-events: none;
        transition: opacity .15s, transform .15s;
    }
    .arcraft-cta .bubble:hover::after,
    .arcraft-cta .bubble:focus-visible::after { opacity: 1; transform: translateX(-50%) scale(1); }
 
    /* Pop / respawn */
    .arcraft-cta .bubble.pop .b-inner { animation: ctaPop .38s ease-out forwards; }
    .arcraft-cta .bubble.pop-in .b-inner { animation: ctaPopIn .45s cubic-bezier(.3,1.6,.5,1); }
    .arcraft-cta .bubble.wiggle .b-inner { animation: ctaWiggle .4s ease; }
 
    @keyframes ctaPop {
        0%   { transform: scale(1);    opacity: 1; }
        60%  { transform: scale(1.45); opacity: .6; }
        100% { transform: scale(1.8);  opacity: 0; }
    }
    @keyframes ctaPopIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
    @keyframes ctaWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.1); } 75% { transform: rotate(14deg) scale(1.1); } }
 
    .arcraft-cta .cta-hint { text-align: center; font-size: .82rem; opacity: .6; margin: .75rem 0 0; }
 
    @media (max-width: 767.98px) {
        .arcraft-cta .cta-actions { flex-direction: column; align-items: stretch; padding: 0 1rem; }
        .arcraft-cta .cta-perks { flex-direction: column; align-items: center; gap: .4rem; }
    }
 
    @media (max-width: 575.98px) {
        .arcraft-cta .cta-bubbles { height: 460px; }
        .arcraft-cta .bubble::after { display: none; }
    }
 
    @media (prefers-reduced-motion: reduce) {
        .arcraft-cta .b-bob,
        .arcraft-cta .cta-bubble-logo::before,
        .arcraft-cta .cta-bubble-logo::after { animation: none; }
    }