/* Mobile-first: reset + sensible defaults */
*,
*::before,
*::after
{
  box-sizing: border-box;
}

html
{
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body
{
  margin: 0;
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #1f2937;
  background-color: rgba(249, 248, 243, 0.8);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}

:root
{
  --container: 72rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --brand-dark: #593427;
  --brand-gold: #d0a900;
  --brand-cream: #f8f1e1;
}

.container
{
  width: calc(100% - 2rem);
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.5rem;
}

@media (min-width: 64rem)
{
  .container
  {
    width: min(100% - 4rem, var(--container));
  }
}

.stack>*+*
{
  margin-top: var(--space-8);
}

.cluster
{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.grid
{
  display: grid;
  gap: var(--space-4);
}

.section
{
  margin-bottom: var(--space-6);
}

h2
{
  font-size: 16px;
  font-weight: bold;
  color: var(--brand-dark);
  letter-spacing: 2px;
  margin-bottom: 1rem;
  margin: 0.25rem 0 0.5rem;
  letter-spacing: 0.12em;
  padding-left: 0.5rem;
  padding-top: 0.5rem;
}


h3
{
  font-size: 22px;
  font-weight: bold;
  color: var(--brand-dark);
  letter-spacing: 2px;
}

h5
{
  font-size: 18px;
  font-weight: bold;
  color: var(--brand-dark);
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

h6
{
  font-size: 18px;
  color: #b45309;
  font-weight: bold;
  letter-spacing: 2px;
  margin-top: 0.5rem;
  text-align: center;
}

h7
{
  font-size: 18px;
  color: #b45309;
  font-weight: bold;
  letter-spacing: 3px;
  margin-top: 0.2rem;
  text-align: center;
  align-items: center;
  justify-content: center;
}

p
{
  line-height: 1.6;
}

/* main --------------------------------------- */

.nav-bar
{
  padding: 1rem 1rem;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0.5rem;
  margin-bottom: var(--space-2);
  margin-top: var(--space-2);
}

img,
svg,
.nav-bar
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0;
  border-radius: 0.5rem;
}



.peerabeez
{
  font-size: large;
  color: white;
  font-weight: normal;
  transition: color 0.3s ease;
  letter-spacing: 0.3em;
}

.brand
{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.brand img
{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: block;
}

.peerabeezwa
{
  font-size: small;
  opacity: 0.8;
  color: white;

}

nav
{
  width: 100%;
}

.nav-toggle
{
  background: none;
  border: none;
  color: white;
  padding: 0.5rem;
  font-size: 1rem;
}

/* stacked nav on mobile */
.nav-links
{
  display: none;
}

/* Larger screens: sh@ow nav inline, overlay hero content */
@media (min-width: 48rem)
{
  .nav-toggle
  {
    display: none;
  }

  .nav-links
  {
    display: block;
  }
}

.nav-links ul
{
  list-style: none;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
  float: right;
  align-items: center;
}

.nav-links a
{
  color: white;
  text-decoration: none;
  padding: 0.4rem 0.25rem;
  display: inline-block;
}

.nav-links a:hover
{
  color: var(--brand-gold);
}

/* Hero - mobile: image then content stacked */
.hero
{
  position: relative;
  color: white;
}

.hero .content
{
  position: absolute;
  left: var(--space-6);
  bottom: var(--space-6);
  max-width: 32rem;
  color: white;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}


.hero .content h1
{
  margin: 0.25rem 0 0.5rem;
  letter-spacing: 0.12em;
  animation: fadeIn 0.3s ease;
  color: white;
}

.hero .content p
{
  color: white;
  margin: 0.25rem 0;
  letter-spacing: 0.25rem;
  bottom: var(--space-4);
  animation: fadeIn 0.2s ease;
}

.hero .image-wrap
{
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border: solid rgba(208, 169, 0, 0.3) 2px;
  overflow: hidden;
}

.hero img
{
  display: block;
  width: 100%;
  height: 550px;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.03);
  border-radius: 0.5rem;
  z-index: 20;
}

/* Nav cards: mobile-first responsive layout */

.navcardscont2 h2
{
  font-size: 24px;
  font-weight: bold;
  color: var(--brand-dark);
  letter-spacing: 2px;
  margin-bottom: 1rem;
  margin: 0.25rem 0 0.5rem;
  letter-spacing: 0.12em;
  padding-left: 0.5rem;
  padding-top: 0.5rem;
  text-align: center;
}

.navcardscont2
{
  width: 100%;
  height: auto;
  padding: var(--space-4) 0;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(0, 0, 0, 0);
  border: solid rgba(208, 169, 0, 0.3) 2px;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.navcardscont2 p
{

  font-size: 20px;
  color: var(--brand-dark);
  padding: var(--space-2);
  line-height: 1.5;
  margin: 0;
  text-align: justify;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.card2
{
  width: 100%;
  max-width: 350px;
  height: auto;
  /* optional: keeps a pleasant max card width */
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 8px 1px 8px 8px rgba(0, 0, 0, 0.09);
  border: rgba(0, 0, 0, 0.8) 1px solid;
  transition: transform 0.1.5s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.card2 img
{
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.cardbody2
{
  padding: 0;
  background-color: rgb(245, 245, 245);
}

.cardbody2 p
{
  font-size: 14px;
  color: var(--brand-dark);
  padding: 0;
  margin: 0;
  text-align: center;
}

.cardbody2 .price
{
  font-size: 20px;
  color: var(--brand-dark);
  margin-top: 0;
  text-align: center;
  color: black;
  margin: 0.25rem 0;
}

.card2:hover
{
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  opacity: 0.9;
}

.purchasebutton
{
  font-size: 16px;
  width: 100%;
  display: inline-block;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  text-decoration: none;
  padding: 0.6rem 0.9rem;
  border-radius: 0.5rem;
  text-align: center;
  align-items: center;
  justify-content: center;
}

/******************/
.navcardscont
{
  width: 100%;
  height: auto;
  padding: var(--space-1) 0;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(0, 0, 0, 0);
  border: solid rgba(208, 169, 0, 0.3) 2px;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Optional: small polish for larger screens */
@media (min-width: 48rem)
{
  .navcardscont
  {
    /* remove fixed height and background: yellow; */
    padding: var(--space-8) 0;
  }
}

/********************************************/

.cardsgallerycontent
{
  width: 100%;
  display: grid;
  /* auto-fit = fill the row; min 220px, grow to 1fr */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  align-items: stretch;
  justify-items: center;
  /* centers fixed-width cards if you keep max-width */
  padding: var(--space-4) 0;
}

@media (min-width: 48rem)
{
  .cardsgallerycontent
  {
    font-size: 16px;
    /* on bigger viewports distribute evenly across the available width */
    justify-content: space-evenly;
    gap: var(--space-8);
  }
}

.card
{
  width: 100%;
  max-width: 350px;
  /* optional: keeps a pleasant max card width */
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 8px 1px 8px 8px rgba(0, 0, 0, 0.09);
  border: rgba(0, 0, 0, 0.8) 1px solid;
  transition: transform 0.1.5s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}


.card img
{
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


.cardbody
{
  padding: 0;
  background-color: rgb(245, 245, 245);
}

.cardbody p
{
  font-size: 14px;
  color: var(--brand-dark);
  padding-left: 0.75rem;
  line-height: 1.2;
  margin: 0;
}

.card .more
{
  color: #b45309;
  font-weight: 600;
  font-size: 12px;
  padding: 20px;
  margin-left: 160px;
  text-decoration: none;


}


.card:hover
{
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  opacity: 0.9;
}

/***************************************/

.gridcard
{
  width: 100%;
  max-width: 350px;
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 8px 1px 8px 8px rgba(0, 0, 0, 0.09);
  border: rgba(0, 0, 0, 0.8) 1px solid;
  transition: transform 0.1.5s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}


.gridcard img
{
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.gridcard:hover
{
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  opacity: 0.9;
}

.gridcard p
{
  font-size: 14px;
  color: var(--brand-dark);
  padding: 0.75rem;
  line-height: 1.2;
  margin: 0;
  text-align: center;
}

/* Hex Grid - decorative */
.hexcont
{
  width: 100%;
  height: 10%;
  background-color: transparent;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  position: relative;
  overflow: hidden;
  animation: animate 4s linear infinite;
  justify-content: center;
  align-items: center;
}

/* container for hexagons – use flex so we can spread items
     and centre them both on small and large screens */
.row
{
  display: flex;
  flex-wrap: nowrap;
  /* keep them on a single line */
  justify-content: center;
  /* or space‑evenly/space‑around etc. */
  align-items: center;
  overflow-x: hidden;
  /* hide any hexagons that stick out */
  gap: var(--space-4);
  /* adjust the spacing as you like */
}

.hexagon
{
  flex: 0 0 auto;
  /* don’t let flexbox change the size */
  width: clamp(20px, calc((100vw - 4rem) / 3), 40px);
  aspect-ratio: 1 / 1;
  /* keeps width & height in sync */
  background: #111;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: 0.3s;
}

.hexagon:before
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
}

.hexagon:hover
{
  background: goldenrod;
  cursor: alias;
  transition: 0s;
}

@media (min-width: 48rem)
{
  .row
  {
    /* on bigger viewports distribute evenly across the available width */
    justify-content: space-evenly;
    gap: var(--space-8);
  }
}

/* Modals - mobile first (full screen overlay) */
.modal,
.modal2,
.modal3,
.modal4
{
  display: none;
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 90%;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 2rem;
  animation: fadeIn 0.3s ease;
}

.modalcontent3,
.modalcontent4
{
  max-width: 1200px;
}

.modalcontent4
{
  grid-template-columns: repeat(3, 1fr);
}

.modalcontent
{
  flex-direction: row;
  width: 90%;
  max-width: 800px;
  height: auto;
  background-color: #F2F2F2;
  background-color: rgba(0, 0, 0, 0.95);
  padding-top: 20px;
  gap: var(--space-6);
  margin: 2rem auto;
  animation: zoom 2s linear 1s 1 forward both;
}

.modalcontent2
{
  width: 95%;
  height: auto;
  max-width: 700px;
  margin: 2rem auto;
  padding: var(--space-4);
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s ease;
  top: 100px;
}

.modalcontent2 h5
{
  margin-top: 1rem;
}

.modalcontent2 h5:first-child
{
  margin-top: 0;
}

.modalcontent2 p
{
  font-size: 14px;
  line-height: 1.8;
  margin: 0.5rem 0 1rem;
}

.modalcontent2 a
{
  color: #002ccf;
  font-weight: bold;
  transition: color 0.3s ease;
}

.modalcontent2 a:hover
{
  color: var(--brand-dark);
}

.modalcontent2 pre
{
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 1rem 0;
  padding: var(--space-4);
  background-color: #f5f5f5;
  border-radius: 0.4rem;
  overflow-x: auto;
}

.modalcontent3
{
  display: block;
  width: 90%;
  max-width: 100%;
  position: relative;
  text-decoration: none;
  margin: 2rem auto;
  padding: var(--space-4);
  background-color: rgba(234, 233, 231, 0.8);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.6);
  border-radius: 0.5rem;
  animation: slideUp 0.4s ease;
  z-index: 20;
  overflow: auto;
}

@keyframes fadeIn
{
  from
  {
    opacity: 0;
  }

  to
  {
    opacity: 1;
  }
}

.close
{
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-right: var(--space-4);
}

.close:hover,
.close:focus
{
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}



@keyframes slideUp
{
  from
  {
    transform: translateY(50px);
    opacity: 0;
  }

  to
  {
    transform: translateY(0);
    opacity: 1;
  }
}

#aboutblurbcontainer2
{
  width: 95%;
  height: auto;
  display: flex;
  flex-direction: row;
  position: relative;
  text-decoration: none;
  border-radius: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: auto;
  padding-right: auto;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.6);
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
  z-index: 10;

}


#abouttreecontainer
{
  width: 50%;
  height: 600px;
  overflow: hidden;
  flex: 1;
}

#abouttreecontainer img
{
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.8);
}

#abouttextcontainer
{
  width: 50%;
  height: 600px;
  flex: 1;
  padding: var(--space-4);
  background-color: rgba(245, 245, 245, 0.95);
}


#abouttextcontainer h3
{
  margin-bottom: 1rem;
}

#abouttextcontainer p
{
  font-size: 13px;
  line-height: 1.8;
  text-align: justify;
  letter-spacing: 0.5px;
}



#honeygridgallery
{
  width: 100%;
  display: grid;
  /* auto-fit = fill the row; min 220px, grow to 1fr */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  align-items: center;
  justify-items: center;
  /* centers fixed-width cards if you keep max-width */
  padding: var(--space-4);
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
}


#honeygridgallery .button
{
  width: 50%;
  border: none;
  padding: 10px 15px;
  color: white;
  font-size: 12px;
  letter-spacing: 1px;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  border-radius: 0.4rem;
  transition: background 0.3s ease;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.5rem;

}

#honeygridgallery img
{
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 0.4rem;
  margin-top: 0.5rem;
}

#honeygridgallery .card
{
  width: 100%;
  max-width: 350px;
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 8px 1px 8px 8px rgba(0, 0, 0, 0.09);
  border: rgba(0, 0, 0, 0.8) 1px solid;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: transform 0.1.5s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

#honeygridgallery.card:hover
{
  transition: transform 0.8s;
}


@media (min-width: 48rem)
{
  .honeygridgallery
  {

    /* on bigger viewports distribute evenly across the available width */
    justify-content: space-evenly;
    gap: var(--space-8);
  }
}

.gallerycont
{
  width: 100%;
  padding: var(--space-6) 0;
  margin-left: auto;
  margin-right: auto;
  border: solid rgba(208, 169, 0, 0.3) 2px;
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
}


.galleryheader
{
  width: 100%;
  /* target roughly 50px total height, centre content vertically */
  height: 50px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

.galleryheader span
{
  font-size: 18px;
  /* slightly smaller text to match reduced header */
  font-weight: bold;
  color: var(--brand-cream);
  letter-spacing: 2px;
  margin: 0;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.gallery
{
  width: 100%;
  position: relative;
  overflow: auto;
  margin: 0 auto;
  padding: var(--space-4);
  background-color: rgba(255, 255, 255, 1);
}

.gallrow
{
  display: flex;
  flex-wrap: wrap;
  padding: 0
}


.column
{
  flex: 1 1 25%;
  padding: 0 4px;
  max-width: 25%;
}

.column img
{
  width: 100%;
  height: auto;
  vertical-align: middle;
  border-radius: 0.4rem;
  margin-bottom: 8px;
  transition: transform 0.3s ease;
}

.column img:hover
{
  transform: scale(1.02);
}

footer
{
  width: 100%;
}

.footercontainer
{
  width: 100%;
  padding: var(--space-4) 10px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.8);
}

.footercontainer small
{
  color: var(--brand-cream);
  font-size: 14px;
}

footer a
{
  color: var(--brand-cream);
  transition: color 0.3s ease;
}

footer a:hover
{
  color: var(--brand-gold);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce)
{
  *
  {
    animation: none !important;
    transition: none !important;
  }
}