/* client carousel */
/* .carousel-track {
      display: flex;
      width: max-content;
      animation: scroll-left 6s linear infinite;
      background: 
    linear-gradient(to right, #555 0%, #555 50px, transparent 50px, transparent calc(100% - 50px), #555 calc(100% - 50px), #555 100%);
  padding: 20px 0;
} */
.w-97 {
  width: 97%;
}

.border-9F9F9F {
  border-color: #9f9f9f;
}

.w-42 {
  width: 42px;
}

/* @keyframes scroll-left {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    } */

/* .blur-logo {
      filter: blur(2px);
      opacity: 0.6;
      transform: scale(0.95);
    } */

.carousel-container {
  position: relative;
  overflow: hidden;
}

.custom-border-hover {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  z-index: 1;
}

.custom-border-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  /* Border thickness */
  border-radius: 26px;
  background: linear-gradient(124.9deg, #97c9ff -4.18%, #8effd9 70.55%);
  border-color: white;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.7s ease;
  opacity: 0;
}

.custom-border-hover:hover::before {
  opacity: 1;
}

.custom-box-hover {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  z-index: 1;
  background-color: transparent; /* Default state */
  transition: box-shadow 0.8s ease;
}

.custom-box-hover:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); /* On hover → white */
}

/* .custom-border-hover:hover {
  box-shadow: 0px 3.51px 214.26px 0px #55C6A0;
} */

.carousel-container::before,
.carousel-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 150px;
  /* fade width */
  height: 100%;
  z-index: 2;
}

.carousel-container::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.8), transparent);
}

.carousel-container::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent);
}

.carousel-track {
  display: flex;
  width: max-content;
  animation: scroll-left 6s linear infinite;
}
.w-30 {
  width: 60%;
}
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.mt-4 {
  margin-top: 16px;
}

.px-1 {
  padding-left: 10px;
  padding-right: 10px;
}

div#carouselImage img {
  border: 0.69px solid #999999;
  /* solid border color */
  border-radius: 10px;
  /* or use rounded-lg */
}

nav {
  border-radius: none;
  border: none;
  background: transparent;
}

nav .design-correction {
  border-radius: 10px;
  border: 0.3px solid #0a8783;
  background: #fff;
  /* box-shadow: 0px 4px 120px 0px #0A878326; */
}

.pt-100px {
  padding-top: 100px;
}

.logo {
  transition: all 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}
/* Carousel track */
#featuredProductCarousel .fp-carousel-track {
  display: flex;
  /* gap: 1rem; */
  width: max-content;
  animation: fp-scroll-left 15s linear infinite; /* faster */
}

@keyframes fp-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-33.33%);
  }
}

/* Pause on hover */
#featuredProductCarousel:hover .fp-carousel-track {
  animation-play-state: paused;
}

/* Fade effect */
.fp-carousel-mask::before,
.fp-carousel-mask::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  /* background: linear-gradient(to right, rgba(229,240,250,1), rgba(229,240,250,0)); */
}

.fp-carousel-mask::after {
  right: 0;
  transform: rotateZ(180deg);
}

/* .fp-carousel-mask::before {
      left: 0;
      background: linear-gradient(to right, #00D2C5, transparent);
    }

    .fp-carousel-mask::after {
      right: 0;
      background: linear-gradient(to left, #00D2C5, transparent);
    } */
.banner-heading {
  font-size: 54px;
}

/* p{
    font-size: 20px;
} */

.transition-transform {
  transition: transform 0.5s ease-in-out;
}

.pt-88 {
  padding-top: 88px;
}

.zoom-bg {
  transition: transform 1s ease;
}

.hover-parent:hover .zoom-bg {
  transform: scale(1.1);
}

.slide-up-button .animation-new {
  transform: translateY(40px);
  opacity: 0;
  transition: all 1.2s ease;
}

.hover-parent:hover .slide-up-button .animation-new {
  transform: translateY(-95px);
  opacity: 1;
  margin-bottom: 40px;
}

.hover-parent:hover .content-wrapper {
  margin-bottom: 90px;
}

.hover-parent .content-wrapper {
  transition: all 1s ease;
}

.content-wrapper {
  transition: transform 0.6s ease;
}

.hover-parent:hover .content-wrapper {
  transform: translateY(-20px);
}

.feat-product {
  background: #04c8ae;
}

#testimonial-carousel {
  transition: transform 0.5s ease-in-out;
  will-change: transform;
  align-items: center;
}
.h_aligmant.lg\:h-180.overflow-hidden.relative.bg-white.rounded.shadow-md.text-black,
.h_aligmant.lg\:h-180.overflow-hidden.relative.bg-white.rounded.shadow-md.text-black
  .testimonial.box-border {
  height: 720px !important;
}
.h_aligmant.lg\:h-180.overflow-hidden.relative.bg-white.rounded.shadow-md.text-black
  .testimonial.box-border {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.p_130 {
  padding: 130px;
  margin-bottom: 100px !important;
}

.p_90 {
  padding: 80px 80px;
  /* margin-bottom: 100px !important; */
}

.z_99 {
  z-index: 99;
}
.pl_25 {
  padding-left: 25px;
}
.pad_b_100 {
  padding-bottom: 100px;
  padding-left: 10px;
  padding-right: 10px;
}
.pad_b_100:last-child {
  padding-bottom: 0;
}
.pr_25 {
  padding-right: 25px;
}
.pi_80 {
  padding-left: 100px;
}
.pb_40 {
  padding-bottom: 40px;
}
.pd_50 {
  padding-right: 70px;
}
.pr_80 {
  padding-right: 100px;
}
.h_700 {
  height: 700px;
}
.pdl_50 {
  padding-left: 70px;
}
.max_width_100 {
  max-width: 100% !important;
  width: 100% !important;
}
.shadow_md {
  box-shadow: 0px 4px 4px 0px #00000040;
}
.he_600 {
  height: 850px;
}
.pb_0 {
  padding-bottom: 0;
}
.p_35 {
  padding: 35px;
}
.p_25 {
  padding: 15px;
}
.padd_desktop {
  padding: 150px 0;
}
.font_17_ {
  font-size: 17px;
  margin-top: 30px;
}
span.faq-icon.text-xl.transition-transform {
  font-size: 32px;
  font-weight: 800;
}
.he_400 {
  height: 400px;
}
.pad_top_100 {
  padding-top: 100px;
}
.pad_top_100_ {
  padding-top: 200px;
  padding-left: 100px;
  padding-right: 100px;
}
.mb_14 {
  margin-bottom: 65px !important;
}
.pad_75 {
  padding: 75px;
}
@media (max-width: 1500px) {
  .pl_pd_r {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  .pad_top_100_ {
    padding-top: 170px;
    padding-left: 40px;
    padding-right: 40px;
  }
  .pd_50 {
    padding-right: 40px;
  }
  .pdl_50 {
    padding-left: 40px;
  }
  .pr_80 {
    padding-right: 60px;
  }
  .pi_80 {
    padding-left: 60px;
  }
  .p_130 {
    padding: 100px;
    margin-bottom: 80px !important;
  }
  .p_90 {
    padding: 70px 70px;
  }
  .pad_75 {
    padding: 75px 50px;
  }
}
@media (max-width: 1350px) {
  .pl_pd_r {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .pd_50 {
    padding-right: 20px;
  }
  .pdl_50 {
    padding-left: 20px;
  }
  .pr_80 {
    padding-right: 40px;
  }
  .padding_left_right {
    padding: 80px 45px;
  }
  .hover_red:hover {
    color: #ed222b !important;
  }
  .hover_red {
    transition: all 0.5s ease;
  }
  .pi_80 {
    padding-left: 40px;
  }
  .p_130 {
    padding: 60px;
    margin-bottom: 60px !important;
  }
  .p_90 {
    padding: 60px 60px;
  }
  .wi_set {
    width: 500px;
  }
}
@media (max-width: 1200px) {
  .pl_pd_r {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .font_size {
    font-size: 2rem;
  }
  .p_130 {
    padding: 40px;
    margin-bottom: 40px !important;
  }
  .p_90 {
    padding: 50px 50px;
  }
  .pad_75 {
    padding: 75px 30px;
  }
  .pad_b_100 {
    padding-bottom: 80px;
  }
  .pl_0 {
    padding-left: 0;
  }
  /* .paddin_top_bo_ {
    padding-top: 40px;
    padding-bottom: 40px;
  } */
  .wi_set {
    width: 450px;
  }
}
@media (max-width: 1100px) {
  .w-97 {
    width: 99%;
  }
  .pad_75 {
    padding: 50px 20px;
  }
  .he_600 {
    height: 600px;
    object-fit: contain;
  }
  ._ipad.gap_10 {
    flex-direction: column;
    display: flex;
  }
  .h_aligmant.lg\:h-180.overflow-hidden.relative.bg-white.rounded.shadow-md.text-black,
  .h_aligmant.lg\:h-180.overflow-hidden.relative.bg-white.rounded.shadow-md.text-black
    .testimonial.box-border {
    width: 100%;
    height: 650px !important;
  }
  .pl_pd_r .my-8.leading-normals.pb-16 {
    padding: 0;
  }
  .p___top {
    padding: 0;
  }
  .font_ize_20 {
    font-size: 25px;
    padding: 0;
  }
  .pl_pd_r {
    padding-top: 0 !important;
  }
  .pad_b_100 {
    padding-bottom: 50px;
  }
  .pr_25,
  .pl_25 {
    padding: 0;
  }
  .pl_25 {
    gap: 20px;
  }
  .p_90 {
    padding: 40px 40px;
  }
  footer .pl-0.md\:pl-10 {
    padding: 0;
  }
  .mb_14 {
    margin-bottom: 40px !important;
  }
}

@media (max-width: 1300px) {
  .slide-up-button {
    width: 100%;
  }
  .he_600 {
    height: 680px;
    object-fit: contain;
  }
  ._ipad.gap_10 {
    gap: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }
  ._ipad.gap_10 .testimonial.box-border {
    padding: 50px 30px !important;
  }
}
@media (max-width: 1023px) {
  .text_2xl {
    font-size: 23px;
  }
  .pad_top_100_ {
    padding-top: 170px;
    padding-left: 30px;
    padding-right: 30px;
  }
  .wi_set {
    width: 360px;
  }
  .padding_left_right {
    padding: 40px 25px;
  }
  .pad_b_100 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 10px;
  }
  .flex__colo {
    flex-direction: column;
  }
  .width_100_ip {
    width: 100%;
  }
  .pl_pr_10 {
    padding-bottom: 15px;
    padding-top: 30px;
  }
  /* .paddin_top_bo_ {
    padding: 25px;
  } */
  .he_600 {
    height: 500px;
    object-fit: contain;
  }
  ._ipad.gap_10 {
    flex-direction: column;
    display: flex;
  }
  .h_aligmant.lg\:h-180.overflow-hidden.relative.bg-white.rounded.shadow-md.text-black {
    width: 100%;
    height: 600px;
  }
  .pad_b_100 {
    padding-bottom: 40px;
  }
  .pd_50,
  .pi_80,
  .pr_80,
  .pdl_50 {
    padding: 0;
    width: 100%;
  }
  .p_130 {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .p_90 {
    padding: 30px 25px;
  }
  .pi_80,
  .pr_80 {
    margin-top: 20px;
  }
}
@media (max-width: 767px) {
  .mar_0 {
    margin: 0 !important;
  }
  .mar_b0 {
    margin: 0;
    margin-bottom: 10px;
  }
  .ma_top_70 {
    margin-top: 70px;
  }
  .mar_0 .px-5.max-w-5xl.py-10 {
    margin-top: 70px;
  }
  .w-52 {
    width: 100%;
  }
  .h_700 {
    height: auto;
  }
  .font_ize_20 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .he_600 {
    height: 350px;
    object-fit: contain;
  }
  .mb_14 {
    margin-bottom: 20px !important;
  }
}
@media (max-width: 700px) {
  .top-20px {
    top: 20px;
  }
  .wi_set {
    width: 100%;
  }
  .paddin_top_bo_ {
    padding: 20px;
  }
  .pad_75 {
    padding: 40px 10px;
  }
  .width_100_ip p {
    font-size: 16px;
  }
  .pad_top_100_ {
    padding-top: 120px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .mar_b0 {
    font-size: 25px;
  }
  .font_ize_20 {
    font-size: 19px;
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pb-3_ {
    padding-bottom: 0 !important;
  }

  .p___top {
    padding-top: 30px !important;
  }
  .p__0 {
    padding: 0 !important;
  }
  .mar_10 {
    margin-bottom: 20px;
  }
  .gat_20 {
    gap: 20px;
  }
  .pl_pr_10 {
    padding-bottom: 20px;
    padding-top: 20px;
  }
  .pb_40 {
    padding-bottom: 0;
  }
  .he_600 {
    height: 250px;
    object-fit: contain;
  }
  .mar_0 {
    margin: 0;
  }
  .hover-parent:hover .content-wrapper {
    margin-bottom: 60px;
    margin-left: 0;
  }
  nav .design-correction img {
    width: 51%;
  }
  .h_aligmant.lg\:h-180.overflow-hidden.relative.bg-white.rounded.shadow-md.text-black {
    width: 100%;
    height: 530px;
  }
  .h_aligmant.lg\:h-180.overflow-hidden.relative.bg-white.rounded.shadow-md.text-black,
  .h_aligmant.lg\:h-180.overflow-hidden.relative.bg-white.rounded.shadow-md.text-black
    .testimonial.box-border {
    width: 100%;
    height: 600px !important;
  }
  .pd_10 {
    padding: 10px;
  }
  .pd_10 {
    padding: 5px 10px !important ;
  }
  .gap_10 {
    gap: 10px !important;
  }
  .mb_20 {
    margin-bottom: 30px;
  }
  .width_100 {
    width: 100%;
  }
  .w-97 {
    width: 95% !important;
  }
  .pa_b_0 {
    padding-bottom: 0;
  }
  .hover-parent .content-wrapper,
  .hover-parent .ml-10 {
    margin-left: 0 !important;
  }
  .py_20 {
    padding: 20px 0;
  }
  .paddin_top_bo {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .carousel-track.mt-10.mb-10.gap-10 {
    margin: 20px 0;
    margin-bottom: 0;
  }
  .px_20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media (max-width: 500px) {
  .p_130 {
    padding: 20px;
    margin-bottom: 20px !important;
  }
  .p_90 {
    padding: 30px 25px;
  }
  .mar_b0 {
    font-size: 20px;
  }
  .bg-\[\#00362E\].md\:py-5.text-white.font-medium.marquee-wrapper.rounded-3xl.wow.animate__.animate__fadeInRight.animated {
    border-radius: 10px !important;
  }
  .padding_left_right h2.text-3xl {
    padding: 0;
    margin-top: 0;
  }
  .he_400 {
    height: 220px;
  }
  .br_none br {
    display: none;
  }
  .font_17 {
    font-size: 16px;
  }
  .pad_b_100 {
    padding-bottom: 20px;
  }
  img.sm\:w-\[100px\].sm\:h-\[100px\] {
    height: 60px;
    width: 60px;
  }
  .gat_20 p.text-2xl.md\:text-tinyhead br {
    display: none;
  }
  .gat_20 p.text-2xl.md\:text-tinyhead {
    font-size: 18px;
  }
  .pabottom_30p {
    padding-bottom: 30px;
  }
  #stickyMenu {
    display: flex;
    flex-wrap: nowrap; /* keep items in one row */
    overflow-x: auto; /* allow horizontal scroll */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* hide scrollbar on Firefox */
    max-width: 100%;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: thin; /* ensure it doesn't overflow parent */
  }

  #stickyMenu::-webkit-scrollbar {
    display: none; /* hide scrollbar on Chrome/Safari */
  }

  #stickyMenu .tab-btn {
    flex: 0 0 auto; /* prevent shrinking */
  }
  .font_size {
    font-size: 1.5rem;
  }
  .he_600 {
    height: 230px;
    object-fit: contain;
  }
  .m_text_wight {
    color: #fff !important;
  }
  .font_size br {
    display: none;
  }
  .pd_less {
    padding: 20px;
    padding-left: 30px;
  }
  .p_130:last-child {
    margin-bottom: 0 !important;
  }
  .pl_pd_r .my-8.leading-normals.pb-16 {
    font-size: 1.6rem;
  }
  .pl_pd_r .my-8.leading-normals.pb-16 br {
    display: none;
  }
  .pd_less li {
    margin-bottom: 3px;
    padding: 0;
  }
  .mb_10 {
    margin-bottom: 10px;
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  footer ._ipad .grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .h_aligmant.lg\:h-180.overflow-hidden.relative.bg-white.rounded.shadow-md.text-black,
  .h_aligmant.lg\:h-180.overflow-hidden.relative.bg-white.rounded.shadow-md.text-black
    .testimonial.box-border {
    width: 100%;
    height: 500px !important;
  }
  .pad_20 {
    padding: 30px 10px;
  }
  #featuredProductCarousel img {
    width: 100% !important;
  }
  .p__0 {
    width: 100%;
  }
  .p__0_mobile {
    padding: 0;
  }
  .p__10 {
    padding: 10px;
  }
  .p__20 {
    padding: 15px;
  }
}

.bg-about-founder {
  background: linear-gradient(105.64deg, #0e8be4 -3.48%, #36bb90 93.94%);
}

@keyframes slideUp {
  0% {
    transform: translateY(0%);
  }
  20% {
    transform: translateY(0%);
  }
  40% {
    transform: translateY(-100%);
  }
  60% {
    transform: translateY(-200%);
  }
  80% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(0%);
  }
}

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

.bd1-tag:hover {
  background-color: #4f46e5;
  color: white;
}

.bd1-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .bd1-lg\:w-64 {
    width: 16rem;
  }
}

.bd1-text-dark {
  color: oklch(54.6% 0.245 262.881);
}

.bd1-bg-blue-700 {
  background-color: oklch(54.6% 0.245 262.881);
}

.bd1-space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.bd1-text-primary {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.bd1-border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  border-color: #e5e7eb;
}

.bd1-border-b {
  border-bottom-width: 1px;
}

.bd1-prose h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 24px;
  color: #1f2937;
}

.bd1-shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.bd1-tag {
  cursor: pointer;
  background-color: #e0e7ff;
  color: #4f46e5;
  padding: 0.3rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
}

/* Blog Details 2 Styles */
.bd2-blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.bd2-tag:hover {
  background-color: #4f46e5;
  color: white;
}

.bd2-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .bd2-lg\:w-64 {
    width: 16rem;
  }

  .bd2-lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.bd2-text-dark {
  color: oklch(54.6% 0.245 262.881);
}

.bd2-bg-blue-700 {
  background-color: oklch(54.6% 0.245 262.881);
}

.bd2-space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.bd2-text-primary {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.bd2-border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  border-color: #e5e7eb;
}

.bd2-border-b {
  border-bottom-width: 1px;
}

.bd2-prose h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 24px;
  color: #1f2937;
}

.bd2-shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.bd2-tag {
  cursor: pointer;
  background-color: #e0e7ff;
  color: #4f46e5;
  padding: 0.3rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
}

/* Blog Details 3 Styles */
.bd3-blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.bd3-tag:hover {
  background-color: #4f46e5;
  color: white;
}

.bd3-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .bd3-lg\:w-64 {
    width: 16rem;
  }

  .bd3-lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.bd3-text-dark {
  color: oklch(54.6% 0.245 262.881);
}

.bd3-bg-blue-700 {
  background-color: oklch(54.6% 0.245 262.881);
}

.bd3-space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.bd3-text-primary {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.bd3-border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  border-color: #e5e7eb;
}

.bd3-border-b {
  border-bottom-width: 1px;
}

.bd3-prose h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 24px;
  color: #1f2937;
}

.bd3-shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.bd3-tag {
  cursor: pointer;
  background-color: #e0e7ff;
  color: #4f46e5;
  padding: 0.3rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
}

/* Blog Page Styles */
.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.blog-tag:hover {
  background-color: #4f46e5;
  color: white;
}

.blog-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .blog-lg\:w-64 {
    width: 16rem;
  }
}

.blog-text-dark {
  color: oklch(54.6% 0.245 262.881);
}

.blog-bg-blue-700 {
  background-color: oklch(54.6% 0.245 262.881);
}

.blog-space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.blog-text-primary {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.blog-border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.blog-border-b {
  border-bottom-width: 1px;
}

span.text-primary.bg-primary\/10.text-xs.font-medium.px-3.py-1.rounded-full {
  cursor: pointer;
  background-color: #e0e7ff;
  color: #4f46e5;
  padding: 0.3rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
}

/* IoT Dashboard Box Container */
.iot-dashboard-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: transparent;
}

/* Center IoT Dashboard Image */
.iot-dashboard-container .iot-dashboard {
  position: relative;
  max-width: 600px;
  width: 100%;
  z-index: 2;
  transition: transform 0.8s ease-in-out;
}

/* Corner Images - Positioned Absolutely */
.iot-dashboard-container .trash-bin-img,
.iot-dashboard-container .occupancy-img,
.iot-dashboard-container .recent-activity-img,
.iot-dashboard-container .odur-level-img {
  position: absolute;
  max-width: 300px;
  width: 16%;
  transition: all 0.8s ease-in-out;
  z-index: 5;
}

/* Initial Hidden Positions (Outside Container) - Diagonal Corners */
.iot-dashboard-container .trash-bin-img {
  top: -100%;
  left: -100%;
}

.iot-dashboard-container .occupancy-img {
  top: -100%;
  right: -100%;
}

.iot-dashboard-container .recent-activity-img {
  bottom: -100%;
  left: -100%;
}

.iot-dashboard-container .odur-level-img {
  bottom: -100%;
  right: -100%;
}

/* Hover State - Slide Images Into View Diagonally */
.iot-dashboard-container:hover .trash-bin-img {
  top: 9%;
  left: 9%;
}

.iot-dashboard-container:hover .occupancy-img {
  top: 3%;
  right: 7%;
}

.iot-dashboard-container:hover .recent-activity-img {
  bottom: 11%;
  left: 8%;
}

.iot-dashboard-container:hover .odur-level-img {
  bottom: 12%;
  right: 9%;
}

/* Zoom Effect on Center Image */
.iot-dashboard-container:hover .iot-dashboard {
  transform: scale(1.2);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .iot-dashboard-container {
    min-height: 400px;
  }

  .iot-dashboard-container .iot-dashboard {
    max-width: 350px;
  }

  .iot-dashboard-container .trash-bin-img,
  .iot-dashboard-container .occupancy-img,
  .iot-dashboard-container .recent-activity-img,
  .iot-dashboard-container .odur-level-img {
    max-width: 100px;
    width: 25%;
  }

  /* Adjusted Hover Positions for Mobile */
  .iot-dashboard-container:hover .trash-bin-img {
    top: 5%;
    left: 3%;
  }

  .iot-dashboard-container:hover .occupancy-img {
    top: 5%;
    right: 3%;
  }

  .iot-dashboard-container:hover .recent-activity-img {
    bottom: 5%;
    left: 3%;
  }

  .iot-dashboard-container:hover .odur-level-img {
    bottom: 5%;
    right: 3%;
  }

  /* Reduced Zoom on Mobile */
  .iot-dashboard-container:hover .iot-dashboard {
    transform: scale(1.1);
  }

  /* Reduced padding for mobile */
  .padding_left_right {
    padding: 20px 25px;
  }
}

@media (max-width: 480px) {
  .iot-dashboard-container {
    min-height: 300px;
  }

  .iot-dashboard-container .iot-dashboard {
    max-width: 280px;
  }

  .iot-dashboard-container .trash-bin-img,
  .iot-dashboard-container .occupancy-img,
  .iot-dashboard-container .recent-activity-img,
  .iot-dashboard-container .odur-level-img {
    max-width: 75px;
    width: 22%;
  }

  /* Further Adjusted Hover Positions for Smaller Mobile */
  .iot-dashboard-container:hover .trash-bin-img {
    top: 8%;
    left: 2%;
  }

  .iot-dashboard-container:hover .occupancy-img {
    top: 8%;
    right: 2%;
  }

  .iot-dashboard-container:hover .recent-activity-img {
    bottom: 8%;
    left: 2%;
  }

  .iot-dashboard-container:hover .odur-level-img {
    bottom: 8%;
    right: 2%;
  }

  /* Minimal Zoom on Small Mobile */
  .iot-dashboard-container:hover .iot-dashboard {
    transform: scale(1.05);
  }
}

/* Dashboard Tracks Carousel Styles with Swiper */
.dashboard-carousel-container {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboardSwiper {
  width: 100%;
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.dashboard-card {
  width: 100%;
  padding: 2rem;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card Content Background - Static during transitions */
.card-content-bg {
  position: relative;
  transition: none !important;
  background: linear-gradient(180deg, rgba(210, 225, 239, 0.35) 0%, rgba(182, 207, 229, 0.35) 100%) !important;
  outline: 1px solid rgba(255, 255, 255, 0.4);
  min-height: 280px;
}

.swiper-slide-active .card-content-bg,
.swiper-slide-prev .card-content-bg,
.swiper-slide-next .card-content-bg {
  opacity: 1 !important;
}

/* Arrow Buttons */
.dashboard-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.dashboard-arrow .arrow-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.dashboard-arrow:hover {
  transform: translateY(-50%) scale(1.1);
}

.dashboard-arrow:hover .arrow-icon {
  transform: scale(1.05);
}

.dashboard-arrow-left {
  left: -80px;
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.dashboard-arrow-right {
  right: -80px;
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Arrow animations removed */

/* Swiper handles the fade effect, so we don't need custom fade animations */

/* Responsive Styles for Dashboard Carousel */
@media (max-width: 1350px) {
  .dashboard-carousel-container {
    padding: 0 80px;
  }

  .dashboard-arrow-left {
    left: 10px;
  }

  .dashboard-arrow-right {
    right: 10px;
  }
}

@media (max-width: 1200px) {
  .dashboardSwiper {
    max-width: 900px;
  }

  .dashboard-card {
    padding: 1.5rem;
  }

  .dashboard-card .grid {
    gap: 1.5rem;
  }

  .card-content-bg {
    padding: 2rem !important;
  }

  .dashboard-carousel-container {
    padding: 0 70px;
  }

  .dashboard-arrow-left {
    left: 5px;
  }

  .dashboard-arrow-right {
    right: 5px;
  }
}

@media (max-width: 1024px) {
  .dashboardSwiper {
    max-width: 750px;
  }

  .dashboard-card {
    padding: 1rem;
  }

  .dashboard-card .grid {
    gap: 1rem;
  }

  .card-content-bg {
    padding: 1.5rem !important;
    min-height: 260px;
  }

  .dashboard-card h3 {
    font-size: 1.75rem;
  }

  .dashboard-card .text-3xl {
    font-size: 1.5rem;
  }

  .dashboard-carousel-container {
    padding: 0 65px;
  }

  .dashboard-arrow-left {
    left: 5px;
  }

  .dashboard-arrow-right {
    right: 5px;
  }

  .dashboard-arrow {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 768px) {
  .dashboard-carousel-container {
    min-height: 450px;
    padding: 0 60px;
  }

  .dashboard-card {
    padding: 1rem;
  }

  .dashboard-card .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .dashboard-arrow-left {
    left: 0;
  }

  .dashboard-arrow-right {
    right: 0;
  }

  .dashboard-arrow {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .dashboard-carousel-container {
    min-height: 550px;
    padding: 0 28px;
  }

  .dashboard-card {
    padding: 0.75rem;
  }

  .dashboard-card h3 {
    font-size: 1.5rem;
  }

  .dashboard-card .text-3xl {
    font-size: 1.25rem;
  }

  .dashboard-card .text-6xl {
    font-size: 2.5rem;
  }

  .dashboard-card svg {
    width: 100px;
    height: 100px;
  }

  .dashboard-card .bg-white\/80 {
    padding: 1.5rem;
  }

  .card-content-bg {
    padding: 1.25rem !important;
    min-height: 240px;
  }

  .dashboard-arrow {
    width: 26px;
    height: 26px;
  }

  .dashboard-arrow-left {
    left: 5px;
  }

  .dashboard-arrow-right {
    right: 5px;
  }
}

/* Background for Dashboard and Smart Alerts Sections */
#dashboard-tracks,
#smart-alerts {
  position: relative;
}

/* Centered colored blur element between sections */
#dashboard-tracks::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 1100px;
  background: #3077B6;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}

/* Ensure content is above background elements */
#dashboard-tracks > *,
#smart-alerts > * {
  position: relative;
  z-index: 1;
}

/* Accordion Styles */
.accordion-item {
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent !important;
  backdrop-filter: none !important;
  border-top: 2px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
}

/* Number Circle Styles */
.accordion-number-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: all 0.3s ease;
  position: relative;
  border: none;
}

/* SVG Dashed Circle Border */
.accordion-number-circle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='35' cy='35' r='33' fill='none' stroke='%230D0D0D' stroke-width='2' stroke-dasharray='7 5' /%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
  z-index: 0;
}

.accordion-number-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 0.3s ease;
  z-index: -1;
}

.accordion-number-circle:hover::after {
  background-color: #2966FF;
}

.accordion-number-circle:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='35' cy='35' r='33' fill='none' stroke='%230D0D0D' stroke-width='2' stroke-dasharray='7 5' /%3E%3C/svg%3E");
}

.accordion-number-circle:hover .accordion-number {
  color: #FFFFFF;
}

.accordion-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: #0D0D0D;
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .accordion-number-circle {
    width: 70px;
    height: 70px;
  }

  .accordion-number-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='35' cy='35' r='33' fill='none' stroke='%230D0D0D' stroke-width='2' stroke-dasharray='7 5' /%3E%3C/svg%3E");
  }

  .accordion-number-circle:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='35' cy='35' r='33' fill='none' stroke='%230D0D0D' stroke-width='2' stroke-dasharray='7 5' /%3E%3C/svg%3E");
  }

  .accordion-number {
    font-size: 1.75rem;
  }
}

.accordion-item:hover {
  background-color: transparent !important;
}

.accordion-header {
  cursor: pointer;
  transition: all 0.3s ease;
}

.accordion-content {
  transition: max-height 0.5s ease-in-out, opacity 0.3s ease;
  opacity: 0;
}

.accordion-content.active {
  opacity: 1;
}

/* Enhanced Plus to Minus Icon Animation */
.accordion-icon {
  color: #0D0D0D;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-icon svg {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Vertical line animation - rotates like clock hand from 12 to 9 o'clock */
.accordion-icon .vertical-line {
  transform-origin: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: rotate(0deg);
}

/* Horizontal line stays visible */
.accordion-icon .horizontal-line {
  transform-origin: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

/* When accordion is open - rotate vertical line from 12 o'clock to 9 o'clock (90 degrees counter-clockwise) */
.accordion-icon.open .vertical-line {
  transform: rotate(-90deg);
  opacity: 1;
}

.accordion-icon.open .horizontal-line {
  opacity: 1;
  transform: scaleX(1);
}

/* Responsive Accordion Styles */
@media (max-width: 768px) {
  .accordion-item {
    margin-bottom: 0.75rem;
  }

  .accordion-header {
    padding: 1rem 1.25rem;
  }

  .accordion-content .p-6,
  .accordion-content .p-8 {
    padding: 1rem;
  }

  .accordion-item .w-12,
  .accordion-item .h-12 {
    width: 2.5rem;
    height: 2.5rem;
  }

  .accordion-item .text-xl {
    font-size: 1.125rem;
  }

  .accordion-item .text-3xl {
    font-size: 1.5rem;
  }

  .accordion-icon svg {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 480px) {
  .accordion-header {
    padding: 0.75rem 1rem;
  }

  .accordion-item .w-12,
  .accordion-item .h-12 {
    width: 2rem;
    height: 2rem;
  }

  .accordion-item .text-xl {
    font-size: 1rem;
  }

  .accordion-item .text-3xl {
    font-size: 1.25rem;
  }

  .accordion-icon svg {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 380px) {
  .accordion-icon svg {
    width: 24px;
    height: 24px;
  }
}

/* IoT Devices Section Hover Effects */
.device-head {
  transition: transform 0.3s ease;
}

.device-head:hover {
  transform: translateY(-10px);
}

.device {
  transition: all 0.3s ease;
  cursor: pointer;
}

.device:hover svg path {
  fill: #2966FF;
}

.device:hover svg g path {
  fill: #2966FF;
}

/* IoT Points Section Styles */
#iot-points .stat-card {
  transition: all 0.3s ease;
  position: relative;
}

#iot-points .stat-card:hover {
  background-color: rgba(41, 102, 255, 0.05);
  transform: translateY(-5px);
}

#iot-points .stat-number {
  transition: transform 0.3s ease;
}

#iot-points .stat-card:hover .stat-number {
  transform: scale(1.1);
}

/* Responsive borders for mobile */
@media (max-width: 640px) {
  #iot-points .stat-card {
    border-right: none !important;
    border-bottom: 1px solid #0D0D0D;
  }

  #iot-points .stat-card:last-child {
    border-bottom: none;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  #iot-points .stat-card:nth-child(2n) {
    border-right: none !important;
  }

  #iot-points .stat-card:nth-child(3),
  #iot-points .stat-card:nth-child(4) {
    border-top: 1px solid #0D0D0D;
  }
}

/* Footer background shadow - seamless attachment */
.footer-bg-wrapper {
  margin: 0;
  padding: 0;
  line-height: 0;
  display: block;
}

.footer-bg-shadow {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

/* Footer v1 responsive spacing */
.footer-v1-spacing {
  margin-top: -150px;
}

@media (max-width: 925px) {
  .footer-v1-spacing {
    margin-top: -50px;
  }
}

@media (max-width: 640px) {
  .footer-v1-spacing {
    margin-top: 0;
  }
}