/**
* Hernández Ortiz B.V.
* https://hernandez-ortiz.com/
* Updated: Oct 31 2025 with Bootstrap v5.3.8
*/

/* FONTS:BEGIN */
/* Generated by scripts/fetch-fonts.py. Do not edit inside this region.
 *
 * Self-hosted so the site issues no third-party request, which is what the
 * privacy statement claims. Roboto and Inter are variable fonts: one file per
 * subset carries every weight, so they declare a weight range rather than one
 * face per weight. Ubuntu is static and declares a face per weight.
 *
 * unicode-range means a browser fetches latin-ext only when a page needs it. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/ubuntu-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ubuntu-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ubuntu-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ubuntu-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/ubuntu-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ubuntu-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ubuntu-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ubuntu-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* FONTS:END */

/*--------------------------------------------------------------
# Font & Color Variables
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Ubuntu",  sans-serif;
  --nav-font: "Inter",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Body text. 9.74:1 on white. Softer than near-black, which reads harsh at length */
  --heading-color: #282828; /* Headings. 12.63:1 on white */
  --accent-color: #e38c2b; /* Brand orange, as on the letterhead and CV. Fills, buttons, icons and borders. Text placed on it is dark, never white */
  --surface-color: #ffffff; /* Cards and boxed elements, lifted off the tinted section backgrounds */
  --contrast-color: #282828; /* Text on orange fills. Dark on brand orange is 5.65:1; white would be 2.61:1 */
  --accent-text: #a05615; /* Deeper orange for inline text links, where 4.5:1 is required. 5.47:1 on white */
  --brand-sage: #c5d8cd; /* Brand secondary. Panels, always with dark text. 9.36:1 */
  --logo-color: #a05615; /* Logo wordmark. Deeper orange, so it is legible type on a light bar: 5.47:1 */
  --logo-mark-color: #e38c2b; /* Logo atom device. Brand orange, decorative and always beside the wordmark */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #a05615;  /* Orange navigation, as on the CV. Deeper orange for light backgrounds: 5.47:1 */
  --nav-hover-color: #a05615; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #a05615; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f5f2ef; /* Warm off-white. Sits beside orange without competing, unlike a green tint */
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #12161c;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #1e242c;
  --contrast-color: #282828;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-text);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-text), #000000 20%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(0, 0, 0, 0);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

/* Brand lockup. The wordmark is filled with currentColor and the atom with
   --logo-mark-color, so both follow the header state blocks below instead of
   being restated once per state. */
.header .logo .brand-logo {
  display: block;
  width: auto;
  height: 34px;
  color: var(--logo-color);
}

@media (max-width: 575px) {
  .header .logo .brand-logo {
    height: 26px;
  }
}

.header .header-social-links {
  padding-right: 15px;
}

.header .header-social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding-left: 6px;
  display: inline-block;
  transition: 0.3s;
  font-size: 16px;
}

.header .header-social-links a:hover {
  color: var(--accent-color);
}

.header .header-social-links a i {
  line-height: 0px;
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .header-social-links {
    order: 2;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: rgba(255, 255, 255, 0.95);
  --default-color: #444444;
  --heading-color: #282828;
  --nav-color: #a05615;
  --logo-color: #a05615; /* 5.47:1 once the bar turns white */
  --logo-mark-color: #e38c2b;
}

/* Index Page Header
------------------------------*/
.index-page .header {
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --nav-color: #e38c2b; /* Brand orange on the dark hero: 6.96:1 */
  --nav-hover-color: #ffffff; /* 18.15:1 on the hero */
  --logo-color: #e38c2b; /* The wordmark can be brand orange here: 6.96:1 on the hero */
  --logo-mark-color: #c5d8cd; /* Sage atom, as on the letterhead. 12.17:1 on the hero */
}

/* Index page once scrolled: the bar turns white, so the text has to flip back to dark.
   Needs its own rule because .index-page .header above sets white for the dark hero and,
   at equal specificity, wins on source order. .index-page.scrolled is 0,3,0 and beats it. */
.index-page.scrolled .header {
  --default-color: #444444;
  --heading-color: #282828;
  --nav-color: #a05615; /* Deeper orange once the bar turns white: 5.47:1 */
  --nav-hover-color: #282828; /* 14.74:1 on white */
  --logo-color: #a05615; /* Sage would vanish on white, so the pairing flips with the bar */
  --logo-mark-color: #e38c2b;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 15px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -27px;
    left: 0;
    background-color: var(--accent-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
    font-weight: 600;
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Language Switch
--------------------------------------------------------------*/
/* Lives inside the header's social-link group, beside LinkedIn and GitHub. Two
   reasons it is not in the nav list: in the nav it collapses into the mobile panel
   with everything else, and a language control you have to open a menu to find is
   one people do not find. And as a third child of the header container it would be
   spread out mid-bar by justify-content: space-between, instead of reading as part
   of the cluster on the right.

   The header of src/index.html is hand-written, so this would otherwise be a thing
   to maintain twice. It is a managed region instead, like the nav and the hreflang
   block.

   The current language is the bar's heading colour and semibold; the other is a
   link in the nav colour. Both at full opacity: a faded 65% #a05615 over a white
   bar computes to about 2.6:1, which reads as "subtle" on a designer's screen and
   as unreadable everywhere else. The distinction carries on weight and hue.

   Every colour is a header state variable, so the switch flips with the bar in all
   four states rather than carrying a palette of its own. */
.header .header-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
  padding-right: 12px;
  border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  font-family: var(--nav-font);
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}

/* Outranks `.header .header-social-links a`, which would otherwise mute these to
   the icon colour and give them the icons' padding. */
.header .header-lang .lang-current {
  color: var(--heading-color);
  font-weight: 600;
}

.header .header-lang .lang-alt {
  color: var(--nav-color);
  font-size: 15px;
  font-weight: 400;
  padding-left: 0;
  transition: 0.3s;
}

.header .header-lang .lang-alt:hover {
  color: var(--nav-hover-color);
}

@media (max-width: 575px) {
  .header .header-lang {
    gap: 6px;
    margin-right: 9px;
    padding-right: 9px;
    font-size: 14px;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo .brand-logo {
  display: block;
  width: auto;
  height: 38px;
  color: var(--logo-color);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding: 25px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 8px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid var(--accent-color);
  border-top-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000000 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 400;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 72px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 57px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 160px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 120px 0 60px 0;
}

.hero .hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero .hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero .hero-background .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--background-color), transparent 20%) 0%, color-mix(in srgb, var(--background-color), transparent 10%) 100%);
}

.hero .container {
  position: relative;
  z-index: 2;
  padding: 40px 15px;
}

.hero h1 {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
}

.hero p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 40px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  max-width: 500px;
}

.hero .hero-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.hero .hero-actions .btn-primary {
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.hero .hero-actions .btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 40%);
  color: var(--contrast-color);
}

.hero .hero-actions .btn-secondary {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
}

.hero .hero-actions .btn-secondary i {
  font-size: 24px;
  color: var(--accent-color);
}

.hero .hero-actions .btn-secondary:hover {
  color: var(--accent-color);
  transform: translateX(5px);
}

.hero .hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.hero .hero-stats .stat-item {
  text-align: left;
}

.hero .hero-stats .stat-item .stat-number {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 4px;
}

.hero .hero-stats .stat-item .stat-label {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero .hero-visual {
  position: relative;
}

.hero .feature-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  margin-bottom: 20px;
  height: calc(50% - 10px);
}

.hero .feature-card:hover {
  transform: translateY(-5px);
}

.hero .feature-card i {
  font-size: 32px;
  color: var(--accent-color);
  margin-bottom: 12px;
}

.hero .feature-card span {
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.hero .feature-card:last-child {
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .hero .hero-visual {
    margin-top: 60px;
  }

  .hero .feature-card {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 42px;
  }

  .hero p {
    font-size: 18px;
  }

  .hero .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .hero .hero-stats {
    gap: 24px;
  }

  .hero .feature-card {
    padding: 16px;
  }

  .hero .feature-card i {
    font-size: 24px;
  }

  .hero .feature-card span {
    font-size: 12px;
  }
}

@media (max-width: 576px) {
  .hero h1 {
    font-size: 36px;
  }

  .hero .hero-visual {
    margin-top: 40px;
  }

  .hero .feature-card {
    padding: 12px;
    margin-bottom: 12px;
  }

  .hero .feature-card i {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .hero .feature-card span {
    font-size: 11px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .about-content h2 {
  font-size: 2.25rem;
  font-family: var(--heading-font);
  color: var(--heading-color);
  font-weight: 700;
}

.about .about-content .lead {
  font-size: 1.2rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.about .about-content .btn-primary {
  background: var(--accent-color);
  border: none;
  color: var(--contrast-color);
  font-weight: 600;
  padding: 0.75rem 2.2rem;
  border-radius: 2rem;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent-color) 30%, transparent 85%);
  transition: background 0.3s, box-shadow 0.3s;
}

.about .about-content .btn-primary:hover,
.about .about-content .btn-primary:focus {
  background: color-mix(in srgb, var(--accent-color), #000 12%);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent-color), #212529 30%);
  color: var(--contrast-color);
}

.about .about-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  max-width: 420px;
  margin-inline: auto;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 1.25rem;
  box-shadow: 0 2px 20px 0 color-mix(in srgb, var(--accent-color) 9%, transparent 95%);
}

.about .about-card {
  background: var(--surface-color);
  border-radius: 1.25rem;
  padding: 2.2rem 1.5rem 1.5rem 1.5rem;
  box-shadow: 0 2px 20px 0 color-mix(in srgb, var(--accent-color) 9%, transparent 95%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: box-shadow 0.3s, transform 0.3s;
}

.about .about-card .icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-sage);
  color: var(--accent-text);
  font-size: 2rem;
  margin-bottom: 1rem;
  box-shadow: 0 3px 10px 0 color-mix(in srgb, var(--brand-sage) 60%, transparent 40%);
  transition: background 0.3s, color 0.3s;
}

.about .about-card h5 {
  font-size: 1.22rem;
  font-family: var(--heading-font);
  color: var(--heading-color);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.about .about-card p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 1rem;
  margin-bottom: 0;
}

.about .about-card:hover,
.about .about-card:focus-within {
  box-shadow: 0 8px 28px 0 color-mix(in srgb, var(--accent-color) 23%, transparent 80%);
  transform: translateY(-5px) scale(1.03);
}

.about .about-card:hover .icon-wrap,
.about .about-card:focus-within .icon-wrap {
  background: var(--accent-color);
  color: var(--contrast-color);
}

@media (max-width: 992px) {
  .about .about-content h2 {
    font-size: 2rem;
  }

  .about .about-card {
    padding: 1.5rem 1rem 1rem 1rem;
  }
}

@media (max-width: 768px) {
  .about .about-content h2 {
    font-size: 1.6rem;
  }

  .about .about-card {
    padding: 1rem;
  }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  height: 100%;
  padding: 2rem;
  background-color: var(--surface-color);
  border-radius: 12px;
  box-shadow: 0 5px 25px -5px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

.services .service-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background-color: var(--accent-color);
  transition: height 0.3s ease-in-out;
}

.services .service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px -5px rgba(0, 0, 0, 0.08);
}

.services .service-item:hover::before {
  height: 100%;
}

.services .service-item:hover .icon i {
  transform: scale(1.1) rotate(5deg);
  color: var(--accent-color);
}

.services .service-item:hover .link-item i {
  transform: translateX(5px);
}

.services .service-item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand-sage);
  margin-bottom: 1.5rem;
}

.services .service-item .icon i {
  font-size: 1.9rem;
  color: var(--accent-text);
  transition: all 0.3s ease-in-out;
}

.services .service-item h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--heading-color);
  font-family: var(--heading-font);
}

.services .service-item p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.services .service-item .card-links {
  margin-top: auto;
}

.services .service-item .card-links .link-item {
  display: inline-flex;
  align-items: center;
  color: var(--accent-color);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.services .service-item .card-links .link-item i {
  margin-left: 0.5rem;
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.services .service-item .card-links .link-item:hover {
  color: color-mix(in srgb, var(--accent-color), #000000 20%);
}

@media (max-width: 991px) {
  .services .card-item {
    padding: 1.75rem;
  }

  .services .card-item h3 {
    font-size: 1.35rem;
  }

  .services .card-item .icon i {
    font-size: 2.25rem;
  }
}

@media (max-width: 767px) {
  .services .card-item {
    padding: 1.5rem;
  }

  .services .card-item h3 {
    font-size: 1.25rem;
  }

  .services .card-item .icon i {
    font-size: 2rem;
  }

  .services .card-item:hover {
    transform: translateY(-3px);
  }
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .features-intro {
  padding-right: 40px;
}

@media (max-width: 991px) {
  .features .features-intro {
    padding-right: 0;
    margin-bottom: 60px;
  }
}

.features .features-intro .intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 400;
  color: var(--accent-color);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
}

.features .features-intro .intro-badge i {
  font-size: 16px;
}

.features .features-intro h2 {
  font-size: 42px;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

@media (max-width: 991px) {
  .features .features-intro h2 {
    font-size: 36px;
  }
}

@media (max-width: 576px) {
  .features .features-intro h2 {
    font-size: 32px;
  }
}

.features .features-intro p {
  font-size: 17px;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 40px;
}

.features .features-intro .metrics-display {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

@media (max-width: 576px) {
  .features .features-intro .metrics-display {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.features .features-intro .metrics-display .metric-card .metric-value {
  font-size: 28px;
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.features .features-intro .metrics-display .metric-card .metric-label {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 400;
}

.features .features-intro .link-explore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  color: var(--accent-color);
  transition: all 0.4s ease;
  padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
}

.features .features-intro .link-explore i {
  font-size: 18px;
  transition: transform 0.4s ease;
}

.features .features-intro .link-explore:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 20%);
  border-bottom-color: var(--accent-color);
}

.features .features-intro .link-explore:hover i {
  transform: translateX(6px);
}

.features .features-collection {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.features .features-collection .feature-item {
  background-color: var(--surface-color);
  padding: 32px;
  border-radius: 8px;
  transition: all 0.4s ease;
  border: 1px solid transparent;
}

@media (max-width: 576px) {
  .features .features-collection .feature-item {
    padding: 24px;
  }
}

.features .features-collection .feature-item:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
  transform: translateX(8px);
}

.features .features-collection .feature-item .feature-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 16px;
}

.features .features-collection .feature-item .feature-header .feature-icon-wrapper {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
}

.features .features-collection .feature-item .feature-header .feature-icon-wrapper i {
  font-size: 24px;
  color: var(--accent-color);
}

.features .features-collection .feature-item .feature-header .feature-meta {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

@media (max-width: 576px) {
  .features .features-collection .feature-item .feature-header .feature-meta {
    flex-direction: column;
    gap: 8px;
  }
}

.features .features-collection .feature-item .feature-header .feature-meta h3 {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.2px;
}

.features .features-collection .feature-item .feature-header .feature-meta .feature-tag {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.features .features-collection .feature-item .feature-header .feature-meta .feature-tag.active {
  background-color: color-mix(in srgb, #198754, transparent 88%);
  color: #198754;
}

.features .features-collection .feature-item .feature-header .feature-meta .feature-tag.beta {
  background-color: color-mix(in srgb, #0d6efd, transparent 88%);
  color: #0d6efd;
}

.features .features-collection .feature-item .feature-header .feature-meta .feature-tag.upcoming {
  background-color: color-mix(in srgb, var(--default-color), transparent 88%);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.features .features-collection .feature-item p {
  font-size: 15px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  margin: 0;
  padding-left: 68px;
}

@media (max-width: 576px) {
  .features .features-collection .feature-item p {
    padding-left: 0;
  }
}

/*--------------------------------------------------------------
# Tabs Section
--------------------------------------------------------------*/
.tabs .tabs-header {
  margin-bottom: 80px;
}

@media (max-width: 768px) {
  .tabs .tabs-header {
    margin-bottom: 60px;
  }
}

.tabs .tabs-header .nav-tabs {
  border: none;
  justify-content: center;
  gap: 0;
  background: var(--surface-color);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 2px 20px color-mix(in srgb, var(--default-color), transparent 94%);
}

@media (max-width: 768px) {
  .tabs .tabs-header .nav-tabs {
    flex-direction: column;
    gap: 4px;
  }
}

.tabs .tabs-header .nav-tabs .nav-item {
  flex: 1;
  cursor: pointer;
}

@media (max-width: 768px) {
  .tabs .tabs-header .nav-tabs .nav-item {
    flex: none;
    width: 100%;
  }
}

.tabs .tabs-header .nav-tabs .nav-link {
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.tabs .tabs-header .nav-tabs .nav-link.active {
  background: var(--accent-color);
}

.tabs .tabs-header .nav-tabs .nav-link.active .tab-content-preview .tab-number {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--contrast-color), transparent 85%);
}

.tabs .tabs-header .nav-tabs .nav-link.active .tab-content-preview .tab-text h6,
.tabs .tabs-header .nav-tabs .nav-link.active .tab-content-preview .tab-text small {
  color: var(--contrast-color);
}

.tabs .tabs-header .nav-tabs .nav-link:hover:not(.active) {
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.tabs .tabs-header .nav-tabs .nav-link:hover:not(.active) .tab-content-preview .tab-number {
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
}

.tabs .tabs-header .nav-tabs .nav-link .tab-content-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
}

@media (max-width: 768px) {
  .tabs .tabs-header .nav-tabs .nav-link .tab-content-preview {
    padding: 16px 20px;
    gap: 12px;
  }
}

.tabs .tabs-header .nav-tabs .nav-link .tab-content-preview .tab-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--default-color), transparent 92%);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .tabs .tabs-header .nav-tabs .nav-link .tab-content-preview .tab-number {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
}

.tabs .tabs-header .nav-tabs .nav-link .tab-content-preview .tab-text {
  text-align: left;
}

@media (max-width: 768px) {
  .tabs .tabs-header .nav-tabs .nav-link .tab-content-preview .tab-text {
    flex: 1;
  }
}

.tabs .tabs-header .nav-tabs .nav-link .tab-content-preview .tab-text h6 {
  margin: 0 0 2px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--heading-color);
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .tabs .tabs-header .nav-tabs .nav-link .tab-content-preview .tab-text h6 {
    font-size: 13px;
  }
}

.tabs .tabs-header .nav-tabs .nav-link .tab-content-preview .tab-text small {
  font-size: 11px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: all 0.3s ease;
  display: block;
  line-height: 1;
}

.tabs .tab-content .tab-pane {
  animation: fadeInContent 0.5s ease-in-out;
}

.tabs .tab-content .content-area {
  padding-right: 40px;
}

@media (max-width: 992px) {
  .tabs .tab-content .content-area {
    padding-right: 0;
    margin-bottom: 50px;
  }
}

.tabs .tab-content .content-area .content-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 24px;
}

.tabs .tab-content .content-area .content-badge i {
  font-size: 14px;
}

.tabs .tab-content .content-area h3 {
  font-size: 36px;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .tabs .tab-content .content-area h3 {
    font-size: 28px;
  }
}

@media (max-width: 576px) {
  .tabs .tab-content .content-area h3 {
    font-size: 24px;
  }
}

.tabs .tab-content .content-area p {
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .tabs .tab-content .content-area p {
    font-size: 15px;
  }
}

.tabs .tab-content .content-area .highlight-stats {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}

@media (max-width: 576px) {
  .tabs .tab-content .content-area .highlight-stats {
    gap: 24px;
  }
}

.tabs .tab-content .content-area .highlight-stats .stat-item .stat-value {
  display: block;
  font-size: 28px;
  font-weight: 300;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .tabs .tab-content .content-area .highlight-stats .stat-item .stat-value {
    font-size: 24px;
  }
}

.tabs .tab-content .content-area .highlight-stats .stat-item .stat-label {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tabs .tab-content .content-area .feature-points {
  margin-bottom: 40px;
}

.tabs .tab-content .content-area .feature-points .point-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.tabs .tab-content .content-area .feature-points .point-item:last-child {
  margin-bottom: 0;
}

.tabs .tab-content .content-area .feature-points .point-item i {
  font-size: 12px;
  color: var(--accent-color);
  margin-top: 4px;
  flex-shrink: 0;
}

.tabs .tab-content .content-area .feature-points .point-item span {
  font-size: 14px;
  line-height: 1.6;
  color: var(--default-color);
}

.tabs .tab-content .content-area .explore-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.tabs .tab-content .content-area .explore-link:hover {
  gap: 12px;
  color: var(--accent-color);
}

.tabs .tab-content .content-area .explore-link:hover i {
  transform: translate(2px, -2px);
}

.tabs .tab-content .content-area .explore-link i {
  font-size: 16px;
  transition: all 0.3s ease;
}

.tabs .tab-content .visual-content {
  position: relative;
  padding-left: 40px;
}

@media (max-width: 992px) {
  .tabs .tab-content .visual-content {
    padding-left: 0;
  }
}

.tabs .tab-content .visual-content img {
  width: 100%;
  border-radius: 8px;
}

.tabs .tab-content .visual-content .floating-element {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

@media (max-width: 768px) {
  .tabs .tab-content .visual-content .floating-element {
    bottom: 15px;
    right: 15px;
  }
}

.tabs .tab-content .visual-content .floating-element .floating-card {
  background: var(--surface-color);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  animation: floatAnimation 3s ease-in-out infinite;
}

@media (max-width: 768px) {
  .tabs .tab-content .visual-content .floating-element .floating-card {
    padding: 12px 16px;
    gap: 10px;
  }
}

.tabs .tab-content .visual-content .floating-element .floating-card i {
  font-size: 20px;
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .tabs .tab-content .visual-content .floating-element .floating-card i {
    font-size: 18px;
  }
}

.tabs .tab-content .visual-content .floating-element .floating-card .card-info span {
  display: block;
  font-size: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.tabs .tab-content .visual-content .floating-element .floating-card .card-info strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--heading-color);
}

@media (max-width: 768px) {
  .tabs .tab-content .visual-content .floating-element .floating-card .card-info strong {
    font-size: 12px;
  }
}

@keyframes fadeInContent {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatAnimation {

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

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

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  padding: 80px 0;
}

.call-to-action .content-wrapper {
  padding-right: 40px;
}

@media (max-width: 992px) {
  .call-to-action .content-wrapper {
    padding-right: 0;
    margin-bottom: 48px;
  }
}

.call-to-action .section-label {
  display: inline-block;
  color: var(--accent-color);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.call-to-action h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .call-to-action h2 {
    font-size: 28px;
  }
}

.call-to-action .content-wrapper>p {
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 32px;
}

.call-to-action .trust-metrics {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
  padding: 24px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 576px) {
  .call-to-action .trust-metrics {
    flex-direction: column;
    gap: 20px;
  }
}

.call-to-action .trust-metrics .metric-item .metric-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 4px;
}

.call-to-action .trust-metrics .metric-item .metric-label {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
}

.call-to-action .certifications {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.call-to-action .certifications img {
  height: 40px;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.call-to-action .certifications img:hover {
  opacity: 1;
}

.call-to-action .cta-box {
  background-color: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .call-to-action .cta-box {
    padding: 32px 24px;
  }
}

.call-to-action .cta-header {
  margin-bottom: 32px;
}

.call-to-action .cta-header h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .call-to-action .cta-header h3 {
    font-size: 24px;
  }
}

.call-to-action .cta-header p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
}

.call-to-action .benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  .call-to-action .benefits-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.call-to-action .benefit-item {
  display: flex;
  gap: 16px;
}

.call-to-action .benefit-item .benefit-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: 6px;
}

.call-to-action .benefit-item .benefit-icon i {
  font-size: 22px;
  color: var(--accent-color);
}

.call-to-action .benefit-item .benefit-content h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.call-to-action .benefit-item .benefit-content p {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
  line-height: 1.5;
}

.call-to-action .action-area {
  padding-top: 32px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.call-to-action .action-area .btn-primary,
.call-to-action .action-area .btn-secondary {
  display: inline-block;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.call-to-action .action-area .btn-primary {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: 2px solid var(--accent-color);
}

.call-to-action .action-area .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 10%);
  border-color: color-mix(in srgb, var(--accent-color), #000 10%);
  color: var(--contrast-color);
}

.call-to-action .action-area .btn-secondary {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
}

.call-to-action .action-area .btn-secondary:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

@media (min-width: 576px) {
  .call-to-action .action-area {
    flex-direction: row;
    align-items: center;
  }

  .call-to-action .action-area .btn-primary,
  .call-to-action .action-area .btn-secondary {
    flex: 1;
  }
}

.call-to-action .action-area .contact-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-top: 8px;
}

@media (min-width: 576px) {
  .call-to-action .action-area .contact-info {
    margin-top: 0;
    margin-left: auto;
    flex-shrink: 0;
  }
}

.call-to-action .action-area .contact-info i {
  font-size: 16px;
  color: var(--accent-color);
}

.call-to-action .action-area .contact-info strong {
  color: var(--default-color);
  font-weight: 600;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-card {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 8px;
  padding: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s;
}

.pricing .pricing-card:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pricing .pricing-card.featured {
  border-color: var(--accent-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pricing .pricing-card.featured .popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 6px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing .pricing-card.featured .btn-plan {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .pricing-card.featured .btn-plan:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
}

.pricing .plan-header {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  padding-bottom: 24px;
  margin-bottom: 24px;
}

.pricing .plan-header .plan-name {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--heading-color);
}

.pricing .plan-header .plan-subtitle {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
}

.pricing .plan-pricing {
  margin-bottom: 32px;
}

.pricing .plan-pricing .price-wrapper {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}

.pricing .plan-pricing .price-wrapper.custom {
  justify-content: flex-start;
}

.pricing .plan-pricing .price-wrapper.custom .custom-text {
  font-size: 32px;
  font-weight: 700;
  color: var(--heading-color);
}

.pricing .plan-pricing .price-wrapper .currency {
  font-size: 20px;
  font-weight: 500;
  color: var(--heading-color);
}

.pricing .plan-pricing .price-wrapper .amount {
  font-size: 48px;
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1;
}

.pricing .plan-pricing .price-wrapper .amount.annual-price {
  display: none;
}

.pricing .plan-pricing .price-wrapper .period {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 400;
}

.pricing .plan-pricing .billing-info {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0;
}

.pricing .plan-pricing .billing-info.annual-billing {
  display: none;
}

.pricing .plan-features {
  flex-grow: 1;
  margin-bottom: 32px;
}

.pricing .plan-features .features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing .plan-features .features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  font-size: 15px;
  color: var(--default-color);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);
}

.pricing .plan-features .features-list li:last-child {
  border-bottom: none;
}

.pricing .plan-features .features-list li i {
  color: var(--accent-color);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.pricing .plan-features .features-list li span {
  flex: 1;
}

.pricing .plan-action {
  text-align: center;
}

.pricing .plan-action .btn-plan {
  display: block;
  width: 100%;
  padding: 14px 28px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s;
}

.pricing .plan-action .btn-plan:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
  border-color: var(--accent-color);
}

.pricing .plan-action .trial-info {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 12px 0 0;
}

.pricing .pricing-footer {
  text-align: center;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.pricing .pricing-footer .footer-text {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 16px;
}

.pricing .pricing-footer .footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pricing .pricing-footer .footer-links a {
  font-size: 14px;
  color: var(--accent-color);
  font-weight: 500;
}

.pricing .pricing-footer .footer-links a:hover {
  color: color-mix(in srgb, var(--accent-color), black 15%);
}

.pricing .pricing-footer .footer-links .divider {
  color: color-mix(in srgb, var(--default-color), transparent 80%);
}

@media (max-width: 992px) {
  .pricing .pricing-card {
    margin-bottom: 24px;
  }
}

@media (max-width: 768px) {
  .pricing .pricing-toggle {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  .pricing .pricing-toggle .toggle-option {
    font-size: 14px;
  }

  .pricing .pricing-card {
    padding: 24px;
  }

  .pricing .plan-pricing .price-wrapper .amount {
    font-size: 40px;
  }

  .pricing .plan-pricing .price-wrapper .currency {
    font-size: 18px;
  }

  .pricing .plan-pricing .price-wrapper .period {
    font-size: 14px;
  }

  .pricing .plan-pricing .price-wrapper.custom .custom-text {
    font-size: 28px;
  }

  .pricing .plan-features .features-list li {
    font-size: 14px;
  }

  .pricing .plan-features .features-list li i {
    font-size: 16px;
  }

  .pricing .pricing-footer .footer-links {
    flex-direction: column;
    gap: 8px;
  }

  .pricing .pricing-footer .footer-links .divider {
    display: none;
  }
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-wrapper {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 6px;
  padding: 0;
}

.faq .faq-item {
  margin-bottom: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  transition: all 0.3s ease-in-out;
}

.faq .faq-item:last-child {
  border-bottom: none;
}

.faq .faq-item.faq-active {
  background-color: color-mix(in srgb, var(--accent-color), transparent 97%);
}

.faq .faq-item.faq-active .faq-header h4 {
  color: var(--accent-color);
  font-weight: 600;
}

.faq .faq-item.faq-active .faq-header .faq-icon {
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.faq .faq-item.faq-active .faq-header .faq-icon i {
  transform: rotate(180deg);
}

.faq .faq-item.faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
}

.faq .faq-item .faq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  cursor: pointer;
  gap: 20px;
  transition: all 0.3s ease;
}

.faq .faq-item .faq-header:hover {
  background-color: color-mix(in srgb, var(--default-color), transparent 98%);
}

.faq .faq-item .faq-header:hover .faq-icon {
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
}

.faq .faq-item .faq-header h4 {
  flex: 1;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 500;
  color: var(--heading-color);
  transition: all 0.3s ease;
  line-height: 1.6;
}

.faq .faq-item .faq-header .faq-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  border-radius: 4px;
  color: var(--heading-color);
  font-size: 16px;
  transition: all 0.3s ease;
}

.faq .faq-item .faq-header .faq-icon i {
  transition: transform 0.3s ease;
}

.faq .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-item .faq-content .content-inner {
  padding: 0 32px 24px 32px;
  overflow: hidden;
}

.faq .faq-item .faq-content .content-inner p {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 400;
}

@media (max-width: 768px) {
  .faq .faq-item .faq-header {
    padding: 20px 24px;
    gap: 16px;
  }

  .faq .faq-item .faq-header h4 {
    font-size: 16px;
  }

  .faq .faq-item .faq-header .faq-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .faq .faq-item .faq-content .content-inner {
    padding: 0 24px 20px 24px;
  }

  .faq .faq-item .faq-content .content-inner p {
    font-size: 15px;
  }
}

@media (max-width: 576px) {
  .faq .faq-item .faq-header {
    padding: 18px 20px;
    gap: 12px;
  }

  .faq .faq-item .faq-header h4 {
    font-size: 15px;
  }

  .faq .faq-item .faq-header .faq-icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .faq .faq-item .faq-content .content-inner {
    padding: 0 20px 18px 20px;
  }

  .faq .faq-item .faq-content .content-inner p {
    font-size: 14px;
  }
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-header {
  margin-bottom: 50px;
}

.team .team-header h2 {
  position: relative;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.team .team-header h2:before {
  content: "";
  position: absolute;
  width: 70px;
  height: 4px;
  background: var(--accent-color);
  bottom: 0;
  left: 0;
}

.team .team-header p {
  font-size: 17px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  max-width: 600px;
}

@media (max-width: 991px) {
  .team .team-header {
    margin-bottom: 30px;
    text-align: center;
  }

  .team .team-header h2:before {
    left: 50%;
    transform: translateX(-50%);
  }

  .team .team-header p {
    margin: 0 auto;
  }

  .team .team-header .team-controls {
    margin-top: 30px;
    justify-content: center;
  }
}

.team .team-controls {
  display: flex;
  gap: 12px;
}

.team .team-controls .team-control-btn {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid var(--accent-color);
  border-radius: 50%;
  color: var(--accent-color);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.team .team-controls .team-control-btn:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.team .team-slider {
  padding: 10px 5px 40px;
}

.team .team-slider .swiper-wrapper {
  height: auto !important;
}

.team .team-member {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-color);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  height: 100%;
}

.team .team-member:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.team .team-member:hover .member-image .member-social {
  opacity: 1;
  bottom: 20px;
}

.team .team-member:hover .member-image:before {
  opacity: 0.8;
}

.team .team-member .member-image {
  position: relative;
  overflow: hidden;
}

.team .team-member .member-image:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 1;
}

.team .team-member .member-image img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.team .team-member .member-image .member-social {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 8px;
  justify-content: center;
  width: 100%;
  bottom: -30px;
  opacity: 0;
  transition: all 0.4s ease;
}

.team .team-member .member-image .member-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--contrast-color);
  border-radius: 50%;
  color: var(--accent-color);
  font-size: 15px;
  transition: all 0.3s ease;
}

.team .team-member .member-image .member-social a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
}

.team .team-member .member-content {
  padding: 25px;
}

.team .team-member .member-content h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}

.team .team-member .member-content span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 15px;
}

.team .team-member .member-content p {
  font-size: 14px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  background: linear-gradient(180deg, var(--background-color) 0%, color-mix(in srgb, var(--accent-color), transparent 98%) 100%);
  position: relative;
}

.contact:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent-color), transparent 94%), transparent);
  pointer-events: none;
}

.contact .container {
  position: relative;
  z-index: 1;
}

.contact .quick-contact-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact .contact-card {
  background: var(--surface-color);
  padding: 28px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 94%);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--default-color), transparent 96%);
  transition: all 0.3s ease;
}

.contact .contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--accent-color), transparent 92%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 85%);
}

.contact .contact-card:hover .icon-wrapper {
  background: var(--accent-color);
  transform: scale(1.05);
}

.contact .contact-card:hover .icon-wrapper i {
  color: var(--contrast-color);
}

.contact .contact-card .icon-wrapper {
  width: 56px;
  height: 56px;
  background: color-mix(in srgb, var(--accent-color), transparent 94%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: all 0.3s ease;
}

.contact .contact-card .icon-wrapper i {
  font-size: 26px;
  color: var(--accent-color);
  transition: all 0.3s ease;
}

.contact .contact-card h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--heading-color);
}

.contact .contact-card .contact-detail {
  font-size: 15px;
  font-weight: 500;
  color: var(--default-color);
  margin-bottom: 6px;
  line-height: 1.5;
}

.contact .contact-card .availability {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact .contact-card .availability:before {
  content: "";
  width: 6px;
  height: 6px;
  background: color-mix(in srgb, var(--accent-color), #10b981 50%);
  border-radius: 50%;
  display: inline-block;
}

.contact .trust-indicators {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact .trust-indicators .indicator-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: color-mix(in srgb, var(--accent-color), transparent 97%);
  border-radius: 14px;
}

.contact .trust-indicators .indicator-item .indicator-icon {
  width: 42px;
  height: 42px;
  background: var(--surface-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact .trust-indicators .indicator-item .indicator-icon i {
  font-size: 20px;
  color: var(--accent-color);
}

.contact .trust-indicators .indicator-item .indicator-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact .trust-indicators .indicator-item .indicator-text strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
}

.contact .trust-indicators .indicator-item .indicator-text span {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.contact .main-form-container {
  background: var(--surface-color);
  padding: 48px;
  border-radius: 24px;
  box-shadow: 0 8px 40px color-mix(in srgb, var(--default-color), transparent 94%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.contact .form-intro {
  margin-bottom: 36px;
}

.contact .form-intro .intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 92%), color-mix(in srgb, var(--accent-color), transparent 96%));
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 20px;
}

.contact .form-intro .intro-badge i {
  font-size: 14px;
}

.contact .form-intro h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--heading-color);
}

.contact .form-intro p {
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 0;
}

.contact .modern-form .form-control,
.contact .modern-form .form-select {
  height: 58px;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 14px;
  background: var(--surface-color);
  color: var(--default-color);
  font-size: 15px;
  padding: 16px 20px;
  transition: all 0.3s ease;
}

.contact .modern-form .form-control:focus,
.contact .modern-form .form-select:focus {
  border-color: var(--accent-color);
  background: var(--surface-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 94%);
  outline: none;
}

.contact .modern-form .form-control::placeholder,
.contact .modern-form .form-select::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.contact .modern-form .form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 16px 12px;
  padding-right: 48px;
}

.contact .modern-form textarea.form-control {
  height: auto !important;
  min-height: 140px;
  padding: 16px 20px;
  resize: none;
}

.contact .modern-form .form-extras {
  margin-top: 20px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--accent-color), transparent 97%);
  border-radius: 12px;
}

.contact .modern-form .form-extras .form-check {
  margin-bottom: 0;
}

.contact .modern-form .form-extras .form-check .form-check-input {
  width: 20px;
  height: 20px;
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact .modern-form .form-extras .form-check .form-check-input:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.contact .modern-form .form-extras .form-check .form-check-input:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 92%);
}

.contact .modern-form .form-extras .form-check .form-check-label {
  font-size: 14px;
  color: var(--default-color);
  margin-left: 8px;
  cursor: pointer;
}

.contact .modern-form .btn-submit {
  width: 100%;
  background: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  padding: 18px 32px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  margin-top: 24px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.contact .modern-form .btn-submit:hover {
  background: color-mix(in srgb, var(--accent-color), #000 10%);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.contact .modern-form .btn-submit:hover i {
  transform: translateX(4px);
}

.contact .modern-form .btn-submit:active {
  transform: translateY(0);
}

.contact .modern-form .btn-submit i {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.contact .modern-form .form-footer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.contact .modern-form .form-footer-note i {
  font-size: 14px;
  color: var(--accent-color);
}

.contact .social-proof {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.contact .social-proof .proof-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
}

.contact .social-proof .proof-stats .stat-box {
  flex: 1;
  text-align: center;
  padding: 20px;
  background: color-mix(in srgb, var(--accent-color), transparent 97%);
  border-radius: 14px;
}

.contact .social-proof .proof-stats .stat-box .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 6px;
}

.contact .social-proof .proof-stats .stat-box .stat-label {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  font-weight: 500;
}

.contact .social-proof .social-channels {
  text-align: center;
}

.contact .social-proof .social-channels p {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 16px;
}

.contact .social-proof .social-channels .channel-links {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.contact .social-proof .social-channels .channel-links .channel-link {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  transition: all 0.3s ease;
  text-decoration: none;
}

.contact .social-proof .social-channels .channel-links .channel-link:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.contact .social-proof .social-channels .channel-links .channel-link i {
  font-size: 18px;
}

@media (max-width: 992px) {
  .contact .quick-contact-wrapper {
    margin-bottom: 32px;
  }

  .contact .main-form-container {
    padding: 36px 28px;
  }

  .contact .main-form-container .form-intro h2 {
    font-size: 28px;
  }

  .contact .social-proof .proof-stats {
    gap: 12px;
  }

  .contact .social-proof .proof-stats .stat-box {
    padding: 16px 12px;
  }

  .contact .social-proof .proof-stats .stat-box .stat-value {
    font-size: 20px;
  }

  .contact .social-proof .proof-stats .stat-box .stat-label {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .contact .main-form-container {
    padding: 28px 20px;
  }

  .contact .main-form-container .form-intro h2 {
    font-size: 24px;
  }

  .contact .main-form-container .form-intro p {
    font-size: 15px;
  }

  .contact .social-proof .proof-stats {
    flex-direction: column;
    gap: 12px;
  }

  .contact .trust-indicators .indicator-item {
    padding: 14px 16px;
  }
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-content .content-header .service-meta .badge {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%) !important;
  color: var(--accent-color) !important;
  border-radius: 24px;
  font-weight: 500;
  font-size: 0.85rem;
}

.service-details .service-content .content-header .service-meta .divider {
  width: 2px;
  height: 20px;
  background: color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 1px;
}

.service-details .service-content .content-header .service-title {
  color: var(--heading-color);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.service-details .service-content .content-header .service-subtitle {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 90%;
}

.service-details .service-content .visual-showcase .image-container {
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.service-details .service-content .visual-showcase .image-container img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-details .service-content .visual-showcase .image-container .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, black, transparent 30%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-details .service-content .visual-showcase .image-container .play-button {
  width: 80px;
  height: 80px;
  background: var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--contrast-color);
  font-size: 2rem;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.service-details .service-content .visual-showcase .image-container:hover .image-overlay {
  opacity: 1;
}

.service-details .service-content .visual-showcase .image-container:hover .play-button {
  transform: scale(1);
}

.service-details .service-content .visual-showcase .image-container:hover img {
  transform: scale(1.05);
}

.service-details .service-content .section-heading {
  color: var(--heading-color);
  font-size: 1.75rem;
  font-weight: 600;
  position: relative;
}

.service-details .service-content .section-heading::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--accent-color);
  border-radius: 2px;
}

.service-details .service-content .process-steps .step-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-left: 2px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  margin-left: 20px;
  padding-left: 2rem;
  position: relative;
}

.service-details .service-content .process-steps .step-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 30px;
  width: 8px;
  height: 8px;
  background: var(--accent-color);
  border-radius: 50%;
}

.service-details .service-content .process-steps .step-item:last-child {
  border-left-color: transparent;
}

.service-details .service-content .process-steps .step-item .step-number {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), blue 20%));
  color: var(--contrast-color);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.service-details .service-content .process-steps .step-item .step-content .step-title {
  color: var(--heading-color);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.service-details .service-content .process-steps .step-item .step-content p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
  margin: 0;
}

.service-details .service-content .features-showcase .nav-pills {
  background: color-mix(in srgb, var(--surface-color), transparent 20%);
  border-radius: 50px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .service-content .features-showcase .nav-pills .nav-link {
  border-radius: 50px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  padding: 12px 24px;
  font-weight: 500;
  border: none;
  background: transparent;
  transition: all 0.3s ease;
}

.service-details .service-content .features-showcase .nav-pills .nav-link.active {
  background: var(--accent-color);
  color: var(--contrast-color);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.service-details .service-content .features-showcase .feature-card {
  padding: 1.5rem;
  background: var(--surface-color);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  height: 100%;
  transition: all 0.3s ease;
}

.service-details .service-content .features-showcase .feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--default-color), transparent 88%);
  border-color: var(--accent-color);
}

.service-details .service-content .features-showcase .feature-card .feature-icon {
  width: 56px;
  height: 56px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.service-details .service-content .features-showcase .feature-card h5 {
  color: var(--heading-color);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.service-details .service-content .features-showcase .feature-card p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  line-height: 1.5;
  margin: 0;
  font-size: 0.95rem;
}

.service-details .service-content .client-success .success-card {
  background: linear-gradient(135deg, var(--surface-color), color-mix(in srgb, var(--accent-color), transparent 97%));
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
}

.service-details .service-content .client-success .success-card .client-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.service-details .service-content .client-success .success-card .client-name {
  color: var(--heading-color);
  font-weight: 600;
  margin: 0;
}

.service-details .service-content .client-success .success-card .client-role {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 0.9rem;
}

.service-details .service-content .client-success .success-card .rating {
  color: #fbbf24;
  font-size: 1.1rem;
}

.service-details .service-content .client-success .success-card .success-quote {
  color: var(--default-color);
  font-size: 1.1rem;
  line-height: 1.6;
  font-style: italic;
  margin: 0;
  position: relative;
}

.service-details .service-content .client-success .success-card .success-quote::before {
  content: '"';
  font-size: 4rem;
  color: var(--accent-color);
  position: absolute;
  top: -1rem;
  left: -1rem;
  opacity: 0.3;
}

.service-details .service-content .client-success .success-card .success-metrics .metric-value {
  color: var(--accent-color);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.service-details .service-content .client-success .success-card .success-metrics .metric-label {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.service-details .sidebar .service-card,
.service-details .sidebar .contact-card {
  background: var(--surface-color);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  overflow: hidden;
}

.service-details .sidebar .service-card .card-header,
.service-details .sidebar .contact-card .card-header {
  padding: 1.5rem 1.5rem 0;
}

.service-details .sidebar .service-card .card-header .card-title,
.service-details .sidebar .contact-card .card-header .card-title {
  color: var(--heading-color);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.service-details .sidebar .service-card .card-header .card-subtitle,
.service-details .sidebar .contact-card .card-header .card-subtitle {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0.5rem 0 0 0;
  line-height: 1.5;
}

.service-details .sidebar .service-card .card-body,
.service-details .sidebar .contact-card .card-body {
  padding: 1.5rem;
}

.service-details .sidebar .overview-list .overview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 94%);
}

.service-details .sidebar .overview-list .overview-item:last-child {
  border-bottom: none;
}

.service-details .sidebar .overview-list .overview-item .item-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.service-details .sidebar .overview-list .overview-item .item-label i {
  color: var(--accent-color);
  font-size: 1.1rem;
}

.service-details .sidebar .overview-list .overview-item .item-label span {
  font-weight: 500;
}

.service-details .sidebar .overview-list .overview-item .item-value {
  color: var(--heading-color);
  font-weight: 600;
}

.service-details .sidebar .contact-form .form-group .input-wrapper {
  position: relative;
}

.service-details .sidebar .contact-form .form-group .input-wrapper .input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 1rem;
  z-index: 2;
}

.service-details .sidebar .contact-form .form-group .input-wrapper input {
  padding-left: 2.75rem;
}

.service-details .sidebar .contact-form .form-group input,
.service-details .sidebar .contact-form .form-group textarea,
.service-details .sidebar .contact-form .form-group select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1.5px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 8px;
  background: var(--surface-color);
  color: var(--default-color);
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.service-details .sidebar .contact-form .form-group input:focus,
.service-details .sidebar .contact-form .form-group textarea:focus,
.service-details .sidebar .contact-form .form-group select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 85%);
}

.service-details .sidebar .contact-form .form-group input::placeholder,
.service-details .sidebar .contact-form .form-group textarea::placeholder,
.service-details .sidebar .contact-form .form-group select::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.service-details .sidebar .contact-form .form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.service-details .sidebar .contact-form .submit-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  border-radius: 8px;
  padding: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.service-details .sidebar .contact-form .submit-btn:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-1px);
}

.service-details .sidebar .contact-form .submit-btn i {
  transition: transform 0.3s ease;
}

.service-details .sidebar .contact-form .submit-btn:hover i {
  transform: translateX(3px);
}

.service-details .action-section .action-buttons .action-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.service-details .action-section .action-buttons .action-btn.primary {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.service-details .action-section .action-buttons .action-btn.primary:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
  color: var(--contrast-color);
}

.service-details .action-section .action-buttons .action-btn.secondary {
  background: var(--surface-color);
  color: var(--default-color);
  border: 1.5px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.service-details .action-section .action-buttons .action-btn.secondary:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}

.service-details .action-section .action-buttons .action-btn i {
  font-size: 1.1rem;
}

@media (max-width: 992px) {
  .service-details .sidebar {
    margin-top: 3rem;
  }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/* WORK:START - generated by scripts/build-css.mjs, do not edit by hand */
/*--------------------------------------------------------------
# Work / Case Studies
--------------------------------------------------------------*/
/* The case-study pages were built to co-class with .service-details and inherit
   its styling. That partial was removed when the site was trimmed to the
   sections actually in use, so the rules those pages rely on live here,
   rescoped to .work-details. Blocks the generated pages never emit
   (.visual-showcase, .contact-card, .contact-form, and the testimonial parts of
   the success card) were not carried over.

   The work index and the homepage teaser co-class with .services, which is
   still part of the site.

   Colour: --accent-color for fills, icons and borders; --accent-text for orange
   type, which needs 4.5:1 on the light background. */
/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.work-details .service-content .content-header .service-meta .badge {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%) !important;
  color: var(--accent-text) !important;
  border-radius: 24px;
  font-weight: 500;
  font-size: 0.85rem;
}
.work-details .service-content .content-header .service-meta .divider {
  width: 2px;
  height: 20px;
  background: color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 1px;
}
.work-details .service-content .content-header .service-title {
  color: var(--heading-color);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.work-details .service-content .content-header .service-subtitle {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 90%;
}
.work-details .service-content .section-heading {
  color: var(--heading-color);
  font-size: 1.75rem;
  font-weight: 600;
  position: relative;
}
.work-details .service-content .section-heading::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--accent-color);
  border-radius: 2px;
}
.work-details .service-content .process-steps .step-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-left: 2px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  margin-left: 20px;
  padding-left: 2rem;
  position: relative;
}
.work-details .service-content .process-steps .step-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 30px;
  width: 8px;
  height: 8px;
  background: var(--accent-color);
  border-radius: 50%;
}
.work-details .service-content .process-steps .step-item:last-child {
  border-left-color: transparent;
}
.work-details .service-content .process-steps .step-item .step-number {
  background: linear-gradient(135deg, var(--accent-color), var(--accent-text));
  color: var(--contrast-color);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color), transparent 70%);
}
.work-details .service-content .process-steps .step-item .step-content .step-title {
  color: var(--heading-color);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.work-details .service-content .process-steps .step-item .step-content p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
  margin: 0;
}
.work-details .service-content .features-showcase .nav-pills {
  background: color-mix(in srgb, var(--surface-color), transparent 20%);
  border-radius: 50px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.work-details .service-content .features-showcase .nav-pills .nav-link {
  border-radius: 50px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  padding: 12px 24px;
  font-weight: 500;
  border: none;
  background: transparent;
  transition: all 0.3s ease;
}
.work-details .service-content .features-showcase .nav-pills .nav-link.active {
  background: var(--accent-color);
  color: var(--contrast-color);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color), transparent 70%);
}
.work-details .service-content .features-showcase .feature-card {
  padding: 1.5rem;
  background: var(--surface-color);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  height: 100%;
  transition: all 0.3s ease;
}
.work-details .service-content .features-showcase .feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--default-color), transparent 88%);
  border-color: var(--accent-color);
}
.work-details .service-content .features-showcase .feature-card .feature-icon {
  width: 56px;
  height: 56px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.work-details .service-content .features-showcase .feature-card h5 {
  color: var(--heading-color);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.work-details .service-content .features-showcase .feature-card p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  line-height: 1.5;
  margin: 0;
  font-size: 0.95rem;
}
.work-details .service-content .client-success .success-card {
  background: linear-gradient(135deg, var(--surface-color), color-mix(in srgb, var(--accent-color), transparent 97%));
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
}
.work-details .service-content .client-success .success-card .success-metrics {
  row-gap: 1.5rem;
}
.work-details .service-content .client-success .success-card .success-metrics .metric-value {
  color: var(--accent-text);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  overflow-wrap: anywhere;
}
.work-details .service-content .client-success .success-card .success-metrics .metric-label {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.work-details .sidebar .service-card {
  background: var(--surface-color);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  overflow: hidden;
}
.work-details .sidebar .service-card .card-header {
  padding: 1.5rem 1.5rem 0;
}
.work-details .sidebar .service-card .card-header .card-title {
  color: var(--heading-color);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}
.work-details .sidebar .service-card .card-header .card-subtitle {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0.5rem 0 0 0;
  line-height: 1.5;
}
.work-details .sidebar .service-card .card-body {
  padding: 1.5rem;
}
.work-details .sidebar .overview-list .overview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 94%);
}
.work-details .sidebar .overview-list .overview-item:last-child {
  border-bottom: none;
}
.work-details .sidebar .overview-list .overview-item .item-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}
.work-details .sidebar .overview-list .overview-item .item-label i {
  color: var(--accent-color);
  font-size: 1.1rem;
}
.work-details .sidebar .overview-list .overview-item .item-label span {
  font-weight: 500;
}
.work-details .sidebar .overview-list .overview-item .item-value {
  color: var(--heading-color);
  font-weight: 600;
}
.work-details .action-section .action-buttons .action-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.work-details .action-section .action-buttons .action-btn.primary {
  background: var(--accent-color);
  color: var(--contrast-color);
}
.work-details .action-section .action-buttons .action-btn.primary:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
  color: var(--contrast-color);
}
.work-details .action-section .action-buttons .action-btn.secondary {
  background: var(--surface-color);
  color: var(--default-color);
  border: 1.5px solid color-mix(in srgb, var(--default-color), transparent 85%);
}
.work-details .action-section .action-buttons .action-btn.secondary:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-color: var(--accent-color);
  color: var(--accent-text);
  transform: translateY(-2px);
}
.work-details .action-section .action-buttons .action-btn i {
  font-size: 1.1rem;
}
@media (max-width: 992px) {
  .work-details .sidebar {
    margin-top: 3rem;
  }
}

/* -------------------------------------------------------------- */
/* Components specific to the work section                          */
/* -------------------------------------------------------------- */
.work .case-tags,
.work-details .case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}
.work .case-tag,
.work-details .case-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 24px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.6;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-text);
}

.work .service-item {
  display: flex;
  flex-direction: column;
}
.work .case-kicker {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  margin-bottom: 8px;
}
.work .service-item .card-links {
  margin-top: auto;
}

.work-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 500;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
  transition: 0.3s;
}
.work-cta i {
  font-size: 1rem;
}
.work-cta:hover, .work-cta:focus {
  background-color: transparent;
  color: var(--accent-text);
}

.work-details {
  /* Bootstrap's .text-muted resolves to a dark grey intended for light
     backgrounds; on this dark theme it is close to invisible. */
}
.work-details .service-meta .text-muted {
  color: color-mix(in srgb, var(--default-color), transparent 35%) !important;
}
.work-details {
  /* .overview-item is a space-between flex row, so a long value collides with
     its label. Give it room and let it wrap to the right. */
}
.work-details .sidebar .overview-item {
  gap: 1.25rem;
  align-items: flex-start;
}
.work-details .sidebar .overview-item .item-label {
  flex: 0 0 auto;
}
.work-details .sidebar .overview-item .item-value {
  text-align: right;
}
.work-details .confidentiality-note {
  margin-bottom: 40px;
  padding: 16px 20px;
  border-radius: 8px;
  border-left: 3px solid color-mix(in srgb, var(--accent-color), transparent 50%);
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 0.95rem;
}
.work-details .confidentiality-note i {
  color: var(--accent-color);
  margin-right: 6px;
}
.work-details .service-card .work-cta {
  margin-top: 10px;
}
/* WORK:END */