html
  font-size: 10px

.dropdownMainContainer
  visibility: hidden

.mainContainer
  border-bottom: 2px solid #282828
  padding-bottom: 1rem
  font-family: 'Montserrat', sans-serif
  margin-top: 3rem

  ul
    display: flex
    justify-content: space-between

.contextMenuParfume
  display: block

.dropdownTitle
  a
    font-size: 1.5rem
    font-family: 'Montserrat', sans-serif
    text-decoration: none
    color: #333
    z-index: 1000

    &:hover
      color: #792c9b

  .dropdownMainContainer
    position: absolute
    width: 100%
    margin-top: 1.5rem
    padding-bottom: 6rem
    left: 0
    opacity: 0
    display: flex
    flex-direction: column
    align-items: center
    visibility: hidden
    transition-property: opacity, visibility
    transition-duration: 0.2s
    transition-delay: 0.2s
    font-size: 1.3rem
    box-shadow: 0 0 10px rgba(0,0,0,0.15)
    background: #f9f9f9
    z-index: 1000

    a
      text-decoration: none
      color: black

      &:hover
        color: #792c9b

    .dropdown
      display: flex
      justify-content: space-between
      margin-top: 4rem
      width: 85%

      ul
        display: flex
        flex-direction: column
        justify-content: flex-start

        li
          margin-top: 1rem

          &:first-child
            margin-top: 0
            font-weight: 600
            font-size: 1.5rem

    .brands
      display: flex
      align-items: center
      margin-top: 5rem
      width: 85%

      img
        width: 8rem

  &:hover
    color: red

    .dropdownMainContainer
      opacity: 1
      visibility: visible


.brandsDropdownTitle
  font-size: 1.5rem
  font-family: 'Montserrat', sans-serif
  text-decoration: none
  color: #333
  cursor: pointer

  &:hover
    color: #792c9b

    .brandsDropdown
      opacity: 1
      visibility: visible


      li
        margin-top: 1rem
        text-transform: uppercase

  a
    font-size: 1.5rem
    font-family: 'Montserrat', sans-serif
    text-decoration: none
    color: #333

    &:hover
      color: #792c9b

  .brandsDropdown
    display: block
    position: absolute
    left: 0
    width: 100%
    margin-top: 1.5rem
    text-align: center
    height: 40rem
    overflow: auto
    opacity: 0
    visibility: hidden
    transition-property: opacity, visibility
    transition-duration: 0.2s
    transition-delay: 0.2s
    box-shadow: 0 0 10px rgba(0,0,0,0.15)
    background: #f9f9f9
    z-index: 1000

    li
      margin-top: 1rem
      text-transform: uppercase