@font-face {
    font-family: 'e-Ukraine';
    src: url('/assets/fonts/e-Ukraine-Light.otf') format('opentype');
  }

  body {
    margin: 0;
    padding: 0;
    font-family: 'e-Ukraine', sans-serif;
    background-color: #f9fbff;
    display: flex;
    flex-direction: column;
    min-height: 120vh;
  }
  
.container {
    padding: 0 12.5%;
    flex: 1;
}

.main-content {
    flex: 1; 
    display: flex;
    flex-direction: column;
    min-height: 90vh; /* Робимо root-контейнер висотою 100% вікна */
   /* Займає весь доступний простір */
  }

.content-block {
  margin-top: 60px; /* Простір між блоками */
}

.content-block:last-of-type {
  margin-bottom: 100px;
}
.content-block h1 {
  font-size: 28px;
  margin-bottom: 25px;
  text-align: center;
  color: #333;
}


.content-block h2 {
  font-size: 28px;
  margin-bottom: 15px;
  color: #333;
}
.content-block h3 {
  font-size: 18px;
  font-weight: bolder;
  color: #4190DA;
}


.content-block p {
  font-size: 18px;
  line-height: 1.6;
  color: #444;
}


.content-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.content-image {
  flex: 0.7;
  display: flex;
  justify-content: flex-end;
}

.content-image img {
  width: 100%;
  max-width: 175px;
  height: auto;
  border-radius: 8px;
} 


.content-text {
  flex: 3;
}
.content-text img {
  max-width: 40px;
  border-radius: 8px;
    height: auto;
}

@media (max-width: 768px) {
  .content-inner {
    flex-direction: column;
    align-items: center;

  }

  .content-image img {
    max-width: 35vw;
      display: flex;
  justify-content: center; /* 👈 робимо зображення меншим */
  }


}

  .image-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 2 колонки за замовчуванням */
      gap: 10px;
      max-width: 100%;
      margin: auto;
    }

    .image-grid img {
      width: 100%;
      max-width: 200px; 
      height: auto;
      border-radius: 2px;
      object-fit: cover;

      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      transition: transform 0.2s;
    }
    .image-grid :hover {
      transform: translateY(-5px);
    }


    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 30px;
      max-width: 100%;
      margin: auto;
    }

    .grid-item {
      background: #ffffff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      transition: transform 0.2s;
    }
    .grid-item:hover {
      transform: translateY(-5px);
    }


    .icon {
    font-size: 40px;
    margin-bottom: 15px;
    color: #4190DA;
    display: flex;  /* Додаємо flex для контейнера */
    flex-direction: column; /* Іконки йдуть по вертикалі */
    align-items: center;  /* Вирівнюємо іконки по горизонталі */
    justify-content: center; /* Вирівнюємо іконки по вертикалі */
    }
    .label {
      font-size: 16px;
      text-align: center;
    }

.header-wrapper {
    background-color: #000; /* Full-width background */
    width: 100%;

}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 12.5%; /* This handles content spacing */
    max-width: 100%;
    color: #fff;
    box-sizing: border-box; /* Good practice with padding */
    margin: 0 auto; /* Optional: Helps center if max-width is set */
}

.logo {
    font-size: 24px;
    font-weight: medium;
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo a:hover {
    text-decoration: underline;
}
.logo a {
    color: #fff;
    text-decoration: none;
}

.logo img {
    width: 30px;
    height: 30px;
}

.nav-links {
    display: flex;
    align-items: center;
    font-size: 18px;
    gap: 30px; /* Space between menu items */
}

.nav-links a {
    color: #fff;
    text-decoration: none;
}

.nav-links a:hover {
    text-decoration: underline;
}

.language-selector {
    display: flex;
    align-items: center;
    gap: 5px;
}

.language-selector img {
    width: 20px;
    height: 20px;
}




footer {
   
    color: #000;
    padding: 0 12.5%; /* 1/8 left and right */
}

.footer-wrapper {
    background-color: #F9FBFF;
    
    width: 100vw;
    position: relative; /* Position it relative to the viewport */
    left: 50%; /* Shift the footer left by 50% */
    transform: translateX(-50%); 
    box-shadow: 0px -3px 5px rgba(103, 104, 107, 0.2);
    padding: 0;
    margin: 0;
}
.footer-logo {
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 👈 Вирівнює по верху */
    flex-wrap: wrap; 
    padding: 20px 12.5%;
    box-sizing: border-box;
}
.footer-section {
    flex: 1;
    padding: 10px;
    min-width: 250px;

}
.footer-section h3 {
    font-size: 18px;
    margin-bottom: 10px;
}
.footer-section p, .footer-section a {
    margin-bottom: 8px;
    color: #000;
    text-decoration: none;
    align-items: center;
    display: flex;
}
.footer-section a:hover {
    text-decoration: underline;
}
.social-icons {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.social-icons a {
    display: inline-block;
    width: 35px;  /* Ширина фону */
    height: 35px; /* Висота фону */
    background-color: black;  /* Чорний фон */
    border-radius: 50%;  /* Кругла форма */
    display: flex;
    align-items: center;
    justify-content: center;
}
.social-icons a img {
    width: 20px;
    height: 20px;
}
.footer-bottom {
    text-align: center;
    font-size: 12px;
    
    background: #2d1e1e;
    color: #fff;

    padding: 10px 0;
    width: 100%;
    box-sizing: border-box;
    position: relative; /* Position it relative to the viewport */
    left: 50%; /* Shift the footer left by 50% */
    transform: translateX(-50%); /* Offset it by 50% of its own width to center it */
}

* {
    box-sizing: border-box;
  }
  html, body {
    overflow-x: hidden;
  }
  

/* ================================== */
/* DEFAULT (Desktop >= 769px) Styles */
/* ================================== */

/* --- Burger Icon --- */
.burger-icon {
    display: none; /* Hidden by default, shown in media query */
    cursor: pointer;
    padding: 10px; /* Clickable area */
    position: relative; /* Important for z-index */
    z-index: 1001; /* Keep it above the overlay */
    background: none; /* Clean default appearance */
    border: none;
    /* Remove fixed width/height if bars define the size */
}

.bar {
    display: block;
    width: 25px; /* Width of each bar */
    height: 3px;  /* Thickness of each bar */
    background-color: #fff; /* Bar color (white on black header) */
    margin: 5px auto; /* Spacing between bars */
    transition: all 0.35s ease-in-out; /* Animation timing */
    border-radius: 1px; /* Slightly rounded ends */
}
.burger-icon.active .bar1 {
    /* Move down to middle, then rotate 45deg */
    transform: translateY(8px) rotate(45deg);
}

.burger-icon.active .bar2 {
    /* Fade out the middle bar */
    opacity: 0;
}

.burger-icon.active .bar3 {
    /* Move up to middle, then rotate -45deg */
    transform: translateY(-8px) rotate(-45deg);
}


/* --- Desktop Navigation --- */
.nav-links-desktop {
  display: flex; /* Desktop links are visible */
  align-items: center;
  gap: 30px; /* Adjust spacing as needed */
  /* Add any other specific desktop nav styling here */
}

.nav-links-desktop a {
   color: #fff; /* ### ADJUST: Link color for DESKTOP header ### */
   text-decoration: none;
   font-size: 18px; /* Example */
}
.nav-links-desktop a:hover {
    text-decoration: underline;
}
/* Add styles for the DESKTOP language selector here if needed */
.nav-links-desktop .language-selector {
   /* Example styles */
   display: flex;
   align-items: center;
   gap: 5px;
   color: #fff; /* ### ADJUST: Color for DESKTOP header ### */
}
.nav-links-desktop .language-selector img {
   width: 20px;
   height: 20px;
   filter: brightness(0) invert(1); /* Example: make icon white */
}


/* --- Mobile Menu Overlay (Hidden Base State) --- */
/* This applies all the time, but visibility is controlled by .active class */
.burger-menu {
  position: fixed; /* Takes it out of flow, relative to viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    background-color: #000000; /* Dark overlay background */
  z-index: 1000; /* Below burger icon, above page content */

  /* Flexbox for centering content */
  display: flex;
  flex-direction: column;
  align-items: center;     /* Center items horizontally */
  justify-content: center;  /* Center items vertically */
  gap: 25px;               /* Spacing between items in the menu */
 overflow-y: hidden;
  /* Animation state: Hidden off-screen */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s ease-in-out, visibility 0.35s ease-in-out;
}

/* --- Mobile Menu Overlay (Visible/Active State) --- */
/* This class is added/removed by JavaScript */
.burger-menu.active {
  transform: translateX(0); /* Slides into view */
  visibility: visible;      /* Makes it visible */
}


/* =================================== */
/* MOBILE STYLES (<= 768px)           */
/* =================================== */
@media (max-width: 768px) {

  .burger-icon {
    display: block; /* Show the burger icon */
     /* You might need to adjust .bar background-color here if the header background changes on mobile */
     /* .bar { background-color: #000; } */
  }

  .nav-links-desktop {
    display: none; /* Hide the desktop navigation links */
  }

  /* --- Styling for elements INSIDE the .burger-menu when it's active --- */

  .burger-menu .nav__links {
    font-size: 1.6rem; /* Example large font size for mobile overlay */
    color: #ffffff;    /* White text on dark background */
    text-decoration: none;
    padding: 10px 20px; /* Tappable area */
    display: flex;
    align-items: center;
    text-align: center;
    transition: color 0.2s ease-in-out, letter-spacing 0.2s ease-in-out;
  }

  .burger-menu .nav__links:hover {
    color: #cccccc;     /* Slight fade on hover */
    letter-spacing: 1px; /* Subtle animation */
  }
    /* --- ADD New Styles for Mobile Language Selector --- */
    .burger-menu .mobile-lang-selector {
      display: flex;
      flex-direction: column; /* Stack title and options */
      align-items: center;   /* Center the blocks */
      gap: 10px;             /* Space between title and options line */
      color: #ffffff;        /* Default text color is white */
      margin-top: 20px;      /* Add some space above this section */
      padding: 10px;         /* Add some padding around */
      position: static;      /* Ensure normal flow */
      width: auto;           /* Let it size naturally */
    }

    .burger-menu .lang-title {
      display: flex;
      align-items: center;
      gap: 8px;              /* Space between icon and "Мова:" text */
      font-size: 1.1rem;     /* Adjust title font size */
      color: #ffffff;
    }

    .burger-menu .lang-title ion-icon {
      font-size: 1.3rem;     /* Adjust icon size if needed */
      /* No specific padding needed if gap is used */
    }

    .burger-menu .lang-options {
      display: flex;
      justify-content: center; /* Center language links horizontally */
      align-items: center;     /* Align items vertically */
      flex-wrap: wrap;         /* Allow wrapping if too many languages */
      gap: 5px;                /* Optional gap between elements */
    }

    .burger-menu .lang-option {
      color: #ffffff;
      text-decoration: none;
      font-size: 1rem;         /* Adjust language code font size */
      padding: 5px 8px;       /* Padding around language codes */
      border: 1px solid transparent; /* Optional: for hover/active states */
      border-radius: 4px;      /* Optional: slightly rounded corners */
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .burger-menu .lang-option:hover {
      background-color: #ffffff; /* White background on hover */
      color: #000000;           /* Black text on hover */
    }

    /* Optional: Style for the currently active language */
    /* Add class="active-lang" to the active language link in HTML */
    .burger-menu .lang-option.active-lang {
      font-weight: bold;
      /* text-decoration: underline; */ /* Or other indication */
       cursor: default; /* Indicate it's not clickable */
       /* background-color: #333; */ /* Example background */
    }

    .burger-menu .lang-separator {
      color: #ffffff;     /* Separator color */
      margin: 0 5px;      /* Space around the separator */
      font-size: 1rem;      /* Match font size */
      line-height: 1;     /* Helps with vertical alignment */
    }

    
    /* --- End of New Mobile Language Selector Styles --- */
} /* End of @media (max-width: 768px) */