body {
    margin: 0;
    font-family: Arial, sans-serif;
}

:root {
    --greyish-black: #585858;
    --mustard: #eba123;
    --demo-button: #433F3F;
    --grey-bg: #f4f4f4;
    --yellow-bg: #FEFCF4
}

.nav-container {
    width: 100%;
    border-bottom: 1px solid #eee;
}


.top-nav {
    display: flex;
    justify-content: space-between; /* Space out the logo and other items */
    align-items: center;
    font-size: 14px;
    padding: 8px 50px;
    color: var(--greyish-black);
}

.mega-menu a {
    display: block;
    padding: 6px 0;
    color: #333;
    font-size: 13px !important;
    line-height:2
}



.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 10px;
    min-width: 200px;
    background-color: #FFF;
    color: black;
   
    /* width: 100%;*/
    padding: 20px 0 0 0;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    z-index: 999;
}


.top-right {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center; /* right justify the content in the top-right */
    flex-grow: 1; /* Allow this section to take up remaining space */
}

.top-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}


.top-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}


.top-nav a {
    text-decoration: none;
    color: var(--greyish-black);
}

.top-nav a:hover {
    color: var(--mustard);
}

.top-ad {
    margin-top: 0px;
    padding: 20px 40px;
    text-align: center;
    font-size: 14px;
    color: var(--mustard) !important;
}



/* Override link styles inside .top-ad */

.top-ad a {
    color: #eba123; /* Change link color specifically inside .top-ad */
    text-decoration: none; /* Optional: you can style links differently if needed */
}

/* Hover effect for links inside .top-ad */

.top-ad a:hover {
    color: #008080; /* Change link color on hover */
}



/* ----- MEGA MENU ROWS ----- */

.menu-row {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    padding: 0 40px;
    margin-bottom: 25px; /* Added extra space between rows */
}



/* ----- BOTTOM ROW ----- */

.bottom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 60px 0px 60px !important;
    position: relative;
}



.nav-left {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-grow: 1; /* Allow left side to take up space */
}



.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-end; /* Align buttons to the right */
}



    .nav-left a,
    .nav-right a {
        text-decoration: none;
        color: var(--greyish-black);
        font-size: 16px;
    }



        .nav-left a:hover,
        .nav-right a:hover {
            color: var(--mustard);
        }



/* ----- MEGA MENU ----- */

/*.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: darkslategrey;
    width: 100%;
    padding: 20px 0 0 0;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    z-index: 999;
}
*/


.dropdown:hover .mega-menu {
    display: flex;
    flex-direction: column;
}



.menu-row {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    padding: 0 40px;
}



.menu-column {
    display: flex;
    flex-direction: column;
    min-width: 180px;
    flex-shrink: 0;
}



    .menu-column h3 {
        margin: 0 0 10px 0;
        font-size: 16px;
        line-height: 1.2;
        word-wrap: break-word;
        max-width: 180px;
    }



    .menu-column a {
        padding: 5px 0;
        text-decoration: none;
        color: var(--greyish-black);
        white-space: nowrap;
    }



        .menu-column a:hover {
            color: var(--mustard);
        }



/* ----- BOTTOM HIGHLIGHTED SECTION ----- */

.mega-menu-footer {
    margin-top: 20px;
    background-color: var(--yellow-bg);
    padding: 20px 40px;
    text-align: center;
    font-size: 18px;
    color: var(--mustard);
    width: 100%;
    box-sizing: border-box;
}



/* ----- AD AREA ----- */

.ad-area {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    width: 300px;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
}



    .ad-area img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        display: block;
        margin: 0 auto 10px;
        border-radius: 10px;
    }



    .ad-area p {
        margin: 5px 0;
        font-weight: bold;
    }



    .ad-area button {
        background-color: var(--mustard);
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 14px;
    }



        .ad-area button:hover {
            background-color: #d98f0c;
        }



/* ----- BUTTONS ----- */

.subscribe-btn {
    background-color: var(--mustard);
    color: white;
    border: none;
    padding: 2px 16px;
    border-radius: 20px;
    cursor: pointer !important;
    font-size: 15px;
}

.subscribe-btn:hover {
    background-color: #d98f0c;
}



.cta-btn {
    background-color: var(--yellow-bg);
    color: white;
    border: 0.5px solid #ddd;
    padding: 2px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
}
.cta-btn:hover {
    background-color: #f4f4f4;
}

.demo-btn {
    background-color: var(--demo-button);
    color: white;
    border: none;
    padding: 2px 16px;
    border-radius: 20px;
    cursor: pointer !important;
    font-size: 15px;
}

.demo-btn:hover {
    background-color: #eba123;
}

.sign-in {
    color: var(--mustard);
    text-decoration: none;
    font-size: 15px;
    display: flex;
    align-items: center;
}

.sign-in:hover {
    text-decoration: none;
}

/* ----- MOBILE ----- */

@media (max-width: 768px) {

    .top-nav, .bottom-nav {
        flex-direction: column;
        align-items: flex-start;
    }



    .top-right {
        flex-direction: column;
        gap: 10px;
    }



    .mega-menu {
        width: auto;
    }



    .menu-row {
        flex-direction: column;
    }



    .mega-menu-footer {
        text-align: left;
    }



    .ad-area {
        width: 100%;
    }
}

/* ----- COMPANY DROPDOWN ----- */

.dropdown-top {
    position: relative;
    text-align: right;
    display: flex;
    gap: 10px;
    align-items: right;
    justify-content: right; /* Center the content in the top-right */



    flex-grow: 10; /* Allow this section to take up remaining space */
}





/* Dropdown button styles */

.dropdown-top-btn {
    text-decoration: none;
    color: var(--greyish-black);
    font-size: 16px;
    display: inline-block;
    padding: 8px;
}



    .dropdown-top-btn:hover {
        color: var(--mustard);
    }



/* Dropdown menu hidden by default */

.dropdown-top-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 5;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    z-index: 999; /* Ensure the dropdown is above the mega menu */

    width: 200px;
    padding: 10px 0;
    min-width: 200px; /* Ensures consistent width */
}



/* Show the dropdown menu when hovering over the dropdown */

.dropdown-top:hover .dropdown-top-menu {
    display: block;
}



/* Dropdown menu link styles */

.dropdown-top-menu a {
    display: block;
    text-decoration: none;
    color: var(--greyish-black);
    padding: 8px 12px;
}

.nav-toggle {
    display: none;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
}

    .dropdown-top-menu a:hover {
        background-color: var(--mustard);
        color: white;
    }

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

    .top-center {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

    .bottom-nav {
        display: none;
        flex-direction: column;
        gap: 15px;
        border-top: 1px solid #eee;
    }

        .bottom-nav.active {
            display: flex;
        }

    .nav-left,
    .nav-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }



/* Disable hover menus */
/*.dropdown:hover .mega-menu {
        display: none;
    }

    .dropdown.open .mega-menu {
        display: block;
        position: static;
        border: none;
        padding-left: 15px;
    }
}*/


/** {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    margin: 0;
}*/

/* ===== TOP NAV ===== */
/*.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
}

.top-center a {
    margin-right: 15px;
    text-decoration: none;
    color: #eba123;
}

.cta-btn {
    background: #eba123;
    color: #000;
    padding: 6px 12px;
    border-radius: 4px;
}*/

/* ===== HAMBURGER ===== */
/*.nav-toggle {
    display: none;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
}*/

/* ===== BOTTOM NAV ===== */
/*.bottom-nav {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
}

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

    .nav-left a,
    .nav-right a {
        text-decoration: none;
        color: #333;
    }*/

/* ===== DROPDOWN ===== */
/*.dropdown {
    position: relative;
}

.dropdown-btn {
    cursor: pointer;
}

.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    min-width: 200px;
}

.dropdown:hover .mega-menu {
    display: block;
}

.mega-menu a {
    display: block;
    padding: 6px 0;
    color: #333;
}*/

/* ===== BUTTONS ===== */
/*.subscribe-btn,
.demo-btn {
    padding: 6px 12px;
    border: none;
    cursor: pointer;
}

.subscribe-btn {
    background: #000;
    color: #fff;
}

.demo-btn {
    background: #eba123;
    color: #000;
}*/

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

    .top-center {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

    .bottom-nav {
        display: none;
        flex-direction: column;
        gap: 15px;
        border-top: 1px solid #eee;
    }

        .bottom-nav.active {
            display: flex;
        }

    .nav-left,
    .nav-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }*/

    /* Disable hover menus */
    /*.dropdown:hover .mega-menu {
        display: none;
    }

    .dropdown.open .mega-menu {
        display: block;
        position: static;
        border: none;
        padding-left: 15px;
    }
}*/