/* ==============================
   BASE STYLES & RESETS
   ============================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  scroll-behavior: smooth;
}

/* ==============================
   HEADER & NAVIGATION
   ============================== */
.logo-img {
  height: 150px;
  width: 230px;
  object-fit: contain;
}

header button {
  background-color: #fce53d;
  color: #111827;
  font-weight: 600;
  border-radius: 0.375rem;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

header button:hover {
  transform: scale(1.05);
  /* This enlarges the button slightly */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Base state for navbar links */
nav a {
  transition: all 0.7s ease-in-out;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
}

/* Hover state for navbar links */
nav a:hover {
  background-color: #fce53d;
  color: #111827;

  /* Use text-shadow to create a "faux bold" effect that transitions smoothly 
     without causing the layout to jump */
  text-shadow:
    0 0 0.5px #111827,
    0 0 0.5px #111827;
}

/* ==============================
   BUTTONS & INQUIRY BOX
   ============================== */
.inquiry-box {
  background-color: #fce53d;
  font-weight: 600;
  border-radius: 0.375rem;
  transition:
    transform 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

.inquiry-box:hover,
section button:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

a svg {
  transition: color 0.3s ease;
}

a svg:hover {
  color: #fce53d;
}

/* ==============================
   FOOTER
   ============================== */
footer a,
footer p {
  transition: color 0.3s ease-in-out;
}

footer a:hover,
footer p:hover {
  text-decoration: underline !important;
  text-decoration-color: #fce53d !important;
  text-underline-offset: 4px !important;
  color: #111827 !important;
}

/* ==============================
   PREMIUM PRODUCT OVERLAY EFFECT
   ============================== */

/* 1. Set the initial state (Hidden, slightly scaled up, and shifted down) */
#myprod .flex.relative .z-10 {
  opacity: 0 !important;
  transform: translateY(15px) scale(1.05);
  transition:
    opacity 0.6s ease-out,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none;
}

/* 2. Set the hover state (Visible, normal size, and centered) */
#myprod .flex.relative:hover .z-10 {
  opacity: 1 !important;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* 3. Subtle zoom for the background image to add depth */
#myprod .flex.relative img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#myprod .flex.relative:hover img {
  transform: scale(1.08);
  /* Image zooms in slightly while text slides up */
}

/* Ensure the container clips the zooming image */
#myprod .flex.relative {
  overflow: hidden;
  border-radius: 8px;
}

/* ==============================
   UTILITIES
   ============================== */
.text-gray {
  background-color: antiquewhite;
}

#title {
  width: 100%;
  position: absolute;
  padding: 0px;
  margin: 0px auto;
  text-align: center;
  font-size: 27px;
  color: rgba(255, 255, 255, 1);
  z-index: 50;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33);
}