#container {
        margin: 0 auto;
        max-width: 890px;
      }

      nav.main-nav p {
        text-align: center;
      }
      nav.main-nav a.active-menu-item {
        color: #a0acb1 !important;
      }

      .toggle-nav-menu {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding-right: 15px;
      }
      .menu-dropdown {
        display: flex;
        justify-content: center;
      }
      .toggle-mobile-menu,
      [id^="drop"] {
        display: none;
      }
      /* Giving a background-color to the nav container. */
      .logo-main {
        box-sizing: border-box;
        height: 45px;
        width: auto;
        padding: 0 !important;
      }
      nav.main-nav a.logo-main:hover {
        background-color: transparent;
      }

      nav.main-nav {
        margin: 0;
        padding: 15px 0;
        position: sticky;
        top:0;
        z-index: 3;
        background-color: #0c1f30;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
        z-index: 100;
      }

      #logo {
        display: block;
        padding: 0 30px;
        float: left;
        font-size: 20px;
        line-height: 60px;
      }

      /* Since we'll have the "ul li" "float:left"
       * we need to add a clear after the container. */
      .phone-number {
        display: flex;
        flex-wrap: wrap;
        color: white;
        font-weight: 600;
        box-sizing: border-box;
        text-transform: uppercase;
        justify-content: right;
      }
      .phone-number p {
        display: flex;
        align-items: center;
        margin: 0;
      }
      .phone-number p a {
        background-color: transparent !important;
        height: 25px;
        padding: 0;
      }

      nav.main-nav nav:after {
        content: "";
        display: table;
        clear: both;
      }

      /* Removing padding, margin and "list-style" from the "ul",
       * and adding "position:reltive" */
      nav.main-nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        position: relative;
      }

      /* Positioning the navigation items inline */
      nav.main-nav ul li {
        margin: 0px;
        display: inline-block;
        float: left;
        background-color: #0c1f30;
      }

      /* Styling the links */
      nav.main-nav a {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        color: #fff !important;
        height: 55px;
        box-sizing: border-box;
        text-decoration: none;
      }

      nav.main-nav ul li ul li:hover {
        background: #0c1f30;
      }

      /* Background color change on Hover */
      nav.main-nav a:hover {
        color: #4c9ddc !important;
      }

      .sub-menu {
        width: 100%;
        height: 55px;
      }
      .sub-menu li a {
        height: 100%;
      }
      /* Hide Dropdowns by Default
       * and giving it a position of absolute */
      nav.main-nav ul ul {
        display: none;
        position: absolute;
        /* has to be the same number as the "line-height" of "nav a" */
        top: 55px;
      }

      /* Display Dropdowns on Hover */
      nav.main-nav ul li:hover > ul {
        display: inherit;
      }

      /* Fisrt Tier Dropdown */
      nav.main-nav ul ul li {
        width: 255px;
        float: none;
        display: list-item;
        position: relative;
      }

      .menu-dropdown {
        display: flex;
        align-items: center;
      }
      .menu-dropdown span.sub-arrow {
        align-self: baseline;
        padding: 0 0 5px 5px;
      }
      #closed {
        display: none;
      }
      #open {
        display: none;
      }
      .hide-element{
        display: none!important;
      }
      /* Media Queries
      --------------------------------------------- */

      @media all and (max-width: 991px) {
        [id^="drop"] {
          display: none;
        }
      nav.main-nav ul li:hover > ul {
        display: none;
      }
        .toggle-nav-menu {
          display: flex;
          margin-right: 30px;
        }
        .m-alignment {
          display: flex;
          flex-direction: row;
        }
        .logo-main {
          width: 80%;
        }
        .logo-main img {
          float: left;
        }
        #closed {
          display: none;
          fill: white;
        }
        #open {
          display: block;
          fill: white;
        }
        #logo {
          display: block;
          padding: 0;
          width: 100%;
          text-align: center;
          float: none;
          margin-left: 30px;
        }
        .phone-number {
          display: none;
        }
        nav.main-nav {
          margin: 0;
          padding: 10px 0;
        }

        /* Hide the navigation menu by default */
        /* Also hide the  */
        .toggle-mobile-menu + a,
        .menu {
          display: none;
        }
        .n-mobile {
          text-align: center;
        }
        /* Styling the toggle lable */
        .toggle-mobile-menu {
          display: block;
          background-color: #0c1f30;
          padding: 14px 20px;
          color: #fff;
          text-decoration: none;
          border: none;
        }

        /* .toggle-mobile-menu:hover {
          background-color: transparent;
          cursor: touch;
        } */

        /* Display Dropdown when clicked on Parent Lable */
        [id^="drop"]:checked + ul, [id^="drop"]:checked + ul.sub-menu {
          display: block!important;
        }
    
        nav.main-nav .menu a {
          justify-content: center;
          height: 55px;
          width: 100%;
        }
        /* Change menu item's width to 100% */
        nav.main-nav ul li {
          display: block;
          width: 100%;
        }

        nav.main-nav ul ul .toggle-nav-menu,
        nav.main-nav ul ul a {
          padding: 0 40px;
        }

        nav.main-nav ul ul ul a {
          padding: 0 80px;
        }
        nav.main-nav ul ul li {
          width: 100%;
        }
        nav.main-nav a:hover,
        nav.main-nav ul ul ul a {
          background-color: transparent;
        }

        nav.main-nav ul li ul li .toggle-mobile-menu,
        nav.main-nav ul ul a,
        nav.main-nav ul ul ul a {
          padding: 14px 20px;
          color: #fff;
        }

        nav.main-nav ul li ul li .toggle-mobile-menu,
        nav.main-nav ul ul a {
          background-color: #0c1f30;
        }

        /* Hide Dropdowns by Default */
        nav.main-nav ul ul {
          float: none;
          position: static;
          color: #ffffff;
          /* has to be the same number as the "line-height" of "nav a" */
        }

        /* Hide menus on hover */
        nav.main-nav ul ul li:hover > ul,
        nav .main-nav ul li:hover > ul {
          display: none;
        }

        /* Fisrt Tier Dropdown */
        nav ul ul li {
          display: block;
          width: 100%;
        }

        nav ul ul ul li {
          position: static;
          /* has to be the same number as the "width" of "nav ul ul li" */
        }

        nav.main-nav .menu-dropdown {
          display: none;
        }
      }

      @media all and (max-width: 767px) {
        #logo {
          margin-left: 15px;
        }
        .toggle-nav-menu {
          margin-right: 15px;
        }
      }

      @media all and (max-width: 330px) {
        nav.main-nav ul li {
          display: block;
          width: 100%;
        }
      }

    .animate-on-scroll {
        opacity: 0;
        transform: translateY(50px); /* Adjust this value as needed for how far you want it to start from the bottom */
        transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth transition */
    }

    .animated {
        opacity: 1;
        transform: translateY(0);
    }