/* ==========================================================================
   NA-BORTU.BY - Optimized CSS v2.2
   ИСПРАВЛЕНИЯ:
   1. Мобильное меню: display: none → показывается через .active
   2. Лого и телефон закреплены слева
   3. Бургер меню справа
   4. Плавная анимация
   ========================================================================== */

/* ==========================================================================
   1. RESET & BASE STYLES
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size:16px;line-height:1.6}
body{font-family:'Titillium Web',Arial,sans-serif;font-size:15px;font-weight:300;color:#333;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;vertical-align:middle;border:0}
a{color:#2b9c73;text-decoration:none;transition:color .3s ease}
a:hover,a:focus{color:#dadada;outline:0}
h1,h2,h3,h4,h5,h6{font-family:'Roboto Condensed',Arial,sans-serif;font-weight:700;line-height:1.2;margin:0 0 15px;color:#222}
h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}
p{margin:0 0 15px}
ul,ol{margin:0 0 15px;padding-left:20px}

/* ==========================================================================
   2. LAYOUT UTILITIES
   ========================================================================== */
.container{max-width:1200px;margin:0 auto;padding:0 15px}
.row{display:flex;flex-wrap:wrap;margin:0 -15px}
.col-md-3,.col-md-4,.col-md-6,.col-md-9,.col-md-12{padding:0 15px;width:100%}
.col-md-2{padding:0 15px}
@media(min-width:768px){
    .col-md-3{flex:0 0 25%;max-width:25%}
    .col-md-4{flex:0 0 33.333%;max-width:33.333%}
    .col-md-6{flex:0 0 50%;max-width:50%}
    .col-md-9{flex:0 0 75%;max-width:75%}
    .col-md-12{flex:0 0 100%;max-width:100%}
}
.section-padding{padding:80px 0}
.section-padd{padding:50px 0}
.section-pad{padding:20px 0}
.text-center{text-align:center}
.clearfix::after{content:"";display:table;clear:both}

/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */
.header-area{
    background:#fff;
    width:100%;
    z-index:999;
    box-shadow:0 2px 5px rgba(0,0,0,.05);
    position:relative;
    border-bottom:2px solid #f5f5f5;
}

/* ====================================================================
   ИЗМЕНЕНИЕ #1: Лого и телефон всегда слева
   ==================================================================== */
.logo{
    padding:15px 0;
    position:relative;
}
.logo img{
    max-width:180px;
    height:auto;
    display:block;
}
.logo p{
    margin:10px 0 0;
    font-size:18px;
    font-weight:700;
}
.logo p a{
    color:#d32f2f;
    text-decoration:none;
    transition:color .3s ease;
}
.logo p a:hover{
    color:#b71c1c;
}

/* Sticky Header */
.is-sticky .header-area{
    position:fixed;
    top:0;
    left:0;
    right:0;
    animation:slideDown .3s ease;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
}
@keyframes slideDown{
    from{transform:translateY(-100%)}
    to{transform:translateY(0)}
}

/* ====================================================================
   ИЗМЕНЕНИЕ #2: Бургер меню - всегда справа, правильная анимация
   ==================================================================== */
.navbar-toggle{
    display:none;
    background:#fff;
    border:2px solid #2b9c73;
    padding:8px 12px;
    cursor:pointer;
    border-radius:4px;
    transition:all .3s ease;
    position:absolute;
    top:50%;
    right:15px;
    transform:translateY(-50%);
    z-index:1001;
}
.navbar-toggle:hover{
    background:#2b9c73;
    border-color:#2b9c73;
}
.navbar-toggle:hover .icon-bar{
    background:#fff;
}

/* Icon bars animation */
.navbar-toggle .icon-bar{
    display:block;
    width:24px;
    height:3px;
    background:#2b9c73;
    margin:4px 0;
    border-radius:2px;
    transition:all .3s ease;
}

/* Hamburger → X animation */
.navbar-toggle.active .icon-bar:nth-child(2){
    transform:rotate(45deg) translate(6px, 6px);
}
.navbar-toggle.active .icon-bar:nth-child(3){
    opacity:0;
}
.navbar-toggle.active .icon-bar:nth-child(4){
    transform:rotate(-45deg) translate(6px, -6px);
}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
}

/* Main Navigation Container */
.mainmenu{
    position:relative;
}
.navbar-collapse{
    position:relative;
}

/* Navigation List - UNIFIED BUTTON STYLES */
.navbar-nav{
    list-style:none;
    display:flex;
    justify-content:flex-end;
    margin:0;
    padding:0;
    gap:3px;
}
.navbar-nav>li{
    position:relative;
    margin:0;
}

/* All menu links have consistent styling */
.navbar-nav>li>a,
.navbar-nav>li>.dropdown-toggle{
    display:block;
    padding:14px 18px;
    color:#333;
    font-weight:500;
    font-size:15px;
    background:#fff;
    border:1px solid #e0e0e0;
    border-radius:4px;
    transition:all .3s ease;
    text-transform:capitalize;
    white-space:nowrap;
    cursor:pointer;
    text-align:left;
    position:relative;
}

/* Hover state for all buttons */
.navbar-nav>li>a:hover,
.navbar-nav>li>.dropdown-toggle:hover,
.navbar-nav>li.active>a{
    color:#fff;
    background:#2b9c73;
    border-color:#2b9c73;
    transform:translateY(-1px);
    box-shadow:0 2px 8px rgba(43,156,115,.2);
}

/* Dropdown Toggle */
.dropdown-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
}

/* Caret Icon */
.caret{
    display:inline-block;
    width:0;
    height:0;
    margin-left:8px;
    vertical-align:middle;
    border-top:5px solid;
    border-right:4px solid transparent;
    border-left:4px solid transparent;
    transition:transform .3s ease;
}
.dropdown-parent:hover .caret{
    transform:rotate(180deg);
}

/* Dropdown Menu - FIXED: extended hover area */
.dropdown-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    min-width:240px;
    z-index:1001;
    padding:8px 0;
    border-radius:6px;
    margin-top:0;
    border:1px solid #e0e0e0;
    animation:fadeInDown .3s ease;
}

/* CRITICAL FIX: Add invisible bridge between button and menu */
.dropdown-menu::before{
    content:"";
    position:absolute;
    top:-10px;
    left:0;
    right:0;
    height:10px;
    background:transparent;
}

@keyframes fadeInDown{
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:translateY(0)}
}

/* Show dropdown on hover (desktop) */
.dropdown-parent:hover .dropdown-menu,
.dropdown-parent.force-open .dropdown-menu{
    display:block;
}

/* Dropdown Items */
.dropdown-menu li{
    list-style:none;
    margin:0;
}
.dropdown-menu li a{
    display:block;
    padding:12px 20px;
    color:#333;
    font-size:14px;
    font-weight:400;
    transition:all .2s ease;
    white-space:nowrap;
    border-left:3px solid transparent;
}
.dropdown-menu li a:hover{
    background:#f5f5f5;
    color:#2b9c73;
    border-left-color:#2b9c73;
    padding-left:25px;
}

/* Header Info Text */
.header-info{
    text-align:center;
    margin:15px 0 0;
    font-size:13px;
    color:#666;
    padding-top:15px;
    border-top:1px solid #f0f0f0;
}
.header-info .info-item{
    display:inline-block;
}
.header-info .info-item strong{
    color:#2b9c73;
    font-weight:600;
}
.header-info .info-divider{
    margin:0 12px;
    color:#ccc;
}

/* ==========================================================================
   4. MOBILE NAVIGATION (< 768px)
   ====================================================================
   ИЗМЕНЕНИЕ #3: Правильное показ/скрытие меню через класс .active
   ==================================================================== */
@media(max-width:767px){
    /* Show mobile toggle button */
    .navbar-toggle{
        display:block;
    }
    
    /* ====================================================================
       КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: Лого слева, бургер справа
       ==================================================================== */
    .col-md-3{
        position:relative;
        padding-right:60px; /* Место для бургера */
    }
    
    .logo{
        display:block;
        padding:10px 0;
    }
    .logo img{
        max-width:150px;
    }
    .logo p{
        margin:5px 0 0;
        font-size:16px;
    }
    
    /* ====================================================================
       КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: Меню скрыто по умолчанию
       ==================================================================== */
    .mainmenu{
        display:none; /* По умолчанию скрыто */
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#fff;
        z-index:998;
        box-shadow:0 8px 16px rgba(0,0,0,.1);
        border-top:2px solid #2b9c73;
        max-height:calc(100vh - 100px);
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }
    
    /* ====================================================================
       КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: Показываем меню когда есть класс .active
       ==================================================================== */
    .mainmenu.active{
        display:block;
        animation:slideDownMobile .3s ease;
    }
    
    @keyframes slideDownMobile{
        from{
            opacity:0;
            transform:translateY(-20px);
        }
        to{
            opacity:1;
            transform:translateY(0);
        }
    }
    
    /* Stack navigation vertically */
    .navbar-collapse{
        padding:0;
    }
    .navbar-nav{
        flex-direction:column;
        gap:0;
        padding:10px;
    }
    
    /* Full width buttons on mobile */
    .navbar-nav>li{
        width:100%;
        margin:0 0 8px 0;
    }
    
    .navbar-nav>li>a,
    .navbar-nav>li>.dropdown-toggle{
        width:100%;
        text-align:left;
        padding:14px 18px;
        font-size:16px;
    }
    
    /* Dropdown behavior on mobile */
    .dropdown-menu{
        position:static;
        box-shadow:none;
        background:#f9f9f9;
        border-radius:0;
        margin:8px 0 0 0;
        border:none;
        border-left:3px solid #2b9c73;
        animation:none;
        display:none;
    }
    
    /* Show dropdown when parent is active */
    .dropdown-parent.active .dropdown-menu{
        display:block;
    }
    
    /* Dropdown items on mobile */
    .dropdown-menu li a{
        padding:10px 20px;
        font-size:15px;
    }
    
    /* Header info on mobile */
    .header-info{
        display:block;
        text-align:center;
        padding:15px 10px;
        font-size:12px;
        border-top:1px solid #e0e0e0;
        margin:10px 0 0;
    }
    .header-info .info-item{
        display:block;
        margin:5px 0;
    }
    .header-info .info-divider{
        display:none;
    }
}

/* ==========================================================================
   5. HERO / SLIDER SECTION
   ========================================================================== */
.overlay-bg{
    position:relative;
    background-attachment:fixed;
    background-size:cover;
    background-position:center;
    min-height:500px;
}
.overlay-bg::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.5);
}
.slider-content{
    position:relative;
    z-index:2;
    color:#fff;
    text-align:center;
    padding:120px 0;
}
.slider-content h1{
    font-size:48px;
    margin-bottom:20px;
    color:#fff;
    text-shadow:2px 2px 4px rgba(0,0,0,.3);
}
.slider-content p{
    font-size:20px;
    margin-bottom:30px;
    opacity:.95;
}

/* ==========================================================================
   6. АВТОПАРК (FLEET SECTION)
   ========================================================================== */
.our-fleet{padding:80px 0;background:#f9f9f9}
.titles-text{font-size:36px;text-align:center;margin-bottom:50px;color:#222;position:relative;padding-bottom:20px}
.titles-text::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:3px;background:#2b9c73}
.cars{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:40px}
.car{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:all .3s ease;display:flex;flex-direction:column;border:1px solid #e0e0e0}
.car:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,.15);border-color:#2b9c73}
.car figure{margin:0;position:relative;overflow:hidden}
.car img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.car:hover img{transform:scale(1.05)}
.car>div{padding:25px;flex:1;display:flex;flex-direction:column}
.car-name{font-size:22px;margin:0 0 15px;color:#2b9c73;font-weight:700}
.car-specs{font-size:14px;color:#666;line-height:1.8;margin-bottom:20px;flex:1}
.car-specs div{padding:5px 0;border-bottom:1px solid #eee}
.car-specs div:last-child{border-bottom:0}
.car-price{font-size:18px;font-weight:700;color:#d32f2f;margin-bottom:20px;padding:15px;background:#fff3e0;border-radius:6px;border-left:4px solid #ff9800}
.car-price small{display:block;font-size:13px;font-weight:400;color:#666;margin-top:5px}
.car-actions{text-align:center;margin-top:auto}

/* Universal Button Styles */
.btn-secondary,.btn-primary{display:inline-block;padding:12px 30px;background:#2b9c73;border-radius:6px;font-weight:600;font-size:15px;transition:all .3s ease;border:2px solid #2b9c73;cursor:pointer;text-align:center;text-decoration:none}
.btn-secondary{color:#717171}
.btn-primary{color:#fff}
.btn-secondary:hover,.btn-primary:hover{background:#1e6f50;border-color:#1e6f50;transform:translateY(-2px);box-shadow:0 4px 12px rgba(43,156,115,.3)}
.btn-primary{background:#d32f2f;border-color:#d32f2f}
.btn-primary:hover{background:#b71c1c;border-color:#b71c1c;box-shadow:0 4px 12px rgba(211,47,47,.3)}
.btn-lg{padding:15px 40px;font-size:18px}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */
.footer-copyright{background:#222;color:#aaa;padding:40px 0;font-size:14px}
.footer-copyright a{color:#2b9c73;transition:color .3s ease}
.footer-copyright a:hover{color:#1e6f50}
.footer-titles{font-size:16px;font-weight:700;color:#fff;margin-bottom:20px;text-transform:uppercase;letter-spacing:1px}
.footer-copyright ul{list-style:none;padding:0;margin:0}
.footer-copyright ul li{margin-bottom:10px}
.footer-copyright ul li a{color:#aaa;transition:all .3s ease;display:inline-block}
.footer-copyright ul li a:hover{color:#2b9c73;padding-left:5px}
.social-footer{margin-top:20px}
.social-footer a{display:inline-block;width:40px;height:40px;line-height:40px;text-align:center;background:#333;color:#fff;border-radius:50%;margin-right:10px;font-size:18px;transition:all .3s ease}
.social-footer a:hover{background:#2b9c73;transform:translateY(-3px)}
.stars{margin-top:15px;font-size:14px}
.stars .reit{color:#ffd700;font-weight:600}

/* ==========================================================================
   8. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet: 768px - 991px */
@media(min-width:768px)and (max-width:991px){
    .navbar-nav{gap:2px}
    .navbar-nav>li>a,.navbar-nav>li>.dropdown-toggle{padding:12px 14px;font-size:14px}
    .slider-content h1{font-size:36px}
    .slider-content p{font-size:18px}
    .cars{grid-template-columns:repeat(2,1fr)}
    .header-info{font-size:12px}
}

/* Small Mobile: < 480px */
@media(max-width:480px){
    body{font-size:14px}
    h1{font-size:24px}
    h2{font-size:22px}
    h3{font-size:20px}
    .slider-content{padding:80px 0}
    .slider-content h1{font-size:24px}
    .slider-content p{font-size:16px}
    .btn-secondary,.btn-primary{padding:10px 20px;font-size:14px}
    .btn-lg{padding:12px 30px;font-size:16px}
    .titles-text{font-size:26px}
}

/* ==========================================================================
   9. PORTFOLIO / GALLERY
   ========================================================================== */
.portfolio-menu{text-align:center;margin-bottom:40px}
.portfolio-menu ul{list-style:none;padding:0;margin:0;display:inline-flex;flex-wrap:wrap;gap:10px}
.portfolio-menu ul li{cursor:pointer;padding:12px 28px;background:#fff;border:2px solid #e0e0e0;border-radius:25px;font-weight:600;font-size:15px;transition:all .3s ease}
.portfolio-menu ul li:hover,.portfolio-menu ul li.active{background:#2b9c73;color:#fff;border-color:#2b9c73;transform:translateY(-2px);box-shadow:0 4px 12px rgba(43,156,115,.2)}
.portfolio-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.single-portfolio{position:relative;overflow:hidden;border-radius:8px;aspect-ratio:4/3}
.single-portfolio img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.single-portfolio:hover img{transform:scale(1.1)}
.single-portfolio::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(43,156,115,.8);opacity:0;transition:opacity .3s ease}
.single-portfolio:hover::after{opacity:1}
.portfolio-detail{position:absolute;bottom:0;left:0;right:0;padding:20px;z-index:2;opacity:0;transform:translateY(20px);transition:all .3s ease}
.single-portfolio:hover .portfolio-detail{opacity:1;transform:translateY(0)}
.portfolio-detail h2,.portfolio-detail h3{color:#fff;margin:0}

/* ==========================================================================
   10. ANIMATIONS & UTILITIES
   ========================================================================== */
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.pulse{animation:pulse 2s infinite}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-in{animation:fadeIn .5s ease}
.hidden{display:none!important}