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

body {
  background: #090909;
  color: #f5e2a5;
  font-family: Georgia, serif;
  line-height: 1.7;
}

a {
  text-decoration: none;
  color: inherit;
}

header {
  text-align: center;
  padding: 70px 20px 40px;
}

.logo {
  width: 170px;
  margin-bottom: 20px;
}

h1 {
  font-size: 3.5rem;
  letter-spacing: 4px;
  color: #d8b15d;
}

.subtitle {
  margin-top: 20px;
  font-size: 1.25rem;
  color: #d0c4a0;
}

.hero {
  text-align: center;
  margin: 60px 0;
}

.play-button {
  display: inline-block;
  padding: 18px 40px;
  border: 2px solid #b88b3c;
  border-radius: 12px;
  color: #f3d995;
  transition: 0.3s;
}

.play-button:hover {
  background: #b88b3c;
  color: #111;
}

section {
  width: min(1100px, 90%);
  margin: auto;
  margin-top: 90px;
}

section h2 {
  text-align: center;
  margin-bottom: 40px;
  color: #d8b15d;
  font-size: 2rem;
}

.gallery {
  min-height: 250px;
  border: 1px solid #3c2d16;
  border-radius: 15px;
}

.cards {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  width: 280px;
  padding: 30px;
  background: #111;
  border: 1px solid #4b371a;
  border-radius: 15px;
  text-align: center;
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-6px);
  border-color: #d8b15d;
}

.card h3 {
  margin-bottom: 15px;
  color: #d8b15d;
}

footer {
  background: #070707;

  padding: 70px 20px 40px;

  margin-top: 120px;
}

.footer-links {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 35px;
}

.footer-links a {
  color: #d4af37;

  font-size: 1rem;

  transition: 0.3s;
}

.footer-links a:hover {
  color: white;
}

.footer-divider {
  width: 180px;

  height: 1px;

  background: #5d4720;

  margin: 40px auto;
}

.footer-copy {
  text-align: center;

  color: #777;

  font-size: 0.9rem;
}

.hero {
  position: relative;

  width: 100%;

  height: 100vh;

  overflow: hidden;
}

.background-video {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;
}

.overlay {
  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.6);
}

.hero-content {
  position: relative;

  z-index: 10;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  padding: 20px;
}

.hero-content h1 {
  font-size: 3rem;

  margin-top: 20px;
}

.hero-content p {
  max-width: 700px;

  margin: 35px auto;

  font-size: 1.15rem;

  color: #ead7a2;
}

.container {
  width: min(1000px, 90%);

  margin: auto;
}

.about {
  padding: 110px 0;

  background: #090909;
}

.about h2 {
  text-align: center;

  color: #d8b15d;

  font-size: 2.5rem;

  margin-bottom: 40px;
}

.about p {
  font-size: 1.15rem;

  color: #d9d2c2;

  text-align: center;

  max-width: 850px;

  margin: 20px auto;

  line-height: 1.9;
}
.gods {
  padding: 120px 0;

  background: #0b0b0b;
}

.section-intro {
  text-align: center;

  max-width: 700px;

  margin: 0 auto 70px;

  color: #c8c1b0;
}

.god-grid {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 45px;
}

.god-card {
  background: #111;

  border: 1px solid rgba(212, 175, 55, 0.2);

  border-radius: 18px;

  overflow: hidden;

  transition: 0.35s;
}

.god-card:hover {
  transform: translateY(-8px);

  border-color: #d4af37;
}

.god-card img {
  width: 100%;

  height: auto;

  display: block;
}

.god-card h3 {
  margin: 30px 0 15px;

  text-align: center;

  color: #d4af37;

  font-size: 2rem;
}

.god-card p {
  padding: 0 30px 35px;

  text-align: center;

  color: #d8d1c1;

  line-height: 1.8;
}
.footer-logo {
  display: block;

  width: 80px;

  margin: 0 auto 35px;

  transition: 0.35s;
}

.footer-logo:hover {
  transform: scale(1.05);
}

.language-selector {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 1000;
}

#languageButton {
  display: flex;

  align-items: center;

  gap: 10px;

  background: rgba(0, 0, 0, 0.55);

  border: 1px solid rgba(212, 175, 55, 0.45);

  border-radius: 30px;

  padding: 10px 16px;

  color: #d4af37;

  cursor: pointer;
}
#languageButton i {
  color: #d4af37;

  font-size: 18px;
}

.fi {
  font-size: 22px;
}

.arrow {
  font-size: 12px;
}

.language-menu {
  position: absolute;

  top: 65px;

  right: 0;

  width: 220px;

  display: none;

  flex-direction: column;

  background: #0b0b0b;

  border: 1px solid #8d6b18;

  border-radius: 14px;

  overflow-y: auto;

  overflow-x: hidden;

  max-height: 320px;

  z-index: 1000;
  opacity: 0;

  visibility: hidden;

  transform: translateY(-10px);

  transition: 0.18s ease;
}

.language-menu.show {
  display: flex;
  opacity: 1;

  visibility: visible;

  transform: translateY(0);
}

.language-option {
  display: flex;

  align-items: center;

  gap: 12px;

  width: 100%;

  padding: 12px 18px;

  cursor: pointer;

  color: #e9d19a;

  font-size: 15px;

  transition: 0.25s;
}

.language-option:hover {
  background: #1a1a1a;
}

.language-option .fi {
  font-size: 18px;

  flex-shrink: 0;
}

.language-option i {
  font-size: 16px;

  color: #d4af37;

  flex-shrink: 0;
}

.language-option:hover {
  background: black;
}

.language-menu::-webkit-scrollbar {
  width: 8px;
}

.language-menu::-webkit-scrollbar-track {
  background: #111;
}

.language-menu::-webkit-scrollbar-thumb {
  background: #c9a64b;

  border-radius: 20px;
}

.language-menu::-webkit-scrollbar-thumb:hover {
  background: #e0b95c;
}

/*COOKIE BANNER*/

#cookie-banner{

    position:fixed;

    left:0;

    right:0;

    bottom:25px;

    display:flex;

    justify-content:center;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transform:translateY(40px);

    transition:.35s ease;

}

#cookie-banner.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.cookie-content{

    width:min(760px,92%);

    background:#090909;

    border:1px solid rgba(212,175,55,.35);

    border-radius:18px;

    padding:28px;

    box-shadow:0 20px 60px rgba(0,0,0,.65);

    backdrop-filter:blur(12px);

}

.cookie-content h3{

    color:#d4af37;

    margin-bottom:15px;

    font-size:1.4rem;

}
.cookie-title{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:18px;

}

.cookie-title img{

    width:48px;

    height:48px;

    object-fit:contain;

    flex-shrink:0;

}

.cookie-content p{

    color:#ddd;

    line-height:1.8;

    font-size:.95rem;

}

.cookie-buttons{

    margin-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.cookie-buttons a{

    color:#d4af37;

    text-decoration:none;

    transition:.25s;

}

.cookie-buttons a:hover{

    color:white;

}

#acceptCookies{

    background:linear-gradient(180deg,#d9b95a,#b98a22);

    color:#111;

    border:none;

    border-radius:30px;

    padding:12px 30px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 4px 18px rgba(212,175,55,.25);

}

#acceptCookies:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 25px rgba(212,175,55,.45);

}

#acceptCookies:hover{

    background:#e7c25b;

    transform:translateY(-2px);

}
.cookie-content::before{

    content:"";

    display:block;

    width:100%;

    height:2px;

    margin-bottom:20px;

    background:linear-gradient(
        90deg,
        transparent,
        #d4af37,
        transparent
    );

}