@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

        @font-face {
            font-family: "Calibri";
            src: url("fonts/calibri.woff2") format("woff2");
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: "Calibri";
            src: url("fonts/calibrib.woff2") format("woff2");
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

		*{

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

        

        /* =================================
           TOP BAR
        ================================= */

        .top-bar {
            height: 47px;
            background: #f7f7f7;
            border-bottom: 1px solid #eeeeee;
        }

        .top-bar-container {
            max-width: 1600px;
            height: 100%;
            margin: auto;

            padding: 0 30px;

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

        .top-left,
        .top-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .top-left span,
        .top-right span {
        	font-family: "Calibri", Arial, sans-serif;
            font-size: 14px;
            color: #666;
        }

        .top-left strong,
        .top-right strong {
            color: #333;
            font-weight: 600;
        }


        /* =================================
           MAIN NAV
           ONLY THIS PART IS STICKY
        ================================= */

        .main-nav {
            height: 98px;

            background: #fff;

            border-bottom: 1px solid #e5e5e5;

            position: sticky;
            top: 0;

            z-index: 9999;
        }

        .nav-container {
            max-width: 1600px;
            height: 100%;
            margin: auto;

            padding: 0 15px;

            display: flex;
            align-items: center;
        }


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

        
.logo {
    width: 250px;
    height: 100%;
    display: flex;
    align-items: center;
    border-right: 1px solid #eeeeee;
    text-decoration: none;
}

.logo img {
    display: block;
    width: 230px;
    max-width: 100%;
    height: auto;
}



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

        .navigation {
	flex: 1;
	height: 100%;
	display: flex;
	align-items: center;
	padding-left: 520px;
        }

        .navigation > ul {
            list-style: none;

            display: flex;
            align-items: center;

            gap: 42px;
        }

        .navigation > ul > li {
            position: relative;
        }

        .navigation > ul > li > a {
        	 font-family: "Calibri", Arial, sans-serif;


            height: 98px;

            display: flex;
            align-items: center;

            gap: 7px;

            color: #333;

            text-decoration: none;

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

            transition: 0.3s;
        }

        .navigation > ul > li > a:hover {

            color: #33cccc;
        }


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

        .navigation ul li ul {

            position: absolute;

            top: 98px;
            left: 0;

            width: 385px;

            background: #fff;

            list-style: none;

            padding: 10px 0;

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

            opacity: 0;
            visibility: hidden;

            transform: translateY(10px);

            transition: 0.3s;

            z-index: 999;
        }

        .navigation ul li:hover > ul {

            opacity: 1;

            visibility: visible;

            transform: translateY(0);
        }

        .navigation ul li ul li {

            width: 100%;
        }

        .navigation ul li ul li a {
        	font-family: "Calibri", Arial, sans-serif;

            display: block;

            padding: 13px 20px;

            color: #333;

            text-decoration: none;

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

            transition: 0.3s;
        }

        .navigation ul li ul li a:hover {

            background: #33cccc;

            color: #222;
        }


        /* =================================
           CONTACT BUTTON
        ================================= */

        .nav-actions {

            display: flex;

            align-items: center;

            margin-left: auto;
        }

        .contact-btn {
        	font-family: "Calibri", Arial, sans-serif;

            height: 58px;

            padding: 0 28px;

            display: flex;

            align-items: center;

            gap: 15px;

            background: #33cccc;

            color: #fff;

            text-decoration: none;

            font-size: 18px;

            font-weight: 600;

            transition: 0.3s;
        }

        .contact-btn:hover {

            background: #222;

            color: #fff;
        }

        .contact-btn i {

            font-size: 15px;
        }


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

        .mobile-toggle {

            display: none;

            border: 0;

            background: transparent;

            font-size: 24px;

            cursor: pointer;

            color: #222;
        }


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

        @media (max-width: 1100px) {

            .logo {

                width: 210px;
            }

            .navigation {

                padding-left: 25px;
            }

            .navigation > ul {

                gap: 25px;
            }

            .contact-btn {

                padding: 0 20px;
            }

        }


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

            .navigation {
                padding-left: 265px;
            }

        }

        @media (max-width: 1460px) {

            .navigation {
                padding-left: 230px;
            }

        }

        @media (max-width: 1360px) {

            .navigation {
                padding-left: 261px;
            }

        }

        @media (max-width: 1260px) {

            .navigation {
                padding-left: 235px;
            }
            
        }



        @media (max-width: 992px) {

            /* Top bar scrolls away normally */

            .top-bar {

                display: none;
            }


            /* Main navigation remains sticky */

            .main-nav {

                height: 80px;
            }

            .nav-container {

                padding: 0 20px;
            }


            /* Logo */

            .logo {

                width: auto;

                border: none;

                flex: 1;
            }

            .logo-text {

                font-size: 26px;
            }


            /* Navigation */

            .navigation {

                position: absolute;

                top: 80px;

                left: 0;

                width: 100%;

                height: calc(100vh - 80px);

                background: #fff;

                padding: 20px;

                display: none;

                overflow-y: auto;
            }

            .navigation.active {

                display: block;
            }


            .navigation > ul {

                display: block;

                width: 100%;
            }


            .navigation > ul > li {

                border-bottom: 1px solid #eeeeee;
            }


            .navigation > ul > li > a {

                height: auto;

                padding: 17px 5px;

                justify-content: space-between;
            }


            /* Mobile dropdown */

            .navigation ul li ul {

                position: static;

                width: 100%;

                display: none;

                opacity: 1;

                visibility: visible;

                transform: none;

                box-shadow: none;

                padding: 0 0 10px;
            }

            .navigation ul li:hover > ul {

                display: none;
            }

            .navigation ul li.open > ul {

                display: block;
            }

            .navigation ul li ul li a {

                padding: 12px 25px;
            }


            /* Contact button */

            .contact-btn {

                display: none;
            }


            /* Mobile button */

            .mobile-toggle {

                display: block;

                margin-left: 15px;
            }

        }


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

        @media (max-width: 576px) {

            .nav-container {

                padding: 0 15px;
            }

            .logo-text {

                font-size: 23px;
            }

            .logo-icon {

                width: 30px;
                height: 30px;
            }

        }