/**
* Template Name: Clarity
* Template URL: https://bootstrapmade.com/clarity-bootstrap-agency-template/
* Updated: Sep 13 2025 with Bootstrap v5.3.8
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

@charset "UTF-8";

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Inter", 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: "Space Grotesk",  sans-serif;
  --nav-font: "Space Grotesk",  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: #0c1326; /* Background color for the entire website, including individual sections */
  --default-color: #F2EAD9; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #F2EAD9; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #D4A017; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #131A2C; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #0A0E1A; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* 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: #F2EAD9;  /* The default color of the main navmenu links */
  --nav-hover-color: #D4A017; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #0A0E1A; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #131A2C; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #F2EAD9; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #D4A017; /* 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: #131A2C;
  --surface-color: #1B2440;
}

.dark-background {
  --background-color: #060911;
  --default-color: #F2EAD9;
  --heading-color: #F2EAD9;
  --surface-color: #131A2C;
  --contrast-color: #F2EAD9;
}

/* 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-color);
  text-decoration: none;
  transition: 0.3s;
}

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

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

/* Default Buttons - fallback styling so any .btn-primary/.btn-outline uses the
   brand accent even outside a section that defines its own button styling */
.btn.btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 0.75rem 2.5rem;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
}

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

.btn.btn-outline {
  background-color: transparent;
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  padding: 0.75rem 2.5rem;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn.btn-outline:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

/*--------------------------------------------------------------
# Glow Blobs (ambient background effect)
# Soft glowing color orbs behind section content. Pure radial-gradient
# only - no filter: blur() / backdrop-filter, so this stays cheap to paint.
# Usage: add "glow-section" plus a tier ("glow-section--heavy",
# "--medium", or "--light") to any <section>. For a 3rd blob in a key
# section (e.g. the hero), add a standalone ".glow-blob" div as a direct
# child of that same section.
--------------------------------------------------------------*/
.glow-section {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.glow-section::before,
.glow-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

/* Heavy: two large orbs in opposite corners - hero and primary CTA sections */
.glow-section--heavy::before {
  width: 700px;
  height: 700px;
  top: -260px;
  right: -220px;
  background: radial-gradient(circle, rgba(212, 160, 23, 0.14) 0%, rgba(212, 160, 23, 0.05) 40%, transparent 70%);
}

.glow-section--heavy::after {
  width: 650px;
  height: 650px;
  bottom: -260px;
  left: -220px;
  background: radial-gradient(circle, rgba(138, 90, 16, 0.12) 0%, rgba(138, 90, 16, 0.045) 40%, transparent 70%);
}

/* Medium: two smaller, softer orbs - secondary content sections */
.glow-section--medium::before {
  width: 550px;
  height: 550px;
  top: -200px;
  left: -180px;
  background: radial-gradient(circle, rgba(212, 160, 23, 0.10) 0%, rgba(212, 160, 23, 0.035) 40%, transparent 70%);
}

.glow-section--medium::after {
  width: 520px;
  height: 520px;
  bottom: -220px;
  right: -180px;
  background: radial-gradient(circle, rgba(138, 90, 16, 0.09) 0%, rgba(138, 90, 16, 0.03) 40%, transparent 70%);
}

/* Light: a single faint orb - lightest touch, used on smaller/text-heavy sections */
.glow-section--light::before {
  width: 500px;
  height: 500px;
  top: -220px;
  left: 50%;
  margin-left: -250px;
  background: radial-gradient(circle, rgba(212, 160, 23, 0.07) 0%, rgba(212, 160, 23, 0.025) 40%, transparent 70%);
}

/* Standalone orb (div-based) for a 3rd blob in a key section, e.g. the hero.
   Place as a direct child of a ".glow-section" element. */
.glow-blob {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.glow-blob--gold {
  background: radial-gradient(circle, rgba(212, 160, 23, 0.14) 0%, rgba(212, 160, 23, 0.05) 40%, transparent 70%);
}

.glow-blob--amber {
  background: radial-gradient(circle, rgba(138, 90, 16, 0.13) 0%, rgba(138, 90, 16, 0.05) 40%, transparent 70%);
}

/* Dims a blob further - use behind dense text (e.g. a centered hero orb) */
.glow-blob--faint {
  opacity: 0.55;
}

.glow-blob--sm {
  width: 500px;
  height: 500px;
}

.glow-blob--md {
  width: 650px;
  height: 650px;
}

.glow-blob--lg {
  width: 800px;
  height: 800px;
}

.glow-blob--top-left {
  top: -220px;
  left: -220px;
}

.glow-blob--top-right {
  top: -220px;
  right: -220px;
}

.glow-blob--bottom-left {
  bottom: -220px;
  left: -220px;
}

.glow-blob--bottom-right {
  bottom: -220px;
  right: -220px;
}

.glow-blob--center {
  top: 50%;
  left: 50%;
}

.glow-blob--center.glow-blob--sm {
  margin-top: -250px;
  margin-left: -250px;
}

.glow-blob--center.glow-blob--md {
  margin-top: -325px;
  margin-left: -325px;
}

.glow-blob--center.glow-blob--lg {
  margin-top: -400px;
  margin-left: -400px;
}

/* Slow ambient drift - transform only, so it stays GPU-friendly.
   Left off entirely for users who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .glow-section--heavy::before,
  .glow-blob--drift-a {
    animation: glowDriftA 50s ease-in-out infinite alternate;
  }

  .glow-section--heavy::after,
  .glow-blob--drift-b {
    animation: glowDriftB 58s ease-in-out infinite alternate;
  }

  .glow-section--medium::before {
    animation: glowDriftC 46s ease-in-out infinite alternate;
  }

  .glow-section--medium::after {
    animation: glowDriftA 54s ease-in-out infinite alternate;
  }

  .glow-section--light::before,
  .glow-blob--drift-c {
    animation: glowDriftB 52s ease-in-out infinite alternate;
  }
}

@keyframes glowDriftA {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(50px, 35px);
  }
}

@keyframes glowDriftB {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-45px, 30px);
  }
}

@keyframes glowDriftC {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(35px, -45px);
  }
}

@media (max-width: 768px) {
  .glow-section--heavy::before,
  .glow-section--heavy::after,
  .glow-section--medium::before,
  .glow-section--medium::after,
  .glow-blob--lg,
  .glow-blob--md {
    width: 420px;
    height: 420px;
  }

  .glow-section--light::before,
  .glow-blob--sm {
    width: 360px;
    height: 360px;
  }
}

/* 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(255, 255, 255, 0);
  --surface-color: #1B2440;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .header-container {
  background: var(--surface-color);
  border-radius: 50px;
  padding: 5px 25px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

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

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

.header .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 500;
  color: var(--heading-color);
}

.header .logo .sitename {
  font-family: "Bebas Neue", var(--heading-font);
  letter-spacing: 0.03em;
}

/* Gradient "101" - falls back to solid gold if the browser can't clip text
   to a gradient (very old browsers); Safari is covered via the -webkit- prefixes. */
.header .logo .sitename__accent {
  color: var(--accent-color);
  background: linear-gradient(0deg, var(--accent-color) 0%, #985ec8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .header .logo .sitename__accent {
    color: transparent;
  }
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 20px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .header .header-container {
    margin-left: 10px;
    margin-right: 10px;
    padding: 16px 5px 16px 15px;
  }

  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 10px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

/* Language Toggle - EN/FR switch, sits next to the footer copyright line */
.footer .copyright-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

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

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 50px;
  padding: 3px;
}

.lang-toggle__btn {
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-family: var(--nav-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.lang-toggle__btn:hover:not(.is-active) {
  color: var(--heading-color);
}

.lang-toggle__btn.is-active {
  background: var(--accent-color);
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# 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;
    width: 100%;
    height: 2px;
    bottom: -6px;
    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);
  }

  .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;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .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: 12px 20px;
    font-family: var(--nav-font);
    font-size: 22px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    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;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-top {
  padding-top: 50px;
}

.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 span {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
}

.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 .footer-contact .footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: color 0.3s ease;
}

.footer .footer-contact .footer-social-link i {
  font-size: 16px;
}

.footer .footer-contact .footer-social-link:hover {
  color: var(--accent-color);
}

.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;
}

/*--------------------------------------------------------------
# SweetAlert2 Brand Theme
# Colors are set inline via JS (reading the CSS variables directly) since
# SweetAlert2 renders its popup outside the normal document flow; these
# classes just bring the shape/typography in line with the rest of the site.
--------------------------------------------------------------*/
.swal-brand-popup {
  font-family: var(--default-font);
  border-radius: 20px;
}

.swal-brand-popup .swal2-title {
  font-family: var(--heading-font);
}

.swal-brand-btn {
  font-family: var(--nav-font);
  font-weight: 600;
  border-radius: 50px !important;
  padding: 10px 28px !important;
  box-shadow: none !important;
}

/*--------------------------------------------------------------
# Scroll Progress Bar
--------------------------------------------------------------*/
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 999998;
  pointer-events: none;
}

.scroll-progress__fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #1E3A8A 0%, var(--accent-color) 100%);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: 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 #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s 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), transparent 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 {
  text-align: center;
  padding: 20px 0;
}

.page-title .breadcrumbs {
  margin-bottom: 1.5rem;
}

.page-title .breadcrumbs .breadcrumb {
  justify-content: center;
  margin: 0;
  padding: 0;
  background: none;
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item.active {
  color: var(--accent-color);
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item a:hover {
  color: var(--accent-color);
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item a i {
  font-size: 0.9rem;
  margin-right: 0.2rem;
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.page-title .title-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 0;
}

.page-title .title-wrapper h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--heading-color);
}

.page-title .title-wrapper p {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .page-title {
    padding: 8px 0;
  }

  .page-title .breadcrumbs {
    margin-bottom: 0.75rem;
  }

  .page-title .title-wrapper h1 {
    font-size: 2rem;
  }

  .page-title .title-wrapper p {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .page-title .title-wrapper h1 {
    font-size: 1.75rem;
  }
}

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

@media (max-width: 1199px) {

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

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

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
}

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

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--background-color) 0%, color-mix(in srgb, var(--accent-color), transparent 95%) 100%);
  padding: 120px 0;
}

.hero .hero-content h1 {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .hero {
    padding: 48px 0;
  }

  .hero .hero-content h1 {
    font-size: 2.5rem;
  }
}

/* Hero Rotator - cycles the headline between phrases on a continuous loop.
   JS toggles ".is-swapping" to fade/slide the text out, swaps the words
   underneath, then fades it back in. See the inline script on index.html.
   Bebas Neue is scoped to this element only - it isn't used elsewhere. */
.hero-rotator {
  display: inline-block;
  font-family: "Bebas Neue", var(--heading-font);
  letter-spacing: 0.02em;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero-rotator.is-swapping {
  opacity: 0;
  transform: translateY(-14px);
}

@media (prefers-reduced-motion: reduce) {
  .hero-rotator {
    transition: none;
  }
}

/* Highlighted keywords within the rotator (e.g. "Quality", "Fun",
   "everywhere", "confidence") - a gold-to-dark-blue gradient, gold at the
   bottom rising to the surface's dark blue at the top. */
.hero-rotator__highlight {
  background: linear-gradient(0deg, var(--accent-color) 0%, #985ec8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero .hero-content p {
  font-size: 1.2rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.hero .hero-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.hero .hero-buttons .btn {
  padding: 15px 30px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.hero .hero-buttons .btn.btn-primary {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 2px solid var(--accent-color);
}

.hero .hero-buttons .btn.btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  border-color: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
}

.hero .hero-buttons .btn.btn-outline {
  background: transparent;
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
}

.hero .hero-buttons .btn.btn-outline:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

.hero .hero-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

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

.hero .hero-stats .stat-item .stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
}

.hero .hero-stats .stat-item .stat-label {
  display: block;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .hero .hero-stats {
    justify-content: center;
    gap: 1.5rem;
  }
}

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

.hero .hero-visual .hero-image {
  position: relative;
  z-index: 2;
}

.hero .hero-visual .hero-image img {
  border-radius: 20px;
}

/* Hero Floating Stat Cards - translucent cards over the hero image.
   Background is a tinted color-mix (not backdrop-filter/blur) so the
   image shows through while staying cheap to paint. */
.hero-float-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-color), transparent 45%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  will-change: transform;
}

.hero-float-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.hero-float-card__icon i {
  font-size: 20px;
  color: var(--accent-color);
}

.hero-float-card__body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.hero-float-card__value {
  font-family: var(--heading-font);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heading-color);
}

.hero-float-card__label {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  white-space: nowrap;
}

.hero-float-card--top-left {
  top: -10px;
  left: -20px;
}

.hero-float-card--bottom-right {
  bottom: -10px;
  right: -16px;
}

.hero-float-card--mid-left {
  top: 55%;
  left: -30px;
  margin-top: -36px;
}

/* Slow up/down bob - transform only, so it's GPU-friendly. Each card runs
   at a slightly different speed/delay so they don't move in lockstep.
   Left off entirely for users who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-float-card--top-left {
    animation: heroCardFloat 4.5s ease-in-out infinite;
  }

  .hero-float-card--bottom-right {
    animation: heroCardFloat 5.2s ease-in-out infinite;
    animation-delay: 1.2s;
  }

  .hero-float-card--mid-left {
    animation: heroCardFloat 4.8s ease-in-out infinite;
    animation-delay: 0.6s;
  }
}

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

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

@media (max-width: 991px) {
  .hero .hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-float-card {
    position: static;
    transform: none;
    width: 100%;
    margin: 14px 0 0;
    justify-content: center;
    text-align: center;
  }

  .hero-float-card__body {
    align-items: center;
  }
}

@media (max-width: 400px) {
  .hero-float-card {
    padding: 12px 14px;
    gap: 10px;
  }

  .hero-float-card__icon {
    width: 38px;
    height: 38px;
  }
}

.hero .hero-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.hero .hero-bg-elements .bg-shape {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 90%), color-mix(in srgb, var(--accent-color), transparent 95%));
}

.hero .hero-bg-elements .bg-shape.shape-1 {
  width: 300px;
  height: 300px;
  top: -150px;
  right: -150px;
  animation: rotate 20s linear infinite;
}

.hero .hero-bg-elements .bg-shape.shape-2 {
  width: 200px;
  height: 200px;
  bottom: -100px;
  left: -100px;
  animation: rotate 15s linear infinite reverse;
}

.hero .hero-bg-elements .bg-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--accent-color), transparent 85%) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: moveParticles 30s linear infinite;
}

@keyframes float {

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

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

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes moveParticles {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(50px, 50px);
  }
}

@media (max-width: 992px) {
  .hero .hero-content {
    text-align: center;
    margin-bottom: 3rem;
  }
}

@media (max-width: 768px) {
  .hero .hero-buttons {
    justify-content: center;
  }

  .hero .hero-stats .stat-item .stat-number {
    font-size: 1.5rem;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content .subtitle {
  color: var(--accent-color);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.about .content h2 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.about .content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 2rem;
}

.about .content .features-list {
  list-style: none;
  padding: 0;
  margin-bottom: 2.5rem;
}

.about .content .features-list li {
  display: flex;
  align-items: center;
  padding-bottom: 1rem;
  font-weight: 500;
}

.about .content .features-list li i {
  font-size: 1.25rem;
  color: var(--accent-color);
  margin-right: 0.75rem;
}

.about .content .btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 0.75rem 2.5rem;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.about .content .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
  border-color: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
}

.about .image-composition {
  position: relative;
  padding: 2rem;
}

@media (max-width: 768px) {
  .about .image-composition {
    padding: 1rem;
  }
}

.about .image-composition .image-main {
  position: relative;
  z-index: 2;
}

.about .image-composition .image-main img {
  border-radius: 8px;
  box-shadow: 0 15px 40px color-mix(in srgb, var(--default-color), transparent 85%);
  border: 5px solid color-mix(in srgb, var(--default-color), transparent 70%);
}

.about .image-composition .image-secondary {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 45%;
  z-index: 3;
}

.about .image-composition .image-secondary img {
  border-radius: 8px;
  border: 5px solid color-mix(in srgb, var(--default-color), transparent 70%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 80%);
}

.about .image-composition .stats-card {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  background: var(--surface-color);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  display: flex;
  gap: 2rem;
}

@media (max-width: 576px) {
  .about .image-composition .stats-card {
    padding: 1rem;
    gap: 1rem;
    flex-direction: column;
  }
}

.about .image-composition .stats-card .stats-item {
  text-align: center;
}

.about .image-composition .stats-card .stats-item h3 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-color);
  margin: 0;
  line-height: 1;
}

@media (max-width: 992px) {
  .about .image-composition .stats-card .stats-item h3 {
    font-size: 2rem;
  }
}

.about .image-composition .stats-card .stats-item p {
  margin: 0;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
  margin-top: 0.5rem;
}

.about .image-composition::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 12px;
  z-index: 1;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-card {
  --card-accent: var(--accent-color);
  background: var(--surface-color);
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  position: relative;
  z-index: 0;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.services .service-card::before,
.services .service-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* Thin accent bar across the top, brightens and widens on hover */
.services .service-card::before {
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--card-accent), transparent);
  opacity: 0.45;
  transform: scaleX(0.4);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Soft radial wash in the card's own color, only visible on hover */
.services .service-card::after {
  inset: 0;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--card-accent), transparent 88%) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.services .service-card:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25), 0 18px 40px color-mix(in srgb, var(--card-accent), transparent 78%);
  border-color: color-mix(in srgb, var(--card-accent), transparent 55%);
}

.services .service-card:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.services .service-card:hover::after {
  opacity: 1;
}

.services .service-card:hover .service-icon {
  transform: scale(1.12) rotate(-6deg);
  box-shadow: 0 14px 26px color-mix(in srgb, var(--card-accent), transparent 55%);
}

.services .service-card:hover .service-link {
  opacity: 1;
  transform: translateY(0);
}

.services .service-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 25px;
  background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent), white 25%));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  position: relative;
}

.services .service-icon i {
  font-size: 36px;
  color: var(--contrast-color);
}

/* Service Card Color Variants - each card gets its own accent for the icon,
   top bar, and hover glow. Falls back to the brand gold if no variant is set.
   Selectors are scoped to ".services .service-card" to out-specificity the
   base rule above (which also sets --card-accent), otherwise the fallback
   always wins regardless of which variant class is applied. */
.services .service-card.service-card--gold {
  --card-accent: #D4A017;
}

.services .service-card.service-card--sky {
  --card-accent: #6B8FA8;
}

.services .service-card.service-card--coral {
  --card-accent: #C08165;
}

.services .service-card.service-card--violet {
  --card-accent: #8D80AD;
}

.services .service-card.service-card--emerald {
  --card-accent: #5E9478;
}

.services .service-card.service-card--rose {
  --card-accent: #B87A93;
}

/* Store Badges - App Store / Google Play links on shipped-product cards */
.services .service-card .store-badges {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.services .service-card .store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--default-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  color: var(--heading-color);
  font-size: 18px;
  transition: all 0.3s ease;
}

.services .service-card .store-badge:hover {
  background: var(--card-accent);
  border-color: var(--card-accent);
  color: var(--contrast-color);
  transform: translateY(-3px);
}

.services .service-badge {
  position: absolute;
  top: -10px;
  right: 20px;
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  color: var(--contrast-color);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.services h4 {
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: 700;
}

.services h4 a {
  color: var(--heading-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.services h4 a:hover {
  color: var(--accent-color);
}

.services p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.6;
  margin-bottom: 25px;
  font-size: 15px;
}

.services .service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-color);
  font-weight: 600;
  text-decoration: none;
  opacity: 0.7;
  transform: translateY(5px);
  transition: all 0.3s ease;
  font-size: 14px;
}

.services .service-link i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.services .service-link:hover {
  color: var(--accent-color);
}

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

.services .services-cta {
  background: linear-gradient(135deg, var(--surface-color), color-mix(in srgb, var(--surface-color), var(--accent-color) 3%));
  border-radius: 24px;
  padding: 50px 40px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
}

.services .services-cta h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--heading-color);
}

.services .services-cta p {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 30px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.services .services-cta .btn {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), white 25%));
  border: none;
  border-radius: 50px;
  padding: 14px 32px;
  font-weight: 600;
  font-size: 16px;
  color: var(--contrast-color);
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(54, 144, 231, 0.3);
}

.services .services-cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(54, 144, 231, 0.4);
  color: var(--contrast-color);
}

@media (max-width: 768px) {
  .services .services-cta {
    padding: 40px 30px;
  }

  .services .services-cta h3 {
    font-size: 24px;
  }

  .services .services-cta p {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .services .service-card {
    padding: 30px 25px;
    margin-bottom: 20px;
  }

  .services .service-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
  }

  .services .service-icon i {
    font-size: 32px;
  }

  .services h4 {
    font-size: 20px;
  }

  .services p {
    font-size: 14px;
  }
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  padding: 0;
  list-style: none;
}

@media (max-width: 768px) {
  .portfolio .portfolio-filters {
    gap: 6px;
    margin-bottom: 30px;
  }
}

.portfolio .portfolio-filters li {
  padding: 12px 24px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .portfolio .portfolio-filters li {
    padding: 10px 18px;
    font-size: 0.8rem;
  }
}

.portfolio .portfolio-filters li::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.portfolio .portfolio-filters li:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 85%);
  border-color: var(--accent-color);
}

.portfolio .portfolio-filters li:hover::before {
  left: 100%;
}

.portfolio .portfolio-filters li.filter-active {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 15%));
  color: var(--contrast-color);
  border-color: var(--accent-color);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.portfolio .portfolio-wrapper {
  background-color: var(--surface-color);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--default-color), transparent 92%);
  margin-bottom: 30px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.portfolio .portfolio-wrapper:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--default-color), transparent 85%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.portfolio .portfolio-wrapper:hover .portfolio-image img {
  transform: scale(1.05);
}

.portfolio .portfolio-wrapper:hover .portfolio-image .portfolio-hover {
  opacity: 1;
  visibility: visible;
}

.portfolio .portfolio-wrapper .portfolio-image {
  position: relative;
  overflow: hidden;
  height: 240px;
}

.portfolio .portfolio-wrapper .portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio .portfolio-wrapper .portfolio-image .portfolio-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 70%, white 15%), color-mix(in srgb, var(--accent-color) 90%, black 15%));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(2px);
}

.portfolio .portfolio-wrapper .portfolio-image .portfolio-hover .portfolio-actions {
  display: flex;
  gap: 15px;
}

.portfolio .portfolio-wrapper .portfolio-image .portfolio-hover .portfolio-actions .action-btn {
  width: 50px;
  height: 50px;
  background-color: var(--surface-color);
  color: var(--contrast-color);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.portfolio .portfolio-wrapper .portfolio-image .portfolio-hover .portfolio-actions .action-btn:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.portfolio .portfolio-wrapper .portfolio-content {
  padding: 25px;
}

.portfolio .portfolio-wrapper .portfolio-content .portfolio-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.portfolio .portfolio-wrapper .portfolio-content .portfolio-meta .project-type {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-color);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 90%), color-mix(in srgb, var(--accent-color), transparent 85%));
  padding: 6px 12px;
  border-radius: 20px;
}

.portfolio .portfolio-wrapper .portfolio-content .portfolio-meta .project-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-color);
}

.portfolio .portfolio-wrapper .portfolio-content .portfolio-meta .project-rating i {
  font-size: 0.8rem;
}

.portfolio .portfolio-wrapper .portfolio-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--heading-color);
  line-height: 1.3;
}

.portfolio .portfolio-wrapper .portfolio-content p {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 20px;
  line-height: 1.5;
}

.portfolio .portfolio-wrapper .portfolio-content .portfolio-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio .portfolio-wrapper .portfolio-content .portfolio-tech .tech-badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
}

.portfolio .portfolio-wrapper .portfolio-content .portfolio-tech .tech-badge:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.portfolio .portfolio-cta {
  margin-top: 60px;
  padding: 40px 30px;
  background: linear-gradient(135deg, var(--surface-color), color-mix(in srgb, var(--surface-color), var(--accent-color) 5%));
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
}

.portfolio .portfolio-cta h4 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--heading-color);
}

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

.portfolio .portfolio-cta .cta-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.portfolio .portfolio-cta .cta-buttons .btn {
  padding: 14px 28px;
  font-weight: 600;
  border-radius: 12px;
  font-size: 0.925rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.portfolio .portfolio-cta .cta-buttons .btn.btn-primary {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 15%));
  color: var(--contrast-color);
  border: none;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.portfolio .portfolio-cta .cta-buttons .btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.portfolio .portfolio-cta .cta-buttons .btn.btn-outline {
  background-color: transparent;
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
}

.portfolio .portfolio-cta .cta-buttons .btn.btn-outline:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 70%);
}

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/
.why-us {
  padding-top: 60px;
  padding-bottom: 60px;
}

.why-us .feature-card {
  background: var(--surface-color);
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
}

.why-us .feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.why-us .feature-card .icon-wrapper {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), white 25%));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  position: relative;
}

.why-us .feature-card .icon-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  opacity: 0.3;
  transform: scale(1.2);
  z-index: 0;
}

.why-us .feature-card .icon-wrapper i {
  font-size: 36px;
  color: var(--contrast-color);
}

.why-us .feature-card h4 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--heading-color);
}

.why-us .feature-card p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
  margin-bottom: 25px;
}

.why-us .feature-card .feature-stats {
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.why-us .feature-card .feature-stats .stat-number {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: var(--accent-color);
  line-height: 1;
}

.why-us .feature-card .feature-stats .stat-label {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
}

.why-us .feature-showcase {
  text-align: center;
}

.why-us .feature-showcase img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
}

.why-us .feature-content {
  padding-left: 30px;
}

.why-us .feature-content h3 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--heading-color);
  line-height: 1.2;
}

.why-us .feature-content .lead {
  font-size: 18px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 40px;
  line-height: 1.6;
}

.why-us .feature-content .feature-list {
  margin-bottom: 40px;
}

.why-us .feature-content .feature-list .feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.why-us .feature-content .feature-list .feature-item .feature-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 80%), color-mix(in srgb, var(--accent-color), transparent 90%));
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.why-us .feature-content .feature-list .feature-item .feature-icon i {
  color: var(--accent-color);
  font-size: 24px;
}

.why-us .feature-content .feature-list .feature-item .feature-text h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--heading-color);
}

.why-us .feature-content .feature-list .feature-item .feature-text p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
  line-height: 1.5;
}

.why-us .feature-content .cta-wrapper {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.why-us .feature-content .cta-wrapper .btn {
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.why-us .feature-content .cta-wrapper .btn.btn-primary {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), white 25%));
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.why-us .feature-content .cta-wrapper .btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.why-us .feature-content .cta-wrapper .btn.btn-outline {
  background: transparent;
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.why-us .feature-content .cta-wrapper .btn.btn-outline:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

@media (max-width: 991px) {
  .why-us .feature-content {
    padding-left: 0;
    padding-top: 40px;
  }
}

@media (max-width: 768px) {
  .why-us .feature-card {
    padding: 30px 20px;
  }

  .why-us .feature-card .icon-wrapper {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
  }

  .why-us .feature-card .icon-wrapper i {
    font-size: 30px;
  }

  .why-us .feature-card h4 {
    font-size: 20px;
  }

  .why-us .feature-card .feature-stats .stat-number {
    font-size: 28px;
  }

  .why-us .feature-content h3 {
    font-size: 28px;
  }

  .why-us .feature-content .cta-wrapper .btn {
    padding: 12px 25px;
    font-size: 14px;
    width: 100%;
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .swiper-wrapper {
  height: auto !important;
  padding-bottom: 20px;
}

.testimonials .testimonial-card {
  background: var(--surface-color);
  border-radius: 24px;
  padding: 32px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

.testimonials .testimonial-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color), white 35%));
  border-radius: 24px 24px 0 0;
}

.testimonials .testimonial-card:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
}

.testimonials .testimonial-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.testimonials .user-avatar {
  position: relative;
}

.testimonials .user-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  object-fit: cover;
  border: 3px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.testimonials .user-info {
  flex: 1;
}

.testimonials .user-info h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.3;
}

.testimonials .user-info .user-role {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
  margin-bottom: 8px;
}

.testimonials .rating {
  display: flex;
  gap: 2px;
}

.testimonials .rating i {
  color: var(--accent-color);
  font-size: 14px;
}

.testimonials .testimonial-content {
  flex-grow: 1;
  position: relative;
  margin-bottom: 24px;
}

.testimonials .testimonial-content .quote-mark {
  position: absolute;
  top: -12px;
  right: 0;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), white 35%));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonials .testimonial-content .quote-mark i {
  color: var(--contrast-color);
  font-size: 20px;
}

.testimonials .testimonial-content p {
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin: 0;
  font-weight: 500;
}

.testimonials .testimonial-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.testimonials .company-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 12px;
}

.testimonials .company-badge i {
  color: var(--accent-color);
  font-size: 14px;
}

.testimonials .company-badge span {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-color);
}

.testimonials .verified-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

.testimonials .verified-badge i {
  color: var(--accent-color);
  font-size: 16px;
}

.testimonials .verified-badge span {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-color);
}

.testimonials .swiper-pagination {
  margin-top: 40px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: color-mix(in srgb, var(--accent-color), transparent 70%);
  border-radius: 50%;
  opacity: 1;
  transition: all 0.3s ease;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--accent-color);
  transform: scale(1.2);
}

@media (max-width: 767px) {
  .testimonials .testimonial-card {
    padding: 24px;
    border-radius: 20px;
  }

  .testimonials .testimonial-header {
    gap: 12px;
    margin-bottom: 20px;
  }

  .testimonials .user-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  .testimonials .user-info h3 {
    font-size: 16px;
  }

  .testimonials .testimonial-content {
    margin-bottom: 20px;
  }

  .testimonials .testimonial-content .quote-mark {
    width: 40px;
    height: 40px;
  }

  .testimonials .testimonial-content .quote-mark i {
    font-size: 16px;
  }

  .testimonials .testimonial-content p {
    font-size: 15px;
  }

  .testimonials .testimonial-footer {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .testimonials .company-badge {
    padding: 6px 10px;
    border-radius: 10px;
  }
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-intro .intro-content h3 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: var(--heading-color);
}

.team .team-intro .intro-content p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 30px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.team .team-intro .intro-content .stats-row {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.team .team-intro .intro-content .stats-row .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team .team-intro .intro-content .stats-row .stat-item .stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 4px;
}

.team .team-intro .intro-content .stats-row .stat-item .stat-label {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team .team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 400px;
  margin: 0 auto;
}

.team .team-grid .member-hexagon {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto;
}

.team .team-grid .member-hexagon:nth-child(even) {
  margin-top: 40px;
}

.team .team-grid .member-hexagon .hexagon-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  overflow: hidden;
  transition: all 0.4s ease;
  cursor: pointer;
}

.team .team-grid .member-hexagon .hexagon-inner:hover {
  border-radius: 20% 80% 80% 20%/20% 20% 80% 80%;
  transform: scale(1.05) rotate(5deg);
}

.team .team-grid .member-hexagon .hexagon-inner:hover .member-overlay {
  opacity: 1;
  transform: translateY(0);
}

.team .team-grid .member-hexagon .hexagon-inner:hover img {
  transform: scale(1.1);
}

.team .team-grid .member-hexagon .hexagon-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.team .team-grid .member-hexagon .hexagon-inner .member-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, color-mix(in srgb, var(--accent-color), transparent 10%) 0%, color-mix(in srgb, var(--accent-color), transparent 25%) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--contrast-color);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  padding: 20px;
}

.team .team-grid .member-hexagon .hexagon-inner .member-overlay h5 {
  font-size: 1.1rem;
  margin: 0 0 4px 0;
  font-weight: 600;
  color: var(--contrast-color);
}

.team .team-grid .member-hexagon .hexagon-inner .member-overlay span {
  font-size: 0.85rem;
  margin-bottom: 15px;
  opacity: 0.9;
}

.team .team-grid .member-hexagon .hexagon-inner .member-overlay .social-icons {
  display: flex;
  gap: 8px;
}

.team .team-grid .member-hexagon .hexagon-inner .member-overlay .social-icons a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-color);
  color: var(--accent-color);
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
}

.team .team-grid .member-hexagon .hexagon-inner .member-overlay .social-icons a:hover {
  background: var(--contrast-color);
  transform: translateY(-2px);
}

.team .team-carousel-wrapper .carousel-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 40px;
  color: var(--heading-color);
}

.team .team-carousel-wrapper .leadership-slider {
  padding-bottom: 50px;
}

.team .team-carousel-wrapper .leadership-slider .swiper-slide {
  padding: 15px;
}

.team .team-carousel-wrapper .leadership-slider .leader-card {
  background: var(--surface-color);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
  height: 100%;
}

.team .team-carousel-wrapper .leadership-slider .leader-card:hover {
  transform: translateY(-8px);
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent-color), transparent 85%) 100%);
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-info {
  padding: 25px;
  text-align: center;
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-info h5 {
  font-size: 1.3rem;
  margin: 0 0 5px 0;
  color: var(--heading-color);
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-info .position {
  color: var(--accent-color);
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 15px;
  display: block;
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-info p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 20px;
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-info .leader-contact {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-info .leader-contact .contact-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
}

.team .team-carousel-wrapper .leadership-slider .leader-card .leader-info .leader-contact .contact-btn:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

.team .team-carousel-wrapper .leadership-slider .swiper-pagination .swiper-pagination-bullet {
  background: color-mix(in srgb, var(--accent-color), transparent 70%);
  opacity: 1;
}

.team .team-carousel-wrapper .leadership-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--accent-color);
}

.team .join-team-cta {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 0%, color-mix(in srgb, var(--accent-color), transparent 92%) 100%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
  border-radius: 25px;
  padding: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.team .join-team-cta::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-color), transparent 85%) 0%, transparent 70%);
  border-radius: 50%;
}

.team .join-team-cta .cta-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  display: grid;
  place-items: center;
  margin: 0 auto 25px;
  position: relative;
  z-index: 2;
}

.team .join-team-cta .cta-icon i {
  font-size: 2rem;
}

.team .join-team-cta .cta-content {
  position: relative;
  z-index: 2;
}

.team .join-team-cta .cta-content h4 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: var(--heading-color);
}

.team .join-team-cta .cta-content p {
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.team .join-team-cta .cta-content .cta-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.team .join-team-cta .cta-content .cta-actions .btn {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.team .join-team-cta .cta-content .cta-actions .btn.btn-primary {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
}

.team .join-team-cta .cta-content .cta-actions .btn.btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color), transparent 65%);
}

.team .join-team-cta .cta-content .cta-actions .btn.btn-outline {
  background: transparent;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
}

.team .join-team-cta .cta-content .cta-actions .btn.btn-outline:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

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

@media (max-width: 1200px) {
  .team .team-intro .intro-content h3 {
    font-size: 1.9rem;
  }
}

@media (max-width: 992px) {
  .team .team-grid {
    max-width: 300px;
  }

  .team .team-grid .member-hexagon {
    width: 130px;
    height: 130px;
  }

  .team .team-grid .member-hexagon:nth-child(even) {
    margin-top: 30px;
  }

  .team .join-team-cta {
    padding: 30px 20px;
  }

  .team .join-team-cta .cta-content h4 {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .team .team-intro .intro-content {
    text-align: center;
    margin-bottom: 40px;
  }

  .team .team-intro .intro-content .stats-row {
    justify-content: center;
    gap: 20px;
  }

  .team .team-grid {
    grid-template-columns: 1fr;
    max-width: 200px;
  }

  .team .team-grid .member-hexagon {
    width: 180px;
    height: 180px;
  }

  .team .team-grid .member-hexagon:nth-child(even) {
    margin-top: 0;
  }

  .team .join-team-cta .cta-content .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .team .join-team-cta .cta-content .cta-actions .btn {
    width: 200px;
  }
}

@media (max-width: 576px) {
  .team .team-carousel-wrapper .carousel-title {
    font-size: 1.5rem;
    margin-bottom: 30px;
  }

  .team .leadership-slider .leader-card .leader-info {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  background: linear-gradient(135deg, var(--background-color), color-mix(in srgb, var(--accent-color), transparent 97%));
}

.contact .contact-form-card {
  background: var(--surface-color);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
  position: relative;
  overflow: hidden;
}

.contact .contact-form-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color), white 25%));
}

.contact .contact-form-card .form-header {
  text-align: center;
  margin-bottom: 35px;
}

.contact .contact-form-card .form-header .header-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), white 25%));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.contact .contact-form-card .form-header .header-icon i {
  font-size: 28px;
  color: var(--contrast-color);
}

.contact .contact-form-card .form-header h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--heading-color);
}

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

.contact .contact-form-card .php-email-form .form-control {
  height: 52px;
  padding: 16px 20px;
  border-radius: 16px;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 88%);
  background-color: color-mix(in srgb, var(--surface-color), var(--background-color) 30%);
  color: var(--default-color);
  font-size: 15px;
  transition: all 0.3s ease;
}

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

.contact .contact-form-card .php-email-form .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-weight: 400;
}

.contact .contact-form-card .php-email-form textarea.form-control {
  height: 100px;
  resize: vertical;
  font-family: inherit;
}

.contact .contact-form-card .php-email-form .submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), white 25%));
  color: var(--contrast-color);
  border: none;
  padding: 16px 30px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.contact .contact-form-card .php-email-form .submit-btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--contrast-color), transparent 85%), transparent);
  transition: left 0.6s ease;
}

.contact .contact-form-card .php-email-form .submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--accent-color), transparent 75%);
}

.contact .contact-form-card .php-email-form .submit-btn:hover:before {
  left: 100%;
}

.contact .contact-form-card .php-email-form .submit-btn:hover i {
  transform: translateX(3px);
}

.contact .contact-form-card .php-email-form .submit-btn span,
.contact .contact-form-card .php-email-form .submit-btn i {
  position: relative;
  z-index: 1;
}

.contact .contact-form-card .php-email-form .submit-btn i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.contact .contact-info-area {
  padding-left: 40px;
}

.contact .contact-info-area .info-header {
  margin-bottom: 40px;
}

.contact .contact-info-area .info-header h3 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--heading-color);
  line-height: 1.2;
}

.contact .contact-info-area .info-header p {
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 0;
}

.contact .contact-info-area .contact-methods {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

.contact .contact-info-area .method-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--surface-color);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 92%);
  transition: all 0.3s ease;
}

.contact .contact-info-area .method-card--linked {
  cursor: pointer;
}

.contact .contact-info-area .method-card:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent-color), transparent 88%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.contact .contact-info-area .method-card:hover .card-icon {
  background: var(--accent-color);
}

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

.contact .contact-info-area .method-card .card-icon {
  width: 50px;
  height: 50px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.contact .contact-info-area .method-card .card-icon i {
  font-size: 20px;
  color: var(--accent-color);
  transition: all 0.3s ease;
}

.contact .contact-info-area .method-card .card-content {
  flex: 1;
}

.contact .contact-info-area .method-card .card-content h5 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--heading-color);
}

.contact .contact-info-area .method-card .card-content p {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--default-color);
}

.contact .contact-info-area .method-card .card-content .response-time {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.contact .contact-info-area .additional-info .info-stats {
  display: flex;
  gap: 30px;
  padding: 30px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 96%), color-mix(in srgb, var(--accent-color), transparent 92%));
  border-radius: 20px;
  margin-bottom: 30px;
}

.contact .contact-info-area .additional-info .info-stats .stat-item {
  text-align: center;
}

.contact .contact-info-area .additional-info .info-stats .stat-item .stat-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 4px;
}

.contact .contact-info-area .additional-info .info-stats .stat-item .stat-label {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-weight: 500;
}

.contact .contact-info-area .additional-info .social-connect {
  text-align: center;
}

.contact .contact-info-area .additional-info .social-connect h6 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--heading-color);
}

.contact .contact-info-area .additional-info .social-connect .social-links {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.contact .contact-info-area .additional-info .social-connect .social-links .social-link {
  width: 40px;
  height: 40px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact .contact-info-area .additional-info .social-connect .social-links .social-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 .contact-info-area .additional-info .social-connect .social-links .social-link i {
  font-size: 16px;
}

@media (max-width: 992px) {
  .contact .contact-info-area {
    padding-left: 0;
    margin-top: 40px;
  }

  .contact .contact-info-area .info-header h3 {
    font-size: 28px;
  }

  .contact .contact-info-area .additional-info .info-stats {
    gap: 20px;
    padding: 25px;
  }
}

@media (max-width: 768px) {
  .contact .contact-form-card {
    padding: 30px 25px;
  }

  .contact .contact-form-card .form-header h3 {
    font-size: 24px;
  }

  .contact .contact-info-area .info-header h3 {
    font-size: 26px;
  }

  .contact .contact-info-area .method-card {
    padding: 20px;
  }

  .contact .contact-info-area .method-card:hover {
    transform: translateY(-3px);
  }

  .contact .contact-info-area .additional-info .info-stats {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details {
  --section-spacing: 2.5rem;
}

.portfolio-details .portfolio-details-media {
  position: relative;
}

.portfolio-details .portfolio-details-media .main-image {
  margin-bottom: 1rem;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider {
  position: relative;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-wrapper {
  height: auto !important;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-slide img {
  aspect-ratio: 3/2;
  object-fit: cover;
  width: 100%;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev {
  background-color: var(--contrast-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next:after,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev:after {
  font-size: 16px;
  color: var(--accent-color);
  font-weight: bold;
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next:hover,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev:hover {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-next:hover:after,
.portfolio-details .portfolio-details-media .main-image .portfolio-details-slider .swiper-button-prev:hover:after {
  color: var(--contrast-color);
}

.portfolio-details .portfolio-details-media .thumbnail-grid img {
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.portfolio-details .portfolio-details-media .thumbnail-grid img:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-details-media .tech-stack-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.5rem;
}

.portfolio-details .portfolio-details-media .tech-stack-badges span {
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 20px;
  background-color: color-mix(in srgb, var(--heading-color), transparent 85%);
  color: var(--heading-color);
  transition: all 0.3s ease;
}

.portfolio-details .portfolio-details-media .tech-stack-badges span:hover {
  background-color: color-mix(in srgb, var(--heading-color), transparent 70%);
  transform: translateY(-2px);
}

.portfolio-details .portfolio-details-content {
  padding: 0 0 0 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.portfolio-details .portfolio-details-content .project-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-meta .badge-wrapper .project-badge {
  display: inline-block;
  padding: 8px 16px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
}

.portfolio-details .portfolio-details-content .project-meta .date-client {
  display: flex;
  gap: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-meta .date-client .meta-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.portfolio-details .portfolio-details-content .project-meta .date-client .meta-item i {
  margin-right: 6px;
  color: var(--accent-color);
}

.portfolio-details .portfolio-details-content .project-title {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading-color);
}

.portfolio-details .portfolio-details-content .project-website {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-website i {
  font-size: 22px;
  color: var(--accent-color);
  margin-right: 8px;
}

.portfolio-details .portfolio-details-content .project-website a {
  font-weight: 500;
  transition: all 0.3s;
}

.portfolio-details .portfolio-details-content .project-website a:hover {
  letter-spacing: 0.5px;
}

.portfolio-details .portfolio-details-content .project-overview {
  margin-bottom: var(--section-spacing);
}

.portfolio-details .portfolio-details-content .project-overview .lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 1.5rem;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item {
  border: none;
  background: none;
  margin-bottom: 10px;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button {
  padding: 1rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--heading-color);
  background-color: color-mix(in srgb, var(--surface-color), transparent 70%);
  border-radius: 8px !important;
  box-shadow: none;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background-color: var(--surface-color);
  color: var(--accent-color);
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) i {
  color: var(--accent-color);
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button::after {
  background-size: 14px;
  width: 14px;
  height: 14px;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-header .accordion-button i {
  font-size: 1.1rem;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-body {
  padding: 1rem;
  background-color: var(--surface-color);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.portfolio-details .portfolio-details-content .project-overview .project-accordion .accordion-item .accordion-body p {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  line-height: 1.6;
}

.portfolio-details .portfolio-details-content .project-features {
  margin-bottom: var(--section-spacing);
}

.portfolio-details .portfolio-details-content .project-features h3 {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  margin-bottom: 1.2rem;
}

.portfolio-details .portfolio-details-content .project-features h3 i {
  margin-right: 10px;
  color: var(--accent-color);
  font-size: 1.1em;
}

.portfolio-details .portfolio-details-content .project-features .feature-list {
  list-style: none;
  padding-left: 0;
}

.portfolio-details .portfolio-details-content .project-features .feature-list li {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.portfolio-details .portfolio-details-content .project-features .feature-list li i {
  color: var(--accent-color);
  margin-right: 10px;
  font-size: 1.1em;
}

.portfolio-details .portfolio-details-content .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: auto;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-view-project {
  padding: 12px 28px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 30px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-view-project:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project {
  padding: 12px 28px;
  background-color: color-mix(in srgb, var(--heading-color), transparent 90%);
  color: var(--heading-color);
  border-radius: 30px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project i {
  transition: transform 0.3s ease;
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project:hover {
  background-color: color-mix(in srgb, var(--heading-color), transparent 80%);
}

.portfolio-details .portfolio-details-content .cta-buttons .btn-next-project:hover i {
  transform: translateX(3px);
}

@media (max-width: 1199.98px) {
  .portfolio-details .portfolio-details-content {
    padding-left: 1rem;
  }
}

@media (max-width: 991.98px) {
  .portfolio-details .portfolio-details-content {
    padding: 2rem 0 0 0;
  }

  .portfolio-details .portfolio-details-content .cta-buttons {
    margin-top: 2rem;
  }
}

@media (max-width: 767.98px) {
  .portfolio-details .project-meta {
    flex-direction: column;
    gap: 1rem;
  }

  .portfolio-details .project-meta .date-client {
    flex-direction: column;
    gap: 0.5rem;
  }

  .portfolio-details .cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .portfolio-details .cta-buttons a {
    width: 100%;
    text-align: center;
  }
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-content h2 {
  color: var(--heading-color);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.service-details .service-content .lead {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.service-details .service-content .service-image {
  margin: 2.5rem 0;
}

.service-details .service-content .service-image img {
  width: 100%;
  height: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.service-details .service-content p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.service-details .service-features {
  background: var(--surface-color);
  padding: 2.5rem;
  border-radius: 12px;
  margin: 3rem 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .service-features h4 {
  color: var(--heading-color);
  margin-bottom: 2rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.service-details .service-features .feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.service-details .service-features .feature-item i {
  font-size: 1.5rem;
  color: var(--accent-color);
  margin-top: 0.25rem;
}

.service-details .service-features .feature-item h5 {
  color: var(--heading-color);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.service-details .service-features .feature-item p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.service-details .service-process {
  margin: 3rem 0;
}

.service-details .service-process h4 {
  color: var(--heading-color);
  margin-bottom: 2.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.service-details .service-process .process-steps .step-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  position: relative;
}

.service-details .service-process .process-steps .step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3.5rem;
  width: 2px;
  height: 2rem;
  background: color-mix(in srgb, var(--accent-color), transparent 70%);
  transform: translateX(-50%);
}

.service-details .service-process .process-steps .step-item .step-number {
  background: var(--accent-color);
  color: var(--contrast-color);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

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

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

/* Tech Stack Badges - used on the services page to list the tools/technologies used */
.service-details .tech-stack-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.service-details .tech-stack-list .tech-pill {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border-radius: 50px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 60%);
  color: var(--accent-color);
  font-weight: 600;
  font-size: 0.95rem;
}

/* Founder Avatar - placeholder circle used on the About page until a real photo is added */
.founder-avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--surface-color);
  border: 2px solid var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-avatar i {
  font-size: 4.5rem;
  color: var(--accent-color);
}

.service-details .sidebar .service-info,
.service-details .sidebar .service-testimonial,
.service-details .sidebar .inquiry-form {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .sidebar h4 {
  color: var(--heading-color);
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.service-details .service-facts {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.service-details .service-facts li:last-child {
  border-bottom: none;
}

.service-details .service-facts li .fact-label {
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.service-details .service-facts li .fact-value {
  font-weight: 600;
  color: var(--heading-color);
}

.service-details .service-testimonial .testimonial-content p {
  font-style: italic;
  margin-bottom: 1.5rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
}

.service-details .service-testimonial .testimonial-content .testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.service-details .service-testimonial .testimonial-content .testimonial-author .author-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.service-details .service-testimonial .testimonial-content .testimonial-author .author-info h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading-color);
}

.service-details .service-testimonial .testimonial-content .testimonial-author .author-info span {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.service-details .inquiry-form .form-control {
  margin-bottom: 1rem;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
}

.service-details .inquiry-form .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 80%);
}

.service-details .inquiry-form input[type=text],
.service-details .inquiry-form input[type=email],
.service-details .inquiry-form input[type=tel],
.service-details .inquiry-form textarea {
  color: var(--default-color);
  background-color: var(--surface-color);
  font-size: 14px;
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.service-details .inquiry-form input[type=text]:focus,
.service-details .inquiry-form input[type=email]:focus,
.service-details .inquiry-form input[type=tel]:focus,
.service-details .inquiry-form textarea:focus {
  border-color: var(--accent-color);
}

.service-details .inquiry-form input[type=text]::placeholder,
.service-details .inquiry-form input[type=email]::placeholder,
.service-details .inquiry-form input[type=tel]::placeholder,
.service-details .inquiry-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.service-details .inquiry-form .btn-submit {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  padding: 0.875rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.service-details .inquiry-form .btn-submit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .service-details .service-content h2 {
    font-size: 2rem;
  }

  .service-details .service-content .service-image {
    margin: 2rem 0;
  }

  .service-details .service-features {
    padding: 1.5rem;
    margin: 2rem 0;
  }

  .service-details .sidebar {
    margin-top: 3rem;
  }

  .service-details .sidebar .service-info,
  .service-details .sidebar .service-testimonial,
  .service-details .sidebar .inquiry-form {
    padding: 1.5rem;
  }

  .service-details .process-steps .step-item .step-number {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }

  .service-details .process-steps .step-item:not(:last-child)::after {
    left: 1.25rem;
    top: 3rem;
    height: 1.5rem;
  }
}

/*--------------------------------------------------------------
# Terms Of Service Section
--------------------------------------------------------------*/
.terms-of-service .tos-header {
  margin-bottom: 60px;
}

.terms-of-service .tos-header .last-updated {
  display: inline-block;
  padding: 8px 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 30px;
  color: var(--accent-color);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.terms-of-service .tos-header h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.terms-of-service .tos-header p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

.terms-of-service .tos-content .content-section {
  margin-bottom: 50px;
  scroll-margin-top: 100px;
}

.terms-of-service .tos-content .content-section:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--heading-color);
}

.terms-of-service .tos-content .content-section p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.7;
  margin-bottom: 20px;
}

.terms-of-service .tos-content .content-section p:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .info-box {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .info-box i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .info-box p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .list-items {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.terms-of-service .tos-content .content-section .list-items li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .list-items li:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .list-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .alert-box {
  display: flex;
  gap: 20px;
  padding: 25px;
  background-color: var(--surface-color);
  border-radius: 15px;
  border-left: 4px solid var(--accent-color);
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .alert-box i {
  font-size: 2rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content h5 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .prohibited-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 576px) {
  .terms-of-service .tos-content .content-section .prohibited-list {
    grid-template-columns: 1fr;
  }
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background-color: var(--surface-color);
  border-radius: 12px;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item i {
  color: #dc3545;
  font-size: 1.2rem;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item span {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .disclaimer-box {
  background-color: var(--surface-color);
  padding: 25px;
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .disclaimer-box p {
  margin-bottom: 15px;
  font-weight: 500;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .notice-box {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .notice-box i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .notice-box p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-contact {
  margin-top: 60px;
}

.terms-of-service .tos-contact .contact-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 0%, color-mix(in srgb, var(--accent-color), transparent 98%) 100%);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: center;
  gap: 30px;
}

@media (max-width: 576px) {
  .terms-of-service .tos-contact .contact-box {
    flex-direction: column;
    text-align: center;
  }
}

.terms-of-service .tos-contact .contact-box .contact-icon {
  width: 60px;
  height: 60px;
  background-color: var(--accent-color);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.terms-of-service .tos-contact .contact-box .contact-icon i {
  font-size: 1.8rem;
  color: var(--contrast-color);
}

.terms-of-service .tos-contact .contact-box .contact-content {
  flex: 1;
}

.terms-of-service .tos-contact .contact-box .contact-content h4 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.terms-of-service .tos-contact .contact-box .contact-content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 15px;
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 25px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 30px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media print {
  .terms-of-service .tos-contact {
    display: none;
  }

  .terms-of-service .content-section {
    page-break-inside: avoid;
  }
}

/*--------------------------------------------------------------
# Privacy Section
--------------------------------------------------------------*/
.privacy {
  font-size: 1rem;
  line-height: 1.7;
}

.privacy .privacy-header {
  margin-bottom: 60px;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding-bottom: 40px;
}

.privacy .privacy-header .header-content {
  max-width: 800px;
  margin: 0 auto;
}

.privacy .privacy-header .header-content .last-updated {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 20px;
}

.privacy .privacy-header .header-content h1 {
  font-size: 2.8rem;
  color: var(--heading-color);
  margin-bottom: 20px;
  font-weight: 600;
}

.privacy .privacy-header .header-content .intro-text {
  font-size: 1.2rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
}

.privacy .privacy-content {
  max-width: 800px;
  margin: 0 auto 60px;
}

.privacy .privacy-content .content-section {
  margin-bottom: 50px;
}

.privacy .privacy-content .content-section:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section h2 {
  font-size: 1.8rem;
  color: var(--heading-color);
  margin-bottom: 25px;
  font-weight: 600;
}

.privacy .privacy-content .content-section h3 {
  font-size: 1.4rem;
  color: var(--heading-color);
  margin: 30px 0 20px;
  font-weight: 500;
}

.privacy .privacy-content .content-section p {
  margin-bottom: 20px;
}

.privacy .privacy-content .content-section p:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.privacy .privacy-content .content-section ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
}

.privacy .privacy-content .content-section ul li:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section ul li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--accent-color);
}

.privacy .privacy-contact {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.privacy .privacy-contact h2 {
  font-size: 1.8rem;
  color: var(--heading-color);
  margin-bottom: 20px;
  font-weight: 600;
}

.privacy .privacy-contact p {
  margin-bottom: 20px;
}

.privacy .privacy-contact .contact-details {
  background-color: var(--surface-color);
  padding: 25px;
  border-radius: 10px;
}

.privacy .privacy-contact .contact-details p {
  margin-bottom: 10px;
}

.privacy .privacy-contact .contact-details p:last-child {
  margin-bottom: 0;
}

.privacy .privacy-contact .contact-details p strong {
  color: var(--heading-color);
  font-weight: 600;
}

@media print {
  .privacy {
    font-size: 12pt;
    line-height: 1.5;
  }

  .privacy .privacy-header {
    text-align: left;
    border-bottom: 1pt solid #000;
    padding-bottom: 20pt;
    margin-bottom: 30pt;
  }

  .privacy h1 {
    font-size: 24pt;
  }

  .privacy h2 {
    font-size: 18pt;
    page-break-after: avoid;
  }

  .privacy h3 {
    font-size: 14pt;
    page-break-after: avoid;
  }

  .privacy p,
  .privacy ul {
    page-break-inside: avoid;
  }

  .privacy .contact-details {
    border: 1pt solid #000;
    padding: 15pt;
  }
}

@media (max-width: 767px) {
  .privacy .privacy-header {
    margin-bottom: 40px;
    padding-bottom: 30px;
  }

  .privacy .privacy-header .header-content h1 {
    font-size: 2.2rem;
  }

  .privacy .privacy-header .header-content .intro-text {
    font-size: 1.1rem;
  }

  .privacy .privacy-content .content-section {
    margin-bottom: 40px;
  }

  .privacy .privacy-content .content-section h2 {
    font-size: 1.6rem;
  }

  .privacy .privacy-content .content-section h3 {
    font-size: 1.3rem;
  }
}

/*--------------------------------------------------------------
# Error 404 Section
--------------------------------------------------------------*/
.error-404 {
  padding: 120px 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--surface-color) 0%, color-mix(in srgb, var(--accent-color), transparent 97%) 100%);
}

.error-404 .error-number {
  font-size: clamp(120px, 20vw, 280px);
  font-weight: 300;
  color: color-mix(in srgb, var(--heading-color), transparent 15%);
  line-height: 0.8;
  margin-bottom: 40px;
  font-family: var(--heading-font);
  letter-spacing: -0.02em;
}

.error-404 .error-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}

.error-404 .error-description {
  font-size: 18px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.error-404 .error-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  margin-bottom: 80px;
}

@media (min-width: 576px) {
  .error-404 .error-actions {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }
}

.error-404 .error-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  transition: all 0.3s ease;
  border: 2px solid var(--accent-color);
}

.error-404 .error-actions .btn-primary:hover {
  background-color: transparent;
  color: var(--accent-color);
  transform: translateY(-2px);
}

.error-404 .error-actions .btn-primary i {
  font-size: 18px;
}

.error-404 .error-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background-color: transparent;
  color: var(--heading-color);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  transition: all 0.3s ease;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
}

.error-404 .error-actions .btn-secondary:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}

.error-404 .error-actions .btn-secondary i {
  font-size: 18px;
}

.error-404 .helpful-links {
  text-align: center;
}

.error-404 .helpful-links h3 {
  font-size: 24px;
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 40px;
}

.error-404 .helpful-links .links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .error-404 .helpful-links .links-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.error-404 .helpful-links .link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 20px;
  background-color: var(--surface-color);
  border-radius: 8px;
  text-decoration: none;
  color: var(--default-color);
  transition: all 0.3s ease;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.error-404 .helpful-links .link-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.error-404 .helpful-links .link-item i {
  font-size: 24px;
  color: var(--accent-color);
  transition: all 0.3s ease;
}

.error-404 .helpful-links .link-item span {
  font-size: 16px;
  font-weight: 400;
}

.error-404 .helpful-links .link-item:hover i {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .error-404 {
    padding: 80px 0;
  }

  .error-404 .error-actions {
    margin-bottom: 60px;
  }

  .error-404 .helpful-links .links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .error-404 .helpful-links .links-grid {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/