/* ======================================================================== */
/* T.T Labs Website Styles */
/* ======================================================================== */

/* ================== Table Of Content ================== */

/*
01. Import Vendor
02. Root Variables
    2.1 Colors Variables
    2.2 Font Weight Variables
    2.3 Font Size Variables
    2.4 Line Height Variables
03. Keyframes Animations
04. Base Styles
05. Global Layout Styles
06. Accent Color
07. Form Layout Components
    7.1 Form Layout
    7.2 Validation Styles
08. Navbar
09. Sidebar
10. Content Edit Sidebar
11. Newsletter Form
12. Button
13. Banner Video Container
14. Banner Components
    14.1 Banner Layout
    14.2 Banner Layout 404
15. Footer
16. Digital Process
17. Heading Components
    17.1 Title Heading
    17.2 Navbar Action Component
    17.3 Testimonial Reviewer
    17.4 Avatar Container
18. Sidebar Overlay
19. Content Sidebar Overlay
20. Custom Spacer Components
21. Text Components
    21.1 Text 404
22. Search Components
    22.1 Search Button
23. Card Components
24. About Components
25. Expertise Components
26. Partner Components
27. Partnership Components
28. Service Components
29. Case Studies Components
30. Team Components
31. Contact Components
32. Blog Components
33. Pricing Components
34. Core Benefits
35. Guide Components
36. Underline Components
37. Social Team Components
38. Testimonial Components
39. Newsletter Components
40. Breadcrumb Components
41. Icon Components
    41.1 Icon Components
    41.2 Stars
    41.3 Social Icons Components
    41.4 Social Container
    41.5 Social Footer Container
42. Counter Text
43. Service List
44. Link Wrapper
45. Choose Us Components
46. Image Container Components
47. Request Loader
48. Modal Components
49. Detail List
50. Accordion Components
51. Maps Components
52. Single Service Components
53. CTA Service Banner Components
54. Animate Components
55. CustomText Container Components
56. Footer Components
    56.1 Footer Layout
    56.2 Footer List
    56.3 Contact List
    56.4 Footer Logo Container
    56.5 Footer Quick Links
    56.6 Footer Services Container
    56.7 Footer Contact Container
    56.8 Copyright Container
    56.9 Legal Link
    56.10 Footer Spacer
57. Media Queries
    57.1 Tablet Responsive
    57.2 Mobile Responsive
*/

/* ================== 01. Import Vendor ================== */
/* Vendor CSS now loaded directly in HTML for better performance */

/* ================== 02 Root Variables ================== */

/* 2.1 Colors Variables */

:root{
    --primary: #D1D1D1;
    --secondary: #040404;
    --text-color: #8B8B8B;
    --text-color-2: #D1D1D1;
    --accent-color: #C82AEF;
    --accent-color-2: #FFFFFF;
    --accent-color-3: #1F1F1F;
    --accent-color-4: #0E0E0E;
    --accent-color-5: #0404047D;
    --accent-color-6: #C82AEF85;
    --star-color: #EFBC2A;
    --error-color: #e63946;
    --accent-transparent: #00000000;
    --accent-transparent-2: #00000073;
    --box-shadow-top-left: -3px -3px 7px 0px rgba(200.00000000000006, 42, 238.99999999999997, 0.44);
    --box-shadow-bottom-right: 3px 3px 7px 0px rgba(200.00000000000006, 42, 238.99999999999997, 0.44);
    --box-shadow-top-left-wide: -3px -3px 10px 0px rgba(200.00000000000006, 42, 238.99999999999997, 0.44);
    --box-shadow-bottom-right-wide: 3px 3px 10px 0px rgba(200.00000000000006, 42, 238.99999999999997, 0.44);
    --global-font: "Plus Jakarta Sans", sans-serif;
    --global-border-radius: 25px 25px 25px 25px;
    --animation-normal: 1.25s;
    --animation-slow: 2s;
    --animation-fast: 0.75s;
    
    /* 2.2 Font Weight Variables */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    /* 2.3 Font Size Variables */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 22px;
    --font-size-3xl: 24px;
    --font-size-4xl: 25px;
    --font-size-5xl: 28px;
    --font-size-6xl: 30px;
    --font-size-7xl: 32px;
    --font-size-8xl: 38px;
    --font-size-9xl: 40px;
    --font-size-10xl: 45px;
    --font-size-11xl: 46px;
    --font-size-12xl: 50px;
    --font-size-13xl: 56px;
    --font-size-14xl: 64px;
    --font-size-15xl: 100px;
    --font-size-16xl: 150px;
    --font-size-17xl: 200px;
    
    /* 2.4 Line Height Variables */
    --line-height-tight: 1em;
    --line-height-snug: 1.2em;
    --line-height-normal: 1.3em;
    --line-height-relaxed: 1.4em;
    --line-height-loose: 1.5em;
    --line-height-extra-loose: 1.6em;
    --line-height-ultra-tight: 0.9em;
    --line-height-px-20: 20px;
    --line-height-px-21: 21px;
}

/* ================== 02.5 Light Mode Theme Variables ================== */

[data-theme="light"] {
    --primary: #1A1A1A;
    --secondary: #FFFFFF;
    --text-color: #4A4A4A;
    --text-color-2: #1A1A1A;
    --accent-color: #C82AEF;
    --accent-color-2: #1A1A1A;
    --accent-color-3: #F8F9FA;
    --accent-color-4: #FFFFFF;
    --accent-color-5: #E9ECEF;
    --accent-color-6: #C82AEF40;
    --star-color: #FFA500;
    --error-color: #e63946;
    --accent-transparent: #FFFFFF00;
    --accent-transparent-2: #00000015;
    --box-shadow-top-left: -3px -3px 7px 0px rgba(200, 42, 239, 0.15);
    --box-shadow-bottom-right: 3px 3px 7px 0px rgba(200, 42, 239, 0.15);
    --box-shadow-top-left-wide: -3px -3px 10px 0px rgba(200, 42, 239, 0.15);
    --box-shadow-bottom-right-wide: 3px 3px 10px 0px rgba(200, 42, 239, 0.15);
}

/* Smooth theme transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Disable transitions on specific elements that have their own animations */
.animate__animated,
.swiper-slide,
video,
canvas {
    transition: none !important;
}

/* ================== 03. Keyframes Animations ================== */

@property --progress {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

@keyframes load {
    to {
        --progress: var(var(--value))
    }
}

@keyframes ripple {
    from {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        transform-origin: center;
        border-width: 0px;
    }

    to {
        opacity: 0;
        transform: scale3d(1.7, 1.7, 1.8);
        transform-origin: center;
        border-width: 13px;
    }
}

@keyframes menu-animation {
    0% {
        opacity: 0;
        -webkit-transform: scale(.04) translateY(300%);
        transform: scale(.04) translateY(300%);
    }
    40% {
        -webkit-transform: scale(.04) translateY(0);
        transform: scale(.04) translateY(0);
        -webkit-transition: ease-out;
        transition: ease-out;
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(.02) translateY(0);
        transform: scale(.02) translateY(0);
    }
    61% {
        opacity: 1;
        -webkit-transform: scale(.04) translateY(0);
        transform: scale(.04) translateY(0);
    }
    99.9% {
        opacity: 1;
        height: 0;
        padding-bottom: 100%;
        border-radius: 100%;
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        height: 100%;
        padding-bottom: 0;
        border-radius: 0;
    }
}
 
/* ================== 04. Base Styles ================== */

html {
    overflow-x: hidden;
    max-width: 100%;
}

body{
    background-color: var(--secondary);
    font-family: var(--global-font);
    color: var(--primary);
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

main {
    overflow-x: hidden;
    max-width: 100%;
}

h1 {
    font-size: var(--font-size-15xl);
    line-height: var(--line-height-normal);
}

h2{
    font-size: var(--font-size-14xl);
    line-height: var(--line-height-snug);
}

h3 {
    font-size: var(--font-size-11xl);
    line-height: var(--line-height-snug);
}

h4 {
    font-size: var(--font-size-5xl);
    line-height: var(--line-height-loose);
}

h5 {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-loose);
}

h6 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-loose);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    margin: 0;
}

button, a{
    font-size: var(--font-size-base);
    color: var(--accent-color);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

p {
    font-size: var(--font-size-lg);
    margin-bottom: 14.4px;
    font-weight: var(--font-weight-medium);
    color: var(--text-color);
}

ul{
    list-style: none;
}

/* ================== 05. Global Layout Styles ================== */

.section {
    padding: 120px 20px 120px 20px;
}

.hero-container {
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

.section-banner{
    padding: 0px;
}

.section-404{
    padding: 30px 30px 30px 30px;
}

.section-partner{
    padding: 0px 20px 0px 20px;
}

.section-guide{
    padding: 0px 30px 0px 30px;
}

.section404{
    display: flex;
    flex-direction: column;
    gap: 1em;
    min-height: 900px;
    justify-content: center;
    align-items: center;
    text-align: center;
    justify-self: center;
    width: 50%;
    padding: 4em 1em 4em 1em;
}

.section-footer{
    padding: 0px 30px 30px 30px;
}

/* ================== 06. Accent Color ================== */

.accent-color {
    color: var(--accent-color);
}

/* ================== 07. Form Layout Components ================== */

/* 7.1 Form Layout */

.form-layout-wrapper{
    display: flex;
    border-radius: var(--global-border-radius);
    overflow: hidden;
    flex-direction: column;
    padding: 2px 2px 2px 2px;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.form-layout-wrapper::before{
    content: '';
    position: absolute;
    opacity: 0.5;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-transparent) 100%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.form-layout{
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: radial-gradient(at bottom center, var(--accent-color-3), var(--accent-color-4) 50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px 30px;
    border: 1px solid var(--accent-color-3);
    padding: 45px 30px 45px 30px;
}

.form{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.form input,
.form textarea,
.form select {
    background-color: var(--secondary);
    border: none;
    border-radius: 100px;
    color: var(--primary);
    outline: none;
    line-height: var(--line-height-px-21);
    padding: 20px 30px 20px 30px;
    font-size: var(--font-size-base);
    width: 100%;
}

.form textarea{
    border-radius: 35px;
}

.form input:focus,
.form textarea:focus,
.form select:focus {
    box-shadow: none;
    color: var(--primary);
}

.form input:autofill,
.form input:autofill:focus {
    transition: background-color 5000s ease-in-out;
    -webkit-text-fill-color: var(--primary);
}

.form input::placeholder,
.form textarea::placeholder {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
}

.form label{
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    text-align: start;
    color: var(--text-color);
}

.form .form-select {
    color: var(--text-color-2);
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="blue" class="bi bi-check-xl" viewBox="0 0 16 16"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/></svg>');
}

.form input.form-check-input {
    background-color: transparent;
    border: 1px solid gray;
}

.form input.form-check-input:checked {
    border: 1px solid blue;
    color: blue;
}

.form-button-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: auto;
}

/* 7.2 Validation Styles */

.error-text {
    color: var(--accent-color);
    font-size: var(--font-size-base);
    margin-bottom: 10px;
  }

.alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2em;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid var(--background-color);
  }

.success {
    display: flex;
    flex-direction: column;
    gap: 1em;
    background-color: var(--primary);
    color: var(--secondary);
}

.success span,
.success p{
    color: var(--secondary);
}
  
.error {
    display: flex;
    flex-direction: column;
    gap: 1em;
    background-color: var(--primary);
    color: var(--secondary);
}

.error span,
.error p{
    color: var(--secondary);
}
  
.check-icon,
.cross-icon {
    font-size: var(--font-size-xl);
    margin-right: 10px;
}

.hidden{
    display: none;
}

.search-form input {
    background-color: var(--accent-transparent);
    border: 1px solid var(--accent-color-5);
    border-right: none;
    border-radius: 25px 0px 0px 25px;
    height: 70px;
    padding: 0px 30px;  
    width: 600px;
    color: var(--primary);
}

.search-form input:focus {
    border: 1px solid var(--accent-color-5);
    border-right: none;
    outline: 1px solid var(--accent-color-5);
    outline-offset: 0;
}

.search-form button {
    border: 1px solid var(--accent-color-5);
    border-left: none;
    background-color: transparent;
    color: var(--accent-color-1);
    border-radius: 0px 25px 25px 0px;
    padding: 0px 30px;
    height: 70px;
}

.search-form input:autofill,
.search-form input:autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: var(--accent-color-5) !important;
    -webkit-text-fill-color: var(--accent-color-5) !important;
}

/* ================== 08. Navbar ================== */

.navbar-wrapper{
    display: flex;
    flex-direction: row;
    align-self: stretch;
    width: 100%;
    height: 100%;
    padding: 30px 30px 30px 30px;
}

.navbar {
    position: relative;
    display: flex;
    width: 100%;
    z-index: 3;
    padding: 1em;
    border: 1px solid var(--accent-color-3);
    background-color: var(--accent-color-4);
    padding: 15px 30px 15px 30px;
    border-radius: var(--global-border-radius);
}

.navbar-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

/* On mobile/tablet we rely on sidebar, not navbar collapse */
@media screen and (max-width: 1199.98px){
    .navbar{
        position: relative;
    }
    .navbar-container{
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }
    .nav-btn{ display: block; }
    /* Hide inline navbar content; sidebar provides mobile navigation */
    .navbar-collapse{ display: none !important; }
    .navbar-action-container{ display: none !important; }
}

.nav-btn{
    display: none;
    padding: 8px 16px;
    background-color: var(--accent-color);
    color: var(--primary);
    box-shadow: none;
    transition: all 0.3s ease;
}
.navbar-nav .nav-link:focus {
    color: var(--accent-color);
    background-color: none;
}

.nav-link {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-loose);
    color: var(--primary);
    background-color: transparent;
    padding: 8px 16px 8px 16px !important;
}

.navbar-nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.navbar-collapse{
    display: flex;
    justify-content: space-between;
}

.nav-link:hover,
.nav-link.active,
.nav-link.show {
    color: var(--accent-color) !important;
    background-color: transparent;
}

.navbar-toggler:focus{
    box-shadow: none;
}

.dropdown-menu {
    border-radius: 0;
    border: none;
    padding: 0;
    border-radius: 25px;
    width: 220px;
    background-color: var(--secondary);
    overflow: hidden;
    -webkit-box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
    box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
}

.dropdown-item {
    padding-block: 0.75rem;
    color: var(--primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    padding-inline: 0.75rem;
}

.dropdown-item.active {
    color: var(--text-color);
    background-color: transparent;
}

.dropdown-item:hover {
    background-color: var(--secondary);
    color: var(--text-color);
}

.dropdown-item:focus {
    color: var(--text-color);
}

.dropdown-toggle::after {
    display: none !important;
}

/* ================== 09. Premium Mobile Sidebar ================== */

/* Main Sidebar Container */
.sidebar {
    position: fixed;
    top: 0;
    left: -380px;
    width: 380px;
    height: 100vh;
    background: rgba(15, 15, 25, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: var(--primary);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        8px 0 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(168, 85, 247, 0.1);
}

[data-theme="light"] .sidebar {
    background: rgba(255, 255, 255, 0.98);
    box-shadow:
        8px 0 40px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(168, 85, 247, 0.2);
}

.sidebar.active {
    transform: translateX(380px);
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px;
    border-bottom: 1px solid rgba(168, 85, 247, 0.15);
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.05) 0%, transparent 100%);
    flex-shrink: 0;
}

.sidebar-logo-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-brand-logo {
    max-height: 32px;
    filter: drop-shadow(0 2px 8px rgba(168, 85, 247, 0.3));
    transition: all 0.3s ease;
}

.sidebar-brand-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 12px rgba(168, 85, 247, 0.5));
}

.sidebar-badge {
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3);
}

.sidebar-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(168, 85, 247, 0.3);
    background: rgba(168, 85, 247, 0.1);
    color: var(--accent-color);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-close-btn:hover {
    background: var(--accent-color);
    color: white;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
    border-color: var(--accent-color);
}

/* Scrollable Content */
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.3) transparent;
}

.sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.3);
    border-radius: 10px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 85, 247, 0.5);
}

/* Section Headers */
.sidebar-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-bottom: 12px;
    cursor: pointer;
}

.section-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-icon {
    color: var(--accent-color);
    font-size: 18px;
}

.section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-expand-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(168, 85, 247, 0.2);
    background: rgba(168, 85, 247, 0.05);
    color: var(--accent-color);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-expand-btn:hover {
    background: rgba(168, 85, 247, 0.15);
    transform: translateY(-2px);
}

.sidebar-expand-btn.active {
    transform: rotate(180deg);
}

/* Mega Menu Section */
.sidebar-mega-section {
    margin-bottom: 24px;
}

.sidebar-mega-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-mega-menu.active {
    max-height: 2000px;
}

.mega-menu-desc {
    font-size: 12px;
    color: var(--text-color);
    margin: 0 0 16px 0;
    padding: 0 8px;
    line-height: 1.5;
}

/* Mega Menu Items */
.sidebar-mega-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(20, 20, 30, 0.4);
    border: 1px solid rgba(168, 85, 247, 0.1);
    margin-bottom: 10px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .sidebar-mega-item {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(168, 85, 247, 0.2);
}

.sidebar-mega-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(168, 85, 247, 0.15) 0%,
        rgba(236, 72, 153, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-mega-item:hover {
    transform: translateX(4px);
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.2);
}

.sidebar-mega-item:hover::before {
    opacity: 1;
}

.sidebar-mega-item.featured {
    background: linear-gradient(135deg,
        rgba(168, 85, 247, 0.15) 0%,
        rgba(236, 72, 153, 0.08) 100%);
    border-color: rgba(168, 85, 247, 0.3);
}

.mega-item-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.sidebar-mega-item:hover .mega-item-icon {
    transform: rotate(-10deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
}

.mega-item-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.mega-item-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mega-item-desc {
    font-size: 12px;
    color: var(--text-color);
    margin: 0;
    line-height: 1.4;
}

.mega-item-arrow {
    color: var(--accent-color);
    font-size: 16px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.sidebar-mega-item:hover .mega-item-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Mega Menu Grid */
.sidebar-mega-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Item Badges */
.item-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-badge.popular {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
}

.item-badge.new {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.item-badge.overview {
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    color: white;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
}

/* Elegant Menu Section */
.sidebar-elegant-section {
    margin-bottom: 24px;
}

.sidebar-elegant-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-elegant-menu.active {
    max-height: 1000px;
}

.sidebar-elegant-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(20, 20, 30, 0.3);
    border: 1px solid rgba(168, 85, 247, 0.08);
    margin-bottom: 8px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

[data-theme="light"] .sidebar-elegant-item {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(168, 85, 247, 0.15);
}

.sidebar-elegant-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-color), #ec4899);
    transform: scaleY(0);
    transition: transform 0.3s ease;
    border-radius: 0 3px 3px 0;
}

.sidebar-elegant-item:hover {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
    padding-left: 20px;
}

.sidebar-elegant-item:hover::before {
    transform: scaleY(1);
}

.elegant-item-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--accent-color);
    transition: all 0.3s ease;
}

.sidebar-elegant-item:hover .elegant-item-icon {
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    color: white;
    transform: rotate(10deg) scale(1.05);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
}

.elegant-item-content {
    flex: 1;
}

.elegant-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 3px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.elegant-item-desc {
    font-size: 11px;
    color: var(--text-color);
    margin: 0;
    line-height: 1.3;
}

.elegant-item-arrow {
    color: var(--accent-color);
    font-size: 14px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.sidebar-elegant-item:hover .elegant-item-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Simple Links */
.sidebar-simple-links {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(168, 85, 247, 0.15);
}

.sidebar-simple-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(20, 20, 30, 0.3);
    border: 1px solid rgba(168, 85, 247, 0.08);
    margin-bottom: 8px;
    text-decoration: none;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
}

[data-theme="light"] .sidebar-simple-link {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(168, 85, 247, 0.15);
}

.sidebar-simple-link i {
    color: var(--accent-color);
    font-size: 18px;
    transition: all 0.3s ease;
}

.sidebar-simple-link:hover {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
    transform: translateX(4px);
    color: var(--accent-color);
}

.sidebar-simple-link:hover i {
    transform: scale(1.2);
}

/* Sidebar Footer */
.sidebar-footer {
    flex-shrink: 0;
    padding: 20px;
    border-top: 1px solid rgba(168, 85, 247, 0.15);
    background: linear-gradient(180deg, transparent 0%, rgba(168, 85, 247, 0.05) 100%);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-theme-toggle {
    width: 70px;
    height: 36px;
    border-radius: 18px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
}

.sidebar-theme-toggle:hover {
    background: rgba(168, 85, 247, 0.15);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
}

.theme-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 2;
}

.theme-icon.sun {
    color: #f59e0b;
}

.theme-icon.moon {
    color: #6366f1;
}

.theme-toggle-slider {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
    left: 4px;
}

[data-theme="light"] .theme-toggle-slider {
    transform: translateX(34px);
}

.sidebar-cta-btn {
    flex: 1;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.sidebar-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
}

.sidebar-cta-btn i {
    transition: transform 0.3s ease;
}

.sidebar-cta-btn:hover i {
    transform: translateX(4px);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .sidebar {
        left: -320px;
        width: 320px;
    }

    .sidebar.active {
        transform: translateX(320px);
    }

    .sidebar-content {
        padding: 16px;
    }

    .mega-item-icon,
    .elegant-item-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 16px;
    }

    .mega-item-title {
        font-size: 14px;
    }

    .mega-item-desc,
    .elegant-item-desc {
        font-size: 11px;
    }
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(200, 42, 239, 0.05);
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-color), #A855F7);
    border-radius: 10px;
    transition: background 0.3s ease;
}

/* ================== 10. Content Edit Sidebar ================== */

.content-edit-sidebar {
    position: fixed;
    top: 0;
    right: -410px;
    width: 410px;
    height: 100%;
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
    overflow-y: auto;
    max-height: 100vh;
    cursor: default;
    padding: 0px 16px 0px 5px;
}

.content-edit-sidebar.active{
    transform: translateX(-410px);
}

.content-edit-sidebar .content{
    padding: 50px 30px 0px 30px;
}

.content-edit-sidebar .content span{
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
}

.close-btn-second {
    display: inline-block;
    justify-content: center;
    background-color: var(--accent-transparent);
    border: none;
    border-radius: 25% 25% 25% 25%;
    color: var(--primary);
    font-weight: var(--font-weight-bold);
    position: relative;
    font-size: var(--font-size-lg);
    cursor: pointer;
    border: 1px solid var(--accent-color);
    padding: 12px 15px 12px 15px;
    transition: all 0.4s;
}

.close-btn-second:hover{
    border: 1px solid var(--primary);
    color: var(--accent-color);
}


.content-edit{
    padding: 5px 6px 0px 5px;
    background-color: transparent;
    color: var(--primary);
    height: auto;
    border: none;
    transition: all 0.3s;
}

.content-edit svg {
    width: 30px;
    height: 30px;
}

.content-edit:hover{
    color: var(--accent-color);
}

/* ================== 11. Newsletter Form ================== */

#newsletterForm {
    display: flex;
    flex-direction: row;
    border-radius: 100px 100px 100px 100px;
    padding: 10px 10px 10px 10px;
    justify-content: space-between;
    align-items: center;
    align-self: center;
    background-color: var(--secondary);
    width: 80%;
}

#newsletterForm input {
    padding: 23px 20px 23px 20px;
    border-radius: 20px 20px 20px 20px;
    width: 100%;
    height: auto;
    font-size: var(--font-size-base);
    color: var(--primary) !important;
    background-color: var(--secondary) !important;
    text-align: left;
    border: none;
    outline: none;
}

#newsletterForm input::placeholder{
    color: var(--primary);
}

#newsletterForm input:autofill,
#newsletterForm input:autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: var(--secondary) !important;
    -webkit-text-fill-color: var(--secondary) !important;
}

#newsletterForm .error-text {
    color: var(--error-color);
    font-size: var(--font-size-sm);
    margin-top: 4px;
}

#newsletterForm .hidden {
    display: none;
}

#newsletterForm button:hover {
    background-color: transparent;
    color: var(--primary);
}

#newsletter-success{
    background-color: var(--primary);
    color: var(--primary);
}
#newsletter-error{
    background-color: var(--primary);
    color: var(--primary);
}

/* ================== 12. Button ================== */

.btn{
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 100px 100px 100px 100px;
    padding: 5px 5px 5px 5px;
    justify-content: space-between;
    align-self: stretch;
}

.btn-accent{
    fill: var(--accent-color-2);
    transition: all 0.6s;
    background-color: var(--accent-color-4);
    box-shadow: var(--box-shadow-top-left);
}

.btn-title{
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    padding: 20px 30px 20px 30px;
    color: var(--accent-color-2);
    text-decoration: none;
    align-self: center;
    width: 100%;
    transition: all 0.6s;
}

.btn-title a,
.btn-title span{
    color: var(--primary);
}

.btn-accent:hover{
    box-shadow: var(--box-shadow-bottom-right);
    background-color: var(--accent-color-3) !important; /* Darker background for better contrast */
}

.btn:hover .btn-title a,
.btn:hover .btn-title span,
.btn:focus .btn-title a,
.btn:focus .btn-title span{
    color: var(--accent-color-2) !important; /* Use white text for better contrast */
}

.btn-sidebar{
    display: inline-block;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: 17px 32px;
    border-radius: 30px !important;
    transition: all 0.15s ease-in-out;
    border-radius: 25px;
    line-height: var(--line-height-tight);
    letter-spacing: 1px;
}

/* ================== 13. Banner Video Container ================== */

.banner-video-container{
    display: flex;
    flex-direction: column;
    padding: 140px 0px 140px 0px;
    border-radius: 0;
    border: none;
    position: relative;
    min-height: auto;
    overflow: hidden;
    z-index: 1;
    /* Animated gradient border effect */
    box-shadow: 
        inset 0 -3px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 3px 0 0 rgba(255, 255, 255, 0.05),
        0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Force white text and correct button colors in banner for all themes */
.banner-video-container .request-loader {
    background-color: #FFFFFF;
    color: #040404;
}

.banner-video-container .request-loader:hover {
    background-color: var(--accent-color);
    color: #FFFFFF;
}

.banner-video-container::before{
    content: '';
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-transparent) 0%, var(--secondary) 100%);
    opacity: 0.51;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    animation: gradientPulse 8s ease-in-out infinite;
}

/* Animated gradient overlay */
/* Service Icon Alive Animations */
@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-8px) rotate(2deg);
    }
    50% {
        transform: translateY(-5px) rotate(-1deg);
    }
    75% {
        transform: translateY(-10px) rotate(1deg);
    }
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.05);
        filter: brightness(1.2);
    }
}

@keyframes gradientPulse {
    0%, 100% {
        opacity: 0.51;
        background-image: radial-gradient(at center center, var(--accent-transparent) 0%, var(--secondary) 100%);
    }
    50% {
        opacity: 0.65;
        background-image: radial-gradient(at top left, var(--accent-transparent) 20%, var(--secondary) 80%);
    }
}

/* Animated corner accents */
.banner-video-container::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background: 
        linear-gradient(90deg, var(--accent-color) 0%, transparent 40%) top left / 200px 3px no-repeat,
        linear-gradient(0deg, var(--accent-color) 0%, transparent 40%) top left / 3px 200px no-repeat,
        linear-gradient(90deg, transparent 60%, var(--accent-color) 100%) top right / 200px 3px no-repeat,
        linear-gradient(0deg, transparent 60%, var(--accent-color) 100%) top right / 3px 200px no-repeat,
        linear-gradient(90deg, var(--accent-color) 0%, transparent 40%) bottom left / 200px 3px no-repeat,
        linear-gradient(180deg, var(--accent-color) 0%, transparent 40%) bottom left / 3px 200px no-repeat,
        linear-gradient(90deg, transparent 60%, var(--accent-color) 100%) bottom right / 200px 3px no-repeat,
        linear-gradient(180deg, transparent 60%, var(--accent-color) 100%) bottom right / 3px 200px no-repeat;
    opacity: 0.8;
    animation: cornerGlow 3s ease-in-out infinite alternate;
}

@keyframes cornerGlow {
    0% {
        opacity: 0.6;
        filter: brightness(1);
    }
    100% {
        opacity: 1;
        filter: brightness(1.5) drop-shadow(0 0 10px var(--accent-color));
    }
}

#banner-video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

/* Utility class for object-fit cover */
.object-cover {
    object-fit: cover;
}

.banner-video-content{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 38%;
}

.banner-video-content p{
    max-width: 50%;
    font-size: var(--font-size-base);
    color: #FFFFFF;
}

/* ================== 14. Banner Components ================== */

/* 14.1 Banner Layout */
.banner-layout-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 120px 0px;
    border: 1px solid var(--accent-color-3);
    border-radius: var(--global-border-radius);
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    padding: 0px 0px 0px 0px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.banner-layout-wrapper::before{
    content: '';
    position: absolute;
    background-image: url('../image/regular-square-grids-4AL3FJ8.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    top: 0;
    left: 0;
    z-index: -1;
}

.banner-layout{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 120px 0px;
    width: 100%;
    height: 100%;
    padding: 120px 20px 0px 20px;
    color: var(--primary);
    position: relative;
    z-index: 1;
}

.banner-layout::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: radial-gradient(at bottom center, var(--accent-color) 0%, var(--accent-transparent) 50%);
    width: 100%;
    height: 100%;
    opacity: 0.2;
    top: 0;
    left: 0;
    z-index: -1;
}

.banner-layout .spacer{
    align-self: center;
    width: 80%;
    height: 2px;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color) 0%, var(--accent-transparent) 75%);
}

.banner-content{
    display: flex;
    flex-direction: column;
    width: 53%;
    gap: 50px;
    text-align: start;
}

.banner-content p{
    color: #FFFFFF;
}

.banner-reviewer{
    display: flex;
    flex-direction: row;
    margin-right: auto;
    align-items: center;
    gap: 30px;
    justify-content: space-between;
}

.banner-reviewer .detail{
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: #FFFFFF;
}

/* 14.2 Banner Layout 404 */

.banner-layout-404{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2px 2px 2px 2px;
    border-radius: var(--global-border-radius);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.banner-layout-404::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: linear-gradient(360deg, var(--accent-color) 0%, var(--accent-transparent) 70%);
    width: 100%;
    height: 100%;
    opacity: 0.2;
    top: 0;
    left: 0;
    z-index: -1;
}

.layout-404{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 15px 15px;
    min-height: 93vh;
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    border-radius: var(--global-border-radius);
    padding: 0px 20px 0px 20px;
    position: relative;
    z-index: 1;
}

.layout-404::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color) 0%, var(--accent-transparent) 70%);
    width: 100%;
    height: 100%;
    opacity: 0.2;
    top: 0;
    left: 0;
    z-index: -1;
}

.layout-404 p{
    max-width: 40%;
}

.quote-container{
    display: flex;
    flex-direction: column;
    gap: 30px 30px;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px 30px 0px 30px;
    border-radius: var(--global-border-radius);
    border: 1px solid var(--accent-color-3);
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 70%);
    color: var(--primary);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.quote-container::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: radial-gradient(at bottom center, var(--accent-color) 0%, var(--accent-transparent) 60%);
    width: 100%;
    height: 100%;
    opacity: 0.2;
    top: 0;
    left: 0;
    z-index: -1;
}

.quote{
    color: var(--primary);
}

.quote-description{
    font-size: var(--font-size-base);
    color: var(--text-color);
}

/* ================== 15. Footer ================== */

.bg-footer-wrapper{
    display: flex;
    flex-direction: column;
    border-radius: var(--global-border-radius);
    padding: 2px 2px 0px 2px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.bg-footer-wrapper::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-transparent) 100%);
    opacity: 0.5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.bg-footer{
    display: flex;
    flex-direction: column;
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3), var(--secondary) 50%);
    gap: 0px 50px;
    border-radius: var(--global-border-radius);
    padding: 120px 20px 0px 20px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.bg-footer::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: radial-gradient(at bottom center, var(--accent-color) 0%, var(--accent-transparent) 40%);
    opacity: 0.2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* ================== 16. Digital Process ================== */

.section-wrapper-digital-process{
    padding: 0px 30px 0px 30px;
}

.section-wrapper-digital-process .spacer{
    align-self: center;
    width: initial;
    height: 3px;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%);
}

.digital-process-banner{
    position: relative;
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--secondary) 50%);
    overflow: hidden;
    border: 1px solid var(--accent-color-3);
    border-radius: var(--global-border-radius);
    padding: 120px 20px 120px 20px;
    z-index: 1;
}

.digital-process-content{
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 50px 50px;
    z-index: 2;
}

.digital-process-banner::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    background-image: radial-gradient(at bottom center, var(--accent-color) 0%, var(--accent-transparent) 40%);
    opacity: 0.2;
    z-index: 0;
}

.digital-process-steps-wrapper{
    display: flex;   
    border-radius: var(--global-border-radius);
    padding: 2px 2px 0px 2px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.digital-process-steps-wrapper::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-transparent) 65%);
    opacity: 0.2;
    z-index: 0;
}

.digital-process-steps{
    background-color: var(--secondary);
    display: flex;
    flex-direction: row;
    gap: 30px 30px;
    overflow: hidden;
    border-radius: var(--global-border-radius);
    border: 1px solid var(--accent-color-3);
    padding: 30px 30px 30px 30px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.digital-process-step{
     display: flex;
     flex-direction: column;
     gap: 50px 50px;
}

.step-spacer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%);
    width: 3px;
    height: 200px;
}

.process-icon{
    width: 20%;
}

.space-header{
    display: block;
    height: 150px;
}

/* ================== 17. Heading Components ================== */

/* 17.1 Title Heading */
.title-heading-banner{
    display: inline-block;
    -webkit-background-clip: text;
    background-color: transparent;
    background-image: linear-gradient(340deg, rgba(255, 255, 255, 0.95) 30%, rgba(168, 85, 247, 0.95) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-tap-highlight-color: transparent;
    background-size: 200% 200%;
    animation: gradientShift 6s ease-in-out infinite;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.title-heading{
     display: inline-block;
    -webkit-background-clip: text;
    background-color: transparent;
    background-image: linear-gradient(284deg, var(--accent-color) 0%, var(--primary) 40%, var(--primary) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.banner-heading{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.sub-heading{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.sub-heading i{
    color: var(--accent-color);
    font-size: var(--font-size-xl);
}

.sub-heading span{
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-loose);
    color: var(--primary);
}

/* 17.2 Navbar Action Component */

.navbar-action-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0px 0px;
    align-items: center;
    width: 30%;
}

.navbar-action-button{
    display: flex;
    flex-direction: row;
    gap: 20px 20px;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 20px 0px 20px;
}

.navbar-icon-wrapper{
    display: flex;
    flex-direction: row;
    gap: 0px 0px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-wrap: wrap;
    border-radius: 100px 100px 100px 100px;
    width: 270px;
    flex-grow: 1;
    box-shadow: var(--box-shadow-top-left);
    height: auto;
    padding: 5px 5px 5px 5px;
    transition: all 0.6s;
}

.navbar-icon-wrapper:hover{
    box-shadow: var(--box-shadow-bottom-right);
}

.navbar-icon-wrapper h6{
    margin-right: 1em;
}

/* Theme Toggle Button */

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--accent-color-3);
    border: 2px solid var(--accent-color-6);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.05);
}

.theme-toggle i {
    font-size: 20px;
    color: var(--primary);
    transition: transform 0.6s ease, opacity 0.3s ease;
    will-change: transform, opacity;
}

.theme-toggle:hover i {
    color: var(--accent-color-2);
}

/* Theme icon animation */
.theme-toggle .fa-sun {
    position: absolute;
    opacity: 0;
    transform: rotate(180deg);
}

.theme-toggle .fa-moon {
    position: absolute;
    opacity: 1;
    transform: rotate(0deg);
}

[data-theme="light"] .theme-toggle .fa-sun {
    opacity: 1;
    transform: rotate(0deg);
}

[data-theme="light"] .theme-toggle .fa-moon {
    opacity: 0;
    transform: rotate(-180deg);
}

/* 17.3 Testimonial Reviewer */

.testimonial-reviewer{
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.testimonial-reviewer .avatar{
    width: 50px;
    height: auto;
}

/* 17.4 Avatar Container */

.avatar-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 50%;
}

.testimonial-reviewer .detail{
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
}

.testimonial-rating-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.logo-container{
    width: auto;
    min-width: 200px; /* ensure minimum space for logo */
    max-width: 250px; /* prevent logo from being too large */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-container img{
    max-width: 100%;
    height: auto;
}

.logo-container-footer{
    max-width: 200px; /* constrain container width */
    width: auto;
    height: auto;
}

/* ================== 18. Sidebar Overlay ================== */

.sidebar-overlay{
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    opacity: 0;
    z-index: 999;
}

.sidebar-overlay.active{
    left: 0;
    opacity: 1;
}

/* ================== 19. Content Sidebar Overlay ================== */

.content-overlay{
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: var(--accent-color-5);
    transition: left 0.4s ease-in-out;
    z-index: 4;
    cursor: url('../image/svg/cross-out.svg'), pointer; 
}

.content-overlay.active{
    right: 0;
}

/* ================== 20. Custom Spacer Components ================== */

/* Flex spacing (gap) */

.gspace-0 { 
    gap: 0px 0px; 
}
.gspace-1 { 
    gap: 10px 10px; 
}
.gspace-2 { 
    gap: 20px 20px; 
}
.gspace-3 { 
    gap: 30px 30px; 
}
.gspace-4 { 
    gap: 40px 40px; 
}
.gspace-5 { 
    gap: 50px 50px; 
}
.gspace-x-0 { 
    column-gap: 0px; 
}
.gspace-x-1 { 
    column-gap: 10px; 
}
.gspace-x-2 { 
    column-gap: 20px; 
}
.gspace-x-3 { 
    column-gap: 30px; 
}
.gspace-x-4 { 
    column-gap: 40px; 
}
.gspace-x-5 { 
    column-gap: 50px; 
}

.gspace-y-0 { 
    row-gap: 0px; 
}
.gspace-y-1 { 
    row-gap: 10px; 
}
.gspace-y-2 { 
    row-gap: 20px; 
}
.gspace-y-3 { 
    row-gap: 30px; 
}
.gspace-y-4 { 
    row-gap: 40px; 
}
.gspace-y-5 { 
    row-gap: 50px; 
}

/* Grid spacing (row-gap & column-gap) */

.grid-spacer-1{
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.grid-spacer-2{
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.grid-spacer-3{
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
}

.grid-spacer-4{
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}

.grid-spacer-5{
    --bs-gutter-x: 50px;
    --bs-gutter-y: 50px;
}

/* Grid spacing (column-gap) */

.grid-spacer-x-1 {
    --bs-gutter-x: 10px;
}
.grid-spacer-x-2 {
    --bs-gutter-x: 20px;
}
.grid-spacer-x-3 {
    --bs-gutter-x: 30px;
}
.grid-spacer-x-4 {
    --bs-gutter-x: 40px;
}
.grid-spacer-x-5 {
    --bs-gutter-x: 50px;
}

/* Grid spacing (row-gap) */

.grid-spacer-y-1 {
    --bs-gutter-y: 10px;
}
.grid-spacer-y-2 {
    --bs-gutter-y: 20px;
}
.grid-spacer-y-3 {
    --bs-gutter-y: 30px;
}
.grid-spacer-y-4 {
    --bs-gutter-y: 40px;
}
.grid-spacer-y-5 {
    --bs-gutter-y: 50px;
}

/* ================== 21. Text Components ================== */

/* 21.1 Text 404 */

.text-404{
    font-size: var(--font-size-17xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-ultra-tight);
}

    /* ================== 22. Search Components ================== */

/* 22.1 Search Button */

.search-btn{
    font-size: var(--font-size-xl);
    background-color: transparent;
    border: none;
    color: var(--primary);
}

.search-btn:hover{
    color: var(--accent-color);
}

/* ==================== PREMIUM SEARCH OVERLAY ==================== */

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(10, 10, 20, 0.95);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    z-index: 9999;
    display: none;
    overflow-y: auto;
    animation: searchOverlayFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-overlay.active {
    display: flex;
}

/* Light mode search overlay */
[data-theme="light"] .search-overlay {
    background: rgba(255, 255, 255, 0.95);
}

@keyframes searchOverlayFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Close Button */
.search-close {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(168, 85, 247, 0.3);
    background: rgba(168, 85, 247, 0.1);
    backdrop-filter: blur(20px);
    color: var(--accent-color);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-close:hover {
    background: var(--accent-color);
    color: white;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);
    border-color: var(--accent-color);
}

/* Search Content Container */
.search-content {
    max-width: 700px;
    width: 100%;
    margin: 80px auto 40px;
    padding: 0 24px;
    animation: searchContentSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes searchContentSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Search Header */
.search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    animation: fadeIn 0.4s ease 0.1s both;
}

.search-logo-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 50px;
    backdrop-filter: blur(20px);
}

.search-logo-badge i {
    color: var(--accent-color);
    font-size: 18px;
}

.search-logo-badge span {
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.search-shortcut-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    font-size: 13px;
}

.shortcut-key {
    padding: 4px 10px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-color);
    font-family: monospace;
}

/* Search Form */
.search-form {
    margin-bottom: 24px;
    animation: fadeIn 0.4s ease 0.2s both;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(20, 20, 30, 0.6);
    border: 2px solid rgba(168, 85, 247, 0.2);
    border-radius: 16px;
    padding: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    margin-bottom: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .search-input-wrapper {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(168, 85, 247, 0.3);
}

.search-input-wrapper:focus-within {
    border-color: var(--accent-color);
    box-shadow:
        0 8px 32px rgba(168, 85, 247, 0.3),
        0 0 0 4px rgba(168, 85, 247, 0.1);
}

.search-icon {
    color: var(--accent-color);
    font-size: 20px;
    margin: 0 16px;
    animation: searchIconPulse 2s ease-in-out infinite;
}

@keyframes searchIconPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 16px 8px;
    font-size: 18px;
    color: var(--primary);
    outline: none;
    font-weight: 500;
}

.search-input::placeholder {
    color: var(--text-color);
    opacity: 0.6;
}

.search-clear-btn,
.search-submit-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: rgba(168, 85, 247, 0.1);
    color: var(--accent-color);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-clear-btn:hover,
.search-submit-btn:hover {
    background: var(--accent-color);
    color: white;
    transform: scale(1.05);
}

.search-submit-btn {
    margin-left: 8px;
}

/* Search Filters */
.search-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    animation: fadeIn 0.4s ease 0.3s both;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(168, 85, 247, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: 10px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-btn i {
    font-size: 16px;
}

.filter-btn:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
}

.filter-btn.active i {
    color: white;
}

/* Search Results Container */
.search-results-container {
    margin: 24px 0;
    animation: fadeIn 0.4s ease 0.4s both;
}

/* Loading State */
.search-loading {
    text-align: center;
    padding: 60px 20px;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(168, 85, 247, 0.1);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.search-loading p {
    color: var(--text-color);
    font-size: 16px;
    font-weight: 500;
}

/* Results List */
.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: rgba(20, 20, 30, 0.4);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    animation: resultSlideIn 0.3s ease both;
}

[data-theme="light"] .search-result-item {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(168, 85, 247, 0.2);
}

@keyframes resultSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.search-result-item:nth-child(1) { animation-delay: 0.05s; }
.search-result-item:nth-child(2) { animation-delay: 0.1s; }
.search-result-item:nth-child(3) { animation-delay: 0.15s; }
.search-result-item:nth-child(4) { animation-delay: 0.2s; }
.search-result-item:nth-child(5) { animation-delay: 0.25s; }

.search-result-item:hover {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.2);
}

.search-result-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.search-result-content {
    flex: 1;
}

.search-result-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.search-result-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}

.search-result-badge {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-result-badge.services {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.search-result-badge.blog {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.search-result-badge.pages {
    background: rgba(168, 85, 247, 0.2);
    color: var(--accent-color);
}

.search-result-desc {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-arrow {
    color: var(--accent-color);
    font-size: 18px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.search-result-item:hover .search-result-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* No Results State */
.search-no-results {
    text-align: center;
    padding: 80px 20px;
}

.search-no-results i {
    font-size: 64px;
    color: var(--accent-color);
    opacity: 0.3;
    margin-bottom: 24px;
}

.search-no-results h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 12px;
}

.search-no-results p {
    color: var(--text-color);
    font-size: 16px;
    margin-bottom: 24px;
}

.quick-links {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.quick-links a {
    padding: 10px 20px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 10px;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.quick-links a:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-2px);
}

/* Results Footer */
.search-results-footer {
    margin-top: 20px;
    text-align: center;
}

.view-all-btn {
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.view-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);
}

/* Recent Searches */
.search-recent {
    margin: 24px 0;
    animation: fadeIn 0.4s ease 0.5s both;
}

.search-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.search-section-header h5 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.clear-recent-btn {
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.clear-recent-btn:hover {
    color: #ec4899;
}

.recent-searches-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.recent-search-item {
    padding: 8px 16px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 8px;
    color: var(--primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.recent-search-item:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: var(--accent-color);
}

/* Popular Links */
.search-popular {
    margin: 32px 0;
    animation: fadeIn 0.4s ease 0.6s both;
}

.popular-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.popular-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(20, 20, 30, 0.4);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] .popular-link {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(168, 85, 247, 0.2);
}

.popular-link:hover {
    background: rgba(168, 85, 247, 0.1);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.popular-link > i:first-child {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-size: 18px;
}

.popular-link-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.popular-link-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}

.popular-link-desc {
    font-size: 12px;
    color: var(--text-color);
}

.popular-link > i:last-child {
    color: var(--accent-color);
    font-size: 16px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.popular-link:hover > i:last-child {
    opacity: 1;
    transform: translateX(0);
}

/* Keyboard Shortcuts */
.search-shortcuts {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(168, 85, 247, 0.15);
    animation: fadeIn 0.4s ease 0.7s both;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    font-size: 12px;
}

.shortcut-item .shortcut-key {
    padding: 4px 8px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .search-content {
        margin: 60px auto 24px;
        padding: 0 16px;
    }

    .search-close {
        top: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
    }

    .search-header {
        margin-bottom: 24px;
    }

    .search-logo-badge {
        padding: 8px 16px;
    }

    .search-logo-badge i {
        font-size: 16px;
    }

    .search-logo-badge span {
        font-size: 13px;
    }

    .search-shortcut-hint {
        display: none;
    }

    .search-input-wrapper {
        margin-bottom: 12px;
    }

    .search-input {
        font-size: 16px;
        padding: 14px 8px;
    }

    .search-icon {
        font-size: 18px;
        margin: 0 12px;
    }

    .search-clear-btn,
    .search-submit-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .search-filters {
        gap: 6px;
    }

    .filter-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    .filter-btn i {
        font-size: 14px;
    }

    .search-result-item {
        padding: 16px;
        gap: 12px;
    }

    .search-result-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 18px;
    }

    .search-result-title {
        font-size: 15px;
    }

    .search-result-desc {
        font-size: 13px;
    }

    .popular-links {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .popular-link {
        padding: 14px;
        gap: 12px;
    }

    .popular-link > i:first-child {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 16px;
    }

    .popular-link-title {
        font-size: 14px;
    }

    .popular-link-desc {
        font-size: 11px;
    }

    .search-shortcuts {
        flex-wrap: wrap;
        gap: 12px;
    }

    .shortcut-item {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .search-content {
        margin: 48px auto 20px;
    }

    .search-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .search-input {
        font-size: 15px;
        padding: 12px 6px;
    }

    .search-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .search-filters::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        padding: 7px 12px;
        font-size: 12px;
        white-space: nowrap;
    }
}

/* ================== 23. Card Components ================== */

.card{
    position: relative;
    border-radius: var(--global-border-radius);
    border: none;    
    overflow: hidden;
}

.achievement-card {
    transition: all 0.4s ease;
    box-shadow: var(--box-shadow-bottom-right);
}

.achievement-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow-top-left-wide), 0 15px 40px rgba(200, 42, 239, 0.25);
    border-color: var(--accent-color) !important;
}

.achievement-card h3 {
    transition: all 0.3s ease;
}

.achievement-card:hover h3 {
    transform: scale(1.05);
    text-shadow: 0 0 20px rgba(200, 42, 239, 0.5);
}

/* Dark mode text contrast fixes for cards with accent backgrounds */
:root .card[style*="background: var(--accent-color-4)"],
:root .card[style*="background: var(--accent-color-4)"] p,
:root .card[style*="background: var(--accent-color-4)"] li,
:root .card[style*="background: var(--accent-color-4)"] ul,
:root .card[style*="background: var(--accent-color-4)"] div,
:root .card[style*="background: var(--accent-color-4)"] span,
:root div[style*="background: var(--accent-color-4)"],
:root div[style*="background: var(--accent-color-4)"] p,
:root div[style*="background: var(--accent-color-4)"] li,
:root div[style*="background: var(--accent-color-4)"] ul,
:root div[style*="background: var(--accent-color-4)"] div,
:root div[style*="background: var(--accent-color-4)"] span {
    color: #D1D1D1 !important;
}

:root .card[style*="background: var(--accent-color-4)"] h3,
:root .card[style*="background: var(--accent-color-4)"] h4,
:root .card[style*="background: var(--accent-color-4)"] strong,
:root div[style*="background: var(--accent-color-4)"] h3,
:root div[style*="background: var(--accent-color-4)"] h4,
:root div[style*="background: var(--accent-color-4)"] strong {
    color: #FFFFFF !important;
}

/* Light mode - ensure proper contrast */
[data-theme="light"] .card[style*="background: var(--accent-color-4)"],
[data-theme="light"] .card[style*="background: var(--accent-color-4)"] p,
[data-theme="light"] .card[style*="background: var(--accent-color-4)"] li,
[data-theme="light"] .card[style*="background: var(--accent-color-4)"] ul,
[data-theme="light"] .card[style*="background: var(--accent-color-4)"] div,
[data-theme="light"] .card[style*="background: var(--accent-color-4)"] span,
[data-theme="light"] div[style*="background: var(--accent-color-4)"],
[data-theme="light"] div[style*="background: var(--accent-color-4)"] p,
[data-theme="light"] div[style*="background: var(--accent-color-4)"] li,
[data-theme="light"] div[style*="background: var(--accent-color-4)"] ul,
[data-theme="light"] div[style*="background: var(--accent-color-4)"] div,
[data-theme="light"] div[style*="background: var(--accent-color-4)"] span {
    color: #4A4A4A !important;
}

[data-theme="light"] .card[style*="background: var(--accent-color-4)"] h3,
[data-theme="light"] .card[style*="background: var(--accent-color-4)"] h4,
[data-theme="light"] .card[style*="background: var(--accent-color-4)"] strong,
[data-theme="light"] div[style*="background: var(--accent-color-4)"] h3,
[data-theme="light"] div[style*="background: var(--accent-color-4)"] h4,
[data-theme="light"] div[style*="background: var(--accent-color-4)"] strong {
    color: #1A1A1A !important;
}

.achievement-card i {
    transition: all 0.3s ease;
}

.achievement-card:hover i {
    transform: scale(1.1);
}

/* ================== 24. About Components ================== */

.about-layout{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.card-about-wrapper{
    padding: 0px 20px 20px 0px;
    background-color: var(--secondary);
    border-radius: 0px 0px 30px 0px;
}

.card-about{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 425px;
    height: 100%;
    gap: 20px;
    padding: 20px 20px 20px 20px;
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    color: var(--primary);
    box-shadow: var(--box-shadow-top-left);
    transition: all 0.6s;
}

.about-spacer{
    width: 50px;
    height: 50px;
    border-radius: 25px 0px 0px 0px;
    box-shadow: -10px -10px 0px 0px var(--secondary);
}

.about-img-layout{
    width: 50%;
    max-width: 100%;
}

.about-img{
    max-width: 100%;
    width: 100%;
    height: 550px;
    object-fit: cover;
    object-position: center;
}

.about-title{
    width: 50%;
}

.card-about:hover{
    box-shadow: var(--box-shadow-bottom-right);
}

.card-about .counter{
    font-size: var(--font-size-15xl);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-bold);
    color: var(--accent-transparent);
    -webkit-text-stroke-width: 2px;
    stroke-width: 2px;
    -webkit-text-stroke-color: var(--accent-color);
    stroke: var(--accent-color);
}

.card-about .counter-detail{
    font-size: var(--font-size-11xl);
    color: var(--secondary);
    line-height: var(--line-height-normal);
    -webkit-text-stroke-width: 2px;
    stroke-width: 2px;
    -webkit-text-stroke-color: var(--accent-color);
    stroke: var(--accent-color);
}

/* ================== 25. Expertise Components ================== */

.expertise-layout{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.card-expertise-wrapper{
    padding: 0px 20px 20px 0px;
    background-color: var(--secondary);
    border-radius: 0px 0px 30px 0px;
}

.card-expertise{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 360px;
    height: 100%;
    padding: 20px 20px 20px 20px;
    background-color: transparent;
    background-image: radial-gradient(at bottom right, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    color: var(--primary);
    box-shadow: var(--box-shadow-top-left);
    transition: all 0.6s;
}

.card-expertise.card-expertise-counter{
    justify-content: center;
    width: 60%;
    height: auto;
    padding: 30px 30px 30px 30px;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    box-shadow: var(--box-shadow-bottom-right);
}

.card-expertise.card-expertise-counter:hover{
    box-shadow: var(--box-shadow-top-left);
}

.expertise-spacer{
    width: 50px;
    height: 50px;
    border-radius: 25px 0px 0px 0px;
    box-shadow: -10px -10px 0px 0px var(--secondary);
}

.expertise-img-layout{
    width: 40%;
    position: relative;
}

.expertise-title{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.card-expertise:hover{
    box-shadow: var(--box-shadow-bottom-right);
}

.card-expertise .counter{
    font-size: var(--font-size-15xl);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-bold);
    color: var(--accent-transparent);
    -webkit-text-stroke-width: 2px;
    stroke-width: 2px;
    -webkit-text-stroke-color: var(--accent-color);
    stroke: var(--accent-color);
}

.card-expertise .counter-detail{
    font-size: var(--font-size-11xl);
    color: var(--secondary);
    line-height: var(--line-height-normal);
    -webkit-text-stroke-width: 2px;
    stroke-width: 2px;
    -webkit-text-stroke-color: var(--accent-color);
    stroke: var(--accent-color);
}

.expertise-img{
    height: 630px;
}

/* ================== 26. Partner Components ================== */

.card-partner{
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 30%);
    padding: 0px 0px 50px 0px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card-partner::before{
    content: '';
    background-color: transparent;
    background-image: radial-gradient(at top center, var(--accent-color) 0%, var(--accent-transparent) 40%);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.1;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.card-partner .partner-spacer{
    align-self: center;
    width: 80%;
    height: 3px;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%);
}

/* Infinite Scroll Partner Logos */
.infinite-scroll-layout{
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.infinite-scroll-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: transparent;
    z-index: 2;
    background-image: radial-gradient(at center center, var(--accent-transparent) 0%, var(--accent-color-4) 100%);
    pointer-events: none;
}

.infinite-scroll-overlay .spacer{
    height: 100px;
}

.infinite-scroll-container{
    margin: 0px -100px 0px -100px;
    overflow: hidden;
    width: calc(100% + 200px);
}

.infinite-scroll-track{
    display: flex;
    width: fit-content;
    animation: infiniteScroll 30s linear infinite;
    will-change: transform;
}

.infinite-scroll-track:hover{
    animation-play-state: paused;
}

@keyframes infiniteScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.partner-slide{
    background-color: var(--secondary);
    padding: 20px 30px 20px 30px;
    margin: 10px 10px 10px 10px;
    border-radius: 20px 20px 20px 20px;
    transition: all 0.6s ease;
    box-shadow: var(--box-shadow-bottom-right-wide);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-slide:hover{
    box-shadow: var(--box-shadow-top-left-wide);
    transform: scale(1.05);
}

.partner-slide img {
    display: block;
    max-height: 60px;
    width: auto;
}

/* ================== 27. Partnership Components ================== */

.partnership-layout{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: var(--global-border-radius);
    padding: 0px 2px 2px 2px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.partnership-layout::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: linear-gradient(360deg, var(--accent-color) 0%, var(--accent-transparent) 65%);
    opacity: 0.5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.partnership-wrapper{
    background-color: var(--secondary);
    display: flex;
    flex-direction: column;
    gap: 50px 50px;
    border-radius: var(--global-border-radius);
    padding:  0px 50px 50px 50px;
    position: relative;
    z-index: 1;
}

.partnership-wrapper::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: radial-gradient(at top center, var(--accent-color) 0%, var(--accent-transparent) 40%);
    opacity: 0.2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.partnership-spacer{
    align-self: center;
    width: 80%;
    height: 3px;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%);
}

.partnership-container{
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: var(--accent-color-3);
    display: flex;
    flex-direction: column;
    padding: 50px 50px 50px 50px;
}

.partnership-container:nth-child(n+5){
    border-bottom: none;
}

.partnership-container:nth-child(4),
.partnership-container:nth-child(8) {
  border-right: none;
}

.partnership-item{
    opacity: 0.6;
    transition: all 0.6s;
}

.partnership-item:hover{
    opacity: 1;
    transform: scale(1.1);
}

/* ================== 28. Service Components ================== */

.card-service-wrapper{
    display: flex;
    flex-direction: column;
    gap: 20px 0px;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.card-service-wrapper::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color) 0%, var(--accent-transparent) 50%);
    opacity: 0.2;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: -1;
}

.service-title{
    color: var(--primary);
    text-align: start;
    flex: 1;
    max-width: 100%;
    min-width: 0;
}

.service-title h4 {
    max-width: 100%;
    line-height: 1.25;
    font-size: clamp(1.25rem, 3vw, 1.65rem);
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.service-link-footer,
.service-link-footer p{
    font-size: var(--font-size-base) !important;
    color: var(--primary);
    font-weight: var(--font-weight-medium);
}

.service-link-footer:hover a{
    color: var(--text-color);
}

.card-service{
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    border-radius: var(--global-border-radius);
    padding: 30px 30px 30px 30px;
    border: 1px solid var(--accent-color-3);
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: start;
    gap: 30px;
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
    z-index: 1;
    height: 100%;
}

/* Make columns display flex so cards stretch to equal height */
.card-service-wrapper .row .col {
    display: flex;
    flex-direction: column;
}

/* Push button to bottom of card for alignment */
.card-service .btn-accent {
    margin-top: auto;
}

.col:nth-child(even) .card-service {
    background-image: radial-gradient(at bottom right, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
}

.service-icon-wrapper{
    display: flex;
    flex-direction: column;
    width: 90px;
    min-height: 90px;
    border-radius: 28px 28px 28px 28px;
    background-color: var(--secondary);
    justify-content: center;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Staggered entrance animation for icons */
.card-service:nth-child(1) .service-icon {
    animation-delay: 0s;
}
.card-service:nth-child(2) .service-icon {
    animation-delay: 0.15s;
}
.card-service:nth-child(3) .service-icon {
    animation-delay: 0.3s;
}
.card-service:nth-child(4) .service-icon {
    animation-delay: 0.45s;
}
.card-service:nth-child(5) .service-icon {
    animation-delay: 0.6s;
}
.card-service:nth-child(6) .service-icon {
    animation-delay: 0.75s;
}

.service-icon{
    display: flex;
    width: 70px;
    min-height: 70px;
    justify-content: center;
    align-items: center;
    animation: iconFloat 3s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 70%);
    border-radius: var(--global-border-radius);
    box-shadow: var(--box-shadow-top-left);
}

.service-icon:hover{
    box-shadow: 0 15px 40px rgba(186, 73, 255, 0.5);
    transform: translateY(-5px) scale(1.1) rotate(5deg);
    animation: iconPulse 0.6s ease-in-out infinite;
}

.service-icon i,
.service-icon img {
    transition: all 0.4s ease;
}

.service-icon:hover i,
.service-icon:hover img {
    transform: scale(1.15) rotate(-5deg);
    filter: drop-shadow(0 0 15px var(--accent-color));
}

/* Card hover enhances icon animation */
.card-service:hover .service-icon {
    animation: iconPulse 0.8s ease-in-out infinite;
    transform: translateY(-8px) scale(1.08);
}

/* Icon wrapper glow effect on hover */
.service-icon-wrapper:hover {
    background: radial-gradient(circle, var(--accent-color) 0%, var(--secondary) 100%);
    box-shadow: 0 0 30px rgba(186, 73, 255, 0.6), inset 0 0 20px rgba(186, 73, 255, 0.3);
}

.service-icon img{
    width: 60%;
    height: 60%;
    object-fit: cover;
    object-position: center;
}

.service-details{
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 0em 4em 0em 0em;
}

.single-service-img{
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--global-border-radius);
}

.single-service-title-layout{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 65%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    overflow: hidden;
}

.single-service-title-wrapper{
    padding: 20px 20px 0px 0px;
    background-color: var(--secondary);
    border-radius: 0px 25px 0px 0px;
    width: 100%;
    height: auto;
    margin: 0;
    align-items: start;
}

.single-service-title{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    background-color: var(--secondary);
}

.single-service-spacer{
    width: 50px;
    height: 50px;
    border-radius: 0px 0px 0px 25px;
    box-shadow: -10px 10px 0px 0px var(--secondary);
}

.service-included{
    display: flex;
    flex-direction: column;
    border: 1px solid var(--accent-color-3);
    gap: 20px 20px;
    padding: 30px 30px 30px 30px;
    color: var(--primary);
    background-color: transparent;
    background-image: radial-gradient(at bottom right, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
}

.service-recent{
    display: flex;
    flex-direction: column;
    color: var(--primary);
    gap: 20px 20px;
    width: 100%;
    height: auto;
    text-align: center;
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 60%);
    border: 1px solid var(--accent-color-3);
    padding: 30px 30px 30px 30px;
}

/* ================== 29. Case Studies Components ================== */

.case-studies-layout{
    display: flex;
    flex-direction: column;
    padding: 2px 2px 0px 2px;
    border-radius: 25px 25px 0px 0px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.case-studies-layout::before{
    content: '';
    position: absolute;
    background-color: var(--accent-transparent);
    background-image: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-transparent) 65%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
    z-index: -1;
}
.case-studies-layout .spacer{
    align-self: center;
    width: 80%;
    height: 3px;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%);
}

.card-case-studies{
    display: flex;
    flex-direction: column;
    gap: 50px 50px;
    background-color: var(--secondary);
    padding: 50px 50px 50px 50px;
    border-radius: var(--global-border-radius);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.card-case-studies::before{
    content: '';
    position: absolute;
    background-color: var(--accent-transparent);
    background-image: radial-gradient(at bottom center, var(--accent-color) 0%, var(--accent-transparent) 50%);
    width: 100%;
    height: 100%;
    opacity: 0.1;
    top: 0;
    left: 0;
    z-index: -1;
}

.case-studies-title{
    color: var(--primary);
}

.case-studies-content{
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: space-between;
    min-height: 400px;
    padding: 30px 30px 30px 30px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: var(--accent-color-3);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.case-studies-content::before{
    content: '';
    position: absolute;
    background-color: var(--accent-transparent);
    background-image: linear-gradient(180deg, var(--accent-color-5) 0%, var(--secondary) 100%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: -1;
}

/* LIGHT MODE FIX: Make overlay more transparent so images show through */
[data-theme="light"] .case-studies-content::before {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.85) 100%);
    opacity: 0.9;
}

/* Ensure text is readable in light mode */
[data-theme="light"] .case-studies-content {
    color: #1a1a1a;
}

[data-theme="light"] .case-studies-content h4,
[data-theme="light"] .case-studies-title h4 {
    color: #1a1a1a;
}

[data-theme="light"] .case-studies-content p {
    color: #2a2a2a;
}

[data-theme="light"] .cs-component a {
    color: var(--accent-color);
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .case-study-btn {
    background: rgba(255, 255, 255, 0.95);
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}

[data-theme="light"] .case-study-btn:hover {
    background: var(--accent-color);
    color: white;
}

.case-studies-content.local-business{
    background-image: url('../image/Whisk_awzdc2ymvi.jpg');
    width: 56.2%;
}

.case-studies-content.saas-leads{
    background-image: url('../image/Whisk_c3mdg1ntdj.jpg');
    width: 42%;
}

.case-studies-content.ecommerce{
    background-image: url('../image/Whisk_dmzyti0mjk.jpg');
    width: 100%;
}
.case-studies-content.startup-branding{
    background-image: url('../image/Whisk_g0mdhmmme1.jpg');
    width: 56.2%;
}

.case-study-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    color: var(--primary);
    font-size: var(--font-size-base);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    width: fit-content;
}

.case-study-btn:hover{
    background: var(--accent-color);
    color: var(--secondary);
    transform: translateX(5px);
    box-shadow: 0 5px 15px var(--accent-color-5);
}

.case-study-btn i{
    transition: transform 0.3s ease;
}

.case-study-btn:hover i{
    transform: translateX(5px);
}

.clickable-card{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.clickable-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 30px var(--accent-color-5);
}

.case-studies-component{
    display: flex;
    flex-direction: row;
    gap: 10px 10px;
    flex-wrap: wrap;
}

.case-studies-component.large{
    width: 50%;
}
.case-studies-component.small{
    width: 70%;
}

.cs-component{
    padding: 3px 15px 3px 15px;
    border-radius: 100px 100px 100px 100px;
    background-color: var(--accent-transparent);
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: var(--accent-color);
    transform: rotateZ(0deg);
    transition: all 0.3s ease;
}

.cs-component:hover{
    background-color: var(--accent-color);
    transform: rotateZ(5deg);
}

.cs-component a{
    color: var(--primary);
    font-size: var(--font-size-base);
}

/* ================== 30. Team Components ================== */

.team-wrapper{
    display: flex;
    flex-direction: column;
    padding: 2px 2px 0px 2px;
    border-radius: 25px 25px 0px 0px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.team-wrapper::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-transparent) 65%);
    z-index: -1;
}

.team-layout{
    display: flex;
    flex-direction: column;
    gap: 50px 50px;
    background-color: var(--secondary);
    padding: 50px 50px 0px 50px;
    overflow: hidden;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

.team-layout::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.1;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: radial-gradient(at bottom center, var(--accent-color) 0%, var(--accent-transparent) 50%);
    z-index: -1;
}

.team-layout .spacer{
    align-self: center;
    width: 80%;
    height: 3px;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%);
}

.image-team{
    position: relative;
}

.image-team img{
    border-radius: 25px 25px 0px 0px;
}

.team-profile{
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color-3) 0%, var(--accent-color-4) 100%);
    display: flex;
    flex-direction: column;
    border-radius: 0px 0px 25px 25px;
    padding: 30px 30px 30px 30px;
    text-align: center;
    color: var(--primary);
}

.team-profile .title{
    color: var(--accent-color);
}

/* ================== 31. Contact Components ================== */

.contact-title-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2px 2px 2px 2px;
    border-radius: var(--global-border-radius);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.contact-title-wrapper::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: linear-gradient(360deg, var(--accent-color) 0%, var(--accent-transparent) 65%);
    z-index: -1;
}

.contact-title{
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    border: 1px solid var(--accent-color-3);
    color: var(--primary);
    padding: 31px 30px 30px 30px;
}

.icon-wrapper{
    display: flex;
    flex-direction: column;
    background-color: var(--secondary);
    justify-content: center;
    align-items: center;
    border-radius: 32px 32px 32px 32px;
    width: 100px;
    min-height: 100px;
}

.icon-box{
    aspect-ratio: 1/1;
    line-height: 21px;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 70%);
    color: var(--accent-color);
    box-shadow: var(--box-shadow-top-left);
    text-decoration: none;
    width: 80px;
    min-height: 80px;
    border-radius: var(--global-border-radius);
    font-size: var(--font-size-7xl);
}

.icon-box:hover{
    box-shadow: var(--box-shadow-bottom-right);
}

.contact-title span{
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    color: var(--text-color);
}

/* ================== 32. Blog Components ================== */

.card-blog{
    position: relative;
    background-color: var(--accent-color-4);
    overflow: hidden;
    border: 1px solid var(--accent-color-3);
    height: 100%;
    transition: all 0.4s ease;
}

.card-blog .card-body{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 30px 30px 30px 30px;
    text-align: start;
}

.card-blog .card_footer{
    display: flex;
    flex-direction: row;
    border-top: 1px solid var(--accent-border);
    gap: 1em;
    padding: 15px 30px;
    color: var(--text-color);
    font-size: var(--font-size-xs);
}

.card-blog:hover .blog-image{
    -webkit-transform: scale(1.05) rotate(2deg);
    transform: scale(1.05) rotate(2deg);
    opacity: .8;
}

.blog-image {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: 280px;
    transition: all 0.4s ease;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
}

.post-image{
    position: relative;
    width: 100%;
    height: 442px;
    overflow: hidden;
}

.post-image img{
    height: 100%;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    border-radius: var(--global-border-radius);
}

.recent-post{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px 30px;
    border: 1px solid var(--accent-color-3);
    padding: 30px 30px 30px 30px;
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 70%);
    color: var(--primary);
}

.recent-post .image-container{
    max-width: 30%;
    transition: all 0.3s ease;
}

.recent-post .image-container:hover{
    transform: scale(1.05) rotate(2deg);
    opacity: .8;
}

.blog-link{
    font-size: var(--font-size-5xl);
    color: var(--primary);
    font-weight: var(--font-weight-bold);
}


.read-more{
    font-size: var(--font-size-base);
    color: var(--accent-color);
    transition: 0.3s ease;
}

.read-more:hover{
    color: var(--primary);
}

.blog-link-post{
    font-size: var(--font-size-xl);
    color: var(--primary);
    font-weight: var(--font-weight-bold);
}

.meta-data{
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5em;
    color: var(--primary);
    transition: all 0.3s;
    cursor: pointer;
}

.meta-data:hover{
    color: var(--text-color);
}

.meta-data-post{
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5em;
    color: var(--text-color);
    transition: all 0.3s;
    cursor: pointer;
}

.meta-data-post:hover{
    color: var(--primary);
}

/* ================== 33. Pricing Components ================== */

.pricing-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    gap: 20px 20px;
}

.card-pricing-title{
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    gap: 20px 30px;
    padding: 62.5px 30px 62.5px 0px;
    border: 1px solid var(--accent-color-3);
    border-radius: var(--global-border-radius);
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card-pricing-title .content{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.card-pricing-title .spacer{
    display: flex;
    flex-direction: row;
    width: 3px;
    height: 200px;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color) 0%, var(--accent-transparent) 80%);
}

.card-pricing-title::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: radial-gradient(at center left, var(--accent-color) 0%, var(--accent-transparent) 50%);
    opacity: 0.2;
    top: 0;
    left: 0;
    z-index: -1;
}

.pricing-highlight-box{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    gap: 30px 30px;
    padding: 30px 0px 30px 30px;
     border: 1px solid var(--accent-color-3);
    border-radius: var(--global-border-radius);
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    color: var(--primary);
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    z-index: 1;
}

.pricing-highlight-box::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color) 0%, var(--secondary) 100%);
    opacity: 0.2;
    top: 0;
    left: 0;
    z-index: -1;
}

.pricing-highlight-box .spacer{
    display: flex;
    flex-direction: row;
    width: 2px;
    height: 200px;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color) 0%, var(--accent-transparent) 80%);
}

.pricing-highlights{
    display: flex;
    flex-direction: row;
    gap: 10px 10px;
    justify-content: space-between;
    padding: 15px 15px 15px 15px;
    border-radius: 15px 15px 15px 15px;
    border: 1px solid var(--accent-color-3);
    background-color: var(--secondary);
    color: var(--primary);
    align-items: center;
}

.pricing-highlights a,
.pricing-highlights i{
    color: var(--text-color);
    transition: all 0.3s ease;
}

.pricing-highlights:hover a,
.pricing-highlights:hover i{
    color: var(--accent-color);
}

.card-pricing{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 30px 30px;
    flex-grow: 1;
    text-align: start;
    padding: 30px 30px 30px 30px;
    border: 1px solid var(--accent-color-3);
    background-color: transparent;
    background-image: radial-gradient(at bottom right, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    color: var(--primary);
    position: relative;
}

.card-pricing.pricing-highlight{
    width: 100%;
    height: 100%;
    padding-top: 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card-pricing.pricing-highlight::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: radial-gradient(at top center, var(--accent-color) 0%, var(--accent-transparent) 60%);
    opacity: 0.2;
    top: 0;
    left: 0;
    z-index: -1;
}

.card-pricing.pricing-highlight .spacer{
    align-self: center;
    width: 200px;
    height: 3px;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 50%);
}

/* ================== 34. Core Benefits ================== */

.core-benefits{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    padding: 30px 0px 30px 0px;
    border-width: 1px 0px 1px 0px;
    border-style: solid;
    border-color: var(--accent-color-3);
}

.benefit{
    display: flex;
    flex-direction: row;
    gap: 10px 10px;
    color: var(--primary);
}

.benefit a{
    color: var(--text-color);
    transition: all 0.3s ease;
}

.benefit a:hover{
    color: var(--primary);
}

/* ================== 35. Guide Components ================== */

.guide-banner{
    background-image: url('../image/Whisk_gm5zdixnwu.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--global-border-radius);
    padding: 250px 20px 120px 20px;
    border: 1px solid var(--accent-color-3);
    position: relative;
    z-index: 1;
}

.guide-banner::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color-5) 0%, var(--secondary) 100%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

/* LIGHT MODE FIX: Make overlay transparent so background image shows */
[data-theme="light"] .guide-banner::before {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.9) 100%);
    opacity: 0.95;
}

/* Ensure text is readable in light mode */
[data-theme="light"] .guide-content h3,
[data-theme="light"] .guide-content p {
    color: #1a1a1a;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* LIGHT MODE FIX: Hero video banner overlay */
[data-theme="light"] .banner-video-container::before {
    background-image: radial-gradient(at center center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
    opacity: 0.6;
}

/* LIGHT MODE FIX: Digital process banner */
[data-theme="light"] .digital-process-banner {
    background-image: radial-gradient(at top left, rgba(248, 249, 250, 1) 0%, rgba(255, 255, 255, 1) 50%);
}

/* LIGHT MODE FIX: Footer background */
[data-theme="light"] .bg-footer {
    background-image: radial-gradient(at top left, rgba(232, 234, 237, 1), rgba(255, 255, 255, 1) 50%);
}

.guide-content{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    gap: 30px;
    max-width: 65%;
}

.guide-video-container{
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
}

.guide-video-container p{
    font-size: var(--font-size-base);
    max-width: 15%;
    color: var(--primary);
    font-weight: var(--font-weight-semibold);
}

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--accent-color);
}
.avatar:not(:nth-child(1)){
    margin-left: -10px;
}

/* ================== 36. Underline Components ================== */

.underline-vertical{
    border-right: 1px solid var(--accent-color-3) !important;
    width: 3px;
    height: 100px;
}

.underline-accent-short{
    border-bottom: 2px solid var(--accent-color) !important;
    width: 20%;
}

.underline-muted-full{
    border-bottom: 1px solid var(--accent-color-3);
    width: 100%;
}

/* ================== 36. Social Team Components ================== */

.social-team-wrapper{
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-self: flex-end;
}

.social-team-container{
    background-color: var(--secondary);
    display: flex;
    flex-direction: column;
    width: 70px;
    border-radius: 0px 0px 0px 25px;
    padding: 0px 0px 15px 15px;
    gap: 10px;
}

.social-team-spacer{
    width: 50px;
    height: 50px;
    border-radius: 0px 25px 0px 0px;
    box-shadow: 10px -10px 0px 0px var(--secondary);
}

.social-team-container .social-item{
    width: 55px;
    height: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.team-details{
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    border-radius: 25px;
    padding: 1em 1em 1em 1em;
    background: rgba(255, 255, 255, 0.041);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
}

/* ================== 38. Testimonial Components ================== */

.testimonial-header-wrapper{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: 25px 25px 0px 0px;
    padding: 2px 2px 0px 2px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.testimonial-header-wrapper::before{
    content: '';
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-transparent) 65%);
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}
.testimonial-header-wrapper-title{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: 25px 25px 25px 25px;
    padding: 2px 2px 2px 2px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.testimonial-header-wrapper-title::before{
    content: '';
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-transparent) 35%, var(--accent-color) 100%);
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.card-testimonial-reviewer .counter{
    font-size: var(--font-size-11xl);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--primary)
}

.card-testimonial-reviewer .counter-detail{
    font-size: var(--font-size-11xl);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--primary);
}

.testimonial-header-link-wrapper{
    background-color: var(--secondary);
    display: flex;
    border-radius: 15px 15px 15px 15px;
    padding: 15px 15px 15px 15px;
    text-align: center;
    align-items: center;
    gap: 10px;
    justify-content: center;
    width: 100%;
    height: auto;
}

.testimonial-header-link-wrapper a{
    color: var(--text-color);
}

.testimonial-header-link-wrapper:hover a{
    color: var(--primary);
}

.card-testimonial-reviewer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px 30px;
    background-color: var(--accent-transparent);
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%) ;
    border: 1px solid var(--accent-color-3);
    padding: 24px 30px 24px 30px;
    position: relative;
    width: 100%;
    height: 100%;
}

.card-testimonial-header-title{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    background-color: var(--secondary);
    border: 1px solid var(--accent-color-3);
    border-radius: var(--global-border-radius);
    padding: 30px 30px 30px 30px;
    position: relative;
}

.card-testimonial{
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: transparent;
    text-align: left;
    background-image: radial-gradient(at bottom right, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    padding: 30px 30px 30px 30px;
    border: 1px solid var(--accent-color-3);
}

.profile-name{
    color: var(--primary);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: var(--line-height-loose);
}

.testimonial-description{
    font-size: var(--font-size-lg);
    font-weight: 500;
    line-height: var(--line-height-extra-loose);
}

.profile-bio{
    font-size: var(--font-size-base);
}

.testimonial-image{
    position: relative;
    width: 64px;
    height: 64px;
}

.testimonial-image img{
    max-width: 100%;
    border-radius: 50%;
    margin-right: 20px;
    object-fit: cover;
}

/* ================== 39. Newsletter Components ================== */

.newsletter-wrapper{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0px 2px 2px 2px;
    border-radius: var(--global-border-radius);
    position: relative;
    z-index: 1;
}

.newsletter-wrapper::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-transparent) 0%, var(--accent-color) 100%);
    width: 100%;
    height: 100%;
    opacity: 0.5;
    top: 0;
    left: 0;
    z-index: 0;
}

.newsletter-layout{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 50px 50px;
    overflow: hidden;
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    border: 1px solid var(--accent-color-3);
    border-radius: var(--global-border-radius);
    padding: 0px 50px 50px 50px;
    position: relative;
    z-index: 1;
}

.newsletter-layout .spacer{
    height: 3px;
    width: 80%;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%);
}

.newsletter-layout::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: radial-gradient(at top center, var(--accent-color) 0%, var(--accent-transparent) 40%);
    width: 100%;
    height: 100%;
    opacity: 0.2;
    top: 0;
    left: 0;
    z-index: 0;
}

.input-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 51%;
}

/* ================== 40. Breadcrumb Components ================== */

.breadcrumb {
    display: flex;
    flex-direction: row;
    gap: 8px 8px;
    align-items: center;
    font-size: var(--font-size-base);
    justify-content: flex-start;
}

.breadcrumb a {
    font-weight: normal;
    color: var(--accent-color);
    font-size: var(--font-size-lg);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.breadcrumb a:hover {
    color: var(--accent-color-2);
}

.breadcrumb .separator {
    margin: 0 8px;
    color: var(--primary);
}

.breadcrumb .current {
   color: var(--text-color);
   margin-bottom: 0px;
   display: inline;
   flex: 0 0 auto;
}

.breadcrumb p{
    margin-bottom: 0px;
}

/* ================== 41. Icon Components ================== */

/* 41.1 Icon Components */

.icon-container{
    background-color: var(--secondary);
    padding: 12px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: end;
    justify-content: center;
    text-align: center;
    top: 16px;
    right: 16px;
    position: absolute;
}

.icon-circle {
    position: relative;
    background-color: var(--accent-color);
    color: var(--primary);
    font-size: var(--font-size-6xl);
    width: 59px;
    height: 59px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

/* 41.2 Stars */

.stars{
    color: var(--star-color);
}

/* 41.3 Social Icons Components */

.social-item-wrapper{
    display: flex;
    flex-direction: column;
    min-height: 60px;
    width: 60px;
    background-color: var(--secondary);
    justify-content: center;
    align-items: center;
    border-radius: 20px 20px 20px 20px;
}

.social-item {
    aspect-ratio: 1/1;
    width: 45px;
    min-height: 45px;
    line-height: 20px;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px 15px 15px 15px;
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 70%);
    box-shadow: var(--box-shadow-top-left);
    text-decoration: none;
    font-size: var(--font-size-lg);
}

/* 41.4 Social Container */

.social-container{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    gap: 1em;
}

/* 41.5 Social Footer Container */

.social-footer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.footer-content-spacer{
    height: 120px;
}

.social-item:hover{
    box-shadow: var(--box-shadow-bottom-right);
}

/* ================== 42. Counter Text ================== */

.counter-text{
    text-align: center;
    color: var(--primary);
    font-size: var(--font-size-2xl);
    font-weight: 600;
    line-height: var(--line-height-tight);
}

/* ================== 43. Service List ================== */

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

.service-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
}
.service-list a {
    color: var(--secondary);
    font-size: var(--font-size-base);
}

.service-list li::before {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--secondary);
    font-size: var(--font-size-sm);
}

.expertise-link,
.expertise-link a{
    color: var(--accent-color);
}

.expertise-link:hover,
.expertise-link:hover a{
    color: var(--primary);
}

.expertise-list{
    width: 40%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.check-list {
    list-style: none;
    padding: 0;
}

.check-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 8px;
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: var(--line-height-loose);
}

.check-list a {
    color: var(--text-color);
    font-size: var(--font-size-base);
    font-weight: 700;
    transition: all 0.2s;
    line-height: var(--line-height-loose);
}

.check-list a:hover {
    color: var(--primary);
}

.check-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 500;
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-size: var(--font-size-xl);
}

.list-icon{
    list-style: none;
    padding: 0;
    color: var(--text-color);
}

.list-icon li {
    list-style: none;
    position: relative;
    padding-left: 24px;
    margin-bottom: calc(10px / 2);
    padding-bottom: calc(10px / 2);
}

.list-icon li::before {
    content: "\f1ce";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-px-20);
}

/* ================== 44. Link Wrapper ================== */

.link-wrapper{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    color: var(--accent-color);
    transition: all 0.3s;
}

.link-wrapper:hover a,
.link-wrapper:hover i{
    color: var(--primary) !important;
}

/* ================== 45. Choose Us Components ================== */

.card-chooseus{
    background-color: transparent;
    background-image: radial-gradient(at bottom right, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    display: flex;
    flex-direction: row;
    min-height: 150px;
    width: 100%;
}

.chooseus-icon-wrapper{
    width: 100px;
    min-height: 272px;
    align-self: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.chooseus-icon-layout{
    position: relative;
    padding: 10px 10px 10px 10px;
    background-color: var(--secondary);
    border-radius: 0px 30px 30px 0px;
    width: 100px;
    height: 110px;
}

.chooseus-icon{
    width: 100%;
    height: 100%;
    border-radius: var(--global-border-radius);
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 70%);
    box-shadow: var(--box-shadow-top-left);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-chooseus:nth-child(even) .chooseus-icon{
    background-color: transparent;
    background-image: radial-gradient(at bottom right, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
}

.card-chooseus:nth-child(even){
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 70%);
}

.chooseus-icon img{
    width: 60%;
    object-fit: cover;
    object-position: center;
}

.chooseus-icon:hover{
    box-shadow: var(--box-shadow-bottom-right);
}

.chooseus-spacer{
    width: 50px;
    height: 50px;
}

.chooseus-spacer.above{
    border-radius: 0px 0px 0px 25px;
    box-shadow: -10px 10px 0px 0px var(--secondary);
}

.chooseus-spacer.below{
    border-radius: 25px 0px 0px 0px;
    box-shadow: -10px -10px 0px 0px var(--secondary);
}

.chooseus-content{
    padding: 30px 30px 30px 30px;
    display: flex;
    width: 515px;
    flex-direction: column;
    justify-content: space-between;
    gap: 1em;
}

.chooseus-title{
    color: var(--primary);
}

.chooseus-content p{
    margin-bottom: 14.4px;
}

.chooseus-img{
    width: 100%;
    max-width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center;
}

.chooseus-cta-spacer{
    width: 50px;
    height: 50px;
    border-radius: 0px 0px 25px 0px;
    box-shadow: 10px 10px 0px 0px var(--secondary);
}

.card-chooseus-cta-layout{
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: end;
}

.card-chooseus-cta-wrapper
{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 350px;
    padding: 20px 0px 0px 20px;
    background-color: var(--secondary);
    border-radius: 30px 0px 0px 0px;
}

.card-chooseus-cta{
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px 30px 30px 30px;
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%);
    color: var(--primary);
    box-shadow: var(--box-shadow-bottom-right);
    transition: all 0.3s;
}

.card-chooseus-cta:hover{
    box-shadow: var(--box-shadow-top-left);
}

/* ================== 46. Image Container Components ================== */

.image-container{
    display: flex;
    max-width: 100%;
    max-height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 25px;
}

.image-container img,
.image-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
    border-radius: 25px;
}

.image-container video {
    opacity: 0;
}

.image-container:hover video {
    opacity: 1;
}

.image-container:hover img {
    opacity: 0;
}

.video-indicator {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 8px 15px;
    border-radius: 20px;
    color: white;
    font-size: 14px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 3;
}

.image-container:hover .video-indicator {
    opacity: 0;
    transform: translateY(10px);
}

.video-indicator i {
    animation: bounce 1.5s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(-4px);
    }
}

/* ================== 47. Request Loader ================== */

.request-loader {
    position: relative;
    height: 70px;
    border-radius: 50% !important;
    border: none;
    background-color: var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    font-size: var(--font-size-4xl);
    aspect-ratio: 1/1;
    transition: all 0.3s ease-in-out;
}

.request-loader:hover {
    border: none;
    color: var(--primary);
    background-color: var(--accent-color);
}

.request-loader::after,
.request-loader::before {
    opacity: 0.2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    color: var(--accent-color);
    border: 4px solid currentColor;
    border-radius: 50%;
    animation-name: ripple;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.65, 0, .34, 1);
    z-index: 0;
}

.request-loader::after {
    animation-delay: 0.5s;
    animation-duration: 3s;
}

.request-loader::before {
    animation-delay: 0.2s;
    animation-duration: 3s;
}

/* ================== 48. Modal Components ================== */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-transparent-2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1050;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.my-modal {
    background-color: var(--secondary);
    padding: 0;
    border-radius: 12px;
    position: relative;
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.my-modal iframe {
    aspect-ratio: 16/9;
    width: 100%;
    height: 80vh;
}

/* Video element styling for modal */
.my-modal video,
#my-video-player {
    aspect-ratio: 16/9;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 80vh;
    background-color: #000;
    border-radius: 8px;
}

.my-close {
    position: fixed;
    top: 30px;
    right: 30px;
    font-size: var(--font-size-3xl);
    cursor: pointer;
    font-weight: bold;
    color: #FFFFFF;
    z-index: 1060;
    background: rgba(186, 73, 255, 0.9);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.my-close:hover {
    background: var(--accent-color);
    transform: scale(1.1);
}

/* Mobile responsive modal fixes */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 10px;
    }
    
    .my-modal {
        max-width: 95%;
        max-height: 95%;
        margin: auto;
    }
    
    .my-modal video,
    #my-video-player {
        max-height: 60vh;
        width: 100%;
        height: auto;
    }
    
    .my-modal iframe {
        height: 50vh;
    }
    
    .my-close {
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: var(--font-size-2xl);
    }
}

@media (max-width: 480px) {
    .modal-overlay {
        padding: 5px;
    }
    
    .my-modal {
        max-width: 98%;
        max-height: 98%;
    }
    
    .my-modal video,
    #my-video-player {
        max-height: 50vh;
        border-radius: 4px;
    }
    
    .my-modal iframe {
        height: 40vh;
    }
    
    .my-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: var(--font-size-xl);
    }
}

.video-modal {
    background-color: var(--secondary);
    padding: 0;
    border-radius: 16px;
    position: relative;
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
}

.video-modal iframe,
.video-modal video {
    aspect-ratio: 16/9;
    width: 100%;
    height: 80vh;
    max-height: 80vh;
    border: none;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 36px;
    cursor: pointer;
    font-weight: bold;
    color: #ffffff;
    background: rgba(186, 73, 255, 0.8);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1051;
}

.modal-close:hover {
    background: var(--accent-color);
    transform: rotate(90deg);
}

.btn-close {
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: var(--accent-color-2);
    padding: 16px 16px 16px 16px;
    opacity: 1;
    z-index: 2001;
}

/* ================== 49. Detail List ================== */

.detail-list{
    color: var(--secondary);
    transition: all 0.3s ease;
}

.detail-list:hover{
    color: var(--accent-color);
}

/* ================== 50. Accordion Components ================== */

.faq-wrapper{
    display: flex;
    flex-direction: column;
    gap: 1em;
    justify-content: center;
    align-self: center;
    width: 100%;
    max-width: 1024px;
}

.accordion{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.accordion .accordion-item {
    background-color: transparent                                                   ;
    border: none;
    outline: none;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.accordion .accordion-item .accordion-body {
    display: flex;
    flex-direction: row;
    gap: 30px 30px;
    align-items: center;
    background-color: var(--secondary)                                                   ;
    border: 1px solid var(--accent-color-3);
    color: var(--text-color);
    padding: 30px 30px 30px 0px;
    border-radius: 15px 15px 15px 15px;
    position: relative;
    z-index: 1;
}

.accordion .accordion-item .accordion-body::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: radial-gradient(at center left, var(--accent-color) 0%, var(--accent-transparent) 50%);
    opacity: 0.2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.accordion-spacer{
    align-self: center;
    width: 3px;
    height: 80px;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color) 0%, var(--accent-transparent) 80%);
}

.accordion .accordion-item .accordion-body .accordion-content{
    display: flex;
    padding: 30px 0px 30px 30px;
}

.accordion-button:focus {
    box-shadow: none;
    color: var(--primary);
}

.accordion .accordion-button {
    background-color: transparent;
    background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 100%);
    border: 1px solid var(--accent-color-3);
    outline: none;
    border-radius: 15px 15px 15px 15px !important;
    font-size: var(--font-size-3xl);
    font-weight: 700;
    line-height: var(--line-height-snug);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: start;
    padding: 15px 30px;
    color: var(--primary);
    fill: var(--primary);
}

.accordion-button::after {
    width: 48px;
    height: 48px;
    background-size: 48px 48px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23D1D1D1" class="bi bi-plus" viewBox="0 0 16 16"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg>');
}

.accordion-button:not(.collapsed)::after {
    width: 48px;
    height: 48px;
    background-size: 48px 48px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23D1D1D1" class="bi bi-dash" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"/></svg>');
}

.accordion .accordion-button:not(.collapsed) {
    font-weight: 700;
    color: var(--primary);
    outline: none;
    box-shadow: none;
    line-height: var(--line-height-snug);
}

.faq-title-container {
    position: sticky;
    top: 6em;
    z-index: 1;
}

/* ================== 51. Maps Components ================== */

.maps{
    max-width: 100%;
    width: 100%;
    line-height: 1;
    height: 400px;
    filter: brightness(69%) contrast(200%) saturate(0%) blur(0px) hue-rotate(0deg);
    border-radius: var(--global-border-radius);
    overflow: hidden;
}

/* ================== 52. Single Service Components ================== */

.single-service-list {
    list-style: none;
    padding: 0;
    text-align: start;
}

.single-service-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
}

.single-service-list a {
    color: var(--primary);
    font-size: var(--font-size-lg);
    font-weight: 700;
    transition: all 0.2s;
}

.single-service-list a:hover {
    color: var(--text-color);
}

.single-service-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 500;
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-size: var(--font-size-lg);
}

/* ================== 53. CTA Service Banner Components ================== */

.cta-service-banner{
    background-image: url('../image/Whisk_i3mgzkmdyx.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: column;
    gap: 30px 30px;
    width: 100%;
    height: 100%;
    border: 1px solid var(--accent-color-3);
    border-radius: 25px 25px 25px 25px;
    padding: 30px 30px 30px 30px;
    position: relative;
    z-index: 1;
}

.cta-service-banner::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-transparent) 0%, var(--secondary) 100%);
    opacity: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

/* LIGHT MODE FIX: Make overlay transparent so background image shows */
[data-theme="light"] .cta-service-banner::before {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
    opacity: 0.95;
}

.cta-service-banner .spacer{
    height: 100px;
}

/* ================== 54. Animate Components ================== */

.animate-box {
    opacity: 0;
}

.animated{
    animation-duration: var(--animation-normal);
}

.animated.fast{
    animation-duration: var(--animation-fast);
}

.animated.slow{
    animation-duration: var(--animation-slow);
}

/* ================== 55. CustomText Container Components ================== */


.heading-container-short{
    max-width: 70%;
}

.heading-container{
    align-self: center;
    text-align: center;
}

.heading-container-medium{
    max-width: 75%;
}

.heading-container-wide{
    max-width: 85%;
    text-align: center;
}

/* ================== 56. Footer Components ================== */

/* 56.1 Footer Layout */

.footer{
    border-radius: 10px;
}

/* 56.2 Footer List */

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

.footer-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1em;
    margin-bottom: 15px;
    color: var(--text-color);
}

.footer-list li:last-child{
    margin-bottom: 0px;
}

.footer-list a{
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-color);
    transition: all 0.2s;
}

.footer-list a:hover{
    color: var(--primary);
}

/* 56.3 Contact List */

.contact-list{
    list-style: none;
    padding-left: 0;
    margin-bottom: 0px;
}

.contact-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    font-size: var(--font-size-base);
    font-weight: 500;
    margin-bottom: 15px;
    color: var(--primary);
}

.contact-list li:last-child{
    margin-bottom: 0px;
}

/* 56.4 Footer Logo Container */

.footer-logo-container{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 30px 30px;
}

/* 56.5 Footer Quick Links */

.footer-quick-links{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 30px 30px;
}

/* 56.6 Footer Services Container */

.footer-services-container{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 30px 30px;
}

/* 56.7 Footer Contact Container */

.footer-contact-container{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 30px 30px;
}

/* 56.8 Copyright Container */

.copyright-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 50px 50px;
    border-top: 1px solid var(--accent-color-3);
    padding: 20px 0px 20px 0px;
}

.copyright{
    font-size: var(--font-size-base);
    color: var(--text-color);
    font-weight: 500;   
    line-height: var(--line-height-loose);
}

/* 56.9 Legal Link */

.legal-link{
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-color);
    transition: all 0.2s;
    line-height: var(--line-height-loose);
}

.legal-link:hover{
    color: var(--primary);
}

/* 56.10 Footer Spacer */

.footer-spacer{
    width: initial;
    height: 3px;
    align-self: center;
    background-color: transparent;
    background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%);
}

/* ================== 57. Media Queries ================== */

/* 57.1 Tablet Responsive */

@media screen and (min-width: 1024px){
    /* Flex spacing (gap) */
    .gspace-md-0 { 
        gap: 0px 0px; 
    }
    .gspace-md-1 { 
        gap: 10px 10px; 
    }
    .gspace-md-2 { 
        gap: 20px 20px; 
    }
    .gspace-md-3 { 
        gap: 30px 30px; 
    }
    .gspace-md-4 { 
        gap: 40px 40px; 
    }
    .gspace-md-5 { 
        gap: 50px 50px; 
    }

    /* Grid spacing (column-gap) */

    .gspace-x-md-0 { 
        column-gap: 0px;
    }
    .gspace-x-md-1 { 
        column-gap: 10px; 
    }
    .gspace-x-md-2 {
         column-gap: 20px; 
    }
    .gspace-x-md-3 { 
        column-gap: 30px; 
    }
    .gspace-x-md-4 { 
        column-gap: 40px; 
    }
    .gspace-x-md-5 { 
        column-gap: 50px; 
    }

    /* Grid spacing (row-gap) */

    .gspace-y-md-0 { 
        row-gap: 0px; 
    }
    .gspace-y-md-1 { 
        row-gap: 10px; 
    }
    .gspace-y-md-2 { 
        row-gap: 20px; 
    }
    .gspace-y-md-3 { 
        row-gap: 30px; 
    }
    .gspace-y-md-4 { 
        row-gap: 40px; 
    }
    .gspace-y-md-5 { 
        row-gap: 50px; 
    }

    /* Grid spacing (row-gap & column-gap) */

    .grid-spacer-md-0 { 
        --bs-gutter-x: 0px; 
        --bs-gutter-y: 0px; 
    }
    .grid-spacer-md-1 { 
        --bs-gutter-x: 10px; 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-md-2 { 
        --bs-gutter-x: 20px; 
        --bs-gutter-y: 20px; 
    }
    .grid-spacer-md-3 { 
        --bs-gutter-x: 30px; 
        --bs-gutter-y: 30px; 
    }
    .grid-spacer-md-4 { 
        --bs-gutter-x: 40px; 
        --bs-gutter-y: 40px; 
    }
    .grid-spacer-md-5 { 
        --bs-gutter-x: 50px; 
        --bs-gutter-y: 50px; 
    }

    /* Grid spacing (column-gap) */

    .grid-spacer-x-md-0 { 
        --bs-gutter-x: 0px; 
    }
    .grid-spacer-x-md-1 { 
        --bs-gutter-x: 10px; 
    }
    .grid-spacer-x-md-1 { 
        --bs-gutter-x: 10px; 
    }
    .grid-spacer-x-md-2 { 
        --bs-gutter-x: 20px;
    }
    .grid-spacer-x-md-3 { 
        --bs-gutter-x: 30px; 
    }
    .grid-spacer-x-md-4 { 
        --bs-gutter-x: 40px; 
    }
    .grid-spacer-x-md-5 { 
        --bs-gutter-x: 50px; 
    }

    /* Grid spacing (row-gap) */

    .grid-spacer-y-md-0 { 
        --bs-gutter-y: 0px; 
    }
    .grid-spacer-y-md-1 { 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-y-md-1 { 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-y-md-2 { 
        --bs-gutter-y: 20px; 
    }
    .grid-spacer-y-md-3 { 
        --bs-gutter-y: 30px; 
    }
    .grid-spacer-y-md-4 { 
        --bs-gutter-y: 40px; 
    }
    .grid-spacer-y-md-5 { 
        --bs-gutter-y: 50px; 
    }
}

@media screen and (max-width: 1024px){
    h1{
        font-size: var(--font-size-14xl);
    }
    h2{
        font-size: var(--font-size-13xl);
    }
    h3 {
        font-size: var(--font-size-8xl);
    }
    h4 {
        font-size: var(--font-size-3xl);
    }
    h5{
        font-size: var(--font-size-2xl);
    }
    h6 {
        font-size: var(--font-size-lg);
    }
    button, a{
        font-size: var(--font-size-sm);
    }
    .navbar{
        position: relative;
    }
    .navbar-collapse{
        display: none;
    }
    .navbar-collapse.show{
        display: block;
        width: 100%;
    }
    .nav-btn{
        display: block;
    }
    .navbar-container{
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }
    #navbarNav{
        width: 100%;
    }
    #navbarNav .navbar-nav{
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 0;
    }
    .about-img-layout{
        width: 100%;
    }
    .about-img{
        height: 100%;
    }
    .card-about{
        width: 400px;
    }
    .card-about .counter{
        font-size: var(--font-size-14xl);
    }
    .card-about .counter-detail{
        font-size: var(--font-size-8xl);
    }
    .about-title{
        width: 100%;
    }
    .navbar-action-container{
        order: 3;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        gap: 8px;
    }
    .banner-video-content{
        width: 100%;
    }
    .banner-video-content p{
        max-width: 48%;
        font-size: var(--font-size-sm);
    }
    .banner-content{
        justify-content: center;
        text-align: center;
        width: 100%;
    }
    .btn-title{
        padding: 17px 27px 17px 27px;
    }
    .icon-circle{
        width: 53px;
        height: 53px;
    }
    .logo-container{
        min-width: 150px;
        max-width: 200px;
    }
    .service-recent{
        width: 50%;
    }
    .cta-service-banner{
        width: 50%;
    }
    .social-team-spacer{
        width: 40px;
        height: 40px;
    }
    .sub-heading span{
        font-size: var(--font-size-sm);
    }
    .pricing-container{
        flex-direction: row;
        width: 100%;
    }
    .expertise-title,
    .expertise-img-layout{
        width: 100%;
    }
    .card-expertise{
        width: 320px;
    }
    .card-expertise.card-expertise-counter{
        width: 100%;
        max-width: 100%;
    }
    .card-expertise .counter{
        font-size: var(--font-size-14xl);
    }
    .card-expertise .counter-detail{
        font-size: var(--font-size-7xl);
    }
    .card-chooseus{
        width: 85%;
    }
    .card-chooseus:nth-child(2){
        align-self: end;
    }
    .card-chooseus-cta-wrapper{
        width: 320px;
    }
    .card-pricing-title{
        width: 50%;
    }
    .card-pricing{
        width: 50%;
    }
    .card-pricing.pricing-highlight{
        width: 100%;
    }
    .pricing-highlight-box{
        width: 50%;
    }
    .team-layout{
        padding: 30px 30px 0px 30px;
    }
    .banner-heading{
        flex-direction: column;
        gap: 100px;
    }
    .single-service-title-layout{
        width: 85%;
    }
    .guide-banner{
        padding: 250px 30px 30px 30px;
    }
    .guide-content{
        max-width: 100%;
    }
    .guide-video-container p{
        margin-bottom: 0;
        font-size: var(--font-size-sm);
    }
    .dropdown-item {
        padding: 15px 30px;
        font-weight: 500;
    }
    .logo{
        max-width: 125px;
    }
    .text-404{
        font-size: var(--font-size-16xl);
    }
    .layout-404 p{
        max-width: 60%;
    }
    .price-card-wrapper .price{
        font-size: var(--font-size-7xl);
    }
    .logo-footer{
        max-width: 20%;
    }
    .card-expertise .counter-detail{
        font-size: var(--font-size-12xl);
    }
    .contactus-content{
        width: 80%;
    }
    .card-case-studies{
        padding: 30px 30px 30px 30px;
    }
    .case-studies-content.local-business,
    .case-studies-content.saas-leads,
    .case-studies-content.ecommerce,
    .case-studies-content.startup-branding{
        width: 100%;
    }
    .cs-component a{
        font-size: var(--font-size-sm);
    }
    .service-details{
        padding: 0em 2em 0em 0em;
    }
    .number-box{
        margin: 0;
        width: 100%;
        text-align: center;
    }
    .heading-container{
        max-width: 70%;
    }
    .testimonial-reviewer{
        flex-direction: column;
    }
    .testimonial-rating-container{
        width: 50%;
    }
    .card-testimonial-reviewer .counter{
        font-size: var(--font-size-8xl);
    }
    .card-testimonial-reviewer p{
        font-size: var(--font-size-sm);
    }
    .price-card-wrapper .price{
        font-size: var(--font-size-9xl);
    }
    .tab-content{
        padding: 0.5em;
    }
    .input-container{
        width: 100%;
    }
    .sidebar-header .logo{
        width: 100%;
    }
    /* Mobile sidebar positioning fix */
    .sidebar {
        left: -85vw;
        width: 85vw;
        max-width: 320px;
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform: none;
    }
    .sidebar.active {
        left: 0;
        transform: none;
    }
    body.sidebar-open {
        overflow: hidden;
    }
    .social-team-container{
        width: 60px;
    }
    .social-team-container .social-item{
        width: 40px;
        height: 40px;
        font-size: var(--font-size-base);
    }
    .accordion .accordion-button{
        font-size: var(--font-size-2xl);
    }
    #newsletterForm{
        flex-direction: column;
        border-radius: 35px 35px 35px 35px;
        width: 100%;
    }
    .newsletter-layout{
        padding: 0px 30px 30px 30px;
        gap: 30px 30px;
    }
    .blog-link{
        font-size: var(--font-size-base);
    }
    .blog-link-post{
        font-size: var(--font-size-lg);
    }
    .footer-list a{
        font-size: var(--font-size-sm);
    }
    .contact-list li{
        font-size: var(--font-size-sm);
    }
}

/* 57.2 Mobile Responsive */

@media screen and (min-width: 767px){

    /* Flex spacing (gap) */

    .gspace-sm-0 { 
        gap: 0px 0px; 
    }
    .gspace-sm-1 { 
        gap: 10px 10px; 
    }
    .gspace-sm-2 { 
        gap: 20px 20px; 
    }
    .gspace-sm-3 { 
        gap: 30px 30px; 
    }
    .gspace-sm-4 { 
        gap: 40px 40px; 
    }
    .gspace-sm-5 { 
        gap: 50px 50px; 
    }

    /* Grid spacing (column-gap) */

    .gspace-x-sm-0 { 
        column-gap: 0px; 
    }
    .gspace-x-sm-0 { 
        column-gap: 0px; 
    }
    .gspace-x-sm-1 { 
        column-gap: 10px; 
    }
    .gspace-x-sm-2 { 
        column-gap: 20px; 
    }
    .gspace-x-sm-3 { 
        column-gap: 30px; 
    }
    .gspace-x-sm-4 { 
        column-gap: 40px; 
    }
    .gspace-x-sm-5 { 
        column-gap: 50px; 
    }

    /* Grid spacing (row-gap) */

    .gspace-y-sm-0 { 
        row-gap: 0px; 
    }
    .gspace-y-sm-1 { 
        row-gap: 10px; 
    }
    .gspace-y-sm-2 { 
        row-gap: 20px; 
    }
    .gspace-y-sm-3 { 
        row-gap: 30px; 
    }
    .gspace-y-sm-4 { 
        row-gap: 40px; 
    }
    .gspace-y-sm-5 { 
        row-gap: 50px; 
    }

    /* Grid spacing (row-gap & column-gap) */

    .grid-spacer-sm-1 { 
        --bs-gutter-x: 10px; 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-sm-2 { 
        --bs-gutter-x: 20px; 
        --bs-gutter-y: 20px; 
    }
    .grid-spacer-sm-3 { 
        --bs-gutter-x: 30px; 
        --bs-gutter-y: 30px; 
    }
    .grid-spacer-sm-4 { 
        --bs-gutter-x: 40px; 
        --bs-gutter-y: 40px; 
    }
    .grid-spacer-sm-5 { 
        --bs-gutter-x: 50px; 
        --bs-gutter-y: 50px; 
    }

    /* Grid spacing (column-gap) */

    .grid-spacer-x-sm-0 { 
        --bs-gutter-x: 0px; 
    }
    .grid-spacer-x-sm-1 { 
        --bs-gutter-x: 10px; 
    }
    .grid-spacer-x-sm-2 { 
        --bs-gutter-x: 20px; 
    }
    .grid-spacer-x-sm-3 { 
        --bs-gutter-x: 30px; 
    }
    .grid-spacer-x-sm-4 { 
        --bs-gutter-x: 40px; 
    }

    /* Grid spacing (row-gap) */

    .grid-spacer-y-sm-0 { 
        --bs-gutter-y: 0px; 
    }
    .grid-spacer-y-sm-1 { 
        --bs-gutter-y: 10px; 
    }
    .grid-spacer-y-sm-2 { 
        --bs-gutter-y: 20px; 
    }
    .grid-spacer-y-sm-3 { 
        --bs-gutter-y: 30px; 
    }
    .grid-spacer-y-sm-4 { 
        --bs-gutter-y: 40px; 
    }
    .grid-spacer-y-sm-5 { 
        --bs-gutter-y: 50px; 
    }
}

@media screen and (max-width: 767px){
    h1{
        font-size: var(--font-size-10xl);
    }
    h2{
        font-size: var(--font-size-9xl);
    }
    h3{
        font-size: var(--font-size-6xl);
    }
    h4{
        font-size: var(--font-size-2xl);
    }
    h5 {
        font-size: var(--font-size-xl);
    }
    h6{
        font-size: var(--font-size-base);
    }
    button, a{
        font-size: var(--font-size-xs);
    }
    p{
        font-size: var(--font-size-sm);
    }
    header{
        padding: 0;
    }
    .logo-footer{
        max-width: 50%;
    }
    .navbar-wrapper{
        padding: 4px 8px;
    }
    .banner-video-content {
        width: 100%;
        max-width: 100%;
    }
    .banner-video-content p{
        font-size: var(--font-size-xs);
        max-width: 100%;
    }
    .banner-content {
        width: 100%;
        max-width: 100%;
    }
    .banner-heading {
        flex-direction: column;
        gap: 40px;
    }
    .section-banner{
        padding: 0px;
        overflow-x: hidden;
        max-width: 100%;
    }
    .section {
        padding: 40px 20px;
        overflow-x: hidden;
        max-width: 100%;
    }
    .section-guide{
        padding: 0px 20px 0px 20px;
    }
    .section-wrapper-digital-process{
        padding: 0px 20px 0px 20px;
    }
    .section-footer{
        padding: 0px 20px 20px 20px;
    }
    .card-pricing-title{
        width: 100%;
    }
    .card-pricing{
        width: 100%;
    }
    .sub-heading span{
        font-size: var(--font-size-xs);
    }
    .card-case-studies{
        padding: 30px 20px 30px 20px;
    }
    .chooseus-icon-layout{
        border-radius: 0px 0px 35px 35px;
    }
    .cs-component a{
        font-size: var(--font-size-xs);
    }
    .accordion .accordion-button{
        font-size: var(--font-size-xl);
    }
    .event-image{
        width: 100%;
    }
    .sidebar-overlay-avatar{
        width: 85%
    }
    /* Mobile sidebar positioning fix for 767px and below */
    .sidebar {
        left: -85vw !important;
        width: 85vw !important;
        max-width: 320px;
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transform: none !important;
    }
    .sidebar.active {
        left: 0 !important;
        transform: none !important;
    }
    body.sidebar-open {
        overflow: hidden;
    }
    .team-layout{
        padding: 30px 20px 0px 20px;
    }
    .pricing-container{
        flex-direction: column;
    }
    .social-team-container{
        width: 55px;
    }
    .text-404{
        font-size: var(--font-size-15xl);
    }
    .layout-404 p{
        max-width: 100%
    }
    .testimonial-reviewer{
        flex-direction: row;
        gap: 10px;
    }
    .testimonial-reviewer .avatar{
        width: 45px;
    }
    .card-testimonial-reviewer .counter{
        font-size: var(--font-size-6xl);
    }
    .card-testimonial-reviewer .counter-detail{
        font-size: var(--font-size-6xl);
    }
    .testimonial-rating-container{
        width: 100%;
    }
    .pricing-highlight-box{
        width: 100%;
        justify-content: space-between;
    }
    .about-img{
        height: 550px;
    }
    .card-about{
        width: 250px;
    }
    .card-about .counter{
        font-size: var(--font-size-10xl);
    }
    .card-about .counter-detail{
        font-size: var(--font-size-6xl);
    }
    .section404{
        width: 100%;
    }
    .card-expertise .counter{
        font-size: var(--font-size-10xl);
    }
    .card-expertise .counter-detail{
        font-size: var(--font-size-6xl);
    }
    .expertise-list{
        width: 100%;
    }
    .expertise-title{
        width: 100%;
    }
    .expertise-title .title-heading{
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .card-expertise{
        width: 100%;
        max-width: 100%;
    }
    .card-expertise.card-expertise-counter{
        width: 100%;
        max-width: 100%;
        padding: 20px;
    }
    .check-list li{
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .card-chooseus{
        flex-direction: column;
        width: 100%;
    }
    .card-chooseus-cta-wrapper{
        width: 250px;
    }
    .chooseus-icon-wrapper{
        flex-direction: row;
        min-height: 0;
        width: 100%;
    }
    .chooseus-spacer.above {
        border-radius: 0px 25px 0px 0px;
        box-shadow: 10px -10px 0px 0px var(--secondary);
    }
    .about-wrapper{
        padding: 20px 0px 0px 0px;
    }
    .banner-icon-container{
        width: 100%;
    }
    .step-spacer{
        width: 200px;
        height: 3px;
    }
    .form-card{
        padding: 1em 1em 1em 1em;
    }
    .form-button-container{
        width: 100%;
        justify-content: stretch;
    }
    .form-button-container .btn{
        width: 100%;
    }
    .logo-container{
        min-width: 120px;
        max-width: 180px;
    }
    .heading-container{
        max-width: 100%;
    }
    .heading-container-wide{
        max-width: 100%;
    }
    .blog-link{
        font-size: var(--font-size-sm);
    }
    .blog-link-post{
        font-size: var(--font-size-base);
    }
    .blog-image{
        height: 180px;
    }
    .service-recent,
    .cta-service-banner{
        width: 100%;
    }
    .single-service-title-layout{
        width: 74%;
    }
    .case-studies-component.large,
    .case-studies-component.small{
        width: 100%;
    }
    .btn-title{
        padding: 15px 25px 15px 25px;
    }
    .icon-circle{
        width: 46px;
        height: 46px;
    }
    .service-details{
        padding: 0em 0em 2em 0em;
    }
    .footer-logo-container{
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .footer-quick-links{
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .footer-services-container{
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .footer-contact-container{
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .footer-list li{
        justify-content: center;
        text-align: center;
    }
    .footer-list a{
        font-size: var(--font-size-xs);
    }
    .contact-list li{
        justify-content: center;
        font-size: var(--font-size-xs);
    }
    .copyright-container{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .copyright,
    .legal-link{
        font-size: var(--font-size-xs);
    }
}

/*--------------------------------------------------------------
# New Offers Page
--------------------------------------------------------------*/
body.offer-page {
    background-color: #0d0d0d;
    background-image: radial-gradient(circle at 10% 20%, rgba(128, 0, 128, 0.25) 0%, transparent 30%),
                      radial-gradient(circle at 90% 80%, rgba(128, 0, 128, 0.25) 0%, transparent 40%);
}

.offer-page-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 60px 0;
}

.offer-form-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background: rgba(15, 15, 15, 0.7);
    padding: 60px 80px;
    border-radius: 25px;
    border: 1px solid rgba(128, 0, 128, 0.5);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    color: #fff;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    background-image: radial-gradient(circle at 10% 20%, rgba(128, 0, 128, 0.25) 0%, transparent 30%),
                      radial-gradient(circle at 90% 80%, rgba(128, 0, 128, 0.25) 0%, transparent 40%);
}

.form-step {
    display: none;
    animation: fadeIn 0.6s ease-in-out;
}

.form-step.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.offer-form-container h3 {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 2.8rem;
    margin-bottom: 60px;
    text-align: center;
    line-height: 1.4;
}

/* Step header styles */
.step-header {
    text-align: center;
    margin-bottom: 40px;
}

.step-header .form-title {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.95);
}

.step-header .step-subtitle {
    color: var(--text-color);
    opacity: 0.8;
    font-size: 15px;
}

/* User type card selection */
.user-type-selection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 700px;
    margin: 0 auto;
}

.user-type-card {
    cursor: pointer;
    display: block;
    position: relative;
}

.user-type-card .form-check-input {
    display: none;
}

.user-type-card .card-wrapper {
    padding: 40px 30px;
    background: rgba(168, 85, 247, 0.05);
    border: 2px solid var(--accent-color-6);
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.user-type-card .card-icon-container {
    margin-bottom: 20px;
}

.user-type-card .card-icon-container i {
    font-size: 48px;
    color: var(--accent-color);
    transition: all 0.3s ease;
}

.user-type-card .card-content {
    width: 100%;
}

.user-type-card .card-title {
    margin-bottom: 12px;
    font-size: 22px;
    color: var(--primary);
    font-weight: 600;
    transition: all 0.3s ease;
}

.user-type-card .card-subtitle {
    color: var(--text-color);
    opacity: 0.8;
    line-height: 1.6;
    font-size: 15px;
    transition: all 0.3s ease;
}

/* Hover state */
.user-type-card:hover .card-wrapper {
    transform: translateY(-5px);
    border-color: var(--accent-color);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.2);
}

.user-type-card:hover .card-icon-container i {
    transform: scale(1.1);
}

/* Selected state */
.user-type-card .form-check-input:checked ~ .card-wrapper {
    border-color: var(--accent-color);
    background: rgba(168, 85, 247, 0.15);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
    transform: scale(1.02);
}

.user-type-card .form-check-input:checked ~ .card-wrapper .card-icon-container i {
    color: #fff;
    transform: scale(1.15);
}

.user-type-card .form-check-input:checked ~ .card-wrapper .card-title {
    color: #fff;
}

.user-type-card .form-check-input:checked ~ .card-wrapper .card-subtitle {
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
}


/* Step 3: Personal Information Form Styles */
.step-header-info {
    text-align: center;
    margin-bottom: 40px;
}

.secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.05));
    border: 1px solid var(--accent-color-6);
    border-radius: 50px;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.secure-badge:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.08));
    border-color: rgba(168, 85, 247, 0.4);
}

.secure-badge i {
    color: var(--accent-color);
    font-size: 16px;
    transition: all 0.4s ease;
}

.secure-badge span {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
}

.info-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-group.full-width {
    grid-column: 1 / -1;
}

.input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-color);
    font-size: 16px;
    z-index: 1;
    pointer-events: none;
}

.input-group input {
    width: 100%;
    padding: 16px 16px 16px 50px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    transition: all 0.4s ease;
}

.input-group input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.input-group input:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(168, 85, 247, 0.3);
}

.input-group input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.15);
}

.input-group input:focus ~ .input-icon,
.input-group input:not(:placeholder-shown) ~ .input-icon {
    color: var(--accent-color);
}

.input-icon {
    transition: all 0.4s ease;
}

/* GDPR Consent Styling */
.gdpr-consent {
    margin: 30px 0;
}

.gdpr-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: rgba(168, 85, 247, 0.05);
    border: 1px solid var(--accent-color-6);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
}

.gdpr-label:hover {
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.4);
}

.gdpr-label input[type="checkbox"] {
    display: none;
}

.checkmark {
    position: relative;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.gdpr-label input[type="checkbox"]:checked ~ .checkmark {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.gdpr-label input[type="checkbox"]:checked ~ .checkmark::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
}

.gdpr-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.6;
}

.gdpr-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.gdpr-link:hover {
    text-decoration: underline;
}

.required-asterisk {
    color: #ff4d4d;
    font-weight: 700;
    margin-left: 2px;
}

.gdpr-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 16px;
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid rgba(255, 77, 77, 0.3);
    border-radius: 8px;
    color: #ff6b6b;
    font-size: 13px;
    animation: shake 0.5s ease-in-out;
}

.gdpr-error i {
    color: #ff4d4d;
    font-size: 14px;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.gdpr-label.error {
    border-color: rgba(255, 77, 77, 0.5);
    background: rgba(255, 77, 77, 0.08);
}

/* Invalid input styling */
.input-group input:invalid:not(:placeholder-shown) {
    border-color: rgba(255, 77, 77, 0.5);
}

.input-group input:valid:not(:placeholder-shown) {
    border-color: rgba(76, 175, 80, 0.5);
}

/* Trust Indicators */
.trust-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    transition: all 0.4s ease;
    padding: 8px 12px;
    border-radius: 8px;
}

.trust-item:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(168, 85, 247, 0.05);
}

.trust-item i {
    color: var(--accent-color);
    font-size: 16px;
    transition: all 0.4s ease;
}

.trust-item:hover i {
    color: rgba(168, 85, 247, 1);
}

/* Mobile responsive for Step 3 */
@media (max-width: 768px) {
    .info-form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .input-group.full-width {
        grid-column: 1;
    }
    
    .trust-indicators {
        flex-direction: column;
        gap: 15px;
    }
    
    .secure-badge {
        padding: 8px 16px;
    }
    
    .secure-badge span {
        font-size: 11px;
    }
}

/* Custom Checkbox styles for services */
.service-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.service-selection .form-check {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 15px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.service-selection .form-check:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.service-selection .form-check-input {
    display: none;
}

.service-selection .form-check-label {
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.service-selection .form-check-label::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    margin-right: 15px;
    transition: all 0.3s ease;
}

.service-selection .form-check-input:checked + .form-check-label::before {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.service-selection .form-check-input:checked + .form-check-label {
    color: #fff;
}


/* Progress Bar */
.progress-bar-container {
    margin-bottom: 40px;
}

.progress-bar {
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
}

.progress-bar-inner {
    width: 33.33%;
    height: 100%;
    background-color: var(--accent-color);
    transition: width 0.5s ease-in-out;
    box-shadow: 0 0 10px var(--accent-color);
}

/* Navigation buttons */
.form-navigation {
    position: absolute;
    bottom: 50px;
    left: 80px;
}

.form-button-container {
    position: absolute;
    bottom: 50px;
    right: 80px;
}

#offerForm textarea.form-control, #offerForm input.form-control {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 10px;
    padding: 15px;
}
#offerForm textarea.form-control:focus, #offerForm input.form-control:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(var(--accent-color-rgb), 0.5);
}

#offerForm .form-label {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
}

#shader-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* --------------------------------------------------------------
   # Enhanced User Type Selection (with icons)
   --------------------------------------------------------------*/
.user-type-selection .form-check-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

/* Hide the small selection dot that was positioned inside the ellipse */
.user-type-selection .ellipse::before {
    display: none;
}

/* Icon styling inside the ellipse */
.user-type-selection .ellipse i {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Accent colour and subtle scale on selection */
.user-type-selection .form-check-input:checked + .form-check-label .ellipse i {
    color: #fff;
    transform: scale(1.15);
}

/*==============================================================
  Quiz Form – Modern Card Styles
==============================================================*/
/* General cards setup */
.user-type-selection,
.service-selection {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

/* Desktop: user-type options side-by-side */
@media (min-width: 768px) {
    .user-type-selection {
        flex-direction: row;
    }
}

/* Radio card base */
.user-type-selection .form-check-label,
.service-selection .form-check {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 50px 30px 35px;
    width: 260px;
    text-align: center;
    cursor: pointer;
    transition: all 0.35s ease;
    overflow: hidden;
}

/* Subtle accent border animation */
.user-type-selection .form-check-label::after,
.service-selection .form-check::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 2px solid transparent;
    transition: border-color 0.35s ease;
}

/* Hover state */
.user-type-selection .form-check-label:hover,
.service-selection .form-check:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.user-type-selection .form-check-label:hover::after,
.service-selection .form-check:hover::after {
    border-color: rgba(var(--accent-color-rgb), 0.5);
}

/* Selected / checked styles */
.user-type-selection .form-check-input:checked + .form-check-label,
.service-selection .form-check-input:checked ~ .form-check {
    background: linear-gradient(145deg, rgba(var(--accent-color-rgb),0.2) 0%, rgba(var(--accent-color-rgb),0.05) 100%);
    box-shadow: 0 0 25px rgba(var(--accent-color-rgb), 0.55);
}

.user-type-selection .form-check-input:checked + .form-check-label::after,
.service-selection .form-check-input:checked ~ .form-check::after {
    border-color: var(--accent-color);
}

/* Icon container (ellipse) tweaks */
.user-type-selection .ellipse {
    width: 90px;
    height: 90px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.3s ease;
}

.user-type-selection .form-check-input:checked + .form-check-label .ellipse {
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(var(--accent-color-rgb), 0.6);
}

.user-type-selection .ellipse i {
    font-size: 1.8rem;
    color: #fff;
    transition: transform 0.3s ease;
}

.user-type-selection .form-check-input:checked + .form-check-label .ellipse i {
    transform: scale(1.15);
}

/* Service checkbox cards (reuse card style) */
.service-selection .form-check-input {
    display: none;
}

.service-selection .form-check-label {
    display: block;
    color: rgba(255,255,255,0.85);
}

.service-selection .form-check-input:checked + .form-check-label {
    color: #fff;
    font-weight: 500;
}

/* === Service card content centering & cleanup === */
.service-selection .form-check-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    height: 100%;
    text-align: center;
    line-height: 1.4;
}
/* remove previous vertical bar */
.service-selection .form-check-label::before {
    display: none !important;
}

/* === Quiz navigation buttons === */
.form-navigation .btn,
.form-button-container .btn {
    background: var(--accent-color);
    border: none;
    color: #fff !important;
    font-weight: 600;
    padding: 14px 38px;
    border-radius: 60px;
    font-size: 1rem;
    box-shadow: 0 0 15px rgba(var(--accent-color-rgb),0.5);
    transition: background 0.3s ease, transform 0.3s ease;
}

.form-navigation .btn:hover,
.form-button-container .btn:hover {
    transform: translateY(-2px);
    background: rgba(var(--accent-color-rgb), 0.9);
}

/* ------------------------------
   Service grid layout overhaul
------------------------------*/
.service-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 32px;
    margin-top: 40px;
}

/* Card base tweaks specifically for services */
.service-selection .form-check {
    width: 100%;
    height: 160px;
    padding: 0;
}

/* Service card label = full-size clickable area */
.service-selection .form-check-label {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
}

/* Typography colour consistency */
.service-selection .form-check-input:checked + .form-check-label {
    color: #fff;
}

/* Remove border collision illusion (cards now separated) */
.service-selection .form-check-label,
.service-selection .form-check-label::after {
    border-radius: 18px;
}

/* ==============================================================
   New Offer Page Layout & Entry Point
==============================================================*/

.offer-container-new {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.form-entry-point {
    padding: 60px 20px;
    transition: opacity 0.5s ease, transform 0.5s ease;
    will-change: opacity, transform;
}

.form-entry-point:not(.active-view) {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    display: none;
}

.form-title {
    font-size: 3.5rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: #fff;
}

.form-subtitle {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 60px;
}

.entry-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.entry-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.entry-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.entry-card .card-icon {
    font-size: 2.5rem;
    margin-bottom: 24px;
    color: var(--accent-color);
}

.entry-card .card-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 12px;
    color: #fff;
}

.entry-card .card-time {
    color: var(--accent-color);
    font-weight: 500;
}

.entry-card .card-subtitle {
    color: rgba(255,255,255,0.7);
}

/* ==============================================================
   New Multi-Step Form Styling
==============================================================*/

.offer-form-container {
    display: none; /* Initially hidden */
}

.offer-form-container.active-view {
    display: block;
    animation: fadeIn 0.7s ease;
}

.back-to-entry {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(40,40,40,0.8);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.back-to-entry:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.user-type-selection {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-top: 50px;
}

.service-card-wrapper {
    cursor: pointer;
}

.service-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    width: 350px;
    transition: all 0.3s ease;
}

.form-check-input:checked + .service-card {
    background: linear-gradient(145deg, rgba(var(--accent-color-rgb),0.2) 0%, rgba(var(--accent-color-rgb),0.05) 100%);
    border-color: var(--accent-color);
    box-shadow: 0 0 25px rgba(var(--accent-color-rgb), 0.55);
}

.service-card .card-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}
.service-card .card-title-small {
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 12px;
}
.service-card .card-subtitle-small {
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
}

/* --- Detailed service selection --- */
.detailed-service-selection {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.service-category {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 25px;
}

.category-header {
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 20px;
}
.category-header i {
    color: var(--accent-color);
    margin-right: 10px;
}

.service-category .form-check {
    margin-bottom: 15px;
}

.service-category .form-check input[type="checkbox"] {
    display: none;
}

.service-category .form-check label {
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    position: relative;
    padding-left: 35px;
}

.service-category .form-check label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.service-category .form-check input:checked + label::before {
    background: var(--accent-color);
    border-color: var(--accent-color);
}
.service-category .form-check input:checked + label {
    color: #fff;
}

/* --- Personal info form --- */
.personal-info-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 50px;
}

.personal-info-form input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 18px 22px;
    color: #fff;
    font-size: 1rem;
}
.personal-info-form input::placeholder {
    color: rgba(255,255,255,0.5);
}

.gdpr-check {
    margin-top: 30px;
    text-align: center;
}
.gdpr-check label {
    color: rgba(255,255,255,0.6);
}
.gdpr-check a {
    color: var(--accent-color);
    text-decoration: underline;
}

/* --- New Navigation Buttons --- */
.form-navigation-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
}
.btn.btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7);
}

.submit-btn {
    width: 100%;
    justify-content: center;
}

.btn-accent {
    padding: 16px 50px;
    border-radius: 12px;
    background-color: var(--accent-color) !important;
    color: var(--primary) !important;
}

.phone-input-container {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 0 15px;
    margin-bottom: 15px;
}
.phone-input-container .country-code {
    display: flex;
    align-items: center;
    padding-right: 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
}
.phone-input-container .country-code .fas {
    margin: 0 5px;
}
.phone-input-container input[type="tel"] {
    border: none;
    background: transparent;
    padding-left: 10px;
    color: white;
    flex-grow: 1;
}
.phone-input-container input[type="tel"]:focus {
    outline: none;
}
    .offer-form-container .gdpr-check {
    margin-top: 20px;
    text-align: left;
}

.entry-card .card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.offer-form-container {
    display: none; /* Hidden by default */
    width: 90%;
    max-width: 1200px;
    margin: auto;
    background: rgba(14, 14, 14, 0.5);
    border-radius: 40px;
    padding: 40px;
    position: relative;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--primary);
}

.user-type-selection {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.form-entry-point {
    transition: opacity 0.5s ease, transform 0.5s ease;
    text-align: center;
}

.entry-card .card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.offer-form-container {
    display: none; /* Hidden by default */
    width: 90%;
    max-width: 1200px;
    margin: auto;
    background: rgba(14, 14, 14, 0.5);
    border-radius: 40px;
    padding: 40px;
    position: relative;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--primary);
}

.user-type-selection {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.form-entry-point {
    transition: opacity 0.5s ease, transform 0.5s ease;
    text-align: center;
}

.service-card .card-subtitle-small u {
    text-decoration-color: var(--accent-color);
}

.detailed-service-selection {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

@media (max-width: 1024px) {
    .detailed-service-selection {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

.detailed-service-selection {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

.btn-accent {
    background-color: var(--accent-color) !important;
    color: var(--primary) !important;
    border-radius: 100px !important;
    padding: 20px 40px !important;
    font-size: var(--font-size-lg) !important;
}

.floating-mail-btn {
    position: absolute;
    bottom: 40px;
    right: 40px;
    background-color: var(--accent-color);
    color: var(--primary);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    z-index: 10;
}

.floating-mail-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    color: var(--primary);
}

.phone-input-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.country-code-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(168, 85, 247)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px !important;
    transition: all 0.3s ease;
}

.country-code-select:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.country-code-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

/* Updated Service Selection Styles */
.detailed-service-selection {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .detailed-service-selection {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .detailed-service-selection {
        grid-template-columns: 1fr;
    }
}

.service-category {
    background: rgba(0, 0, 0, 0.2);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.category-header i {
    color: var(--accent-color);
}

.btn-accent {
    background-color: var(--accent-color) !important;
    color: var(--primary) !important;
    border-radius: 100px !important;
    padding: 15px 35px !important;
    font-size: var(--font-size-base) !important;
}

.progress-indicator-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.progress-segment {
    width: 80px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

.progress-segment.active {
    background-color: var(--accent-color);
}

.form-navigation-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

.btn.btn-outline {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 15px 35px !important;
    border-radius: 100px !important;
}

.btn.btn-outline:hover {
    background: var(--primary);
    color: var(--secondary);
}

.next-step .fa-arrow-right, .submit-btn .fa-paper-plane {
    margin-left: 10px;
}

@media (max-width: 768px) {
    .offer-form-container {
        width: 95%;
        padding: 20px;
    }

    .detailed-service-selection {
        grid-template-columns: 1fr;
    }

    .user-type-selection {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .user-type-card .card-wrapper {
        padding: 30px 20px;
        min-height: 240px;
    }
    
    .user-type-card .card-icon-container i {
        font-size: 40px;
    }
    
    .user-type-card .card-title {
        font-size: 20px;
    }
    
    .user-type-card .card-subtitle {
        font-size: 14px;
    }
}

.form-navigation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.prev-step {
    display: none !important;
}

.modal-content {
    background-color: #1a1a1a;
    color: var(--primary);
    border-radius: 20px;
    border: 1px solid var(--accent-color);
}

.modal-header {
    border-bottom: 1px solid var(--accent-color-3);
}

.modal-footer {
    border-top: 1px solid var(--accent-color-3);
}

.btn-close {
    filter: invert(1);
}

.btn-lg {
    padding: 20px 40px !important;
    font-size: 18px !important;
    justify-content: space-between !important;
}

.nav-tabs .nav-link {
    color: var(--primary);
    background-color: var(--secondary);
    border-color: var(--accent-color-3);
}

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

.tab-content {
    border: 1px solid var(--accent-color-3);
    border-top: 0;
    padding: 20px;
    border-radius: 0 0 10px 10px;
}

/* === Custom Badges & Modal Enhancements === */
.badge-accent {
    background-color: var(--accent-color);
    color: var(--secondary);
    font-weight: 600;
    border-radius: 100px;
    padding: 4px 10px;
    font-size: 0.75rem;
    display: inline-block;
}

.modal-body h5 {
    font-weight: 700;
    margin-bottom: 10px;
}

.modal-body h6 {
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
}

.modal-body .badge-group {
    margin-bottom: 15px;
}

/* Badge group general (cards & modals) */
.badge-group{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
}

.card-pricing .badge-group{
    justify-content:flex-start;
    margin-bottom:10px;
}

/* Pricing note CTA */
.pricing-note{
    margin-top:40px;
}

/* Brand logo sizing */
.brand-logo{
    max-height:60px;
    height:auto;
    width:auto;
}

.brand-name{
    font-weight:700;
    color:var(--primary);
    font-size:1.25rem;
}

/* Contextual logo sizing */
.navbar-brand .brand-logo{
    max-height: 85px; /* optimal height for header */
    width: auto;
    max-width: none; /* allow logo to maintain aspect ratio */
}

.footer-logo-container .brand-logo{
    max-height: 120px; /* keep it prominent but not massive */
    height: auto;
    width: auto;
}

.sidebar-header .brand-logo{
    max-height:60px;
}

/* Brand name typography */
.brand-name{
    font-weight:700;
    color:var(--primary);
    font-size:1.5rem;
    letter-spacing:0.5px;
}

/* ================== Hero Section Responsive Breakpoints ================== */

/* Large desktops and above */
@media (min-width: 1400px) {
    .banner-video-container {
        padding: 180px 0px;
    }
    
    .banner-video-container::after {
        background: 
            linear-gradient(90deg, var(--accent-color) 0%, transparent 35%) top left / 300px 4px no-repeat,
            linear-gradient(0deg, var(--accent-color) 0%, transparent 35%) top left / 4px 300px no-repeat,
            linear-gradient(90deg, transparent 65%, var(--accent-color) 100%) top right / 300px 4px no-repeat,
            linear-gradient(0deg, transparent 65%, var(--accent-color) 100%) top right / 4px 300px no-repeat,
            linear-gradient(90deg, var(--accent-color) 0%, transparent 35%) bottom left / 300px 4px no-repeat,
            linear-gradient(180deg, var(--accent-color) 0%, transparent 35%) bottom left / 4px 300px no-repeat,
            linear-gradient(90deg, transparent 65%, var(--accent-color) 100%) bottom right / 300px 4px no-repeat,
            linear-gradient(180deg, transparent 65%, var(--accent-color) 100%) bottom right / 4px 300px no-repeat;
    }
}

/* Tablets and medium screens */
@media (max-width: 1024px) {
    .banner-video-container {
        padding: 120px 20px;
        min-height: auto;
    }
    
    .banner-video-container::after {
        background: 
            linear-gradient(90deg, var(--accent-color) 0%, transparent 50%) top left / 150px 2px no-repeat,
            linear-gradient(0deg, var(--accent-color) 0%, transparent 50%) top left / 2px 150px no-repeat,
            linear-gradient(90deg, transparent 50%, var(--accent-color) 100%) top right / 150px 2px no-repeat,
            linear-gradient(0deg, transparent 50%, var(--accent-color) 100%) top right / 2px 150px no-repeat,
            linear-gradient(90deg, var(--accent-color) 0%, transparent 50%) bottom left / 150px 2px no-repeat,
            linear-gradient(180deg, var(--accent-color) 0%, transparent 50%) bottom left / 2px 150px no-repeat,
            linear-gradient(90deg, transparent 50%, var(--accent-color) 100%) bottom right / 150px 2px no-repeat,
            linear-gradient(180deg, transparent 50%, var(--accent-color) 100%) bottom right / 2px 150px no-repeat;
    }
    
    .title-heading-banner {
        font-size: 2.5rem;
    }
}

/* Mobile screens */
@media (max-width: 768px) {
    .banner-video-container {
        padding: 100px 0;
        min-height: auto;
    }

    .banner-video-container::after {
        background:
            linear-gradient(90deg, var(--accent-color) 0%, transparent 60%) top left / 100px 2px no-repeat,
            linear-gradient(0deg, var(--accent-color) 0%, transparent 60%) top left / 2px 100px no-repeat,
            linear-gradient(90deg, transparent 60%, var(--accent-color) 100%) top right / 100px 2px no-repeat,
            linear-gradient(0deg, transparent 60%, var(--accent-color) 100%) top right / 2px 100px no-repeat,
            linear-gradient(90deg, var(--accent-color) 0%, transparent 60%) bottom left / 100px 2px no-repeat,
            linear-gradient(180deg, var(--accent-color) 0%, transparent 60%) bottom left / 2px 100px no-repeat,
            linear-gradient(90deg, transparent 60%, var(--accent-color) 100%) bottom right / 100px 2px no-repeat,
            linear-gradient(180deg, transparent 60%, var(--accent-color) 100%) bottom right / 2px 100px no-repeat;
        opacity: 0.9;
    }

    .hero-container {
        padding: 0 15px;
        max-width: 100%;
    }

    .title-heading-banner {
        font-size: 2rem;
        line-height: 1.2;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .banner-video-container {
        padding: 80px 0;
        min-height: auto;
    }

    .banner-video-container::after {
        background:
            linear-gradient(90deg, var(--accent-color) 0%, transparent 70%) top left / 80px 2px no-repeat,
            linear-gradient(0deg, var(--accent-color) 0%, transparent 70%) top left / 2px 80px no-repeat,
            linear-gradient(90deg, transparent 70%, var(--accent-color) 100%) top right / 80px 2px no-repeat,
            linear-gradient(0deg, transparent 70%, var(--accent-color) 100%) top right / 2px 80px no-repeat;
        opacity: 1;
    }

    .hero-container {
        padding: 0 12px;
        max-width: 100%;
    }

    .title-heading-banner {
        font-size: 1.75rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}/* =========================================
   SERVICE ICON ALIVE ENHANCEMENTS
   Make icons feel dynamic and full of character
   ========================================= */

/* Add subtle glow that pulses */
.service-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: radial-gradient(circle, var(--accent-color) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    filter: blur(20px);
}

.service-icon:hover::before {
    opacity: 0.6;
    animation: glowPulse 1.5s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* Make icons feel like they're breathing */
.service-icon i {
    animation: iconBreathe 2.5s ease-in-out infinite;
}

@keyframes iconBreathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

/* Different animation delay for each icon for organic feel */
.card-service:nth-child(1) .service-icon i {
    animation-delay: 0s;
}
.card-service:nth-child(2) .service-icon i {
    animation-delay: 0.3s;
}
.card-service:nth-child(3) .service-icon i {
    animation-delay: 0.6s;
}
.card-service:nth-child(4) .service-icon i {
    animation-delay: 0.9s;
}
.card-service:nth-child(5) .service-icon i {
    animation-delay: 1.2s;
}
.card-service:nth-child(6) .service-icon i {
    animation-delay: 1.5s;
}

/* Enhanced wrapper glow on card hover */
.card-service:hover .service-icon-wrapper {
    transform: scale(1.05);
    box-shadow: 0 10px 40px rgba(186, 73, 255, 0.4);
}

/* Icon pops out when card is hovered */
.card-service:hover .service-icon i {
    color: var(--accent-color);
    filter: drop-shadow(0 0 20px var(--accent-color));
    transform: scale(1.2) rotate(10deg);
    animation: none; /* Stop breathing, start popping */
}

/* Add particle effect feeling with pseudo-element */
.service-icon::after {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
    opacity: 0;
    transition: all 0.6s ease;
}

.card-service:hover .service-icon::after {
    opacity: 0.3;
    transform: scale(1.3);
    animation: rippleExpand 1.5s ease-out infinite;
}

@keyframes rippleExpand {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Service title gets energized on hover too */
.card-service:hover .service-title h4 {
    color: var(--accent-color);
    transform: translateX(5px);
    transition: all 0.3s ease;
}

/* Entire wrapper pulses subtly on page load */
.service-icon-wrapper {
    animation: wrapperPulse 4s ease-in-out infinite;
}

@keyframes wrapperPulse {
    0%, 100% {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 8px 25px rgba(186, 73, 255, 0.15);
    }
}

/* Mobile: Reduce animation intensity */
@media (max-width: 768px) {
    .service-icon {
        animation: iconFloat 4s ease-in-out infinite;
    }
    
    .service-icon i {
        animation: none; /* No breathing on mobile */
    }
    
    .card-service:hover .service-icon::after {
        display: none; /* No ripple on mobile */
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .service-icon,
    .service-icon i,
    .service-icon-wrapper {
        animation: none !important;
    }
    
    .service-icon:hover,
    .card-service:hover .service-icon {
        animation: none !important;
    }
}

/* ==================== MESMERIZING MELTING LIQUID ICON ANIMATION ==================== */

/* SVG Filter for liquid/gooey effect */
.melting-filter {
    position: absolute;
    width: 0;
    height: 0;
}

/* Ensure parent containers allow overflow */
.card-chooseus {
    overflow: visible !important;
}

.chooseus-icon-wrapper {
    overflow: visible !important;
}

/* Base state - icons ready to melt */
.chooseus-icon {
    position: relative;
    overflow: visible !important;
    filter: url(#melt-goo);
    will-change: transform;
}

.chooseus-icon img {
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    will-change: transform, filter;
}

/* Melting animation trigger class */
.chooseus-icon.melting {
    animation: iconMelt 3s ease-in-out infinite;
}

.chooseus-icon.melting img {
    animation: iconImageMelt 3s ease-in-out infinite;
}

/* Keyframes for the container melting effect */
@keyframes iconMelt {
    0%, 100% {
        transform: scale(1) translateY(0);
        border-radius: var(--global-border-radius);
    }
    25% {
        transform: scale(1.05, 0.95) translateY(2px);
        border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    }
    50% {
        transform: scale(0.98, 1.08) translateY(-3px);
        border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
    }
    75% {
        transform: scale(1.02, 0.96) translateY(3px);
        border-radius: 55% 45% 48% 52% / 52% 48% 52% 48%;
    }
}

/* Keyframes for the image inside */
@keyframes iconImageMelt {
    0%, 100% {
        transform: scale(1) translateY(0) rotate(0deg);
        filter: blur(0px);
    }
    25% {
        transform: scale(1.1) translateY(-2px) rotate(2deg);
        filter: blur(0.5px);
    }
    50% {
        transform: scale(0.95) translateY(4px) rotate(-2deg);
        filter: blur(0.3px);
    }
    75% {
        transform: scale(1.05) translateY(-1px) rotate(1deg);
        filter: blur(0.4px);
    }
}

/* ==================== EXTENDED DRIPPING EFFECTS ONTO CARDS ==================== */

/* Main drip that flows down to the card */
.chooseus-icon.melting::before {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 80px;
    background: linear-gradient(180deg,
        rgba(168, 85, 247, 0.9) 0%,
        rgba(236, 72, 153, 0.7) 40%,
        transparent 100%);
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    opacity: 0;
    animation: dripLong 3s ease-in-out infinite;
    filter: blur(2px);
    z-index: 10;
}

/* Secondary drip */
.chooseus-icon.melting::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 35%;
    transform: translateX(-50%);
    width: 12px;
    height: 60px;
    background: linear-gradient(180deg,
        rgba(236, 72, 153, 0.8) 0%,
        rgba(168, 85, 247, 0.6) 50%,
        transparent 100%);
    border-radius: 50%;
    opacity: 0;
    animation: dripLong 3s ease-in-out infinite 0.5s;
    filter: blur(1.5px);
    z-index: 10;
}

/* Even cards get different gradient direction */
.card-chooseus:nth-child(even) .chooseus-icon.melting::before {
    background: linear-gradient(180deg,
        rgba(236, 72, 153, 0.9) 0%,
        rgba(168, 85, 247, 0.7) 40%,
        transparent 100%);
}

.card-chooseus:nth-child(even) .chooseus-icon.melting::after {
    background: linear-gradient(180deg,
        rgba(168, 85, 247, 0.8) 0%,
        rgba(236, 72, 153, 0.6) 50%,
        transparent 100%);
}

/* Extended dripping animation that reaches the card */
@keyframes dripLong {
    0%, 100% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) scaleY(0.5);
        filter: blur(2px);
    }
    10% {
        opacity: 0.6;
        transform: translateX(-50%) translateY(0) scaleY(0.8);
        filter: blur(1.8px);
    }
    30% {
        opacity: 1;
        transform: translateX(-50%) translateY(40px) scaleY(1.4);
        filter: blur(1.5px);
    }
    50% {
        opacity: 0.9;
        transform: translateX(-50%) translateY(80px) scaleY(1.8);
        filter: blur(2px);
    }
    70% {
        opacity: 0.5;
        transform: translateX(-50%) translateY(120px) scaleY(1.2);
        filter: blur(2.5px);
    }
    85% {
        opacity: 0.2;
        transform: translateX(-50%) translateY(150px) scaleY(0.6);
        filter: blur(3px);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(180px) scaleY(0.3);
        filter: blur(3.5px);
    }
}

/* ==================== REMOVED SPLASH EFFECTS - FOCUS ON DRIPS ==================== */

/* Card container for overflow visibility */
.card-chooseus.melting {
    position: relative;
    overflow: visible !important;
}

/* ==================== COLOR OVERFLOW EFFECT ==================== */

/* Gradient stream flowing from icon to card */
.chooseus-icon-wrapper.melting::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 150px;
    background: linear-gradient(180deg,
        rgba(168, 85, 247, 0.8) 0%,
        rgba(168, 85, 247, 0.6) 30%,
        rgba(236, 72, 153, 0.4) 60%,
        transparent 100%);
    opacity: 0;
    animation: streamFlow 3s ease-in-out infinite 0.2s;
    filter: blur(1px);
    pointer-events: none;
    z-index: 8;
}

/* Secondary stream */
.chooseus-icon-wrapper.melting::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 60%;
    transform: translateX(-50%);
    width: 2px;
    height: 120px;
    background: linear-gradient(180deg,
        rgba(236, 72, 153, 0.9) 0%,
        rgba(168, 85, 247, 0.6) 40%,
        transparent 100%);
    opacity: 0;
    animation: streamFlow 3s ease-in-out infinite 0.7s;
    filter: blur(0.8px);
    pointer-events: none;
    z-index: 8;
}

/* Stream flow animation */
@keyframes streamFlow {
    0%, 100% {
        opacity: 0;
        height: 0;
    }
    20% {
        opacity: 0.8;
        height: 50px;
    }
    50% {
        opacity: 1;
        height: 150px;
    }
    80% {
        opacity: 0.4;
        height: 120px;
    }
}

/* Pulsing glow effect during melt */
.chooseus-icon.melting {
    box-shadow:
        var(--box-shadow-top-left),
        0 0 20px rgba(168, 85, 247, 0.4),
        0 0 40px rgba(168, 85, 247, 0.2);
    animation: iconMelt 3s ease-in-out infinite, glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow:
            var(--box-shadow-top-left),
            0 0 15px rgba(168, 85, 247, 0.3),
            0 0 30px rgba(168, 85, 247, 0.1);
    }
    50% {
        box-shadow:
            var(--box-shadow-top-left),
            0 0 30px rgba(168, 85, 247, 0.6),
            0 0 60px rgba(168, 85, 247, 0.3),
            0 0 90px rgba(168, 85, 247, 0.1);
    }
}

/* Ripple effect on the icon background */
.chooseus-icon-layout {
    position: relative;
    overflow: visible !important;
}

.chooseus-icon-layout.melting {
    overflow: visible !important;
}

/* ==================== REMOVED COLOR ABSORPTION - FOCUS ON DRIPS ==================== */

/* Minimal card positioning for overflow */
.card-chooseus {
    position: relative;
}

/* Optimized animation on mobile - keep drips visible */
@media (max-width: 768px) {
    .chooseus-icon.melting {
        animation: iconMeltMobile 3s ease-in-out infinite, glowPulse 3s ease-in-out infinite;
    }

    @keyframes iconMeltMobile {
        0%, 100% {
            transform: scale(1) translateY(0);
        }
        50% {
            transform: scale(1.02, 0.98) translateY(2px);
        }
    }

    /* Enhanced drips on mobile - more visible */
    .chooseus-icon.melting::before {
        height: 60px;
        bottom: -50px;
        width: 14px;
        opacity: 0;
        animation: dripMobile 3s ease-in-out infinite;
    }

    .chooseus-icon.melting::after {
        height: 50px;
        bottom: -40px;
        width: 10px;
        opacity: 0;
        animation: dripMobile 3s ease-in-out infinite 0.5s;
    }

    /* Mobile drip animation - shorter reach but visible */
    @keyframes dripMobile {
        0%, 100% {
            opacity: 0;
            transform: translateX(-50%) translateY(0) scaleY(0.5);
        }
        15% {
            opacity: 0.8;
            transform: translateX(-50%) translateY(0) scaleY(1);
        }
        40% {
            opacity: 1;
            transform: translateX(-50%) translateY(30px) scaleY(1.5);
        }
        65% {
            opacity: 0.7;
            transform: translateX(-50%) translateY(60px) scaleY(1.2);
        }
        85% {
            opacity: 0.3;
            transform: translateX(-50%) translateY(80px) scaleY(0.8);
        }
        100% {
            opacity: 0;
            transform: translateX(-50%) translateY(100px) scaleY(0.4);
        }
    }

    /* Keep streams visible but shorter on mobile */
    .chooseus-icon-wrapper.melting::before,
    .chooseus-icon-wrapper.melting::after {
        height: 100px;
    }

    @keyframes streamFlowMobile {
        0%, 100% {
            opacity: 0;
            height: 0;
        }
        25% {
            opacity: 0.8;
            height: 40px;
        }
        50% {
            opacity: 1;
            height: 80px;
        }
        75% {
            opacity: 0.5;
            height: 60px;
        }
    }

    .chooseus-icon-wrapper.melting::before {
        animation: streamFlowMobile 3s ease-in-out infinite 0.2s;
    }

    .chooseus-icon-wrapper.melting::after {
        animation: streamFlowMobile 3s ease-in-out infinite 0.7s;
    }
}

/* Mobile Performance Optimizations - Remove expensive effects */
@media (max-width: 768px) {
    /* Remove blur filters on mobile for performance */
    .chooseus-icon.melting::before,
    .chooseus-icon.melting::after {
        filter: none !important;
    }

    .chooseus-icon-wrapper.melting::before,
    .chooseus-icon-wrapper.melting::after {
        filter: none !important;
    }

    /* Remove blur from image animation on mobile */
    @keyframes iconImageMelt {
        0%, 100% {
            transform: scale(1) translateY(0) rotate(0deg);
            filter: none;
        }
        25% {
            transform: scale(1.1) translateY(-2px) rotate(2deg);
            filter: none;
        }
        50% {
            transform: scale(0.95) translateY(4px) rotate(-2deg);
            filter: none;
        }
        75% {
            transform: scale(1.05) translateY(-1px) rotate(1deg);
            filter: none;
        }
    }

    /* Force GPU acceleration */
    .chooseus-icon,
    .chooseus-icon img {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

/* Prefers-reduced-motion support */
@media (prefers-reduced-motion: reduce) {
    .chooseus-icon.melting,
    .chooseus-icon.melting img,
    .chooseus-icon.melting::before,
    .chooseus-icon.melting::after,
    .chooseus-icon-layout.melting::before,
    .chooseus-icon-wrapper.melting::before,
    .chooseus-icon-wrapper.melting::after {
        animation: none !important;
    }

    .chooseus-icon.melting {
        box-shadow: var(--box-shadow-top-left);
    }
}
/* ==================== SCROLL TO TOP BUTTON ==================== */

.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* DARK MODE STYLING (Default) */
.scroll-to-top {
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    color: white;
    box-shadow: 
        0 8px 24px rgba(168, 85, 247, 0.4),
        0 4px 12px rgba(236, 72, 153, 0.3);
}

.scroll-to-top:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 
        0 12px 32px rgba(168, 85, 247, 0.5),
        0 6px 16px rgba(236, 72, 153, 0.4);
}

.scroll-to-top:active {
    transform: translateY(-2px) scale(1);
}

/* LIGHT MODE STYLING */
[data-theme="light"] .scroll-to-top {
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    color: white;
    box-shadow: 
        0 8px 24px rgba(168, 85, 247, 0.3),
        0 4px 12px rgba(236, 72, 153, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .scroll-to-top:hover {
    box-shadow: 
        0 12px 32px rgba(168, 85, 247, 0.4),
        0 6px 16px rgba(236, 72, 153, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Visible State */
.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Icon Animation */
.scroll-to-top i {
    transition: transform 0.3s ease;
}

.scroll-to-top:hover i {
    transform: translateY(-3px);
}

/* Pulsing Animation (subtle) */
.scroll-to-top.visible {
    animation: subtlePulse 3s ease-in-out infinite;
}

@keyframes subtlePulse {
    0%, 100% {
        box-shadow: 
            0 8px 24px rgba(168, 85, 247, 0.4),
            0 4px 12px rgba(236, 72, 153, 0.3);
    }
    50% {
        box-shadow: 
            0 8px 28px rgba(168, 85, 247, 0.5),
            0 4px 14px rgba(236, 72, 153, 0.4);
    }
}

[data-theme="light"] .scroll-to-top.visible {
    animation: subtlePulseLight 3s ease-in-out infinite;
}

@keyframes subtlePulseLight {
    0%, 100% {
        box-shadow: 
            0 8px 24px rgba(168, 85, 247, 0.3),
            0 4px 12px rgba(236, 72, 153, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.5);
    }
    50% {
        box-shadow: 
            0 8px 28px rgba(168, 85, 247, 0.4),
            0 4px 14px rgba(236, 72, 153, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.6);
    }
}

/* Ripple effect on click */
.scroll-to-top::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.3);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.5s ease;
}

.scroll-to-top:active::before {
    opacity: 1;
    transform: scale(1);
    transition: all 0s;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 18px;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .scroll-to-top {
        bottom: 15px;
        right: 15px;
        width: 42px;
        height: 42px;
        font-size: 16px;
        border-radius: 8px;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .scroll-to-top,
    .scroll-to-top i,
    .scroll-to-top::before {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== MOBILE PERFORMANCE OPTIMIZATION CSS ==================== */
/* This file contains mobile-specific performance optimizations */
/* It removes expensive effects and forces GPU acceleration on mobile devices */

@media (max-width: 768px) {
    /* ==================== GPU ACCELERATION ==================== */
    /* REMOVED - Was breaking sidebar positioning */

    /* ==================== REMOVE EXPENSIVE EFFECTS ==================== */
    /* Remove box-shadows on mobile (expensive to render) */
    .glow,
    .shadow-effect,
    .card,
    .btn {
        box-shadow: none !important;
    }

    /* Remove blur filters (very expensive on mobile) */
    * {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* ==================== SIMPLIFY ANIMATIONS ==================== */
    /* Use only transform and opacity for animations (GPU accelerated) */
    .animate-box,
    .animated {
        animation-duration: 0.4s !important; /* Faster animations on mobile */
    }

    /* Reduce animation complexity */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideIn {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    /* ==================== IMAGE OPTIMIZATIONS ==================== */
    /* Optimize image rendering */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    /* ==================== TEXT RENDERING ==================== */
    /* Optimize text rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeSpeed;
    }

    /* ==================== REMOVE HOVER EFFECTS ON TOUCH DEVICES ==================== */
    /* Disable hover effects on touch devices */
    @media (hover: none) {
        *:hover {
            transform: none !important;
        }
    }

    /* ==================== WILL-CHANGE OPTIMIZATION ==================== */
    /* Remove will-change after animations complete */
    .animated {
        will-change: auto;
    }

    /* Only use will-change during active animations */
    .animating {
        will-change: transform, opacity;
    }

    /* ==================== VIDEO OPTIMIZATIONS ==================== */
    /* Optimize video playback on mobile */
    video {
        will-change: auto;
    }

    /* ==================== SCROLL OPTIMIZATIONS ==================== */
    /* Optimize scrolling performance */
    * {
        scroll-behavior: auto; /* Smooth scrolling is expensive */
    }

    /* ==================== REDUCE MOTION SUPPORT ==================== */
    /* Respect user's reduced motion preferences */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ==================== LOW-END DEVICE OPTIMIZATIONS ==================== */
/* Additional optimizations for low-end devices */
@media (max-width: 768px) and (max-resolution: 1.5dppx) {
    /* Further reduce animation complexity on low-end devices */
    .animate-box,
    .animated {
        animation: none !important;
    }

    /* Remove transitions on low-end devices */
    * {
        transition: none !important;
    }

    /* Sidebar needs transition for animation */
    .sidebar,
    .sidebar-overlay {
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease !important;
    }

    /* Simplify gradients to solid colors */
    .gradient {
        background: var(--primary-color) !important;
    }
}