/*MENU*/
.topNav {
    overflow: hidden;
    background-color: #a216a2;
}

@media screen and (min-width: 600px) and (max-width: 1300px) {
    .topNav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: 54px;
        grid-gap: 5px;
    }


}

@media screen and (min-width: 1200px) {
    .topNav {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-auto-rows: 54px;
        grid-gap: 5px;
    }
}


@media screen and (min-width: 600px) {
    #myTopNav a {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    #myTopNav .navDropdown a{
        justify-content: start;
    }

    .dropBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .topNav .be-icon {
        display: none !important;
    }

    .navDropdown .dropBtn{
        padding: 0;
        height: 100%;
    }

    .dropdownContent a{
        padding: 12px 16px !important;
    }
    
}
  
.topNav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s; /* Adding transition for smooth effect */
}
  
.topNav a:hover {
    background-color: #be15be; /* Changing background color on hover */
}

.topNav .be-icon {
    display: none;
}

.navDropdown {
    float: left;
    overflow: hidden;
}
  
.navDropdown .dropBtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    transition: background-color 0.3s; /* Adding transition for smooth effect */
    width: 100%;
}
  
.navDropdown .dropBtn:hover {
    background-color: #be15be; /* Changing background color on hover */
}

.dropdownContent {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
}

.navDropdown.be-active .dropdownContent {
    display: block;
}
  
.dropdownContent a {
    float: none;
    color: black !important;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    transition: background-color 0.3s; /* Adding transition for smooth effect */
}
  
.dropdownContent a:hover {
    background-color: #be15be; /* Changing background color on hover */
}

@media screen and (max-width: 600px) {
    .topNav a:not(:first-child), .navDropdown .dropBtn {
      display: none;
    }
    .topNav a.be-icon {
      float: right;
      display: block;
    }
}

@media screen and (max-width: 600px) {
    .topNav.be-responsive {position: relative;}
    .topNav.be-responsive .be-icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topNav.be-responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topNav.be-responsive .navDropdown {float: none;}
    .topNav.be-responsive .dropdownContent {position: relative;}
    .topNav.be-responsive .navDropdown .dropBtn {
      display: block;
      width: 100%;
      text-align: left;
    }
}
/*MENU*/