.cinzel-decorative-regular {
    font-family: "Cinzel Decorative", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .cinzel-decorative-bold {
    font-family: "Cinzel Decorative", serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .cinzel-decorative-black {
    font-family: "Cinzel Decorative", serif;
    font-weight: 900;
    font-style: normal;
  }
  

  /* Hide the scrollbar in WebKit browsers */
::-webkit-scrollbar {
  width: 0px; /* Removes scrollbar space */
  background: transparent; /* Optional */
}

/* For Firefox */
* {
  scrollbar-width: none; /* Firefox */
}

/* Custom scrollbar for WebKit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 12px; /* Scrollbar width */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* Track color */
}

::-webkit-scrollbar-thumb {
  background-color: #7D908C; /* Scroll thumb color */
  border-radius: 10px;       /* Rounded corners */
  border: 3px solid #f1f1f1; /* Space around thumb */
}

/* Custom scrollbar for Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #7D908C #f1f1f1; /* thumb color + track color */
}

/* WebKit browsers */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #7D908C;
  border-radius: 10px;
  border: 3px solid #f1f1f1;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #7D908C #f1f1f1;
  user-select: none; /* Prevent text selection */
}

/* Use this class for the Cinzel Decorative font */
.font-cinzel {
    font-family: 'Cinzel Decorative', serif;
  }
  
  /* Use this class for the Afacad font */
  .font-afacad {
    font-family: 'Afacad', sans-serif;
  }
  
  /* Use this class for the Comfortaa font */
  .font-comfortaa {
    font-family: 'Comfortaa', sans-serif;
  }  
    /* Use this class for the Alex Brush font */
    .font-alex-brush {
      font-family: 'Alex Brush', cursive;
    }
    
  
html {
    font-size: 16px;
    scroll-behavior: smooth !important;
}

body {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    /* background-color: #f0f0f0; */
    /* background-color: darkgoldenrod !important; */
    color: #4b5563;
    overflow-x: hidden;
}
  .header-font {
    font-family: 'Cormorant Garamond', serif;
  }
  .zoom-on-hover {
    transition: transform 0.5s ease-in-out;
  }
  .zoom-on-hover:hover {
    transform: scale(1.05);
  }
  .button-hover-effect {
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
  }
  .button-hover-effect:hover {
    background-color: #4b5563;
    transform: translateY(-2px);
  }
  .input {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    outline: none;
  }
  .input:focus {
    border-color: #4b5563;
    box-shadow: 0 0 0 2px rgba(75,85,99,0.3);
  }
  .nav-link {
    /* color: #4b5563; */
    font-weight: 600;
    transition: color 0.3s;
  }
  .navbar-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
    will-change: transform;
    background-color: #7D908C;
    /* background-color: #579a8b; */
    color: white !important;
  }
.text-d {
    color: #7D908C !important;
  }
.bg-d {
    background-color: #7D908C !important;
  }
  .navbar-hidden {
    transform: translateY(-100%);
  }
  .mobile-menu-expanded {
    max-height: 500px;
  }
  #mobile-menu {
    transition: max-height 0.3s ease-in-out;
  }
  
  #mobile-menu-btn {
    z-index: 1000; /* or a value higher than any other element */
  }
  .no-scroll {
    overflow: hidden;
}

  /* Class for showing the mobile menu with animation */
/* Class for showing the dark overlay */
.nav-overlay-visible {
    opacity: 1;
}

/* Initial state of the overlay */
#nav-overlay {
    opacity: 0;
}
  /* Zoom animation for modal */
#service-modal.show #service-modal-content {
    opacity: 1;
    transform: scale(1);
  }
  #service-modal-content {
    transform: scale(0.9);
    opacity: 0;
  }
  
  .nav-link::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -2px; /* Adjust as needed for spacing */
    left: 0;
    background-color: white; /* Or the color you want for the underline */
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link {
    position: relative; /* Make sure this is present to position the pseudo-element correctly */
}

/* Hero image styles */

/* Styling for the new hero image container */
.hero-img-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: -2rem; /* Pulls the image up to touch the header above */
    z-index: 5; /* Ensures the image stays below the header content */
  }
  
  /* Styling for the hero image itself */
  .hero-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

    /* Service image styles */
  .service-img {
    height: 600px; /* Ya koi bhi height jo aap chahte hain */
    width: 100%;
    object-fit: cover;
  }


/* Bounce animation class */
  .animate-bounce {
    animation: bounce-up 2s ease-in-out infinite; /* Adjust duration and timing here */
}
#backToTopBtn.animate-bounce {
  animation: bounce-up 2s ease-in-out infinite;
}


  @media (max-width: 768px) {
    .service-img {
      height: 450px; /* Fixed height for larger screens */
      object-fit: cover; /* Ensures the image covers the container */
      object-position: center; /* Centers the image within the container */
    }
  }

  /* Media Query for Mobile View */
@media (max-width: 768px) { /* Adjust breakpoint as per your needs, e.g., 640px for small phones */
    .hero-image {
      height: 500px; /* Increase height for mobile to show more of the image vertically */
      object-position: center top; /* Adjust position to focus on the top part of the image */
    }
  } 


  @keyframes border-glow {
    0%, 100% {
        box-shadow: 0 0 8px 3px rgba(16, 185, 129, 0.5); /* A softer glow at start/end */
    }
    50% {
        box-shadow: 0 0 15px 5px rgba(5, 150, 105, 0.7); /* A more intense glow in the middle */
    }
}

/* Bounce animation */
@keyframes bounce-up {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px); /* Adjust the jump height here */
    }
}

/* Apply the border glow animation */

.animate-border-glow {
    animation: border-glow 2s ease-in-out infinite;
}


/* swiper js styles */
 /* Size of swiper */
 .swiper {
  width: 100%;
  height: 100%;
}

/* Slides */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}

/* Progress circle */
.autoplay-progress {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--swiper-theme-color);
}

.autoplay-progress svg {
  --progress: 0;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 10;
  width: 100%;
  height: 100%;
  stroke-width: 4px;
  stroke: var(--swiper-theme-color);
  fill: none;
  stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
  stroke-dasharray: 125.6;
  transform: rotate(-90deg);
}

/* === Custom color for Swiper arrows === */
.swiper-button-next::after,
.swiper-button-prev::after {
  color: #7D908C !important; /* changes the actual arrow icon color */
  font-size: 24px; /* optional: adjust arrow size */
}

/* === Custom color for pagination bullets === */
.swiper-pagination-bullet {
  background: #7D908C !important; /* inactive bullets */
  opacity: 0.6;
}
.swiper-pagination-bullet-active {
  background: #7D908C !important; /* active bullet */
  opacity: 1;
}

/* === Custom color for autoplay progress circle === */
.autoplay-progress {
  color: #7D908C; /* the number */
}

.autoplay-progress svg {
  stroke: #7D908C; /* circle stroke */
}



.align-top {
  align-self: flex-start; /* this pins one flex item to the top */
}