* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
  }

  :root{
    --fixd-left:50px;
    /* _______________________________________ main color */
    --first-skin-high-trans:rgba(34, 50, 119, 0.637);

    --text-heighligh-color:rgb(94, 204, 255);

    --text-black-color:#0b0b0c;;
    --text-white-color:aliceblue;

    --bg-dark-blue:#1a2730;
    --bg-darklight-blue:#022b38;

    --dim-text-color: rgba(240, 248, 255, 0.486);
    --light-text-color: aliceblue;
  }


  body{
    background-color: var(--text-white-color);
    padding-top: 90px;
  }


  #fixtNavbar{
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 0;
  }

  .header_bar{
    z-index: 1000;
    position: fixed ;
    width: 100%;
    background-color: white;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    /* position:relative; */
    padding-top: 5px;
    padding-bottom: 5px;
  }





  /* ==================================== nav menu bar start */


  .nav_menu_bar{
    transition: all .3s ease-in-out;
    max-width: 1200px;
    width: 100%;
    margin: auto;
    display: flex;
  }
  
  .nav_menu_bar header{
    display: flex;
    margin-top: auto;
    margin-bottom: auto;
    align-items: end;
    justify-content: end;
  }
  .nav_menu_bar ul {
    list-style: none;

  }

  .nav_menu_bar a {
    text-decoration: none;
  }

  .nav_menu_bar  .logo_section{
    border-radius: 5px;
  }
  .nav_menu_bar  .logo_section img{
    max-width: 120px;
    height: auto;
  }
  .nav_menu_bar header {
    position: sticky;
    top: 0px;
    width: 100%;
    z-index: 1000;
  }

  .nav_menu_bar .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;

    }

    .nav_menu_bar .header_bar_container {
      padding: 0 !important;
      display: flex;
      position: relative;
      margin-top: auto;
      margin-bottom: auto;
    }
    
    .nav_menu_bar .logo-container {
      flex: 1;
      display: flex;
      align-items: center;
    }
    
    .nav_menu_bar .nav-buttons {
      padding: 0 !important;
      flex: 3;
      display: flex;
    }

    .nav_menu_bar  .navbar-links {
      flex: 2;
    }

    .nav_menu_bar .log-sign {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
    }

    .nav_menu_bar .logo {
      font-size: 1.1rem;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      line-height: 3rem;
    }

    .nav_menu_bar  .btn.transparent,
    .nav_menu_bar .btn.solid:hover {
      background-color: transparent;
    }

    .nav_menu_bar .navbar-links > ul {
      display: flex;
      justify-content: end;
      align-items: end;
      padding: 0 !important;
    }

    .nav_menu_bar  .nav-link {
      position: relative;
      padding: 5px;
    }
    .nav_menu_bar  .nav-link .mov_menu_icon{
      display: none;
    }
    
    .nav_menu_bar  .nav-link > a {
      /* line-height: 2.5rem; */
      padding-top: 0rem;
      padding-left: 0.8rem;
      padding-right: 0.8rem;
      /* letter-spacing: 1px; */
      /* font-size: 0.8dvw; */
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: 0.5s;
      font-weight: 600;

      /* background: linear-gradient(to right, var(--active-primary-color), var(--primary-color));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent; */

      color: black;
      margin-right: 5px;
      margin-left: 0.2rem;
    }

    .nav_menu_bar .nav-link:hover > a {
      transform: scale(1.1);
      background: linear-gradient(to right, rgb(12, 74, 110), rgb(229, 4, 5));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
    .nav_menu_bar  .nav-link > a i{
      margin-right: 5px;
    }
    
    .nav_menu_bar  .pro_bg{
background: #c2ae00;
background: linear-gradient(90deg,rgba(194, 174, 0, 1) 0%, rgba(212, 194, 2, 1) 51%, rgba(194, 175, 4, 1) 100%);
      border-radius: 3px;
      margin-right: 10px;
    }
    .nav_menu_bar  .nav-link> .pro{
      background: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
    .nav_menu_bar  .nav-link > .pro i{
      color: white;
    }
     .nav_menu_bar  .nav-link> .pro:hover{
      background: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
     }

    .nav_menu_bar .dropdown {
        background-color: var(--primary-color);
        padding: 10px;
        position: absolute;
        display: flex;
        top: 100%;
        left: 0;
        width:auto;
        transform: translateY(10px);
        opacity: 0;
        pointer-events: none;
        transition: 0.5s;
    }
    .nav_menu_bar .dropdown h3{
        position: absolute;
        top:10px;
        left: 9rem;
        color: aliceblue;
    }
    .nav_menu_bar .dropdown .item_img{
      height: calc(100%)+50px;
      width: 7rem;
      background-color: var(--text-white-color);
      display: flex;
    }
    .nav_menu_bar .dropdown .item_img img{
      margin-top: auto;
      margin-bottom: auto;
      margin-left: 15px;
      height: 50px;
      width: 80px;
      border-radius: 5px;
    }

    .nav_menu_bar .dropdown ul {
        padding-top: 30px;
        padding-left: 10px;
        height: 100%;
        width: 15rem;
        position: relative;
    }

    .nav_menu_bar .nav-link .active-nav {
      font-weight: 700 !important;
      background: linear-gradient(to right, var(--primary-color),rgb(229, 4, 5));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent
    }

    .nav_menu_bar .dropdown-link > a {
      display: flex;
      padding: 0.5rem 1rem;
      align-items: center;
      justify-content: space-between;
      transition: 0.3s;
    }

    .nav_menu_bar .dropdown-link:hover > a {
      color: var(--text-heighligh-color);
    }

    .nav_menu_bar .dropdown-link:not(:nth-last-child(1)),
    .nav_menu_bar .dropdown-link:not(:nth-last-child(2)),
    .nav_menu_bar .dropdown-link:not(:nth-last-child(3)),
    .nav_menu_bar .dropdown-link:not(:nth-last-child(4)),
    .nav_menu_bar .dropdown-link:not(:nth-last-child(5)){
      border-bottom: 1px solid var(--text-heighligh-color);
    }

    .nav_menu_bar .dropdown-link i {
      transform: rotate(-90deg);
    }

    .nav_menu_bar .arrow {
      position: absolute;
      width: 11px;
      height: 11px;
      top: -5.5px;
      left: 32px;
      background-color: var(--primary-color);
      transform: rotate(45deg);
      cursor: pointer;
      transition: 0.3s;
      z-index: -1;
    }

    .nav_menu_bar .dropdown-link:first-child:hover ~ .arrow {
      background-color: rgb(32, 189, 155);
    }

    .nav_menu_bar .dropdown-link {
      position: relative;
    }

    .nav_menu_bar  .dropdown.second {
      top: 0;
      left: 100%;
      padding-left: 0.8rem;
      cursor: pointer;
      transform: translateX(10px);
    }

    .nav_menu_bar  .dropdown.second .arrow {
      top: 10px;
      left: -5.5px;
    }

    .nav_menu_bar .nav-link:hover > .dropdown,
    .nav_menu_bar  .dropdown-link:hover > .dropdown {
      transform: translate(0, 0);
      opacity: 1;
      pointer-events: auto;
    }

    .nav_menu_bar  .hamburger-menu-container {
      flex: 1;
      display: none;
      padding-right: 13px;
      align-items: center;
      justify-content: flex-end;

    }

    .nav_menu_bar .hamburger-menu {
      width: 2.5rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .nav_menu_bar .hamburger-menu div {
      width: 1.6rem;
      height: 3px;
      border-radius: 3px;
      background-color: var(--text-heighligh-color);
      position: relative;
      z-index: 1010;
      transition: 0.5s;
    }

    .nav_menu_bar .hamburger-menu div:before,
    .nav_menu_bar .hamburger-menu div:after {
      content: "";
      position: absolute;
      width: inherit;
      height: inherit;
      border-radius: 3px;
      transition: 0.5s;
      background-color: var(--text-heighligh-color);

    }

    .nav_menu_bar .hamburger-menu div:before {
      transform: translateY(-7px);
    }

    .nav_menu_bar  .hamburger-menu div:after {
      transform: translateY(7px);
    }

    .nav_menu_bar  #check {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      width: 2.5rem;
      height: 2.5rem;
      z-index: 90000;
      cursor: pointer;
      opacity: 0;
      display: none;
    }

    .nav_menu_bar #check:checked ~ .hamburger-menu-container .hamburger-menu div {
      background-color: transparent;
    }

    .nav_menu_bar #check:checked ~ .hamburger-menu-container .hamburger-menu div:before {
      transform: translateY(0) rotate(-45deg);
    }

    .nav_menu_bar #check:checked ~ .hamburger-menu-container .hamburger-menu div:after {
      transform: translateY(0) rotate(45deg);
    }

    .nav_menu_bar .header-active-btn {
      background: linear-gradient(to right, var(--primary-color), rgb(229, 4, 5));
      border-radius: 3px;
      text-align: center !important;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .nav_menu_bar .header-active-btn a{
      color: white !important;
      background: linear-gradient(to right, white, white);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      text-align: center !important;
      margin: auto;
    }
    .nav_menu_bar .header-active-btn a:hover{
      background: linear-gradient(to right, white, white);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }

    @keyframes animation {
      from {
        opacity: 0;
        transform: translateY(15px);
      }

      to {
        opacity: 1;
        transform: translateY(0px);
      }
    }

    @media screen and (max-width: 1250px) {

      .nav_menu_bar  header{
         padding: 0rem;
         width: 100%;
      }
      .nav_menu_bar .navbar-links > ul {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    @media (max-width: 1050px) {
      .nav_menu_bar .nav-link .active-nav {
        font-weight: 700 !important;
        background: linear-gradient(to right, rgb(6, 225, 245), rgb(6, 225, 245));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent
    }
      .nav_menu_bar  .nav-link .mov_menu_icon{
        display: block;
        margin-left: 5px;
        font-size: 18px;
        width: 25px;
      }
      .nav_menu_bar .nav-link .active-nav {
        font-weight: 700 !important;
        background: linear-gradient(to right, rgb(6, 225, 245), rgb(6, 225, 245));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent
      }
      .nav_menu_bar  .logo_section{
        padding-left: 10px;
      }
      .nav_menu_bar .dropdown img{
        margin-top: 10px;
        margin-left: 10px;
        height: calc(100%)+50px;
        width: 7rem;
      }
      .nav_menu_bar .dropdown-link:not(:nth-last-child(1)),
      .nav_menu_bar .dropdown-link:not(:nth-last-child(2)),
      .nav_menu_bar .dropdown-link:not(:nth-last-child(3)),
      .nav_menu_bar .dropdown-link:not(:nth-last-child(4)),
      .nav_menu_bar .dropdown-link:not(:nth-last-child(5)){
        border-bottom: transparent;
      }
      .nav_menu_bar  header {
        background-color: transparent;
      }
        .nav_menu_bar .hamburger-menu-container {
        display: flex;
      }
      .nav_menu_bar .navbar-links{
        /* background-color: rgba(0, 0, 0, 0.548); */
        background-color: rgba(9, 9, 9, 0.764);
        margin-top: 60px;
      }

      .nav_menu_bar #check {
        display: block;
      }
      .nav_menu_bar .dropdown ul {
        width: 100%;
        padding-right: 15px;
      }
      .nav_menu_bar .nav-buttons {
        position: fixed;
        height: calc(100vh - 3rem);
        top: 3rem;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateX(100%);
        transition: 0.65s;
      }

      .nav_menu_bar  #check:checked ~ .nav-buttons {
        transform: translateX(0);
      }

      .nav_menu_bar #check:checked ~ .nav-buttons .nav-link,
      .nav_menu_bar #check:checked ~ .nav-buttons .log-sign {
        animation: animation 0.5s ease forwards var(--i);
      }

      .nav_menu_bar .navbar-links {
        flex: initial;
        width: 100%;
      }

      .nav_menu_bar .navbar-links > ul {
        flex-direction: column;
        padding: 8px;
        gap: 0px;
      }

      .nav_menu_bar .nav-link {
        width: 100%;
        opacity: 0;
        transform: translateY(15px);
        background-color: var(--primary-color);
        border-radius: 5px;
        text-align: right;
        justify-content: right;
        align-items: right;
        margin-top: -2px;
      }
      
      .nav_menu_bar .nav-link > a {
        justify-content: right;
        align-items: right;
        line-height: 1;
        padding: 1rem 1.5rem;
        background: linear-gradient(to right, white, white);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        text-align: right;
      }

      .nav_menu_bar .nav-link:hover > a {
        transform: scale(1);
        background: linear-gradient(to right, aqua,rgb(0, 219, 153));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
      }

      .nav_menu_bar .dropdown,
      .nav_menu_bar .dropdown.second {
        position: initial;
        top: initial;
        left: initial;
        transform: initial;
        opacity: 1;
        pointer-events: auto;
        width: 100%;
        padding: 0;
        background-color:rgb(11, 31, 41);
        display: none;
      }

      .nav_menu_bar .nav-link:hover > .dropdown,
      .nav_menu_bar  .dropdown-link:hover > .dropdown {
        display: block;
      }


      .nav_menu_bar .nav-link > a > i {
        font-size: 1.5rem;
        transition: 0.7s;
        display: none !important;
        color: aliceblue !important;

      }

      .nav_menu_bar .nav-link:hover > a > i,
      .nav_menu_bar .dropdown-link:hover > a > i {
        transform: rotate(360deg);

        background: linear-gradient(to right, rgb(247, 237, 127), rgb(154, 214, 0));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;

      }

      .nav_menu_bar .dropdown-link > a {
        background-color: transparent;
        padding: 1.2rem 2rem;
        line-height: 1;
      }

      .nav_menu_bar  .header-active-btn{
        text-align: center;
        width: 100%;
        background-color: blue;
      }
      .nav_menu_bar  .header-active-btn > a {
        background: linear-gradient(to right, aliceblue, aliceblue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        width: 100%;
        display: block;
        text-align: center;
      }

      .nav_menu_bar  .nav_menu_bar .dropdown.second .dropdown-link > a {
        padding: 1.2rem 2rem 1.2rem 3rem;
      }

      .nav_menu_bar .dropdown.second .dropdown.second .dropdown-link > a {
        padding: 1.2rem 2rem 1.2rem 4rem;
      }

      .nav_menu_bar .pro_bg{
        margin-right: 0px;
        background: var(--primary-color);
      }

      .nav_menu_bar .pro_bg .pro{
        text-align: center;
        align-items: center;
        justify-content: center;
        text-align: center;

        background: linear-gradient(to right, rgb(6, 225, 245), var(--active-primary-color));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
      }



      .nav_menu_bar .arrow {
        z-index: 1;
        background-color: rgb(45, 121, 156);
        left: 10%;
        transform: scale(1.1) rotate(45deg);
        transition: 0.5s;
      }

      .nav_menu_bar .nav-link:hover .arrow {
        background-color: aliceblue;
      }

      .nav_menu_bar .dropdown .dropdown .arrow {
        display: none;
      }

      .nav_menu_bar .dropdown-link:hover > a {
        background-color: var(--primary-color)
      }

      .nav_menu_bar .dropdown-link:first-child:hover ~ .arrow {
        background-color:  aliceblue;
        z-index: 900;
      }

      .nav_menu_bar  .dropdown i {
        font-size: 1rem;
        transition: 0.7s;
      }

      .nav_menu_bar .log-sign {
        flex: initial;
        width: 100%;
        padding: 1.5rem 1.9rem;
        justify-content: flex-start;
        opacity: 0;
        transform: translateY(15px);
      }
    }


    dl, ol, ul {
      margin-bottom: 0rem !important;
    }
  /* ==================================== nav menu bar end */