.illustration {
            width: 100%;
            max-width: 600px;
            height: auto;
            position: relative;
            z-index: 1;
        }



.technology_slder_block_01{ width: 80%; margin-left: auto; margin-top: 35px; position: relative;}




.swiper-navigation{ position: absolute; bottom: 10px; left: 13%;}

.cloud_left_block{ width: 50%;}
.cloud_right_block{ width: 50%;}
.cloud_thumbs_list{ margin: 0; padding: 0; margin-top: 45px;}
.cloud_thumbs_list li{ list-style: none; padding-top: 10px; padding-bottom: 10px;}
.cloud_thumbs_list li a{ font-size: 22px; color: #e3adfc; font-weight: 200;}
.cloud_thumbs_list li.active a{ color: #fff; font-size: 36px; }
.cound_block_01{ margin: 0 -2%; padding: 0; display: flex;   justify-content: space-between;}
.cound_block_01 li{ line-height: normal;   padding-top: 35px; padding-bottom: 35px; position: relative; padding-left:2%; padding-right:2%;}
.cound_block_01 li h3{ margin-bottom: 0; }
.cound_block_01 li p{  font-size: 20px;}
/* .cound_block_01 li::after{ content: ""; display: block; width: 2px; height: 100%;
     position: absolute; right:-29%; top: 0;
   
    } */

.line{  position: absolute; left: 0; width: 2px; top: 0; width: 2px; display: flex;   height: 100%;  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(151, 71, 255, 1) 48.076921701431274%,
    rgba(255, 255, 255, 1) 100%
  );}




.cloud_thumbs_list_logo{ display: flex; flex-wrap: wrap; gap: 2.3%;  }
.cloud_thumbs_list_logo li{    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; aspect-ratio: 1/1; list-style: none; margin-top: 10px; margin-bottom: 10px; width: 12.3%;  list-style: none;   background: #fff; border: solid 1px #e4e6ff;}
.cloud_thumbs_list_logo li a{ font-size: 22px; color: #e3adfc; font-weight: 200;}
.cloud_thumbs_list_logo li.active a{ color: #fff; font-size: 36px; }

.cloud_thumbs_list_logo li img{  max-width: 100%; max-height: 100%;}










        /* Responsive Media Queries */
        @media only screen and (max-width: 1650px) {
         
            .title {
                font-size: 44px;
            }
            .description {
                font-size: 15px;
            }
        }

        @media only screen and (max-width: 1280px) {
           
            .title {
                font-size: 40px;
                margin-bottom: 28px;
            }
            .description {
                font-size: 15px;
            }
            .text_block_technology h3{ font-size: 28.410255px;}
        }

        @media only screen and (max-width: 1119px) {
          
            .title {
                font-size: 36px;
                margin-bottom: 26px;
            }
            .description {
                font-size: 14px;
            }
        }

        @media only screen and (max-width: 1080px) {
          
            .title {
                font-size: 34px;
                margin-bottom: 24px;
            }
            .description {
                font-size: 14px;
            }
        }

        @media only screen and (max-width: 991px) {
         
         
            
        
            
            .title {
                font-size: 32px;
                margin-bottom: 22px;
                text-align: center;
            }
            
            .description {
                font-size: 14px;
                text-align: center;
            }
        }

        @media only screen and (max-width: 870px) {
           
            .title {
                font-size: 30px;
                margin-bottom: 20px;
            }
            
            .description {
                font-size: 13px;
            }
            
         
        }

        @media only screen and (max-width: 768px) {
            
            
            .title {
                font-size: 28px;
                margin-bottom: 18px;
            }
            
            .description {
                font-size: 13px;
            }
            
            
        }

        @media only screen and (max-width: 640px) {
          
            
            .title {
                font-size: 26px;
                margin-bottom: 16px;
            }
            
            .description {
                font-size: 12px;
            }
            
         
           
          
        }

        @media only screen and (max-width: 570px) {
        
            
            .title {
                font-size: 24px;
                margin-bottom: 15px;
            }
            
            .description {
                font-size: 12px;
            }
            
           
        }

        @media only screen and (max-width: 480px) {
           
            
            .title {
                font-size: 22px;
                margin-bottom: 14px;
            }
            
            .description {
                font-size: 11px;
            }
            
           
        }

        @media only screen and (max-width: 300px) {
           
            
            .title {
                font-size: 20px;
                margin-bottom: 12px;
            }
            
            .description {
                font-size: 10px;
            }
            
           
        }

        /* Cloud Storage Illustration CSS */
        .cloud-illustration {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .phone-container {
            position: relative;
            transform: perspective(1000px) rotateX(10deg) rotateY(-15deg);
        }

        .phone {
            width: 300px;
            height: 180px;
            background: #ffffff;
            border-radius: 25px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

        .phone-screen {
            width: 90%;
            height: 80%;
            background: #f8f9ff;
            border-radius: 15px;
            margin: 10% auto;
            position: relative;
        }

        .progress-bars {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
        }

        .progress-bar {
            height: 6px;
            background: #e5e7eb;
            border-radius: 3px;
            margin-bottom: 8px;
            position: relative;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: #6366f1;
            border-radius: 3px;
            animation: progress 2s ease-in-out infinite;
        }



        
   
       
 
        /* Responsive adjustments for illustration */
        @media only screen and (max-width: 991px) {
            .phone {
                width: 250px;
                height: 150px;
            }
            
            .servers {
                right: -80px;
                top: -40px;
            }
            
            .server {
                width: 100px;
                height: 65px;
            }

            .swiper-navigation{    left: 8%;}
        }

        @media only screen and (max-width: 768px) {
            .phone {
                width: 200px;
                height: 120px;
            }
            
            .servers {
                right: -60px;
                top: -30px;
                gap: 10px;
            }
            
            .server {
                width: 80px;
                height: 50px;
            }
            
            .cloud {
                width: 80px;
                height: 48px;
                top: -60px;
            }
             .swiper-navigation{   position: unset;}
             .technology_slder_block_01{ width: 100%; margin-top: 12px; margin-bottom: 12px;}
        }

        @media only screen and (max-width: 480px) {
            .phone {
                width: 160px;
                height: 100px;
            }
            
            .servers {
                right: -50px;
                top: -25px;
            }
            
            .server {
                width: 65px;
                height: 40px;
            }
        }
 
        /* Media Queries */
        @media only screen and (max-width: 1650px) {
  
        }

        @media only screen and (max-width: 1280px) {
             
        }

        @media only screen and (max-width: 1119px) {
    
        }

        @media only screen and (max-width: 1080px) {
      
        }

        @media only screen and (max-width: 991px) {
           
        }

        @media only screen and (max-width: 870px) {
          
        }

        @media only screen and (max-width: 768px) {
           
        }

        @media only screen and (max-width: 640px) {
         
        }

        @media only screen and (max-width: 570px) {
       
        }

        @media only screen and (max-width: 480px) {
           
        }

        @media only screen and (max-width: 300px) {
             
        }