@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');



        /* =========================================
           RESET
        ========================================= */

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Montserrat", sans-serif;
            background: #fff;
        }

        a {
            text-decoration: none;
        }


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

        .header {
            position: sticky;
            top: 0;
            left: 0;

            width: 100%;
            height: 100px;

            background: #fff;

            border-bottom: 1px solid rgb(0 0 0 / 8%);

            z-index: 9999;

            display: flex;
            align-items: center;
        }


        .header-container {
            width: 90%;
            max-width: 1600px;

            margin: auto;

            display: flex;
            align-items: center;
            justify-content: space-between;
        }


        /* =========================================
           LOGO
        ========================================= */

        .logo {
            display: flex;
            align-items: center;
        }

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


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

        .nav-wrapper {
            display: flex;
            align-items: center;
        }


        .nav-menu {
            display: flex;
            align-items: center;

            gap: 38px;

            list-style: none;
        }


        .nav-menu > li {
            position: relative;
            list-style: none;
        }


        .nav-menu > li > a {
            font-family: "Montserrat", sans-serif;

            color: #000;

            font-size: 16px;
            font-weight: 500;

            padding: 40px 0;

            display: flex;
            align-items: center;

            gap: 7px;

            transition: 0.3s;
        }


        .nav-menu > li > a:hover {
            color: #f56b0c;
        }


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

        .dropdown-arrow {
            font-size: 10px;

            transition: 0.3s;
        }


        .has-dropdown:hover .dropdown-arrow {
            transform: rotate(180deg);
        }


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

        .service-dropdown {

            position: absolute;

            top: 100%;
            left: 50%;

            transform:
                translateX(-50%)
                translateY(15px);

            width: 380px;

            max-height: 500px;

            overflow-y: auto;

            background: #fff;

            padding: 12px 0;

            list-style: none;

            opacity: 0;
            visibility: hidden;

            pointer-events: none;

            transition: all 0.3s ease;

            box-shadow:
                0 15px 40px rgba(0, 0, 0, 0.18);

            z-index: 9999;
        }


        /* SHOW DROPDOWN */

        .has-dropdown:hover .service-dropdown {

            opacity: 1;

            visibility: visible;

            pointer-events: auto;

            transform:
                translateX(-50%)
                translateY(0);
        }


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

        .service-dropdown li {
            width: 100%;

            list-style: none;
        }


        .service-dropdown li a {

            display: block;

            padding: 12px 20px;

            color: #444;

            font-size: 14px;

            font-weight: 400;

            line-height: 1.5;

            transition: all 0.3s ease;
        }


        .service-dropdown li a:hover {

            color: #d39f23;

            background: #f7f7f7;

            padding-left: 27px;
        }


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

        .menu-toggle {

            display: none;

            width: 42px;
            height: 42px;

            border: 1px solid #ddd;

            background: transparent;

            color: #f96302;

            font-size: 20px;

            cursor: pointer;

            align-items: center;
            justify-content: center;
        }


        /* =========================================
           MOBILE CLOSE BUTTON
        ========================================= */

        .mobile-close {
            display: none;
        }


        /* =========================================
           OVERLAY
        ========================================= */

        .menu-overlay {

            position: fixed;

            inset: 0;

            background: rgba(0, 0, 0, 0.65);

            z-index: 9997;

            opacity: 0;

            visibility: hidden;

            transition: 0.3s ease;
        }


        .menu-overlay.active {

            opacity: 1;

            visibility: visible;
        }


        /* =========================================
           TABLET
        ========================================= */

        @media (max-width: 1100px) {

            .header-container {
                width: 92%;
            }


            .nav-menu {
                gap: 22px;
            }


            .nav-menu > li > a {
                font-size: 14px;
            }


            .logo img {
                width: 230px;
            }


            .service-dropdown {
                width: 350px;
            }

        }


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

        @media (max-width: 900px) {

            /* HEADER */

            .header {
                height: 80px;
            }


            .header-container {
                width: 92%;
            }


            /* LOGO */

            .logo img {
                width: 165px;
            }


            /* HAMBURGER */

            .menu-toggle {
                display: flex;
            }


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

            .nav-wrapper {

                position: fixed;

                top: 0;

                right: -100%;

                width: 320px;

                max-width: 90%;

                height: 100vh;

                background: #111;

                padding: 80px 25px 30px;

                overflow-y: auto;

                display: block;

                transition: right 0.4s ease;

                box-shadow:
                    -10px 0 30px rgba(0, 0, 0, 0.4);

                z-index: 9998;
            }


            /* OPEN MENU */

            .nav-wrapper.active {
                right: 0;
            }


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

            .nav-menu {

                display: block;

                width: 100%;
            }


            .nav-menu > li {

                width: 100%;

                border-bottom:
                    1px solid
                    rgba(255, 255, 255, 0.1);
            }


            .nav-menu > li > a {

                color: #fff;

                padding: 17px 5px;

                font-size: 14px;

                justify-content: space-between;
            }


            .nav-menu > li > a:hover {
                color: #f56b0c;
            }


            /* =====================================
               MOBILE SERVICES DROPDOWN
            ===================================== */

            .service-dropdown {

                position: static;

                width: 100%;

                max-height: none;

                overflow: visible;

                transform: none !important;

                background: transparent;

                padding: 0 10px;

                display: none;

                box-shadow: none;

                opacity: 1;

                visibility: visible;

                pointer-events: auto;
            }


            /* OPEN SERVICES */

            .has-dropdown.active .service-dropdown {
                display: block;
            }


            /* MOBILE DROPDOWN ITEMS */

            .service-dropdown li {
                border: none;
            }


            .service-dropdown li a {

                color: #ccc;

                font-size: 12px;

                padding: 10px 5px;

                line-height: 1.5;

                background: transparent;
            }


            .service-dropdown li a:hover {

                color: #e2b33d;

                background: transparent;

                padding-left: 10px;
            }


            /* =====================================
               MOBILE ARROW
            ===================================== */

            .has-dropdown.active .dropdown-arrow {
                transform: rotate(180deg);
            }


            /* =====================================
               CLOSE BUTTON
            ===================================== */

            .mobile-close {

                display: flex;

                position: absolute;

                top: 20px;

                right: 20px;

                width: 38px;

                height: 38px;

                align-items: center;

                justify-content: center;

                color: #fff;

                font-size: 22px;

                cursor: pointer;

                border:
                    1px solid
                    rgba(255, 255, 255, 0.2);
            }


            .mobile-close:hover {

                color: #f56b0c;

                border-color: #f56b0c;
            }

        }


        /* =========================================
           SMALL MOBILE
        ========================================= */

        @media (max-width: 500px) {

            .logo img {
                width: 220px;
            }


            .nav-wrapper {
                width: 290px;
            }


            .service-dropdown li a {
                font-size: 11px;
            }

        }


        /* =========================================
           DEMO CONTENT
        ========================================= */

        .demo-section {

            min-height: 700px;

            padding: 100px 20px;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;
        }


        .demo-section h1 {
            font-size: 45px;
            margin-bottom: 15px;
        }


        .demo-section p {
            color: #666;
            font-size: 18px;
        }