body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0a;
    color: #ffffff;
    overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
.efqn9 {
  padding-top: 14px;
}
.container{
    width: 90%;
}
.logo{
max-width:120px
}
.underlin{
    border-bottom: 1px solid #eee;
}
.mesh-gradient {
position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
    overflow: hidden;
    border-radius: 12px;
top:0px;
z-index:-1;
}
.shape-9 {
        position: absolute;
        width: 513px;
        height: 513px;
        background-color: #5b12ca;
        filter: blur(143px);
        opacity: 0.63;
        mix-blend-mode: screen;
        left: 71.4737913967396%;
        top: 65.671875%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        
}
.shape-10 {
        position: absolute;
        width: 428px;
        height: 428px;
        background-color: #1a49b7;
        filter: blur(52px);
        opacity: 0.75;
        mix-blend-mode: overlay;
        left: 50.97206205505793%;
        top: 46.65625%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        
}
.meshgradient2 {
    background: linear-gradient(to bottom, #111827, #0f172a)!important;
}
.shape-4 {
    position: absolute;
    width: 610px;
    height: 505px;
    background-color: #023233;
    filter: blur(170px);
    opacity: 1;
    mix-blend-mode: screen;
    left: 4%;
    top: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.phonebx{
position: absolute;
    right: -10%;
    width: 25%;
top:18%
}
.zi6wj {
  width: 34%;
}
/* Background Gradients */
.bg-gradient-hero {
    background: radial-gradient(circle at top right, rgba(79, 70, 229, 0.15) 0%, transparent 40%),
                radial-gradient(circle at bottom left, rgba(20, 184, 166, 0.1) 0%, transparent 40%);
}
.worksbg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}
.bg-gradient-services {
    background: linear-gradient(to bottom, #0a0a0a, #111827);
}

.bg-gradient-process {
    background: linear-gradient(to bottom, #111827, #0f172a);
}

.bg-gradient-work {
    background: linear-gradient(to bottom, #0f172a, #1e1b4b);
}

/* Glassmorphism Cards */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Device Mockup Styles */
.device-mockup-container {
    perspective: 1000px;
}

.laptop-screen {
    background: #000;
    border-radius: 12px 12px 0 0;
    border: 8px solid #1a1a1a;
    border-bottom: none;
    overflow: hidden;
    position: relative;
}

.phone-screen {
    background: #000;
    border-radius: 24px;
    border: 6px solid #1a1a1a;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(to right, #fff, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Process Line */
.process-line {
    position: absolute;
    top: 24px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: repeating-linear-gradient(to right, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 10px, transparent 10px, transparent 20px);
    z-index: 0;
}

/* Mobile Menu */
#mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#mobile-menu.open {
    opacity: 1;
    pointer-events: auto;
}
#mobile-menu .menu-panel {
    width: 100vw;
    height: 100vh;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.overflow-hidden {
    overflow: hidden;
}
#menu-close{
        top: 20px;
        right: 20px;
    }

@media (min-width: 64rem) {
    #mobile-menu {
        display: none !important;
    }
    #mobile-menu.open {
        display: block !important;
    }
    
}

@media (max-width: 850px) {
.process-line { display: none; }
    
    
.device-mockup-container img{
    max-width: 89%;
}    
.phonebx {
    right: 0%;
    width: 21%;
}
.mobnotabs {
    position: relative!important;
    padding-top: 5px;
}    
}


@media (max-width: 350px) {

.text-5xl{
    font-size: 2.5rem;
}

    
    
}