.services-body{
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;

margin-bottom: 40px;

}

.services-container{
    max-width: 950px;
    width: 100%;
    background-color: white;
    margin: 0 20px;
    border-radius: 16px;
    padding: 40px 50px 40px 40px;
    box-shadow: 0 5px 10px rgba(0, 0,0, 0.2);
    margin-top: 80px;
    margin-bottom: 40px;
}

.services-container .title{
    font-size: 50px;
    font-weight: 800;
   
    
}

.text p{
    margin-bottom: 20px;
}

.services-container .content {
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
}

.services-container .content .content-list{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 40%;
    margin-right: 50px;
 
    
}

.content .content-list label{
    height: 60px;
    font-size: 24px;
    font-weight: 500;
    border-radius: 12px;
    line-height: 60px;
    cursor: pointer;
    padding-left:25px;
    color: #333;
    z-index: 12;
    transition: all 0.4s ease ;
  
}

.content .content-list label:hover{
    color: hsl(221,91%,77%);
}

#itconsulting:checked ~ .content-list .itconsulting,
#webhosting:checked ~ .content-list .webhosting,
#server:checked ~ .content-list .server,
#azure:checked ~ .content-list .azure,
#network:checked ~ .content-list .network,
#widearea:checked ~ .content-list .widearea,
#office:checked ~ .content-list .office,
#training:checked ~ .content-list .training,
#system:checked ~ .content-list .system,
#disaster:checked ~ .content-list .disaster,
#cabling:checked ~ .content-list .cabling,
#database:checked ~ .content-list .database,
#security:checked ~ .content-list .security,
#more:checked ~ .content-list .more
{
    color: #fff;
}


.content .indicator{
   position: absolute;
   height: 60px;
   width: 100%; 
   top: 0;
   left: 0;
   background: hsl(221,91%,77%);
   border-radius: 12px;
   transition: all 0.4s ease;
}

#itconsulting:checked ~ .content-list .indicator{
    top:0;
}

#webhosting:checked ~ .content-list  .indicator{
    top:60px;
}
#server:checked ~ .content-list  .indicator{
    top:120px;
}
#azure:checked ~ .content-list .indicator{
    top:180px;
}
#network:checked ~ .content-list  .indicator{
    top:240px;
}
#widearea:checked ~ .content-list  .indicator{
    top:300px;
}
#office:checked ~ .content-list  .indicator{
    top:360px;
}
#training:checked ~ .content-list  .indicator{
    top:420px;
}
#system:checked ~ .content-list  .indicator{
    top:480px;
}
#disaster:checked ~ .content-list  .indicator{
    top:540px;
}
#cabling:checked ~ .content-list  .indicator{
    top:600px;
}
#database:checked ~ .content-list  .indicator{
    top:660px;
}
#security:checked ~ .content-list  .indicator{
    top:720px;
}
#more:checked ~ .content-list  .indicator{
    top:780px;
}

.services-container input[type="radio"]{
    display: none;
}

.services-container .content .services-text{
    width:60%;
    height: 100%;
}

.content .services-text .text{
    display: none;
}

.content .services-text .itconsulting{
    display: block;
}
#itconsulting:checked ~ .services-text .itconsulting,
#webhosting:checked ~ .services-text .webhosting,
#server:checked ~ .services-text .server,
#azure:checked ~ .services-text .azure,
#network:checked ~ .services-text .network,
#widearea:checked ~ .services-text .widearea,
#office:checked ~ .services-text .office,
#training:checked ~ .services-text .training,
#system:checked ~ .services-text .system,
#disaster:checked ~ .services-text .disaster,
#cabling:checked ~ .services-text .cabling,
#database:checked ~ .services-text .database,
#security:checked ~ .services-text .security,
#more:checked ~ .services-text .more
{
   display: block;
}


#webhosting:checked ~ .services-text .itconsulting,
#server:checked ~ .services-text .itconsulting,
#azure:checked ~ .services-text .itconsulting,
#network:checked ~ .services-text .itconsulting,
#widearea:checked ~ .services-text .itconsulting,
#office:checked ~ .services-text .itconsulting,
#training:checked ~ .services-text .itconsulting,
#system:checked ~ .services-text .itconsulting,
#disaster:checked ~ .services-text .itconsulting,
#cabling:checked ~ .services-text .itconsulting,
#database:checked ~ .services-text .itconsulting,
#security:checked ~ .services-text .itconsulting,
#more:checked ~ .services-text .itconsulting
{
   display: none;
}

.content .services-text .sub-title{
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 5px;
}

.content .services-text p{
    text-align:justify;
}

@media(max-width:30em){

    .services-container{
        max-width: 800px;
        width: 100%;
        height: fit-content;
        color: rgb(42, 46, 46);
        margin: 0 20px;
        border-radius: 16px;
        padding: 40px 50px 40px 40px;
        box-shadow: 0 5px 10px rgba(0, 0,0, 0.2);
        margin-top: 20px;
    }

    .services-container .title{
        text-align: center;
    }
    
    .services-container .content .content-list{
        display: flex;
        flex-direction: column;
        position: relative;
        width: 60%;
        margin-right: 20px;
     
        
    }
    .services-container .content .services-text{
        width:40%;
        height: 100%;
    }
    
    .content .content-list label{
        height: 60px;
        font-size: 20px;
        font-weight: 500;
        border-radius: 12px;
        line-height: 60px;
        cursor: pointer;
        padding-left:15px;
        color: #333;
        z-index: 12;
        transition: all 0.4s ease ;
       
     
      
    }

  

  

}