/* ------------start css navBar ------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   }

a {
    text-decoration: none;
   }
.navbar{  
     font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background-color: rgb(238, 234, 234);
     top: 0;
     width: 100%;
     position: fixed;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 5px;
     z-index: 20;
 }

 .nav-links{
    margin-right: 5%;
    margin-bottom: 0%;
   }
   .nav-links a,
   .application-software,
   .not-active {
       color: var(--first-color); /* Default color */
       text-decoration: none;
       font-weight: 600; /* Default font weight */
   }
   
.menu {
    display: flex;
    gap: 1em;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   }
   
.menu li {
padding: 5px 14px;
list-style: none;
}

.application-software {
    position: relative; 
}

/* Set initial state of dropdown */
.dropdown {
    padding: 1em 0;
    position: absolute; 
    opacity: 0; /* Fully transparent initially */
    visibility: hidden; /* Hidden initially */
    border-radius: 8px;
    top: 40px;
    transform: translateY(-10px); /* Slightly shift up initially */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s ease 0.4s; /* Transition with delay */
    background-color: rgb(238, 234, 234);
    font-size: 15px;
}

/* Dropdown item spacing */
.dropdown li + li {
    margin-top: 10px;
}

.dropdown li {
    padding: 0.5em 1em;
    width: 250px; /* Fixed width */
    text-align: center;
}
.menu li:hover {
    border-radius: 5px;
    transition: 0.3s ease;
    cursor: pointer;
   }


.menu li a:hover{
     color: rgba(155, 216, 22, 0.893);   
 }
 
 .user-interface:hover{
     color: rgba(155, 216, 22, 0.893);
     font-weight:900; /* Make the text bold on hover */
 
 }

 
 .dropdown li:hover {
     color: var(--main--color);
     background-color: white;
     font-weight:900; /* Make the text bold on hover */
 
    }

    .active-nav{
        color: var(--main--color); /* Change color when active */
        font-weight: 600; /* Keep the text normal weight when active */
    }
    
.menu-option.active-nav{
    color: var(--main--color); /* Change color when active */
    font-weight: 600; /* Keep the text normal weight when active */
}


/* Active menu item styling (excluding dropdown items) */


/* Active link styling */
.nav-links .active-nav {
    color: var(--main--color);
}

.menu-option.active-nav > a {
    color: var(--main--color); /* Change color when active */
    font-weight: 600; /* Keep the text normal weight when active */
}
/* Ensure dropdown items are not affected by the active-nav class */
.menu-option.active-nav .dropdown a {
    color: var(--first-color); /* Keep dropdown items unchanged */
}

/* Show dropdown with smooth transition on hover or when active */
.application-software:hover .dropdown,
.application-software.active-nav .dropdown {
    opacity: 1; /* Make the dropdown fully opaque */
    visibility: visible; /* Make the dropdown visible */
    transform: translateY(0); /* Move to original position */
    transition: opacity 0.4s ease, transform 0.4s ease; /* Smooth transition without delay */
}

/* Hide dropdown with delay when not hovered and not active */
.application-software:not(:hover):not(.active-nav) .dropdown {
    visibility: hidden; /* Hide the dropdown */
    opacity: 0; /* Make the dropdown fully transparent */
    transform: translateY(-10px); /* Move up initially */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s ease 0.4s; /* Add delay for hiding */
}

   
/*RESPONSIVE NAVBAR MENU STARTS*/
/* CHECKBOX HACK */
input[type=checkbox]{
    display: none;
   } 
   /*HAMBURGER MENU*/
.hamburger {
    display: none;
    font-size: 24px;
    user-select: none;
   }
.logo{
    margin-left: 5%; 
  }   
  /* ------------end css navBar ------------- */

/* ------------start css media query navBar ------------- */

   
   /* APPLYING MEDIA QUERIES */
@media (max-width: 1250px) {
       .menu { 
        display:none;
        position: absolute;
        background-color: rgb(238, 234, 234);
        right: 0;
        left: 0;
        text-align: center;
        padding: 16px 0;
        width: 25%;
       }
       
       .menu li:hover {
        display: inline-block;
        transition: 0.3s ease;
       }
       
       .menu li + li {
        margin-top: 12px;
       }
     
       .menu li .dropdown::before{
           content: '';
           border-style: solid;
           border-width: 10px;
           border-color: transparent transparent transparent red;
           height: 0;
           width: 0;
           position: absolute;
           right: -20px;
           top: 0;
           transform: translateY(-10%);
       }
   
       input[type=checkbox]:checked ~ .menu{
        display: block;
   
       }
       .hamburger {
        display: block;
        cursor: pointer;
   
       }
       .dropdown {
        right:100%;
        top: 20px;
        transform: translateX(-5%);
       }
    
       .menu .dropdown{ 
              background-color: rgb(238, 234, 234);
                font-size: 15px;
   
    }
       }

@media (max-width: 768px) {
        .navbar{
            background-color: rgb(238, 234, 234);
        }
        .menu .dropdown{
            right:100%;
            top: 20px;
            transform: translateX(3%);      
        }
    .navbar .logo img{ 
            width: 50px;
    margin-bottom: 5px;
           }
    .navbar{
        height: 60px;
            max-height: 75px;
           }
 
    } 
    
@media (max-width: 600px) {
    .menu { 
        display:none;
        position: absolute;
      
        background-color: rgb(238, 234, 234);
        right: 0;
        left: 0;
        text-align: center;
        padding: 16px 0;
        width: 50%;
       }
        .menu li{
            font-size: 15px;
        }
        .menu .dropdown li{
            font-size: 15px;
        }
        .nav-links{
            margin-bottom: 1 rem;
         }
    }       
    
@media (max-width: 450px) {

    .menu li{
            font-size: 15px;
        }
    .menu .dropdown li{
            font-size: 15px;
        }
    .dropdown li{
            width: 150px;
        }
    .nav-links{
           margin-bottom: 1 rem;
        }
    
    }       
/* ------------start css media query navBar ------------- */