.single-pf {
  width: 100%;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  background-color: white;
  color:rgba(
    140,
    148,
    76,
    0.8
  ); /* Dark olive-green background */
  box-shadow: 2px, 2px 2px 2px rgba(0, 0, 0, 0);
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  overflow: hidden; /* Ensure no content overflows outside the border radius *//* Space between each section */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
   /* Padding inside the section */
}

.single-pf:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* More pronounced shadow on hover */
}

.image-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: justify;
  width: 100%;
  max-height: 520px;
}
@media (max-width: 900px) {
  .single-pf {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0);
    width: 100% !important; /* Full width on mobile */
    min-width: 100% !important;
   
  }
}
/* Media query for max-width 780px */

.img-fluid {
  
  max-height: 320px !important;

}

.text-content {
  padding: 30px;
  text-align: justify;
}

.text-content span {
  font-weight: bold;
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  color: #fff; /* White color for the title for contrast */
}

.text-content p {
  font-size: 14px;
  /* Light grey color for the paragraph text */
  line-height: 1.6; /* Improve readability with line height */
  margin: 0;
}

.single-pf img {
   
  width: 100%;
  min-height: 350px !important;
  max-height: 400px; /* Add rounded corners to images */
}

/* Mobile Responsiveness */


.portfolio-slider .owl-controls .owl-nav{
  display: none;
}

.image-text-wrapper .text-content{
  margin-top: 2px;
  
  border-radius: 10px;
  min-height: 200px;
}
.image-text-wrapper .text-content span {
 background-color: white ;
 color: black;
 padding: 10px;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.151); border-radius: 10px;
  text-align: center;
  
}
.image-text-wrapper .text-content p {
  color:rgba(8, 8, 8, 0.527);

}

/*-------------------------------------
        5. Service 
--------------------------------------*/
.service { padding: 260px 0 87px;}

.single-service-item{
    text-align: center;
    padding:55px 30px 60px;
    border-radius: 3px;
    margin-bottom: 30px;
    border: 1px solid #dadfe9;
    -webkit-transition: .3s linear; 
    -moz-transition:.3s linear; 
    -ms-transition:.3s linear; 
    -o-transition:.3s linear;
    transition: .3s linear;
}

.single-service-icon {
    display: inline-block;
    color: #50616c;
}
.single-service-item h2 a {
    font-size:20px;
    margin: 35px 0 20px;
}
.single-service-item h2 a span {text-transform:  lowercase;}
.single-service-item p {padding-bottom: 35px;text-transform: initial;position: relative;}
.single-service-item p:before {
    position: absolute;
    content: "";
    width: 20px;
    height: 3px;
    background: #000000;
    bottom: 0;
    left: 50%;
    margin-left: -10px;
}

.single-service-icon [class^="flaticon-"]:before,.single-service-icon[class*=" flaticon-"]:before,.single-service-icon [class^="flaticon-"]:after,.single-service-icon [class*=" flaticon-"]:after {font-size:60px;}
.single-service-item:hover .single-service-icon [class^="flaticon-"]:before,.single-service-item:hover .single-service-icon [class*=" flaticon-"]:before,.single-service-item:hover .single-service-icon [class^="flaticon-"]:after,.single-service-item:hover .single-service-icon [class*=" flaticon-"]:after {color:#fff;}


.single-service-item:hover h2 a,.single-service-item:hover p{color: #fff;}
.single-service-item:hover  p:before {background: #fff;}
.single-service-item:hover{box-shadow: 0 12px 30px 0px rgba(0,1,193,.2);background: #000000;border: 1px solid #000000;}