@charset "utf-8";

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

*{
    font-family: "Onest", serif;
}

.container:before, .container:after {
    content: none;
}
/* Desktop Header */
        .desktop-header {
            font-family: "Onest", serif;
            background-color: #F0F7FF;
            padding: 15px 0;
            border-bottom: 1px solid #e0e0e0;
        }

        .desktop-header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

         .desktop-header .container::before {
           display: none;
        }

        .logo img {
            height: 36px;
            width: auto;
        }

        .desktop-nav ul {
            display: flex;
            list-style: none;
            align-items: center;
            margin: 0;
            padding: 0;
        }

           .desktop-nav ul li{
            margin: 0;
            padding: 0;
        }

        .desktop-nav a {
            text-decoration: none;
            color: #333;
            font-size: 16px;
            font-weight: 400;
            transition: color 0.3s ease;
            text-transform: lowercase;
            padding: 8px 30px;
            border-radius: 20px;
            font-weight: 500;
            white-space: nowrap;
        }

        .desktop-nav a:hover {
            background-color: #F1C40F;
            color: #333;
        }

        /* Applications button styling */
        .desktop-nav li.active a {
            background-color: #F4D03F;
            color: #333;
        }

        .desktop-nav li.active a:hover {
            background-color: #F1C40F;
            color: #333;
        }

        /* Mobile Header */
        .mobile-header {
            background-color: #F0F7FF;
            padding: 15px 0;
            border-bottom: 1px solid #e0e0e0;
            display: none;
        }

        .mobile-header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .menu-toggle {
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
        }

        .menu-toggle svg {
            width: 24px;
            height: 24px;
            fill: #333;
        }

        /* Mobile Navigation */
        .mobile-nav {
            background-color: #F0F7FF;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 6px 10px rgba(0,0,0,0.1);
            border-bottom: 1px solid #adadad;
            display: none;
        }

        .mobile-nav.active {
            display: block;
        }

        .mobile-nav ul {
            list-style: none;
            padding: 20px;
            margin: 0;
        }

        .mobile-nav li {
            border-bottom: 1px solid #e0e0e0;
            padding: 12px 0;
            margin: 0;
        }

        .mobile-nav li:last-child {
            border-bottom: none;
        }

        .mobile-nav a {
            text-decoration: none;
            color: #333;
            font-size: 16px;
            font-weight: 400;
            display: block;
            text-transform: lowercase;
        }

        .mobile-nav a:hover {
            color: #007bff;
        }

        /* Media Queries */
        @media (max-width: 1250px) {
            .desktop-nav a {
                padding: 8px 15px;
            }
        }
        @media (max-width: 991px) {
            .desktop-nav a {
                padding: 8px 10px;
            }
            .container {
                width: auto;
            }
        }
        @media (max-width: 768px) {
            .desktop-header {
                display: none;
            }

            .mobile-header {
                display: block;
                position: relative;
            }

            .container {
                padding: 0 15px;
            }

            .logo img {
                height: 32px;
            }
        }

        @media (min-width: 769px) {
            .mobile-header {
                display: none !important;
            }
        }

        /* Animation for mobile menu */
        .mobile-nav {
            animation: slideDown 0.3s ease-out;
        }

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