/* TOEI BACKGROUND COLOR --------------- */
.bg-toei-nav {
    background-image: linear-gradient(to right, #173a55 0%, #2c4a63 100%);
}
.bg-toei-nav a {
    color: #fff;
}
.bg-toei-nav a:hover {
    color: #e0e0e0;
}



/* BOOTSTRAP NAVBAR CUSTOM --------------- */
.nav-item {
padding-right: 2em;
xfont-size: 90%;
}
.dropdown a {
    xdisplay: inline;
    xbackground-color: red;
    border-bottom: 0px;
}

.nav-item {
    transition: 0.3s;
}

.dropdown > a {
    color: #fff;
}
.dropdown-menu {
    xdisplay: block !important;
    border-radius: 0 !important;
    background-color: blueviolet;
    padding: 0 !important;
}
.dropdown-menu li {
    xbackground-color: aquamarine;
    xpadding: 1em;
}
.dropdown-menu li:first-child {
    xborder-top: 6px solid #9cc1df;
    border-top: 6px solid #429ae2;
}
.dropdown-menu li a {
    xbackground-color: ghostwhite;
    xbackground-color: #f7f7f7;
    background-color: #429ae2;
    xcolor: #000;
    color: #fff;
    font-size: 90%;
    padding: 0.7em 1em;
    transition: 0.3s;
}
.dropdown-menu li a:hover {
    background-color: #3174ac;
    color: #fff;
    xpadding: 1em;
}

nav li i {font-size: 150%;}


/*  CUSTOM DROPDOWN ----------------------------------*/
.custom-dropdown .dropdown-toggle::after {
    font-family: "Font Awesome 5 Free";
    xcontent: "\f078"; /* 」 */
    font-weight: 900; /* Adjust the font weight if needed */
    border-top: 0;
    vertical-align: middle;
    font-size: 80%;
  }


/* HANBURGER MENU CUSTOM ----------------------*/

.custom-toggler.navbar-toggler {
    border-color: lightgreen;
    border: none;
    background-color: transparent;
}
.navbar-toggler {
    border-color: rgba(0, 0, 0, 0);
}
.navbar-toggler:focus {
    box-shadow: none !important;
}



@media screen and (max-width: 980px) {
    .nav-item {
        padding-right: 0em;
    }
    .dropdown a {
        xdisplay: inline;
        xbackground-color: red;
        xborder-bottom: 1px solid rgb(141, 141, 141);
    }

    .dropdown-menu li:first-child {
        xborder-top: 6px solid #9cc1df;
        border-top: 0px solid #429ae2;
    }


    .custom-dropdown .dropdown-toggle::after {
        font-family: "Font Awesome 5 Free";
        content: "\2b";
        font-weight: 300; /* Adjust the font weight if needed */
        border-top: 0;
        vertical-align: middle;
        font-size: 100%;
        float: right;
        margin-right: 10px;
      }

    
    
}



/* FOOTER */
footer {background-image: linear-gradient(to right, #173a55 0%, #2c4a63 100%); }
footer ul { padding: 0; margin: 0;}
footer li {color: #fff; padding: 0.5rem 1.5rem; list-style: none;  list-style-position: outside;}
footer a {color: #cecece; text-decoration: none;}
footer a:hover {color: #fff;}


/*  ANIMATION FOR DTOPDOWN  */

@media (min-width: 768px) {
    .animate {
      animation-duration: 0.3s;
      -webkit-animation-duration: 0.3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both;
    }
  }
  
  @keyframes slideIn {
    0% {
      transform: translateY(0.5rem);
      opacity: 0;
    }
  
    100% {
      transform: translateY(0rem);
      opacity: 1;
    }
  
    0% {
      transform: translateY(0.5rem);
      opacity: 0;
    }
  }
  
  @-webkit-keyframes slideIn {
    0% {
      -webkit-transform: transform;
      -webkit-opacity: 0;
    }
  
    100% {
      -webkit-transform: translateY(0);
      -webkit-opacity: 1;
    }
  
    0% {
      -webkit-transform: translateY(1rem);
      -webkit-opacity: 0;
    }
  }
  
  .slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
  }