/* ==========================================================================
   AVDHOOT ENTERPRISE - CUSTOM STYLESHEET
   Use this file to easily customize sizes, heights, and styles of key elements.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADER LOGO (Navbar)
   -------------------------------------------------------------------------- */
.header-logo {
  width: auto;
  height: 56px; /* Desktop logo height (lg:h-14) */
}

@media (max-width: 1024px) {
  .header-logo {
    height: 48px; /* Tablet logo height (md:h-12) */
  }
}

@media (max-width: 768px) {
  .header-logo {
    height: 40px; /* Mobile logo height (h-10) */
  }
}

/* --------------------------------------------------------------------------
   2. FOOTER LOGO (Square / Badge Logo)
   -------------------------------------------------------------------------- */
.footer-logo {
  width: auto;
  height: 64px; /* Desktop footer logo height (lg:h-16) */
  object-fit: contain;
}

@media (max-width: 1024px) {
  .footer-logo {
    height: 56px; /* Tablet footer logo height (md:h-14) */
  }
}

@media (max-width: 768px) {
  .footer-logo {
    height: 48px; /* Mobile footer logo height (h-12) */
  }
}

/* --------------------------------------------------------------------------
   3. PRODUCT TAB IMAGES (Onions, Wheat, Grains, etc. on homepage)
   -------------------------------------------------------------------------- */
.product-tab-image {
  width: 100%;
  height: 400px; /* Desktop image height */
  object-fit: cover; /* Keeps aspect ratio; crops extra content */
  border-radius: 0.75rem; /* rounded-xl equivalent */
}

@media (max-width: 768px) {
  .product-tab-image {
    height: 250px; /* Mobile image height */
  }
}

/* --------------------------------------------------------------------------
   4. HERO DIAGRAM (Circular vegetable collage on homepage hero card)
   -------------------------------------------------------------------------- */
.hero-diagram {
  width: 100%;
  height: 224px; /* Desktop diagram height (md:h-56) */
  object-fit: contain; /* Keeps entire image visible without cropping */
  border-radius: 0.5rem; /* rounded-lg equivalent */
}

@media (max-width: 768px) {
  .hero-diagram {
    height: 192px; /* Mobile diagram height (h-48) */
  }
}
  /* Custom Product Tab Image Styles - easily edit height/fit here */
    .product-tab-image {
      width: 100%;
      height: 400px; /* Adjust height of images here (e.g. 300px, 350px, 400px, 450px) */
      object-fit: cover;
      border-radius: 0.75rem; /* Matches template's rounded-xl style */
    }

    /* On mobile viewports, make it slightly shorter */
    @media (max-width: 768px) {
      .product-tab-image {
        height: 250px; /* Adjust mobile height here */
      }
    }

/* --------------------------------------------------------------------------
   5. SKELETON LOADERS & PRELOADER
   -------------------------------------------------------------------------- */
@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .4;
  }
}

.skeleton-loader {
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background-color: #e5e7eb;
}

.skeleton-loader-dark {
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background-color: #374151;
}

.skeleton-shimmer {
  position: relative;
  overflow: hidden;
}

.skeleton-shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 30%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer-anim 1.5s infinite;
}

@keyframes shimmer-anim {
  100% {
    transform: translateX(100%);
  }
}