.hero-bg-image-wrapper
{
    background-image: url("../../servicepage/images/bg_technology.jpg") !important;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position:absolute;
    top:0px;
    left:0px;

}

.hero-bg-overlay
{
    width: 100%;
    height: 100%;
    position:absolute;
    top:0px;
    left:0px;
    /* background-color: rgba(0,0,0,0.8); */

    background-color: rgb(2 1 16 / 70%);
}
.hero_section_title
{
    color:#fff !important;
    
    height: 2em !important;
    overflow: hidden;

}
.hero_section_title_text
{
    display: inline-block;
    top:100%;
    position: relative;

}
.hero_section_title_text_animation 
{
    animation: textrising 0.5s ease-in forwards;

}

.hero_section_title_text_animation_1
{
    animation-delay: 1s;
}
.hero_section_title_text_animation_2
{
    animation-delay: 2s;
}
.hero_section_title_text_animation_3
{
    animation-delay: 3s;
}

.hero_section_button
{

    opacity: 0;
    animation: herobutton 0.5s ease-in forwards;

    animation-delay: 4s;

    overflow: hidden;


    transition: box-shadow 0.3s ease;
    background-color: rgb(230, 230, 240);

    color: #0e0f16 !important;
    font-weight: bold;
    letter-spacing: 1.2px;

    
}

.hero_flex_button
{
    display: flex;
    justify-content: center;

    gap:20px;
    
}

.hero_section_button:hover
{
    /* box-shadow: 0 0 15px #00f7ff, 0 0 30px #00f7ff; */

    background-color: rgb(230, 230, 240);

}


.hero_section_button_text_animation 
{
    top: 100%;
    display: inline-block;
    position: relative;
    animation: textrising 0.5s ease-in forwards;

    animation-delay: 4.5s;

}



@keyframes textrising {
    0% {
        top:100%;
        opacity: 0;
        
    }
    100%{
        top:0px;
        opacity: 1;

    }
    
}

@keyframes herobutton {
    0% {
        opacity: 0;
        
    }
    100%{
        opacity: 1;

    }
    
}





.hero_section_content  > h1
{
 color:#fff;
}
.hero_section_content  > h3
{
 color:#fff;
}
.hero_section_content  > h3
{
 color:#fff;
}
.hero_section_content  > h4
{
 color:#fff;
}


.tab-btn {
    
    display: inline-block;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 0;
    padding: 0 40px;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    color: #0898E7;
    cursor: pointer;
    z-index: 5;
    -webkit-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    -ms-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
    background-color: #fff;
    border-radius: 5px; 

}

.portfolio_sub_title
{
    color:#fff;
}

.portfolio-rep-image
{

}
.portfolio-rep-image img
{
    width: 100%;
}

.services-hero-image img
{

    width:100%;

}

.tab-btn:hover {
    background-color: rgba(8, 152, 231, 0.8);
    color: #fff; }

.tab-btn.active
{
    background-color: #4FA43A;
    color:#fff;
}

.portfolio-tab-btn-container
{
    display: flex;
    justify-content: center;
    gap:20px;
    flex-wrap: wrap;
    align-items: center;

    margin-top:12px;

}

.portfolio-section{
    background-color: #26638b !important;
}

.portfolio-tab-content
{
    display: none;
}

.portfolio-tab-content.active{
    display: block;
}


.company_project_info_wrap
    {
    justify-content:center;gap:20px
    }

.company_project_info {
    width: 20%;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    margin-top: 30px; 
    border-right: 1px solid #ddd;

}

    .company_project_info_wrap .company_project_info:last-of-type
    {
        border:1px solid transparent;

    }
    @media (max-width: 767px) {
      .company_project_info {
        width: 40%; 
        border:0px solid transparent;
        box-sizing: border-box;
    
    } 
      
    .company_project_info_wrap
    {
    justify-content:center;gap:20px;
    position: relative;

    


    }

    .company_project_info_wrap::before
    {
        content: "";
        width: 100%;
        height: 1px;
        top:50%;
        left:0px;
        background-color: #ddd;
        position: absolute;
    }

    .company_project_info_wrap::after
    {
        content: "";
        width: 1px;
        height: 100%;
        top:0;
        left:50%;
        background-color: #ddd;
        position: absolute;
    }

   
    
    }
   
   
    
    
    /* @media only screen and (min-width: 576px) and (max-width: 767px) {
      .company_project_info {
        width: 33.33%; } } */
    .company_project_info .title {
      font-size: 36px;
      color:rgb(3, 3, 10);
      font-weight: bold;
    }
  
    .company_project_info .sub_title{
      font-size:18px;
    } 
      

    .single_brand_alternate_wrap
    {
        display: flex;
        justify-content: center;

        gap:8px;
    }



    /* Case Study Gallery */

    .case-study-wrapper
    {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin:0px;
        padding: 0px;
        padding-left: 2px;
        box-sizing: border-box;
    }

    .case-study-wrapper .case-study-single
    {
      flex:0 0 calc(100%/2);
      aspect-ratio: 1/1;
      background-color: salmon;
      display: flex;
      align-items: center;
      justify-content: center;
      border:1px solid #000;
      overflow: hidden;

      position: relative;

    }
    .case-study-single .case-study-image-wrapper
    {
        position: absolute;
        left: 0px;
        top:0px;
        width: 100%;
        height: 100%;
    }

   .case-study-single .case-study-image-wrapper img
   {

      width: 100%;
      height: 100%;
      object-fit: cover;
      position: relative;

   }
   .case-study-single .case-study-image-wrapper::after
   {
      content: "";
      position: absolute;
      left: 0px;
      top: 0px;

      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.4);

   }

   .case-study-wrapper .case-study-single .case-study-name
   {

      position: absolute;
      top:50%;
      left: 50%;

      font-size: 18px;
      font-weight: bold;

      color:#fff;

      max-width: 80%;

      transform: translate(-50%,-50%);
      text-align: center;

   }

   .case-study-wrapper .case-study-single .case-study-category
   {

      position: absolute;

      bottom:20px;

      left: 50%;
      text-align: center;

      background-color: rgba(0,0,0,0.5);
      

      transform: translate(-50%,0);

      padding:4px;
      border-radius: 6px;
      color:#fff;

   }

    @media (max-width: 767px) {

        .case-study-wrapper .case-study-single
        {
            flex:0 0 calc(100%/2);


        }
        .case-study-wrapper .case-study-single .case-study-category
        {
           display: none;
        }

    }

    /* End of Case Study */


    /* Start of Solution List */

    .solution-list
    {

        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin:0px;
        padding: 0px;
        gap: 20px;

        justify-content: space-between;
        

    }

    .services-section
    {

        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin:0px;
        padding: 0px;
        gap: 40px;
        
        justify-content: space-between;

    }

   

    .services-section-wrapper .services-section-single
    {


        flex:0 0 calc(100%/1 - 40px);


        position: relative;
        overflow: hidden;



      
        
    



        
    }

    .solution-list .solution-list-item
    {


        flex:0 0 calc(100%/3 - 60px);
      display: flex;
      align-items: center;

      padding: 16px 0px 16px 0px;
    
      border-bottom: 2px solid #e7d7d7;

      line-height: 20px;
      text-align: left;


        
    }


    @media (max-width: 767px) {
        .solution-list .solution-list-item
        {
            flex:0 0 calc(100%/1 - 20px);

        }
        .solution-list
    {
        justify-content: center;
    }


    }



    /* End of Solution List */



        /* Start of Content Block */

        .content-block-wrapper
        {
    
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            margin:0px;
            padding: 0px;
            gap: 40px;
            
            justify-content: space-between;
    
        }

        .content-block-wrapper-desktop
        {
            display: flex;
        }
        .content-block-wrapper-mobile
        {
            display: none;
        }
    
        .content-block-wrapper .content-block-single
        {
    
    
            flex:0 0 calc(100%/2 - 40px);


            position: relative;
            overflow: hidden;

            min-height: 200px;

            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
          
            
        
    
    
    
            
        }



        .content-block-img-wrapper
        {
            width: 100%;
            max-width: 100%;
            height: auto;
            position:relative;

            background-color: #4FA43A;
            overflow: hidden;
        }
        .content-block-img-wrapper img
        {
            max-height: 400px;
            object-fit: cover;
            width: 100%;
        }
        .content-block-content
        {
            width: 100%;
            height: auto;
            padding:20px;

            overflow: hidden;

          
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;


        }


        .content-block-image
        {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .content-block-single .title
        {
            font-size: 18px;
            font-weight: 600;
        }
        .content-block-single .description
        {
            font-size: 16px;
        }

    
    
        @media (max-width: 767px) {
            .content-block-wrapper .content-block-single
            {
                flex:0 0 calc(100%/1 - 20px);

            }

            .content-block-wrapper-desktop
            {
                display: none;
            }
            .content-block-wrapper-mobile
            {
                display: flex;

                justify-content: center;
            }

            .content-block-img-wrapper
            {
                width: 100%;
                max-width: 100%;
                height: auto;
                position:relative;
    
                background-color: #4FA43A;
                overflow: hidden;
            }
            .content-block-content
            {
              height: auto;

            }
    
    
        }
    
    
    
        /* End of Content Block */


        
        /* Start of Testimonial Section */

        .testimonial-section
        {
            background-color: red;

            color:#fff;
            padding: 20px 0px 20px 0px;

        }
        .testimonial-block-wrapper
        {
    
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            margin:0px;
            gap: 20px;

            padding:40px 0px 40px 0px;

          
            
    
        }

        .testimonial-block-wrapper .bg-cover-image
        {

        }
        .testimonial-block-wrapper .bg-overlay
        {
            background-color: rgba(0,0,0,0.7);

        }


    
        .testimonial-block-wrapper .testimonial-block-single
        {
    
    
            flex:0 0 calc(100%/2 - 40px);


          
    
        
    
    
    
            
        }

        .testimonial-block-single .quote-block
        {
            display: flex;

            gap:8px;

        }

        .testimonial-user
        {
            display: flex;
            align-items: center;
             justify-content: center;
             gap:12px;
        }

       
       


        

       

    
    
        @media (max-width: 767px) {
            .testimonial-block-wrapper .testimonial-block-single
            {
                flex:0 0 calc(100%/1 - 20px);

            }
    
    
        }
    
    
    
        /* End of Testimonial Section */



        /*Start of About us  */

         .section-about-us
         {
            background-color: #2940d3; 
            color:#fff;
            padding: 40px 0px 40px 0px;
            margin-top: 24px;
         }
                 .about-us-wrapper
        {
    
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            margin:0px;
            padding: 0px;
            gap: 40px;
            
            justify-content: space-between;
    
        }

       
    
        .about-us-wrapper .about-us-single
        {
    
    
            flex:0 0 calc(100%/2 - 40px);


            position: relative;
            overflow: hidden;

            min-height: 400px;

            color:#fff;

          
            
        
    
    
    
            
        }
        .about-us-wrapper .about-us-single > p
        {
            color:#fff;

        }
        .about-us-wrapper .about-us-single > h3
        {
            color:#fff;

        }
        .about-us-wrapper .about-us-single > h4
        {
            color:#fff;

        }



        .about-us-img-wrapper
        {
            width: 100%;
            max-width: 100%;
            height: auto;
            position:relative;

            background-color: #4FA43A;
            overflow: hidden;
        }

       

       



        
        @media (max-width: 767px) {
            .about-us-wrapper
                           {

                flex-direction:column-reverse;
                flex-wrap: nowrap;

              }

          .about-us-wrapper .about-us-single           {
                flex:0 0 calc(100%/1 - 20px);
                min-height: auto;

            }
    
    
        }

        /* End of About Us */


               /* Start of Technologies Section */

               .technologies-section
               {
                  
                   padding: 20px 0px 20px 0px;
                   color:#fff;
                   position: relative;
       
               }
               .technologies-bg-image-wrapper
               {
                   background-image: url("../../assets/images/other/technology_bg1.avif") !important;
               
                   background-repeat: no-repeat;
                   background-size: cover;
                   background-position: center;
                   width: 100%;
                   height: 100%;
                   position:absolute;
                   top:0px;
                   left:0px;
                   z-index: -1;
               
               }
               
               .technologies-bg-overlay
               {
                   width: 100%;
                   height: 100%;
                   position:absolute;
                   top:0px;
                   left:0px;
                   background-color: rgba(0,0,0,0.8);
                   z-index: -1;

               }

               .technologies-block-wrapper
               {
           
                  
                   width: 100%;
                   margin:0px;
       
                   padding:40px 0px 40px 0px;

                   text-align: center;
                
                 
                   
           
               }
       
              
       
       
           
               .technologies-block-wrapper .technologies-block-single
               {
           
           
                    width: 66%;

                    margin-left: auto;
                    margin-right: auto;
       
                 
           
               
           
           
           
                   
               }
       
              
       
              
       
              
              
       
       
               
       
              
       
           
           
               @media (max-width: 767px) {
                   .technologies-block-wrapper .technologies-block-single
                   {

                       width: 100%;

       
                   }

                   .technologies-block-wrapper
                   {
               
                      
                       width: 100%;
                       margin:0px;
           
                       padding:40px 8px 40px 8px;
    
                       text-align: left;
                       margin:0px;
                    
                     
                       
               
                   }

                   
           
           
               }
           
           
           
               /* End of technologies block Section */

               

         /* Start of Why Us Section */

         .whyus-block-wrapper
         {
     
             width: 100%;
             margin:0px;
             padding: 8px 0px 8px 0px;
             gap: 20px;
 
 
             color:#fff;
             
     
         }
 
        
 
 
     
         .whyus-flex-list 
         {
     
          display: flex;
          gap:8px; 
          align-items: center;
          margin-top: 16px;
          margin-bottom: 16px;
          flex-wrap: wrap;
         }

         .whyus-list-icon-box 
         {
           
             background-color: rgb(103, 32, 150);
             color:#fff;
             width: 48px;
             height: 48px;
             display: flex;
             justify-content: center;
             align-items: center;
             position: relative;


         }
         .whyus-list-icon-box  span
         {
            display: inline-block;
            font-size: 18px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);

         }


         .whyus-image-wrapper
         {

            width: 100%;
            max-width: 100%;
            height: auto;
            background-color: blue;

         }

         .whyus-image-wrapper img
         {
            width:100%;
            height: 100%;
            object-fit: cover;

         }

 
        
 
        
        
 
 
         
 
        
 
     
     
         @media (max-width: 767px) {
            
            .whyus-list-icon-box 
            {
              
                background-color: rgb(103, 32, 150);
                color:#fff;
                width: 48px;
                height: 48px;
                display: flex;
                justify-content: center;
                align-items: center;
                
   
   
            }
            .whyus-list-icon-box  span
            {
               display: inline-block;
               font-size: 18px;
   
            }
     
         }
     
     
     
         /* End of Why us Section */



        
 .technogy-sub-section
 {
    margin-top: 24px;
    padding: 20px;

    position: relative;
    border-radius: 12px;

    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    overflow: hidden;
 }

 .technogy-sub-section::before

 {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 8px;
    background:linear-gradient(to bottom,#00aaff,#0077cc);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-top-right-radius:12px ;
    border-top-left-radius:12px ;

 }


 .techstack-image-container
 {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px;
    align-items: center;
 }
 .techstack-image-wrap
 {
    width: 100px;

    position: relative;
    
 }

 .techstack-image-wrap:first-of-type

 {
    

 }

 .techstack-image-wrap:last-of-type

 {
    padding:20px;

    border:0px;


 }
 .techstack-image-wrap img
 {
  width: 100%;
  height: auto;
  max-height:100px;
}

@media (max-width: 767px) {
    .techstack-image-container
    {
      justify-content: center;   
    }


}




    


.typable-text-header
{
    white-space: pre-wrap;

}

.typable-text-header span
{
    opacity: 0;
    display: inline-block;
}

.typable-text-header.active span
{
  
    animation: typeIn 0.005s forwards;

    animation-delay: calc(0.2s + var(--i) *  0.05s);

}

@keyframes typeIn
{
    to{
        opacity: 1;
    }
}

.typable-text-paragraph
{
    white-space: pre-wrap;

}
.typable-text-paragraph span
{
    opacity: 0;
    display: inline-block;

}

.typable-text-paragraph.active span
{
    opacity: 0;
    display: inline-block;
    animation: typeIn 0.005s forwards;

    animation-delay: calc(1.2s + var(--i) *  0.05s);

}

@keyframes typeIn
{
    to{
        opacity: 1;
    }
}
.solution-list-animation .solution-list-item
{
    position: relative;
    overflow: hidden;

    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.solution-list-animation .icon_image_wrapper
{
    width: 60px;
    height: 60px;

    margin-right: 40px;
    
}

.solution-list-animation .icon_image_wrapper img
{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.solution-list-animation .fa-icon-wrapper
{
    font-size: 36px;
    line-height: 60px;

    margin-right: 40px;

    color: #0077cc;
    
}





.solution-list-animation .solution-list-item::after
{

    content: '';
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;

    background-color: #fff;

   



   
}

.solution-list-animation .solution-list-item.active::after
{
    animation: solutionlistanimation 0.5s ease-in forwards;

    animation-delay: 0.2s;

}

@keyframes solutionlistanimation
{
    from{
    }
    to{
        left: 100%;

    }
}


.image-reveal-animation
{
    position: relative;
    overflow: hidden;
}

.image-reveal-animation::after
{

    content: '';
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;

    background-color: #fff;

   



   
}

.aboutus-image-reveal-animation::after
{
    content: '';
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #2940d3 !important;

}

.aboutus-image-reveal-animation.active::after
{
    animation: imagereveal 0.5s ease-in forwards;

    animation-delay: 2.2s;

}

.image-reveal-animation.active::after
{
    animation: imagereveal 0.5s ease-in forwards;

    animation-delay: 2.5s;

}

@keyframes imagereveal
{
    from{
    }
    to{
        left: 100%;

    }
}


.animation-delay-level-1
{
    animation-delay: 0.3s !important;
}

.animation-delay-level-2
{
    animation-delay: 0.8s !important;
}

.animation-delay-level-3
{
    animation-delay: 4s !important;
}