/* Custom CSS to adjust Hero Slider content position */
.with-floating-header .slider-card {
  -webkit-padding-before: calc(var(--header-height) + -25px) !important;
  padding-block-start: calc(var(--header-height) + -25px) !important;
}

@media (max-width: 767px) {
  .with-floating-header .slider-card {
    -webkit-padding-before: calc(var(--header-height) + -20px) !important;
    padding-block-start: calc(var(--header-height) + -20px) !important;
  }
}

/* ============================================= */
/* == Global Styles for Smooth Scrolling == */
/* ============================================= */
html {
  scroll-padding-top: 120px;
  scroll-behavior: smooth;
}

/* ============================================= */
/* == Custom CSS for About Us Page Banner == */
/* ============================================= */
.page-banner {
  height: 55vh !important;
  min-height: 55vh !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .page-banner {
    height: 45vh !important;
    min-height: 45vh !important;
  }
}
/* ============================================= */
/* == Custom CSS for Services Page == */
/* ============================================= */

/*
  DESKTOP: Styles for the sticky sidebar functionality on large screens.
*/
@media (min-width: 992px) {
  .sidebar-sticky-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 120px; /* Adjust based on header height */
  }

  /* This creates the scrollable container that our JS needs */
  .service-sidebar {
    height: calc(100vh - 140px);
    overflow-y: auto;
    scrollbar-width: none; /* Hide for Firefox */
    -ms-overflow-style: none; /* Hide for IE/Edge */
  }

  /* This hides the scrollbar in Chrome, Safari, etc. */
  .service-sidebar::-webkit-scrollbar {
    display: none;
  }
}

/*
  MOBILE: Hides the desktop sidebar wrapper.
*/
@media (max-width: 991.98px) {
  .sidebar-sticky-wrapper {
    display: none;
  }
}

/* General spacing for service items on all screen sizes. */
.service-details-content .service-item {
  margin-bottom: 60px;
}

.service-details-content .details-media {
    margin-bottom: 30px;
}

/* Mobile Fix for Service Points Spacing */
@media (max-width: 767.98px) {
  .service-item .row .col-md-6:nth-child(2) .text-lists {
    margin-top: 18px;
  }
}






/* ============================================= */
/* == MANUAL == */
/* ============================================= */
.text.text-18.para {
  padding-bottom: 20px;
}



/* ============================================= */
/* == Contact Page Icon Box Style == */
/* ============================================= */

.icon-box-style {
  /* Box Styling */
  background-color: #66bf32; /* Dark background color */
  border-radius: 12px; /* Rounded corners */
  width: 64px; /* Fixed width */
  height: 64px; /* Fixed height */
  
  /* Flexbox for Centering */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Ensure it doesn't shrink */
  flex-shrink: 0;
}

.icon-box-style svg {
  /* Icon Styling */
  color: #FFFFFF; /* White icon color */
  width: 32px !important; /* Force a consistent icon size */
  height: 32px !important;
}





/* ============================================= */
/* == Styles for Legal / Text-Heavy Pages == */
/* ============================================= */
.legal-content-wrapper {
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: #FFFFFF; /* Ensures a clean white background */
}

.legal-content-wrapper .legal-section {
  margin-bottom: 40px; /* Space between each numbered section */
}

.legal-content-wrapper .legal-section h2 {
  font-size: 32px; /* Larger heading size */
  font-weight: 700; /* Bold heading */
  color: #0065b4; /* Dark heading color */
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e9ecef; /* Subtle underline for separation */
}

.legal-content-wrapper .legal-section p {
  font-size: 16px;
  line-height: 1.8; /* More spacing between lines for readability */
  color: #5D666F; /* Softer text color than pure black */
  margin-bottom: 16px;
}

/* Responsive adjustments for mobile */
@media (max-width: 767px) {
  .legal-content-wrapper {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .legal-content-wrapper .legal-section h2 {
    font-size: 24px; /* Adjust heading size for mobile */
  }

  .legal-content-wrapper .legal-section p {
    font-size: 15px; /* Slightly smaller text on mobile */
  }
}

/* ============================================= */
/* == Mobile Height for Hero Slider == */
/* ============================================= */

/*
  On screens 767px wide or less, this forces the hero slider
  and each individual slide to be exactly 605px tall.
*/
@media (max-width: 767px) {
  .hero-slider,
  .hero-slider .swiper-slide,
  .hero-slider .slider-card {
    height: 605px !important;
    min-height: 605px !important;
  }
}


.footer-policies .link {
  color: #0065b4;          /* default blue */
  text-decoration: none;   /* optional: removes underline */
  transition: color 0.3s ease;
}

.footer-policies .link:hover {
  color: #66bf32 !important;          /* green hover */
}

.footer-widget-menu .widget-heading {
  color: #0065b4;
}


/* Default sidebar link style */
.service-sidebar .secvice-category {
  color: #000;                 /* default text color: black */
  background: transparent;     /* no bg default */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

/* Default SVG arrow color */
.service-sidebar .secvice-category svg {
  color: #000;
  transition: color 0.3s ease;
}

/* ACTIVE state */
.service-sidebar .secvice-category.active {
  background: #66bf32;        /* active bg */
  color: #fff;                /* active text */
}

/* Make the active arrow white too */
.service-sidebar .secvice-category.active svg {
  color: #fff;
}

/* Optional: Hover effect (not required but looks good) */
.service-sidebar .secvice-category:hover {
  background: #e6f5d9;        /* very light green hover */
}



.drawer-additional-menu .menu-link {
    font-size: 15px !important;
    line-height: 1.3 !important;
}


/* ============================================= */
/* == Floating Social Side Icons == */
/* ============================================= */

.social-side-bar {
  position: fixed; /* Stick to the viewport */
  top: 50%; /* Start at the middle */
  right: 0; /* Align to the right edge */
  transform: translateY(-50%); /* Perfectly center vertically */
  z-index: 1000; /* Ensure it's on top of other content */
  display: flex;
  flex-direction: column; /* Stack icons vertically */
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: #FFFFFF;

  /* Apply transitions here so reverse animation works */
  transition: 
    transform 0.5s ease,
    opacity 0.3s ease,
    box-shadow 0.5s ease;
}

.social-icon:hover {
  transform: scale(1.05); /* enlarge on hover */
  opacity: 1; /* optional */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

/* Icon size */
.social-icon svg {
  width: 35px;
  height: 35px;
}

/* Colors (unchanged) */
.whatsapp-icon {
  background-color: #25D366;
}

.instagram-icon {
  background: radial-gradient(circle at 30% 107%, 
    #fdf497 0%, #fdf497 5%, #fd5949 45%, 
    #d6249f 60%, #285AEB 90%);
}

/* ============================================= */
/* == Styles for PNG Bullet Points on Homepage == */
/* ============================================= */
.text-item .bullet-icon {
  width: 16px;   /* Match the size of the old SVG */
  height: 16px;  /* Match the size of the old SVG */
  margin-right: 8px; /* Space between icon and text */
  vertical-align: middle; /* Aligns icon with the text */
}


/* Default (Desktop) Logo Size */
.header-logo .site-logo {
    width: 220px;   /* increase width */
    height: auto;   /* keeps correct aspect ratio */
    max-width: none !important;   /* override global img rules */
}

/* Mobile Logo Size */
@media (max-width: 768px) {
    .header-logo .site-logo {
        width: 160px;  /* smaller width for mobile */
        height: auto;
    }
}



/* Default (Desktop) Logo Size */
.footer-logo .site-logo {
    width: 220px;   /* increase width */
    height: auto;   /* keeps correct aspect ratio */
    max-width: none !important;   /* override global img rules */
}

/* Mobile Logo Size */
@media (max-width: 768px) {
    .footer-logo .site-logo {
        width: 160px;  /* smaller width for mobile */
        height: auto;
    }
}



/* Desktop Logo Size */
.header-logo img {
    width: 220px !important;   /* increase width */
    height: auto !important;   /* maintain aspect ratio */
    max-width: none !important; /* override global img rules */
}

/* Mobile Logo Size */
@media (max-width: 768px) {
    .header-logo img {
        width: 200px !important;  /* smaller size in mobile */
        height: auto !important;
    }
}


/* ============================================= */
/* == Custom Styles for File Upload Field == */
/* ============================================= */
.file-upload-input {
  display: none; /* Hide the default browser input */
}

.file-upload-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px 0 20px;
  height: 56px;
  width: 100%;
  border: 1px solid var(--color-input-border);
  border-radius: var(--style-border-radius-inputs);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  font-family: var(--font-body--family);
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.file-upload-label:hover {
  border-color: var(--color-input-hover-border);
}

.file-upload-text {
  /* Prevents text from overflowing if filename is long */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-upload-button {
  background-color: #66bf32;
  color: var(--color-primary-button-text);
  padding: 10px 20px;
  border-radius: var(--style-border-radius-inputs);
  border: 1px solid #66bf32;
  flex-shrink: 0; /* Prevents the button from shrinking */
  margin-left: 15px;
  /* ★ Add transition for smooth color change */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.file-upload-button:hover {
  background-color: var(--color-primary-button-text);
  color:#66bf32 ;
}
/* ============================================= */
/* == Style for File Upload Info Tag == */
/* ============================================= */
.file-info-tag {
  display: flex;         /* Use flexbox for easy alignment */
  align-items: center;   /* Vertically center the icon and text */
  font-size: 13px;       /* Make the text smaller */
  color: #fff;         /* Use a softer, secondary text color */
  margin-top: 8px;         /* Add a little space above it */
  padding-left: 5px;     /* Align it slightly with the form field */
}

.info-icon {
  width: 16px;           /* Set a specific size for the icon */
  height: 16px;
  margin-right: 6px;     /* Add space between the icon and the text */
  flex-shrink: 0;        /* Prevent the icon from shrinking */
}