:root {
  --bs-primary-rgb: 28, 146, 121;
  --bs-secondary-rgb: 48, 208, 171;
  --bs-info-rgb: 168, 196, 186;
}
.card-bg {
    position: relative;
    background: -webkit-gradient(linear, right top, left top, from(#1c9279), to(#30d0ab));
    background: linear-gradient(to left, #1c9279, #30d0ab);
    cursor: pointer;
    overflow: hidden;
    -webkit-box-shadow: 0 8px 24px -5px rgba(0, 0, 0, 0.15), 0 16px 40px -20px rgba(33, 92, 120, 0.2);
            box-shadow: 0 8px 24px -5px rgba(0, 0, 0, 0.15), 0 16px 40px -20px rgba(33, 92, 120, 0.2);
  }
  
  .card-bg-service {
    position: relative;
    background: #8eccb7;
    overflow: hidden;
    -webkit-box-shadow: 0 8px 24px -5px rgba(0, 0, 0, 0.15), 0 16px 40px -20px rgba(33, 92, 120, 0.2);
            box-shadow: 0 8px 24px -5px rgba(0, 0, 0, 0.15), 0 16px 40px -20px rgba(33, 92, 120, 0.2);
  }
  
  .card-bg::before,
  .card-bg-service::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: -webkit-gradient(linear, right top, left top, color-stop(100%, #1c9279), to(#30d0ab));
    background: linear-gradient(to left, #1c9279 100%, #30d0ab);
    opacity: 0;
    -webkit-transition: 0.35s ease-in;
    transition: 0.35s ease-in;
  }
  
  .card-bg::after,
  .card-bg-service::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: -webkit-gradient(linear, left top, right top, from(#1c9279), to(#30d0ab));
    background: linear-gradient(to right, #1c9279, #30d0ab);
    opacity: 0;
    -webkit-transition: 0.35s ease-in 0.25s;
    transition: 0.35s ease-in 0.25s;
  }
  
  .card-body,
  .card-img-container,
  .card-img-container-service,
  .bg-service {
    position: relative;
    z-index: 4;
  }
  
  .card-body {
    -webkit-transition: 0.25s ease-in;
    transition: 0.25s ease-in;
  }
  
  .card-text {
    line-height: 1.5rem;
    -webkit-transition: 0.25s ease-in;
    transition: 0.25s ease-in;
    color: white;
  }
  
  .card-text:hover {
    color: #b0e9f0;
  }
  
  .card-img-container {
    width: 100%;
    overflow: hidden;
  }
  
  .card-img-top {
    width: 100%;
    height: 250px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .card-img-container-service {
    width: 100%;
    height: 150px;
  }
  
  .card-img-service {
    width: 100%;
    height: 120px;
    -o-object-fit: contain;
       object-fit: contain;
  }
  
  .bg-service {
    background: #f5ba68;
    padding: 0.5rem;
  }
  
  .service-text {
    font-size: 0.9rem;
    line-height: 2px;
    color: #000000;
    -webkit-transition: 0.25s ease-in;
    transition: 0.25s ease-in;
  }
  .card-bg:hover {
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
    }
.card-bg:hover::before,
.card-bg-service:hover::before {
  opacity: 1;
}
.card-bg:hover::after,
.card-bg-service:hover::after {
  opacity: 1;
}
.card-text:hover {
  color: #b4f1f8;
}
.bg-service{
  min-height: 65px;
}
.service-text {
  font-size: 0.9rem;
}
.card-bg {
  max-width: 600px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
.card-bg img {
  -webkit-transition: 0.3s ease-in;
  transition: 0.3s ease-in;
}

.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: #f5ba68;
  --bs-btn-border-color: #f5ba68;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f7c47f;
  --bs-btn-hover-border-color: #f6c177;
  --bs-btn-focus-shadow-rgb: 208, 158, 88;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f7c886;
  --bs-btn-active-border-color: #f6c177;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f5ba68;
  --bs-btn-disabled-border-color: #f5ba68;
}

/* modal */
.modal-header {
  background: -webkit-gradient(linear, right top, left top, from(#1c9279), to(#30d0ab));
  background: linear-gradient(to left, #1c9279, #30d0ab);
}

/* loader */
.loader {
  border: 16px solid #dfdfdf; /* Light grey */
  border-top: 16px solid #1f9c81; /* Blue */
  border-bottom: 16px solid #1f9c81;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
  position: absolute;
  left: 50%;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@media only screen and (max-width: 600px) {
  .loader {
    left: 40% !important;
  }
}