/* Normalize number input appearance across browsers */
input[type="number"] {
  appearance: textfield;         /* Standard */
  -webkit-appearance: none;      /* Chrome, Safari */
  -moz-appearance: textfield;    /* Firefox */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); /* Subtle clean shadow */
}


/* Highlight Color */
::-moz-selection {
  color: #16a88c; /* Updated to vibrant teal/turquoise */
  background-color: rgba(
    22,
    168,
    140,
    0.1
  ); /* Updated with corresponding rgba */
}

::selection {
  color: #16a88c; /* Updated to vibrant teal/turquoise */
  background-color: rgba(
    22,
    168,
    140,
    0.1
  ); /* Updated with corresponding rgba */
}

.bg-primary ::-moz-selection {
  color: #fff;
  background-color: #006655; /* Updated to deep green with full opacity */
}

.bg-primary ::selection {
  color: #fff;
  background-color: #006655; /* Updated to deep green with full opacity */
}

.list-checked .list-checked-item::before {
  color: #16a88c; /* Updated to vibrant teal/turquoise */
}

.back-to-top {
  padding: 10px; /* Increase padding to make the button larger */
  background-color: #16a88c; /* Updated to vibrant teal/turquoise */
  border-color: #16a88c; /* Updated to vibrant teal/turquoise */
}

.fit-image {
  object-fit: cover; /* This will cover the area of the container without stretching */
  width: 100%; /* Use 100% to occupy all the container width */
  height: 250px; /* Set a fixed height or as per your requirement */
}

/* Add this to your custom.css file */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

/* Hover effect for service cards */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
  position: relative; /* Ensure proper stacking context */
}

.card:hover {
  transform: translateY(-10px); /* Slightly lift the card */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */
  z-index: 1; /* Ensure hovered card is above others */
}

  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
  }

  .loader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

.loader {
  border: 6px solid #eee;              /* Background circle */
  border-top: 6px solid #15a98c;       /* Nazafa logo green */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

  .loader-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    letter-spacing: 0.5px;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  html.loading * {
  animation: none !important;
  transition: none !important;
}