/* Center the service title */
.services-tittle{
  text-align: center; /* Center align text */
  font-size: 2.5rem; /* Set font size (note: remove space for correct CSS) */
  margin: 40px 0 20px; /* Top, horizontal, and bottom margin */
  color: rgb(224, 100, 47); /* Set text color using rbg */
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.3); /* Add subtle shadow to text */
  font-weight: 700; /* Make text bold */
}

/* Grid container for service cards */
.card-grid {
  display: grid; /* Use CSS grid layout */
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  grid-auto-rows: 1fr; /* Rows auto-sized equally */
  gap: 20px; /* Space between grid items */
  max-width: 1500px; /* Maximum width of grid */
  margin: 0 auto; /* Center grid horizontally */
  padding: 10px 5px; /* Padding around grid */
  background-color: #264587;
  background-repeat: no-repeat; /* Prevent image repeat */
  background-size: cover; /* Cover entire grid area */
}

/* Individual service card styling */
.service-card {
  background-color: rgb(240, 235, 229); /* Card background color */
  border-radius: 12px; /* Rounded corners */
  box-shadow: 0 4px 16px rgb(137, 87, 1); /* Card shadow */
  overflow: hidden; /* Hide overflow content */
  transition: transform 0.3s ease; /* Smooth transform on hover */
  height: 70%; /* Card height */
}

/* Card hover effect */
.service-card:hover {
  transform: translateY(-5px); /* Move card up slightly on hover */
  box-shadow: 0 0 10px rgba(254, 88, 22, 0.6), /* Orange glow */
              0 0 20px rgba(254, 88, 22, 0.4); /* Larger glow */
  transform: scale(1.1); /* Enlarge button on hover */
}

/* Card image styling */
.card-image {
  width: 100%; /* Image takes full width */
  height: 50%; /* Image takes half card height */
  padding-left: 1em; /* Left padding */
}

/* Padding for headings and paragraphs inside cards */
.service-card h2, p {
  padding-left: 1em; /* Left padding */
  padding-right: 1em; /* Right padding */
}

/* Call-to-action section styling */
.services-cta {
  text-align: center; /* Center align content */
  margin-top: 3rem; /* Top margin */
}

/* CTA paragraph styling */
.services-cta p {
  font-size: 1.2rem; /* Font size */
  margin-bottom: 1rem; /* Bottom margin */
  color: #fe5816; /* Orange color */
}

/* CTA button styling */
.services-cta .cta-btn {
  display: inline-block; /* Inline block for button */
  background-color: transparent; /* Transparent background */
  color: #fe5816; /* Orange text */
  padding: 0.8rem 1.5rem; /* Button padding */
  font-size: 1.1rem; /* Font size */
  font-weight: bold; /* Bold text */
  border: .5px solid #fe5816; /* Orange border */
  border-radius: 25%; /* Rounded button */
  text-decoration: none; /* Remove underline */
  transition: all .5s ease; /* Smooth transition on hover */
}

/* CTA button hover effect */
.services-cta .cta-btn:hover {
  box-shadow: 0 0 10px rgba(254, 88, 22, 0.6), /* Orange glow */
              0 0 20px rgba(254, 88, 22, 0.4); /* Larger glow */
  transform: scale(1.5); /* Enlarge button on hover */
}

/* Body background image */
body {
  background-image: url(../Images/BG01.jpg); /* Set background image */
  background-position: 100%; /* Set horizontal background position (may push image far right) */

}

/* Responsive layout for tablets */
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(1, 1fr); /* 2 columns on small screens */
    padding: 1rem; /* Adjust padding */
    border-top: #fe5816;
  }
  body  {
    padding: 20px;
  }
}

/* Responsive layout for mobile */
@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: repeat(1fr); /* Stack cards vertically */
  }
  .service-card  {
    height: 400px; /* Adjust card height for mobile */
  }
  .services-tittle {
    font-size: 1.5rem; /* Adjust title font size for mobile */
    color: rgb(156, 15, 5); /* Change title color for better contrast */
  }
  body {
    background-image: none; /* Remove background image on mobile for better performance */
    background-color: #ffffff; /* Set solid background color */
  }
  /* CTA button styling */
.services-cta .cta-btn {
  display: inline-block; /* Inline block for button */
  background-color: transparent; /* Transparent background */
  color: #fe5816; /* Orange text */
  padding: 0.8rem 1.5rem; /* Button padding */
  font-size: 1.1rem; /* Font size */
  font-weight: bold; /* Bold text */
  border: .5px solid #fe5816; /* Orange border */
  border-radius: 25%; /* Rounded button */
  text-decoration: none; /* Remove underline */
  transition: all .5s ease; /* Smooth transition on hover */
  }
  .service-card:hover {
  transform: translateY(-5px); /* Move card up slightly on hover */
  box-shadow: 0 0 10px rgba(254, 88, 22, 0.6), /* Orange glow */
              0 0 20px rgba(254, 88, 22, 0.4); /* Larger glow */
  transform: scale(1.1); /* Enlarge button on hover */
  }
}