:root {
    --font-size: 1rem;
    --line-height: 1.5;
    --background-color: #fff;
    --text-color: #000;  
    --background-color-carousel: white;  
    --background-color-footer: #f4f4f4;  
    --text-color-footer: #888888;         
    --text-color-h1-slogan: #0d47a1;
    --secondary-text-color: #888888;
    --background-color-nav: #90caf9;
    --background-color-lang-dropdown: #f0f0f0; 
    --background-lang-dropdown: #fff; 
    --color-lang-dropdown-a: #000;
    --border-lang-dropdown: 1px solid #ccc;
    --info-block-background-color: #ffffff;
    --info-block-border: #cccccc;
    --info-block-link: #0056b3;
    --info-block-link-hover: #007bff;
    --card-bg-info-block-blue: #d9edf7;
    --border-info-block-blue: #A6D6EC;
    --info-block-color-blue-color: #337ab7;
    --accordion-card: #fff;
    --accordion-header: #e9e9e9;
    --accordion-header-hover: #dcdcdc;
    --accordion-border: #ccc;
    --menu-base-link-color: #0d47a1;
    --menu-base-link-hover-color: #1369EA;  
    --menu-base-link-hover-background: #90caf9;
    --navbar-brand-color: #ffffff;
    --activ-menu-desktop-link: #ffffff;    
    --banner-text-color: #ffffff;    
    --background-color-carousel: white;    
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-size: var(--font-size);
  line-height: var(--line-height);   
  font-family: 'Inter', sans-serif; 
  font-weight: 400; 
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* make the wrapper stretch to the full height of the window */
}

main {
    flex: 1; /*  the main content takes up all available space */
}

/* footer  */
.footer {  
    background-color: var(--background-color-footer);
    color: var(--text-color-footer);
    text-align: center; 
    padding: 1rem 0;
    font-size: 0.9rem;
}

/* header nav */
header nav {
    background-color: var(--background-color-nav);   
    padding: 10px;
    text-align: right;
    min-height: 70px;
}

header nav a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
}

header nav a:hover {
    background-color: #555;
}

.navbar-brand  {
  font-size: 2rem;
  color: var(--navbar-brand-color);  
  font-weight: 600;  
  padding-left: 20px;
}

.navbar-brand-hamburger  {
    display: none;
    font-size: 1.5rem;
    color: var(--navbar-brand-color);      
}

.slogan h1 {
  font-size: 2rem;
  color: var(--text-color-h1-slogan);
  margin: 0;      
  font-weight: 600; 
}

    .language-selector {
      position: relative;
      display: inline-block;
    }

    .lang-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
      padding: 6px 10px;
      color: inherit;
    }

    .globe-icon svg,
    .arrow-icon {
      stroke: currentColor;
      transition: transform 0.3s ease, stroke 0.3s ease;
    }

    .arrow-down {
      display: flex;
      align-items: center;
      transition: transform 0.3s ease;
    }

    .lang-toggle[aria-expanded="true"] .arrow-down {
      transform: rotate(180deg);
    }

    .toggle-sub[aria-expanded="true"] .arrow-down {
      transform: rotate(180deg);
    }
  
    .lang-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 4px;
      background: var(--background-lang-dropdown); 
      border: var(--border-lang-dropdown);
      list-style: none;
      padding: 0;
      display: none;
      width: max-content;          
      z-index: 100;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      color: #222 ; 
      text-align: right; 
    }

    .lang-dropdown.open {
      display: block;
    }

    .lang-dropdown li {
      padding: 0;    
      cursor: pointer;
      white-space: nowrap;
    }

    .lang-dropdown li:hover {
      background-color: var(--background-color-lang-dropdown);    
    }


.lang-dropdown a,
.lang-dropdown button {
    display: block;
    width: 100%;
    padding: 10px 20px;
    text-decoration: none; 
    color: var(--color-lang-dropdown-a);  
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: right; 
    transition: background-color 0.2s ease;
}

.lang-dropdown a:hover,
.lang-dropdown button:hover {
    background-color: var(--background-color-lang-dropdown); 
}


.base-vertical {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1rem;
    max-width: 800px;          
    margin: 0 auto;            
}

.base-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.base-icon {
    height: 48px;
    width: auto;
    fill: currentColor;
    transition: color 0.3s ease;
}
.base-desc {
    font-size: 1rem;
    line-height: 1.4;
}

.site-info-block-home {
    display: flex;
    justify-content: center;  
    align-items: center;     
    text-align: center;
}

.messenger-fab-container {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

.messenger-toggle {
  width: 56px;
  height: 56px;
  background-color: #007bff;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: background 0.3s ease; 
  animation: pulse 1.5s infinite; 
}


/* pulse btn */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}



.messenger-dropdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.messenger-fab-container.open .messenger-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


.messenger-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  text-decoration: none;
}

.messenger-btn:hover {
  transform: scale(1.1);
}

.telegram { background-color: #0088cc; }
.whatsapp { background-color: #25D366; }
.viber    { background-color: #7360F2; }

body.dark .messenger-toggle { background-color: #1a1a1a; }

  .accordion {
      max-width: 600px;
      margin: 60px auto 0;
    }

    .accordion-item {
      background: var(--accordion-card);
      border-radius: 5px;
      margin-bottom: 10px;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      border: 1px solid var(--accordion-border);
      transition: background 0.3s, border 0.3s;
    }

    .accordion-header {
      cursor: pointer;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--accordion-header);
      transition: background 0.3s;
    }

    .accordion-header:hover {
      background: var(--accordion-header-hover);
    }

    .accordion-header .icon {
      font-size: 20px;
      transition: transform 0.3s ease;
    }

    .accordion-content {
      max-height: 0;
      overflow: hidden;
      padding: 0 20px;
      transition: max-height 0.4s ease, padding 0.3s ease;
      background: var(--accordion-card);
    }

    .accordion-content.open {
      padding: 15px 20px;
    }

    .accordion-content.open.show {
      max-height: 500px;
    }

    .accordion-item.open .icon {
      transform: rotate(180deg);
    }

    .dark-toggle {
      position: absolute;
      top: 20px;
      right: 20px;
      background: #333;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      z-index: 10;
    }

    .dark-toggle:hover {
      background-color: #555;
    }


.info-block {
  background-color: var(--info-block-background-color);
  border: 1px solid var(--info-block-border);
  padding: 1.5rem;
  border-radius: 10px;
  margin-bottom: 2rem;
}


.info-block-color-blue {
  background-color: var(--card-bg-info-block-blue);
  border: 1px solid var(--border-info-block-blue);
  padding: 1.5rem;
  border-radius: 10px;
  margin-bottom: 2rem;
  color: var(--info-block-color-blue-color);
}


.info-block a, .info-block-color-blue a {
  font-weight: 600;
    text-decoration: none;  
  color: var(--info-block-link);  
}

.info-block a:hover, .info-block-color-blue a:hover {
  color: var(--info-block-link-hover);
}

.site-block {
  padding: 2rem;
}

/* hamburger btn */
    .hamburger-btn {
      display: none;
      background: none;
      border: none;
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;  
      height: 40px;
      cursor: pointer;
      z-index: 10;
    }
/* line - hamburger */
    .hamburger-btn div {
      width: 100%;
      height: 5px;  
      background:  #1976d2;
      margin: 6px 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

/* dropdown menu */
    .dropdown-menu {
      display: none;
      position: absolute;
      top: 60px;
      right: 20px;
      background: #1976d2;
      color: white;
      border-radius: 5px;
      min-width: 220px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      z-index: 9;
      overflow: hidden;
      box-sizing: border-box;
      transform: translateY(-20px);
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .dropdown-menu.open {
      display: block;
      transform: translateY(0);
      opacity: 1;
    }

    .dropdown-menu a,
    .dropdown-menu button.toggle-sub {
      display: block;
      padding: 12px 16px;
      text-decoration: none;
      color:  #ffffff;
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      font-size: 16px;
      box-sizing: border-box;
    }

    .dropdown-menu a:hover,
    .dropdown-menu button.toggle-sub:hover {
      background: #90caf9;
      color: #000000;    
    }

    .sub-items {
      display: none;
      background:  #2899F4;
    }

    .sub-items.open {
      display: block;
    }

    .sub-items a {
      padding-left: 30px;
    }
  
   /* desktop menu*/
    .menu-desktop {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
   /* menu base */  
  .menu-base  {
    color: #808080;
    display: flex;  
    align-items: center;   
    }

  .menu-base a {
     margin-right: 20px;
     text-decoration: none;
     color: var(--menu-base-link-color);
    }

   .menu-base a:hover {
     color: var(--menu-base-link-hover-color);
     background: var(--menu-base-link-hover-background);
    }
   /* menu base */  

  
    /* info block messenger*/
    .info-block-messenger {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
      .item-info-block-messenger {
      padding: 20px;
      border-radius: 5px;
      text-align: center;   
    }
  
      .toggle-sub-globe {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
  
    /* menu */
    ul.menu-base-ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: space-around;  
      font-weight: 600;      
    }  
  
   .activ-menu-desktop a {
    color: var(--activ-menu-desktop-link);    
     }  
    /* menu */   
   
   /* section-fon-keyboard */
     .section-fon-keyboard {
      position: relative;
      height: 300px;
      background-image: url('../img/fon_keyboard.jpg'); 
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .section-fon-keyboard .banner-text {
      font-size: 1.8rem;
      background-color: rgba(0, 0, 0, 0.5); /* slight darkening for readability */
      padding: 20px 30px;
      border-radius: 8px;
        color:  var(--banner-text-color);
    }
   /* section-fon-keyboard */


/* - carousel - */
.carousel {
  width: 300px;
  height: 200px;
  margin: 2rem auto;
  overflow: hidden;
  position: relative;
  background-color: var(--background-color-carousel);  
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;  
  transition: background-color 0.3s;
  box-sizing: border-box;
}

.carousel img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  border-radius: 20px;
  box-sizing: border-box;
  padding: 2px; 
  background-clip: padding-box;
  background-color: transparent;
  border: 2px solid #ccc; 
  cursor: default;
}

.carousel img.active {
  display: block;
}
/* - carousel - */

/*  Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
     --background-color: #121212;
     --text-color: #fff;
     --background-color-carousel: #121212;  
     --background-color-footer:   #000000;     
     --text-color-footer: #888888;                 
     --text-color-h1-slogan: #f5f5f5;  
     --background-color-footer: #000000;
     --background-color-nav: #121212;     
     --background-color-lang-dropdown: #333;
     --background-lang-dropdown: #1e1e1e;   
     --color-lang-dropdown-a: #ffffff;   
     --border-lang-dropdown: 1px solid #444;    
     --info-block-background-color: #1c1c1c;  
     --info-block-border: #444444;
     --info-block-link: #66b2ff;
     --info-block-link-hover: #3399ff;
     --card-bg-info-block-blue: #1c1c1c;
     --border-info-block-blue: #444444;
     --info-block-color-blue-color: #ffffff;
     --accordion-card: #2a2a2a;
     --accordion-header: #333;
     --accordion-header-hover: #444;
     --accordion-border: #444;      
     --menu-base-link-color: #66b2ff;        
     --menu-base-link-hover-color: #ffffff;  
     --menu-base-link-hover-background: #121212;
     --navbar-brand-color: #808080;
     --activ-menu-desktop-link: #808080;    
     --banner-text-color: #808080;      
    }  
     .section-fon-keyboard {
      filter: grayscale(100%);
       }  
    .carousel {
     background-color: #000;
      }
    .carousel img {
     border-color: #666;
      }  
}
/*  Dark mode */

/*  for mobile */
    @media (max-width: 768px) {
      .menu-desktop {
        display: none;
      }  
      .hamburger-btn {
        display: block;
      }
     .navbar-brand-hamburger {
        display: flex;
      }   
      .section-fon-keyboard .banner-text {
        font-size: 1.4rem;
        padding: 15px 20px;
      }
      .base-icon {
        height: 24px;
      }
    }
/*  for mobile */