:root {
  --primary-color: #0ff;
  --secondary-color: #fff;
  --bg-dark: #111;
  --bg-semi-transparent: rgba(0, 0, 0, 0.4);
  --bg-darker-semi-transparent: rgba(0, 0, 0, 0.6);
  --bg-header: rgba(0, 0, 0, 0.85);
  --hover-color: rgba(0, 255, 255, 0.8);
}

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

body {
  font-family: 'Segoe UI', sans-serif;
  color: var(--secondary-color);
  /* FALLBACK: Use a static image as a background if video fails to load/play */
  background-color: var(--bg-dark);
  background-image: url('assets/back-fallback.jpg'); /* PROVIDE THIS IMAGE FILE */
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  padding-top: 50px;
  overflow-x: hidden;
}

#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}

header {
  position: sticky;
  top: 0;
  width: 100%;
  background: var(--bg-header);
  padding: 0.3rem 2rem;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

h1 {
    font-size: 1.5rem;
}

nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
}

nav a {
  /* ADD PADDING TO VERTICALLY CENTER LINKS with other header items */
  padding: 0.5rem 0; /* Matches the vertical padding on .dropdown > a */
  display: block;    /* Ensures padding applies correctly to the link area */
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

nav a:hover {
    color: var(--secondary-color);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lang-button {
  background: var(--primary-color);
  color: var(--bg-dark);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.lang-button:hover {
  background: var(--secondary-color);
}

.section {
  padding: 4rem 2rem;
  /* Keep text centered for non-list elements (headings, paragraphs) */
  text-align: center;
  background: var(--bg-semi-transparent);
  margin: 2rem auto;
  border-radius: 10px;
  max-width: 1200px;
  width: 90%;
}

.section h2 {
  margin-bottom: 1rem;
  color: var(--primary-color);
}

/* FIX: Align all lists to the left while maintaining a centered look
   by setting a fixed max-width for the inline-block element. */
.section ul {
    /* Step 1: Allow the block to be centered by the parent's text-align: center */
    display: inline-block; 
    
    /* Step 2: Override the inherited text-align: center for the list content */
    text-align: left; 
    
    /* Step 3 (NEW FIX): Set a consistent maximum width slightly larger than the longest list. 
       This forces all UL elements to be centered based on the same width, 
       making their left edges align. Adjust 450px if content changes. */
    max-width: 450px; 
    width: 100%; /* Ensures max-width applies correctly */
    
    /* Step 4: Use padding-left to position the list markers and align the text. */
    padding-left: 1.5rem; 
    margin-left: 0;
    list-style-position: outside;
}

.contact-cards {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.contact-card {
  background: var(--bg-darker-semi-transparent);
  padding: 2rem;
  border-radius: 10px;
  width: 250px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
}

.contact-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.payment-info {
  background: var(--bg-darker-semi-transparent);
  padding: 2rem;
  border-radius: 10px;
  max-width: 800px;
  margin: 4rem auto 2rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.payment-info h3 {
  margin-bottom: 1.5rem;
  color: var(--primary-color);
}

.payment-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.payment-table th, .payment-table td {
  padding: 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.payment-table th {
  color: var(--primary-color);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.payment-table tbody tr:hover td {
  background-color: var(--hover-color);
  color: var(--bg-dark);
  cursor: pointer;
}

.copy-message {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #4CAF50;
  color: white;
  padding: 1rem 2rem;
  border-radius: 5px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.copy-message.show {
    opacity: 1;
    visibility: visible;
}

footer {
  text-align: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.9);
}

.logo-img {
  max-width: 256px; 
  width: 100%;
  height: auto; 
}

a:not(header a) {
  color: #0ff;
}

a:not(header a):visited {
  color: #0ff;
}

a:hover {
  text-decoration: underline;
}

a:not(header a):active {
  color: rgb(0, 180, 180);
}

/* Responsive adjustments for narrow viewports */
@media (max-width: 768px) {
  /* Fix 1: Disable sticky position on mobile to prevent header from blocking content/jumping */
  header {
    position: static;
    padding: 0.3rem 1rem;
  }
    
  body {
    padding-top: 0;
  }
    
  .header-content {
    justify-content: space-between;
    flex-wrap: wrap; 
  }

  nav ul {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0.5rem 0;
    justify-content: center;
    width: 100%;
  }

  .logo-img {
    max-width: 120px;
  }

  .header-right {
    margin-left: 0;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
    /* Minor adjustments for very small screens */
    header {
        padding: 0.5rem;
    }
    nav ul {
        gap: 0.5rem 0.75rem;
    }
    nav a {
        font-size: 0.9rem;
    }
}

.button-group button:hover {
  background: var(--secondary-color);
  color: var(--bg-dark);
}

/* --- DROP-DOWN VALIKON TYYLIT --- */
.dropdown {
  position: relative;
  display: inline-block;
  padding: 0;
}
.dropdown > a {
  display: block;
  padding: 0.5rem 0;
  white-space: nowrap;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  /* Modify these two lines to center the content */
  left: 50%; 
  transform: translateX(-50%);
  /* ... other existing styles ... */
  background-color: var(--bg-darker-semi-transparent);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  z-index: 100;
  padding: 0.5rem 0;
  border-radius: 5px;
  text-align: left;
}
.dropdown-content a {
  color: var(--secondary-color);
  padding: 0.75rem 1rem;
  text-decoration: none;
  display: block;
  transition: background-color 0.3s ease;
  font-weight: normal;
}
.dropdown-content a:hover {
  background-color: var(--hover-color);
  color: var(--bg-dark);
}
.dropdown:hover .dropdown-content {
  display: block;
}
@media (max-width: 768px) {
  .dropdown:hover .dropdown-content {
      display: none;
  }
  .dropdown.active .dropdown-content {
      display: block;
  }
}