@mixin links-style {
    padding-left: 12px;
    height: 85%;
    z-index: 10000;
    li {
      margin-bottom: 5px;
      padding: 5px;
      transition: all .5s;
      font-size: 12px;
      font-weight: 400;
  
      &:hover {
        background-color: #016E6E;
        color: white;
        padding: 5px;
        border-radius: 4px;
        cursor: pointer;
  
        img {
          background-color: unset;
  
        }
      }
    }
  
  
    img {
      transition: all .5s;
      background-color: #84CFD1;
      width: 18px;
      height: 18px;
      padding: 2px;
      border-radius: 5px;
      margin-left: 5px;
    }
  }
  
  @mixin section-one($background-color, $color-value) {
    .section-one {
      #{$background-color}: $color-value;
      //background-color: #721E5B;
      padding: 10px;
      border-radius: 0 20px 20px 0;
      width: 135px;
      height: inherit;
      text-align: center;
  
      //a {
      //  color: black!important;
      //}
      p {
        margin-top: 60px;
        color: white;
        font-weight: 700;
      }
    }
  }
  
  .desktop {
    background: linear-gradient(88.11deg, #092323 1.6%, #004646 98.93%);
  }
  
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
  
  }
  
  .contact-to-support-btn {
    background-color: #721E5B;
    //border: 1px solid white;
    color: white;
    font-weight: 700;
    border-radius: 8px;
    font-size: 14px;
    padding: 7px 12px;
  }
  
  .contact-to-support-btn:hover {
    background-position: 100px;
  }
  
  .contact-to-support-mob-btn {
    background-color: #FCBB11;
    color: white;
    border-radius: 8px;
    transition: background-color 500ms;
  }

.contact-to-support-mob-btn:hover {
    /* background-color: #006E6E;*/
    color: white !important;
    border: 0 !important;
    box-shadow: none;
}
  
  //.kiosk-sub-menu,
  //.products-sub-menu,
  //.software-sub-menu,
  //.solutions-sub-menu,
  //.resource-sub-menu,
  //.about-us-sub-menu,
  //.contact-us-sub-menu {
  //  display: none;
  //  padding: 23px 60px;
  //  position: absolute;
  //  top: 50px;
  //  background-color: white;
  //  z-index: 10;
  //  width: 1000px;
  //  transition: all 1s;
  //
  //  .row {
  //    align-items: center;
  //  }
  //}
  
  #menu {
    nav {
      position: relative;
    }
  
    a {
      color: white;
      font-weight: 700;
  
      i {
        font-size: 11px;
        margin-right: 5px;
        color: #FCBB11;
      }
    }
  
    .kiosk-sub-menu:hover,
    .products-sub-menu:hover,
    .software-sub-menu:hover,
    .solutions-sub-menu:hover,
    .resource-sub-menu:hover,
    .about-us-sub-menu:hover,
    .contact-us-sub-menu:hover {
      display: flex;
      opacity: 1;
    }
  
    a:nth-child(1):hover {
      + .kiosk-sub-menu {
        display: block;
        opacity: 1;
      }
    }
  
    a:nth-child(3):hover {
      + .products-sub-menu {
        display: block;
      }
    }
  
    a:nth-child(5):hover {
      + .software-sub-menu {
        display: block;
      }
    }
  
    a:nth-child(7):hover {
      + .solutions-sub-menu {
        display: block;
      }
    }
  
    a:nth-child(9):hover {
      + .resource-sub-menu {
        display: block;
      }
    }
  
    a:nth-child(11):hover {
      + .about-us-sub-menu {
        display: block;
      }
    }
  
    a:nth-child(13):hover {
      + .contact-us-sub-menu {
        display: block;
      }
    }
  
  }
  
  .mobile {
    display: none;
    z-index: 10;
  
    .offcanvas-backdrop {
      display: none;
      opacity: .5;
    }
  }
  
  .sub-menu-parent {
    position: relative;
  }
  
  .kiosk-sub-menu,
  .products-sub-menu,
  .software-sub-menu,
  .solutions-sub-menu,
  .contact-us-sub-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 40px;
    right: -145px;
    width: 740px;
    transform: translateY(-2em);
    z-index: -1;
    //transition: all 0.3s ease-in-out 0.3s, visibility 0s linear 0.3s;
    //padding: 23px 30px;
    background-color: #ffffff;
    border-radius: 20px;
    //test
    //box-shadow: -10px 25px 45px rgb(0 0 0 / 25%);
    height: 320px;
    display: flex;
  
    a {
      //font-weight: normal !important;
      font-size: 15px;
    }
  }
  
  .about-us-sub-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 40px;
    right: -40px;
    width: 400px;
    transform: translateY(-2em);
    z-index: -1;
    //transition: all 0.3s ease-in-out 0.3s, visibility 0s linear 0.3s;
    //padding: 23px 30px;
    background-color: #ffffff;
    border-radius: 20px;
   //test box-shadow: -10px 25px 45px rgb(0 0 0 / 25%);
    height: 320px;
    display: flex;
  
    a {
      //font-weight: normal !important;
      font-size: 15px;
    }
  }
  
  .resource-sub-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 40px;
    right: -40px;
    width: 400px;
    transform: translateY(-2em);
    z-index: -1;
    //transition: all 0.3s ease-in-out 0.3s, visibility 0s linear 0.3s;
    //padding: 23px 30px;
    background-color: #ffffff;
    border-radius: 20px;
    //test box-shadow: -10px 25px 45px rgb(0 0 0 / 25%);
    height: 320px;
    display: flex;
  
    a {
      //font-weight: normal !important;
      font-size: 15px;
    }
  
    @include section-one(background-color, #FCBB11);
  
    .section-two {
      border-left: 1px solid #00AFAF;
      @include links-style;
    }
  
    .section-three {
      @include links-style;
    }
  }
  
  .solutions-sub-menu {
    @include section-one(background-color, #A31D4E);
  
    .section-two {
      border-left: 1px solid #00AFAF;
      @include links-style;
    }
  
    .section-three {
      @include links-style;
    }
  
    .title {
      font-weight: 700;
      color: #A31D4E;
      padding: 5px;
      transition: all .5s;
    }
  
    .title:hover {
      background-color: #A31D4E;
      border-radius: 4px;
      padding: 5px;
      color: #ffffff;
    }
  
  }
  
  .products-sub-menu {
    @include section-one(background-color, #721E5B);
  
    .section-two {
      border-left: 1px solid #00AFAF;
      @include links-style;
    }
  
    .section-three {
      @include links-style;
    }
  
    .title {
      font-weight: 700;
      color: #721E5B!important;
      padding: 5px;
      transition: all .5s;
    }
  
    .title:hover {
      background-color: #721E5B;
      border-radius: 4px;
      padding: 5px;
      color: #ffffff!important;
    }
  }
  
  .about-us-sub-menu {
    @include section-one(background-color, #016E6E);
  
    .section-two {
      border-left: 1px solid #00AFAF;
      @include links-style;
    }
  
    .section-three {
      @include links-style;
    }
  
  }
  
  .dropdown-1:hover {
    .kiosk-sub-menu {
      visibility: visible;
      opacity: 1;
      z-index: 10000;
      transform: translateY(0%);
      transition-delay: 0s, 0s, 0.1s;
    }
  }
  
  .dropdown-2:hover {
    .products-sub-menu {
      visibility: visible;
      opacity: 1;
      z-index: 10000;
      transform: translateY(0%);
      transition-delay: 0s, 0s, 0.1s;
    }
  }
  
  //.dropdown-3:hover {
  //  .software-sub-menu {
  //    visibility: visible;
  //    opacity: 1;
  //    z-index: 10000;
  //    transform: translateY(0%);
  //    transition-delay: 0s, 0s, 0.1s;
  //  }
  //}
  
  .dropdown-4:hover {
    .solutions-sub-menu {
      visibility: visible;
      opacity: 1;
      z-index: 10000;
      //transition: all 0.3s ease-in-out 0.3s, visibility 0s linear 0.3s;
      transform: translateY(0%);
      transition-delay: 0s, 0s, 0.3s;
  
    }
  }
  
  .dropdown-6:hover {
    .resource-sub-menu {
      visibility: visible;
      opacity: 1;
      z-index: 10000;
      transform: translateY(0%);
      transition-delay: 0s, 0s, 0.1s;
    }
  }
  
  .dropdown-3:hover {
    .about-us-sub-menu {
      visibility: visible;
      opacity: 1;
      z-index: 10000;
      transform: translateY(0%);
      transition-delay: 0s, 0s, 0.1s;
    }
  }
  
  .dropdown-7:hover {
    .contact-us-sub-menu {
      visibility: visible;
      opacity: 1;
      z-index: 10000;
      transform: translateY(0%);
      transition-delay: 0s, 0s, 0.1s;
    }
  }
  
  .sub-menu-parent:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    z-index: 10000;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
  }
  
  body {
    padding: 2%;
    font: 18px/1.4 sans-serif;
  }
  
  nav a {
    color: black;
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;
  }
  
  
  nav ul,
  nav ul li {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  
  nav > ul > li {
    display: inline-block;
    border-left: solid 1px #aaa;
  }
  
  nav > ul > li:first-child {
    border-left: none;
  }
  
  
  .overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999999;
    right: 0;
    top: 0;
    background-color: #EEEEEE;
    overflow-x: hidden;
    transition:  0.5s;
  }
  
  .menu-header {
    padding: 16px 10px;
    display: flex;
    justify-content: space-between;
    background-color: #EEEEEE;
    align-items: center;
  
    P:first-child {
      font-size: 16px;
      color: black;
      font-weight: 700;
    }
  
  }
  
  .overlay-content {
    width: 100%;
    text-align: center;
  
    .accordion-button {
      font-weight: 700;
    }
  
    .accordion-body {
      background-color: #F2F2F2;
      padding: 0;
  
      a {
        text-decoration: none;
        color: black;
        display: block;
        text-align: right;
        border-bottom: 1px solid #6b6b6b5c;
        padding: 9px 28px;
      }
    }
  }
  
  .select-lang-btn {
    //background: linear-gradient(#00AFAF, #006E6E);
    //padding: 10px 20px;
    //color: white !important;
    //border-radius: 7px;
    //border: 1px solid white;
  }
  
  /* The navigation links inside the overlay */
  //.overlay a {
  //  padding: 8px;
  //  text-decoration: none;
  //  font-size: 36px;
  //  color: #818181;
  //  display: block; /* Display block instead of inline */
  //  transition: 0.3s; /* Transition effects on hover (color) */
  //}
  
  /* When you mouse over the navigation links, change their color */
  .overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
  }
  
  /* Position the close button (top right corner) */
  .overlay .closebtn {
    //position: absolute;
    //top: 20px;
    //left: 45px;
    font-size: 30px;
    color: black;
    text-decoration: none;
  }
  
  .overlay .first {
    position: absolute;
    top: 10px;
    right: 45px;
    font-size: 60px;
    color: white;
  }
  
  .nav-link {
    cursor: pointer;
  }
  
  #dropdownMenuButton1:after {
    display: none;
  }
  
  @media screen and (max-width: 1100px) {
    .mobile {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        background: linear-gradient(88.11deg, #092323 1.6%, #004646 98.93%);

        .fa-bars {
            color: #FCBB11;
        }

        .accordion-button {
            color: white;
            font-size: 14px;
            font-weight: 700;
        }

        #accordionProductsServices, #accordionSolutions, #flush-collapseSolutions, #flush-collapseResources {
            .accordion-button {
                color: black;
                font-size: 13px;
                font-weight: 700;
                background-color: #F2F2F2;
            }

            .accordion-button:not(.collapsed) {
                background-color: unset;
                box-shadow: none;
            }

            .accordion-button:focus {
                border-color: transparent;
                box-shadow: none;
            }

            .accordion-body {
                a {
                    padding: 9px 16px;
                    border-bottom: none;
                    font-size: 12px;
                    font-weight: 300;
                }

                img {
                    background-color: #84CFD1;
                    width: 25px;
                    height: 25px;
                    padding: 2px;
                    border-radius: 5px;
                    margin-left: 5px;
                }
            }
        }

        .accordion-button::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23191919'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }

        .accordion-body {
            img {
                width: 18px;
                height: 18px;
            }
        }
    }
    .desktop {
      display: none;
    }
  }

  #accordionFlushExample .accordion-button-header{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #accordionFlushExample .accordion-button-header::after{
   background-image:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23191919'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  }
  //style swiper
  /*  .swiper {
    width: 100%;
    height: 100%;
  }
 */
 /*  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

  
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
 */
 /*  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }  */

  .solutions-sub-menu .section-two li a{
    color: #212529 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: unset !important;
  
  }
  .solutions-sub-menu .section-two li a:hover{
    color: white !important;
  }
.overlay-content .accordion-body a:hover {
    @include for-size(phone-only) {
        border-bottom: 0 !important;
    }

    text-decoration: none;
    color: black !important;
    display: block;
    text-align: right;
    border-bottom: 1px solid #6b6b6b5c;
    /* padding: 9px 28px;*/
}
.overlay-content .accordion-body a {
    @include for-size(phone-only) {
        border-bottom: 0 !important;
    }

    text-decoration: none;
    color: black;
    display: block;
    text-align: right;
    border-bottom: 1px solid #6b6b6b5c;
    padding: 0;
    /* background-color: #F2F2F2; */
}
.contactBtn:focus{
    box-shadow:none !important;

}
.contactBtn:hover{
    color:#fff !important;

}
.products-sub-menu .section-two li a {
    color: #212529 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: unset !important;
}
.products-sub-menu .section-two li a:hover{
    color:#fff;
}
.solutions-sub-menu .title:hover {
    
    color: #fff !important;
   
}
.title-menu-home {
    display: flex;
    align-items: flex-start;
    padding-right: 15px;
    position: relative;
    top: 5px;

    p {
        color: #191919 !important;
        font-size: 16px !important;
        font-weight: 700;
        position: relative;
        right: 10px;
        top: 2px;
    }
}
.accardion-header-top .accordion-item{
    background-color:#fff !important;
}