.about_h2il h3{
width:170px;
height:170px;
line-height:170px;
border:3px solid #4e3523; 
 }
.serv_o1i span{
width:120px;
height:120px;
line-height:120px; 
 }

#price {
background-image: url(../img/9.jpg);
background-position: center;
}
.price_1ril span{
width:120px;
height:120px;
line-height:120px; 
 }
.price_1r hr{
background:#1c2428; 
 }
.price_1l{
padding-top:150px; 
 }


@media screen and (max-width : 767px){
.caption_il  br{
display:none; 
 }
.caption_il  {
text-align:center;
margin-bottom:15px;
padding-top:0!important; 
 }
.caption_il p {
text-align:left; 
 }
.caption_il .font_50 {
font-size:36px!important;
 }
.about_h1r{
margin-top:15px;
text-align:center; 
 }
.about_h1r p{
text-align:left; 
 }
.about_h1ri1r{
margin-top:10px; 
text-align: center;
}
.fs-4 fw-bold mb-0{
  margin-left: -100px;
}
.about_h2i {
text-align:center;  
 }
.about_h2ir {
padding-top:15px!important; 
 }
.about_h2i {
margin-top:8px;
margin-bottom:8px; 
 }
.serv_pg1{
text-align:center; 
 }
.serv_pg1m{
margin-top:15px;
margin-bottom:15px; 
 }
.serv_pg1rir{
margin-top:15px; 
 }
.serv_o1i {
margin-top:8px;
margin-bottom:8px; 
 }
.serv_o1i p{
text-align:left; 
 }
.price_1l{
padding-top:0;
margin-bottom:15px;
text-align:center; 
 }
.price_1l .font_50{
font-size:36px!important;
 }
.price_1ril{
margin-bottom:15px;
text-align:center; 
 }
.price_1rir{
text-align:center; 
 }
 }


@media (min-width:576px) and (max-width:767px) {

 }
@media (min-width:768px) and (max-width:991px) {
.caption_ir img{
min-height:400px; 
 }
.caption_il {
padding-top:0!important; 
 }
.about_h1l img{
min-height:450px;  
 }
.about_h1ri1l .font_60{
font-size:40px!important; 
 }
.about_h2il h3 {
width: 90px;
height: 90px;
line-height: 90px;
}
.about_h2ir {
padding-top:20px!important; 
 }
.about_h2ir h4{
font-size:16px;
 }
.serv_pg1m img{
min-height:500px; 
 }
.serv_pg1ril .font_50{
font-size:30px!important; 
 }
.price_1ril span {
width: 70px;
height: 70px;
line-height: 70px;
}
.caption_il br{
display:none;
 }
 }

@media (min-width:992px) and (max-width:1200px) {
.caption_ir img{
min-height:450px; 
 }
.caption_il br{
display:none;
 }
.about_h1l img{
min-height:450px;  
 }
.about_h2il h3 {
width: 130px;
height: 130px;
line-height: 130px;
}
.about_h2ir {
padding-top:30px!important; 
 }
.about_h2ir h4{
font-size:18px;
 }
.price_1ril span {
width: 70px;
height: 70px;
line-height: 70px;
}
.price_1ril span {
width: 100px;
height: 100px;
line-height: 100px;
}
 }
@media (min-width:1201px) and (max-width:1270px) {
.caption_il br{
display:none;
 }
.about_h2il h3 {
width: 150px;
height: 150px;
line-height: 150px;
}
 }
@media (min-width:1400px) and (max-width:2000px) {
.about_h2il h3 {
    width: 200px;
    height: 200px;
    line-height: 200px;
}
 }

 .count-up {
    font-size: 2rem;
    opacity: 0;
    transform: scale(0.8);
    animation: scaleUp 0.5s ease forwards;
 }

 @keyframes scaleUp {
    100% {
       opacity: 1;
       transform: scale(1);
    }
 }

 /* Fade-in animation for text  update the score*/
 
 
  
  .progress-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25%;
  }
  
  .progress {
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 25%;
  }
  
  .progress .progress-left,
  .progress .progress-right {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
  }
  
  .progress .progress-bar {
    width: 100%;
    height: 100%;
    border-width: 8px;
    border-style: solid;
    border-color: transparent;
    
    position: absolute;
    top: 0;
    box-sizing: border-box;
  }
  
  .progress .progress-left .progress-bar {
    border-left-color: #fff;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    transform-origin: center left;
    animation: progress-rotate-left 1.5s linear forwards;
  }
  
  .progress .progress-right .progress-bar {
    border-right-color: #fff;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    transform-origin: center right;
    animation: progress-rotate-right 1.5s linear forwards;
  }
  
  @keyframes progress-rotate-left {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(180deg);
    }
  }
  
  @keyframes progress-rotate-right {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(180deg);
    }
  }
  
  .progress .progress-value {
    position: absolute;
    width: 70%;
    height: 70%;
    background-color: #e4dbcc;
    border-radius: 80%;
    border-color: #0084c6;
    font-size: 18px;
    text-align: center;
    line-height: 70px;
    top: 15%;
    left: 15%;
  }
  
  .progress.green .progress-left .progress-bar {
    border-left-color: #00ff00;
  }
  
  .progress.green .progress-right .progress-bar {
    border-right-color: #00ff00;
  }
  
  .progress.blue .progress-left .progress-bar {
    border-left-color: #049dff;
  }
  
  .progress.blue .progress-right .progress-bar {
    border-right-color: #049dff;
  }
  
  .progress.orange .progress-left .progress-bar {
    border-left-color: #fdba04;
  }
  
  .progress.orange .progress-right .progress-bar {
    border-right-color: #fdba04;
  }



  /*  Service Zoom in hover effect  */
  .serv_h2i {
    transition: transform 0.3s ease;
}

.serv_h2i:hover {
    transform: scale(1.05); /* Zoom in effect */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Optional shadow effect */
}
.serv_h2i {
  border: 2px solid transparent; /* Set a default border color */
  transition: transform 0.3s, border-color 0.3s; /* Transition for smooth effect */
}

/* Zoom-in effect on hover */
.serv_h2i:hover {
  transform: scale(1.05); /* Zoom effect */
  border-color: #ff5733; /* Change this color to your desired hover border color */
}



/* Logo css */
.navbar-brand img {
  height: 75px; /* Set the height of the logo */
  width: 170px; /* Maintain aspect ratio */
  margin-right: 8px; /* Space between image and text */
}

/* client logo */
/* Slider Container */
.slider-container {
  overflow: hidden; /* Hide overflowing content */
  background-color: #f9f9f9; /* Optional background */
  padding: 20px 0; /* Optional padding */
  position: relative;
}

/* Slider Track for Animation */
.slider-track {
  display: flex; /* Arrange images in a row */
  width: calc(200px * 14); /* Width = image width * total images (including duplicates) */
  animation: slide 70s linear infinite; /* Animation */
}

/* Individual Images */
.slider-track img {
  height: 100px; /* Uniform height */
  width: auto; /* Keep aspect ratio */
  margin: 0 15px; /* Spacing between logos */
  object-fit: contain; /* Prevent distortion */
}

/* Keyframes for Continuous Slide */
@keyframes slide {
  from {
      transform: translateX(0); /* Start position */
  }
  to {
      transform: translateX(-50%); /* Move to the left by half */
  }
}
.slider-track img {
  height: 150px; /* Fixed height */
  width: 200px; /* Fixed width */
  margin: 0 15px; /* Spacing between logos */
  object-fit: contain; /* Prevent distortion and maintain aspect ratio */
  background-color: #fff; /* Optional background for clarity */
  border: 1px solid #ddd; /* Optional border for alignment visualization */
}
#clients-img h2{
 margin-top: 10px;
 margin-bottom: 10px;
  text-align: center;
}

#clients-img h5{
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}


/* our work */

/* FontAwesome for working BootSnippet :> */

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
#team {
    background: #f6f3f3 !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #108d6f;
    border-color: #108d6f;
    box-shadow: none;
    outline: none;
   
}

.btn-primary {
    color: #fff;
    background-color: #007b5e;
    border-color: #007b5e;
}

section {
    padding:auto 0;
}

section .section-title {
    text-align: center;
    color: #007b5e;
    margin-bottom: 50px;
    text-transform: uppercase;
}

#team .card {
    border: none;
    background: #ffffff;
    border-radius: 20px;
    
}

.image-flip:hover .backside,
.image-flip.hover .backside {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    border-radius: .25rem;
    
}

.image-flip:hover .frontside,
.image-flip.hover .frontside {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    
}

.mainflip {
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}

.frontside {
    position: relative;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
    margin-bottom: 30px;
}

.backside {
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    
}

.frontside,
.backside {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
}

.frontside .card,
.backside .card {
    min-height: 312px;
}

.backside .card a {
    font-size: 18px;
    color: #007b5e !important;
}

.frontside .card .card-title,
.backside .card .card-title {
    color: #007b5e !important;
    
}

.frontside .card .card-body img {
    width: 220px;
    height: 190px;
    border-radius: 10%;
}