/* ======================================================
   Table of Contents
==========================================================
1. General Style                          (line 34)
    1.1 Root Style                        (line 47)
    1.2 Header Style                      (line 75)
    1.3 Link and Image Style              (line 116)
    1.4 Text Style                        (line 126)
    1.5 Icon Circle Style                 (line 165)
    1.6 Color Utility Class               (line 248)
    1.7 Background Utility Class          (line 258)
    1.8 Font Size Utility Class           (line 265)
    1.9 Width Utility Class               (line 278)
    1.10 Button Style                     (line 290)
        1.10.1 Navbar Button              (line 312)
    1.11 Default Width                    (line 332)
2. Navbar Style                           (line 342)
3. Hero Style                             (line 420)
4. About Style                            (line 481)
5. CEO Quote Style                        (line 507)
6. Choose Us Style                        (line 539)
7. Service Style                          (line 557)
8. Showcase Style                         (line 599)
9. FAQs Style                             (line 627)
10. Blog Post Style                       (line 675)
11. Video Style                           (line 730)
12. Team Style                            (line 744)
13. Contact Style                         (line 791)
14. Packages Style                        (line 920)
15. 404 Style                             (line 932)
16. Transition Style                      (line 941)
17. Footer Style                          (line 951)
18. Other Style                           (line 1022)
19. Media Queries                         (line 1031)
===========================================================
*/

* {
  list-style: none;
}

html,
body {
  overflow-x: hidden; /* Prevents horizontal scroll */
}

.width-base,
.section-m {
  max-width: 100%;
  width: 100%;
}

.container,
.container-lg {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}
/* General Style */
@font-face {
  font-family: "Philosopher";
  src: url(/font/Philosopher.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: url(/font/Lato.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* Root Style */
:root {
  /* Main heading color */
  --heading-color: #112015;
  /* Primary color for the site, often used for buttons, links, etc. */
  --color-main: #218037;
  /* --color-main: #5c9269; */
  /* Darker shade of the primary color, used for hover states or dark background elements */
  --color-darker: #204729;
  /* --color-darker: #1D4026; */
  /* Lighter shade of the primary color, for lighter elements or backgrounds */
  --color-lighter: #99c7a3;
  /* Subtle background color, used for subtle backgrounds or areas with less emphasis */
  --color-subtle: #ffffff;
  /* Border color, used for borders and dividers */
  --color-border: #fdfdfd;
  /* Error color, usually red, used for form validation or error messages */
  --color-error: #e22d2d;
  /* Warning color, yellow, used for warning messages or indicators */
  --color-warning: #e2d52d;
  /* Information color, blue, used for info messages or alert indicators */
  --color-info: #2663cf;
  /* Success color, green, used for success messages or successful actions */
  --color-success: #20bd3c;
  /* Text color 1 for headers*/
  --text-color-1: #696969;
  /* Text color 2 for body text */
  --text-color-2: #c7c7c7;
  /* Font family for main headers */
  --font-1: "Philosopher";
  /* Font family for body text or secondary headers */
  --font-2: "Lato";
}

/* Header Styles */
h1 {
  font-size: 60px; /* Large font size for main headers */
  font-weight: 500; /* Medium font weight */
  line-height: 1.1em; /* Slightly compact line height */
  letter-spacing: -1.3px; /* Tight letter spacing for a cleaner look */
  font-family: var(--font-1); /* Applying the main header font */
}

h2,
h3,
h4,
h5,
h6 {
  /* Standard header styles with decreasing font sizes */
  font-weight: 500;
  line-height: 1.2em;
  font-family: var(--font-1); /* Using the same font for all header tags */
}

h2 {
  font-size: 56px; /* Slightly smaller than h1 */
  letter-spacing: -1.3px;
}

h3 {
  font-size: 40px;
  letter-spacing: -1.1px;
}

h4 {
  font-size: 32px;
  letter-spacing: -1px;
}

h5 {
  font-size: 24px;
  letter-spacing: -0.8px;
}

h6 {
  font-size: 16px;
  letter-spacing: -0.6px;
}

/* Link and Image Styling */
a {
  text-decoration: none; /* Remove underline from links */
  cursor: pointer; /* Change cursor to pointer on hover */
}

img {
  object-fit: contain; /* Ensures images cover their container without distortion */
}

/* Text Style */
.heading {
  color: var(--heading-color); /* Main heading color */
}

.sub-heading {
  color: var(--color-main); /* Sub-heading color */
}
.text-subtitle {
  font-family: "Philosopher";
  font-size: 28px;
  line-height: 1, 2;
  letter-spacing: -0.8px;
}

.philosopher {
  letter-spacing: 0.8px;
}
.text-grey {
  font-family: "Lato";
  font-size: 16px;
  color: var(--text-color-1);
}
.text-white {
  font-family: "Lato";
  font-size: 16px;
  color: white;
}
.text-silver {
  font-family: "Lato";
  font-size: 16px;
  color: var(--text-color-2);
}
.text-color-1 {
  color: var(--text-color-1);
}
.text-color-2 {
  color: var(--text-color-2);
}

.font-1,
.philosopher {
  font-family: var(--font-1); /* Font family for headers */
}

.font-2,
.lato {
  font-family: var(--font-2); /* Font family for body text */
}

/* Icon Circle Styles */
.icon-circle-37-main,
.icon-circle-32,
.icon-circle-32-main,
.icon-circle-27-main,
.icon-circle-17,
.icon-circle-17-main,
.icon-circle-15-main {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: transparent;
  font-size: 16px;
  cursor: pointer;
}

.icon-circle-37-main {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-main);
  color: var(--color-main);
}

.icon-circle-32 {
  width: 32px;
  height: 32px;
  border: 1px solid white;
  color: white;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.icon-circle-32:hover {
  color: var(--color-darker);
  background-color: var(--color-subtle);
  border: 1px solid var(--color-subtle);
}

.icon-circle-32-main {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-main);
  color: var(--color-main);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.icon-circle-32-main:hover {
  color: white;
  background-color: var(--color-main);
  border: 1px solid var(--color-main);
}

.icon-circle-17 {
  width: 17px;
  height: 17px;
  border: 1px solid white;
  font-size: 15px;
  color: white;
}

.icon-circle-17-main {
  width: 17px;
  height: 17px;
  border: 1px solid var(--color-main);
  font-size: 15px;
}

.icon-circle-27-main {
  width: 27px;
  height: 27px;
  border: 1px solid var(--color-main);
  font-size: 15px;
}
.icon-circle-15-main {
  width: 15px;
  height: 15px;
  border: 1px solid var(--color-main);
  font-size: 13px;
}

/* Testimonial Circle Styles */
.testimonial-circle {
  width: 45px;
  height: 45px;
  background-color: grey;
  border-radius: 50%;
  margin-left: -7px;
}

.testimonial-circle-first {
  width: 45px;
  height: 45px;
  background-color: grey;
  border-radius: 50%;
}

/* Color Utility Classes */
.c-white {
  color: white;
}
.c-silver {
  color: var(--text-color-2);
}
.c-main {
  color: var(--color-main);
}
.c-black {
  color: black;
}
.c-text {
  color: rgb(255, 254, 250, 0.6);
}
.c-semi-black {
  color: var(--heading-color);
}
.c-semi-transparent {
  color: #00000080;
}
.c-grey {
  color: var(--text-color-1);
}

/* Background Utility Classes */
.bg-subtle {
  background-color: var(--color-subtle);
}
.bg-semi-white {
  background-color: var(--color-border) !important;
}
.bg-darker {
  background-image: url("/Prayanaa-src/footer.jpg");
  background-size: cover; /* Ensures the image covers the entire section */
  background-position: bottom; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
}
.bg-grey {
  background-color: var(--text-color-1);
}
.bg-main {
  background-color: var(--color-main);
}

/* Font Size Utility Classes */
.fs-12 {
  font-size: 12px;
}
.fs-13 {
  font-size: 13px;
}
.fs-14 {
  font-size: 14px;
}
.fs-15 {
  font-size: 15px;
}
.fs-16 {
  font-size: 16px;
}
.fs-17 {
  font-size: 17px;
}
.fs-18 {
  font-size: 18px;
}
.fs-22 {
  font-size: 22px;
}
.fs-24 {
  font-size: 24px;
}
.fs-26 {
  font-size: 26px;
}
.fs-48 {
  font-size: 48px;
}

/* Width Utility Classes */
.w-10 {
  width: 10%;
}
.w-20 {
  width: 20%;
}
.w-30 {
  width: 30%;
}
.w-40 {
  width: 40%;
}
.w-50 {
  width: 50%;
}
.w-60 {
  width: 60%;
}
.w-70 {
  width: 70%;
}
.w-80 {
  width: 80%;
}
.w-90 {
  width: 90%;
}
.w-100 {
  width: 100%;
}

/* Button Styles */
.btn-light,
.btn-dark {
  background-color: var(--color-main);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 24px;
  font-size: 14px;
  max-width: fit-content;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-light:hover {
  background-color: white;
  color: var(--text-color-1);
}

.btn-dark:hover {
  background-color: var(--color-darker);
  color: white;
}

/* CTA Button Animation */
.btn-cta {
  padding: 15px 30px;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(33, 128, 55, 0.2);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(33, 128, 55, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(33, 128, 55, 0.4);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(33, 128, 55, 0.2);
  }
}
/* Navbar Styles */
button.nav-link {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

button.nav-link:hover {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

button.nav-link:focus {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

/* Default Width */
.width-base {
  width: 1220px;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-left: auto;
  margin-right: auto;
}

/* Navbar Style */
.navbar {
  margin: 0 50px;
}

.navbar-toggler {
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  box-shadow: none;
  outline: none;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0;
}
.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none;
  box-shadow: none;
  border: none;
}
.navbar-toggler-icon {
  display: block;
  height: 1px;
  width: 30px;
  background-color: white;
  border-radius: 2px;
  transition: none;
}
.navbar-toggler-icon:nth-child(3) {
  width: 22px;
  height: 2px;
  margin-left: 8px;
}
.offcanvas.show .nav-link {
  color: var(--text-color-1);
  font-size: 12px;
}
.offcanvas.show .nav-link:hover {
  color: var(--color-main);
}
.nav-link {
  color: var(--text-color-2);
  font-size: 15px;
}
.nav-link:hover {
  color: white;
}
.dropdown {
  border-radius: 10px;
}
.dropdown-toggle {
  box-shadow: none !important;
}
.dropdown-menu {
  padding: 10px;
  color: var(--text-color-2);
  min-width: 200px;
}
.dropdown-menu a {
  padding-top: 10px;
  padding-bottom: 10px;
}
.dropdown-menu:hover a:hover {
  color: #fff;
  background-color: var(--color-main);
}
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}
.dropdown-menu {
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

/* Hero Style */
.content-m {
  margin-top: 6rem;
}
.section-m {
  margin-top: 5rem;
  width: 1220px;
}
.hero-title {
  width: 73%;
}
.banner-title {
  width: 100%;
  font-size: 80px;
  font-weight: 500;
  line-height: 1, 1px;
  letter-spacing: -1.3px;
}
.hero-subtitle {
  width: 60%;
  letter-spacing: 0.8px;
}
.hero-subtext {
  width: 70%;
}
.bg-hero {
  background-image: url("https://i.pinimg.com/736x/96/d1/97/96d197fe3c8d1195d13b5cb6d32a790a.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 1s ease-in-out;
}

.overlay-hero {
  background-color: rgba(17, 32, 21, 0.6);
  padding-bottom: 100px;
}

@media (max-width: 568px) {
  .overlay-hero {
    background-color: rgba(17, 32, 21, 0.6);
    padding-bottom: 100px;
    height: 100vh;
  }
}
.border-hero {
  border-bottom: 1px solid #c4c4c4;
}
.form-container {
  background: rgba(255, 255, 255, 0);
  border-radius: 10px;
  padding: 20px;
  max-width: 1000px;
  width: 100%;
  border: 1px solid white;
}
.form-control,
.form-control:focus,
.form-control::placeholder {
  background: rgba(255, 255, 255, 0);
  color: white;
  box-shadow: none;
  outline: none;
  border-color: white;
  font-family: "Philosopher";
  padding: 10px;
}
.hero-btn-container {
  margin-top: 2.5rem;
}
@media (max-width: 992px) {
  .hero-btn-container {
    text-align: left;
  }
}
.form-control:focus {
  background-color: white;
  color: black;
}
.date {
  color-scheme: dark;
}

/* About Style */
.about-bg {
  background-image: linear-gradient(
      rgba(17, 32, 21, 0.6),
      rgba(17, 32, 21, 0.6)
    ),
    url("..//Prayanaa-src/banner2.jpg");
  background-size: cover;
  background-position: center;
  height: 512px;
}
.img-about {
  border-radius: 10px;
  width: 100%;
}
.img-about-last {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}
.title-about {
  font-family: "Philosopher";
  font-size: 46px;
  font-weight: 500;
  line-height: 1, 2;
  letter-spacing: -1.3px;
}
.title-abouts {
  font-family: "Philosopher";
  font-size: 46px;
  font-weight: 500;
  line-height: 1, 2;
  letter-spacing: -1.3px;
}

/* CEO Quote Style */
.bg-ceo {
  background-image: linear-gradient(
      rgba(17, 32, 21, 0.6),
      rgba(17, 32, 21, 0.6)
    ),
    url("/Prayanaa-src/Quotebg.jpg");
  width: 100%;
  background-size: cover;
  background-position: center;
}
.ceo-quote {
  margin: auto;
  width: 80%;
  padding-left: 0;
  padding-right: 0;
  color: #ffffff;
  font-size: 26px;

  font-weight: 500;
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);
  line-height: 1.5;
  letter-spacing: 2px;
}
.ceo-name {
  font-family: "Philosopher", sans-serif;
  font-size: 2rem;
  text-align: center;
  color: var(--color-lighter);
  font-weight: bold;
  text-shadow: 0 0 10px rgba(153, 199, 163, 0.7);
  padding: 0.75rem;
  letter-spacing: 0.8px;
}
.signature {
  width: 160px;
  height: 34px;
}
.card {
  border: 1px solid #c4c4c4;
  border-radius: 10px;
  overflow: hidden;
}
.card:hover {
  border: 1px solid var(--color-main);
}
.card-body {
  background-color: var(--color-subtle);
  border-radius: 10px;
  padding: 30px;
  margin-top: 1rem !important;
}

/* Choose Us Style */
.bg-choose-us {
  background-image: linear-gradient(
      rgba(17, 32, 21, 0.6),
      rgba(17, 32, 21, 0.6)
    ),
    url("banner2.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 10px;
}
.bg-dark {
  background-image: url("banner2.jpg");
  background-size: cover; /* Ensures the image covers the entire section */
  background-position: bottom; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
}

.choose-position {
  top: -200px;
  left: 0;
  right: 0;
  margin: auto;
}

/* Services Style */
.bg-service {
  min-height: 455px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.custom-card {
  max-width: 80%;
  min-width: 80%;
  width: max-content;
  background: var(--color-border);
  border: 1px solid #c4c4c4;
  border-radius: 10px;
  overflow: hidden;
  position: absolute;
  left: 5%;
  bottom: 10%;
}

/* Showcase Style */
.custom-card-1 {
  background: var(--color-border);
  border: 1px solid #c4c4c4;
  border-radius: 10px;
  overflow: hidden;
}
.subtext-showcase {
  width: 550px;
  font-family: "Lato";
  font-size: 16px;
  color: var(--text-color-1);
  text-align: center;
}
.img-showcase {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.last-img-showcase {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* FAQS Style */
.img-faqs {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.accordion,
.accordion-button,
.accordion-item,
.accordion-header,
.accordion-body {
  border: none !important;
  box-shadow: none !important;
}
.accordion-button {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.6px;
  color: var(--text-color-1);
  background-color: var(--color-border);
}
.accordion-button:focus {
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
  color: var(--heading-color);
  background-color: transparent !important;
}
.accordion-button:hover {
  background-color: #e9ecef;
}
.accordion-button:active {
  background-color: transparent !important;
}
.accordion-item {
  margin-bottom: 10px;
}
.accordion-item {
  border: 1px solid #c4c4c4 !important;
  border-radius: 10px;
}
.accordion-header,
.accordion-body,
.accordion-button {
  border-radius: 10px !important;
}

/* Blog Post Style */
.img-blog-post {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  transform-origin: center;
}
.img-wrapper {
  overflow: hidden;
}
.img-blog-post-2 {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  transform-origin: center;
}
.img-blog-post-2:hover {
  transform: scale(1.1);
}
.img-blog-post-3 {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.custom-card-2 {
  background: var(--color-border);
  border: 1px solid #c4c4c4;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.3s ease-in-out;
}
.custom-card-2:hover .img-blog-post {
  transform: scale(1.1) rotate(3deg);
}
.learn-link {
  transition: color 0.3s ease;
}
.learn-link:hover {
  color: var(--text-color-1);
}
.blog-link {
  color: var(--color-main);
  font-size: 16px;
  font-family: var(--font-2);
}
.blog-link:hover {
  color: var(--heading-color);
}

/* Video Style */
.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* Aspect ratio 16:9 */
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Team Style */
.img-team {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.team-member {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.img-team {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
.team-member .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}
.team-member .team-name {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 11;
}
.team-member:hover .overlay {
  opacity: 1;
}
.team-member:hover .team-name {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Contact Style */
.form-container-2 {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  font-family: var(--font-2);
}
.form {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid var(--text-color-2);
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin-bottom: 20px;
}
.form-row.full-width {
  flex-direction: column;
}
.form-field {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.form-label {
  font-size: 14px;
  margin-bottom: 5px;
  color: var(--text-color-1);
}
.form-input,
.form-textarea {
  border: none;
  border-bottom: 1px solid var(--text-color-2);
  padding: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
}
.form-input:focus,
.form-textarea:focus {
  border-bottom-color: var(--color-border);
  outline: none;
}
.form-textarea {
  resize: none;
}
.form-button {
  width: 100%;
  align-self: center;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: var(--color-main);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.form-button:hover {
  background-color: var(--color-darker);
}
.form-select {
  border: none;
  border-radius: 0px;
  border-bottom: 1px solid var(--text-color-2);
  padding: 8px;
  font-size: 14px;
  background-color: transparent;
  transition: border-color 0.3s;
  appearance: none;
}
.form-select:focus {
  border-bottom-color: var(--color-border);
  outline: none;
  box-shadow: none;
}
.form-select::-ms-expand {
  display: none;
}
.form-select-wrapper {
  position: relative;
}
.form-select-wrapper::after {
  font-size: 12px;
  color: var(--text-color-2);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.popup-message {
  display: none;
  background-color: var(--color-border);
  color: var(--heading-color);
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
.border-radius-10 {
  border-radius: 10px;
}
.contact-image {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.contact-card {
  width: 65%;
  width: max-content;
  background: var(--color-border);
  border: 1px solid #c4c4c4;
  border-radius: 10px;
  overflow: hidden;
  position: absolute;
  right: 10%;
  bottom: 8%;
}
.maps {
  width: 100%;
  height: 420px;
  transition: filter 0.5s;
  display: block;
}

/* Packages Style */
.package-card {
  border: 1px solid var(--text-color-2);
  border-radius: 10px;
  padding: 32px;
  position: relative;
}
.package-card:hover {
  border: 1px solid var(--text-color-1);
}

/* 404 Style */
.bg-404 {
  background-image: linear-gradient(
      rgba(17, 32, 21, 0.6),
      rgba(17, 32, 21, 0.6)
    ),
    url("..//Prayanaa-src/banner2.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
}

/* Transition Style */
.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-in, transform 0.8s ease-in;
}
.fade-in.visible {
  opacity: 1;
}

/* Footer Style */
.email-input {
  flex: 1;
  background-color: transparent;
  color: white;
  border: none;
  outline: none;
}
.email-input::placeholder {
  color: white;
  opacity: 0.8;
}
.email-input:focus {
  outline: none;
}
.newsletter-container {
  border-bottom: #c9c9c9 1px solid;
  width: 60%;
}
.newsletter-container:hover {
  border-bottom: white 1px solid;
}
.btn-newsletter {
  background: transparent;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.newsletter-form {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  border-radius: 5px;
  overflow: hidden;
}
.btn-newsletter i {
  color: #c9c9c9;
}
.btn-newsletter:hover i {
  color: white;
}

.footer-link {
  color: rgb(255, 255, 255);
  font-size: 20px;
}
.footer-links {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-top: 24px;
}
.footer-links li {
  font-family: "Philosopher";
  margin: 10px 0;
}
.footer-logo {
  height: 75px;
  object-fit: contain;
}
.subtext-footer {
  width: 60%;
  letter-spacing: 0.6px;
}
.footer-padding {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Other Style */
.large-padding {
  padding-bottom: 200px;
}
.partner-margin {
  margin-top: -200px;
}

/* WhatsApp Float Icon */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #fff;
  border-radius: 15px;
  text-align: center;
  font-size: 50px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  color: #fff;
}
/* Media Query */
@media screen and (max-width: 1220px) {
  .navbar {
    margin: 0;
  }
  .section-m {
    margin-top: 8rem;
    width: 100%;
  }
  .width-base {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 992px) {
  .navbar {
    margin: 0;
  }
  h1 {
    font-size: 60px;
    line-height: 1.1em;
    font-family: var(--font-1);
  }
  h2 {
    font-size: 40px;
    line-height: 1.2em;
    font-family: var(--font-1);
  }
  h3 {
    font-size: 28px;
    line-height: 1.2em;
    font-family: var(--font-1);
  }
  h4 {
    font-size: 24px;
    line-height: 1.2em;
    font-family: var(--font-1);
  }
  h5 {
    font-size: 22px;
    line-height: 1, 1em;
    font-family: var(--font-1);
  }
  h6 {
    font-size: 16px;
    line-height: 1, 2em;
    font-family: var(--font-1);
  }
  .border-hero {
    display: none;
  }
  .hero-title {
    margin-top: 24px;
    width: 95%;
    line-height: normal;
  }
  .hero-subtitle {
    width: 80%;
  }
  .section-m {
    margin-top: 3rem;
    width: 100%;
    padding-left: 32px;
    padding-right: 32px;
  }
  .width-base {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 32px;
    padding-right: 32px;
  }
  .img-about {
    border-radius: 10px;
    width: 100%;
  }
  .img-about-last {
    border-radius: 10px;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .ceo-quote {
    width: 90%;

    padding-left: 0;
    padding-right: 0;
  }
  .signature {
    width: 148px;
    height: 32px;
  }
  .custom-card {
    max-width: 100%;
    min-width: 100%;
    position: absolute;
    left: 5%;
    bottom: 10%;
  }
  .img-faqs {
    width: 100%;
    height: 100%;
    max-height: 512px;
  }
  .newsletter-container {
    width: 100%;
  }
  .contact-image {
    max-height: 512px;
    border-radius: 10px;
  }
  .dropdown-menu {
    border: none;
  }
  .dropdown-item {
    background-color: white !important;
    font-size: 12px;
    color: var(--text-color-1) !important;
  }
  .dropdown-item:hover {
    color: var(--color-main) !important;
  }
}
@media screen and (max-width: 450px) {
  .navbar {
    margin: 0;
  }
  h1 {
    font-size: 40px;
    font-family: var(--font-1);
  }
  h2 {
    font-size: 32px;
    font-family: var(--font-1);
  }
  h3 {
    font-size: 24px;
    font-family: var(--font-1);
  }
  h4 {
    font-size: 22px;
    font-family: var(--font-1);
  }
  h5 {
    font-size: 18px;
    font-family: var(--font-1);
  }
  h6 {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-1);
  }
  .hero-title {
    margin-top: 24px;
    width: 100%;
    line-height: normal;
  }
  .banner-title {
    margin-top: 24px;
    line-height: normal;
    font-size: 24px;
  }
  .hero-subtitle {
    width: 100%;
  }
  .hero-subtext {
    width: 100%;
  }
  .section-m {
    margin-top: 6rem;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .width-base {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .img-about {
    border-radius: 10px;
    width: 100%;
    height: 100%;
  }
  .img-about-last {
    border-radius: 10px;
    width: 100%;
    height: 256px;
  }
  .title-about {
    text-align: center;
    font-size: 30px;
    width: 100%;
    padding-bottom: 0;
  }
  .title-abouts {
    font-size: 30px;
    width: 100%;
    padding-bottom: 0;
  }
  .text-subtitle {
    font-size: 24px;
  }
  .ceo-quote {
    width: 100%;
    font-size: 20px;
    padding-left: 0;
    padding-right: 0;
  }
  .ceo-name {
    font-size: 1.5rem;
  }
  .signature {
    width: 70px;
    height: 15px;
  }
  .bg-service-1 {
    background-image: none;
    min-height: 10px;
  }
  .bg-service-2 {
    background-image: none;
    min-height: 10px;
  }
  .bg-service-3 {
    background-image: none;
    min-height: 10px;
  }
  .bg-service-4 {
    background-image: none;
    min-height: 10px;
  }
  .custom-card {
    max-width: 100%;
    min-width: 100%;
    position: static;
    /* left: 0; */
    bottom: 0;
  }
  .subtext-showcase {
    width: 100%;
  }
  .last-img-showcase {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    max-height: 256px;
    object-fit: cover;
  }
  .img-faqs {
    width: 100%;
    height: 100%;
    max-height: 256px;
  }
  .subtext-footer {
    width: 100%;
  }
  .newsletter-container {
    width: 100%;
  }
  .about-bg {
    background-image: linear-gradient(
        rgba(17, 32, 21, 0.6),
        rgba(17, 32, 21, 0.6)
      ),
      url("/Prayanaa-src/banner2.jpg");
    background-size: cover;
    background-position: center;
    height: 400px;
  }
  .contact-image {
    border-radius: 10px;
  }
  .contact-card {
    width: 90%;
    left: 0;
    right: 0;
    margin: auto;
  }
  .dropdown-menu {
    border: none;
  }
  .dropdown-item {
    background-color: white !important;
    font-size: 12px;
    color: var(--text-color-1) !important;
  }
  .dropdown-item:hover {
    color: var(--color-main) !important;
  }
}

.map-section {
  padding: 3rem 0;
  background: white;
}

.map-container {
  width: 100%;
  height: 450px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* -------------------------------------------------------------------------------------- */
/* Scroll Animation Styles */
.scroll-animate {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Fade In Up Animation */
.fade-up {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.7s ease-out;
}

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

/* Fade In Left Animation */
.fade-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 0.8s ease-out;
}

.fade-left.animate-in {
  opacity: 1;
  transform: translateX(0);
}

/* Fade In Right Animation */
.fade-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.8s ease-out;
}

.fade-right.animate-in {
  opacity: 1;
  transform: translateX(0);
}

/* Scale Animation */
.scale-in {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.7s ease-out;
}

.scale-in.animate-in {
  opacity: 1;
  transform: scale(1);
}

/* Stagger Animation for Cards */
.stagger-1 {
  transition-delay: 0.1s;
}
.stagger-2 {
  transition-delay: 0.2s;
}
.stagger-3 {
  transition-delay: 0.3s;
}
.stagger-4 {
  transition-delay: 0.4s;
}
.stagger-5 {
  transition-delay: 0.5s;
}
.stagger-6 {
  transition-delay: 0.6s;
}

/* Bounce Animation for Icons */
.bounce-in {
  opacity: 0;
  transform: scale(0.3) rotate(-180deg);
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-in.animate-in {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Slide In Animation */
.slide-in-bottom {
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-in-bottom.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Rotate Animation */
.rotate-in {
  opacity: 0;
  transform: rotate(-180deg) scale(0.8);
  transition: all 0.8s ease-out;
}

.rotate-in.animate-in {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Counter Animation */
.counter {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.counter.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Testimonial specific animations */
.testimonial-card {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.testimonial-card.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Service card hover effects */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Progressive blur effect */
.blur-in {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(30px);
  transition: all 1s ease-out;
}

.blur-in.animate-in {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

.service-card-modern {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.service-card-modern:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-image-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.service-card-modern:hover .card-image {
  transform: scale(1.05);
}

.card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 200px);
}

.card-date {
  color: #999;
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 400;
}

.card-title {
  color: #2c2c2c;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.card-description {
  color: #6c757d;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.card-price {
  color: #8b4513;
  font-size: 18px;
  font-weight: 600;
}

.card-author {
  color: #6c757d;
  font-size: 14px;
  font-weight: 500;
}

.btn-book {
  background-color: #228d4f;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
  display: block;
}

.btn-book:hover {
  background-color: #204729;
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
}

.fade-left {
  animation: fadeInLeft 0.6s ease forwards;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .card-content {
    padding: 20px;
  }

  .card-title {
    font-size: 20px;
  }

  .card-description {
    font-size: 15px;
  }
}

/* Large screens (1200px and above) */
@media (min-width: 1200px) {
  .card-title {
    font-size: 1.15rem;
  }

  .card-description {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* Medium screens - Tablets (768px to 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .card-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .card-description {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}

/* Small screens - Mobile landscape (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .card-title {
    font-size: 0.95rem;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .card-description {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .title-about {
    font-size: 0.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
  }
  .bg-hero {
    background-position: right;
  }
}

/* Extra small screens - Mobile portrait (up to 575px) */
@media (max-width: 575px) {
  .card-title {
    font-size: 0.9rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
  }

  .span-head {
    font-size: 60%;
  }
  .card-description {
    font-size: 0.8rem;
    line-height: 1.3;
  }

  /* Reduce card body padding on very small screens */
  .card-body {
    padding: 1rem 0.75rem;
    margin-top: 0.75rem !important;
    font-size: 70%;
  }
  .bg-hero {
    background-position: right;
  }
}

/* Very small screens (up to 400px) */
@media (max-width: 400px) {
  .card-title {
    font-size: 0.85rem;
  }

  .card-description {
    font-size: 0.75rem;
  }

  .card-body {
    padding: 0.75rem 0.5rem;
  }
}

img[src*="arthritis.png"] {
  filter: brightness(0) invert(1);
}
img[src*="back-pain.png"] {
  filter: brightness(0) invert(1);
}
img[src*="backbone.png"] {
  filter: brightness(0) invert(1);
}
img[src*="antihistamines.png"] {
  filter: brightness(0) invert(1);
}
img[src*="psoriasis.png"] {
  filter: brightness(0) invert(1);
}
img[src*="hair-loss.png"] {
  filter: brightness(0) invert(1);
}
img[src*="stroke.png"] {
  filter: brightness(0) invert(1);
}

/* Gallery Styles - Add this to your CSS file */

/* Gallery Styles - Clean Grid Layout (Similar to Reference Site) */

/* Gallery Grid Container */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 40px 0;
}

/* Gallery Items */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  background: var(--color-border);
  border: 1px solid #f0f0f0;
  aspect-ratio: 4/3; /* keeps images consistent */
  opacity: 0;
  transform: translateY(30px);
}

.gallery-item.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.gallery-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  border-color: var(--color-main);
}

/* Gallery Images */
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all 0.5s ease;
  opacity: 0;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.gallery-img.loaded,
.gallery-item.fade-in.visible .gallery-img {
  opacity: 1;
}

/* Responsive Design */
@media screen and (max-width: 992px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}
@media screen and (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media screen and (max-width: 576px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
@media screen and (max-width: 450px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .gallery-item {
    border-radius: 8px;
  }
}

.bg-youtube {
  background-image: url(https://static.vecteezy.com/system/resources/previews/043/994/048/non_2x/ai-generated-theme-of-healthy-and-natural-traditional-chinese-medicine-photo.jpg);
}

.card-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.95rem; /* optional: adjust size */
  line-height: 1.4; /* optional: spacing for better readability */
}

.clamp-33 {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* limit to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* csnodcns */
#scrollContainer::-webkit-scrollbar {
  display: none; /* Hide scrollbar */
}

.iconsicon {
  filter: brightness(0) invert(1);
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.page-dots {
  display: flex;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot:hover {
  background-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.1);
}

.dot.active {
  background-color: #ffffff;
  transform: scale(1.2);
}

#testimonialPagination .dot {
  margin: 0 4px;
}
#testimonialPagination .dot.active {
  background: #007bff; /* highlight active */
}
#testimonialPagination .dot:hover {
  background: #555555;
}

.blog-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 10px;
}

.blog-scroll {
  display: flex;
  gap: 20px;
}

.blog-scroll .blog-card {
  flex: 0 0 calc(33.333% - 20px); /* 3 cards visible on desktop */
  min-width: 280px; /* fallback for mobile */
  box-sizing: border-box;
}

/* Custom scrollbar */
.blog-scroll-wrapper::-webkit-scrollbar {
  height: 6px;
}
.blog-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.translate-bar {
  color: white;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  border-radius: 8px;
  max-width: 250px;
  margin: 7px auto;
}

.translate-bar select {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #bbb;
  font-size: 14px;
  cursor: pointer;
  background: white;
}

.translate-bar select:hover {
  border-color: #333;
}

@media screen and (max-width: 450px) {
  .translate-bar {
    color: black;
    margin: 0;
  }

  .youtube-video {
    height: 200px;
    width: 95%;
  }
}

/* Testimonial Popup Styles */
.testimonial-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.testimonial-popup-content {
  background: white;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: popupSlideIn 0.3s ease-out;
}

@keyframes popupSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.popup-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: #666;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.popup-close-btn:hover {
  background-color: #f0f0f0;
  color: #333;
}

.popup-body {
  padding: 40px 30px 30px;
}

.pop-up-message {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 30px;
}

.popup-footer {
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.btn-read-more {
  background: none;
  border: none;
  color: #007bff;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  margin: 0;
  text-decoration: underline;
  transition: color 0.3s ease;
  display: inline;
  vertical-align: baseline;
  font-family: inherit;
  line-height: inherit;
}

.btn-read-more:hover {
  color: #0056b3;
}

.testimonial-message {
  min-height: 80px;
  display: block;
  line-height: 1.6;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .testimonial-popup-content {
    width: 95%;
    max-height: 90vh;
  }

  .popup-body {
    padding: 35px 20px 20px;
  }

  .popup-message {
    font-size: 15px;
  }
}

/* ======================================================
   Search Bar Styles - Matching Prayanaa Design System
========================================================*/

/* Search Wrapper */
.search-wrapper {
  width: 100%;
  max-width: 1220px;

  padding: 0 15px;
}

/* Search Input Container */
.search-wrapper .position-relative {
  position: relative;
  width: 100%;
}

/* Search Input Field */
#serviceSearch {
  width: 100%;
  padding: 18px 24px 18px 56px;
  border: 2px solid #e0e0e0;
  border-radius: 50px;
  font-family: var(--font-2), "Lato", sans-serif;
  font-size: 16px;
  color: var(--heading-color);
  background-color: var(--color-border);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#serviceSearch:focus {
  outline: none;
  border-color: var(--color-main);
  box-shadow: 0 4px 15px rgba(33, 128, 55, 0.15);
  background-color: white;
}

#serviceSearch::placeholder {
  color: var(--text-color-1);
  opacity: 0.7;
}

/* Search Icon */
.search-wrapper .fa-search {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-main);
  font-size: 18px;
  pointer-events: none;
  transition: color 0.3s ease;
}

#serviceSearch:focus ~ .fa-search {
  color: var(--color-darker);
}

/* Search Results Info */
#searchResults {
  text-align: center;
  padding: 8px 0;
  margin-bottom: 1rem;
  animation: fadeIn 0.3s ease;
}

#searchResults small {
  font-family: var(--font-2), "Lato", sans-serif;
  color: var(--text-color-1);
  font-size: 14px;
}

#resultCount {
  font-weight: 600;
  color: var(--color-main);
}

/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ======================================================
   Responsive Design
========================================================*/

/* Large Screens (1220px and above) */
@media screen and (min-width: 1220px) {
  .search-wrapper {
    padding: 0;
  }
}

/* Medium Screens - Tablets (768px to 1199px) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .search-wrapper {
    max-width: 100%;
    padding: 0 32px;
  }

  #serviceSearch {
    padding: 16px 20px 16px 52px;
    font-size: 15px;
  }

  .search-wrapper .fa-search {
    left: 22px;
    font-size: 17px;
  }
}

/* Small Screens - Mobile Landscape (576px to 767px) */
@media screen and (min-width: 576px) and (max-width: 767px) {
  .search-wrapper {
    padding: 0 20px;
  }

  #serviceSearch {
    padding: 15px 18px 15px 50px;
    font-size: 14px;
    border-radius: 40px;
  }

  .search-wrapper .fa-search {
    left: 20px;
    font-size: 16px;
  }
}

/* Mobile Portrait (up to 575px) */
@media screen and (max-width: 575px) {
  .search-wrapper {
    padding: 0 20px;
  }

  #serviceSearch {
    padding: 14px 16px 14px 48px;
    font-size: 14px;
    border-radius: 35px;
    border-width: 1.5px;
  }

  #serviceSearch::placeholder {
    font-size: 13px;
  }

  .search-wrapper .fa-search {
    left: 18px;
    font-size: 15px;
  }

  #searchResults {
    padding: 6px 0;
  }

  #searchResults small {
    font-size: 13px;
  }
}

/* Extra Small Screens (up to 400px) */
@media screen and (max-width: 400px) {
  .search-wrapper {
    padding: 0 15px;
  }

  #serviceSearch {
    padding: 12px 14px 12px 44px;
    font-size: 13px;
    border-radius: 30px;
  }

  #serviceSearch::placeholder {
    font-size: 12px;
  }

  .search-wrapper .fa-search {
    left: 16px;
    font-size: 14px;
  }
}

/* ======================================================
   Search Bar Integration with Services Section
========================================================*/

/* Add spacing when search is within services section */
.bg-subtle .search-wrapper {
  padding-top: 0;
}

/* Loading State (Optional Enhancement) */
#serviceSearch.searching {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(33, 128, 55, 0.1) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: searchLoading 1.5s infinite;
}

@keyframes searchLoading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Clear Button (Optional Enhancement) */
.search-clear-btn {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-color-1);
  cursor: pointer;
  padding: 5px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.search-clear-btn.visible {
  opacity: 1;
  pointer-events: all;
}

.search-clear-btn:hover {
  color: var(--color-main);
}

/* Accessibility - Focus Visible */
#serviceSearch:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
  #serviceSearch {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
  }

  #serviceSearch:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-lighter);
  }

  #serviceSearch::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
}

/* ======================================================
   Search Results Text Highlighting
========================================================*/

/* Highlight matched text in service cards */
.highlight {
  background-color: #ffeb3b;
  color: var(--heading-color);
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(255, 235, 59, 0.3);
}

/* Alternative green highlight to match brand */
.highlight-green {
  background-color: rgba(33, 128, 55, 0.2);
  color: var(--color-darker);
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
  border-bottom: 2px solid var(--color-main);
}

/* Animated highlight effect */
.highlight-animated {
  background: linear-gradient(
    120deg,
    rgba(33, 128, 55, 0.1) 0%,
    rgba(33, 128, 55, 0.3) 50%,
    rgba(33, 128, 55, 0.1) 100%
  );
  background-size: 200% 100%;
  animation: highlightShine 2s ease infinite;
  color: var(--color-darker);
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
}

@keyframes highlightShine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Subtle highlight (less intrusive) */
.highlight-subtle {
  background-color: rgba(33, 128, 55, 0.15);
  color: var(--heading-color);
  padding: 1px 3px;
  border-radius: 2px;
  font-weight: 500;
}

/* Service card text with highlights */
.service-card .text-subtitle .highlight,
.service-card .text-grey .highlight {
  display: inline;
  line-height: inherit;
}

/* Responsive highlight adjustments */
@media screen and (max-width: 768px) {
  .highlight,
  .highlight-green,
  .highlight-animated,
  .highlight-subtle {
    padding: 1px 3px;
    font-size: inherit;
  }
}

@media screen and (max-width: 450px) {
  .highlight,
  .highlight-green,
  .highlight-animated,
  .highlight-subtle {
    padding: 1px 2px;
    border-radius: 2px;
  }
}