nav
{
    display: flex;
    padding: 1% 6%;
    justify-content: space-between;
    align-items: center;
}

nav img
{
    width: 35%;
}

.top-headerDiv
{
    position: fixed;
    min-height: 4vh;
    width: 100%;
    border: 0px solid;
    z-index: 20;
    background: beige;
}
.top-headerDiv h4
{
    font-size: 2vh;
}

.headerDiv {
    --text: #f4f4f4;
    --text-inverse: #000000;
    --background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transition: background 250ms ease-in;
    background: var(--background);
    color: var(--text);
    /* top: 4vh;   --------for Header top--------- */
  }

  .headerTextAnime 
  {
    animation: 1s anim-lineUp ease-out 1;
    flex-basis: 20%;
  }
  @keyframes anim-lineUp {
    0% {
      opacity: 0;
      transform: translateY(-80%);
    }
    20% {
      opacity: 0;
    }
    50% {
      opacity: 1;
      transform: translateY(-0%);
    }
    100% {
      opacity: 1;
      transform: translateY(-0%);
    }
  }

  .nav-links
{
    /* flex: 1; */
    text-align: right;
    flex-basis: 80%;
}
.nav-links ul li
{
    list-style: none;
    display: inline-block;
    padding: 1% 1.4%;
    position: relative;
    width: fit-content;
}
.nav-links ul li a
{
    color: inherit;
    /* color: #fff; */
    text-decoration: none;
    font-size: 1.7vw;
}
.nav-links ul li::after
{
    content: '';
    width: 0%;
    height: 2px;
    background: #ff6600;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.nav-links ul li:hover::after
{
    width: 100%;
}
.nav-scrolled {
    --text: #000000;
    --text-inverse: #f4f4f4;
    --background: #ffffff;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
  }
  .nav-scrolledicon {
    --naviconcolor : #000 !important;
   
  }
  nav .fa
  {
      display: none;
  }
  #animatesliderNav
    {
        position: absolute;
    }
  
  @media(max-width: 780px) 
  {
    .nav-links ul li a
    {
        color: #fff;
        font-size: 2.5vw;
    }
    #animatesliderNav
    {
        position: fixed !important;
        height: 100vh;
          width: 100%;
          top: 0;
          right: -100%;
          transition: 1s;
          z-index: 50;

    }
          .text-box h1
      {
          font-size: 1.25rem;
      }
          .nav-links ul li
      {
          display: block;
      }
          .nav-links
      {
          position: fixed;
          /* background: hwb(228deg 2% 88% / 70%); */
          background: hwb(228deg 2% 88%);
          height: 100%;
          width: 100%;
          top: 0;
          right: -100%;
          text-align: left;
          z-index: 100;
          transition: 1s;
      }  
          nav .fa
      {
          /* display: block; */
          
          color: var(--naviconcolor);
          /* color: #fff; */
          margin: 1%;
          font-size: 5vw;
          cursor: pointer;
          --naviconcolor : #fff;
      }
          .nav-links ul
          {
              padding: 6%;
          } 
          nav img
            {
                width: 60%;
            }
  }
  @media(max-width: 780px) 
  {
    nav .fa
    {
        display: block;
        width: 7%;
    } 
      
  }
  
  /* ------------------ DropDown ---------------------------- */


nav div ul li:hover > ul.dropdown-menu
{
    display: block;
    /* display: grid; */

}


@media (min-width: 780px)
{
    nav div ul li:hover > ul.dropdown-menu
{
    /* display: block; */
    display: grid !important;

}
   
}
.dropdown-submenu
{
    position: relative;
}
.dropdown-submenu > .dropdown-menu
{
    top: 0;
    margin-top: -0.5rem;
    /* left: 100%; */
    right: 100%;
}
.dropdown-menu > li > a:hover::after
{
    text-decoration: underline;
    transform: rotate(-90deg);
}





.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.55);
}

@media (min-width: 992px)
{
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
}
.navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
}
.nav-link {
    display: block;
    /* padding: 0.5rem 1rem; */
    color: #0d6efd;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
.dropdown-toggle {
    white-space: nowrap;
}
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}
@media (min-width: 992px)
{
.navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
}
}
.navbar-nav .dropdown-menu {
    position: static;
}
.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 9.5rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #eee;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
}
@media (max-width: 780px)
{
    nav li:hover > ul.dropdown-menu {
        display: block;
    }
    nav li:hover > ul.dropdown-menu {
        display: contents !important; 
    }

    
}

/* ------------------ DropDown End ---------------------------- */

@media screen and (min-width: 1026px){
    nav img {
        width: 30%;
    }
    .nav-links ul li a
{
    color: inherit;
    font-size: 1.2vw;
}
#progress
{
    height: 5vw !important;
    width: 5vw !important;
}
#progress-value
{
    height: calc(100% - 15%) !important;
    width: calc(100% - 15%) !important;
    font-size: 2.8vw !important;
}
    
}

@media screen and (max-width: 1025px){
    nav img {
        width: 42%;
    }
    #progress
    {
        height: 6vw !important;
        width: 6vw !important;
    }
    #progress-value
    {
        height: calc(100% - 15%) !important;
        width: calc(100% - 15%) !important;
        font-size: 3.8vw !important;
    }
}
  
@media screen and (max-width: 769px){
    nav img {
        width: 50%;
    }
    #progress
    {
        height: 8vw !important;
        width: 8vw !important;
    }
    #progress-value
    {
        height: calc(100% - 15%) !important;
        width: calc(100% - 15%) !important;
        font-size: 4.3vw !important;
    }
    
}
  
  
@media screen and (max-width: 481px){
    nav img {
        width: 80%;
    }
    #progress
    {
        height: 10vw !important;
        width: 10vw !important;
    }
    #progress-value
    {
        height: calc(100% - 20%) !important;
        width: calc(100% - 20%) !important;
        font-size: 5.8vw !important;
    }
}
  
  
@media screen and (max-width: 320px){
    nav img {
        width: 80%;
    }
    #progress
{
    height: 12vw !important;
    width: 12vw !important;
}
#progress-value
{
    height: calc(100% - 15%) !important;
    width: calc(100% - 15%) !important;
    font-size: 6.8vw !important;
}
   
}
 /*----------- Scroll up -------------- */

#progress
{
    /* background-color: #ff007e; */
    z-index: 11;
    position: fixed;
    bottom: 2.5%;
    right: 2.5%;
    height: 8vw;
    width: 8vw;
    display: none;
    place-items: center;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    cursor: pointer;
}
#progress-value
{
    display: block;
    height: calc(100% - 15%);
    width: calc(100% - 15%);
    background-color: #ffffff;
    border-radius: 50%;
    place-items: center;
    display: grid;
    font-size: 4.3vw;
    color: #001a2e;

}
html
{
    scroll-behavior: smooth;
}
.mainHomeIntroContainer
{
  margin-top: -45vh;
  height: 45vh;
}
.mainHomeIntroContainer .home-intro 
{
  padding: 40vh 0vh;
}
.mainHomeIntroContainer
{
  margin-top: -90vh;
  height: 90vh;
}
.mainHomeIntroContainer .home-intro 
{
  padding: 20vh 0vh;
}
.mainHomeIntroContainer
{
  margin-top: -85vh;
  height: 85vh;

}
.mainHomeIntroContainer .home-intro 
{
  width: 100%;
  text-align: center;
  padding: 27vh 0vh;
  height: 100%;
}
main .home-intro {
  width: 100%;
  text-align: center;
  padding: 2% 0%;
}
.sub-header
{
    padding: 1px;  /*----- for navigation ----- */
}
.sub-header
{
    height: 50vh;
    width: 100%;
    /* background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/mock_1.jpg); */
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1
{
    margin-top: 20vh;
}