.topper{
    display: flex;
    position: sticky;
    transition: 0.2s;
    padding: 0 15vw;
    background-color: hsl(0, 0%, 10%);
    box-shadow: 0 0 10px hsl(0, 0%, 0%, 0.5);
    top: 0;
    z-index: 999;
    .logo{
        height: 3rem;
        padding: 1rem 0;
        align-self: center;
        img{
            display: block;
            height: 100%;
        }
    }
    .desktop-nav {
        margin-left: auto;
        align-self: flex-end;
        display: flex;
        gap: 0.5rem;
        .opt, .opt-dropdown{
            color: white;
            text-decoration: none;
            padding: 1rem;
            transition: 0.2s;
            cursor: pointer;
            display: flex;
            align-items: center;
            &:hover{
                background-color: white;
                color: black;
                transition: 0.2s;
                box-shadow: 0 5px 3px hsl(0, 0%, 0%, 0.5);
            }
        }
        .opt-dropdown{
            position: relative;
            cursor: default !important;
            svg{
                fill: white;
                height: 24px;
                width: 24px;
            }
            &:hover{
                svg{
                    fill: black;
                }
                div.dropdown{
                    max-height: 650px;
                    transition: 0.5s;
                    padding: 2rem;
                    opacity: 1;
                    border-bottom: 5px solid hsl(0, 0%, 10%);
                }
            }
            div.dropdown{
                position: absolute;
                top: 100%;
                right: 0;
                background-color: white;
                box-shadow: 0 5px 3px hsl(0, 0%, 0%, 0.5);
                display: flex;
                overflow: hidden;
                gap: 1rem;
                max-height: 0;
                .dropdown-section{
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                    .dropdown-section-title{
                        font-size: 1.1rem;
                        padding: 0.7rem 1.5rem;
                        white-space: nowrap;
                        color: hsl(200, 100%, 50%);
                    }
                    a{
                        position: relative;
                        white-space: nowrap;
                        padding: 0.5rem 1.5rem;
                        font-size: 1rem;
                        text-decoration: none;
                        color: black;
                        transition: 0.2s;
                        border-radius: 100px;
                        &:hover{
                            background-color: hsl(0, 0%, 95%);
                        }
                    }
                }
            }
        }
    }
    div.languages{
        transition: 0.2s;
        font-size: 1rem;
        margin-left: 0.5rem;
        padding: 1rem;
        width: 24px;
        height: 24px;
        align-self: flex-end;
        position: relative;
        .dropdown-wrapper{
            display: grid;
            grid-template-rows: 0fr;
            grid-template-columns: auto;
            transition: 0.2s;
            position: absolute;
            top: 100%;
            right: 0;
            width: 500px;
            .dropdown{
                background-color: white;
                position: relative;
                overflow-y: hidden;
                display: flex;
                width: fit-content;
                flex-direction: column;
                transition: 0.2s;
                margin-left: auto;
                box-shadow: 0 5px 3px hsl(0, 0%, 0%, 0.5);
                .lang{
                    white-space: nowrap;
                    padding: 1.2rem 2rem;
                    color: black;
                    text-decoration: none;
                    transition: 0.1s;
                    &:hover{
                        background-color: hsl(0, 0%, 95%);
                    }
                }
            }
        }
        &:hover{
            background-color: white;
            svg{
                fill: black;
            }
            .dropdown-wrapper{
                grid-template-rows: 1fr;
            }
        }
    }
    .mobile-button{
        align-self: center;
        display: none;
        position: relative;
        z-index: 3;
        transition: 0.2s, background-color 0.5s;
        svg{
            width: 2.5rem;
            height: 2.5rem;
            display: block;
        }
        &.-active{
            svg{
                fill: black;
            }
        }
    }
    .mobile-nav{
        visibility: hidden;
        position: fixed;
        user-select: none;
        background-color: hsl(0, 0%, 100%);
        left: 0;
        top: 0;
        width: calc(100% - 6rem);
        z-index: 2;
        padding: 5rem 3rem;
        flex-direction: column;
        transition: transform 0.2s, visibility 0.2s, opacity 0.2s;
        transform: translateX(100%);
        box-shadow: 0 0 10px hsl(0, 0%, 0%, 0.5);
        border-bottom: 0.5rem solid hsl(0, 0%, 20%);
        opacity: 0;
        overflow-y: auto;
        max-height: 70vh;
        .option{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: 700;
            font-family: "Nunito Sans", sans-serif;
            padding: 1rem;
            border-bottom: 1px solid hsl(0, 0%, 50%);
            cursor: pointer;
            color: black;
            transition: 0.5s;
            svg{
                transition: 0.3s;
            }
            &.-active{
                background-color: hsl(0, 0%, 95%);
                svg{
                    margin-right: 1rem;
                    rotate: -90deg;
                }
            }
        }
        .options-subsection-wrapper{
            display: grid;
            grid-template-rows: 0fr;
            transition: 0.3s;
            padding: 0;
            .options-subsection{
                display: flex;
                flex-direction: column;
                gap: 1rem;
                overflow: hidden;
                .dropdown-section-title{
                    font-size: 1.2rem;
                    white-space: nowrap;
                    color: hsl(200, 100%, 50%);
                }
                a{
                    padding: 0.5rem 1rem;
                    text-decoration: none;
                    color: black;
                    transition: 0.2s;
                    border-radius: 100px;
                    &:hover{
                        background-color: hsl(0, 0%, 95%);
                    }
                }
            }
            &.-active{
                grid-template-rows: 1fr;
                padding: 1rem 0;
            }
        }
        .mobile-languages{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            padding: 2rem 0;
            color: black;
            text-decoration: none;
            .lang{
                padding: 0.5rem 1rem;
                border-radius: 100px;
                transition: 0.1s;
                background-color: hsl(0, 0%, 97%);
                color: black;
                text-decoration: none;
                font-weight: 600;
                &:hover{
                    background-color: hsl(0, 0%, 93%);
                }
            }
            svg{
                fill: black;
            }
        }
        &.-active{
            display: flex;
            visibility: visible;
            opacity: 1;
            transform: translateX(0);
        }
    }
    .mobile-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1; /* Overlay powinien być pod mobile-nav */
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.2s, opacity 0.2s;
        &.-active {
            visibility: visible;
            opacity: 1;
        }
    }
    @media screen and (max-width: 1200px) {
        &{
            height: 5rem;
            padding: 0 2rem;
        }
        .logo{
            height: 3rem;
        }
    }
    @media screen and (min-width: 901px) {
        .mobile-nav {
            display: none !important;
        }
        .mobile-nav-overlay {
            display: none !important;
        }
    }
    @media screen and (max-width: 900px) {
        &{
            height: 5rem;
            padding: 0 2rem;
            width: calc(100% - 4rem);
        }
        .languages{
            display: none;
        }
        .desktop-nav{
            display: none;
        }
        .mobile-button{
            display: block;
            margin-left: auto;
        }
        .logo{
            height: 3rem;
        }
    }
    @media screen and (max-width: 500px) {
        &{
            width: calc(100% - 2rem);
            padding: 0 1rem;
        }
    }
}
.footer{
  background: linear-gradient(to top, hsl(0, 0%, 0%), hsl(0, 0%, 15%));
  padding: 7rem 10vw;
  .wrapper{
    max-width: 1200px;
    margin: 0 auto;
    color: white;
    .footer-container{
      display: grid;
      grid-template-columns: repeat(4, auto);
      gap: 1rem;
      margin-bottom: 4rem;
      .footer-block{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        border-left: 1px solid hsl(0, 0%, 40%);
        padding: 1rem 0 1rem 2rem;
        height: fit-content;
        .block-title{
          font-size: 1.5rem;
          font-weight: 700;
          margin-bottom: 0.5rem;
          color: hsl(200, 100%, 80%);
        }
        .link{
          color: white;
          text-decoration: none;
          display: flex;
          align-items: center;
          gap: 1rem;
          &.-foreign-branch-{
            font-size: 0.9rem;
            font-weight: 600;
          }
        }
        .socials{
          display: flex;
          gap: 1rem;
          img{
            height: 2.5rem;
            width: 2.5rem;
          }
        }
      }
    }
    .additionals{
      display: flex;
      align-items: center;
      gap: 1rem;
      .languages{
        margin-left: auto;
        display: flex;
        gap: 1rem;
        .lang{
          color: white;
          text-decoration: none;
          font-size: 1.2rem;
        }
      }
      .copyright{
        line-height: 1.4;
      }
    }
  }
  @media screen and (max-width: 1200px){
    .wrapper{
      .footer-container{
        grid-template-columns: repeat(2, auto);
        gap: 3rem;
      }
    }
  }
  @media screen and (max-width: 768px){
    .wrapper{
      .footer-container{
        grid-template-columns: auto;
        gap: 2rem;
        .footer-block{
          border-left: 0;
          border-bottom: 1px solid hsl(0, 0%, 40%);
          padding: 0 0 2rem 0;
        }
      }
      .additionals{
        flex-direction: column;
        gap: 3rem;
        .languages{
          margin-left: 0;
        }
      }
    }
  }
}