/* ---------------------------
       Variables & Base
       --------------------------- */
       :root {
         --bg: #f8fafc;
         --glass-bg: rgba(255, 255, 255, 0.75);
         --glass-border: rgba(255, 255, 255, 0.5);
         --accent-1: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
         --accent-2: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
         --text: #0f172a;
         --muted: #64748b;
         --success: #10b981;
         --card-radius: 16px;
         --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
         font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      }
      
      .dropdown-toggle::after {
         display: inline-block;
         margin-left: .255em;
         vertical-align: .255em;
         content: "";
         border-top: .3em solid;
         border-right: .3em solid transparent;
         border-bottom: 0;
         border-left: .3em solid transparent;
      }
      
      [data-theme="dark"] {
         --bg: #0f172a;
         --glass-bg: rgba(15, 23, 42, 0.7);
         --glass-border: rgba(148, 163, 184, 0.12);
         --text: #f1f5f9;
         --muted: #94a3b8;
      }
      
      /* Base styles */
      html,
      body {
         height: 100%
      }
      
      body {
         margin: 0;
         background: radial-gradient(1200px 600px at 10% 10%, rgba(99, 102, 241, 0.08), transparent 15%),
            radial-gradient(800px 400px at 90% 90%, rgba(6, 182, 212, 0.05), transparent 15%),
            var(--bg);
         color: var(--text);
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         transition: background var(--transition), color var(--transition);
         overflow-x: hidden;
      }
      
      /* Glass utility */
      .glass {
         background: var(--glass-bg);
         border: 1px solid var(--glass-border);
         backdrop-filter: blur(12px);
         -webkit-backdrop-filter: blur(12px);
         border-radius: var(--card-radius);
         transition: all var(--transition);
         box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
      }
      
      /* Header / Navbar */
      .navbar {
         transition: all var(--transition);
         z-index: 1050;
         backdrop-filter: blur(8px);
         padding: 0.75rem 0;
      }
      
      .navbar.transparent {
         background: transparent;
         box-shadow: none;
      }
      
      .navbar.scrolled {
         background: rgb(255 255 255 / 55%);
         box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
         border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }
      
      [data-theme="dark"] .navbar.scrolled {
         background: rgba(15, 23, 42, 0.85);
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }
      
      .nav-link {
         color: var(--text) !important;
         position: relative;
         padding: 0.5rem 1rem;
         font-weight: 500;
         transition: color var(--transition);
      }
      
      
      
      .nav-link:hover::after,
      .nav-link.active::after {
         transform: scaleX(1);
      }
      
      /* Dropdown with hover */
      @media (min-width: 992px) {
         .dropdown:hover .dropdown-menu {
            display: block;
            margin-top: 0;
            animation: fadeIn 0.3s ease;
         }
      }
      
      @keyframes fadeIn {
         from {
            opacity: 0;
            transform: translateY(10px);
         }
      
         to {
            opacity: 1;
            transform: translateY(0);
         }
      }
      
      .dropdown-menu {
         border: none;
         border-radius: 12px;
         padding: 0.5rem;
         background: var(--glass-bg);
         backdrop-filter: blur(12px);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         margin-top: 0.5rem;
      }
      
      .dropdown-item {
         border-radius: 8px;
         padding: 0.5rem 1rem;
         transition: all var(--transition);
      }
      
      .dropdown-item:hover {
         background: var(--accent-1);
         color: white !important;
      }
      
      /* Language selector */
      .language-selector {
         position: relative;
      }
      
      .language-selector .dropdown-menu {
         min-width: 120px;
      }
      
      .language-flag {
         width: 20px;
         height: 20px;
         border-radius: 50%;
         margin-right: 8px;
         object-fit: cover;
      }
      
      /* Theme toggle */
      #themeToggle {
         border: none;
         width: 40px;
         height: 40px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         background: var(--glass-bg);
         backdrop-filter: blur(12px);
         color: var(--text);
         transition: all var(--transition);
      }
      
      #themeToggle:hover {
         transform: scale(1.1);
         background: var(--accent-1);
         color: white;
      }
      
      /* Hero section */
      .hero {
         min-height: 90vh;
         display: flex;
         align-items: center;
         position: relative;
         overflow: hidden;
         padding-top: 6rem;
         padding-bottom: 3rem;
      }
      
      .hero .hero-inner {
         z-index: 2;
      }
      
      .hero .lead {
         color: var(--muted);
         font-size: 1.2rem;
         line-height: 1.6;
      }
      
      .hero-ctas .btn {
         border-radius: 12px;
         padding: 0.75rem 1.75rem;
         font-weight: 600;
      }
      
      .hero-ctas .btn-primary {
         background-image: var(--accent-1);
         border: none;
         box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25);
      }
      
      .hero-visual {
         min-height: 300px;
         aspect-ratio: 16/9;
         border-radius: 20px;
         overflow: hidden;
         position: relative;
         transform-style: preserve-3d;
         transition: transform var(--transition);
      }
      
      .hero-floating-shape {
         position: absolute;
         filter: blur(40px);
         opacity: 0.2;
         will-change: transform;
         pointer-events: none;
         z-index: 1;
      }
      
      /* KPI counters */
      .kpis .card {
         border-radius: 14px;
         padding: 1.5rem 1rem;
         text-align: center;
         transition: transform var(--transition);
      }
      
      .kpis .card:hover {
         transform: translateY(-5px);
      }
      
      .kpi-number {
         font-weight: 700;
         font-size: 1.8rem;
         background: var(--accent-1);
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
      }
      
      .kpi-label {
         color: var(--muted);
         font-size: 0.95rem;
         margin-top: 0.5rem;
      }
      
      /* Services */
      .service-card {
         padding: 1.75rem;
         overflow: hidden;
         position: relative;
         height: 100%;
         transition: all var(--transition);
      }
      
      .service-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      }
      
      .service-card::after {
         content: "";
         position: absolute;
         left: -30px;
         bottom: -30px;
         width: 80px;
         height: 80px;
         background: var(--accent-2);
         transform: rotate(45deg);
         opacity: 0.1;
         pointer-events: none;
      }
      
      .service-accent {
         position: absolute;
         right: 1.25rem;
         top: 1.25rem;
         width: 44px;
         height: 44px;
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1rem;
         font-weight: 600;
         color: white;
         background: var(--accent-1);
         box-shadow: 0 6px 16px rgba(99, 102, 241, 0.2);
      }
      
      /* Product / Feature mock */
      .device-frame {
         background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4));
         border-radius: 20px;
         padding: 20px;
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      }
      
      .device-screen {
         height: 340px;
         border-radius: 12px;
         overflow: hidden;
         background: linear-gradient(180deg, #fff, #f7f9fc);
         display: flex;
         align-items: center;
         justify-content: center;
      }
      
      /* Footer */
      footer {
         background: var(--glass-bg);
         border-top: 1px solid var(--glass-border);
         backdrop-filter: blur(12px);
      }
      
      footer a {
         color: var(--muted);
         text-decoration: none;
         transition: color var(--transition);
      }
      
      footer a:hover {
         color: var(--text);
      }
      
      /* Back to top */
      #backToTop {
         position: fixed;
         right: 24px;
         bottom: 24px;
         width: 56px;
         height: 56px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 8px 24px rgba(3, 3, 10, 0.2);
         cursor: pointer;
         z-index: 2000;
         transform: translateY(20px);
         opacity: 0;
         transition: transform 320ms ease, opacity 260ms ease;
         background: var(--accent-1);
         color: white;
         border: none;
      }
      
      #backToTop.show {
         transform: translateY(0);
         opacity: 1;
      }
      
      /* Form elements */
      .form-control {
         border-radius: 10px;
         padding: 0.75rem 1rem;
         border: 1px solid var(--glass-border);
         background: var(--glass-bg);
         color: var(--text);
      }
      
      .form-control:focus {
         box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
         border-color: #6366f1;
      }
      
      /* Buttons */
      .btn {
         border-radius: 10px;
         font-weight: 500;
         transition: all var(--transition);
      }
      
      .btn-primary {
         background: var(--accent-1);
         border: none;
      }
      
      .btn-primary:hover {
         transform: translateY(-2px);
         box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
      }
      
      .btn-outline-secondary {
         border-color: var(--glass-border);
         color: var(--text);
      }
      
      .btn-outline-secondary:hover {
         background: var(--glass-bg);
         border-color: var(--glass-border);
         transform: translateY(-2px);
      }
      
      /* Section spacing */
      section {
         padding: 5rem 0;
      }
      
      .section-title {
         font-weight: 700;
         margin-bottom: 1rem;
         position: relative;
         display: inline-block;
      }
      
      .section-title::after {
         content: "";
         position: absolute;
         left: 0;
         bottom: -8px;
         width: 40px;
         height: 4px;
         background: var(--accent-1);
         border-radius: 2px;
      }
      
      /* Responsive improvements */
      @media (max-width: 767.98px) {
         .nav-link {
            padding: 0.5rem 0.75rem;
         }
      
         .hero {
            padding-top: 5rem;
            padding-bottom: 2rem;
            min-height: 80vh;
         }
      
         .kpi-number {
            font-size: 1.5rem;
         }
      
         section {
            padding: 3rem 0;
         }
      
         /* Mobile-specific improvements */
         .navbar-collapse {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            padding: 1rem;
            border-radius: 12px;
            margin-top: 0.5rem;
            border: 1px solid var(--glass-border);
         }
      
         .hero-ctas {
            flex-direction: column;
            gap: 1rem !important;
         }
      
         .hero-ctas .btn {
            width: 100%;
            text-align: center;
         }
      
         .hero-visual {
            margin-top: 2rem;
            min-height: 250px;
         }
      
         .kpis .col-6 {
            margin-bottom: 1rem;
         }
      
         .device-frame {
            margin: 1rem 0;
         }
      
         .filter-btn {
            margin-bottom: 0.5rem;
         }
      
         footer .row>div {
            margin-bottom: 2rem;
         }
      }
      
      @media (min-width: 1400px) {
      
         /* Large screen improvements */
         .container {
            max-width: 1320px;
         }
      
         .hero h1 {
            font-size: 3.5rem !important;
         }
      
         .hero .lead {
            font-size: 1.4rem;
         }
      
         .section-title {
            font-size: 2.5rem;
         }
      
         .service-card,
         .card.glass {
            padding: 2.5rem;
         }
      }
      
      @media (max-width: 575.98px) {
      
         /* Extra small devices */
         .hero h1 {
            font-size: 2rem !important;
         }
      
         .hero .lead {
            font-size: 1rem;
         }
      
         .kpis .col-6 {
            flex: 0 0 50%;
            max-width: 50%;
         }
      
         .navbar-brand div:last-child {
            font-size: 0.9rem;
         }
      
         .language-selector .btn {
            font-size: 0.8rem;
         }
      }
      
      /* Accessibility / reduce motion */
      @media (prefers-reduced-motion: reduce) {
         * {
            transition: none !important;
            animation: none !important;
            scroll-behavior: auto !important;
         }
      }
      
      /* Touch device improvements */
      @media (hover: none) {
      
         .service-card:hover,
         .kpis .card:hover,
         .projects .project-card:hover {
            transform: none;
         }
      
         .nav-link::after {
            display: none;
         }
      
         .btn:hover {
            transform: none;
         }
      }
      section#flagship {
        background: var(--accent-1);
      }
      /* Product cards */
      .product-card {
         padding: 25px;
         height: 100%;
         transition: var(--transition);
         position: relative;
         overflow: hidden;
         border-radius: 12px;
         background: rgba(255, 255, 255, 0.8);
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
         display: flex;
         flex-direction: column;
      }
      
      .product-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
      }
      
      .product-image {
         height: 180px;
         overflow: hidden;
         border-radius: 8px;
         margin-bottom: 20px;
      }
      
      .product-image img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.5s ease;
      }
      
      .product-card:hover .product-image img {
         transform: scale(1.05);
      }
      
      .product-card h4 {
         margin: 15px 0;
         color: #2c3e50;
      }
      
      .product-card p {
         color: #7f8c8d;
         flex-grow: 1;
         margin-bottom: 20px;
      }
      
      .btn-view-details {
         background: linear-gradient(45deg, #3a86ff, #8338ec);
         color: white;
         border: none;
         padding: 10px 20px;
         border-radius: 6px;
         font-weight: 600;
         transition: all 0.3s ease;
         width: 100%;
      }
      
      .btn-view-details:hover {
         background: linear-gradient(45deg, #8338ec, #3a86ff);
         transform: translateY(-2px);
         box-shadow: 0 4px 10px rgba(58, 134, 255, 0.3);
      }
      
      /* Decorative elements */
      .product-card::before,
      .product-card::after {
         content: '';
         position: absolute;
         width: 50px;
         height: 50px;
         background: var(--accent-1);
         border-radius: 10px;
         z-index: -1;
         transition: var(--transition);
      }
      
      .product-card::before {
         top: -10px;
         right: -10px;
         clip-path: polygon(100% 0, 0 0, 100% 100%);
         background: linear-gradient(45deg, #3a86ff, #8338ec);
         opacity: 0.7;
      }
      
      .product-card::after {
         bottom: -10px;
         left: -10px;
         clip-path: polygon(100% 100%, 0 100%, 0 0);
         background: linear-gradient(45deg, #8338ec, #3a86ff);
         opacity: 0.7;
      }
      
      section#why {
         background: #f0f4ff;
      }
      
      /* Project gallery */
      .project-filter button {
         background: transparent;
         border: none;
         padding: 8px 20px;
         margin: 5px;
         border-radius: 30px;
         font-weight: 500;
         transition: var(--transition);
      }
      
      .project-filter button.active,
      .project-filter button:hover {
         background: var(--accent-1);
         color: white;
      }
      
      .project-item {
         border-radius: 16px;
         overflow: hidden;
         position: relative;
         margin-bottom: 25px;
      }
      
      .project-img {
         transition: var(--accent-1);
         width: 100%;
         height: 250px;
         object-fit: cover;
      }
      
      .project-overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.7);
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 0;
         transition: var(--transition);
      }
      
      .project-item:hover .project-overlay {
         opacity: 1;
      }
      
      .project-item:hover .project-img {
         transform: scale(1.1);
      }
      
      /* Hindi Siliguri Font for Bangla Text */
      .bangla-text {
         font-family: 'Hind Siliguri', sans-serif;
      }
      
      .testimonialSwiper {
         padding: 20px 10px 50px;
      }
      
      .swiper-slide {
         height: auto;
         display: flex;
      }
      
      .testimonial-card {
         height: 100%;
      }
      
      .swiper-button-next,
      .swiper-button-prev {
         color: var(--primary);
         background: rgba(255, 255, 255, 0.8);
         width: 40px;
         height: 40px;
         border-radius: 50%;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
      
      .dark-mode .swiper-button-next,
      .dark-mode .swiper-button-prev {
         background: rgba(30, 30, 30, 0.8);
      }
      
      .swiper-button-next:after,
      .swiper-button-prev:after {
         font-size: 20px;
         font-weight: bold;
      }
      
      .swiper-pagination-bullet {
         background: var(--text-dark);
         opacity: 0.4;
         width: 10px;
         height: 10px;
      }
      
      .swiper-pagination-bullet-active {
         background: var(--primary);
         opacity: 1;
      }
      
      .dark-mode .swiper-pagination-bullet {
         background: var(--text-light);
      }
      
      
      .testimonial-slider-container {
         position: relative;
         padding: 20px 40px 50px;
         overflow: hidden;
      }
      
      .testimonial-track {
         display: flex;
         transition: transform 0.5s ease;
      }
      
      .testimonial-slide {
         flex: 0 0 calc(100% / 3 - 20px);
         margin: 0 10px;
         display: flex;
      }
      
      @media (max-width: 992px) {
         .testimonial-slide {
            flex: 0 0 calc(100% / 2 - 20px);
         }
      }
      
      @media (max-width: 768px) {
         .testimonial-slide {
            flex: 0 0 calc(100% - 20px);
         }
      }
      
      .testimonial-card {
         height: 100%;
         width: 100%;
      }
      
      .testimonial-nav {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.8);
         border: none;
         color: var(--primary);
         font-size: 16px;
         cursor: pointer;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         z-index: 10;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.3s ease;
      }
      
      .testimonial-nav:hover {
         background: var(--primary);
         color: white;
      }
      
      .testimonial-prev {
         left: 0;
      }
      
      .testimonial-next {
         right: 0;
      }
      
      .testimonial-pagination {
         display: flex;
         justify-content: center;
         margin-top: 20px;
      }
      
      .testimonial-pagination-bullet {
         width: 10px;
         height: 10px;
         border-radius: 50%;
         background: #ccc;
         margin: 0 5px;
         cursor: pointer;
         transition: background 0.3s ease;
      }
      
      .testimonial-pagination-bullet.active {
         background: var(--accent-1);
      }
      
      /* Testimonials */
      .testimonial-card {
         background: #fff;
         border-radius: 15px;
         padding: 30px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
         transition: var(--transition);
      }
      
      .dark-mode .testimonial-card {
         background: #1e1e1e;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      }
      
      .testimonial-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 15px 35px rgba(108, 99, 255, 0.1);
      }
      
      .testimonial-header {
         display: flex;
         align-items: center;
         margin-bottom: 20px;
      }
      
      .testimonial-img {
         width: 60px;
         height: 60px;
         border-radius: 50%;
         margin-right: 15px;
         object-fit: cover;
      }
      
      .testimonial-info h4 {
         margin-bottom: 5px;
      }
      
      .testimonial-info p {
         color: var(--primary);
         margin: 0;
         font-size: 14px;
      }
      
      .stars {
         color: #ffc107;
         margin-bottom: 15px;
      }
      
      /* =======================  Company Logo Sectino ======================  */
      .companies-section {
         padding: 60px 0;
         background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(245, 245, 255, 0.8));
         position: relative;
         overflow: hidden;
      }
      
      .dark-mode .companies-section {
         background: linear-gradient(135deg, rgba(18, 18, 18, 0.8), rgba(30, 30, 40, 0.8));
      }
      
      .companies-section::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect fill="none" stroke="%236c63ff" stroke-width="0.5" x="0" y="0" width="200" height="200"></rect></svg>');
         opacity: 0.03;
         z-index: 0;
      }
      
      .companies-slider-container {
         position: relative;
         padding: 40px 0;
         overflow: hidden;
      }
      
      .companies-track {
         display: flex;
         animation: slide 40s linear infinite;
         padding: 20px 0;
      }
      
      .company-slide {
         flex: 0 0 auto;
         width: 200px;
         margin: 0 30px;
         display: flex;
         align-items: center;
         justify-content: center;
      }
      
      .company-logo {
         width: 100%;
         height: 100px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: white;
         border-radius: 12px;
         padding: 20px;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
      }
      
      .dark-mode .company-logo {
         background: #1e1e1e;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }
      
      .company-logo::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
         opacity: 0;
         transition: opacity 0.4s ease;
         z-index: 0;
      }
      
      .company-logo:hover::before {
         opacity: 0.05;
      }
      
      .company-logo:hover {
         transform: translateY(-5px) scale(1.03);
         box-shadow: 0 15px 30px rgba(108, 99, 255, 0.15);
      }
      
      .company-logo img {
         max-width: 80%;
         max-height: 60px;
         filter: grayscale(100%);
         opacity: 0.7;
         transition: all 0.4s ease;
         position: relative;
         z-index: 1;
      }
      
      .company-logo:hover img {
         filter: grayscale(0%);
         opacity: 1;
      }
      
      @keyframes slide {
         0% {
            transform: translateX(0);
         }
      
         100% {
            transform: translateX(-100%);
         }
      }
      
      /* Pause animation on hover */
      .companies-slider-container:hover .companies-track {
         animation-play-state: paused;
      }
      
      /* Gradient fade edges */
      .companies-slider-container::before,
      .companies-slider-container::after {
         content: '';
         position: absolute;
         top: 0;
         height: 100%;
         width: 100px;
         z-index: 2;
      }
      
      .companies-slider-container::before {
         left: 0;
         background: linear-gradient(to right, var(--light), transparent);
      }
      
      .companies-slider-container::after {
         right: 0;
         background: linear-gradient(to left, var(--light), transparent);
      }
      
      .dark-mode .companies-slider-container::before {
         background: linear-gradient(to right, var(--light), transparent);
      }
      
      .dark-mode .companies-slider-container::after {
         background: linear-gradient(to left, var(--light), transparent);
      }
      
      /* Responsive styles */
      @media (max-width: 992px) {
         .company-slide {
            width: 180px;
            margin: 0 20px;
         }
      }
      
      @media (max-width: 768px) {
         .company-slide {
            width: 150px;
            margin: 0 15px;
         }
      
         .company-logo {
            height: 80px;
            padding: 15px;
         }
      
         .company-logo img {
            max-height: 50px;
         }
      
         .companies-slider-container::before,
         .companies-slider-container::after {
            width: 60px;
         }
      }
      
      @media (max-width: 576px) {
         .company-slide {
            width: 120px;
            margin: 0 10px;
         }
      
         .company-logo {
            height: 70px;
            padding: 10px;
         }
      
         .company-logo img {
            max-height: 40px;
         }
      }
      
      
      /* ================== blog slider ==============  */
      .blog-slider-container {
         position: relative;
         padding: 20px 40px 50px;
         overflow: hidden;
      }
      
      .blog-track {
         display: flex;
         transition: transform 0.5s ease;
      }
      
      .blog-slide {
         flex: 0 0 calc(100% / 3 - 20px);
         margin: 0 10px;
         display: flex;
      }
      
      @media (max-width: 992px) {
         .blog-slide {
            flex: 0 0 calc(100% / 2 - 20px);
         }
      }
      
      @media (max-width: 768px) {
         .blog-slide {
            flex: 0 0 calc(100% - 20px);
         }
      }
      
      .blog-card {
         height: 100%;
         width: 100%;
      }
      
      .blog-nav {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.8);
         border: none;
         color: var(--primary);
         font-size: 16px;
         cursor: pointer;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         z-index: 10;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.3s ease;
      }
      
      .blog-nav:hover {
         background: var(--primary);
         color: white;
      }
      
      .blog-prev {
         left: 0;
      }
      
      .blog-next {
         right: 0;
      }
      
      .blog-pagination {
         display: flex;
         justify-content: center;
         margin-top: 20px;
      }
      
      .blog-pagination-bullet {
         width: 10px;
         height: 10px;
         border-radius: 50%;
         background: #ccc;
         margin: 0 5px;
         cursor: pointer;
         transition: background 0.3s ease;
      }
      
      .blog-pagination-bullet.active {
         background: var(--accent-1);
      }
      
      /* Blog Cards */
      .blog-card {
         background: #fff;
         border-radius: 15px;
         overflow: hidden;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
         transition: var(--transition);
         height: 100%;
      }
      
      .dark-mode .blog-card {
         background: #1e1e1e;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      }
      
      .blog-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 15px 35px rgba(108, 99, 255, 0.1);
      }
      
      .blog-img {
         height: 200px;
         width: 100%;
         object-fit: cover;
      }
      
      .blog-content {
         padding: 20px;
      }
      
      .blog-content h3 {
         margin-bottom: 10px;
         font-size: 1.3rem;
      }
      
      .blog-content p {
         color: var(--text-dark);
         margin-bottom: 15px;
      }
      
      .read-more {
         color: var(--primary);
         font-weight: 500;
         text-decoration: none;
         display: inline-flex;
         align-items: center;
      }
      
      .read-more i {
         margin-left: 5px;
         transition: var(--transition);
      }
      
      .read-more:hover i {
         transform: translateX(5px);
      }
      
      /* ============================= Video Tutorial ================================  */
      
      
      .tutorials {
         padding: 80px 0;
         background: linear-gradient(135deg, rgba(108, 99, 255, 0.05), rgba(74, 68, 245, 0.05));
      }
      
      .tutorial-slider-container {
         position: relative;
         padding: 20px 40px 50px;
         overflow: hidden;
      }
      
      .tutorial-track {
         display: flex;
         transition: transform 0.5s ease;
      }
      
      .tutorial-slide {
         flex: 0 0 calc(100% / 3 - 20px);
         margin: 0 10px;
         display: flex;
      }
      
      @media (max-width: 992px) {
         .tutorial-slide {
            flex: 0 0 calc(100% / 2 - 20px);
         }
      }
      
      @media (max-width: 768px) {
         .tutorial-slide {
            flex: 0 0 calc(100% - 20px);
         }
      }
      
      .tutorial-card {
         background: #fff;
         border-radius: 15px;
         overflow: hidden;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
         transition: all 0.3s ease;
         height: 100%;
         width: 100%;
      }
      
      .dark-mode .tutorial-card {
         background: #1e1e1e;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      }
      
      .tutorial-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 15px 35px rgba(108, 99, 255, 0.1);
      }
      
      .tutorial-thumbnail {
         position: relative;
         height: 200px;
         overflow: hidden;
      }
      
      .tutorial-img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.5s ease;
      }
      
      .tutorial-card:hover .tutorial-img {
         transform: scale(1.05);
      }
      
      .play-button {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 60px;
         height: 60px;
         background: var(--accent-1);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: all 0.3s ease;
         opacity: 0.9;
      }
      
      .play-button:hover {
         transform: translate(-50%, -50%) scale(1.1);
         opacity: 1;
      }
      
      .play-button i {
         color: white;
         font-size: 20px;
         margin-left: 4px;
      }
      
      .tutorial-content {
         padding: 20px;
      }
      
      .tutorial-content h3 {
         margin-bottom: 10px;
         font-size: 1.3rem;
      }
      
      .tutorial-content p {
         color: var(--text-dark);
         margin-bottom: 0;
      }
      
      .tutorial-nav {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.8);
         border: none;
         color: var(--primary);
         font-size: 16px;
         cursor: pointer;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         z-index: 10;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.3s ease;
      }
      
      .dark-mode .tutorial-nav {
         background: rgba(30, 30, 30, 0.8);
      }
      
      .tutorial-nav:hover {
         background: var(--primary);
         color: white;
      }
      
      .tutorial-prev {
         left: 0;
      }
      
      .tutorial-next {
         right: 0;
      }
      
      .tutorial-pagination {
         display: flex;
         justify-content: center;
         margin-top: 20px;
      }
      
      .tutorial-pagination-bullet {
         width: 10px;
         height: 10px;
         border-radius: 50%;
         background: #ccc;
         margin: 0 5px;
         cursor: pointer;
         transition: background 0.3s ease;
      }
      
      .tutorial-pagination-bullet.active {
         background: var(--accent-1);
      }
      
      /* Video Modal Styles */
      .video-modal {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 9999;
         opacity: 0;
         visibility: hidden;
         transition: all 0.3s ease;
      }
      
      .video-modal.active {
         opacity: 1;
         visibility: visible;
      }
      /* Why choose us */
      .check-list li {
         margin-bottom: 1rem;
      }
      
      .check-icon {
         width: 40px;
         height: 40px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         border-radius: 10px;
         margin-right: 1rem;
         background: var(--accent-1);
         color: white;
      }
      .modal-overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.8);
         backdrop-filter: blur(5px);
      }
      
      .modal-container {
         position: relative;
         width: 90%;
         max-width: 900px;
         z-index: 10;
      }
      
      .modal-content {
         position: relative;
         background: #000;
         border-radius: 10px;
         overflow: hidden;
         box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
      }
      
      .modal-close {
         position: absolute;
         top: 15px;
         right: 15px;
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.2);
         border: none;
         color: white;
         font-size: 18px;
         cursor: pointer;
         z-index: 11;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.3s ease;
      }
      
      .modal-close:hover {
         background: rgba(255, 255, 255, 0.3);
         transform: rotate(90deg);
      }
      
      .video-container {
         position: relative;
         padding-bottom: 56.25%;
         /* 16:9 aspect ratio */
         height: 0;
         overflow: hidden;
      }
      
      .video-container iframe {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         border: none;
      }