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

        .main-header {
            width: 100%;
            background: #ffffff;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

            position: relative;
            z-index: 999;
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            height: 82px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }


        /* Logo */

        .logo img {
            width: 170px;
            height: auto;
            display: block;
        }


        /* Navigation */

        .main-menu {
            display: flex;
            align-items: center;
            gap: 32px;

            list-style: none;
        }

        .main-menu li a {
            position: relative;

            color: #222222;

            text-decoration: none;

            font-size: 14px;
            font-weight: 600;

            transition: 0.3s ease;
        }

        .main-menu li a::after {
            content: "";

            position: absolute;

            left: 0;
            bottom: -7px;

            width: 0;
            height: 2px;

            background: #1f6f43;

            transition: width 0.3s ease;
        }

        .main-menu li a:hover {
            color: #1f6f43;
        }

        .main-menu li a:hover::after,
        .main-menu li a.active::after {
            width: 100%;
        }

        .main-menu li a.active {
            color: #1f6f43;
        }


        /* =========================
           MOBILE MENU
        ========================== */

        .menu-toggle {
            width: 32px;
            height: 24px;

            display: none;

            flex-direction: column;
            justify-content: space-between;

            cursor: pointer;
        }

        .menu-toggle span {
            width: 100%;
            height: 3px;

            background: #222222;

            border-radius: 5px;

            transition: 0.3s ease;
        }

        .menu-toggle.active span:nth-child(1) {
            transform:
                translateY(10.5px)
                rotate(45deg);
        }

        .menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle.active span:nth-child(3) {
            transform:
                translateY(-10.5px)
                rotate(-45deg);
        }
        
        @media (max-width: 900px) {

            .header-container {
                padding: 14px 20px;
            }

            .logo img {
                width: 145px;
            }

            .menu-toggle {
                display: flex;
            }

            .nav-menu {
                position: absolute;

                top: 100%;
                left: 0;

                width: 100%;

                background: #ffffff;

                max-height: 0;

                overflow: hidden;

                box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);

                transition: max-height 0.4s ease;
            }

            .nav-menu.active {
                max-height: 400px;
            }

            .main-menu {
                flex-direction: column;
                align-items: flex-start;

                gap: 0;

                padding: 10px 20px 20px;
            }

            .main-menu li {
                width: 100%;

                border-bottom: 1px solid #eeeeee;
            }

            .main-menu li:last-child {
                border-bottom: none;
            }

            .main-menu li a {
                display: block;

                width: 100%;

                padding: 15px 5px;
            }

            .main-menu li a::after {
                display: none;
            }
}

@media (max-width: 480px) {

            .header-container {
                padding: 12px 15px;
            }

            .logo img {
                width: 130px;
            }

        }