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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Be Vietnam Pro',sans-serif;
    background:#0b0d0b;
    color:white;
    overflow-x:hidden;
}

.container{
    width:90%;
    max-width:1400px;
    margin:auto;
}

/* ========================================
HEADER
======================================== */

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    background:transparent;

    transition:.4s ease;
}

header.active{

    background:rgba(8,8,8,.55);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.06);

    box-shadow:0 10px 40px rgba(0,0,0,.25);
}

.navbar{

    height:100px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.logo img{

    height:90px;

    width:auto;

    object-fit:contain;
}

/* ========================================
NAVIGATION
======================================== */

nav{

    display:flex;

    align-items:center;

    gap:42px;
}

nav a{

    position:relative;

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.3s;
}

nav a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:#8FA878;

    transition:.35s;
}

nav a:hover::after{

    width:100%;
}

nav a:hover{

    color:#d8f0c8;
}

/* ========================================
DROPDOWN
======================================== */

.dropdown{

    position:relative;
}

.dropdown-menu{

    position:absolute;

    top:180%;

    left:0;

    min-width:290px;

    background:rgba(12,12,12,.92);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.06);

    border-radius:24px;

    padding:20px;

    display:flex;

    flex-direction:column;

    gap:12px;

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:.35s ease;
}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

.dropdown-menu a{

    padding:14px 18px;

    border-radius:14px;

    transition:.3s;
}

.dropdown-menu a:hover{

    background:#6E8B5B;

    color:white;
}

/* ========================================
BUTTONS
======================================== */

.btn-primary{

    border:none;

    padding:16px 34px;

    border-radius:16px;

    background:#7E9B69;

    color:white;

    font-weight:700;

    cursor:pointer;

    transition:.35s;
}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(126,155,105,.35);
}

.btn-secondary{

    border:1px solid rgba(255,255,255,.15);

    padding:16px 34px;

    border-radius:16px;

    background:transparent;

    color:white;

    cursor:pointer;

    transition:.35s;
}

.btn-secondary:hover{

    background:white;

    color:black;
}

/* ========================================
HERO
======================================== */

.hero{

    position:relative;

    min-height:100vh;

    padding-top: 100px;
    
    background:
    linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.65)),
    url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1600&auto=format&fit=crop');

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;
}

.hero-content{

    position:relative;

    z-index:2;

    max-width:850px;
}

.hero-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:999px;

    background:rgba(143,168,120,.12);

    border:1px solid rgba(143,168,120,.22);

    color:#8FA878;

    margin-bottom:30px;
}

.hero h1{

    font-size:88px;

    line-height:1.05;

    margin-bottom:30px;
}

.hero p{

    max-width:700px;

    color:#ddd;

    line-height:1.9;

    font-size:18px;
}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;
}


/* ========================================
SECTION TITLE
======================================== */

.section-title{

    text-align:center;

    margin-bottom:80px;
}

.section-title span{

    color:#8FA878;

    letter-spacing:2px;
}

.section-title h2{

    font-size:58px;

    margin-top:20px;
}

/* ========================================
PRODUCTS
======================================== */

.products{

    padding:120px 0;

    background:#111311;
}

.swiper{

    overflow:hidden;
}

.product-card{

    background:#181b18;

    border-radius:28px;

    overflow:hidden;

    transition:.4s;
}

.product-card:hover{

    transform:translateY(-10px);
}

.product-card img{

    width:100%;

    height:420px;

    object-fit:cover;

    transition:1s;
}

.product-card:hover img{

    transform:scale(1.08);
}

.product-content{

    padding:30px;
}

.product-content h3{

    font-size:28px;

    margin-bottom:14px;
}

.product-content p{

    color:#999;

    line-height:1.8;
}

/* ========================================
WHY US
======================================== */

.why-us{

    padding:120px 0;

    background:#0b0d0b;
}

.why-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;
}

.why-card{

    background:#171917;

    border-radius:28px;

    padding:45px 35px;

    border:1px solid rgba(255,255,255,.05);

    transition:.35s;
}

.why-card:hover{

    transform:translateY(-10px);

    border-color:rgba(143,168,120,.35);
}

.why-icon{

    font-size:44px;

    margin-bottom:25px;

    color:#8FA878;
}

.why-card h3{

    font-size:28px;

    margin-bottom:20px;
}

.why-card p{

    color:#999;

    line-height:1.9;
}

/* ========================================
PROJECTS
======================================== */

.projects{

    padding:120px 0;

    background:#111311;
}

.project-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;
}

.project-item{

    position:relative;

    border-radius:28px;

    overflow:hidden;

    min-height:320px;
}

.project-item.large{

    grid-column:span 2;

    grid-row:span 2;

    min-height:665px;
}

.project-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;
}

.project-item:hover img{

    transform:scale(1.08);
}

.project-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );

    display:flex;

    align-items:flex-end;

    padding:35px;
}

.project-overlay h3{

    font-size:28px;
}

/* ========================================
ABOUT HERO
======================================== */

.about-hero{

    position:relative;

    height:70vh;

    overflow:hidden;
}

.about-hero img{

    width:100%;

    height:100%;

    object-fit:cover;
}

.about-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);
}

.about-content{

    position:absolute;

    z-index:2;

    top:50%;

    left:120px;

    transform:translateY(-50%);
}

.about-content span{

    color:#8FA878;

    letter-spacing:2px;
}

.about-content h1{

    font-size:82px;

    margin:25px 0;
}

.about-content p{

    max-width:700px;

    color:#ddd;

    line-height:1.9;
}

/* ========================================
ABOUT COMPANY
======================================== */

.about-company{

    padding:120px 0;

    background:#0b0d0b;
}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;
}

.about-image{

    border-radius:32px;

    overflow:hidden;
}

.about-image img{

    width:100%;

    height:700px;

    object-fit:cover;
}

.about-text span{

    color:#8FA878;

    letter-spacing:2px;
}

.about-text h2{

    font-size:62px;

    line-height:1.15;

    margin:30px 0;
}

.about-text p{

    color:#999;

    line-height:2;

    margin-bottom:30px;
}

/* ========================================
STATS
======================================== */

.stats{

    padding:120px 0;

    background:#111311;
}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;
}

.stat-box{

    background:#181b18;

    border-radius:28px;

    padding:60px 40px;

    text-align:center;

    border:1px solid rgba(255,255,255,.05);

    transition:.35s;
}

.stat-box:hover{

    transform:translateY(-10px);

    border-color:rgba(143,168,120,.35);
}

.stat-box h2{

    font-size:68px;

    color:#d8f0c8;

    margin-bottom:15px;
}

.stat-box p{

    color:#999;
}

/* ========================================
CATALOG
======================================== */

.catalog-section{

    padding:120px 0;

    background:#111311;
}

.catalog-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;
}

.catalog-card{

    background:#181b18;

    border-radius:24px;

    overflow:hidden;

    transition:.35s;
}

.catalog-card:hover{

    transform:translateY(-10px);
}

.catalog-card img{

    width:100%;

    height:240px;

    object-fit:cover;
}

.catalog-card h3{

    padding:22px;

    text-align:center;

    font-size:20px;
}

/* ========================================
MAP HERO
======================================== */

.map-hero{

    position:relative;

    min-height:55vh;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.65)),
    url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1600&auto=format&fit=crop');

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;
}

.map-hero-content{

    position:relative;

    z-index:2;
}

.map-hero-content span{

    color:#8FA878;

    letter-spacing:2px;
}

.map-hero-content h1{

    font-size:72px;

    margin:24px 0;
}

.map-hero-content p{

    max-width:700px;

    color:#ddd;

    line-height:1.9;
}

/* ========================================
MAP FILTER
======================================== */

.map-filter{

    padding:60px 0;

    background:#111311;
}

.filter-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;
}

.filter-buttons button{

    border:none;

    padding:14px 28px;

    border-radius:999px;

    background:#181b18;

    color:white;

    cursor:pointer;

    transition:.3s;
}

.filter-buttons button:hover,
.filter-buttons button.active{

    background:#6E8B5B;
}

/* ========================================
MAP GRID
======================================== */

.map-color-section{

    padding:40px 0 120px;

    background:#111311;
}

.map-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:24px;
}

.map-card{

    background:#181b18;

    border-radius:24px;

    overflow:hidden;

    transition:.35s;
}

.map-card:hover{

    transform:translateY(-8px);
}

.map-card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    transition:1s;
}

.map-card:hover img{

    transform:scale(1.08);
}

.map-info{

    padding:22px;
}

.map-info h3{

    font-size:24px;

    margin-bottom:10px;
}

.map-info p{

    color:#888;
}

/* ========================================
PAGINATION
======================================== */

.map-pagination{

    padding-bottom:120px;

    background:#111311;
}

.pagination{

    display:flex;

    justify-content:center;

    gap:16px;
}

.page-btn{

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:#181b18;

    color:white;

    font-weight:700;

    font-size:18px;

    cursor:pointer;

    transition:.3s;
}

.page-btn:hover,
.page-btn.active{

    background:#8FA878;
}

/* ========================================
FOOTER
======================================== */

footer{

    background:#090b09;

    padding-top:120px;

    border-top:1px solid rgba(255,255,255,.05);
}

.footer-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr 1.2fr;

    gap:80px;

    padding-bottom:80px;
}

.footer-brand h2{

    font-size:42px;

    color:#d8f0c8;

    margin-bottom:24px;
}

.footer-brand p{

    color:#8f8f8f;

    line-height:2;
}

.footer-links h3,
.footer-contact h3{
    font-size:22px;
    margin-bottom:30px;
}
.footer-links ul,
.footer-contact ul{
    list-style:none;
}
.footer-links li,
.footer-contact li{
    line-height:2;
    margin-bottom:18px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.04);
    transition:.3s;
}
footer a{
    color:#fff !important;
    text-decoration:none !important;
}
footer a:hover{
    color:#8FA878 !important;
}
.footer-links li:hover{
    transform:translateX(6px);
}
.footer-bottom{

    border-top:1px solid rgba(255,255,255,.05);

    text-align:center;

    padding:30px 0;

    color:#666;
}

/* ========================================
SWIPER BUTTON
======================================== */

.swiper-button-prev,
.swiper-button-next{

    width:60px !important;

    height:60px !important;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.08);

    transition:.3s;
}

.swiper-button-prev:hover,
.swiper-button-next:hover{

    background:#6E8B5B;
}

.swiper-button-prev::after,
.swiper-button-next::after{

    font-size:20px !important;

    color:white;
}

/* ========================================
RESPONSIVE
======================================== */

/* LARGE TABLET - 1200px */
@media(max-width: 1200px) {

    .map-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .hero h1 {
        font-size: 72px;
    }

    .section-title h2 {
        font-size: 48px;
    }

}

/* TABLET - 992px */
@media(max-width: 992px) {

    nav { display: none; }

    .container { width: 92%; }

    /* Typography */
    .hero h1,
    .about-content h1 { font-size: 52px; }
    .section-title h2 { font-size: 40px; }
    .about-text h2 { font-size: 48px; }
    .stat-box h2 { font-size: 52px; }
    .contact-hero-content h1 { font-size: 52px; }
    .map-hero-content h1 { font-size: 52px; }

    /* Sections padding */
    .products,
    .why-us,
    .projects,
    .about-company,
    .stats,
    .catalog-section,
    .partners,
    .contact-section { padding: 80px 0; }

    /* Grids */
    .why-grid,
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .project-grid { grid-template-columns: 1fr 1fr; }
    .project-item.large { grid-column: span 2; }

    .catalog-grid { grid-template-columns: repeat(2, 1fr); }
    .map-grid { grid-template-columns: repeat(3, 1fr); }
    .partner-list { grid-template-columns: repeat(2, 1fr); }

    .about-grid,
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }

    .about-image img { height: 450px; }

    .contact-grid { grid-template-columns: 1fr; }

    /* Footer */
    .footer-grid { gap: 40px; padding-bottom: 50px; }

}

/* MOBILE - 768px */
@media(max-width: 768px) {

    .container { width: 94%; }

    /* Sections padding */
    .products,
    .why-us,
    .projects,
    .about-company,
    .stats,
    .catalog-section,
    .partners,
    .contact-section { padding: 60px 0; }

    .section-title { margin-bottom: 40px; }

    /* Typography */
    .hero h1 { font-size: 38px; }
    .section-title h2 { font-size: 32px; }
    .about-content h1 { font-size: 38px; }
    .about-text h2 { font-size: 36px; }
    .stat-box h2 { font-size: 44px; }
    .contact-hero-content h1 { font-size: 36px; }
    .map-hero-content h1 { font-size: 36px; }
    .footer-brand h2 { font-size: 30px; }
    .contact-form h2,
    .contact-info h2 { font-size: 28px; }

    /* Hero */
    .hero {
        min-height: auto;
        padding: 120px 0 80px;
    }
    .hero p { font-size: 15px; }
    .hero-buttons {
        flex-direction: column;
        gap: 14px;
    }
    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* About hero */
    .about-hero { height: 50vh; }
    .about-content {
        left: 20px;
        right: 20px;
    }
    .about-content p { display: none; }

    /* Grids - all single column on mobile */
    .project-grid,
    .why-grid,
    .stats-grid,
    .catalog-grid,
    .partner-list { grid-template-columns: 1fr; }

    .project-item.large {
        grid-column: span 1;
        min-height: 280px;
    }

    .map-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

    /* Cards padding */
    .why-card { padding: 30px 25px; }
    .stat-box { padding: 40px 25px; }
    .contact-form,
    .contact-info { padding: 30px 20px; }

    /* About */
    .about-image img { height: 300px; }
    .about-grid { gap: 30px; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 40px;
    }
    footer { padding-top: 60px; }

    /* Contact */
    .contact-hero { height: 40vh; }
    .contact-map iframe { height: 300px; }

    /* Map */
    .map-filter { padding: 40px 0; }
    .filter-buttons { gap: 10px; }
    .filter-buttons button {
        padding: 10px 18px;
        font-size: 14px;
    }

    /* Pagination */
    .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 0 15px;
    }
    .page-btn {
        width: 42px;
        height: 42px;
        font-size: 14px;
    }

    /* Floating buttons smaller on mobile */
    .floating-contact { right: 15px; bottom: 20px; gap: 12px; }
    .float-btn { width: 52px; height: 52px; font-size: 20px; }

    /* Swiper buttons */
    .swiper-button-prev,
    .swiper-button-next {
        width: 44px !important;
        height: 44px !important;
    }

}

/* SMALL MOBILE - 576px */
@media(max-width: 576px) {

    .container { width: 95%; }

    .hero h1 { font-size: 32px; }
    .section-title h2 { font-size: 28px; }
    .about-content h1 { font-size: 30px; }
    .map-hero-content h1 { font-size: 30px; }
    .contact-hero-content h1 { font-size: 30px; }

    .map-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    .map-info h3 { font-size: 16px; }
    .map-info p { font-size: 13px; }

    .hero-tag { font-size: 12px; padding: 10px 18px; }

    .product-card img { height: 280px; }

    .stat-box h2 { font-size: 36px; }

    .partner-item { min-height: auto; padding: 30px 20px; }
    .partner-item img { height: 150px; }

}

/* ========================================
FOOTER LINKS
======================================== */
footer a,
footer a:link,
footer a:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}
footer a:hover {
    color: #8FA878 !important;
}

/* ========================================
MOBILE HEADER & MENU
======================================== */

.mobile-header {
    display: none;
}

.mobile-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media(max-width: 768px) {

    header#header {
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        pointer-events: none !important;
    }

    .mobile-header {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px 20px;
        background: #0b0d0b;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99999;
        box-sizing: border-box;
        min-height: 70px;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    #menuToggle {
        font-size: 28px;
        color: white !important;
        cursor: pointer !important;
        background: none !important;
        border: none !important;
        padding: 10px !important;
        line-height: 1;
        box-shadow: none !important;
        outline: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        min-width: 44px;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        order: 1;
        flex-shrink: 0;
        z-index: 2;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
    }

    .mobile-header .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }

    .mobile-header .logo img {
        width: 65px;
        height: auto;
        display: block;
    }

    .mobile-menu {
        display: none;
        width: 100%;
        background: #090b09;
        list-style: none;
        padding: 20px;
        margin: 0;
        border-top: 1px solid rgba(255,255,255,.08);
        box-sizing: border-box;
        position: fixed;
        top: 70px;
        left: 0;
        z-index: 99998;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-menu.open {
        display: block !important;
    }

    .mobile-menu li { margin-bottom: 0; }

    .mobile-menu > li > a {
        color: white !important;
        text-decoration: none !important;
        font-size: 16px;
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-submenu {
        display: none;
        list-style: none;
        padding-left: 15px;
        margin: 8px 0;
    }

    .mobile-dropdown.active .mobile-submenu { display: block; }
    .mobile-submenu li { margin: 0; }

    .mobile-submenu a {
        color: rgba(255,255,255,0.75) !important;
        text-decoration: none !important;
        font-size: 14px;
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,.04);
    }

    .mobile-dropdown-toggle::after { content: ' ▾'; font-size: 14px; }
    .mobile-dropdown.active .mobile-dropdown-toggle::after { content: ' ▴'; }

}