/* ===== BASE STYLES ===== */
    :root {
        --footer-height: 200px; /* Default footer height */
    }

    /* Шрифты */
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

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

    body {
        font-family: "Montserrat", sans-serif;
        margin: 0;
        padding-bottom: var(--footer-height);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }


    /* Корейский текст */
    .korean-text {
        font-family: "Noto Sans KR", sans-serif;
    }

    .container {
        max-width: 1288px;
        margin: 0 auto;
    }

    .logo:hover {
        left: 150px;
        top: 55px;
        transform: scale(1.5);
    }

    .lk {
        width: 54px;
        height: 54px;
    }

    .lk:hover {
        transform: scale(1.5);
        border-radius: 100px solid rgb(49, 36, 105);
    }

    
        /* Бургер-меню */
        .burger-menu {
            display: flex;
            flex-direction: column;
            cursor: pointer;
            gap: 5px;
            z-index: 1000;
        }

        .burger-menu div {
            width: 25px;
            height: 3px;
            background-color: #000;
        }

        .nav-burger {
            position: fixed;
            top: 0;
            left: -100%;
            width: 250px;
            height: 100vh;
            background-color: rgba(200, 186, 141, 0.95);
            transition: left 0.3s ease;
            z-index: 999;
            padding-top: 80px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .nav-burger.active {
            left: 0;
        }

        .nav-burger .ul-header {
            list-style: none;
            padding: 20px;
            margin: 0;
            flex-direction: column;
        }

        .nav-burger .li-header {
            margin-bottom: 20px;
        }

        .nav-burger .a-header {
            color: hsla(47, 18%, 20%, 0.814);
            text-decoration: none;
            font-size: 18px;
            display: block;
        }

        .nav-burger .a-header:hover {
            color: rgb(4, 1, 48);
        }

        header .container {
            max-width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #c8ba8d;
            padding-right: 110px;
            padding-left: 110px;
            padding-top: 20px;
            padding-bottom: 20px;
            margin-bottom: 50px;
        }

        .nav-header {
            padding: 20px;
        }

        .ul-header {
            display: flex;
            list-style: none;
        }

        .li-header {
            display: flex;
            margin-right: 45px;
        }

        .a-header {
            color: hsla(47, 18%, 20%, 0.814);
            text-decoration: none;
            font-size: 18px;
            font-style: normal; /* Убрал курсив */
        }

        .a-header:hover {
            color: rgb(4, 1, 48);
        }

        .perehod {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            margin: 20px 0;
        }

        .perehod img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid rgb(49, 36, 105);
            transition: transform 0.3s;
        }

        .perehod>a:hover {
            transform: scale(1.5);
        }

        .perehod {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 0 120px 0 120px;
            margin-bottom: 20px;
        }

        
        /* ===== FOOTER STYLES ===== */
        footer {
            background-color: #c8ba8d;
            position: fixed;
            bottom: 0;
            width: 100%;
            height: var(--footer-height);
            z-index: 900;
            padding: 15px 0;
        }

        .footer .container {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        address {
            display: flex;
            justify-content: space-between;
            width: 100%;
            font-style: normal;
        }

        /* Footer Columns */
       /* Footer Columns */
       .footer1 {
            display: flex;
            flex-direction: column;
            width: 35%;
            gap: 10px;
            position: absolute;
            left: 110px;
        }

        .footer2 {
            width: 60%;
            position: absolute;
            right: 110px;
            text-align: right;
        }

        /* Footer1 Elements */
        .tel, .mail {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
        }

        .tel img {
            width: 10px;
            height: 10px;
        }

        .footer-icon {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

        .footer-icon img {
            width: 30px;
            height: 30px;
        }

        /* Footer2 Elements */
       
        .ul-footer {
            display: flex;
            flex-direction: column;
            gap: 8px;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .a-footer {
            color: hsla(47, 18%, 20%, 0.814);
            text-decoration: none;
            font-size: 12px;
            white-space: nowrap;
            font-style: normal; /* Убрал курсив */
        }

        /* Copyright Styles */
        .copyright {
            display: flex;
            align-items: center;
        
            gap: 5px;
            font-size: 14px;
            color: hsla(47, 18%, 20%, 0.814);
            margin-top: 15px;
            font-style: normal; /* Убрал курсив */
        }


 /* Copyright Styles */
 .copyright.desktop-only {
            position: relative;
            margin-top: 15px;
            left: 0;
            display: flex;
        }

        .copyright.mobile-only {
            display: none;
        }

        #copyright {
            height: 15px;
            width: 15px;
        }

        /* Hover Effects */
        .tel:hover p,
        .mail:hover p,
        .copyright:hover p,
        .a-footer:hover {
            color: rgb(4, 1, 48);
            transition: all 0.3s ease;
        }

        .tel:hover p,
        .mail:hover p,
        .copyright:hover p {
            font-size: 1.1em;
        }


                                                                          /* адаптация для футера и шапки */
        
        /* 1440px and above - Desktop layout */
        @media (min-width: 1441px) {
            :root {
                --footer-height: 180px;
            }
            
            .footer1 {
                width: 35%;
            }
            
            .footer2 {
                width: 60%;
                text-align: right;
            }
            
            .ul-footer {
                text-align: right;
            }
        }

        /* 1200px-1440px */
        @media (max-width: 1440px) {
            :root {
                --footer-height: 200px;
            }
            
            .footer1 {
                left: 60px;
            }
            
            .footer2 {
                right: 60px;
            }
     
          
            .ul-footer {
                text-align: right;
            }
        }

        /* 992px-1200px */
        @media (max-width: 1200px) {
            :root {
                --footer-height: 200px;
            }
            
            .footer1 {
                width: 35%;
            }
            
            .footer2 {
                width: 60%;
                text-align: right;
            }
            
            .ul-footer {
                text-align: right;
            }
        }

        /* 768px-992px - Tablet layout */
        @media (max-width: 992px) {
          :root {
                --footer-height: 220px;
            }
            
            .footer1 {
                left: 40px;
            }
            
            .footer2 {
                right: 40px;
            }
            
        
            
            .ul-footer {
                text-align: right;
            }
            

            .copyright.mobile-only {
                display: none;
                justify-content: center;
                margin-top: 20px;
            }
        }





      /* 786px and below - Mobile layout */
      @media (max-width: 786px) {
            :root {
                --footer-height: 280px;
            }
            
            address {
                flex-direction: column;
                align-items: center;
            }
            
            .footer1, 
            .footer2 {
                position: static;
                width: 100%;
                text-align: center;
                
            }
            
            .footer1 {
                order: 1;
                padding: 0 20px;
                align-items: center;
            }
            
            .footer2 {
                order: 2;
                margin: 15px 0;
                text-align: center;
            }
            
            .ul-footer {
                align-items: center;
            }
            
            .footer-icon {
                justify-content: center;
            }
            
            .copyright.desktop-only {
                display: none;
            }
            
            .copyright.mobile-only {
                display: flex;
                order: 3;
                justify-content: center;
                margin-top: 20px;
                position: static;
            }
        }



       /* 786px and below - Mobile layout */
       @media (max-width: 786px) {
            :root {
                --footer-height: 360px;
            }
            

            .logo {
    width: 54px; /* Уменьшено в 2 раза */
    height: 54px; /* Уменьшено в 2 раза */
    transition: transform 0.3s;
}

.lk {
    width: 27px; /* Уменьшено в 2 раза */
    height: 27px; /* Уменьшено в 2 раза */
    transition: transform 0.3s;
}


            address {
                flex-direction: column;
                align-items: center;
            }
            
            .footer1, 
            .footer2 {
                position: static;
                width: 100%;
                text-align: center;
            }
            
            .footer1 {
                order: 1;
                padding: 0 20px;
            }
            
            .footer2 {
                order: 2;
                margin: 15px 0;
                text-align: center;
               
            }
            
            .ul-footer {
                align-items: center;
            }
            
            .footer-icon {
                justify-content: center;
            }
            
            .copyright.desktop-only {
                display: none;
            }
            
            .copyright.mobile-only {
                display: flex;
                order: 3;
                justify-content: center;
                margin-top: 20px;
                width: 100%;
           
            }
        }

        /* 500px-700px */
        @media (max-width: 500px) {
        
            
            .container {
                padding: 0 20px;
            }
            
           

  /* Добавляем отступы между элементами */
  .burger-menu,
            .logo,
            .user {
                margin: 0 20px; /* Отступы по 20px с каждой стороны = 40px между элементами */
            }
            
       
            :root {
                --footer-height: 340px;
            }
            
            header .container {
                padding: 20px;
                justify-content: space-between;
                position: relative;
            }
            
            /* Бургер-меню и иконка пользователя */
            .burger-menu, .user {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 1001;
            }
            
            .burger-menu {
                left: 20px;
            }
            
            .user {
                right: 20px;
            }
            
            /* Логотип по центру */
            .logo {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                width: 54px;
                height: 54px;
                margin: 0 auto;
            }
            
            /* Отступы для контента */
            .container {
                padding: 0 20px;
            }
            
            .footer-icon img {
                width: 25px;
                height: 25px;
            }
            
            .lk {
                width: 27px;
                height: 27px;
            }
        }

        /* Below 400px */
        @media (max-width: 400px) {
            :root {
                --footer-height: 360px;
            }
            
            .ul-footer {
                gap: 8px;
            }
        }

                                                                          /* html */

/* 
        <header>
        <div class="container">
            <div class="burger-menu" id="burgerMenu">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <img class="logo" src="/image/logo krug.svg" alt="Логотип">
            <a href="#" class="user" id="userBtn"> 
                <img class="lk" src="/image/userrblur.svg" alt="Пользователь">
            </a>
        </div>
        <nav class="nav-burger" id="navBurger">
            <ul class="ul-header">
                <li class="li-header"> <a href="" class="a-header">онлайн - переводчик</a></li>
                <li class="li-header"> <a href="" class="a-header">контакты</a></li>
                <li class="li-header"> <a href="" class="a-header">светлая тема</a></li>
            </ul>
        </nav>
    </header> */

                                                              /* html for footer */

    /* <footer>
      <section class="footer container">
          <address>
              <div class="footer1">
                  <div class="tel">
                      <img src="/image/tel_blue.svg" alt="">
                      <p>8-925-685-52-39</p>
                  </div>
                  <div class="mail">
                      <p>anastasiya3000@yandex.ru</p>
                  </div>
                  <div class="footer-icon">
                      <a href="" class="social-icon"><img src="/image/telegram_icon 1.svg" alt=""></a>
                      <a href="" class="social-icon"><img src="/image/skype_icon 1.svg" alt=""></a>
                      <a href="" class="social-icon"><img src="/image/whatsapp_green.png" alt=""></a>
                      <a href="" class="social-icon"><img src="/image/license.svg" alt=""></a>
                  </div>
                  <div class="copyright desktop-only">
                      <img id="copyright" src="/image/Copyright2 _ blue.svg" alt="copyright">
                      <p>takiza, 2025</p>
                  </div>
              </div>
      
              <div class="footer2">
                  <nav class="nav1-footer">
                      <ul class="ul-footer">
                          <li class="li-footer"><a href="" class="a-footer"><b>Правила оплаты</b></a></li>
                          <li class="li-footer"><a href="" class="a-footer"><b>Договор оферты</b></a></li>
                          <li class="li-footer"><a href="" class="a-footer"><b>Согласие с рассылкой</b></a></li>
                          <li class="li-footer"><a href="" class="a-footer"><b>Пользовательское соглашение</b></a></li>
                          <li class="li-footer"><a href="" class="a-footer"><b>Политика конфиденциальности</b></a></li>
                          <li class="li-footer"><a href="" class="a-footer"><b>Положение о защите персональных данных</b></a></li>
                      </ul>
                  </nav>
              </div>
              
              <div class="copyright mobile-only">
                  <img id="copyright" src="/image/Copyright2 _ blue.svg" alt="copyright">
                  <p>takiza, 2025</p>
              </div>
          </address>
      </section>
  </footer> */