.tab-section{
    width: 100%;
    /* min-height: 100vh; */
}
.tab {
    float: left;
    border: 1px solid #C6C6C6;
    background-color: #F6F6F6;
    width: 30%;
    padding: 50px 0;
  }

  .services-page .tab{
        min-height: max-content !important;
  }
  
  .tab .btn {
    display: block;
    background-color: inherit;
    font-family: var(--special-font-family);
    color:var(-button-icon-color);
    font-weight: 700;
    padding: 22px 100px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
    font-size: clamp(0.8rem, 20px, 1.2rem);
  }
/* Drawer Heading */
.tab_drawer_heading {
  display: none;
}
  .services-page .tab .btn {
    color: #000;
    /*padding: 10px 30%;*/
      padding: 10px 100px;
      text-transform: unset;
  }

  .services-page .tab .small-heading{
    font-family: var(--special-font-family);
    /*padding: 22px 30%;*/
      padding: 22px 100px;

      text-transform: uppercase;
    font-weight: 700;
  }
  
  .services-page .tab .dropdown-container{
    display: flex;
    /*width: 60%;*/
    width: 100%;
      padding-left: 150px;
    flex-direction: column;
    margin: 0 0 0 auto;
  }

  .services-page .tab .dropdown-container a{
    text-align: left;
    padding: 5px;
    cursor: pointer;
    transition: 0.3s;
  }

  .tab .btn:hover,
  .tab .dropdown-container a:hover {
    background-color: #ccc;
  
  }
  
  .tab .btn.active,
  .tab .dropdown-container a.active{
    color:#ffffff;
    background-color: var(--heading-color);
  }
  
  .tabcontent {
    float: left;
    padding: 0px 12px;
    width: 70%;
    border-left: none;
    height: 100%;
  }

  .tab-container{
    width: 100%;
    margin: 0 auto;
    padding:72px 100px 50px 50px;
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: column; */
    gap:clamp(20px, 30px,3rem);
  }

  .tab-container img{
    width: 100%;
    height: 263px;
    object-fit: cover;
  }

  .tab-container .row-2{
    display: flex;
    justify-content: space-between;
    gap: 30px;
  }


  .tab-container ul{
	list-style-position: outside;
      padding-left: 20px;
}

.tab-container li{
	list-style-type:disc;
    margin-bottom: 15px;
}

/* SERVICES-TABS */
.services-page .small-heading{
    text-transform: uppercase;
}

.services-page .tab-container .row-2{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 30px;
}

.services-page .tab-container .row-2 .col{
    width: 50%;
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}

/* *************************TABs new design has to have css for each tab because each tab has different design *****************************/

.ways-to-engage h5{
  margin-bottom: 20px;
  text-transform: uppercase;
}

/* Ways to Engage - Project Services */
.ways-to-engage #service1 .tab-container{
  align-items: center;
}
.ways-to-engage #service1 .col{
  flex:1;
}
.ways-to-engage #service1 img {
  width: 100%;
  height: 464px;
  object-fit: cover;
  object-position: left;
}

/* Ways to Engage - Managed Services */
.ways-to-engage #service2 .tab-container{
  flex-direction: column;
} 

.ways-to-engage #service2 .row-2{
  display: flex;
  gap:clamp(20px, 30px,3rem);
}

.ways-to-engage #service2 .col{
  flex:1;
}
.ways-to-engage #service2 .col-1 p{
  margin-bottom: 20px;
}

/* Ways to Engage - advisory-services */
.ways-to-engage #service3 .tab-container{
  flex-direction: column;
} 
.ways-to-engage  #service3 h5{
  margin-bottom: 0;
}
.ways-to-engage #service3 img {
  height: 350px;
}

/*  Ways to Engage - Ad hoc Support*/
.ways-to-engage #service4 .tab-container{
  align-items: center;
}
.ways-to-engage #service4 .col{
  flex:1;
}
.ways-to-engage #service4 img {
  width:100%;
  height: 520px;
  object-fit: cover;
}

/*  Ways to Engage - VIRTUAL CIO */
.ways-to-engage #service5 .tab-container{
  flex-direction: column;
} 
.ways-to-engage #service5 img{
  height: 100%;
  max-height: 600px;
}

.ways-to-engage  #service5 h5{
  margin-bottom: 0;
}



/* service flex direction column  */
.services-page #service1 .tab-container,
.services-page #service2 .tab-container,
.services-page #service3 .tab-container,
.services-page #service4 .tab-container,
.services-page #service5 .tab-container,
.services-page #service7 .tab-container,
.services-page #service8 .tab-container,
.services-page #service9 .tab-container,
.services-page #service10 .tab-container,
.services-page #service16 .tab-container{
  flex-direction: column;
}

/* Services - Managed Service */
.services-page #service1 .tab-container img{
  height: 292px;
}

/* Services - Network design*/
.services-page #service2 .tab-container img{
  height: auto;
}

/* Services - Cloud service*/
.services-page #service3 .row-2{
  display: flex;
  gap:clamp(20px, 30px,3rem);
}

.services-page #service3 .col{
  flex:1;
  background-color: #F6F6F6;
  padding: 20px;
}

.services-page #service3 .col img{
  width: 100%;
  height: auto;
}

.services-page #service3 li {
  margin-bottom: 25px;
}

.services-page #service3 .col-1 li:last-child{
  margin-bottom: 0;
}

/* Services - cyber security*/
.services-page #service4 .row{
  display: flex;
  gap:clamp(20px, 30px,3rem);
}

.services-page #service4 .col{
  flex:1;
  display: flex;
  flex-direction: column;
}

.services-page #service4 .col-1{
  gap:clamp(20px, 30px,3rem);
}

.services-page #service4 .col-2{
  height: 467px;
  background-color: #F6F6F6;
  padding: 20px;
  justify-content: center;
  align-items: center;
}

.services-page #service4 .col-2 .wrapper{
  max-width: 393px;
}

.services-page #service4 .col-2 .wrapper p{
  margin-bottom: 25px;
}

/* Services - vulnerability assessments*/
.services-page #service5 .row{
  display: flex;
  gap:clamp(20px, 30px,3rem);
}

.services-page #service5 .col{
  flex:1;
}

.services-page #service5 .col-1{
  display: flex;
  flex-direction: column;
  gap:clamp(20px, 30px,3rem);
}

.services-page #service5 img{
  height: 437px;
}

/* Services - penetration testing */
.services-page #service6 .col{
  flex:1;
}
.services-page #service6 .col-1{
  display: flex;
  flex-direction: column;
  gap:clamp(20px, 30px,3rem);
  justify-content: center;
}
.services-page #service6 img{
  height: 600px;
}

/* Services - USER SECURITY TRAINING */
.services-page #service7 img{
  height: 500px;
}

/*  Services - Operating System Hardening */
.services-page #service10 h5{
  margin-bottom: 25px;
}

.services-page #service10 .row-2{
  display: flex;
  gap:clamp(20px, 30px,3rem);
}

.services-page #service10 .col{
  flex:1;
  display: flex;
  flex-direction: column;
  min-height: 376px;
}

.services-page #service10 .col-1{
  background-color: #F6F6F6;
  padding: 20px;
  justify-content: center;
}

.services-page #service10 .col img{
  height: 196px;
}

/* Services - Enterprise Proactive Monitoring (EPM) */
.services-page #service11 .col{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap:clamp(20px, 30px,3rem);

}

/* Services - VoIP and Internet Services */
.services-page #service12 .col{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap:clamp(20px, 30px,3rem);
}

.services-page #service12 img{
  min-height: 404px;
}

/* Services - CCTV */
.services-page #service13 .row-2{
  flex-direction: column;
  gap:clamp(20px, 30px,3rem);
}
.services-page #service13 .row-3{
  display: flex;
  gap:clamp(20px, 30px,3rem);
}
.services-page #service13 .row-3 .col{
  flex:1;
  background-color: #F6F6F6;
  padding: 25px;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}
.services-page #service13 .row-3 .col li:last-child{
  margin-bottom: 0;
}
.services-page #service13 .row-4{
  display: grid;
  gap:clamp(15px, 20px,3rem);
  grid-template: 
            "a b c"
            "a d c"
            ". d .";
}
.services-page #service13 .row-4 .img1 {
  grid-area: a;
}
.services-page #service13 .row-4 .img2 {
  grid-area: b;
}
.services-page #service13 .row-4 .img3 {
  grid-area: c;
}
.services-page #service13 .row-4 .img4 {
  grid-area: d;
}

.services-page #service13 img{
  height: 100%;
}

/* Services - wIRELESS cOMMUNICATION */
.services-page #service14 .col{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap:clamp(10px, 20px,3rem);
}
.services-page #service14 .inner-row{
  background-color: #F6F6F6;
  padding: 25px;
  justify-content: center;
}

.services-page #service14 img{
  height: 350px;
}

/* Services - Structured Cabling and Fibre Optics */

.services-page #service15 .row-gray-bg{
  width: 100%;
  background-color: #F6F6F6;
  padding: 25px;
  justify-content: center;
}

.services-page #service15 .inner-row{
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}

/*  Services - Access Control/Electronic Security */
.services-page #service16 img{
  max-width: 700px;
  height: auto;
}

.services-page #service16 .row-3 {
  background-color: #F6F6F6;
  padding: 25px;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}

.services-page #service16 .row-4 {
  display: flex;
  gap:clamp(10px, 20px,3rem);
  align-items: center;
}

.services-page #service16 .row-4 .col-2{
  max-width: 415px;
}

/*  MEDIA QUERIES  */
@media only screen and (min-width: 2200px) {
  .services-page #service16 .row-4 .col-2{
    max-width:800px;
  }
}
@media only screen and (max-width: 1440px) {
    .tab {
        padding: 50px 0;
    }
    .tab .btn,  
    .services-page .tab .small-heading {
        padding: 22px 50px;
    }
    .services-page .tab .btn{
        padding:10px 50px;
    }
    .services-page .tab .dropdown-container{
        width: 100%;
        padding-left: 100px;
    }
    .tab-container{
        padding-right: 50px;
    }
    .services-page #service5 img{
      height: 267px;
    }
    .services-page #service6 .tab-container{
      flex-wrap: wrap;
    }
    .services-page #service16 img{
      height: 100%;
    }
}

@media only screen and (max-width: 1250px) {
  .services-page #service16 .row-4 {
    flex-direction: column;
  }
  .services-page #service16 .row-4 .col-2{
    max-width:unset;
  }
}

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

    .tab-section{
      display: block;
      margin: 0 auto;
      width: 100%;
      border-top: none;
      border-radius: 0;
      min-height: auto;
    }
  

    .tab{
        float: unset;
        width: 100%;
        height: auto;
        min-height: unset;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }

    .tab-container{
        padding:50px 30px;
        row-gap:15px;
    }

    .tab-container img{
        object-position: top;
    }

    .tab-container .row,
    .tab-container .row-1,
    .tab-container .row-2{
        flex-wrap: wrap;
        gap: 0;
    }
    
    .tabcontent{
        float:unset;
        width: 100%;
    }
    
    .tab {
      display: none;
    }

    .services-page .tab .dropdown-container{
        width: 90%;
    }
    
    .services-page .tab-container .row-2{
        flex-wrap: wrap;
    }

    .services-page .tab-container .row-2 .col{
        width: 100%;
    }     

    .tab_drawer_heading {
      display: block;
      background-color: #F6F6F6;
      font-family: var(--special-font-family);
      color:var(-button-icon-color);
      font-weight: 700;
      padding: 22px 20px;
      width: 100%;
      border: none;
      outline: none;
      text-align: left;
      text-transform: uppercase;
      cursor: pointer;
      transition: 0.3s;
      font-size: clamp(0.8rem, 20px, 1.2rem);
  
    }
  
    .d_active {
      color:#ffffff;
      background-color: var(--heading-color);
    }
    .services-page #service4 .row{
      flex-direction: column;
    }
    .services-page #service4 .col-2 {
      align-items: start;
    }
    .services-page #service6 img,
    .services-page #service7 img{
      height: 400px;
    }
}

@media only screen and (max-width: 700px){
  .ways-to-engage #service3 img {
    height: 100%;
  }
}

@media only screen and (max-width: 600px) {
  .tab-container {
    padding: 30px 8px;
  }
  .ways-to-engage #service1  .tab-container{
    flex-direction: column;
  }
  .ways-to-engage #service1 img{
    height: auto;
  }
  .ways-to-engage #service2 .row-2{
    flex-direction: column;
    gap: 0;
  }
  .ways-to-engage #service4 .tab-container{
    flex-direction: column;
  }
  .ways-to-engage #service4 .col {
    flex: unset;
  }
  .ways-to-engage #service4 img {
    height: 350px;
  }
  .services-page #service3 .row-2{
    flex-direction: column;
  }
  .services-page #service5 img {
    height: 167px;
  }
  .services-page #service5 .row {
    flex-direction: column;
  }

  .services-page #service6 .tab-container{
    flex-direction: column;
  }
  .services-page #service6 .col{
    flex:unset;
  }
  .services-page #service7 img{
    height: 300px;
  }
  .services-page #service10 .row-2{
    flex-direction: column;
    gap: 10px;
  }
  .services-page #service10 .row-2 img{
    display: none;
  }
  .services-page #service10 .col {
    min-height: unset;
  }
  .services-page #service12 .tab-container{
    flex-direction: column;
  }
  .services-page #service12 .col{
    flex:unset;
  }
  .services-page #service13 img{
    object-position: center;
    max-height: unset;
    height: auto;
  }
  .services-page #service13 .row-3 {
    flex-direction: column;
  }
  .services-page #service13 .row-4{
    display: block;
  }
  .services-page #service14 .col{
    flex: unset;
    width: 100%;
  }
}