:root {
     --accent-color: #0A3284;
     --accent-color-dark: #072357;
     --accent-color-light: #4F75BB;
     --bg-primary: #ffffff;
     --bg-secondary: #f8f9fa;
     --text-primary: #333333;
     --text-secondary: #555555;
     --highlight-light: #00b4d8;
     --highlight-dark: #4F75BB;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Vazirmatn', 'Inter', sans-serif;
     background-color: var(--bg-primary);
     color: var(--text-primary);
     overflow-x: hidden;
     transition: background-color 0.3s ease, color 0.3s ease;
 }

 /* Dark mode variables */
 body.dark {
     --bg-primary: #1f242e;
     --bg-secondary: #171c26;
     --text-primary: #ffffff;
     --text-secondary: #8896b8;
     --highlight-dark: #4F75BB;
 }

 .rtl {
     direction: rtl;
 }

 .ltr {
     direction: ltr;
 }

 .btn-primary {
     background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-color-dark) 100%);
     transition: all 0.3s ease;
 }

 .dark .btn-primary {
     background: linear-gradient(90deg, var(--highlight-dark) 0%, #4F75BB 100%);
 }

 .btn-primary:hover {
     background: linear-gradient(90deg, var(--accent-color-light) 0%, var(--accent-color) 100%);
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(10, 50, 132, 0.2);
 }

 .dark .btn-primary:hover {
     background: linear-gradient(90deg, #4F75BB 0%, var(--highlight-dark) 100%);
     box-shadow: 0 10px 20px rgba(79, 117, 187, 0.2);
 }

 .glow {
     box-shadow: 0 0 15px rgba(10, 50, 132, 0.5);
 }

 .dark .glow {
     box-shadow: 0 0 15px rgba(79, 117, 187, 0.5);
 }

 .glow-text {
     text-shadow: 0 0 10px rgba(10, 50, 132, 0.5);
 }

 .dark .glow-text {
     text-shadow: 0 0 10px rgba(79, 117, 187, 0.5);
 }

 .card {
     background: rgba(255, 255, 255, 0.8);
     border: 1px solid rgba(10, 50, 132, 0.1);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
 }

 .card:hover {
     transform: translateY(-5px);
     border: 1px solid rgba(10, 50, 132, 0.3);
     box-shadow: 0 10px 20px rgba(10, 50, 132, 0.1);
 }

 .dark .card {
     background: rgba(23, 28, 38, 0.5);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .dark .card:hover {
     border: 1px solid rgba(79, 117, 187, 0.3);
     box-shadow: 0 10px 20px rgba(79, 117, 187, 0.1);
 }

 .gradient-text {
     background: linear-gradient(90deg, var(--accent-color), var(--accent-color-light));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .dark .gradient-text {
     background: linear-gradient(90deg, var(--highlight-dark), #4F75BB);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .parallax-bg {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }

 .code-particle {
     position: absolute;
     font-family: monospace;
     font-size: 12px;
     color: rgba(10, 50, 132, 0.7);
     pointer-events: none;
     z-index: 0;
     white-space: nowrap;
     animation: float-down 10s linear forwards;
 }

 .dark .code-particle {
     color: rgba(79, 117, 187, 0.7);
 }

 @keyframes float-down {
     0% {
         transform: translateY(-20px);
         opacity: 0;
     }

     10% {
         opacity: 0.8;
     }

     90% {
         opacity: 0.8;
     }

     100% {
         transform: translateY(calc(100vh + 20px));
         opacity: 0;
     }
 }

 .section {
     padding: 7rem 0;
     position: relative;
 }

 .blob {
     position: absolute;
     border-radius: 50%;
     filter: blur(60px);
     opacity: 0.15;
     z-index: -1;
 }

 .btn-ghost {
     background: rgba(10, 50, 132, 0.1);
     border: 1px solid rgba(10, 50, 132, 0.3);
     transition: all 0.3s ease;
     color: #333333;
 }

 .btn-ghost:hover {
     background: rgba(10, 50, 132, 0.2);
     border: 1px solid rgba(10, 50, 132, 0.5);
 }

 .dark .btn-ghost {
     background: rgba(79, 117, 187, 0.1);
     border: 1px solid rgba(79, 117, 187, 0.3);
     color: white;
 }

 .dark .btn-ghost:hover {
     background: rgba(79, 117, 187, 0.2);
     border: 1px solid rgba(79, 117, 187, 0.5);
 }

 .stats-bar {
     height: 6px;
     background: rgba(0, 0, 0, 0.1);
     border-radius: 3px;
     overflow: hidden;
 }

 .dark .stats-bar {
     background: rgba(255, 255, 255, 0.1);
 }

 .stats-progress {
     height: 100%;
     background: linear-gradient(90deg, var(--accent-color), var(--accent-color-light));
     border-radius: 3px;
     width: 0;
     transition: width 1.5s ease;
 }

 .dark .stats-progress {
     background: linear-gradient(90deg, var(--highlight-dark), #4F75BB);
 }

 .nav-link {
     position: relative;
     padding: 5px 0;
     color: #333333;
 }

 .dark .nav-link {
     color: #e5e5e5;
 }

 .nav-link::after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0;
     width: 0;
     height: 2px;
     background: var(--accent-color);
     transition: width 0.3s ease;
 }

 .dark .nav-link::after {
     background: var(--highlight-dark);
 }

 .nav-link:hover::after {
     width: 100%;
 }

 .sticky-nav {
     position: fixed;
     top: 16px;
     left: 0;
     right: 0;
     width: 90%;
     max-width: 1200px;
     margin: 0 auto;
     z-index: 1000;
     transition: all 0.3s ease;
 }

 .hidden-nav {
     transform: translateY(-100%);
 }

 #particles-canvas {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -10;
     opacity: 0.3;
     pointer-events: none;
 }

 .svg-container {
     overflow: visible;
 }

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

 .dark .typed-cursor {
     color: var(--highlight-dark);
 }

 .code-block {
     background: #f1f1fc;
     color: #333;
     padding: 1rem;
     border-radius: 0.5rem;
     font-family: monospace;
     line-height: 1.5;
     overflow-x: auto;
     position: relative;
 }

 .code-block::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(45deg, transparent 95%, rgba(10, 50, 132, 0.2) 95%);
     pointer-events: none;
 }

 .dark .code-block {
     background: #1e1e3f;
     color: #9effff;
 }

 .dark .code-block::before {
     background: linear-gradient(45deg, transparent 95%, rgba(79, 117, 187, 0.4) 95%);
 }

 .code-block .keyword {
     color: #d73a49;
 }

 .code-block .string {
     color: #032f62;
 }

 .code-block .function {
     color: #6f42c1;
 }

 .code-block .comment {
     color: #6a737d;
 }

 .dark .code-block .keyword {
     color: #ff9d00;
 }

 .dark .code-block .string {
     color: #a5ff90;
 }

 .dark .code-block .function {
     color: #fb94ff;
 }

 .dark .code-block .comment {
     color: #7e7eab;
 }

 .tech-icon {
     transition: all 0.3s ease;
 }

 .tech-icon:hover {
     transform: translateY(-5px);
     filter: drop-shadow(0 0 8px rgba(10, 50, 132, 0.5));
 }

 .dark .tech-icon:hover {
     filter: drop-shadow(0 0 8px rgba(79, 117, 187, 0.5));
 }

 .circle-progress {
     position: relative;
     width: 120px;
     height: 120px;
 }

 .circle-progress svg {
     transform: rotate(-90deg);
 }

 .circle-progress circle {
     fill: none;
     stroke-width: 8;
     stroke-linecap: round;
 }

 .circle-bg {
     stroke: rgba(0, 0, 0, 0.1);
 }

 .dark .circle-bg {
     stroke: rgba(255, 255, 255, 0.1);
 }

 .circle-value {
     stroke: url(#gradient);
     transition: stroke-dashoffset 1s ease;
 }

 .progress-text {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 1.5rem;
     font-weight: bold;
 }

 /* Logo styling */
 .logo-container {
     display: flex;
     align-items: center;
 }

 .logo-image {
     width: 40px;
     height: 40px;
     margin-left: 0.5rem;
 }

 .dark .logo-image {
     filter: brightness(0) invert(1);
 }

 /* Logo Bubbles Animation */
 .logo-bubble,
 .logo-bubble-large {
     transition: all 0.3s ease;
 }

 .logo-bubble:hover,
 .logo-bubble-large:hover {
     transform: translateY(-8px) scale(1.1);
 }

 @keyframes float {

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

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

 .animate-float {
     animation: float 4s ease-in-out infinite;
 }

 /* Language switcher */
 .language-switcher {
     display: flex;
     align-items: center;
     padding: 0.25rem 0.5rem;
     border-radius: 0.5rem;
     border: 1px solid rgba(10, 50, 132, 0.3);
     transition: all 0.3s ease;
 }

 .language-switcher:hover {
     background: rgba(10, 50, 132, 0.1);
 }

 .dark .language-switcher {
     border: 1px solid rgba(79, 117, 187, 0.3);
 }

 .dark .language-switcher:hover {
     background: rgba(79, 117, 187, 0.1);
 }

 /* Partners section */
 .partner-logo {
     filter: grayscale(100%) brightness(0.8);
     opacity: 0.6;
     transition: all 0.3s ease;
     max-height: 60px;
     max-width: 100%;
     object-fit: contain;
 }

 .partner-logo:hover {
     filter: grayscale(0%) brightness(1);
     opacity: 1;
 }

 .partner-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 1rem;
     border-radius: 0.5rem;
     transition: all 0.3s ease;
     width: 150px;
     height: 120px;
 }

 .partner-item:hover {
     transform: translateY(-5px);
     background: rgba(10, 50, 132, 0.05);
 }

 .dark .partner-logo {
     filter: grayscale(100%) brightness(1.2);
 }

 .dark .partner-logo:hover {
     filter: grayscale(0%) brightness(1.5);
 }

 .dark .partner-item:hover {
     background: rgba(79, 117, 187, 0.05);
 }

 /* Enhanced Mobile Responsiveness */
 @media (max-width: 768px) {
     * {
         box-sizing: border-box;
     }

     html {
         font-size: 14px;
     }

     body {
         font-size: 14px;
         line-height: 1.5;
         overflow-x: hidden;
     }

     .section {
         padding: 1.5rem 0;
     }

     .container {
         padding-left: 1rem;
         padding-right: 1rem;
         max-width: 100%;
     }

     /* Navigation fixes */
     .sticky-nav {
         width: 95%;
         top: 8px;
     }

     #navbar {
         padding: 0.75rem 1rem;
     }

     .logo-container {
         font-size: 1.25rem;
     }

     .logo-image {
         width: 28px;
         height: 28px;
     }

     /* Hero section mobile */
     #hero {
         min-height: 90vh;
         padding: 1rem 0 2rem;
     }

     #hero .container {
         padding-top: 5rem;
     }

     /* Text sizes for mobile */
     .text-base {
         font-size: 0.875rem;
     }

     .text-lg {
         font-size: 1rem;
     }

     .text-xl {
         font-size: 1.125rem;
         line-height: 1.5rem;
     }

     .text-2xl {
         font-size: 1.25rem;
         line-height: 1.6rem;
     }

     .text-3xl {
         font-size: 1.5rem;
         line-height: 1.8rem;
     }

     .text-4xl {
         font-size: 1.75rem;
         line-height: 2rem;
     }

     .text-5xl {
         font-size: 2rem;
         line-height: 2.2rem;
     }

     .text-6xl {
         font-size: 2.25rem;
         line-height: 2.4rem;
     }

     .text-7xl {
         font-size: 2.5rem;
         line-height: 2.6rem;
     }

     /* Headings */
     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
         line-height: 1.3;
         margin-bottom: 0.75rem;
     }

     h1 {
         font-size: 1.75rem;
         margin-bottom: 1rem;
     }

     h2 {
         font-size: 1.5rem;
         margin-bottom: 0.875rem;
     }

     h3 {
         font-size: 1.25rem;
         margin-bottom: 0.75rem;
     }

     /* Paragraphs and text */
     p {
         font-size: 0.875rem;
         line-height: 1.6;
         margin-bottom: 1rem;
     }

     /* Buttons */
     .btn-primary,
     .btn-ghost {
         font-size: 0.875rem;
         padding: 0.75rem 1.25rem;
         width: 100%;
         max-width: 280px;
         margin: 0 auto;
         display: block;
         text-align: center;
         white-space: nowrap;
         border-radius: 50px;
     }

     /* Cards */
     .card {
         padding: 1.25rem;
         margin-bottom: 1rem;
         border-radius: 12px;
     }

     /* Grids */
     .grid {
         gap: 1rem;
     }

     .grid-cols-2 {
         grid-template-columns: repeat(1, minmax(0, 1fr));
     }

     .grid-cols-3 {
         grid-template-columns: repeat(1, minmax(0, 1fr));
     }

     .grid-cols-4 {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .grid-cols-6 {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     /* Spacing utilities */
     .space-y-3>*+* {
         margin-top: 0.75rem;
     }

     .space-y-4>*+* {
         margin-top: 1rem;
     }

     .space-y-6>*+* {
         margin-top: 1.5rem;
     }

     .space-y-8>*+* {
         margin-top: 2rem;
     }

     /* Margins and paddings */
     .mb-4 {
         margin-bottom: 1rem;
     }

     .mb-6 {
         margin-bottom: 1.5rem;
     }

     .mb-8 {
         margin-bottom: 2rem;
     }

     .mb-12 {
         margin-bottom: 2.5rem;
     }

     .mb-16 {
         margin-bottom: 3rem;
     }

     .mt-6 {
         margin-top: 1.5rem;
     }

     .mt-8 {
         margin-top: 2rem;
     }

     .mt-12 {
         margin-top: 2.5rem;
     }

     .py-8 {
         padding-top: 2rem;
         padding-bottom: 2rem;
     }

     .py-16 {
         padding-top: 3rem;
         padding-bottom: 3rem;
     }

     .py-20 {
         padding-top: 4rem;
         padding-bottom: 4rem;
     }

     .px-4 {
         padding-left: 1rem;
         padding-right: 1rem;
     }

     .px-6 {
         padding-left: 1.25rem;
         padding-right: 1.25rem;
     }

     .px-8 {
         padding-left: 1.5rem;
         padding-right: 1.5rem;
     }

     /* Service icons */
     .service-icon {
         width: 60px;
         height: 60px;
         margin-bottom: 1rem;
     }

     .department-icon {
         width: 60px;
         height: 60px;
         font-size: 1.5rem;
     }

     /* App items */
     .app-item .card {
         padding: 1rem;
     }

     .app-icon {
         width: 48px;
         height: 48px;
         margin-bottom: 0.75rem;
     }

     /* Tech cards */
     .tech-card .card {
         padding: 1rem;
     }

     /* Partners */
     .partner-item {
         width: 100px;
         height: 80px;
         padding: 0.5rem;
     }

     .partner-logo {
         max-height: 35px;
     }

     /* About section mobile */
     .about-illustration {
         min-height: 200px;
         margin-top: 1rem;
     }

     .logo-bubble-large {
         transform: scale(0.7);
     }

     .logo-bubble {
         transform: scale(0.6);
     }

     /* Hero CTA buttons */
     #hero-cta {
         flex-direction: column;
         gap: 1rem;
         width: 100%;
         max-width: 300px;
         margin: 0 auto;
     }

     #hero-cta a {
         width: 100%;
         margin: 0;
     }

     /* Progress elements */
     .circle-progress {
         width: 70px;
         height: 70px;
     }

     .progress-text {
         font-size: 1rem;
     }

     /* Achievement counters */
     .achievement-counter {
         font-size: 2rem;
     }

     /* Comparison table */
     .comparison-table {
         font-size: 0.75rem;
     }

     .comparison-table th,
     .comparison-table td {
         padding: 0.5rem 0.25rem;
     }

     /* Mobile menu improvements */
     #mobile-menu {
         margin-top: 1rem;
         padding: 1rem;
     }

     #mobile-menu .nav-link {
         padding: 1rem 0;
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         display: block;
     }

     .dark #mobile-menu .nav-link {
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }

     /* Footer adjustments */
     footer {
         padding-top: 2rem;
         padding-bottom: 1rem;
     }

     footer .grid {
         grid-template-columns: 1fr;
         gap: 2rem;
     }

     footer input[type="email"] {
         font-size: 16px;
         /* Prevent zoom on iOS */
     }

     /* Hide desktop-only elements */
     .hidden-mobile {
         display: none;
     }

     /* Ensure minimum touch target size */
     button,
     a,
     input,
     select,
     textarea {
         min-height: 44px;
         min-width: 44px;
     }

     /* Typography improvements */
     .typed-cursor {
         font-size: inherit;
     }

     /* Ensure proper z-indexing */
     .sticky-nav {
         z-index: 9999;
     }

     /* Better spacing for lists */
     ul,
     ol {
         padding-right: 1.25rem;
     }

     li {
         margin-bottom: 0.5rem;
     }

     /* Image responsiveness */
     img {
         max-width: 100%;
         height: auto;
     }

     /* Portfolio improvements */
     .swiper-slide {
         padding: 0.5rem;
     }

     /* Fixes for specific sections */
     .blob {
         display: none;
         /* Hide decorative blobs on mobile */
     }

     /* Ensure no horizontal scroll */
     .overflow-x-auto {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
     }
 }

 @media (max-width: 480px) {
     .section {
         padding: 1.5rem 0;
     }

     .text-4xl {
         font-size: 1.5rem;
         line-height: 1.8rem;
     }

     .text-5xl {
         font-size: 1.75rem;
         line-height: 2rem;
     }

     .text-6xl,
     .text-7xl {
         font-size: 2rem;
         line-height: 2.2rem;
     }

     .container {
         padding-left: 0.75rem;
         padding-right: 0.75rem;
     }

     .grid-cols-2 {
         grid-template-columns: repeat(1, minmax(0, 1fr));
     }

     /* Very small screen adjustments */
     #hero {
         min-height: 70vh;
     }

     /* Further reduce logo bubble sizes */
     .logo-bubble-large {
         transform: scale(0.8);
     }

     .logo-bubble {
         transform: scale(0.7);
     }
 }

 .floating-code {
     animation: float 6s ease-in-out infinite;
     transform-style: preserve-3d;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
 }

 .hexagon {
     position: relative;
     width: 100px;
     height: 57.74px;
     background-color: rgba(10, 50, 132, 0.1);
     margin: 28.87px 0;
     border-left: solid 1px rgba(10, 50, 132, 0.2);
     border-right: solid 1px rgba(10, 50, 132, 0.2);
     transition: all 0.3s ease;
 }

 .dark .hexagon {
     background-color: rgba(79, 117, 187, 0.1);
     border-left: solid 1px rgba(79, 117, 187, 0.2);
     border-right: solid 1px rgba(79, 117, 187, 0.2);
 }

 .hexagon:before,
 .hexagon:after {
     content: "";
     position: absolute;
     z-index: 1;
     width: 70.71px;
     height: 70.71px;
     transform: scaleY(0.5774) rotate(-45deg);
     background-color: inherit;
     left: 14.64px;
 }

 .hexagon:before {
     top: -35.3553px;
     border-top: solid 1.4142px rgba(10, 50, 132, 0.2);
     border-right: solid 1.4142px rgba(10, 50, 132, 0.2);
 }

 .hexagon:after {
     bottom: -35.3553px;
     border-bottom: solid 1.4142px rgba(10, 50, 132, 0.2);
     border-left: solid 1.4142px rgba(10, 50, 132, 0.2);
 }

 .dark .hexagon:before {
     border-top: solid 1.4142px rgba(79, 117, 187, 0.2);
     border-right: solid 1.4142px rgba(79, 117, 187, 0.2);
 }

 .dark .hexagon:after {
     border-bottom: solid 1.4142px rgba(79, 117, 187, 0.2);
     border-left: solid 1.4142px rgba(79, 117, 187, 0.2);
 }

 .hexagon:hover {
     background-color: rgba(10, 50, 132, 0.2);
     transform: translateY(-5px);
 }

 .dark .hexagon:hover {
     background-color: rgba(79, 117, 187, 0.2);
 }

 .project-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
     z-index: 1;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .dark .project-card::before {
     background: linear-gradient(to bottom, rgba(23, 28, 38, 0), rgba(23, 28, 38, 0.8));
 }

 .project-card:hover::before {
     opacity: 1;
 }

 .project-card .project-content {
     transition: transform 0.3s ease, opacity 0.3s ease;
     transform: translateY(20px);
     opacity: 0;
 }

 .project-card:hover .project-content {
     transform: translateY(0);
     opacity: 1;
 }

 .cube {
     perspective: 1000px;
     transform-style: preserve-3d;
     width: 100px;
     height: 100px;
 }

 .cube-face {
     position: absolute;
     width: 100px;
     height: 100px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     backface-visibility: visible;
     background: rgba(10, 50, 132, 0.1);
     border: 1px solid rgba(10, 50, 132, 0.2);
 }

 .dark .cube-face {
     background: rgba(79, 117, 187, 0.1);
     border: 1px solid rgba(79, 117, 187, 0.2);
 }

 .front {
     transform: translateZ(50px);
 }

 .back {
     transform: rotateY(180deg) translateZ(50px);
 }

 .right {
     transform: rotateY(90deg) translateZ(50px);
 }

 .left {
     transform: rotateY(-90deg) translateZ(50px);
 }

 .top {
     transform: rotateX(90deg) translateZ(50px);
 }

 .bottom {
     transform: rotateX(-90deg) translateZ(50px);
 }

 @keyframes rotate-cube {
     0% {
         transform: rotateX(0) rotateY(0);
     }

     100% {
         transform: rotateX(360deg) rotateY(360deg);
     }
 }

 .rotating-cube {
     animation: rotate-cube 20s linear infinite;
 }

 .code-line {
     position: relative;
     height: 1px;
     width: 100%;
     background: rgba(10, 50, 132, 0.2);
     margin: 15px 0;
     overflow: hidden;
 }

 .dark .code-line {
     background: rgba(79, 117, 187, 0.2);
 }

 .code-line::before {
     content: "";
     position: absolute;
     height: 100%;
     width: 50px;
     background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
     animation: code-line-animation 2s linear infinite;
 }

 .dark .code-line::before {
     background: linear-gradient(90deg, transparent, var(--highlight-dark), transparent);
 }

 @keyframes code-line-animation {
     0% {
         left: -50px;
     }

     100% {
         left: 100%;
     }
 }

 .pricing-tab {
     position: relative;
     z-index: 1;
     transition: all 0.3s ease;
 }

 .pricing-tab.active {
     background-color: var(--accent-color);
     color: white;
 }

 .dark .pricing-tab.active {
     background-color: var(--highlight-dark);
     color: white;
 }

 .pricing-content {
     display: none;
 }

 .pricing-content.active {
     display: block;
 }

 .comparison-table th,
 .comparison-table td {
     padding: 1rem;
     text-align: center;
 }

 .comparison-table th {
     background-color: rgba(10, 50, 132, 0.1);
 }

 .dark .comparison-table th {
     background-color: rgba(79, 117, 187, 0.1);
 }

 .comparison-table tr:nth-child(even) {
     background-color: rgba(10, 50, 132, 0.05);
 }

 .dark .comparison-table tr:nth-child(even) {
     background-color: rgba(79, 117, 187, 0.05);
 }

 .comparison-table td:first-child {
     text-align: right;
 }

 .testimonial-card {
     overflow: hidden;
     transition: all 0.3s ease;
 }

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

 .testimonial-card .quote-icon {
     font-size: 3rem;
     opacity: 0.1;
     position: absolute;
     top: 1rem;
     right: 1rem;
 }

 .service-icon {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--accent-color), var(--accent-color-light));
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
     box-shadow: 0 10px 20px rgba(10, 50, 132, 0.2);
 }

 .dark .service-icon {
     background: linear-gradient(135deg, var(--highlight-dark), #4F75BB);
     box-shadow: 0 10px 20px rgba(79, 117, 187, 0.2);
 }

 .accordion-button {
     cursor: pointer;
     position: relative;
     padding: 1rem 1.5rem;
     background-color: rgba(10, 50, 132, 0.1);
     border-radius: 0.5rem;
     margin-bottom: 0.5rem;
     transition: all 0.3s ease;
 }

 .dark .accordion-button {
     background-color: rgba(79, 117, 187, 0.1);
 }

 .accordion-button:hover {
     background-color: rgba(10, 50, 132, 0.2);
 }

 .dark .accordion-button:hover {
     background-color: rgba(79, 117, 187, 0.2);
 }

 .accordion-button::after {
     content: '\F282';
     font-family: 'bootstrap-icons';
     position: absolute;
     left: 1.5rem;
     transition: transform 0.3s ease;
 }

 .accordion-button.active::after {
     transform: rotate(180deg);
 }

 .accordion-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease;
     padding: 0 1.5rem;
 }

 .accordion-content.active {
     max-height: 500px;
     padding: 1rem 1.5rem;
 }

 /* Features checklist */
 .feature-list li {
     padding-right: 1.5rem;
     position: relative;
     margin-bottom: 0.75rem;
 }

 .feature-list li::before {
     content: '✓';
     position: absolute;
     right: 0;
     top: 0;
     color: var(--accent-color);
     font-weight: bold;
 }

 .dark .feature-list li::before {
     color: var(--highlight-dark);
 }

 /* Portfolio swiper */
 .portfolio-swiper {
     width: 100%;
     padding-bottom: 3rem;
 }

 .swiper-slide {
     transition: all 0.3s ease;
     opacity: 0.4;
     transform: scale(0.85);
 }

 .swiper-slide-active {
     opacity: 1;
     transform: scale(1);
 }

 .swiper-pagination-bullet {
     background-color: var(--accent-color);
 }

 .dark .swiper-pagination-bullet {
     background-color: var(--highlight-dark);
 }

 /* Achievement counters */
 .achievement-counter {
     font-size: 3rem;
     font-weight: bold;
     color: var(--accent-color);
     line-height: 1;
 }

 .dark .achievement-counter {
     color: var(--highlight-dark);
 }

 /* 3D Card Effects */
 .perspective-element {
     perspective: 1000px;
 }

 .card-3d {
     transform-style: preserve-3d;
     transition: transform 0.3s ease;
 }

 .card-3d:hover {
     transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
 }

 /* Theme Toggle Button */
 .theme-toggle-btn {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .theme-toggle-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(145deg, rgba(10, 50, 132, 0.1), rgba(10, 50, 132, 0.05));
     border-radius: 50%;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .dark .theme-toggle-btn::before {
     background: linear-gradient(145deg, rgba(79, 117, 187, 0.1), rgba(79, 117, 187, 0.05));
 }

 .theme-toggle-btn:hover::before {
     opacity: 1;
 }

 /* Floating Elements */
 .floating-element {
     transform-style: preserve-3d;
     transform: translateZ(20px);
     transition: all 0.3s ease;
 }

 /* 3D Tilt Effect */
 [data-tilt] {
     transform-style: preserve-3d;
     transform: perspective(1000px);
 }

 /* Scroll Reveal Animation */
 .reveal-on-scroll {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.8s ease, transform 0.8s ease;
     transition-delay: var(--delay, 0s);
 }

 .reveal-on-scroll.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Parallax Elements */
 .parallax-element {
     transition: transform 0.3s ease;
 }

 /* 3D Scene Container */
 #scene-container {
     overflow: hidden;
 }

 /* Preloader */
 #preloader {
     transition: opacity 0.8s ease, visibility 0.8s ease;
 }

 #preloader.hidden {
     opacity: 0;
     visibility: hidden;
 }

 /* Morphing shapes animation */
 @keyframes morph {

     0%,
     100% {
         border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
     }

     50% {
         border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
     }
 }

 .animate-morph {
     animation: morph 8s ease-in-out infinite;
 }

 /* Animated Wave Background */
 .wave-background {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     pointer-events: none;
 }

 .wave {
     position: absolute;
     width: calc(100% + 180px);
     height: 100%;
     background: linear-gradient(90deg, rgba(10, 50, 132, 0.1) 0%, rgba(10, 50, 132, 0.05) 100%);
     animation: wave 8s linear infinite;
     transform: translate3d(-90px, 0, 0);
 }

 .dark .wave {
     background: linear-gradient(90deg, rgba(79, 117, 187, 0.1) 0%, rgba(79, 117, 187, 0.05) 100%);
 }

 .wave:nth-child(2) {
     animation-delay: 0.2s;
 }

 .wave:nth-child(3) {
     animation-delay: 0.4s;
 }

 @keyframes wave {
     0% {
         transform: translate3d(-90px, 0, 0);
     }

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

 /* Animation Delays */
 .delay-100 {
     animation-delay: 0.1s;
 }

 .delay-200 {
     animation-delay: 0.2s;
 }

 .delay-300 {
     animation-delay: 0.3s;
 }

 .delay-400 {
     animation-delay: 0.4s;
 }

 .delay-500 {
     animation-delay: 0.5s;
 }

 .delay-700 {
     animation-delay: 0.7s;
 }

 .delay-1000 {
     animation-delay: 1s;
 }

 /* 3D Card Enhancements */
 .hover-card-3d {
     transform-style: preserve-3d;
     transition: all 0.5s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

 .hover-card-3d:hover {
     transform: rotateX(5deg) rotateY(5deg) scale(1.05);
     box-shadow: 0 20px 30px rgba(10, 50, 132, 0.2);
 }

 .dark .hover-card-3d:hover {
     box-shadow: 0 20px 30px rgba(79, 117, 187, 0.2);
 }

 .hover-card-3d::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%);
     z-index: 2;
     transform: translateZ(1px);
     pointer-events: none;
     transition: opacity 0.5s ease;
     opacity: 0;
     border-radius: inherit;
 }

 .hover-card-3d:hover::before {
     opacity: 1;
 }

 .hover-card-3d .service-icon,
 .hover-card-3d h3,
 .hover-card-3d p,
 .hover-card-3d .btn-ghost,
 .hover-card-3d .btn-primary {
     transform: translateZ(20px);
 }

 /* Department Section Styling */
 .department-card {
     transition: all 0.4s ease;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
     position: relative;
 }

 .department-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(10, 50, 132, 0.2);
 }

 .dark .department-card:hover {
     box-shadow: 0 15px 30px rgba(79, 117, 187, 0.2);
 }

 .department-icon {
     font-size: 2.5rem;
     width: 80px;
     height: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     margin: 0 auto 1rem;
     background: linear-gradient(135deg, var(--accent-color), var(--accent-color-light));
     color: white;
     box-shadow: 0 10px 20px rgba(10, 50, 132, 0.2);
     transition: all 0.3s ease;
 }

 .dark .department-icon {
     background: linear-gradient(135deg, var(--highlight-dark), #4F75BB);
     box-shadow: 0 10px 30px rgba(79, 117, 187, 0.2);
 }

 .department-card:hover .department-icon {
     transform: scale(1.1) translateZ(30px);
 }

 .department-content {
     padding: 2rem;
     transition: all 0.3s ease;
 }

 .department-card:hover .department-content {
     background-color: rgba(10, 50, 132, 0.05);
 }

 .dark .department-card:hover .department-content {
     background-color: rgba(79, 117, 187, 0.05);
 }

 .department-title {
     margin-bottom: 1rem;
     font-size: 1.5rem;
     font-weight: bold;
     position: relative;
     display: inline-block;
 }

 .department-title::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 50px;
     height: 3px;
     background: var(--accent-color);
     transition: all 0.3s ease;
 }

 .dark .department-title::after {
     background: var(--highlight-dark);
 }

 .department-card:hover .department-title::after {
     width: 100%;
 }

 .department-description {
     color: var(--text-secondary);
     margin-bottom: 1.5rem;
 }

 /* App item animation */
 .app-item {
     transition: all 0.3s ease;
 }

 .app-item:hover {
     transform: translateY(-8px);
 }