сделай максимально одаптивной <!DOCTYPE html>
<html class="nojs html css_verticalspacer" lang="ru-RU" style="width: 1250px;">
 <head>
    [[$head]]
    <link rel="stylesheet" type="text/css" href="assets/theme/css/index.css?crc=4094100111" id="pagesheet"/>
    <style>
      /* Add animation styles */
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      @keyframes slideInFromLeft {
        from { transform: translateX(-50px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
      }
      @keyframes slideInFromRight {
        from { transform: translateX(50px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
      }
      .fade-in {
        animation: fadeIn 0.5s ease-out;
      }
      .slide-in-left {
        animation: slideInFromLeft 0.5s ease-out;
      }
      .slide-in-right {
        animation: slideInFromRight 0.5s ease-out;
      }
      .animate-on-scroll {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s, transform 0.5s;
      }
      .animate-on-scroll.visible {
        opacity: 1;
        transform: translateY(0);
      }
    </style>
 </head>
 <body>

<div class="header fade-in">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                [[$header]] 
            </div>
        </div>
    </div>
</div>

<div class="main-navigation slide-in-left">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                [[$navigation]] 
            </div>
        </div>
    </div>
</div>

[[!+modx.user.id:isloggedin:is=`1`:then=`
    <div class="sub-navigation slide-in-right">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    [[$sub-navigation]] 
                </div>
                </div>
            </div>
        </div>
    </div>
`:else=``]]

[[$contact_us_btn]]

<div class="page-wrapper images-block-1 animate-on-scroll" style="padding: 40px 0 80px 0;">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                [[$slider]]
            </div>
        </div>
    </div>
</div>
    
<div class="article-wrapper animate-on-scroll">
    [[$main-articles-container]]
</div>

<div class="news-wrapper animate-on-scroll">
    [[$main-news-container]]
</div>

<div class="container animate-on-scroll">
    <div class="row">
        <div class="col-md-12">
            <div class="map-header">
                Присутствие компании в регионах
            </div>
        </div>
        <div class="col-md-12">
            <div class="img-block mt30">
                <img class="svg" src="assets/theme/images/mother-russia-01.svg?crc=525699670" alt="" data-mu-svgfallback="assets/theme/images/mother-russia-01_poster_.png?crc=3773856243"/>
                <div class="map-accordeon">
                    <ul class="accordion">
                        <li>
                            <a class="toggle" href="javascript:void(0);">Алтайский край</a>
                            <ul class="inner">
                                <li><a href="[[~2]]">Контакты</a></li>
                                <li><a href="[[~11]]">Публикации и новости</a></li>
                                <li><a href="[[~13]]">Видео</a></li>
                            </ul>
                        </li>
                        <li>
                            <a class="toggle" href="javascript:void(0);">Новосибирск</a>
                            <ul class="inner">
                                <li><a href="[[~2]]">Контакты</a></li>
                                <li><a href="[[~11]]">Публикации и новости</a></li>
                                <li><a href="[[~13]]">Видео</a></li>
                            </ul>
                        </li>
                        <li>
                            <a class="toggle" href="javascript:void(0);">Омская область</a>
                            <ul class="inner">
                                <li><a href="[[~2]]">Контакты</a></li>
                                <li><a href="[[~11]]">Публикации и новости</a></li>
                                <li><a href="[[~13]]">Видео</a></li>
                            </ul>
                        </li>
                        <li>
                            <a class="toggle" href="javascript:void(0);">Красноярский край</a>
                            <ul class="inner">
                                <li><a href="[[~2]]">Контакты</a></li>
                                <li><a href="[[~11]]">Публикации и новости</a></li>
                                <li><a href="[[~13]]">Видео</a></li>
                            </ul>
                        </li>
                        <li>
                            <a class="toggle" href="javascript:void(0);">Иркутсткая область</a>
                            <ul class="inner">
                                <li><a href="[[~2]]">Контакты</a></li>
                                <li><a href="[[~11]]">Публикации и новости</a></li>
                                <li><a href="[[~13]]">Видео</a></li>
                            </ul>
                        </li>
                        <li>
                            <a class="toggle" href="javascript:void(0);">Томская область</a>
                            <ul class="inner">
                                <li><a href="[[~2]]">Контакты</a></li>
                                <li><a href="[[~11]]">Публикации и новости</a></li>
                                <li><a href="[[~13]]">Видео</a></li>
                            </ul>
                        </li>
                        <li>
                            <a class="toggle" href="javascript:void(0);">Кемеровская область</a>
                            <ul class="inner">
                                <li><a href="[[~2]]">Контакты</a></li>
                                <li><a href="[[~11]]">Публикации и новости</a></li>
                                <li><a href="[[~13]]">Видео</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="opportunities-wrapper animate-on-scroll">
    [[$opportunities]]
</div>

[[$feedback-modal]]

<div class="footer fade-in">
    [[$footer]]
</div>

[[$scripts]]

<script>
// Optimized animation script
document.addEventListener('DOMContentLoaded', function() {
    const animateElements = document.querySelectorAll('.animate-on-scroll');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target);
            }
        });
    }, {
        threshold: 0.1
    });

    animateElements.forEach(element => {
        observer.observe(element);
    });

    // Optimize accordion
    const accordionToggles = document.querySelectorAll('.toggle');
    accordionToggles.forEach(toggle => {
        toggle.addEventListener('click', function(e) {
            e.preventDefault();
            const listItem = this.parentNode;
            const isOpen = listItem.classList.contains('open');
            
            // Close all open items
            document.querySelectorAll('.accordion > li').forEach(item => {
                item.classList.remove('open');
                item.querySelector('.inner').style.maxHeight = null;
            });

            // If the clicked item wasn't open, open it
            if (!isOpen) {
                listItem.classList.add('open');
                const inner = listItem.querySelector('.inner');
                inner.style.maxHeight = inner.scrollHeight + "px";
            }
        });
    });
});
</script>

</body>
</html>