
@media screen and (max-width:1580px){ 
	
    .category-top h1{
        font-size: 60px!important;
    }
}

@media screen and (max-width:1350px){ 

     .category-top h1{
         font-size: 58px!important;
        margin-bottom: 25px!important;
    }
   
}

@media screen and (max-width:1250px){

    .btn-large {
        padding: 14px 30px!important;
    }
    .workflow-item {
        padding: 10px 16px!important;
    }
    .feature-list .insight-title{
        font-size: 30px!important;
    }
    .article-content h2{
       font-size: 30px!important;
       margin: 50px 0 25px!important;

    }

      .category-top h1{
         font-size: 56px!important;        
    }
    .form-blok .wpcf7-submit{
        font-size: 17px!important;
        padding: 17px 35px!important;
    }

}
@media screen and (max-width:991px){

    .bricks-mobile-menu>li{
        border-bottom: 1px solid #18233d;
                padding-left: 10px;
    }
     .brxe-nav-menu .icon-right button {
        display: block!important;
        padding: 5px 13px !important;
         transition: all .3s ease-in-out; 
    }
    .brxe-nav-menu .sub-menu li .sub-menu{
         left: 25px !important;
    }
    .brxe-nav-menu .sub-menu .icon-right a{
        padding: 0 25px!important;
    }
    .brxe-nav-menu .sub-menu .icon-right a{
         margin-top: 10px;
        margin-bottom: 20px;
    }
    .brxe-nav-menu .bricks-mobile-menu-wrapper .sub-menu{
        margin-bottom: 10px;
    }
    .bricks-mobile-menu li.active button:not(.sub-menu li button) {
        transform: rotate(180deg);
    }
    .sub-menu li.active button{
          transform: rotate(180deg);
    }
    .line-1,.line-2,.line-3{
        width: 120px!important;
    }
     .feature-list .insight-title{
        font-size: 28px!important;
    }
    
    .category-top h1{
         font-size: 52px!important;        
    }
    .category-top p{
        font-size: 19px!important;
       
    }
    .article-content h5{
        font-size: 24px;
    }
     .article-content h5{
        font-size: 20px;
    }
  
  
}
@media screen and (max-width:767px){
    
    .pillars-container {
        max-width: 300px;
    }
    
    
    .ai-pillar {
        width: 60px;
    }
    
    .pillar-structure {
        width: 20px;
    }
    
    .pillar-segment {
        height: 25px;
    }
    
    .pillar-crown {
        width: 36px;
        height: 36px;
    }
    
    .pillar-icon {
        width: 24px;
        height: 24px;
    }
    
    .pillar-name {
        font-size: 12px;
    }
    
    .pillar-description {
        font-size: 10px;
    }
      .btn-large {
        padding: 12px 22px !important;
    }
    .process-node{
            margin-bottom: 30px!important;
    }
    .insight-title{
        font-size: 20px;
    }
    .process-line{
        left: 20px!important;
    }
   .node-marker { 
        left: 22px!important;
        width: 55px!important;
        height: 55px!important;
    }
    .node-content {
        width: 85%!important;
    }
    .process-node:nth-child(odd) .node-content {
      
        margin-left: 15% !important;
    }

    .floating-nodes .node{
        width: 60px!important;
         height: 60px!important;
    }
    .benefits-wheel{
        width: 100%!important;
        height: auto!important;
    }
    .wheel-item{
         position: relative!important;
        width: 100%!important;
        top: 0!important;
        left: 0!important;
        --rotation: none!important;
        margin-bottom: 10px;
    }
    .wheel-center {
        position: relative!important;
        top: 50px!important;
    }
    .platform-visualization {
        width: 400px!important;
        height: 400px!important;       
    }
    .virsaic-hero .ring-1 {
        width: 80%;
        height: 80%;        
    }

    .virsaic-hero .ring-2 {
        width: 120%;
        height: 120%;
        top: -15%;
        left: -15%;
       
    }
    .virsaic-hero .ring-3{
        width: 140%;
        height: 140%;
        top: -30%;
         left: -30%;
    }
     .virsaic-hero::before{
       width:300%!important;
       height: 300%!important;
    }
    .badge-pulse{
        width: 85%!important;
        height: 85%!important;
    }

    .agency-hub {
            width: 400px!important;
            height: 400px!important;
        }
      .virsaic-hero .command-center {
        width: 120px;
        height: 120px;
    }
    
   .virsaic-hero .brand-icon {
        font-size: 1.8rem;
    }
    
   .virsaic-hero .brand-text {
        font-size: 10px;
    }
    
   .virsaic-hero .workflow-card {
        width: 80px;
        height: 90px;
    }
    
   .virsaic-hero.virsaic-hero .card-engage,
   .virsaic-hero .card-prosper {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .virsaic-hero .card-engage {
        top: 30px;
    }
    
    .virsaic-hero .card-prosper {
        bottom: 30px;
    }
    
   .virsaic-hero .card-convert {
        right: 30px;
        transform: translateY(-50%);
    }
    
   .virsaic-hero .card-navigate {
        left: 30px;
        transform: translateY(-50%);
    }
    
   .virsaic-hero .card-icon {
        font-size: 1.5rem;
    }
    
   .virsaic-hero .card-label {
        font-size: 8px;
    }
    
   .virsaic-hero .card-description {
        font-size: 7px;
    }
    
   .virsaic-hero .metric-item {
        padding: 8px;
    }
    
   .virsaic-hero .metric-value {
        font-size: 12px;
    }
    
   .virsaic-hero .metric-label {
        font-size: 6px;
    }
    .metric-orbits {
        width: 350px!important;
        height: 350px!important;
    }
    
    .orbit-1 { width: 190px!important; height: 190px!important; }
    .orbit-2 { width: 250px!important; height: 250px!important; }
    .orbit-3 { width: 320px!important; height: 320px!important; }
    
    .success-explosion {
        padding: 60px 20px;
    }
     .virsaic-hero .metric-3 {
        bottom: 40px;
        left: 20px;
    }
     .feature-list .insight-title{
        font-size: 26px!important;
    }

 .featured-article .insight-meta,  .featured-article .article-tags {    
        justify-content: center;
        flex-wrap: wrap;
    }

    .subscribe-box input[type="email"]{
        width: 300px!important;
    }
     .article-content h2{
       font-size: 26px!important;
       margin: 45px 0 25px!important;

    }

    .category-top h1{
         font-size: 48px!important;        
    }
    .category-top p{
        font-size: 18px!important;
        
    }
     .form-blok .wpcf7-submit{
        font-size: 16px!important;
        padding: 16px 30px!important;
    }
     .benefits-intro {
        position: static!important;
    }
    
    
   
}

@media screen and (max-width:480px){

    .header-button{
        display: none;
    }
 .service-hero .hero-visual svg {
         width: 100%;
        height: auto;
    }
     .floating-nodes .node{
        width: 50px!important;
         height: 50px!important;
    }
    .node-content{
        padding: 25px!important;
    }
    .platform-visualization {
        width: 90%!important;
       height: 400px!important;             
    }
    .virsaic-hero .ring-1 {
        width: 60%;
        height: 60%;        
    }

.virsaic-hero .ring-2 {
    width: 100%;
    height: 100%;
    top: -10%;
    left: -10%;
   
}
    .virsaic-hero .ring-3{
        width: 120%;
        height: 120%;
        top: -20%;
         left: -20%;
    }
    .virsaic-hero::before{
       width:400%!important;
       height: 400%!important;
    }
    .badge-pulse{
        width: 65%!important;
        height:65%!important;
    }
    .visual-diagram {
        width: 95%!important;
        height: auto!important;
    }
    .monitoring-chart{
        width: 100%!important;
    }
    .metric-orbits {
        width: 300px!important;
        height: 300px!important;
    }
    
    .orbit-1 { width: 150px!important; height: 150px!important; }
    .orbit-2 { width: 200px!important; height: 200px!important; }
    .orbit-3 { width: 250px!important; height: 250px!important; }
    .virsaic-hero .card-navigate{
                left: 0;
    }
    .virsaic-hero .card-convert{
        right: 0;
    }
    .virsaic-hero .metric-1 {
        top: 20px;
        right: 20px;
    }
    .virsaic-hero .metric-3 {
        bottom: 20px;
        left: 0;
    }
     .subscribe-box input[type="email"] {
        width: 100%!important;
    }
    .subscribe-box .sub-form {
   
        flex-wrap: wrap;
        justify-content: center!important;
        align-items: center!important;
    }
    .insights-grid{
            grid-template-columns: none!important;
    }
    .article-tags .tag{
            justify-content: center;
    }
    .article-hero .categories a{
        font-size: 14px;
    }
      .article-content h2{
       font-size: 24px!important;
       margin: 40px 0 22px!important;

    }
    .article-content h3 {
        font-size: 22px!important;
        margin:35px 0 20px;
    }


     .category-top h1{
         font-size: 44px!important;   
          margin-bottom: 20px!important;     
    }
    .connection-animation {   
        width: 350px!important;
        height: 300px!important;
    }

    .form-blok .wpcf7-form div{
        width: 100%!important;
    }
     .form-blok .wpcf7-submit {       
        padding: 14px 25px !important;
    }

    .faq-accordion .accordion-title-wrapper{
            padding: 18px 22px!important;
    }
    .faq-accordion .accordion-content-wrapper{
        padding: 0 22px 25px!important;
    }
    .article-content h5{
    font-size: 18px;
}
     .article-content h6{
        font-size: 16px;
    }
    
}
@media screen and (max-width:420px){
    .ai-pillars{
        padding:0px!important;
    }
     .process-line{
        left: 10px!important;
    }
   .node-marker { 
        left: 12px!important;
        width: 50px!important;
        height: 50px!important;
    }
    .floating-nodes .node{
        width: 40px!important;
         height: 40px!important;
    }
     .workflow-item {
        padding: 10px 14px!important;
    }
    .hero-visual-box{  
        padding: 25px 20px!important;

    }
   
    .connection-animation {   
        width: 300px!important;
        height: 300px!important;
    }
        .article-content h2 {
        font-size: 22px !important;
      margin: 35px 0 20px !important;
    }

}