@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Crimson+Text&display=swap');

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background-color: #0d0d0d;
      color: #f5f5f5;
      font-family: 'Crimson Text', serif;
      line-height: 1.7;
      font-size: 1.1rem;
      position: relative;
    }

    body::before {
      content: "";
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-image: url('https://dragonalley.be/images/background/background-dragon.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      filter: brightness(0.75) contrast(1.1); 
      pointer-events: none; 
    }

    body::after {
      content: "";
      position: fixed;
      top: 0; left: 0;
      width: 200%; height: 200%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05) 0%, transparent 60%),
                  radial-gradient(circle at 70% 70%, rgba(255,255,255,0.07) 0%, transparent 60%);
      animation: mist 40s infinite linear;
      z-index: -2;
      pointer-events: none;
    }

    @keyframes mist {
      0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
      50%  { transform: translate(-5%, -2%) scale(1.05); opacity: 0.7; }
      100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    }

    
    header {
      text-align: center;
      padding: 5rem 2rem 2rem 2rem;
      backdrop-filter: blur(2px);
      position: relative;
    }

    h1 {
      font-family: 'Playfair Display', serif;
      font-size: 2.8rem;
      letter-spacing: 2px;
      margin-bottom: 0.5rem;
      color: #d4b86e;
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
    }

    .subtitle {
      font-style: italic;
      color: #c2bfa9;
      margin-bottom: 2rem;
    }
    
    .lang-buttons {
      position: absolute;
      top: 25px;
      right: 25px;
      display: flex;
      gap: 1rem;
      font-family: 'Playfair Display', serif;
      font-weight: 600;
    }

    .lang-buttons span {
      cursor: pointer;
      color: #d4b86e;
      font-size: 1rem;
      letter-spacing: 1px;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .lang-buttons span:hover {
      opacity: 1;
      transform: scale(1.1);
    }

    .lang-buttons .inactive {
      opacity: 0.6;
    }

    .desktop-nav {
      position: relative;
      z-index: 1;
    }

    nav ul {
      list-style: none;
      display: flex;
      justify-content: center;
      gap: 2rem;
      padding: 1rem 0;
      margin: 0;
    }

    .desktop-nav li {
      opacity: 0;
      transform: translateY(-20px);
      animation: navLinkFade 0.5s ease-out forwards;
    }

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

    .desktop-nav li:nth-child(1) { animation-delay: 0.2s; }
    .desktop-nav li:nth-child(2) { animation-delay: 0.3s; }
    .desktop-nav li:nth-child(3) { animation-delay: 0.4s; }
    .desktop-nav li:nth-child(4) { animation-delay: 0.5s; }
    .desktop-nav li:nth-child(5) { animation-delay: 0.6s; }
    .desktop-nav li:nth-child(6) { animation-delay: 0.7s; }

    .desktop-nav a {
      position: relative; /* Needed for the ::after pseudo-element */
      color: #d4b86e;
      text-decoration: none;
      font-family: 'Playfair Display', serif;
      letter-spacing: 1px;
      font-size: 0.8em;
       font-weight: 500;
      transition: color 0.3s ease, text-shadow 0.3s ease;
      padding-bottom: 5px; /* Add space for the underline */
    }

    .desktop-nav a:hover {
      color: #e6e0d0;
      text-shadow: 0 0 8px rgba(210, 190, 120, 0.3);
    }

    .desktop-nav a::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 1px;
      bottom: 0;
      left: 0;
      background-color: #d4b86e;
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.3s ease-out;
    }

    .desktop-nav a:hover::after {
      transform: scaleX(1);
    }

    main {
      max-width: 800px;
      margin: auto;
      padding: 0 2rem 5rem 2rem;
      backdrop-filter: blur(2px);
      border-radius: 10px;
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
      text-align: justify;
    }

    h2 {
      font-family: 'Playfair Display', serif;
      color: #d4b86e;
      font-size: 1.5rem;
      text-transform: uppercase;
      margin-top: 3rem;
      letter-spacing: 1px;
    }

    h3 {
      font-family: 'Playfair Display', serif;
      color: #d4b86e;
      font-size: 1.3rem;
      margin-top: 2rem;
      letter-spacing: 0.5px;
      text-align: left;
    }

    h3.typing-effect {
      border-right: 2px solid rgba(212, 184, 110, .75);
      white-space: nowrap;
      overflow: hidden;
      animation: blink-caret .75s step-end infinite;
    }

    @keyframes blink-caret {
      from, to { border-color: transparent }
      50% { border-color: rgba(212, 184, 110, .75); }
    }


    p { margin-bottom: 1.5rem; }
    .divider { text-align: center; color: #d4b86e; margin: 2rem 0; }
    .divider1 { text-align: center; color: #888; margin: 2rem 0;padding: 1em; }
    footer {
      margin-top: 3rem;
      text-align: center;
      padding: 2rem;
      font-size: 0.9rem;
      color: #aaa;
      border-top: 1px solid rgba(255,255,255,0.1);
      background: rgba(0, 0, 0, 0.4);
      position: relative;
      z-index: 1;
    }

   .dragonfly-separator {
      height: 500px; /* Adjust height based on the GIF size */
      background: url('../images/logos/dragonfly.gif') no-repeat center center;
       background-size: contain; /* Ensure the GIF scales down */
      margin: 1rem 0; /* Space above and below the GIF */
      position: relative; /* Ensure it respects the z-index flow */
      z-index: 1;
      opacity: 0.2;
    }

    .histo {
      padding-top: 5%;
    }
    .fadein {
      opacity: 0;
      animation: fadeIn 2s ease-in forwards;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  .fadeinh1 {
      opacity: 0;
      animation: fadeIn 2s 
  ease-in forwards;
      
  }
      @keyframes fadeInh1 {
        from { opacity: 0; }
        to { opacity: 1; }
      }

@media (max-width: 480px) {
  .fadeinh1 {
      opacity: 0;
      animation: fadeIn 2s 
  ease-in forwards;
      
  }
     .dragonfly-separator {
        height: 450px; /* Reduced height for mobile */
        background: url(../images/logos/dragonfly.gif) no-repeat center center;
        background-size: contain; /* Ensure the GIF scales down */
        margin: 1rem 0;
        position: relative;
        z-index: 1;
        opacity: 0.2;
    }
  }




    .hidden { display: none; }

    .contenu {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 1.8s ease-out, transform 1.8s ease-out;
      will-change: opacity, transform;
    }

    
    .contenu.visible {
      opacity: 1;
      transform: translateY(0);
    }

    
    .contenu::before {
      content: "";
      position: absolute;
      top: -20%;
      left: -20%;
      width: 140%;
      height: 140%;
      background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 3s ease-out;
      pointer-events: none;
      z-index: -1;
    }

    .contenu.visible::before {
      opacity: 0.2;
      animation: softMist 25s infinite linear;
    }

    @keyframes softMist {
      0% { transform: translate(0,0) scale(1); opacity: 0.2; }
      50% { transform: translate(-5%, -3%) scale(1.05); opacity: 0.3; }
      100% { transform: translate(0,0) scale(1); opacity: 0.2; }
    }

a, .link {
  color: #d4b86e;
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover, .link:hover {
  color: #c2bfa9;
  text-shadow: 0 0 6px rgba(210, 190, 120, 0.4);
}

/* --- Story Image --- */
.story-image-container {
  text-align: center; 
  margin: 2.5rem 0; 
  opacity: 0; 
  transform: translateY(30px);
  transition: opacity 1.8s ease-out, transform 1.8s ease-out;
}

.story-image {
  width: 80%; 
  max-width: 100%; 
  height: auto; 
  border-radius: 5px; 
  border: 1px solid rgba(212, 184, 110, 0.2); 
  opacity: 0.65;
}

.story-image-container.visible {
  opacity: 1;
  transform: translateY(0);
}

/* -- Mobile Navigation -- */
.mobile-nav-toggle {
  position: fixed;
  top: 25px;
  left: 25px;
  z-index: 9999;
  background: transparent;
  border: 1px solid #d4b86e;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 5px;
  aspect-ratio: 1;
  cursor: pointer;
  opacity: 0; /* Hidden by default on desktop */
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.mobile-nav-toggle .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mobile-nav-toggle::before,
.mobile-nav-toggle::after {
  content: '';
  position: absolute;
  left: 10%;
  width: 80%;
  height: 3px;
  background: #d4b86e;
  border-radius: 2px;
  transition: transform 0.3s ease-out, opacity 0.2s linear;
}

.mobile-nav-toggle::before {
  top: 30%;
}

.mobile-nav-toggle::after {
  bottom: 30%;
}

.mobile-nav-toggle[aria-expanded="true"]::before {
  transform: translateY(5.5px) rotate(45deg);
}

.mobile-nav-toggle[aria-expanded="true"]::after {
  transform: translateY(-5.5px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0 0 0 0;
  background: rgba(13, 13, 13, 0.9);
  backdrop-filter: blur(10px);
  transform: translateX(-100%);
  transition: transform 350ms ease-out;
  z-index: 9998;
}

.mobile-nav[data-visible="true"] {
  transform: translateX(0%);
}

.mobile-nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 3rem;
}

.mobile-nav-links a {
  color: #d4b86e;
  text-decoration: none;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  letter-spacing: 2px;
}

@media (max-width: 850px) {
  .desktop-nav {
    display: none;
  }

  .mobile-nav-toggle {
    opacity: 1; /* Make it visible on mobile */
    visibility: visible;
  }
}


  .sigil {
            width: 120px;
            height: 120px;
            margin: 1rem auto 2rem;
            opacity: 0.5;
            filter: drop-shadow(0 0 20px rgba(212, 197, 169, 0.3));
            animation: rotate 60s linear infinite;
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

    /* --- Accordion for Contact Form --- */
    .accordion {
      border: 1px solid rgba(212, 184, 110, 0.3);
      border-radius: 5px;
      background: rgba(0,0,0,0.2);
    }

    .accordion-toggle {
      background: transparent;
      border: none;
      width: 100%;
      padding: 1rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      color: #d4b86e;
      font-family: 'Playfair Display', serif;
      font-size: 1.2rem;
      text-align: left;
    }

    .accordion-toggle:hover {
      background: rgba(212, 184, 110, 0.05);
    }

    .accordion-icon {
      width: 1em;
      height: 1em;
      position: relative;
      transition: transform 0.3s ease-out;
    }

    .accordion-icon::before,
    .accordion-icon::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #d4b86e;
      transition: transform 0.3s ease-out;
    }

    .accordion-icon::after {
      transform: rotate(90deg);
    }

    .accordion-toggle[aria-expanded="true"] .accordion-icon {
      transform: rotate(45deg);
    }

    .accordion-content { /* This will be the container for the animation */
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.4s ease-out;
    }

    .accordion-content > * { /* Target the direct children for the overflow */
      overflow: hidden;
    }

    .accordion-toggle[aria-expanded="true"] ~ .accordion-content {
      grid-template-rows: 1fr;
    }

    .accordion-content .invite {
      padding: 0 1.5rem;
      font-style: italic;
      color: #c2bfa9;
    }


     #messageret {
     font-size:1em;
     letter-spacing:6px;
     border:2px solid #fff;
     -moz-border-radius:8px;
     -webkit-border-radius:8px;
     border-radius:8px;
     margin-left:5px;
     padding:20px 20px 20px 20px;
     text-align: center;
}
 .contenu-success {
     color:rgb(0, 0, 0);
}
 .animated {
     -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
     animation-fill-mode: both;
}
 .animated.hinge {
     -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
     animation-duration: 2s;
}
 @keyframes tada {
     0% {
         -webkit-transform: scale(1);
         -ms-transform: scale(1);
         transform: scale(1);
    }
     10%, 20% {
         -webkit-transform: scale(0.9) rotate(-3deg);
         -ms-transform: scale(0.9) rotate(-3deg);
         transform: scale(0.9) rotate(-3deg);
    }
     30%, 50%, 70%, 90% {
         -webkit-transform: scale(1.1) rotate(3deg);
         -ms-transform: scale(1.1) rotate(3deg);
         transform: scale(1.1) rotate(3deg);
    }
     40%, 60%, 80% {
         -webkit-transform: scale(1.1) rotate(-3deg);
         -ms-transform: scale(1.1) rotate(-3deg);
         transform: scale(1.1) rotate(-3deg);
    }
     100% {
         -webkit-transform: scale(1) rotate(0);
         -ms-transform: scale(1) rotate(0);
         transform: scale(1) rotate(0);
    }
}
 .tada {
     -webkit-animation-name: tada;
     -moz-animation-name: tada;
     animation-name: tada;
}


    #contactform {
      padding: 0 1.5rem 1.5rem 1.5rem;
    }

    #contactform input[type="text"],
    #contactform input[type="email"],
    #contactform textarea {
      width: 80%;
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.2);
      color: #f5f5f5;
      padding: 0.8rem;
      border-radius: 3px;
      font-family: 'Crimson Text', serif;
      font-size: 1rem;
    }

    #contactform button[type="submit"] {
      width: 80%;
      padding: 0.8rem;
      border: 1px solid #d4b86e;
      background: rgba(0,0,0,0.3);
      color: #d4b86e;
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    #contactform button[type="submit"]:hover {
      background-color: #d4b86e;
      color: #0d0d0d;
    }



    /* --- Scroll to Top Button --- */
    #scrollTopBtn {
      position: fixed;
      bottom: 20px;
      left: 30px;
      background-color: rgba(13, 13, 13, 0.7); /* Dark semi-transparent background */
      backdrop-filter: blur(5px);
      border: 1px solid rgba(212, 184, 110, 0.4);
      border-radius: 5px;
      padding: 0.5rem 1rem;
      cursor: pointer;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease, background-color 0.3s ease;
      color: #d4b86e;
      font-family: 'Playfair Display', serif;
      font-size: 0.9rem;
      letter-spacing: 1px;
    }

    #scrollTopBtn.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    #scrollTopBtn:hover {
      background-color: rgba(212, 184, 110, 0.1);
      border-color: rgba(212, 184, 110, 0.7);
    }
    
    .scroll-btn-content {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    #scrollTopBtn svg {
      fill: currentColor; /* Inherits the gold color from the parent */
      width: 20px;
      height: 20px;
    }

    .contenu_para{
color:rgb(194, 191, 169);
    }

.soustitlogo {
    max-width: 80%;
    margin: 10% auto 0; /* Sets top margin and centers horizontally */
    text-align: center; /* Centers the h1 and subtitle text inside */
}


@media (max-width: 850px) {
.soustitlogo {
    max-width: 80%;
    margin: 10% auto 0; /* Sets top margin and centers horizontally */
    text-align: center; /* Centers the h1 and subtitle text inside */
    top: 6em;
}

main {
    max-width: 800px;
    margin: auto;
    padding: 0 2rem 5rem 2rem;
    backdrop-filter: blur(2px);
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
    text-align: justify;
    top: 9em;
}

}