/********** Template CSS **********/
:root {
  /* --primary: #d81324; */
  --primarySS: #080808;
  --primary: #1f72e7;
  --bs-blueTheame: #1f72e7;
  --bs-Theame: #1f72e762;
  --secondary: #0b2154;
  --light: #f2f2f2;
  --dark: #111111;
}
/* ------------------------------------ */
/* Custom CSS for the page header background */
.page-header {
  /* margin-top: 30px; */
  /* background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(204, 32, 32, 0.7)),
    url("../img/carousel-bg-6.jpg") center center no-repeat; */
  /* background-size: cover; */
  /* background-color: var(--bs-Theame); */
  /* You might want to adjust height, or let content define it */
  min-height: 300px; /* Example: ensure enough height for the image */
  display: flex; /* Use flexbox to center content vertically */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  position: relative; /* Needed for sticky-top if used on body/html */
  z-index: 1; /* Ensure it's above other elements if needed */
}
/* Inner overlay, if needed, but the gradient already handles it */
.page-header-inner {
  width: 100%; /* Ensure inner div takes full width for text centering */
  /* You can remove or adjust py-5 from the HTML if min-height and flexbox handle spacing */
}
/* Add this to your <style> block in index.php or css/style.css */
.service-card-hover-effect {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for transform and shadow */
  cursor: pointer; /* Indicate it's interactive */
}
.service-card-hover-effect:hover {
  border: 2px solid var(--bs-Theame);
  transform: scale(1.05); /* Zoom in by 3% */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25) !important; /* Slightly more prominent shadow on hover */
  /* You can adjust the shadow here to make it more noticeable on hover */
}
.service-detail-content p.lead,
.service-detail-content ul li {
  font-size: 1rem;
  /* Default/smaller for mobile */
}
@media (min-width: 768px) {
  /* Medium devices and up (tablets) */
  .service-detail-content p.lead,
  .service-detail-content ul li {
    font-size: 1.1rem;
    /* Slightly larger for tablets */
  }
}
@media (min-width: 992px) {
  /* Large devices and up (desktops) */
  .service-detail-content p.lead,
  .service-detail-content ul li {
    font-size: 1.25rem;
    /* Larger for desktops (similar to Bootstrap's default .lead) */
  }
}
.rott i,
.service-card-hover-effect i {
  margin: 0.75rem;
  margin-left: 0;
  font-weight: 600;
  transition: all 0.3s ease;
  border-color: transparent;
  background-color: transparent;
}
.rott:hover {
  color: var(--primarySS);
  border-radius: 15px;
}
.rott:hover i,
.service-card-hover-effect:hover i {
  color: var(--primarySS);
  font-weight: 600;
  transform: rotate(360deg);
}
/* Optional: Ensure font for header is Inter if you want */
/* body {
  font-family: "Inter", sans-serif;
} */
.bg-gray {
  background-color: rgba(161, 161, 161, 0.45);
}
.toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1rem;
  z-index: 1050;
}
.service-links-grid {
  display: grid;
  /* Default: One column on very small screens */
  grid-template-columns: 1fr;
  gap: 8px 15px;
  /* Vertical gap, Horizontal gap */
}
.connect-container {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Fixed position relative to the viewport */
  right: 10px;
  /* Adjust as needed for spacing from the right */
  top: 65%;
  /* Center vertically */
  transform: translateY(-50%);
  /* Adjust to truly center */
  z-index: 1000;
  /* Ensure it's above other content */
}
.icon-wrapper {
  margin-bottom: 15px;
  /* Space between icons */
  text-align: center;
}
.icon-wrapper:last-child {
  margin-bottom: 0;
  /* No margin for the last icon */
}
.connect-icon {
  display: block;
  width: 50px;
  /* Size of the icons */
  height: 50px;
  background-color: #25d366;
  /* WhatsApp green */
  color: white;
  border-radius: 50%;
  /* Make them circular */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}
.connect-icon.phone {
  background-color: #007bff;
  /* Blue for phone */
}
.connect-icon:hover {
  background-color: #1da1f2;
  /* Lighter blue for phone on hover, lighter green for WhatsApp on hover */
}
/* Media queries for mobile and tablet devices */
@media (max-width: 991px) {
  /* On medium devices and below */
  .footer h4 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Separator for collapsed sections */
    padding-bottom: 10px;
    /* Remove bottom margin from h4 to snuggle with the box when open */
    margin-bottom: 0 !important;
  }
  /* Box styling for the collapsible content on mobile */
  /* Apply box style during transition (.collapsing) and when shown (.show) */
  .footer .collapse.show,
  .footer .collapsing {
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Light border */
    border-radius: 0.5rem;
    /* Rounded corners */
    padding: 1rem;
    /* Padding inside */
    margin-top: 10px;
    /* Margin above the box */
    margin-bottom: 1rem;
    /* Margin below the box */
    background-color: rgba(0, 0, 0, 0.2);
    /* Slightly lighter background for the box */
  }
  /* Tablets and mobile phones */
  .connect-container {
    display: block;
    /* Show on devices smaller than 992px */
  }
}
@media (min-width: 992px) {
  /* On large devices and above */
  .footer h4 .fa-plus-circle,
  .footer h4 .fa-minus-circle {
    display: none !important;
    /* Hide icons on desktop */
  }
}
/* For small devices (e.g., phones in landscape, >= 576px) */
@media (min-width: 576px) {
  .service-links-grid {
    grid-template-columns: 1fr 1fr;
    /* Two columns */
  }
}
/* For medium devices (e.g., tablets, >= 768px) */
@media (min-width: 768px) {
  .service-links-grid {
    grid-template-columns: 1fr 1fr 1fr;
    /* Three columns */
  }
}
/* For large devices (e.g., desktops, >= 992px) */
@media (min-width: 992px) {
  .service-links-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* Four columns */
  }
}
/* Adjust button link styling for grid */
.service-links-grid .btn-link {
  text-align: left;
  /* Ensures links are left-aligned in their grid cell */
  padding: 5px 0;
  /* Adjust padding as needed for vertical spacing within the cell */
  /* Remove any excessive margins that might conflict with grid gap */
}
.branding-section {
  padding-left: 1rem;
  /* px-4 equivalent */
  padding-right: 1rem;
  /* px-4 equivalent */
  /* For xl:px-0 xl:container, you'd typically have a max-width and margin: auto; on a .container class */
  max-width: 1280px;
  /* Example xl:container width */
  margin-left: auto;
  margin-right: auto;
}
.brand-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 columns by default */
  /* gap: 1.5rem; */
  /* Gap between items */
  justify-items: center;
  /* Center items horizontally within their cells */
  align-items: center;
  /* Center items vertically within their cells */
}
.brand-grid .img-wrap {
  display: flex;
  /* Keep this flex for centering the image inside its wrapper */
  justify-content: center;
  align-items: center;
  height: 100%;
  /* Ensures the flex centering works if the parent div has height */
}
.brand-grid img {
  max-width: 130px;
  /* Ensure images don't exceed their original size */
  height: auto;
  /* Maintain aspect ratio */
  display: inline-block;
  /* Original display type */
}
/* Add this to your custom CSS file or a <style> block */
.show-more-btn {
  background-color: transparent;
  /* Make it look like a part of the list, or a subtle background */
  border-top: 1px solid #eee;
  /* Optional: add a subtle line above it */
  color: #007bff;
  /* Standard link blue color */
  font-weight: bold;
  padding: 0.75rem 1rem;
  /* Adjust padding to make it smaller */
  transition: background-color 0.3s ease;
  /* Smooth hover effect */
}
.show-more-btn:hover {
  background-color: #f8f9fa;
  /* Light background on hover */
  text-decoration: underline;
  /* Underline text on hover */
}
/* Responsive adjustments */
@media (min-width: 768px) {
  /* md:grid-cols-3 */
  .brand-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  /* lg:grid-cols-6 (or adjust as needed) */
  .brand-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1280px) {
  /* xl:grid-cols-9 */
  .brand-grid {
    grid-template-columns: repeat(9, 1fr);
  }
}
/* Custom styles for the mega dropdown menu */
.dropdown-mega-menu {
  position: absolute !important;
  /* Ensure absolute positioning */
  left: auto !important;
  /* Align to the left edge of the viewport */
  right: 0 !important;
  /* Extend to the right edge of the viewport */
  /* Calculate width to span almost full screen with side margins */
  /* width: 80vw !important; */
  width: calc(100vw - 0px) !important;
  /* 100% viewport width minus 30px margin on each side */
  margin-left: auto !important;
  /* Center the dropdown horizontally */
  margin-right: auto !important;
  /* Center the dropdown horizontally */
  /* top: 100% !important; */
  /* Ensure it drops directly below the nav item */
  transform: none !important;
  /* Override any default Bootstrap transforms */
  border-radius: 1rem;
  /* Match other rounded elements */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175) !important;
  /* Consistent shadow */
  z-index: 1000;
  /* Ensure it's above other content */
}
/* Ensure dropdown items wrap text within their column */
.dropdown-mega-menu .dropdown-item {
  white-space: normal;
  /* Allow text to wrap within the item's width */
  word-break: break-word;
  /* Break long words if necessary */
  /* Adjust padding/margin within the item if needed */
}
/* Add padding to the columns within the dropdown for spacing between items */
/* These paddings will apply to the columns *inside* the .dropdown-mega-menu */
.dropdown-mega-menu .col-lg-4,
.dropdown-mega-menu .col-md-6,
.dropdown-mega-menu .col-12 {
  padding-left: 10px;
  /* Adjust as needed for spacing between columns */
  padding-right: 10px;
  /* Adjust as needed for spacing between columns */
}
/* Ensure the dropdown menu itself has appropriate padding */
.dropdown-mega-menu.p-3 {
  padding: 1.5rem !important;
  /* Increase padding around the entire menu content */
}
/* Ensure the row inside the dropdown wraps its columns */
.dropdown-mega-menu .row {
  flex-wrap: wrap;
  /* Ensure columns wrap to the next line on smaller screens */
  flex-direction: row !important;
}

.dropdown-mega-menu {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* for iOS */
}
/* Scrollable dropdown on smaller screens */
@media (max-width: 991.98px) {
  .navbar-collapse.show .dropdown-mega-menu {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    border-radius: 1rem !important;
    font-size: small;
    box-shadow: none !important;
    max-height: 60vh; /* This limits the height */
    overflow-y: auto; /* This makes it scroll internally */
    overflow-x: hidden;
  }
  .dropdown-mega-menu .row {
    flex-direction: row !important;
  }
  .dropdown-mega-menu .col-lg-4,
  .dropdown-mega-menu .col-md-6,
  .dropdown-mega-menu .col-12 {
    padding-left: 10px;
    padding-right: 10px;
    max-width: 50%;
    flex: 0 0 50%;
  }
}

/* Smallest Screens: Mobile - 1 column */
@media (max-width: 575.98px) {
  .dropdown-mega-menu .col-lg-4,
  .dropdown-mega-menu .col-md-6,
  .dropdown-mega-menu .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}