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

        :root {
            --gold:       #e8c84a;
            --gold-pale:  #f5e4a0;
            --gold-glow:  #ffda00;
            --teal-glow:  #00ffee;
            --radius:     15px;
            --border:     rgba(255,255,255,0.15);
            --shadow:     0 10px 35px rgba(0,0,0,0.4);
        }

        body {
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
            background: linear-gradient(135deg, #0a0e27 0%, #1a1a4d 25%, #2d1b4e 50%, #1a0033 75%, #0a0e27 100%);
            background-attachment: fixed;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 60px 70px, #fff, rgba(0,0,0,0)),
                radial-gradient(1px 1px at 50px 50px, #fff, rgba(0,0,0,0));
            background-repeat: repeat;
            background-size: 200px 200px;
            animation: twinkle 5s infinite;
            pointer-events: none;
            z-index: 1;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        .splash {
            position: relative;
            flex: 1 0 auto;
            z-index: 5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 3rem 2rem;
            text-align: center;
        }

        .ornament-top {
            font-family: 'Cinzel Decorative', serif;
            font-size: 28px;
            color: var(--gold);
            letter-spacing: 0.4em;
            margin-bottom: 1.2rem;
            margin-top: 10px;
            font-weight: 900;
            opacity: 0.75;
            animation: fadeUp 1.5s ease forwards;
            animation-delay: 0.3s;
           }

        .lock-number {
            font-family: 'Cinzel Decorative', serif;
            font-size:clamp(20px, 2.1vw, 26px);
            color: var(--gold);
            letter-spacing: 0.4em;
            margin-bottom: 1.2rem;
            margin-top: 10px;
            font-weight: 900;
            opacity: 0.75;
            animation: fadeUp 1.5s ease forwards;
            animation-delay: 0.3s;
        }

        .main-container {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
        }

.amarante-bold {
  font-family: "Amarante", serif;
  color:rgba(158, 99, 99, 0.8);
  font-size:25px;
  font-weight: 600;
  font-style: italic;
  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

    
.outline-bold {

font-weight: 600;
  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}
        h1 {
            font-size: 3.5rem;
            font-family: 'Grechen Fuemen', serif;
            color: #d4af37;
            text-shadow: 
                0 0 10px rgba(212, 175, 55, 0.8),
                0 0 20px rgba(138, 43, 226, 0.6),
                0 0 30px rgba(75, 0, 130, 0.4);
            letter-spacing: 3px;
            font-weight: 700;
            margin-bottom: 15px;
            animation: glow 3s ease-in-out infinite;
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 2.5rem;
            }
        }

        @keyframes glow {
            0%, 100% { 
                text-shadow: 
                    0 0 10px rgba(212, 175, 55, 0.8),
                    0 0 20px rgba(138, 43, 226, 0.6),
                    0 0 30px rgba(75, 0, 130, 0.4);
            }
            50% { 
                text-shadow: 
                    0 0 20px rgba(212, 175, 55, 1),
                    0 0 30px rgba(138, 43, 226, 0.8),
                    0 0 40px rgba(75, 0, 130, 0.6);
            }
        }

.video-container video {
  max-width: 400px; /* Limits the width of the video */
  margin: 0 auto;    /* Centers the container on the page */
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  border-radius: 12px;
  overflow: hidden; /* Ensures the video corners match the border-radius */
  background-color: #000;
  width: 100%;      /* Makes the video responsive to the container */
  display: block;   /* Removes bottom whitespace/gap */
  height: auto;

}


        .video-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            overflow: hidden;
        }

        .video-background video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%);
            object-fit: cover;
        }

        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        /* ══════════════════════════════════════════
           NAV BAR (ported from Realm of The Spirit)
        ══════════════════════════════════════════ */
        nav {
            position: relative;
            top: 10px;
            z-index: 50;
            margin: 0 auto;
            width: min(1800px, calc(100% - 24px));
            border-radius: 18px;
            padding: 6px 18px 6px 18px;
            background-image: url(../img-son/map-background-nav3.png);
               
            /* Keeps the image from repeating if it's too small */
            background-repeat: repeat;
  
            /* Ensures the image covers the entire area without stretching/distorting 
            background-size: 1920px 500px;*/

            background-size: 900px auto ;
  
            /* Keeps the image centered */
            background-position: margin-bottom;
  
            /* Optional: Fixes the image so it doesn't move when you scroll */
            background-attachment: fixed;
  
        
            border: 1px solid rgba(231,201,106,.35);
            box-shadow:
                0 20px 60px rgba(0,0,0,.45),
                inset 0 0 0 1px rgba(255,217,138,.08),
                0 0 0 1px rgba(178,120,255,.08);
            backdrop-filter: blur(10px);
            overflow: hidden;
        }

        nav::before {
            content: "";
            position: absolute;
            inset: -60px;
            background:
                radial-gradient(420px 120px at 15% 10%, rgba(231,201,106,.18), transparent 60%),
                radial-gradient(420px 120px at 85% 10%, rgba(178,120,255,.15), transparent 60%),
                radial-gradient(420px 160px at 10% 95%, rgba(178,120,255,.12), transparent 55%),
                radial-gradient(420px 160px at 90% 95%, rgba(231,201,106,.14), transparent 55%);
            pointer-events: none;
        }

        .nav-inner {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 14px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 200px;
        }

        .seal {
            width: 90px;
            height: 90px;
            border-radius: 12px;
            border: 1px solid rgba(231,201,106,.38);
            background: none;
            box-shadow: 0 0 18px rgba(231,201,106,.18);
            display: grid;
            place-items: center;
            position: relative;
            overflow: hidden;
        }

        .seal img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            z-index: 0;
        }

        .seal::after {
            content: "";
            position: absolute;
            inset: -40%;
            background: conic-gradient(from 180deg,
                rgba(255,217,138,0),
                rgba(255,217,138,.28),
                rgba(178,120,255,.22),
                rgba(255,217,138,0)
            );
            animation: navSealSpin 8s linear infinite;
            opacity: .8;
        }

        @keyframes navSealSpin {
            to { transform: rotate(360deg); }
        }

.basic-title {

  font-family: "Grechen Fuemen", cursive;
  line-height: 1.05;
letter-spacing: .08em;
 font-size: clamp(35px, 2.2vw, 40px);
  text-align: center;
  color: rgba(246,239,255,.92);
  margin-top: 3px;
  font-weight: 900;
   padding: 4rem;
}


/* Mobile view adjustments */
@media (max-width: 768px) {
  .basic-title {
    margin: 0 auto;
    margin-top: 10px;
    padding: clamp(2rem,2vw, 4rem);
     text-align: center;
     
  }
}
        .brand-title {
            line-height: 1.05;
            font-family: "Grechen Fuemen", cursive;
            letter-spacing: .08em;
            
             font-size: clamp(28px, 2.5vw, 30px);
            color: rgba(246,239,255,.92);
            margin-top: 10px;
            font-weight: 600!important;

  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;

        }

        .brand-title b {
            display: block;
            font-family: "Grechen Fuemen", cursive;
            margin-top: 10px;
           
            
            letter-spacing: .06em;
            color: var(--gold-pale);
           
            font-weight: 900;
            text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
        }

        .menu-toggle {
            display: none;
            border: 1px solid rgba(231,201,106,.35);
            background: rgba(15,8,30,.50);
            color: var(--gold);
            border-radius: 12px;
            padding: 10px 12px;
            cursor: pointer;
           font-size: clamp(20px, 2.1vw, 25px);
            font-weight: 700;
            box-shadow: inset 0 0 0 1px rgba(255,217,138,.06);
        }

        .menu-toggle:focus-visible {
            outline: 3px solid rgba(231,201,106,.35);
            outline-offset: 2px;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .button-row {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .mystic-btn {
            position: relative;
             font-family: "Aubrey", system-ui;
             font-size: clamp(30px, 3.5vw, 40px);
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            text-decoration: none;
            color: var(--gold-pale);
            padding: 12px 26px;
            border-radius: 15px;
            border: 1px solid rgba(232,200,74,0.4);
            background: rgba(11,5,32,0.6);
            backdrop-filter: blur(8px);
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .mystic-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
            transform: translateX(-100%);
            transition: transform 0.5s ease;
        }

        .mystic-btn:hover::before { transform: translateX(100%); }

        .mystic-btn::after {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 15px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .btn-teal {
            border-color: rgba(0,212,200,0.5);
            box-shadow: 0 0 18px rgba(0,212,200,0.12), inset 0 0 20px rgba(0,212,200,0.05);
            color: #a0f5f0;
        }
        .btn-teal::after { box-shadow: 0 0 0 2px var(--teal-glow), 0 0 35px rgba(0,255,238,0.5); }
        .btn-teal:hover  { background: rgba(0,212,200,0.12); color: #fff; }
        .btn-teal:hover::after, .btn-teal:active::after { opacity: 1; }
        .btn-teal:active {
            transform: scale(0.97);
            box-shadow: 0 0 0 2px var(--teal-glow), 0 0 60px rgba(0,255,238,0.8), 0 0 120px rgba(0,255,238,0.4);
            background: rgba(0,212,200,0.2);
            color: #fff;
        }

        @media (max-width: 760px) {
            .menu-toggle {
                display: inline-flex;
                align-items: center;
                gap: 10px;
            }

            .nav-inner {
                position: relative;
                flex-wrap: wrap;
                justify-content: center;
                row-gap: 14px;
                padding: 16px 12px;
            }

            .brand {
                min-width: unset;
                width: 100%;
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 8px;
            }

            .nav-links {
                display: none;
                width: 100%;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 12px;
                margin-top: 4px;
            }

            nav.open .nav-links {
                display: flex;
            }

            .button-row {
                width: 100%;
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
            }

            nav.open .nav-links .mystic-btn {
                width: 100%;
                text-align: center;
            }

            .brand-title {
                margin-top: 0;
                text-align: center;
            }
        }

        

        .roundish-sticker {
            position: relative;
            width: 490px;
            height: 490px;
            border-radius: 20px;
            border: 2px ridge #d4844c;
            z-index: 1;
            margin-top: 1rem;
            pointer-events: none;
            overflow: hidden;
            object-fit: cover;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
        }

        .sticker-image {
            position: relative;
            align-items: center;
            width: 490px;
            height: 490px;
            border-radius: 20px;
            border: 2px ridge #d4844c;
            z-index: 1;
            margin-top: 1rem;
            pointer-events: none;
            overflow: hidden;
            object-fit: cover;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
        }
.align-cent {
  display: flex;
  align-items: center; /* Centers children vertically */
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;           /* Adds space between the image and text */
}
.align-left {
  float: left;
  margin-left: 20px;  /* Adds space between text and image */
  margin-bottom: 10px; /* Adds space if text wraps underneath */
  max-width: 300px;    /* Prevents image from taking over the page */
  margin-right: 1rem;
  height: auto;

      }

.align-right {
  float: right;
  margin-right: 1rem;  /* Adds space between text and image */
  margin-bottom: 10px; /* Adds space if text wraps underneath */
  max-width: 300px;    /* Prevents image from taking over the page */
  height: auto;
}

/* Mobile: stop floating images beside text — stack them full-width and
   centered so paragraphs never get squeezed into a narrow ragged column */
@media (max-width: 700px) {
  .align-left,
  .align-right {
    float: none;
    display: block;
    margin: 0 auto 1.25rem;
    max-width: 260px;
    width: 100%;
  }

  .roundish-sticker,
  .sticker-image {
    width: 100% !important;
    height: auto !important;
    max-width: 260px;
    aspect-ratio: 1 / 1;
  }

  .align-cent {
    justify-content: center;
    text-align: center;
  }

  .tagline {
    padding-left: 0;
  }

  .tagline2 {
    text-align: center;
    margin-left: 0;
  }

  .basic-title {
    text-align: center;
  }
}




.sticky-footer{
    position: relative;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    width:100%;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(6px);          /* optional, nicer on supported browsers */
    -webkit-backdrop-filter: blur(6px);  /* optional */
    padding: 12px 16px;
    text-align: center;
    z-index: 1;
    color: #fff;
  }
.footer-inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
}

.footer-inner span:not(:last-child)::after{
  content: "•";
  margin-left: 10px;
  opacity: .5;
}

.sticky-footer a{
  text-decoration: none;
  color: #fff; /* default */
  
}

.sticky-footer a:hover{
  color: #ff6a00; /* hover color */
}

    @media (max-width: 600px) {
      .button-row { flex-direction: column; align-items: center; }
      
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; }
    }
      

 /* Subtitle above title text-transform: uppercase;*/
    .pre-title {
       font-family: "Amarante", serif;
      font-style: italic;
      font-size: clamp(26px, 2.1vw, 28px);
      color: rgba(12, 188, 199, 0.9);
      letter-spacing: 0.25em;
     font-weight: 600;
      margin-bottom: 1.5rem;
      animation: fadeUp 1.4s ease forwards;
      animation-delay: 0.6s;
      opacity: 0;
    }

/* Main title */
.main-title-rainbow {
  font-family: "Grechen Fuemen", cursive;
  font-size: clamp(80px, 7vw, 90px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.04em;
margin-top:1rem;
  color: #000000; 
  margin-bottom: 0.1rem;
  opacity: 0;

  /* Text glow effect */
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.8),
               0 0 40px rgba(255, 215, 0, 0.6),
               0 0 60px rgba(255, 215, 0, 0.4);

  /* Entrance animation happens once */
  animation: fadeUp 0.1s ease forwards;
  animation-delay: 0.1s;
}

/* Adding the looping animation here */
.main-title-rainbow {
  animation: 
    fadeUp 0.1s ease forwards, 
    colorFade 10s ease-in-out 2.3s infinite,
    glowRotate 6s linear infinite;
}

@keyframes fadeUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes colorFade {
  0% {
    /* Start: black */
    color: #000000;
  }
  
  50% {
    /* Mid: white */
    color: #ffffff;
  }
  
  100% {
    /* End: back to black */
    color: #000000;
  }
}

@keyframes glowRotate {
  0% {
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8),
                 0 0 40px rgba(255, 215, 0, 0.6),
                 0 0 60px rgba(255, 215, 0, 0.4);
  }
  
  33% {
    text-shadow: 0 0 20px rgba(255, 165, 0, 0.8),
                 0 0 40px rgba(255, 165, 0, 0.6),
                 0 0 60px rgba(255, 165, 0, 0.4);
  }
  
  66% {
    text-shadow: 0 0 20px rgba(32, 178, 170, 0.8),
                 0 0 40px rgba(32, 178, 170, 0.6),
                 0 0 60px rgba(32, 178, 170, 0.4);
  }
  
  100% {
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8),
                 0 0 40px rgba(255, 215, 0, 0.6),
                 0 0 60px rgba(255, 215, 0, 0.4);
  }
}



    @media (max-width: 600px) {
      .main-title-rainbow { 
        flex-direction: column; 
        align-items: center; 
        font-size: clamp(50px, 5vw, 65px);}
      
    }



    /* Divider rule */
    .title-rule {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 1.2rem auto 0.6rem;
      width: min(500px, 80vw);
      animation: fadeUp 1.4s ease forwards;
      animation-delay: 1.1s;
      opacity: 0;

    }

    .title-rule::before, .title-rule::after {
      content: '';
      flex: 1;
      height: 1px;
     
    }

    .title-rule-gem {
      font-size: 50px;
    
    }

    /* Tagline  padding-left:4rem;*/
    .tagline {
     font-family: 'Amarante', Georgia, serif;
 text-align: left;

 
      font-size: clamp(30px, 2.5vw, 40px);
      color: rgba(244, 224, 5, 0.8);
      letter-spacing: 0.08em;
       margin-top:1rem;
 font-weight: 400;
      margin-bottom: 3rem;
      max-width: 100%;
      line-height: 1.6;
      animation: fadeUp 1.4s ease forwards;
      animation-delay: 1.3s;
      opacity: 0;
        }

    /* Tagline */
    .tagline2 {
      font-family: "Aubrey", system-ui;
text-align: left;

    font-size: clamp(30px, 2.5vw, 40px);
      color: white;
    font-weight: 400;
       margin-top:1rem;
     margin-left:1rem;
      margin-bottom: 1rem;
      max-width: 100%;
      line-height: 1.6;
      animation: fadeUp 1.4s ease forwards;
      animation-delay: 1.3s;
      opacity: 0;
    }



  .description-footer {
    margin:auto;
    max-width: 86%;
    margin-bottom: 3rem;
    border-radius: calc(var(--radius) - 3px);
    border: 1px solid var(--border);
    background: rgba(0,0,0,.12);
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
    padding: clamp(11px, 2vw, 12px); 
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;  
      font-size: clamp(15px, 1.8vw, 20px);
      color: rgba(249, 230, 251, 0.8);
      font-weight: 100;
  
      margin-top: 8px;
      line-height: 1.5;
  }
/* Green themed "Glass" bordered text box */
.glass-box{
  max-width: 90rem;
  width: 100%;
  padding: 1rem 1.2rem;
  margin: 1px;

  /* Glass look (green tint) */
  background: rgba(6, 50, 2, 0.8);
  border: 1px solid rgba(110, 231, 183, 0.35);
  border-radius: 16px;

  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  /* Crisp glass blur */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Optional: subtle highlight */
  position: relative;
  overflow: hidden;
}

/* Mobile view */
@media (max-width: 768px) {
  .glass-box {
    max-width: 18rem;
    padding: 0.75rem 1rem;
  }
}

/* Optional glossy sheen */
.glass-box::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    600px 200px at 20% 0%,
    rgba(167, 243, 208, 0.28),
    transparent 60%
  );
}

.glass-box .text{
  max-height: 1em; /* tune */
  overflow: hidden;
  overflow-wrap: break-word;
}



  .content-box{
    width: min(1400px, 100%);
    margin: 20px auto;
    padding: clamp(14px, 2.2vw, 18px);
    border-radius: var(--radius);

     background-image: url(../img-son/map-background-nav-4.png);
                
            /* Keeps the image from repeating if it's too small */
            background-repeat: repeat;
  
            /* Ensures the image covers the entire area without stretching/distorting 
            background-size: contain;*/
            background-size: 900px auto ;
  
            /* Keeps the image centered */
            background-position: center;
  
            /* Optional: Fixes the image so it doesn't move when you scroll */
            background-attachment: fixed;

    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 25px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
     display: flex;
  flex-direction: column;
 align-items: center;
  justify-content: center;
  text-align: center;
  }

/* Mobile view adjustments */
@media (max-width: 768px) {
  .content-box {
    margin: 15px auto;
    padding: clamp(12px, 4vw, 16px);
  }
}
  .clear-box{
    width: min(1500px, 100%);
    margin: 20px auto;
    background-color: rgba(12, 188, 199, 0.2);
    padding: clamp(14px, 2.2vw, 18px);
    border-radius: var(--radius); 
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 25px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
     display: flex;
  flex-direction: column;
 align-items: center;
  justify-content: center;
  text-align: center;
  }

/* Mobile view adjustments */
@media (max-width: 768px) {
  .clear-box {
    margin: 15px auto;
    padding: clamp(12px, 4vw, 16px);
  }
}

/* Mobile perf fix: this page stacks several backdrop-filter blur boxes
   (nav, content-box, clear-box, glass-box, footer) down a long page of
   text. On phones, that many blur layers on a tall page can exhaust the
   compositor and cause content further down to render blank/white.
   Drop the blur on mobile and lean on each box's own solid tint instead
   — visually near-identical, without the rendering risk. */
@media (max-width: 768px) {
  .content-box,
  .clear-box,
  .glass-box,
  .sticky-footer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .content-box {
    background-color: rgba(10, 6, 26, 0.55);
  }
}
   /* MAIL FORM */
   .container {
      background: linear-gradient(135deg, #d67435 0%, #f5e6d3 100%);
      padding: 50px;
      border-radius: 20px;
      box-shadow: 0 10px 40px rgba(101, 67, 33, 0.15);
      max-width: 650px;
      width: 100%;
    }

    h1 {
      color: #654321;
      font-size: 42px;
      margin-bottom: 10px;
      font-weight: bold;
      letter-spacing: 1px;
    }

    .subtitle {
      color: #000000;
      font-size: 16px;
      margin-bottom: 35px;
      font-style: italic;
    }

    .form-group {
      margin-bottom: 28px;
      display: flex;
      flex-direction: column;
    }

    label {
      margin-bottom: 10px;
      font-weight: bold;
      color: #654321;
      font-size: 18px;
      letter-spacing: 0.5px;

    }

    input, textarea {
      padding: 15px 18px;
      border: none;
      border-radius: 12px;
      font-family: 'Georgia', serif;
      font-size: 16px;
      color: #654321;
     background:rgba(199, 241, 202, 0.8);;
      box-shadow: inset 0 2px 6px rgba(101, 67, 33, 0.08);
      transition: all 0.3s ease;
    }

    input::placeholder, textarea::placeholder {
      color: #000000;
      opacity: 0.8;

    }

    input:focus, textarea:focus {
      outline: none;
      background: rgba(145, 208, 214, 0.8);
      box-shadow: inset 0 2px 6px rgba(101, 67, 33, 0.12), 0 0 12px rgba(184, 134, 11, 0.2);
    }

    textarea {
      resize: vertical;
      min-height: 180px;
       background: rgba(199, 241, 202, 0.8);
    }

    button {
      padding: 16px 32px;
      background: linear-gradient(135deg, #b8860b 0%, #8b6914 100%);
      color: #fef9f3;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      font-size: 18px;
      font-weight: bold;
      font-family: 'Georgia', serif;
      letter-spacing: 1px;
      box-shadow: 0 6px 20px rgba(184, 134, 11, 0.3);
      transition: all 0.3s ease;
    }

    button:hover {
      background: linear-gradient(135deg, #8b6914 0%, #654321 100%);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(184, 134, 11, 0.4);
    }

    button:active {
      transform: translateY(0);
      box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
    }

    .wrench-icon {
      color: #b8860b;
      margin-right: 12px;
      font-size: 48px;
      display: inline-block;
    }

  /* ══════════════════════════════════════════
  @FONT FACES
   ══════════════════════════════════════════ */
@font-face {
  font-family: 'Amarante';
  src: url(../font-s/Amarante-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'Aubrey';
  src: url(../font-s/Aubrey-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'Grechen Fuemen';
  src: url(../font-s/GrechenFuemen-Regular.woff2) format('woff2');

}


@font-face {
  font-family: 'Cinzel Decorative';
  src: url(../font-s/CinzelDecorative-Black.woff2) format('woff2');

}