/* --- Existing Global Styles --- */
.marquee-container {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}

#hero {
  background-color: rgb(131, 168, 237);
  background-image: radial-gradient(
    circle at 50% 0%,
    rgb(254, 253, 253) 49.15%,
    transparent 102.23%
  );
}

#buttons-container::-webkit-scrollbar {
  width: 6px;
}
#buttons-container::-webkit-scrollbar-thumb {
  background: #598af4;
  border-radius: 4px;
}

/* --- Service Section Logic --- */


.workspace-grid {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 60px;
  align-items: flex-start; /* Better for tall content */
}

.image-side {
  flex: 1.2;
}
.img-wrapper {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-item {
  position: relative;
  padding: 10px 0 20px 35px;
  margin-bottom: 10px;
  cursor: pointer;
  border-left: none; /* Ensure no double borders */
}

/* The Grey Background Line */
.feature-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: #e8eaed;
  border-radius: 4px;
}

/* The Blue Progress Line */
.feature-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 0%;
  background: #0892d0;
  border-radius: 4px;
  z-index: 2;
}

.feature-item.active::after {
  animation: fillLine 5s linear forwards;
}

@keyframes fillLine {
  from {
    height: 0%;
  }
  to {
    height: 100%;
  }
}

.feature-item h3 {
  margin: 0;
  color: #5f6368;
  font-size: 18px;
  transition: 0.3s;
}
.feature-item.active h3 {
  color: black;
  font-weight: 700;
}

.feature-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s ease;
}

.feature-item.active .feature-details {
  max-height: 300px;
  opacity: 1;
  margin-top: 10px;
}

/* --- MOBILE FIXES (Solves Double Line & Image issue) --- */
@media (max-width: 768px) {
  /* body { padding: 20px; } */

  .workspace-grid {
    flex-direction: column;
    gap: 0; /* No gap needed since image is gone */
  }

  .image-side {
    display: none !important; /* Removes image on mobile */
  }

  .content-side {
    width: 100%;
  }

  .feature-item {
    padding-left: 25px; /* Brings text closer to solve "double line" look */
    width: 100%;
  }
}

/* --- Optimized Desktop Structure --- */
.workspace-grid {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 60px;
  align-items: flex-start;
  /* This centers the flex items horizontally */
  justify-content: center;
}

/* Ensure the content side doesn't stretch too far on wide screens */
.content-side {
  flex: 1;
  max-width: 500px; /* Limits width to keep it looking clean like your screenshot */
}

/* --- Responsive Fixes --- */
@media (max-width: 768px) {
  .workspace-grid {
    flex-direction: column;
    align-items: flex-start; /* Keeps text left-aligned on mobile */
    gap: 0;
  }

  .content-side {
    max-width: 100%; /* Allows full width on mobile phones */
  }

  .image-side {
    display: none !important;
  }
}
/* --- Adjusting Image Height Only --- */
#main-img {
  height: 350px; /* Change this value (e.g., 400px, 500px, 700px) to your desired height */
  object-fit: cover; /* Ensures the image fills the area without distortion */
  width: 100%; /* Maintains the responsive width */
}

.swiper {
  width: 80%;
  height: 60%;
  touch-action: pan-y;

}

        @theme {
            --color-brand-1: #1c8cc1;
            --color-brand-2: #0892d0;
            --color-brand-3: #2496cd;
            --color-brand-dark: #0a0a0c;
        }

        .gradient-text {
  background-image: linear-gradient(to right, #9333ea, #715edc, #a94aa3, #9333ea);
  background-size: 300% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  /* Add this line to trigger the movement */
  animation: color-flow 6s ease infinite;
}

/* This defines how the background moves */
@keyframes color-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


        .footer-shimmer {
            background: linear-gradient(130deg,
                    #0a0a0c 0%,
                    #0a0a0c 20%,
                    #02384f 60%,
                    #0a0a0c 100%);
            background-size: 800% 100%;
            animation: footerShineMove 6s linear infinite;
        }

        @keyframes footerShineMove {
            0% {
                background-position: 100% 0;
            }

            10% {
                background-position: 200% 100;
            }
        }

        /* Mobile Menu Transitions */
        #mobile-menu {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateY(-20px);
            opacity: 0;
            visibility: hidden;
        }

        #mobile-menu.active {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
        }

        /* Original Fonts and Layouts */
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap');

        body {
            font-family: sans-serif;
            background-color: white;
            color: #0f172a;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        .bento-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: minmax(220px, auto);
            gap: 1.5rem;
        }

        .card-inner {
            border-radius: 24px;
            padding: 2.5rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            border: 1px solid rgba(59, 130, 246, 0.1);
        }

        .card-light {
            background: #ffffff;
            border: 2px solid #e2eefe;
        }

        .card-inner:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px -10px rgba(30, 64, 175, 0.15);
            border-color: #3b82f6;
        }

        .icon-box {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
        }

        .card-inner:hover .icon-box {
            transform: scale(1.1) rotate(-5deg);
        }

        .col-span-2 {
            grid-column: span 2;
        }

        .row-span-2 {
            grid-row: span 2;
        }

        @media (max-width: 1024px) {
            .bento-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .col-span-2 {
                grid-column: span 2;
            }
        }

        @media (max-width: 640px) {
            .bento-grid {
                grid-template-columns: 1fr;
            }

            .col-span-2 {
                grid-column: span 1;
            }
        }
  


                .premium-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(226, 232, 240, 0.8);
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .premium-card:hover {
            transform: translateY(-10px) scale(1.02);
            border-color: #1c8cc1;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.15);
        }

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

        
        .animate-float { animation: float 6s ease-in-out infinite; }
        .blue-glow { filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.3)); }

        @keyframes colorFlow {
                0% { background-position: 0% 50%; }
                50% { background-position: 100% 50%; }
                100% { background-position: 0% 50%; }
            }
            .animate-color-flow{ animation: colorFlow 6s ease infinite;}


        @keyframes shine {
            0% { transform: translateX(-150%) skewX(-30deg); }
            100% { transform: translateX(350%) skewX(-30deg); }
        }
        .animate-shine { animation: shine 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }