/* ================================
    Layout Base
================================ */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Bangers', cursive;
  color: black;
  text-align: center;
  background: url('images/example.jpg') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url('images/example.png') no-repeat center center;
  background-size: cover;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.1;
}

/* ================================
 Page Structure
================================ */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* ================================
   Header
================================ */
.logo {
  width: 150px;
  margin: 1rem auto 0;
  display: block;
}

header {
  background: url('images/background2.jpg') center/cover no-repeat;
  background-attachment: fixed;
  color: white;
  padding: 4rem 1rem;
  text-shadow: 2px 2px 5px black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  border-bottom-left-radius: 50% 5%;
  border-bottom-right-radius: 50% 5%;
  position: relative;
}

header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
  border-bottom-left-radius: 50% 5%;
  border-bottom-right-radius: 50% 5%;
}

header h1,
header p {
  position: relative;
  z-index: 1;
}

.zombie-head-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;     /* match the image width */
  height: 100px;     /* this is the visible part (adjust to crop) */
  overflow: hidden;
  z-index: 2;
}

.header-zombie {
  height: 200px;
  transform: scale(-1, -1); /* flipped both vertically and horizontally */
  position: absolute;
  top: -125px;  /* shifts image up to show just the head */
  right: 0;
  pointer-events: none;
}


/* ================================
   Home Content Sections
================================ */
.info-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  font-size: 2.5rem;
}

.red {
  color: red;
}

.grid-box.no-bg {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.grid-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.address-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid black;
  padding: 1rem 2rem;
  max-width: 600px;
  margin: 2rem auto;
  border-radius: 10px;
  font-size: 1.2rem;
}

.flag-icon {
  font-size: 2.5rem;
}

.flag-text {
  text-align: left;
}

.icon-img {
  width: 60px;
  height: auto;
  margin-bottom: 0.5rem;
}

.single-grid {
  display: grid;
  place-items: center;
  padding: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}


.warning-box {
  background: url('images/warning.png') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  margin: 2rem auto;
  padding: 15rem 2rem 3.3rem;
  width: fit-content;
  font-size: 2.5rem;
  color: black;
  text-shadow: 2px 2px 4px white;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
}

/* ================================
    Three-Box Grid Section
================================ */
.three-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

@media screen and (max-width: 600px) {
  .warning-box {
    padding: 10rem 1rem 2rem; /* Reduced padding for smaller screens */
    font-size: 1rem;        /* Smaller font size for readability */
    width: 90%;               /* Allow the box to occupy more horizontal space */
    background-size: contain; /* Ensure the background scales appropriately */
  }
}


.grid-box {
  position: relative;
  background: url('images/bloodbg.jpg') center/cover no-repeat;
  border: 3px solid black;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
  overflow: hidden;
}

/* Overlay for darkening the background */
.grid-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Change to 0.5+ for darker effect */
  z-index: 0;
}

/* Keep all text/content above the overlay */
.grid-box * {
  position: relative;
  z-index: 1;
}

.grid-box:hover {
  transform: scale(1.03);
}

.grid-box h3 {
  font-size: 1.7rem;
  margin-top: 0;
  color: white;
  text-shadow: 1px 1px 1px black;
}

.grid-box p {
  font-size: 1.3rem;
  text-shadow: white 1px 1px 1px;
}



/* ================================
   Tab Navigation (Home / FAQ)
================================ */
.tab-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

.tab-nav button {
  background: black;
  color: white;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  font-family: 'Bangers', cursive;
  font-size: 1.2rem;
  cursor: pointer;
}

.tab-nav button:hover {
  background: red;
}

.tab-nav button.active-tab {
  background-color: red;
  color: white;
  border: 2px solid black;
  box-shadow: 0 0 10px black;
}


/* ================================
   ❓ FAQ Section
================================ */
.faq-item {
  margin-bottom: .5rem;
  background: rgba(255, 255, 255, 0.801);
  padding: 1rem;
  border-radius: 10px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.faq-item h3 {
  font-size: 1.6rem;
  font-weight: bold;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-shadow: 2px 2px 4px black;
  margin-bottom: 0.5rem;
}

.faq-item p {
  font-size: 1.2rem;
  color: black;
  text-shadow: 1px 1px 2px white;
}

.faq-spacer {
  height: 100px;  
}


/* ================================
   Responsive RSVP Section
================================ */
.rsvp-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  flex-wrap: wrap;
}

@media screen and (max-width: 600px) {
  .rsvp-flex {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .rsvp-flex > div {
    flex: 1 1 50%;
    max-width: 50%;
  }

  .rsvp-flex img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .rsvp-flex p,
  .rsvp-flex a {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

}

.rsvp-wrapper {
  background: rgba(240, 240, 240, 0.95); /* light gray */
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 1000px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}


/* ================================
   Separator code, 
================================ */

.curved {
  position: relative;
  background: #2c3e50;
  height: 5vh;
  border-bottom-left-radius: 50% 5%;
  border-bottom-right-radius: 50% 5%;
}

/* ================================
   background start 
================================ */

@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #ffffff;
    overflow: hidden;
    z-index: -1;
}

.background span {
    width: 3vmin;
    height: 3vmin;
    border-radius: 3vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 43;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #f50000;
    top: 90%;
    left: 98%;
    animation-duration: 55s;
    animation-delay: -57s;
    transform-origin: 22vw 20vh;
    box-shadow: 6vmin 0 1.2915992162807224vmin currentColor;
}
.background span:nth-child(1) {
    color: #2da215;
    top: 28%;
    left: 67%;
    animation-duration: 53s;
    animation-delay: -62s;
    transform-origin: -19vw 9vh;
    box-shadow: -6vmin 0 1.7184424713625286vmin currentColor;
}
.background span:nth-child(2) {
    color: #2da215;
    top: 32%;
    left: 76%;
    animation-duration: 70s;
    animation-delay: -60s;
    transform-origin: 13vw -1vh;
    box-shadow: -6vmin 0 0.9238451222876085vmin currentColor;
}
.background span:nth-child(3) {
    color: #f50000;
    top: 23%;
    left: 60%;
    animation-duration: 66s;
    animation-delay: -17s;
    transform-origin: -13vw -23vh;
    box-shadow: 6vmin 0 1.2806236388226104vmin currentColor;
}
.background span:nth-child(4) {
    color: #f50000;
    top: 6%;
    left: 24%;
    animation-duration: 49s;
    animation-delay: -3s;
    transform-origin: 21vw -22vh;
    box-shadow: 6vmin 0 1.4715829307434376vmin currentColor;
}
.background span:nth-child(5) {
    color: #f50000;
    top: 64%;
    left: 60%;
    animation-duration: 22s;
    animation-delay: -7s;
    transform-origin: 15vw 18vh;
    box-shadow: 6vmin 0 1.07483044445609vmin currentColor;
}
.background span:nth-child(6) {
    color: #df0707;
    top: 55%;
    left: 1%;
    animation-duration: 23s;
    animation-delay: -46s;
    transform-origin: 13vw 17vh;
    box-shadow: -6vmin 0 1.684286179033105vmin currentColor;
}
.background span:nth-child(7) {
    color: #f50000;
    top: 48%;
    left: 8%;
    animation-duration: 68s;
    animation-delay: -38s;
    transform-origin: -9vw -12vh;
    box-shadow: 6vmin 0 1.3298195481573165vmin currentColor;
}
.background span:nth-child(8) {
    color: #f50000;
    top: 23%;
    left: 97%;
    animation-duration: 66s;
    animation-delay: -62s;
    transform-origin: -5vw 3vh;
    box-shadow: 6vmin 0 1.6509008475507194vmin currentColor;
}
.background span:nth-child(9) {
    color: #df0707;
    top: 93%;
    left: 89%;
    animation-duration: 56s;
    animation-delay: -30s;
    transform-origin: 24vw 18vh;
    box-shadow: 6vmin 0 1.6220096276110108vmin currentColor;
}
.background span:nth-child(10) {
    color: #2da215;
    top: 43%;
    left: 5%;
    animation-duration: 41s;
    animation-delay: -38s;
    transform-origin: -15vw -6vh;
    box-shadow: 6vmin 0 1.1594002425991818vmin currentColor;
}
.background span:nth-child(11) {
    color: #f50000;
    top: 35%;
    left: 15%;
    animation-duration: 62s;
    animation-delay: -15s;
    transform-origin: -16vw -22vh;
    box-shadow: -6vmin 0 1.0036190040249604vmin currentColor;
}
.background span:nth-child(12) {
    color: #df0707;
    top: 43%;
    left: 31%;
    animation-duration: 27s;
    animation-delay: -2s;
    transform-origin: 13vw -8vh;
    box-shadow: 6vmin 0 1.7124121670988786vmin currentColor;
}
.background span:nth-child(13) {
    color: #2da215;
    top: 15%;
    left: 42%;
    animation-duration: 53s;
    animation-delay: -5s;
    transform-origin: -22vw 19vh;
    box-shadow: 6vmin 0 1.3120189180554835vmin currentColor;
}
.background span:nth-child(14) {
    color: #f50000;
    top: 40%;
    left: 28%;
    animation-duration: 75s;
    animation-delay: -70s;
    transform-origin: 2vw -20vh;
    box-shadow: -6vmin 0 0.9475371205178326vmin currentColor;
}
.background span:nth-child(15) {
    color: #f50000;
    top: 48%;
    left: 90%;
    animation-duration: 74s;
    animation-delay: -60s;
    transform-origin: -21vw -8vh;
    box-shadow: 6vmin 0 0.7951225386304727vmin currentColor;
}
.background span:nth-child(16) {
    color: #2da215;
    top: 75%;
    left: 1%;
    animation-duration: 15s;
    animation-delay: -48s;
    transform-origin: -3vw 2vh;
    box-shadow: -6vmin 0 1.2220111572859969vmin currentColor;
}
.background span:nth-child(17) {
    color: #df0707;
    top: 2%;
    left: 1%;
    animation-duration: 10s;
    animation-delay: -58s;
    transform-origin: 22vw -5vh;
    box-shadow: -6vmin 0 0.7928444744581403vmin currentColor;
}
.background span:nth-child(18) {
    color: #f50000;
    top: 57%;
    left: 36%;
    animation-duration: 61s;
    animation-delay: -19s;
    transform-origin: 4vw -10vh;
    box-shadow: 6vmin 0 1.190757115323342vmin currentColor;
}
.background span:nth-child(19) {
    color: #f50000;
    top: 36%;
    left: 28%;
    animation-duration: 55s;
    animation-delay: -11s;
    transform-origin: -14vw -16vh;
    box-shadow: -6vmin 0 0.8259187977262653vmin currentColor;
}



/* ================================
   background end, 
================================ */

/* ================================
   countdown timer
================================ */
.countdown-box {
  
  color: rgb(255, 255, 255);
  font-size: 1.6rem;
  padding: 1rem 2rem;
  border-radius: 10px;
  margin-top: 1rem;
  text-shadow: 1px 1px 3px rgb(0, 0, 0);
  display: inline-block;

  /* countdown position */
  position: relative;
  z-index: 2;
}


/* ================================
   🧯 Footer
================================ */
footer {
  background: url('images/background2.jpg') center/cover no-repeat;
  background-attachment: fixed;
  padding: 3rem 1rem;
  color: white;
  text-shadow: 1px 1px 3px black;
  margin-top: 0;
  position: relative;
  border-top-left-radius: 50% 10%;
  border-top-right-radius: 50% 10%;
  position:relative;
}

footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
  border-top-left-radius: 50% 10%;
  border-top-right-radius: 50% 10%;
}

footer p {
  position: relative;
  z-index: 1;
}

.footer-zombie {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 255px;
  z-index: 1;
  pointer-events: none;
}