body{
    font-family: sans-serif;
    margin:0;
    line-height: 1.5;
}

*{
    box-sizing: border-box;
    margin: 0;
}

.container{
    max-width: 1170px;
    margin: auto;
}
.row{
    display: flex;
    flex-wrap: wrap;
}

/* Row item background new styles added */
/* .row .item .item-inner{
    /* -webkit-box-shadow: 3px 3px 10px 3px #dddddd;
-moz-box-shadow: 3px 3px 10px 3px #dddddd;
box-shadow: 3px 3px 10px 3px #dddddd; */
/* -webkit-box-shadow: 13px -8.5px 13px -0.5px #ddd;
-moz-box-shadow: 13px -8.5px 13px -0.5px #ddd;
box-shadow: 13px -8.5px 13px -0.5px #b5aeae; */
/* background: #ffffff;
background: -webkit-linear-gradient(0deg, #b33f3f 0%, #ffffff 100%);
background: linear-gradient(0deg, #b41818 0%, #ffffff 100%); 
} */

.row .item .item-inner{
/* border-radius: 28% 0% 11% 0% / 13% 24% 24% 24%; */
border-radius: 14% 12% 11% 13% / 11% 12% 13% 10%;
}
.section-title{
   flex:0 0 100%;
   max-width: 100%;
   margin-bottom: 60px;
}
.section-title h1{
   text-align: center;
   font-size: 36px;
   color:#000000;
}
/* New css */
.section-title {
    /* --c:linear-gradient(#000 0 0); */
    
    padding-bottom: .15em;
    background: var(--c), var(--c);
    background-size: .3em .1em;
    background-position:50% 100%;
    background-repeat: no-repeat;
    transition: .3s linear, background-size .3s .2s linear;

    /* background-size: 40% .1em;
    background-position: 10% 100%, 90% 100%; */
  }
  /* .section-title:hover {
    background-size: 40% .1em;
    background-position: 10% 100%, 90% 100%;
  } */


.services{
    /* min-height: 100vh; */
    /* padding:90px 0; */
}
/* .skills-link {
   min-height: 100vh;
   padding: 90px 0;
} */

.services .service-items{
   flex:0 0 100%;
   max-width: 100%;
}
.services .service-items .item{
   flex:0 0 33.33%;
   max-width: 33.33%;
   padding: 15px;
}
.services .service-items .item-inner:hover{
    /* background-color: rgb(94, 105, 110); */
    /* border-radius: 1%; */
    border-color:rgb(52, 80, 87);
}

.services .service-items .item-inner{
   border:2px solid #a1afbb;
   padding: 30px;
   /* background-color: #ffffff; */
}
/* Item-inner background */
.services .service-items .item-inner{
background-image: linear-gradient(#ffffff 1.5px, transparent 1.5px), linear-gradient(to right, #ffffff 1.5px, transparent 1.5px);
background-size: 100px 100px;
background-color: #ffffff;
}
.services .service-items .item-inner:hover{
    transform: translateY(0) scale(1.01);
  }


.services .service-items .read-more-cont{
   display: none;
}
.services .service-items .item-inner h3{
   font-size: 20px;
   color:#000000;
   margin-bottom: 30px;
   position: relative;
}
.services .service-items .item-inner:hover h3{
    font-size: 20px;
    color:#da1717;
    margin-bottom: 30px;
    position: relative;
 }
.services .service-items .item-inner h3::before{
 content: '';
 height: 1px;
 width: 80px;
 background-color: #000000;
 position: absolute;
 left:0;
 bottom:-10px;
}

.services .service-items .item-inner p{
   color:#555555;
   font-size: 16px;
   margin:0 0 20px;
}
.services .service-items .item-inner .btn{
   font-size: 16px;
   background-color: transparent;
   border:0px solid #555555;
   color:#555555;
   padding: 8px 15px;
   cursor: pointer;
   /* background: #2098D1; */
   color: #4b6cc1;
   /* border-radius: 10px; */
   text-decoration: underline;
   text-decoration: transparent;
}
.services .service-items .item-inner .btn:hover{
    /* background: #e06262; */
    /* border-radius: 1px; */
    text-decoration: underline;
 }
 .services .service-items .item-inner:hover .btn{
    background: #cad4ec;
    border-radius: 30px;
    
 }

.popup-box{
   position: fixed;
   height: 100%;
   width: 100%;
   left: 0;
   top:0;
   background-color: rgba(0,0,0,0.5);
   z-index: 500;
   visibility: hidden;
   opacity:0;
   transition: all 0.5s ease-in-out;
}
.popup-box.open{
 visibility: visible;
   opacity:1;	
}
.popup-box .popup-content{
   background-color: #ffffff;
   width: 600px;
   position: absolute;
   left: 50%;
   top:50%;
   transform: translate(-50%,-50%);
   border-radius: 8px;
}

.popup-box .popup-header{
   padding: 15px 40px 15px 15px;
   border-bottom: 1px solid #dddddd;
}
.popup-box .popup-header h3{
   margin:0;
   color:#E91E63;
   font-size: 20px;
}
.popup-box .popup-header .popup-close-icon{
   position: absolute;
   height: 30px;
   width: 30px;
   text-align: center;
   color: #555555;
   font-size: 28px;
   line-height: 30px;
   right: 5px;
   top: 5px;
   cursor: pointer;
}
.popup-box .popup-body{
   padding: 15px;
   max-height: 300px;
   overflow-y: auto;
}
.popup-box .popup-body img{
   width: 100%;
   display: block;
   margin-top: 15px;
}
.popup-box .popup-body p{
   font-size: 16px;
   color:#267951;
   margin:0 0 15px;
}
/* .popup-box .popup-body p.work-duration{
   font-size: 16px;
   color:#981010;
   margin:0 0 15px;
   margin-left: 70%;
   margin-top: -5%;
} */
.popup-box .popup-footer{
   padding: 15px;
   border-top:1px solid #dddddd;
   text-align: right;
}
.popup-box .popup-footer .btn{
   padding: 8px 15px;
   border:1px solid #9f1c1c;
   color:#555555;
   font-size: 16px;  
   background-color: transparent;
   cursor: pointer;
   border-radius: 4px;
}
.popup-box .popup-footer .btn:hover{
   padding: 8px 15px;
   border:2px solid #821616;
   color:#c11616;
   font-size: 16px;
   background-color: transparent;
   cursor: pointer;
   border-radius: 4px;
}
.popup-box .popup-footer .btn:focus{
   outline: none;
}


/*responsive*/

@media(max-width: 780px){
   .services .service-items .item{
     flex:0 0 100%;
     max-width: 100%;
  }
  .popup-box .popup-content{
       width: calc(100% - 30px);
  }

  .skills-link {
   min-height: 60vh;
   /* padding: 90px 0; */
 }
}

@media only screen and (min-width: 781px) and (max-width: 1000px){
    .services .service-items .item{
      flex:0 0 100%;
      max-width: 100%;
   }
   .popup-box .popup-content{
        width: calc(100% - 30px);
   }
 }



/* Newly added css */
.services .service-items .item-inner .work-duration{
    font-size: 0.9em;
    color:silver;
    /* text-transform: uppercase; */
    font-weight: 600;
    
}
.services .service-items .item-inner:hover .work-duration{    
    color:rgb(42, 32, 32);    
}
.services .service-items .item-inner .companyName{
    font-size: 1.5em;
    color: rgb(110, 61, 209);
    /* text-transform: uppercase; */
    font-weight: 500;
    
}
.services .service-items .item-inner:hover .companyName{
    font-size: 1.58em;
    color: rgb(110, 61, 209);
    /* text-transform: uppercase; */
    font-weight: 500;
    
}
.services .service-items .item-inner .fas{
    font-size: 1.1em;
    color: rgb(52, 54, 55);
    margin-right: 10px;
}
.services .service-items .item-inner .compLocName{
    font-size: 1.2em;
    color: rgb(40, 41, 43);
}


.popup-box .popup-body p .companyName{
    font-size: 1.5em;
    color: red;
}
.popup-box .popup-body p .fas{
    font-size: 1.1em;
    color: rgb(142, 177, 214);
    margin-right: 10px;
}
.popup-box .popup-body p .compLocName{
    font-size: 1.2em;
    color: rgb(63, 153, 231);
}







.QgHxr li::before {
   content: "▹";
   /* position: absolute; */
   /* left: -10px;  */
   color: var(--green);
}
.QgHxr li::before {
padding-right: 20px;
    margin-bottom: 10px;
}
.QgHxr{


       text-align: left;
   }













   .numbered-heading {
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      position: relative;
      margin: 10px 0px 40px;
      width: 100%;
      font-size: clamp(26px,5vw,var(--fz-heading));
      white-space: nowrap;
      font-size: 36px;
  }

h1, h2, h3, h4, h5, h6 {
      margin: 0px 0px 10px;
      font-weight: 600;
      color: var(--lightest-slate);
      line-height: 1.1;
  }

  /* .numbered-heading::before {
   position: relative;
   bottom: 4px;
   counter-increment: section 1;
   content: "0" counter(section) ".";
   margin-right: 10px;
   color: var(--green);
   font-family: var(--font-mono);
   font-size: 36px;
   font-weight: 400;
} */



   .numbered-heading::after {
      content: "";
      display: block;
      position: relative;
      top: 0px;
      width: 300px;
      height: 2.5px;
      margin-left: 20px;
      background-color: #496d70
  }



  @media(max-width: 780px){
   .numbered-heading::after {
      content: "";
      display: block;
      position: relative;
      top: 0px;
      width: 300px;
      height: 1.5px;
      margin-left: 20px;
      background-color: #496d70
  }
}

@media only screen and (min-width: 781px) and (max-width: 1000px){
   .numbered-heading::after {
      content: "";
      display: block;
      position: relative;
      top: 0px;
      width: 300px;
      height: 2.5px;
      margin-left: 20px;
      background-color: #496d70
  }
 }