html {
  scroll-behavior: smooth;
}
.footer_bg-gray {
  background-color: #e1e7ef;
}
.footer_bg-gray,
.footer_bg-gray a {
  color:#0f172a;
}
.footer_bg-gray .border {
border-left-color:#ea580c;
padding-left: 1rem;
}
h2 {
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
#story {
  scroll-margin-top: 100px; /* adjust based on navbar height */
}
.pt-10p {
  padding-top: 3rem;
}
.border-gray-700 {
  border-top: solid 1px #c4c4c4;
}
.div-hero-banner {
  height: 100vh;
}
/***ZOOM MODAL FOR PRODUCTS**/
#zoomModal {
  backdrop-filter: blur(10px);
}
#zoomModal img {
  transition: transform 0.3s ease;
  cursor: zoom-in;
}
#zoomImage {
  cursor: zoom-in;
}

/* NAV MENU BASE */
.nav-menu {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
}

.nav-anim {
  position: relative;
  padding: 6px 10px;
  z-index: 1;
  transition: color 0.3s ease;
}

/* background layer */
.nav-anim::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ea580c; 
  border-radius:10px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}

/* hover effect */
.nav-anim:hover::before {
  transform: scaleX(1);
}

/* active state */
.nav-anim.active::before {
  transform: scaleX(1);
}

.nav-anim.active,
.nav-anim:hover  {
  color: #fff !important;
}

/**nav Close btn**/
.nav-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: #0f172a;
  z-index: 1000;
}

.group.open svg {
  transform: rotate(180deg);
  transition: 0.3s;
}

/**HERO SLIDER**/
.animate-fade-in-up {
  animation: fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/****PRODUCT CARD****/
.pdt_card {
    position: relative;
    overflow: hidden;
}

.pdt_card-img {
    transition: transform 0.6s ease;
}

/* Hover zoom effect */
.pdt_card:hover .pdt_card-img {
    transform: scale(1.1);
}
.pdt_card:hover .pdt_card-hover\:grayscale-0{
  --tw-grayscale: grayscale(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/***Quote symbol***/
.q_left {
	left: 3.2rem;
}

/* MOBILE STYLE */
@media (max-width: 1024px) {
 .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: white;
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 30px;
    transition: 0.4s ease;
    z-index: 999;
  }

  .nav-menu.active {
    right: 0;
  }
  .group .absolute {
    position: static;
    display: none;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none;
    border: none;
    width: 100%;
  }

  .group.open .absolute {
    display: block;
  }

  /**Sub menu**/
  /* Disable hover behavior */
  .group:hover .absolute {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  
  /* FORCE dropdown visible when open */
  .group.open .absolute {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* REMOVE all hidden defaults */
  .group .absolute {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .submenu {
    position: static !important;
    display: none;
    width: 100%;
    margin-top: 10px;
  }

  .group.open .submenu {
    display: block;
  }
  .div-hero-banner {
    height:30vh;
    margin-top:5rem;
  }

  .mobile_st.ml-4 {
    margin-left: 0 !important;
  }
  .mobile_st.min-h-\[70vh\]{
  min-height: 60vh !important;
}
.mobile_st.min-h-\[50vh\]{
  min-height: 50vh !important;
}
.mobile_st.min-h-\[80vh\]{
  min-height: 90vh !important;
}
.top_space {  
  margin-top: 7rem !important;
  padding-bottom: 10px;
}
.quote-box {
    padding: 5px 10px !important;
}
.q_left {
	left: 5px;
}
}

/* ============ mobile view ============ */

@media(max-width: 991px){
  
  .mobile_st.ml-4 {
    margin-left: 0 !important;
  }
}