* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #980404;
  font-family: "Oranienbaum", serif;
  
}

html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ============================= */
/* MAIN CONTENT FLEX */
/* ============================= */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ============================= */
/* NAVBAR */
/* ============================= */
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background-color: #FAB12F;
  font-size: 15px;
}

.nav-links {
  display: flex;
  gap: 4rem;
  list-style: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background-color: #FAB12F;
}

.nav-links a {
  text-decoration: none;
  color: #C40C0C;
  font-size: 1.15rem;
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  margin-left: auto;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: #C40C0C;
  margin: 4px 0;
}

/* ============================= */
/* MOBILE MENU */
/* ============================= */
@media screen and (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-links { display: none; flex-direction: column; gap: 1rem; top: 60px; right: 0; background-color: #FAB12F; padding: 1rem; }
  .nav-links.nav-active { display: flex; }
}

/* ============================= */
/* TITLES */
/* ============================= */
.shimmer-title {
  font-size: 90px;
  text-align: center;
  margin-top: 60px;
  position: relative;
  z-index: 2;
  background: linear-gradient(120deg,#b8892b 0%,#ffd77a 20%,#fff2c2 40%,#ffd77a 60%,#b8892b 80%,#b8892b 100%);
  background-size: 400% 100%;
  background-position: 0% center;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmerFlow 14s linear infinite;
}

.title {
  font-family: "Carattere", cursive;
  font-size: 60px;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 40px; /* <-- add this for space below subtitle */
  position: relative;
  z-index: 2;
  background: linear-gradient(120deg,#c9a24d 0%,#ffe29a 50%,#c9a24d 100%);
  background-size: 300% 100%;
  background-position: 0% center;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmerFlowSoft 20s linear infinite;
}

@keyframes shimmerFlow { from {background-position:0% center;} to {background-position:400% center;} }
@keyframes shimmerFlowSoft { from {background-position:0% center;} to {background-position:300% center;} }

/* ============================= */
/* FRENCH SHIMMER TEXT */
/* ============================= */
.french {
  font-size: 17px;
  margin-top: 30px;
  text-align: center;
  background: linear-gradient(120deg, #b8892b 0%, #ffd77a 20%, #fff2c2 40%, #ffd77a 60%, #b8892b 80%);
  background-size: 300% 100%;
  background-position: 0% center;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmerFlow 16s linear infinite;
}

/* ============================= */
/* FEATHERS */
/* ============================= */
.feather-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

@keyframes feather-fall { from {transform: translateY(-20vh) rotate(0deg);} to {transform: translateY(120vh) rotate(360deg);} }

.feather {
  position: absolute;
  width: 60px;
  opacity: 0.85;
  animation-name: feather-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.feather:nth-child(1)  { left: 5%;  animation-duration: 22s; animation-delay: -5s; }
.feather:nth-child(2)  { left: 15%; animation-duration: 26s; animation-delay: -12s; }
.feather:nth-child(3)  { left: 25%; animation-duration: 20s; animation-delay: -18s; }
.feather:nth-child(4)  { left: 35%; animation-duration: 28s; animation-delay: -9s; }
.feather:nth-child(5)  { left: 45%; animation-duration: 24s; animation-delay: -15s; }
.feather:nth-child(6)  { left: 55%; animation-duration: 30s; animation-delay: -20s; }
.feather:nth-child(7)  { left: 65%; animation-duration: 23s; animation-delay: -7s; }
.feather:nth-child(8)  { left: 75%; animation-duration: 27s; animation-delay: -14s; }
.feather:nth-child(9)  { left: 85%; animation-duration: 21s; animation-delay: -11s; }
.feather:nth-child(10) { left: 95%; animation-duration: 25s; animation-delay: -19s; }


.form {
  max-width: 700px;
  margin: 40px auto;     /* helps with spacing from the section above */
  padding: 25px;
  align-items:center;
  /* Gold lining (very subtle) */
  border: 1px solid rgba(255, 215, 0, 0.4);

  /* Soft separation */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);

  border-radius: 10px;

  /* Keeps your layout intact */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}


/* Inputs */
.form input,
.form textarea {
  width: 100%;
  padding: 12px; /* slightly increased for better usability */
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form label{
color: #ffffff;
}

/* Button - FIXED */
.form button {
  padding: 10px 18px;   /* less stretched vertically */
  font-size: 16px;
  background-color: gold;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;

  width: auto;          /* prevents full stretch */
  align-self: center;   /* centers button inside form */
  min-width: 140px;     /* gives it a balanced size */
}

/* Hover */
.form button:hover {
  background-color: #FF4400;
}

/* -------- RESPONSIVE -------- */

/* Tablets */
@media (max-width: 768px) {
  form {
    max-width: 90%;
  }

  .form input,
  .form textarea {
    font-size: 16px;
  }
}

/* Phones */
@media (max-width: 480px) {
  .form button {
    width: 100%;        /* full-width for easier tapping */
    align-self: stretch;
  }
}
/* ============================= */
/* SATURN PLANET & CARD STACK */
/* ============================= */
.card-stack {
  position: relative;
  width: 400px;
  height: auto;
  margin: 50px auto;
}

.card-stack img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.saturn-card {
  width: 100%;
  height: auto;
  opacity: 0.3;
  display: block;
  position: relative;
  z-index: 1;
}

.saturn-container {
  width: 400px;
  margin: 40px auto 20px auto;
  text-align: center;
}

.saturn-container .saturn-image {
  width: 100%;
  height: auto;
  opacity: 0.3;
}

/* ============================= */
/* DIVINE MESSAGE + SWORD IMAGE SECTION */
.divine-message-container {
  position: relative;
  width: 90%;
  max-width: 700px;
  margin: 60px auto; /* replaces all <br> spacing */
  text-align: center;
}

.divine-message-container .divine-image {
  width: 100%;
  max-height: 500px; /* keeps full sword + roses visible */
  object-fit: contain;
  display: block;
  border-radius: 20px; /* smooth rounded corners */
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

.divine-message-container .divine-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 20px;
  z-index: 10;
  text-align: center;
  width: 90%; /* ensures text stays inside image */
  font-size: 18px;
  line-height: 1.5;
}

/* ============================= */
/* FOOTER */
/* ============================= */
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFD786;
  text-align: center;
  padding: 20px 0;
  position: relative;
}

.footer a { color: #FFD786; }

/* ============================= */
/* PAYMENT BUTTONS BELOW FOOTER */
/* ============================= */
.payment-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 20px auto 40px auto;
  flex-wrap: wrap;
  text-align: center;
}

.payment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: white;
  font-family: roman;
}

.payment-item .pay-icon {
  width: 60px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ============================= */
/* HEADINGS */
h2 { text-align: center; }

/* ============================= */
/* MEDIA QUERIES FOR RESPONSIVE DESIGN */
@media screen and (max-width: 768px) {
  .card-stack, .saturn-container { width: 300px; }
  .shimmer-title { font-size: 60px; }
  .title { font-size: 40px; }
  .message { width: 95%; padding: 30px 20px; }
  .form { max-width: 90%; }
  .payment-item .pay-icon { width: 50px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .form-container {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 600px;
    padding: 0 20px;
  }

  .form-container form {
    text-align: center;
  }
}



.video-container {
  position: relative;
  width: 100%;
  max-width: 700px; /* slightly smaller than before */
  margin: 20px auto;
  padding-top: 56.25%;
  border-radius: 16px; /* rounded corners */
  overflow: hidden; /* IMPORTANT so the iframe respects the curve */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); /* soft shadow */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

a[href^="tel"] {
  color: white !important;
  text-decoration: none;
}

a[href^="tel"]:visited,
a[href^="tel"]:hover,
a[href^="tel"]:active {
  color: white !important;
}

@media screen and (max-width: 600px) {
  .video-container {
    width: 92%;        /* slightly narrower than full width */
    margin: 20px auto; /* keeps it centered */
  }
}