/*@font-face {
        font-family: "WF Visual Sans";
        src: url("font/WFVisualSansVF.ttf") format("truetype"),
          url("font/WFVisualSansVF.ttf") format("truetype");
        font-style: normal;
      }*/
      :root {
          --primary-color: #ff2a40;
          --primary-dark: #118464;
          --text-dark: #1b1b1b;
          --text-muted: #666666;
          --section-bg: #f7f9fb;
          --soft-primary: #e7f0ff;
          --card-hover: #f1f3f5;
          --card-border: #dfe3e8;
          --accent: #0a53ff;
          --muted: #98a2b3;
        }
     
      body {
        color: var(--text-dark);
        scroll-behavior: smooth;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-weight: 800;
      }

  section.herosection:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, 0.8);
}

.field {
    border-radius: 2.5rem;
    padding: 1.2rem 2.2rem 1rem 3.5rem;
    width: 100%;
    border: none;
    position: relative;
}

.feature-card img {
    margin-bottom: 15px;
    transition: filter 0.3s ease;
}

.feature-card:hover img {
    /* Make the image fully white */
    filter: brightness(0) invert(1);
}

section#hero {
    padding-top: 12rem;
    padding-bottom: 7rem;
}   
    .hero-cta form {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        width:100%;
    }
       .fieldButton{
            position: absolute;
            background: #ff2a40;
            color:#fff;
                right: 0.3rem;
        border-radius:100px;
            /*padding: 9px 23px;*/
          padding: 0.8rem 1.7rem;
       }
       .fieldButton:hover{
           background:#ff2a40;
           color:#fff;
       }
       
       .field {
            border-radius: 2.5rem;
            padding: 1.2rem 2.5rem 1.2rem 3.5rem;
            width: 100%;
            border: none;
            position: relative;
        }
       
       section.herosection
       {
           position:relative;
            background:url('/img/homepagebg-02.webp') no-repeat !important;           
            background-size:cover !important;
            overflow:hidden;
       }
       section.herosection:before
       {
           content:'';
           position:absolute;
           left:0;
           top:0;
           width:100%;
           height:100%;
           background:rgb(0,0,0,0.8);
       }
       section#hero .mainfeild{
           width:100%;
           max-width:32.5rem;
           margin:auto;
       }
       section#hero .mainfeild:before {
            content: "";
            background: url(/img/pencil1.png) no-repeat;
            background-size: contain;
            position: absolute;
            width:23px;
            height:23px;
            left: 20px;
            top: 50%;
            z-index: 1;
            transform: translateY(-50%);
        }
        
         /* How We Do */
        #how-we-do {
            padding: 70px 0;
            background: #ffffff;
            padding-bottom: 82px;
        }
        
        #portfolio {
    padding: 70px 0;
    background: var(--section-bg);
    padding-bottom: 82px;
    }
    section.reviewsectiontwo
    {
        padding-top:70px !important;
    }
    
     section.portfoliobanner{
     height: 400px;  
       position: relative;
        background: url(/img/portfoliobanner-bg-image.webp) no-repeat !important;
        background-size: cover !important;
        overflow: hidden;
     
    }
    
    section.portfoliobanner:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgb(0, 0, 0, 0.8);
    }
    
    section.portfoliobanner .absolute-center {
        position: absolute;
        top: 61%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .pricing-section1{
     padding: 70px 0 0;
    }
    
    .aboutbanner {
    position: relative;
    background: #000;
    height: 400px;
}
section.aboutbanner h1
{
    font-size: 3.5rem;
    font-weight: 800;
}
section.animatedlogos h1
{
    font-size: 3.5rem;
    font-weight: 800;
}
section.animatedlogos p
{
    margin-bottom:38px;
}
section.animatedlogos
{
    position:relative;
    background:#000;
    height:100vh;
    overflow:hidden;
}
section.animatedlogos .btn-lg
{
    font-size:1rem;    
}
section.animatedlogos:before
{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgb(0,0,0,0.8);
    z-index:1;
}
section.animatedlogos video
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
section.pricing-section2
{
    padding:70px 0 70px;
}

section.animatedlogos .absolute-center
{
    position:absolute;
    top:60%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:1;
}
section.why-choose-section 
{
    position:relative;
    padding:70px 0;
}
section.why-choose-section .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

        section.why-choose-section .why-card {
            background: #fff;
            border: 1px solid #eee;
            border-radius: 16px;
            padding: 35px 25px;
            height: 100%;
            transition: all 0.3s ease;
            text-align: center;
        }

        section.why-choose-section .why-card:hover {
            border-color: #ff2a40;
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(255, 42, 64, 0.12);
        }

        section.why-choose-section .why-card .icon {
            width: 80px;
            height: 80px;
            background: #ff2a40;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
        }

        section.why-choose-section .why-card .icon i {
            font-size: 32px;
            color: #fff;
        }

        section.why-choose-section .why-card h4 {
            font-size: 20px;
            font-weight: 700;
            color: #222;
            margin-bottom: 15px;
        }

        section.why-choose-section .why-card p {
            font-size: 14px;
            color: #666;
            margin: 0;
            line-height: 1.7;
        }
        
        .features-section {
            padding: 80px 0;
            background: #f8f9fa;
        }

        .feature-box {
            background: #fff;
            border-radius: 12px;
            padding: 35px 25px;
            text-align: center;
            height: 100%;
            transition: all 0.3s ease;
            border: 1px solid #eee;
        }

        .feature-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
        }

        .feature-box .icon {
            width: 70px;
            height: 70px;
            background: #ff2a40;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }

        .feature-box .icon i {
            font-size: 28px;
            color: #fff;
        }

        .feature-box h4 {
            font-size: 18px;
            font-weight: 700;
            color: #222;
            margin-bottom: 12px;
        }

        .feature-box p {
            font-size: 14px;
            color: #666;
            margin: 0;
            line-height: 1.6;
        }
         .animation-types-section {
            padding: 80px 0;
            background: #eee;
        }

        .type-card {
            background: #fff;
            border-radius: 12px;
            padding: 40px 30px;
            height: 100%;
            transition: all 0.3s ease;
            border: 1px solid #ff2a40;
            position: relative;
            overflow: hidden;
        }

        .type-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #ff2a40, #ff6b6b);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
        
        .type-card .icon {
            width: 70px;
            height: 70px;
            background: #ff2a40;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
        }

        .type-card .icon i {
            font-size: 28px;
            color: #fff;
        }

        .type-card h4 {
            font-size: 22px;
            font-weight: 700;
            color: #222;
            margin-bottom: 15px;
        }

        .type-card p {
            font-size: 14px;
            color: #666;
            margin: 0;
            line-height: 1.7;
        }
        .btn-cta-white {
            display: inline-block;
            background: #fff;
            color: #ff2a40;
            padding: 16px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 16px;
            transition: all 0.3s ease;
            margin: 5px;
        }
    
        .btn-cta-white:hover {
            background: #222;
            color: #fff;
            transform: translateY(-3px);
        }
         section.animatedvideos h1
        {
            font-size: 3.5rem;
            font-weight: 800;
        }
        section.animatedvideos p
        {
            margin-bottom:38px;
        }
        section.animatedvideos .btn-lg
        {
            font-size:1rem;
        }
        section.animatedvideos
        {
            position:relative;
            /* background:#000; */
            height:100vh;
            overflow:hidden;
        }
        section.animatedvideos .absolute-center
        {
            z-index:1;
            top:53%;
        }
        section.animatedvideos
        {
            position:relative;
        }
        section.animatedvideos:before
        {
            content:'';
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            background:rgb(0,0,0,0.8);
            z-index:1;
        }
        section.animatedvideos video
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            width:100%; 
            height:100%;
        }
    
.aboutbanner {
     position: relative;
    background: url(/img/aboutus-bannerbgimage.webp) no-repeat !important;
    background-size: cover !important;
    overflow: hidden;
}  
section.amazonsection
{
    position: relative;
    background: url('/img/amazonbanner.webp') no-repeat;
    background-size:cover;
    height: 100vh;
}
section.amazonsection h1
{
    font-size: 3.5rem;
    font-weight: 800;
}
section.amazonsection:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, 0.8);
}
    
section.amazonsection .absolute-center {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
}

section.aboutbanner:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, 0.8);
}
    
    .absolute-center {
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translate(-50%, -50%);
}
section.contanctbannerimg{
       position: relative;
    background: url(/img/contactusbanner-bg-image.webp) no-repeat !important;
    background-size: cover !important;
    overflow: hidden; 
    }
    section.contanctbannerimg .absolute-center
    {
        top: 61%;
        left: 50%;
    }

    section.aboutus-section
    {
        padding:70px 0;
    }
    
    section.contancttwobanner{
        position: relative;
        background: #000;
        background-size: cover !important;
        overflow: hidden; 
        height:400px;
        }
         section.contancttwobanner h1 {
        font-size: 3.5rem;
        font-weight: 800;
    }
        section.contancttwobanner .absolute-center
        {
            top: 61%;
            left: 50%;
        }
        
        .portfoliocontent1 h3
        {
            font-weight: 800;
            font-size: 2.5rem;
            width: 100%;
            max-width: 720px; 
        }
        .service-img {
            max-width: 100%;
        }
        
        section.portfolio2
        {
            padding:70px 0 70px 0;
        }
        
        section.why-work-section3 {
            padding: 70px 0;
            background: #f8f9fa;
        }

     .why-card2 {
            background: #fff;
            border-radius: 12px;
            padding: 40px 30px;
            height: 100%;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid #ff2a40;
        }

        

       .why-card2 .icon {
            width: 80px;
            height: 80px;
            background: #ff2a40;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
        }

        .why-card2 .icon i {
            font-size: 32px;
            color: #fff;
        }

       .why-card2 h4 {
            font-size: 20px;
            font-weight: 700;
            color: #222;
            margin-bottom: 15px;
        }

       .why-card2 p {
            font-size: 14px;
            color: #666;
            margin: 0;
            line-height: 1.7;
        }
        .cta-section {
            padding: 80px 0;
            background: #ff2a40;
        }
        .cta-section .btn-cta
        {
            margin-bottom:15px;
        }

        .cta-section h2 {
            font-size: 36px;
            font-weight: 800;
            color: #fff;
            margin-bottom: 15px;
        }

        .cta-section p {
            color: rgba(255, 255, 255, 0.9);
            font-size: 18px;
            margin-bottom: 30px;
        }

        .btn-cta {
            display: inline-block;
            background: #fff;
            color: #ff2a40;
            padding: 16px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .btn-cta:hover {
            background: #000;
            color: #fff;
            transform: translateY(-3px);
        }

        /* Contact Info Card */
        .contact-info-card {
            background: linear-gradient(135deg, #ff2a40 0%, #ff6b6b 100%);
            border-radius: 20px;
            padding: 40px;
            color: #fff;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .contact-info-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            border-radius: 50%;
        }

        .contact-info-card h3 {
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 30px;
            position: relative;
            z-index: 2;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            margin-bottom: 25px;
            position: relative;
            z-index: 2;
        }

        .contact-item:last-child {
            margin-bottom: 0;
        }

        .contact-icon {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .contact-icon i {
            font-size: 20px;
            color: #fff;
        }

        .contact-details h5 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
            color: #fff;
        }

        .contact-details p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
            margin: 0;
            line-height: 1.6;
        }

        .contact-details a {
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .contact-details a:hover {
            color: #fff;
        }
    
    /* Progress / Value area */
    .value-item{
      margin-bottom:18px;
    }
    .value-item h4{
      display:flex;
      justify-content:space-between;
      font-size:0.9rem;
      margin-bottom:6px;
      color:var(--vl-dark);
      font-weight:500;
    }
    .progress{
      height:9px;
      background:#e5edf7;
      border-radius:999px;
      overflow:hidden;
    }
    .progress-bar{
      background:#ff2a40;
      border-radius:999px;
    }
    
    section.aboutus-section .section-title
    {
        text-align:left;
       
    }
    section.aboutus-section  .section-title h2
    {
        margin-bottom:12px !important;
    }
    section.aboutus-section .section-title p , .section-title h2
    {
         margin:0px !important;
    }
    section.portfolio-section .section-title p , .section-title h2
    {
        width:100%;
        max-width:100%;
        min-width:100%;
    }
    section.faq-section
    {
        padding:70px 0 0 !important;
    }
    section.faq-section2
    {
        padding:0px 0 70px !important;
    }
    section.faq-sectionthree
    {
        padding:70px 0 70px !important;
    }
    .mt20
    {
        margin-top:54px;
    }
    .mt21
    {
        margin-top:75px;
    }
section.animatedvideos01 .absolute-center
{
    top:56%;    
}
section.animatedvideos01  h1
{
    font-size:3.5rem;
}
section.everything-section
{
    padding:70px 0;
}
section.everything-section.desktop
{
    display:block;    
}
section.everything-section.mobile
{
    display:none;    
}
section.everything-section .section-title
{
    text-align:left;
}
section.everything-section .section-title p
{
    margin:10px 0px 0px 0px;
    color:#000;
}
.everything-content ul
{
    padding:0px;
}
.everything-content ul li 
{
    margin-bottom: 7px;
    list-style: none;
    display: flex;
    align-items: center;
}
.everything-content ul li i {
    margin-right: 5px;
    background: #ff2a40;
    border-radius: 100px;
    width: 18px;
    height: 18px;
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eveimg
{
    display:block;
    width:500px;
    border-radius:12px;
    margin:auto;
}
    section.animatedvideos01  h1, section.animatedvideos01  p
{
    color:#fff;
}
    section.animatedvideos01
    {
        position:relative;
        background:url('/img/bookbanner.webp') no-repeat;
        background-size:cover;
        height:100vh;
    }
    section.animatedvideos01:before
    {
        content:'';
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:rgb(0,0,0,0.8);
    }
    .absolute-center
    {
        position:absolute;
        top:60%;
        left:50%;
        transform:translate(-50%,-50%);
    }
    
    
 .framework-section {
            padding: 80px 0;
            background: #fff;
        }

        .framework-card {
            text-align: center;
            padding: 40px 25px;
            background: #fff;
            border: 1px solid #ff2a40;
            border-radius: 12px;
            height: 100%;
            transition: all 0.3s ease;
            position: relative;
        }

        .framework-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: #ff2a40;
            border-radius: 20px 20px 0 0;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .framework-card .step-num {
            width: 50px;
            height: 50px;
            background: #ff2a40;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 20px;
            font-weight: 700;
            color: #fff;
        }

        .framework-card h4 {
            font-size: 20px;
            font-weight: 700;
            color: #222;
            margin-bottom: 15px;
        }

        .framework-card p {
            font-size: 14px;
            color: #666;
            margin: 0;
            line-height: 1.7;
        }
         .services-section1 {
            padding: 80px 0;
            background: #000;
        }

        .services-section1 .section-heading h2 .white {
            color: #fff;
        }

        .services-section1 .section-heading p {
            color: rgba(255, 255, 255, 0.8);
        }

        .service-badge {
            display: inline-block;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            padding: 14px 25px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            margin: 8px;
            transition: all 0.3s ease;
        }

        .service-badge:hover {
            background: #ff2a40;
            border-color: #ff2a40;
            transform: translateY(-3px);
        }

        .service-badge i {
            margin-right: 8px;
            color: #ff2a40;
        }

        .service-badge:hover i {
            color: #fff;
        }
     .award-section {
            padding: 60px 0;
            background: var(--section-bg) ! IMPORTANT;
        }
        
        /* Main Card */
        .award-card {
            background: #fff;
            border: 3px solid #ff3b3b;
            border-radius: 12px;
            padding: 40px 30px;
            position: relative;
            overflow: hidden;
        }

        /* Best Seller Ribbon */
        .best-seller {
            position: absolute;
            top: 20px;
            right: -39px;
            background: #222;
            color: #fff;
            padding: 8px 40px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            transform: rotate(45deg);
            letter-spacing: 1px;
            z-index: 10;
        }

        /* Package Info */
        .package-info h2 {
            font-size: 28px;
            font-weight: 700;
            font-style: italic;
            color: #000;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .package-info .label {
            font-size: 14px;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 5px;
        }

        .package-info .price {
            font-size: 48px;
            font-weight: 700;
            color: #ff2a40;
        }
        
           section.logodesign1 {
                position: relative;
                background: url(/img/logodesign-bannerbgimage.webp) no-repeat !important;
                background-size: cover !important;
                overflow: hidden;
                height:100vh;
            }
            section.logodesign1 .absolute-center
            {
                top:54.5%;
            }
            
            section.logodesign1.ai-hero-section .lead {
                z-index: 3;
                font-size: 1.25rem;
                color: rgba(255, 255, 255, .9);
                max-width: 700px;
                margin: 0 auto;
                z-index: 2;
                position: relative;
            }
            
            section.logodesign1:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgb(0, 0, 0, 0.8);
            }
            section.logodesign1 {
                position: relative;
                background: #000;
                
            }
            section.mobileapplication .section-title h2, section.mobileapplication .section-title p
    {
        max-width:100%;   
    }
    section.mobileapplication .section-title h2, section.mobileapplication .section-title p
    {
        color:#fff;
    }
    .mobileapplication
    {
        position:relative;
        background:#000;
        height:100vh;
    }
    .mobileapplication .absolute-center
    {
        position:absolute;
        top:55%;
        left:50%;
        transform:translate(-50%,-50%);
    }
    .services-section {
        padding: 80px 0;
        background: #000;
    }

    .services-section .section-heading h2 .white {
        color: #fff;
    }
    section.mobileapplication h1, section.mobileapplication p
    {
        color:#fff;
    }
   
    section.mobileapplication h1
    {
            font-size: 3.5rem;
            font-weight: 800;
    }
    .services-section .section-heading p {
        color: rgba(255, 255, 255, 0.8);
    }

    .service-badge {
        display: inline-block;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        padding: 14px 25px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 500;
        margin: 8px;
        transition: all 0.3s ease;
    }

    .service-badge:hover {
        background: #ff2a40;
        border-color: #ff2a40;
        transform: translateY(-3px);
    }

    .service-badge i {
        margin-right: 8px;
        color: #ff2a40;
    }

    .service-badge:hover i {
        color: #fff;
    }
    
    .services-section {
        padding: 80px 0;
        background: #fff;
    }

    .service-card {
        background: #fff;
        border: 1px solid var(--primary-color);
        border-radius: 12px;
        padding: 40px 30px;
        height: 100%;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .service-card .icon {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 25px;
        font-size: 36px;
    }

    .service-card .icon.android {
        background: linear-gradient(135deg, #3DDC84, #00A86B);
        color: #fff;
    }

    .service-card .icon.ios {
        background: linear-gradient(135deg, #333, #000);
        color: #fff;
    }

    .service-card .icon.flutter {
        background: linear-gradient(135deg, #02569B, #0175C2);
        color: #fff;
    }

    .service-card .icon.react {
        background: linear-gradient(135deg, #61DAFB, #00D8FF);
        color: #222;
    }

    .service-card h4 {
        font-size: 22px;
        font-weight: 700;
        color: #222;
        margin-bottom: 15px;
    }

    .service-card p {
        font-size: 14px;
        color: #666;
        margin: 0;
        line-height: 1.8;
    }
    
     section.solutions-section .section-title h2, section.solutions-section .section-title p
    {
        max-width:100%;
    }
      .solutions-section {
            padding: 80px 0;
            background: #f8f9fa;
        }

        .solution-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            height: 100%;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        }

        .solution-card .card-header {
            background: #ff2a40;
            padding: 30px;
            text-align: center;
            height:187px;
        }

        .solution-card .card-header i {
            font-size: 50px;
            color: #fff;
            margin-bottom: 15px;
        }

        .solution-card .card-header h4 {
            font-size: 22px;
            font-weight: 700;
            color: #fff;
            margin: 0;
        }

        .solution-card .card-body {
            padding: 30px;
        }

        .solution-card .card-body p {
            font-size: 14px;
            color: #666;
            margin: 0;
            line-height: 1.8;
        }

        .solution-card .card-body .btn-learn {
            display: inline-block;
            margin-top: 20px;
            color: #ff2a40;
            font-weight: 600;
            font-size: 14px;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .solution-card .card-body .btn-learn:hover {
            color: #222;
        }

        .solution-card .card-body .btn-learn i {
            margin-left: 5px;
            transition: transform 0.3s ease;
        }

        .solution-card .card-body .btn-learn:hover i {
            transform: translateX(5px);
        }


        /* Features List */
        .features-column h3 {
            font-size: 18px;
            font-weight: 700;
            color: #222;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
        }

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

        .features-list li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 15px;
            font-size: 14px;
            color: #222;
        }

        .features-list li i {
            color: #ff3b3b;
            font-size: 16px;
            margin-top: 2px;
            width: 20px;
            flex-shrink: 0;
        }

        /* Guarantee Section */
        .guarantee-list {
            list-style: none;
            padding-left: 0;
            margin-bottom: 30px;
        }

        .guarantee-list li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 18px;
            font-size: 14px;
            font-weight: 600;
            color: #222;
        }

        .guarantee-list li i {
            color: #ff2a40;
            font-size: 18px;
            margin-top: 2px;
        }

        /* Order Button */
        .order-btn {
                background: #ff2a40;
                border: none;
                color: #ffffff;
                font-weight: 600;
                padding: 0.65rem 1.6rem;
                border-radius: 50px;
                transition: all 0.2s 
            ease-in-out;
            text-decoration:none;
            text-transform:capitalize;
        }
 section.branding
        {
            padding-top: 4rem;
            padding-bottom: 6rem;
        }
        section.videoanimation
        {
            padding-top: 4rem;
            padding-bottom: 6rem;
        }
        .bg-white
        {
            background:#fff !important;
        }
        .logodesign-bg
        {
            padding-top: 4rem;
            padding-bottom: 6rem;            
        }
        section.logodesign
        {
            position:rleative;
            height:100vh;
        }
        section.logodesign .absolute-center
        {
            position:absolute;
            top:55%;
            left:50%;
            transform:translate(-50%,-50%);
        }
        
          section.web-design {
                position: relative;
                background: url(/img/webbanner-bg-image.webp) no-repeat !important;
                background-size: cover !important;
                overflow: hidden;
                height:100vh;
            }
            section.web-design:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgb(0, 0, 0, 0.8);
            }
        section.web-design .absolute-center
        {
            position:absolute;
            top:55%;
            left:50%;
            transform:translate(-50%,-50%);
        }
       
        .bg-gray1
        {
            background:var(--section-bg) !important;
        }
        section.reviewbanner h1
        {
            font-size: 3.5rem;
            font-weight: 800;
        }
        section.reviewbanner {
             position: relative;
            background: url(/img/reviews-bg.webp) no-repeat !important;
            background-size: cover !important;
            overflow: hidden;
        }  
        
        section.reviewbanner:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgb(0, 0, 0, 0.6);
        }
            
            section.reviewbanner .absolute-center
            {
                position:absolute;
                top:61%;
                left:50%;
                transform:translate(-50%,-50%);
            }
            section.reviewsectiontwo
            {
                padding:90px 0 70px;
            }
            .media.align-items-center.mb-3 {
                display: flex;
                align-items: center;
            }
            .media-body
            {
                margin-left:10px;
            }
    .pricebanner {
             position: relative;
            background: url(/img/pricingbannerbg-image.webp) no-repeat !important;
            background-size: cover !important;
            overflow: hidden;
        }  
        
        section.pricebanner:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgb(0, 0, 0, 0.8);
        }
         .pricebanner .absolute-center
        {
            position:absolute;
            top:62%;
            left:50%;
            transform:translate(-50%,-50%);
        }
    .about-img-1
    {
        display:block;
        width:100%;
        margin:auto;
    }
    .link-btn
    {
        padding:10px 25px;
        border-radius: 6px;
        font-weight: 400;
        background:#ff2a40;
        text-decoration:none;
        text-transform:capitalize;
        color:#fff;
    }
    #process .section-title
    {
        text-align: center;
        margin-bottom: 2.5rem;
    }
    #process .section-title h2 
    {
        font-weight: 800;
        font-size: 3rem;
        width: 100%;
        max-width: 720px;
        margin: auto !important;
    }
    #process .section-title p {
        max-width: 620px;
        margin: 0.4rem auto 0;
    }
    section.faq-section
    {
        padding:0 0 70px;
    }
    
    section.ai-hero-section
    {
        padding:120px 0 50px;
    }
    .ai-hero-section::before,.stat-box::before{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    top:0;
    left:0;
    pointer-events:none
}
.agent-visual-wrapper,.ai-hero-section,.featured,.network-diagram-mobile,.phone-screen,.stat-box{
    position:relative
}
main{
    margin-top:0!important
}
header.desktop-menu
{
    transition: all .3s;
    padding:7px;
}
header.desktop-menu.pricing-scrolled
{
    transition: all .3s;
    padding:0px;    
}
header.desktop-menu .black-logo{
    max-width:200px
}
section#hero{
    padding:123px 0 67px
}
.award-badge:hover{
    box-shadow:0 0 4px rgba(255,42,64,.5);
    border:1px solid #ff2a40
}
.love-card
{
    border-radius:12px!important
}
.love-card:hover{
    border:1px solid #ff2a40!important
}
.portfolio-item{
    border-radius:12px!important
}
.ai-hero-section{
    background:#000;
    padding:109px 0 50px;
    overflow:hidden
}
.ai-hero-section::before{
    background:radial-gradient(circle at 50% 50%,rgba(255,42,64,.1) 0,transparent 70%)
}
.ai-hero-badge{
    display:inline-flex;
    align-items:center;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(10px);
    padding:.5rem 1.2rem;
    border-radius:50px;
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
    font-weight:600;
    font-size:.9rem;
    letter-spacing:.05em
}
.ai-section-badge,.partner-logo:hover i,.pricing-card h2,.workflow-arrow,.workflow-node i{
    color:var(--primary-color)
}
.agent-phone-title i,.ai-hero-badge i{
    color:var(--primary-color);
    font-size:1rem
}
.ai-hero-section h1{
    font-size:3.5rem;
    font-weight:800;
    line-height:1.2
}
.ai-hero-section .lead{
    font-size:1.25rem;
    color:rgba(255,255,255,.9);
    max-width:700px;
    margin:0 auto
}
.ai-faq-section .btn-lg,.ai-hero-section .btn-lg{
    font-size:1rem
}
.accordion{
    border-top-left-radius:16px!important;
    border-top-right-radius:16px!important;
    border-bottom-left-radius:16px!important;
    border-bottom-right-radius:16px!important;
    overflow:hidden!important
}
.accordion-header .accordion-button{
    border-radius:0;
    overflow:hidden
}
.pricing-card{
    border-radius:12px;
    padding:1.8rem 1.4rem;
    box-shadow:0 10px 24px rgba(0,0,0,.04);
    transition:.2s ease-in-out;
    border:1px solid #ff2a40;
    background-color:#fff
}
.pricing-card.featured::before{
    content:"Recommended";
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:#ff2a40;
    color:#fff;
    font-size:.72rem;
    letter-spacing:.15em;
    text-transform:uppercase;
    padding:4px 14px;
    border-radius:999px;
    box-shadow:0 6px 14px rgba(29,78,216,.28);
    z-index:3
}
.pricing-card ul{
    overflow:hidden;
    padding-left:1.2rem
}
.pricing-card ul li{
    margin-bottom:7px
}
.ai-benefits-section,.ai-network-section,.ai-workflow-section{
    padding:70px 0;
    background:var(--section-bg)
}
.ai-section-badge{
    display:inline-block;
    background:var(--soft-primary);
    padding:.4rem 1rem;
    border-radius:50px;
    font-weight:600;
    font-size:.85rem;
    letter-spacing:.05em;
    text-transform:uppercase
}
.ai-workflow-diagram{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    padding:2rem
}
.agent-phone-mockup,.workflow-step{
    width:100%;
    display:flex;
    justify-content:center
}
.workflow-node{
    background:#fff;
    border:2px solid var(--primary-color);
    border-radius:16px;
    padding:1.5rem 2rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.75rem;
    min-width:180px;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
    transition:.3s
}
.workflow-node:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(255,42,64,.15);
    background:var(--primary-color);
    color:#fff
}
.workflow-node:hover i,.workflow-node:hover span{
    color:#fff
}
.workflow-node i{
    font-size:2rem;
    transition:.3s
}
.workflow-node span{
    font-weight:600;
    color:var(--text-dark);
    font-size:.95rem;
    transition:.3s
}
.workflow-arrow{
    font-size:1.5rem;
    padding:.5rem 0
}
.ai-chat-preview{
    display:flex;
    justify-content:center;
    align-items:center
}
.chat-preview-card{
    background:#fff;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.1);
    overflow:hidden;
    max-width:400px;
    width:100%
}
.chat-header{
    background:var(--primary-color);
    color:#fff;
    padding:1rem 1.5rem;
    display:flex;
    align-items:center;
    gap:1rem
}
.chat-avatar{
    width:40px;
    height:40px;
    background:rgba(255,255,255,.2);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem
}
.chat-messages,.partner-logo{
    flex-direction:column;
    display:flex
}
.chat-info h6{
    color:#fff;
    margin:0;
    font-size:.95rem
}
.chat-info small{
    color:rgba(255,255,255,.8);
    font-size:.8rem
}
.chat-messages{
    padding:1.5rem;
    background:#f8f9fa;
    min-height:250px;
    gap:1rem
}
.message{
    padding:.75rem 1rem;
    border-radius:12px;
    max-width:80%;
    font-size:.9rem;
    line-height:1.5
}
.message-ai{
    background:#fff;
    border:1px solid #e5e7eb;
    align-self:flex-start;
    color:var(--text-dark)
}
.message-user,.phone-message.user-msg{
    background:var(--primary-color);
    align-self:flex-end
}
.message-user{
    color:#fff
}
.message p{
    margin:0
}
.integration-partners{
    padding:2rem 0
}
.partner-logo{
    align-items:center;
    gap:.5rem;
    padding:1rem 1.5rem;
    background:#fff;
    border-radius:12px;
    border:1px solid var(--card-border);
    transition:.3s;
    min-width:120px
}
.partner-logo:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    border-color:var(--primary-color)
}
.partner-logo i{
    font-size:2rem;
    color:var(--text-muted);
    transition:color .3s
}
.partner-logo span{
    font-size:.85rem;
    font-weight:600;
    color:var(--text-dark)
}

/*@media (max-width:1920px){*/
/*section.animatedlogos {*/
/*   height: 70vh;*/
/*  }*/
  
/*  section.animatedlogos .absolute-center {*/
/*    top: 55%;*/
/*   }*/
  
/*}*/

@media (max-width:1600px){
    .pricing-section1{
        padding:60px 0 0
    }
    

}






.ai-faq-section,.ai-industry-section,.ai-services-section{
    padding:70px 0;
    background:#fff
}
.ai-service-card{
    background:#fff;
    border:1px solid var(--card-border);
    border-radius:16px;
    padding:1.5rem 1.25rem;
    height:100%;
    display:flex;
    flex-direction:column;
    transition:.3s;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
    gap:.75rem
}
.ai-service-card .service-phone-mockup{
    flex:1;
    display:flex;
    align-items:stretch;
    margin:.5rem 0
}
.ai-service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 12px 30px rgba(255,42,64,.15);
    border-color:var(--primary-color)
}
.service-icon-wrapper{
    width:50px;
    height:50px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    color:#fff;
    margin:0 auto .75rem
}
.phone-content,.phone-screen{
    height:100%;
    padding:1rem;
    display:flex
}
.phone-green,.service-icon-green{
    background:linear-gradient(135deg,#25d366 0,#128c7e 100%)
}
.phone-purple,.service-icon-purple{
    background:linear-gradient(135deg,#8b5cf6 0,#6d28d9 100%)
}
.avatar-yellow,.avatar-yellow-mobile,.phone-yellow,.service-icon-yellow{
    background:linear-gradient(135deg,#fbbf24 0,#f59e0b 100%)
}
.avatar-blue,.phone-blue,.service-icon-blue{
    background:linear-gradient(135deg,#3b82f6 0,#2563eb 100%)
}
.service-phone-mockup{
    margin:1rem 0;
    display:flex;
    justify-content:center;
    flex:1;
    min-height:280px
}
.phone-screen{
    width:100%;
    min-height:280px;
    border-radius:24px;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    overflow:hidden;
    flex-direction:column
}
.phone-content{
    background:#fff;
    border-radius:16px;
    min-height:250px;
    flex-direction:column;
    flex:1
}
.phone-header{
    display:flex;
    align-items:center;
    gap:.5rem;
    padding-bottom:.75rem;
    border-bottom:1px solid #e5e7eb;
    margin-bottom:1rem
}
.phone-header i{
    color:var(--primary-color);
    font-size:1.2rem
}
.phone-header span{
    font-weight:600;
    font-size:.9rem;
    color:var(--text-dark)
}
.phone-messages{
    display:flex;
    flex-direction:column;
    gap:.75rem;
    flex:1
}
.phone-message{
    padding:.6rem .8rem;
    border-radius:12px;
    font-size:.8rem;
    line-height:1.4;
    max-width:85%;
    background:#f3f4f6;
    color:var(--text-dark)
}
.phone-message.user-msg{
    color:#fff;
    margin-left:auto
}
.ai-service-card h5{
    font-weight:700;
    color:var(--text-dark);
    margin-bottom:.25rem;
    margin-top:.5rem
}
.service-features{
    list-style:none;
    padding:0;
    margin:0;
    flex:1
}
.service-features li{
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    margin-bottom:.5rem;
    font-size:.9rem;
    color:var(--text-muted);
    line-height:1.4
}
.agent-features li:last-child,.service-features li:last-child{
    margin-bottom:0
}
.service-description{
    font-size:.9rem;
    color:var(--text-muted);
    line-height:1.6;
    margin:0;
    flex:1
}
.service-features li i{
    color:var(--primary-color);
    font-size:.85rem;
    margin-top:.2rem;
    flex-shrink:0
}
.benefit-card,.industry-agent-card{
    height:100%;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
    transition:.3s
}
.benefit-card{
    background:#fff;
    border:1px solid var(--card-border);
    border-radius:16px;
    padding:2rem 1.5rem
}
.benefit-card:hover,.industry-agent-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(255,42,64,.15);
    border-color:var(--primary-color)
}
.agent-card-title,.benefit-title{
    font-weight:700;
    font-size:1.25rem;
    color:var(--text-dark);
    margin-bottom:1rem
}
.benefit-description{
    color:var(--primary-color);
    font-size:.95rem;
    line-height:1.6;
    margin-bottom:1.5rem;
    font-weight:600
}
.benefit-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    margin-top:1.5rem
}
.stat-box{
    background:linear-gradient(135deg,rgba(255,42,64,.1) 0,rgba(255,42,64,.05) 100%);
    border:1px solid rgba(255,42,64,.2);
    border-radius:12px;
    padding:1.5rem 1rem;
    text-align:center;
    transition:.3s;
    overflow:hidden
}
.stat-box::before{
    background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,42,64,.03) 10px,rgba(255,42,64,.03) 20px);
    opacity:.5
}
.stat-box:hover{
    background:linear-gradient(135deg,rgba(255,42,64,.15) 0,rgba(255,42,64,.08) 100%);
    border-color:var(--primary-color);
    transform:translateY(-2px)
}
.stat-number{
    font-size:2rem;
    font-weight:800;
    color:var(--primary-color);
    line-height:1.2;
    margin-bottom:.5rem
}
.agent-phone-title,.stat-label{
    color:var(--text-dark);
    font-weight:600
}
.stat-label{
    font-size:.75rem;
    line-height:1.4
}
.industry-agent-card{
    background:#fff;
    border:1px solid var(--card-border);
    border-radius:16px;
    overflow:hidden;
    display:flex;
    flex-direction:column
}
.agent-visual-wrapper{
    padding:2rem 1.5rem;
    min-height:300px;
    display:flex;
    align-items:center;
    justify-content:center
}
.agent-bg-yellow{
    background:linear-gradient(135deg,#fef3c7 0,#fde68a 100%)
}
.agent-bg-green{
    background:linear-gradient(135deg,#d1fae5 0,#a7f3d0 100%)
}
.agent-phone-screen{
    background:#fff;
    border-radius:20px;
    padding:.75rem;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    width:100%;
    min-height:280px;
    display:flex;
    flex-direction:column
}
.agent-phone-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:.75rem;
    border-bottom:1px solid #e5e7eb;
    margin-bottom:.75rem
}
.agent-phone-title{
    display:flex;
    align-items:center;
    gap:.5rem;
    font-size:.85rem
}
.agent-status{
    background:#10b981;
    color:#fff;
    padding:.25rem .5rem;
    border-radius:12px;
    font-size:.7rem;
    font-weight:600
}
.agent-phone-chat{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:.75rem;
    overflow-y:auto
}
.agent-chat-status{
    text-align:center;
    color:#10b981;
    font-size:.75rem;
    font-weight:600;
    padding:.5rem 0
}
.agent-msg-avatar,.agent-user-msg .agent-msg-text{
    background:var(--primary-color);
    color:#fff
}
.agent-message{
    display:flex;
    gap:.5rem;
    align-items:flex-start
}
.agent-message.agent-user-msg{
    flex-direction:row-reverse
}
.agent-msg-avatar{
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:.75rem;
    flex-shrink:0
}
.agent-msg-name,.agent-msg-text{
    font-size:.75rem;
    color:var(--text-dark)
}
.agent-msg-content{
    flex:1;
    max-width:80%
}
section.faq-secondsection
{
    padding:70px 0 70px 0;
}
#stats{
    padding-top:4rem!important;
    padding-bottom:4.7rem!important
}
.agent-msg-name{
    font-weight:600;
    margin-bottom:.25rem
}
.agent-msg-text{
    background:#f3f4f6;
    padding:.6rem .8rem;
    border-radius:12px;
    line-height:1.4
}
.agent-msg-time{
    font-size:.65rem;
    color:var(--text-muted);
    margin-top:.25rem;
    padding-left:.5rem
}
.agent-user-msg .agent-msg-time{
    text-align:right;
    padding-right:.5rem;
    padding-left:0
}
.agent-content{
    padding:1.5rem;
    background:#fff
}
.agent-features{
    list-style:none;
    padding:0;
    margin:0
}
.agent-features li{
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    margin-bottom:.75rem;
    font-size:.9rem;
    color:var(--text-muted);
    line-height:1.5
}
.agent-features li i{
    color:var(--primary-color);
    font-size:.5rem;
    margin-top:.5rem;
    flex-shrink:0
}
.agent-features li span{
    flex:1
}
 @media (max-width: 991px) {
            .package-info {
                text-align: center;
                margin-bottom: 30px;
            }

            .features-column {
                margin-bottom: 25px;
            }

            .guarantee-section {
                text-align: center;
            }

            .guarantee-list {
                display: block;
                text-align: left;
            }
        }
@media (max-width:991.98px){
    .ai-hero-section{
        padding:132px 0 80px
    }
    section.ai-benefits-section .benefit-card{
        padding:2rem 1.5rem 0
    }
    section.ai-benefits-section .benefit-stats{
        display:block
    }
    section.ai-benefits-section .stat-box{
        margin-bottom:20px
    }
    .ai-hero-section h1{
        font-size:2.5rem
    }
    .ai-hero-section .lead{
        font-size:1.1rem
    }
    .ai-benefits-section h2,.ai-faq-section h2,.ai-industry-section h2,.ai-network-section h2,.ai-services-section h2{
        font-size:2.25rem!important
    }
    main{
        margin-top:0!important
    }
    header.desktop-menu .navbar-nav .nav-item{
        margin-bottom:7px
    }
    header.desktop-menu .navbar-nav .nav-item:last-child{
        margin-bottom:0
    }
    .ai-service-card,.ai-workflow-diagram,.industry-agent-card{
        margin-bottom:2rem
    }
    .workflow-node{
        min-width:160px;
        padding:1.25rem 1.5rem
    }
    .stat-number,.workflow-node i{
        font-size:1.75rem
    }
    .phone-screen,.service-phone-mockup{
        min-height:260px
    }
    .phone-content{
        min-height:230px
    }
    .benefit-stats{
        gap:.75rem
    }
    .stat-box{
        padding:1.25rem .75rem
    }
    .agent-visual-wrapper{
        min-height:260px;
        padding:1.5rem 1rem
    }
    .agent-phone-screen{
        min-height:240px
    }
    .ai-network-section .text-muted{
        font-size:.95rem;
        padding:0 1rem
    }
}
.network-diagram-mobile{
    padding:1rem 0;
    background:0 0;
    margin:1rem 0
}
.network-container-mobile{
    position:relative;
    width:100%;
    min-height:300px;
    max-width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem .5rem;
    overflow:hidden
}
.network-connections-mobile,.network-connections-svg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none
}
.network-node,.network-node-mobile{
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.75rem;
    z-index:10
}
.avatar-inner-mobile,.node-avatar-mobile{
    border-radius:50%;
    display:flex;
    align-items:center
}
.node-avatar-mobile{
    width:80px;
    height:80px;
    justify-content:center;
    padding:5px;
    box-shadow:0 6px 20px rgba(0,0,0,.3);
    transition:.3s;
    position:relative
}
.node-avatar-mobile:hover{
    transform:scale(1.1);
    box-shadow:0 8px 25px rgba(0,0,0,.4)
}
.avatar-inner-mobile{
    width:100%;
    height:100%;
    justify-content:center;
    font-size:1.5rem;
    font-weight:700;
    color:#fff;
    background:#fff
}
.network-container,.node-avatar{
    align-items:center;
    position:relative
}
.avatar-border-pink-mobile{
    border:5px solid #ec4899;
    background:#fff
}
.avatar-border-yellow-mobile{
    border:5px solid #fbbf24;
    background:#fff
}
.avatar-border-purple-mobile{
    border:5px solid #8b5cf6;
    background:#fff
}
.avatar-pink,.avatar-pink-mobile{
    background:linear-gradient(135deg,#ec4899 0,#db2777 100%)
}
.avatar-purple-mobile{
    background:linear-gradient(135deg,#8b5cf6 0,#7c3aed 100%)
}
.node-label-mobile{
    background:var(--primary-color);
    color:#fff;
    padding:.5rem 1rem;
    border-radius:20px;
    font-size:.85rem;
    font-weight:600;
    white-space:nowrap;
    text-align:center;
    box-shadow:0 4px 12px rgba(255,42,64,.25)
}
.avatar-inner,.node-avatar{
    border-radius:50%;
    display:flex
}
.node-mobile-top{
    top:5%;
    left:50%;
    transform:translate(-50%,0)
}
.node-mobile-bottom-left{
    bottom:5%;
    left:25%;
    transform:translate(-50%,0)
}
.node-mobile-bottom-right{
    bottom:5%;
    right:25%;
    transform:translate(50%,0)
}
.node-center,.node-left-bottom,.node-left-middle,.node-left-top{
    transform:translate(-50%,-50%)
}
@media (max-width:575.98px){
    main{
        margin-top:0!important
    }
    header.desktop-menu .navbar-nav .nav-item{
        margin-bottom:7px
    }
    header.desktop-menu .navbar-nav .nav-item:last-child{
        margin-bottom:0
    }
    .ai-hero-badge{
        font-size:.85rem;
        padding:.4rem 1rem
    }
    .ai-hero-section .lead{
        font-size:1rem;
        padding:0 1rem
    }
    .ai-faq-section .btn-lg,.ai-hero-section .btn-lg{
        font-size:.95rem;
        padding:.75rem 1.5rem
    }
    .ai-hero-section .btn-lg{
        width:100%;
        max-width:300px
    }
    .ai-hero-section .d-flex.gap-3{
        flex-direction:column;
        align-items:center;
        gap:1rem!important
    }
    .white-logo{
        max-width:184px
    }
    .workflow-node{
        min-width:140px;
        padding:1rem 1.25rem
    }
    .partner-logo i,.workflow-node i{
        font-size:1.5rem
    }
    .agent-features li,.workflow-node span{
        font-size:.85rem
    }
    .partner-logo{
        min-width:100px;
        padding:.75rem 1rem
    }
    .ai-benefits-section,.ai-industry-section,.ai-network-section,.ai-services-section{
        padding:50px 0
    }
    .ai-benefits-section h2,.ai-industry-section h2,.ai-network-section h2,.ai-services-section h2{
        font-size:1.75rem!important
    }
    .ai-benefits-section .ai-section-badge,.ai-industry-section .ai-section-badge,.ai-network-section .section-badge,.ai-services-section .ai-section-badge{
        font-size:.75rem;
        padding:.35rem .85rem
    }
    .ai-benefits-section .text-muted,.ai-industry-section .text-muted,.ai-network-section .text-muted,.ai-services-section .text-muted{
        font-size:.9rem;
        padding:0 1rem
    }
    .phone-screen,.service-phone-mockup{
        min-height:240px
    }
    .phone-content{
        min-height:210px
    }
    .service-icon-wrapper{
        width:45px;
        height:45px;
        font-size:1.25rem
    }
    .phone-message{
        font-size:.75rem
    }
    .benefit-stats{
        grid-template-columns:1fr;
        gap:1rem
    }
    .stat-box{
        padding:1.5rem 1rem
    }
    .stat-number{
        font-size:1.75rem
    }
    .agent-card-title,.benefit-title{
        font-size:1.1rem
    }
    .benefit-description{
        font-size:.9rem
    }
    .ai-hero-section h1{
        font-size:1.6rem
    }
    .ai-hero-section{
        padding:108px 0 60px
    }
    .agent-visual-wrapper{
        min-height:240px;
        padding:1.25rem .75rem
    }
    .agent-phone-screen{
        min-height:220px
    }
    .network-diagram{
        padding:2rem 0
    }
    .network-diagram-mobile{
        padding:.5rem 0;
        margin:.5rem 0
    }
    .network-container-mobile{
        min-height:280px;
        padding:.75rem .25rem
    }
    .node-avatar-mobile{
        width:70px;
        height:70px;
        border-width:4px
    }
    .avatar-inner-mobile{
        font-size:1.25rem
    }
    .node-label-mobile{
        font-size:.75rem;
        padding:.4rem .8rem;
        white-space:normal;
        max-width:100px
    }
    .node-mobile-bottom-left{
        left:20%
    }
    .node-mobile-bottom-right{
        right:20%
    }
    .node-mobile-top{
        top:3%
    }
}
.network-diagram{
    padding:3rem 0;
    position:relative
}
.network-container{
    width:100%;
    min-height:600px;
    display:flex;
    justify-content:center
}
.node-avatar{
    width:90px;
    height:90px;
    justify-content:center;
    padding:4px;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    transition:.3s
}
.node-avatar:hover{
    transform:scale(1.1);
    box-shadow:0 8px 20px rgba(255,42,64,.3)
}
.avatar-inner{
    width:100%;
    height:100%;
    align-items:center;
    justify-content:center;
    font-size:2.5rem;
    color:#fff
}
.avatar-border-red{
    border:4px solid #ef4444;
    background:#fff
}
.avatar-border-yellow{
    border:4px solid #fbbf24;
    background:#fff
}
.avatar-border-green{
    border:4px solid #10b981;
    background:#fff
}
.avatar-border-purple{
    border:4px solid #8b5cf6;
    background:#fff
}
.avatar-border-teal{
    border:4px solid #14b8a6;
    background:#fff
}
.avatar-teal{
    background:linear-gradient(135deg,#14b8a6 0,#0d9488 100%)
}
.avatar-green{
    background:linear-gradient(135deg,#10b981 0,#059669 100%)
}
.avatar-white{
    background:linear-gradient(135deg,#f3f4f6 0,#e5e7eb 100%);
    color:var(--text-dark)
}
.node-label{
    background:var(--primary-color);
    color:#fff;
    padding:.6rem 1.2rem;
    border-radius:24px;
    font-size:.9rem;
    font-weight:600;
    white-space:nowrap;
    box-shadow:0 4px 12px rgba(255,42,64,.25);
    text-align:center;
    margin-top:.5rem
}
.node-center{
    top:50%;
    left:50%;
    z-index:20
}
.node-left-top{
    top:15%;
    left:25%
}
.node-left-middle{
    top:55%;
    left:15%
}
.node-left-bottom{
    top:85%;
    left:30%
}
.node-right-bottom,.node-right-middle,.node-right-top{
    transform:translate(50%,-50%)
}
.node-right-top{
    top:15%;
    right:25%
}
.node-right-middle{
    top:55%;
    right:15%
}
.node-right-bottom{
    top:85%;
    right:30%
}
#backToTop{
    left:20px
}


@media (max-width:768px){
 section.everything-section.desktop
{
    display:none;    
}
section.everything-section.mobile
{
    display:block;    
}

 .eveimg {
    margin: 0 auto 30px;
    }

}
@media (max-width:1366px) and (min-width:768px){
    header.desktop-menu .black-logo{
        max-width:180px
    }
    header.desktop-menu .navbar-nav .nav-link{
        font-size:12px
    }
    .network-connections-svg{
        max-width:875px;
        left:50%;
        transform:translateX(-50%)
    }
    .price-btn{
        font-size:12px;
        width:fit-content;
        margin:auto;
        display:block
    }
    #stats{
        padding-top:5rem;
        padding-bottom:5rem
    }
    #awards{
        padding:60px 0
    }
    #love{
        padding:0 0 60px
    }
    .w-75{
            width: 100%;
        }
        
 }
@media(max-width:1024px){
    .section-title h2{
       font-size: 2.25rem !important; 
    }
    
    header.desktop-menu .navbar-nav .nav-link{
        font-size:11px;
        padding:0
    }
    header.desktop-menu .navbar-nav .nav-item{
        margin-right:10px
    }
    header.desktop-menu .black-logo{
        max-width:130px
    }
    
/*animated-videos.php media queries for ipad pro starts from here*/
    section.animatedvideos {
    height: auto;   
    min-height: 600px;
    }
    
    section.mobileapplication{
          height: auto;   
     min-height: 600px; 
    }
    
    section.mobileapplication h1{
       font-size:2.563rem;   
    }
    
     section.mobileapplication p{
        font-size: 1.063rem;
    }
  
    section.animatedvideos h1{
          
         font-size:2.563rem; 
      }
      
    section.animatedvideos p{
        font-size: 1.063rem;
    }
    
/*animated-videos.php media queries for ipad pro ends here*/    
   
   
 /*animated-logos.php media queries for ipad pro starts from here*/  
 
  section.animatedlogos {
     height: auto;  
    min-height: 750px; 
    }
    
/*animated-logos.php media queries for ipad pro starts ends here*/    
    
    section.amazonsection {
        height: auto;  
    min-height: 600px;
    }
    
    section.aboutbanner h1{
        font-size:2.563rem !important;  
    }
      section.aboutbanner p{
        font-size: 1.063rem !important;
    }
    section.logodesign1{
         height: auto !important;
        min-height: 600px;  
    }
    
    .ai-hero-section h1{
         font-size:2.563rem !important;   
    }
     section.ai-hero-section p{
        font-size: 1.063rem;
    } 
    
   section.herosection {
           height: auto !important;
        min-height: 600px;
    }

    section.herosection h1{
          
         font-size:2.563rem !important; 
      }
      
      section.herosection p{
        font-size: 1.063rem;
    }  
    
    section.animatedvideos01{
     height: auto;   
     min-height: 600px;   
    }
     section.animatedvideos01 h1{
          
         font-size:2.563rem; 
      }
      
      section.amazonsection h1 {
           font-size:2.563rem;
      }
      
    section.animatedvideos01 p{
        font-size: 1.063rem;
    }
    
   .everything-content .section-title h2 {
           font-size: 2.25rem;
    }
    
    .why-work-section3 .section-title h2 {
    font-size: 2.25rem;  /* or your desired size */
    }
    
    .framework-section .section-title h2 {
    font-size: 2.25rem;  /* adjust as needed */
    }
    
   
    
    
    #stats{
        padding-top:3.6rem
    }
    .pricing-card{
        padding:1.9rem .7rem;
        font-size:13px
    }
    .pricing-card h3{
        font-size:1.2rem
    }
    .pricing-card ul{
        height:210px;
        overflow-y:scroll;
        padding-right:10px
    }
    .pricing-card ul li{
        margin-bottom:10px
    }
    .price-btn{
        font-size:12px;
        width:fit-content;
        margin:auto;
        display:block
    }
    .mt21 {
        margin-top: 97px;
    }
}
@media (max-width:992px){
    #portfolio .nav-tabs .nav-link{
        padding:.4rem 1.2rem
    }
    footer .white-logo{
        max-width:184px
    }
    .mt20, .mt21
    {
        margin:0;   
    }
}
@media (max-width:991.98px){
    .network-container{
        min-height:500px
    }
    .node-avatar{
        width:80px;
        height:80px
    }
    .avatar-inner{
        font-size:2rem
    }
    .node-label{
        font-size:.75rem;
        padding:.4rem .8rem
    }
    .node-left-top{
        left:25%;
        top:12%
    }
    .node-left-middle{
        left:12%;
        top:55%
    }
    .node-left-bottom{
        left:30%;
        top:88%
    }
    .node-right-top{
        right:25%;
        top:12%
    }
    .node-right-middle{
        right:12%;
        top:55%
    }
    .node-right-bottom{
        right:28%;
        top:88%
    }
}
@media (max-width: 767px) {
    .section-heading h1 {
        font-size: 28px;
    }

    .award-card {
        padding: 30px 20px;
    }

    .best-seller {
        top: 15px;
        right: -40px;
        font-size: 10px;
    }

    .package-info .price {
        font-size: 38px;
    }
}         
.ai-faq-accordion{
    display:flex;
    flex-direction:column;
    gap:1rem
}
.ai-faq-accordion .accordion-item{
    background:#fff;
    border:1px solid var(--card-border);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
    transition:.3s
}
.ai-faq-accordion .accordion-item:hover{
    box-shadow:0 4px 12px rgba(255,42,64,.15);
    border-color:var(--primary-color)
}
.ai-faq-accordion .accordion-item:focus-within:hover{
    border-color:var(--primary-color)
}
.ai-faq-accordion .accordion-button{
    background:#fff;
    border:none;
    padding:1.25rem 1.5rem;
    display:flex;
    align-items:center;
    gap:1rem;
    font-weight:600;
    font-size:.95rem;
    color:var(--text-dark);
    box-shadow:none;
    transition:.3s;
    border-top-left-radius:16px!important;
    border-top-right-radius:16px!important
}
.ai-faq-accordion .accordion-header{
    border-top-left-radius:16px!important;
    border-top-right-radius:16px!important
}
.ai-faq-accordion .accordion-button:not(.collapsed){
    background:#fff;
    color:var(--text-dark);
    border-bottom:1px solid var(--card-border)
}
.ai-faq-accordion .accordion-button:focus{
    box-shadow:none
}
.ai-faq-accordion .accordion-item:focus-within{
    border-color:var(--card-border)
}
.ai-faq-accordion .accordion-button i{
    color:var(--primary-color);
    font-size:.9rem;
    flex-shrink:0;
    transition:transform .3s
}
.ai-faq-accordion .accordion-button:not(.collapsed) i{
    transform:rotate(90deg)
}
.ai-faq-accordion .accordion-button span{
    flex:1;
    text-align:left
}
.ai-faq-accordion .accordion-button::after{
    display:none
}
.ai-faq-accordion .accordion-body{
    padding:1.25rem 1.5rem 1.5rem 2.5rem;
    color:var(--text-muted);
    font-size:.9rem;
    line-height:1.6;
    background:#fff
}
footer a:hover{
    color:#ff2a40!important
}
  @media(max-width:576px){
   .hero-cta form
   {
    flex-wrap:wrap;    
   }
   
   .eveimg {
    margin: 0 auto 20px;
    }
   
   section#hero .mainfeild:before
  {
    left: 20px !important;
    top: 22px !important;
  }
input.field{
    padding:0.8rem 1.7rem 0.8rem 3.4rem;
}
.fieldButton{
    position:relative;
    width:100%;
    display:block;
    margin:15px auto 0;
    right:0rem;
    border:none;
    padding: 12px 23px;
}
section.aboutbanner h1
{
    font-size:2.1rem;
}
section.contanctbannerimg h1
{
    font-size:2.1rem;
}
section.animatedlogos .bg-video
{
    width:100%;
    height:100%;
}
/*animated-videos.php media queries for mobile 576px starts from here*/

section.animatedvideos
{
  min-height: 748px;
}
section.animatedvideos h1
{
    font-size:2.1rem;    
}
section.animatedvideos01 h1
{
    font-size:2.1rem;
}

#process .section-title h2{
    font-size:2rem;
}


/*animated-videos.php media queries for mobile 576px ends here*/

section.animatedlogos h1
{
    font-size:2.1rem;
}
section.animatedvideos .absolute-center {
    top: 54%;
}
section.animatedlogos
{
    height:80vh;
}
section.animatedlogos .absolute-center
{
    top: 55.5%;
}
section.mobileapplication h1
{
    font-size:2.1rem;
}

section.amazonsection h1
{
    font-size:2.1rem;
}
section.everything-section.desktop
{
    display:none;    
}
section.everything-section.mobile
{
    display:block;    
}
section.everything-section.padding-bottom1
{
    padding-bottom:0px;
}
.mt20, .mt21
{
    margin:0;   
}

}
@media (max-width:575.98px){
    .network-container{
        min-height:400px
    }
    .node-avatar{
        width:70px;
        height:70px;
        border-width:3px
    }
    .ai-faq-section .section-title h2,.avatar-inner{
        font-size:1.75rem
    }
    .node-label{
        font-size:.7rem;
        padding:.35rem .7rem;
        white-space:normal;
        max-width:120px
    }
    .node-left-bottom,.node-left-middle,.node-left-top{
        left:5%
    }
    .node-right-bottom,.node-right-middle,.node-right-top{
        right:5%
    }
    .network-connections-svg{
        opacity:.5
    }
    .network-description{
        padding:0 1rem
    }
    .network-diagram{
        padding:1.5rem 0
    }
    .price-btn{
        font-size:12px;
        width:fit-content;
        margin:0
    }
    #portfolio .nav-tabs .nav-item,section.pricing-section1 .nav-tabs .nav-item{
        margin-right:0
    }
    .ai-faq-section{
        padding:50px 0
    }
    .ai-faq-section .section-badge{
        font-size:.75rem;
        padding:.35rem .85rem
    }
    .ai-faq-accordion .accordion-button{
        padding:1rem 1.25rem;
        font-size:.9rem
    }
    .ai-faq-accordion .accordion-body{
        padding:1rem 1.25rem 1.25rem 2rem;
        font-size:.85rem
    }
    .ai-faq-section .row.g-4{
        --bs-gutter-y:1rem
    }
}

.field {
    border-radius: 2.5rem;
    padding: 1.2rem 2.2rem 1rem 3.5rem;
    width: 100%;
    border: none;
    position: relative;
}


section#hero {
    padding-top: 12rem;
    padding-bottom: 7rem;
}   
    .hero-cta form {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        width:100%;
    }
       .fieldButton{
            position: absolute;
            background: #ff2a40;
            color:#fff;
                right: 0.3rem;
        border-radius:100px;
            /*padding: 9px 23px;*/
          padding: 0.8rem 1.7rem;
       }
       .fieldButton:hover{
           background:#ff2a40;
           color:#fff;
       }
       
       @media(max-width:576px){
           .hero-cta form
           {
            flex-wrap:wrap;    
           }
           section#hero .mainfeild:before
          {
            left: 20px !important;
            top: 22px !important;
          }
        input.field{
            padding:0.8rem 1.7rem 0.8rem 3.4rem;
        }
        .fieldButton{
            position:relative;
            width:100%;
            display:block;
            margin:15px auto 0;
            right:0rem;
            border:none;
            padding: 12px 23px;
        }
        
       }
       
       .field {
            border-radius: 2.5rem;
            padding: 1.2rem 2.5rem 1.2rem 3.5rem;
            width: 100%;
            border: none;
            position: relative;
        }
       
       section.herosection
       {
           position:relative;
            background:url('/img/homepagebg-01.webp') no-repeat !important;           
            background-size:cover !important;
            overflow:hidden;
            height:100vh;
       }
       section.herosection .absolute-center
       {
           position:absolute;
           top:55%;
           left:50%;
           transform:translate(-50%,-50%);
       }
       section.herosection:before
       {
           content:'';
           position:absolute;
           left:0;
           top:0;
           width:100%;
           height:100%;
           background:rgb(0,0,0,0.7);
       }
       section#hero .mainfeild{
           width:100%;
           max-width:32.5rem;
           margin:auto;
       }
       section#hero .mainfeild:before {
            content: "";
            background: url(/img/pencil1.png) no-repeat;
            background-size: contain;
            position: absolute;
            width:23px;
            height:23px;
            left: 20px;
            top: 50%;
            z-index: 1;
            transform: translateY(-50%);
        }
        
        /*updatedcss*/
        
         /* How We Do */
        #how-we-do {
            padding: 70px 0;
            background: #ffffff;
            padding-bottom: 82px;
        }
        
        #portfolio {
    padding: 70px 0;
    background: var(--section-bg);
    padding-bottom: 82px;
    }
    
    .pricing-section1{
     padding: 70px 0 0;
    }