li{
    list-style: none;
  } 


/*=======Common styles for all sections=======*/
.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.section{
  position: relative;
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 2rem 2rem;
}

.sub-section{
  position: relative;
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
  /* padding: 6rem 0; */
}

.section-title-01{
  font-size: 4.5em;
  font-weight: 800;
  margin-bottom: 2rem;
  background: linear-gradient(to top,transparent 0%,var(--first-color) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .1;
}

.section-title-02{
  font-size: 2.5em;
  font-weight: 700;
/* transform: translateY(-80px); */
text-decoration: underline;
}

.section-title-02::before{
 content: '';
 position: absolute;
 width: 70px;
 height: 5px;
 right: 0;
 bottom: 0;
 /* background: var(--second-color); */
}

#te{
  text-align: center;
}
.container{
position: relative;
flex-direction: column;
}








        
.experience-card{
  background: var(--card-bd-color);
  padding: 35px;
  border-radius: 6px;
  box-shadow: var(--box-shadow);
  transition: .3s ease;
}                 

.experience-card .upper{
  line-height: 30px;
}

.experience-card h3{
  font-size: 1.3em;
  font-weight: 700;
}

.experience-card h5{
  font-size: var(--small-font-size);
  font-weight: 500;
  font-style: italic;
}

.experience-card span{
  color: var(--third-color);
}

.experience-card .hr{
 width: 100%;
 height: 2px;
 background: var(--line-color);
 margin: 10px 0 22px;
}

.edu-list .item:hover, .bar:hover, .experience-card:hover ,.service-card1:hover, .service-card:hover,.pcard:hover,.content1:hover{
  transform: scale(1.03);
  
}
/*=======New Skills section=======*/

.skills1 .container .content{
  width: 100%;
 
}

.services-description1 h3{
  font-size: 2em;
  margin-top: 50px;
  margin-bottom: 50px;
}

.service-list1{
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(155px,1fr)); */
  grid-template-columns: repeat(6, 1fr);
  max-width: 100px auto;
  gap: 50px;

}






@media (min-width: 350px) {
  .service-list1  { grid-template-columns: repeat(2, 1fr); 
  }
 
}


@media (max-width: 350px) {
  .service-list1  { grid-template-columns: repeat(1, 1fr); }
  .service-card1{padding: 50px;}
  .pcard{
    display: flex;
    flex-direction: column;
  }
  
}
@media (min-width: 600px) {
  .service-list1 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 800px) {
  .service-list1  { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1050px) {
  .service-list1 { grid-template-columns: repeat(6, 1fr); }
  .service-card1{width: 250px;}
}



.service-card1{
  background: var(--card-bg-color);
  padding: 10px;
  border-radius: 6px;
  width: 150px;
  text-align: center;
  box-shadow: var(--box-shadow);
}




.service-card1 h3{
  font-size: 1.5em;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 20px;
}

.service-card1  img{
  /* width: 100%; */
  /* padding-left: 22px; */
  padding-top: 5px;
  height: 100px;
  background: white;
  

}
.service-card1  h3{
  margin-top: 10px;
  text-align: center;
  
}







/*=======Portfolio section=======*/

@media (max-width: 800px) {
 
  #pimg{
    width: 80%; 
    /* height: 150px; */
    
    border: 5px solid green;
  }
  .pcard{

       display: flex;
       text-align: center;
      flex-direction: column;
  }
 
}



.pcard{

  /* padding: 30px; */
  display: flex;
  gap: 50px;
  margin: 50px 0px;
  /* border: 1px solid blue; */

  background: var(--card-bg-color);
  /* border-bottom: 3px solid var(--second-color); */
  padding: 30px;
  border-radius: 20px;
  box-shadow: var(--box-shadow);
  transition: .3s ease;
}






.client-img{
  width: 500px;
  height: 400px;
  overflow: hidden;
  border-radius: 10px;
}

.client-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-details{
  max-width: 500px;
}

.client-details p{
  font-size: 1.2em;
  color: var(--third-color);
  padding-bottom: 15px;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--line-color);
}

.client-details h3{
  color: var(--first-color);
  font-size: 1.5em;
}

.client-details span{
  color: var(--third-color);
  font-size: 1.1em;
}



.pro-icon{
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: xx-large;
}