section{
    padding: 50px 0px;
}
.logo{
  height: 55px !important;
}
body{
  font-family: "Outfit", serif !important;
}
body:root {
    scrollbar-color: #ccc #666!important
}
.menu-header .logo img{
  filter: brightness(0) invert(1);
}
.clint {
    background: #EEEFF0;
    padding: 20px;
    border-radius: 15px;
    height: 100%;
    position: relative;
}
.clint .mb-5{
  margin-bottom: 80px !important;
}
.clint .justify-content-between {
    padding: 15px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}
#infoTitle{
  font-size: 1.25rem;
  font-weight: 700;
}
.dev-btn {
  position: relative;
  padding: 7px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  color: #fff !important;
  text-decoration: none !important;
  background: #000;
  animation: glow 3s ease-in-out infinite;
}

/* Shine effect */
.dev-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-25deg);
  animation: shine 3s infinite;
}

/* Glow animation */
@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(149, 70, 254, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(149, 70, 254, 0.7);
  }
  100% {
    box-shadow: 0 0 5px rgba(149, 70, 254, 0.4);
  }
}

/* Automatic shine movement */
@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 130%;
  }
}
.scrollspy-example > div {
 scroll-margin-top: 100px;
}
.menu-header{
  background:#000;
}
::-webkit-scrollbar {
    width: 5px;
    height: 5px
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    border-radius: 10px
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(255,255,255,.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.5)
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,255,255,.3)
}
.inact .logo img,.showmenu .logo img {
    filter: brightness(0) invert(1);
}
.hiveinner .midh{
    min-height: 80vh;
}
.container.wrapper{
    max-width: 95% !important;
}
.f1{
   font-size: 70px;
   font-weight: 600;
}
.ab >ul{
    display:block;
    opacity: 1;
            transform: translateX(0);
            visibility: visible;
            width: 280px;
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;  
}
.leftside{
  background: url(https://d2tq5plsi3dsez.cloudfront.net/Hivelance/request.webp);
      width: 490px;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 20px;
    position: relative;
}
.leftside:after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #00000094;
  border-radius: 20px 0 0 20px;
}
.lightsection{
    background: #E9EFF9;
}
.lightsection1{
    background: #D3DAE9;
}
.darkbtn
{
    background: #202839;
    color: #fff !important;
    padding: 10px;
    border-radius: 80px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    line-height: normal;
    justify-content: center;
}
p {
    font-size: 18px;
    line-height: 35px;
}
.bt{
color: #2272FF;
}
.hiveinner
{
    padding-top: 74px;
}
.mcontainer{
    max-width: 80%;
}
.gridbg
{
    background: url(/front/images/borderline.png);
}

.inputdiv{
    border: 1px solid #2272FF33 !important;
    outline: none;
    background: none !important;
    border-radius: 10px !important;
    color: #000;
}
.inputdiv input, .inputdiv *{
    border: 0px !important;
}
.whitelogo{
        filter: brightness(0) invert(1);
}
.fm{font-weight: 600;}
.fb{font-weight: 800;}

/**menu-css-start**/
 .headerbar {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 999;
  }
  .newpopup{
    position: relative;
  }
  .showmenu{
    overflow: hidden;
  }
  .menulist {}
  .menu {
    /*width: 280px;*/
    color: white;
    border-radius: 8px;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    padding: 0;
    transition: width 0.3s ease-in-out;
  }
  .menu-header {
    padding: 10px;
    text-align: center;
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: end;
    top: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, width 1s;
  }
  .headerbar .open .menu-header
  {
    transform: translateY(0px) !important;
  }
header.active   .menu-header{ background: #1f2839;}
  #menu-btn {
    /*position: absolute;
    left: 30px;*/
        width: 37px;
    height: 37px;
    background: #ffffff;
    padding: 5px 6px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 4px;
  }
  #menu-btn svg{width: 20px;}
  .menu-header #menu-btn {
    font-size: 24px;
    cursor: pointer;
  }
  .menu.open:after {
    position: fixed;
    content: "";
    width: 100%;
    height: 100%;
        background: #1818185c;
    /* background: #fff; */
    z-index: -1;
    /*backdrop-filter: blur(50px);*/
    top: 65px;
  }
  header
  {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, width 1s;
    margin-top: -80px;
  }
  .menu-wrapper {
    display: none;
    opacity: 0;
    xtransform: translateX(-20px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, width 1s;
    /*position: fixed;*/
    /*width: 280px;*/
    margin-top: 75px;
    min-height: 100vh;
    /*background: #E0EAFC;*/
    z-index: 999;
  }
  header .menu-header.active {
    transform: translateY(-80px);

  }
  header .menu-header.active.inact {
    transform: translateY(0px);
    background: #1f2839;
  }
  .menu-icon
  {
     -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
  }
  .menu-icon:hover{
    transform: scale(1.1);
  }

  @keyframes rotate360 {
  to { transform: rotate(360deg); }
}
.menu-icon.hidden { animation: 2s rotate360 infinite linear; }
  .menu-icon span {
    display: block;
    width: 35px;
    height: 4px;
    background-color: white;
    margin: 6px auto;
    transition: all 0.3s ease-in-out;
  }

  .menu-header:hover .menu-icon span:nth-child(1) {
    transform: translateY(-2px) scaleX(0.8);
  }

  .menu-header:hover .menu-icon span:nth-child(3) {
    transform: translateY(2px) scaleX(0.8);
  }

  .menu.open .menu-icon span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
  }

  .menu.open .menu-icon span:nth-child(2) {
    opacity: 0;
  }

  .menu.open .menu-icon span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }

  .menu.open {
    /*width: 280px;*/
    /*background: #E0EAFC;*/
  }
  .menu.open .menu-header
  {
    background: #1f2839;
  }
  .menu.open .menu-wrapper {
    display: block;
    opacity: 1;
    xtransform: translateX(0);
  }

  .menu-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-top: 10px
        /*overflow: auto;*/
    max-height: 90vh;
    /*max-width: 400px*/;
  }

  .menu-wrapper li {
    /* position: relative;*/
    padding: 5px;
  }
  .menu-wrapper > ul .submenu li {
    padding: 2px 10px !important;
}
.menu-wrapper > ul .submenu  .submenu li{padding: 0px 10px !important;}
.menu-wrapper> ul .submenu li a,.menu-wrapper> ul .submenu li .submenu li a{padding:6px 15px !important;}
.menu-wrapper > ul li a
{
  display: flex;
  align-items: center;

}

  .menu-wrapper a {
    display: block;
    padding: 12px;
    color: white;
    text-decoration: none;
    color: #000;
    border: 1px solid #ffffff !important;
    border-radius: 4px;
    background: #ffffff2e;
    font-weight: 600;
    font-size: 15px;
  }
input:focus + .label-top, textarea:focus + .label-top {
    top: -13px;
    left: 20px;
    color: #000000;
}
input:valid + .label-top, textarea:valid + .label-top, input:user-invalid + .label-top, textarea:user-invalid + .label-top {
    top: -13px;
    left: 20px;
    color: #000000;
}
input:focus+ .label-top, textarea:focus+ .label-top, textarea:valid+ .label-top, input:valid+ .label-top, input:invalid + .label-top, textarea:invalid + .label-top {
    top: -7px;
    left: 20px;
    color: #000;
}
 .menu-wrapper>ul li {
    margin-bottom: 10px;
    font-size: 15px;
    text-transform: capitalize;


}

  .menu-wrapper>ul li a {
    font-size: 18px !important;
    text-transform: capitalize;

  }

  .submenu {
    /*display: none;*/
    position: absolute;
    left: 100%;
    top: 0;
    background: #478AFF;
    border-radius: 0px;
    width: 280px;
    min-height: 100vh;
    padding: 0;
    z-index: 1000;
    opacity: 0;
    transform: translateX(0px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    visibility: hidden;
    width: 0;
  }
  .submenu .submenu {
    background: #F5F6F8;
  }
  .submenu .submenu li a {
    color: #000;
    padding: 5px !important;
    line-height: normal;
    font-weight: 400;
    background-color: transparent !important;
  }
  .submenu .has-submenu:hover>a,.has-submenu.ab > a {
    background: #ffffff;
    color: #000;
    background-image: url(https://d2tq5plsi3dsez.cloudfront.net/Hivelance/dark-arrow-hive.webp) !important;
    background-position: 99% !important;
    background-repeat: no-repeat !important;
  }
  .submenu .submenu.submenu2 a:hover {
    color: #255eff !important;
}
   .menu-wrapper > ul .submenu > li a:hover
   {
    background: #fff;
    color: #000 !important;
   }
  .submenu ul {
    list-style: none;
    padding: 10px;
    margin: 0;
    max-height: 30vh;
    overflow: auto;
  }
  .listtoken > div
  {
    background: url(https://d2tq5plsi3dsez.cloudfront.net/Hivelance/list-token.webp);margin-bottom: 11px;
    padding-left: 32px;
    background-repeat: no-repeat;
    background-position: 0px 3px;
    background-size: 21px
  }
  .titlelistwrapper .title-list {
    background: url(https://d2tq5plsi3dsez.cloudfront.net/Hivelance/list-rocket.webp);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 50px;
    padding-left: 60px !important;
}
  .submenu li {
    border-top: 1px solid #0000000f;
    /*position: relative;*/
    border: 0px;
  }

  .submenu a {
    padding: 10px;
    color: white;
    text-decoration: none;
    display: block;
    border: 1px solid transparent !important;
    background: transparent;
    font-weight: 400 !important;
  }

  .submenu li all {
    border: 0px;
    background: transparent;
  }

  .submenu a:hover {
    background: transparent;
  }

  .menu-wrapper .submneu>.submenu li {
    padding: 0px !important;
  }
.leftside{
  border-radius: 20px 0 0 20px;
}
.rightside{
  border-radius: 0px 20px 20px 0;
}
  .has-submenu:hover>.submenu,.showm > ul.submenu {
    /*display: block;*/
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    /*width: 500px;*/
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  }

  .has-submenu:hover>a,.showm > a {
    border: 1px solid #438efc !important
  }

  .has-submenu:hover>a {
    background: #5555550d;
  }
  .iconmenu{margin-right: 15px;}
  .mmenu{padding: 10px 25px !important;}
  .mmenu:hover > a,.showm > a
  {
    background-image: url("https://d2tq5plsi3dsez.cloudfront.net/Hivelance/blue-arrow-hive.webp");
    background-color: #ffffff4f;
        background-position: 95%;
    background-repeat: no-repeat;
    color: #478AFF;
  }
/**topmenu**/
.menu-header
{
  display: flex;
  justify-content: space-between;
  align-items: center;
}  
.rightnav
{
  display: flex;
  align-items: center;
}
ul.socialiconlist {
    margin: 0;
    padding: 0;
}
ul.socialiconlist li {
    float: left;
    list-style: none;
    margin: 0px 5px;
}
ul.socialiconlist li img{
  width: 40px;
      transition: border-radius 0.2s, background  0.2s;
      border: 3px solid transparent;
}
ul.socialiconlist li img:hover
{
    border: 3px solid #478AFF;
    border-radius: 24px;
    width: 40px;
    margin: 2p;
    padding: 2px;
    background: #fff;
}
.whatsapp_icon img:hover
{
background: #27c165 !important;
border: 3px solid #7dedaa !important;
}
.telegram_icon img:hover
{
background: #006dbf  !important;
border: 3px solid #72bff9  !important;
}
.skype_icon img:hover
{
background: #06abee !important;
border: 3px solid #6ed5ff  !important;
}
.menu.open #hamburger
{
  display: none;
}
.menu.open #close
{
  display: block;
}
.menu #close{
  display: none;
}
.menu-header .logo img{
 width: 234px;
 height: 55px;
}
.frmsend{display: none; margin-right: 15px;}
.main-menu
{
  width: 300px;
  max-height:100vh;
  padding-bottom: 50px !important;
  overflow: auto;
  background: #E0EAFC;
  min-height: 100vh;

}
.main-menu .submenu1
{
  width: 680px;
 left: 300px;
position: absolute;
z-index: 9999;
padding-right: 365px;
top: 75px;
overflow: auto;
}
.main-menu  .submenu2
{
  left: 310px;
 position: absolute;
width: 370px;
z-index: 999;
top: 0;
padding-bottom: 70px;
}
.menu-wrapper{
      margin-top: 75px;
    }
header .menu-header.active.inact .logo img {
 filter: brightness(0) invert(1);
 
}  
.menu-wrapper .new-men{
  color:#478AFF;
  font-size: 20px;
  font-weight: 700;
  padding: 6px 15px !important
} 
.home-logo .whlogo{display:none;}
.dalogo{display: none;} 
.home-logo .dalogo{display: block;}
.home-logo .active.menu-header .whlogo{display:block;}
.home-logo .active.menu-header .dalogo{display: none;}

.menu-header .dev-btn{
color: black!important;
background: linear-gradient(90deg, #FFFFFF 0%, #D9E5FF 63.46%);
border: 1px solid #FFFFFF;
border-radius: 100px;

}

@media(max-width: 1500px){
    .menu-wrapper>ul li a {
    font-size: 16px !important;
  }
  .logo {
    height: 40px !important;
}
  header{margin-top: 0px;}
  .main-menu .submenu1
  {
    top: 60px;
  }
  .menu-header .logo img {
        max-width: 170px;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .menu.open:after{
      top: 60px;
    }
    .menu-wrapper{
      margin-top: 60px;
    }
    .newpopup {
    max-width: 1150px !important;
}
.darkbtn{
  padding: 8px 25px;
}
.form-group {
        position: relative;
        margin-bottom: 35px !important;
    }
    #infoTitle h5{
  font-size: 1rem;
  font-weight: 700;
}
}
@media(max-width: 991px)
{   .submenu {
    display: none;
    left: 0;
    top: inherit;
    position: relative;
    }

    .submenu{min-height: inherit;}
    .submenu ul{max-height: 50vh !important; overflow: auto; min-height: inherit;}
    .has-submenu:hover>.submenu
    {
        display:none;
    }
    .showm .submenu1{display: block !important;}
    .ab .submenu2{display: block !important;}
    .leftside {
        display: none;
    }
    .has-submenu:hover>.submenu
    {width: 100%;}
    .menu-wrapper,.menu-wrapper ul{
        width: 100%;max-width: 100%;        overflow: auto;
        max-height: 90vh;
    }
            ul.socialiconlist {
    margin: 0;
    padding: 10px;
    position: fixed !important;
    left: 0;
    bottom: 10px !important;
    top: 100vh;
    background: linear-gradient(0deg, #0f141c, #0f141c);
    width: 100%;
    display: inline-table;
    transform: translateY(-59px) !important;
    
}
.fixedmenubottom
{
    position: fixed;
    bottom: 0;
    z-index: 999;
}
.fixedmenubottom  ul.socialiconlist {
    margin: 0;
    padding: 10px;
    position: fixed !important;
    left: 0;
    bottom: 10px !important;
    top: 100vh;
    background: linear-gradient(0deg, #0f141c, #0f141c);
    width: 100%;
    display:inline-table ;
    transform: translateY(-59px) !important;
    
}
    .menu-wrapper
    {
        padding-top: 0vh;
        padding-bottom: 5vh;
        margin-top: 0px;
    }
    .mmenu:hover > a
    {

    }
    .submenu ul
    {   padding: 5px;
                margin-top: 5px;
        border-radius: 9px;
        padding-right: 6px;
    }
    .menu-wrapper> ul .submenu li a, .menu-wrapper> ul .submenu li .submenu li a {
    padding: 6px 10px !important;
    }
.menu-wrapper > ul .submenu .submenu li {
    padding: 0px 0px !important;
    margin-bottom: 0px;
}
.menu-wrapper>ul li{margin-bottom: 0px;position: relative;}
.menu-wrapper .submenu .submenu li a:hover {
    color: red !important;
}
.menu-wrapper> ul .submenu li a, .menu-wrapper> ul .submenu li .submenu li a
{
    margin: 0px 0px;
}
.menu-wrapper > ul .submenu > li a:hover {
    background: #81b4ff;
    color: #ffffff !important;
}

.mmenu:hover > a {
    background-image: url(https://d2tq5plsi3dsez.cloudfront.net/Hivelance/down_arrow_blue.webp);
    background-size: 24px;
}
.mmenu:hover > a, .showm > a{background-image: none;}
.main.has-submenu > a:after {
    background-image: url(https://d2tq5plsi3dsez.cloudfront.net/Hivelance/down_arrow_blue.webp);
    background-size: 21px;
        background-position: 95%;
    background-repeat: no-repeat;
            content: "";
        position: absolute;
        right: 30px;
        width: 24px;
        height: 24px;
}
.main.has-submenu.showm > a:after
{
          transform: rotate(180deg);
}
.submenu .has-submenu:hover>a,.submenu1 .has-submenu > a
{
    background-image: url(https://d2tq5plsi3dsez.cloudfront.net/Hivelance/down_arrow_white.webp) !important;
    background-size: 16px !important;
    background-position: 95%;
    background-repeat: no-repeat;
}
.mmenu {
    padding: 4px 5px !important;
}
.menu-header .logo img {
    width: 180px;
    height: 42px;
}
header .menu-header
{
    background: #1f2839;
    position: sticky;
    z-index: 99;
}
.frmsend
{
     mix-blend-mode: plus-lighter;
        height: 33px;
        width: 33px;
        overflow: hidden;
        background: url(https://d2tq5plsi3dsez.cloudfront.net/Hivelance/telegram-app.gif);
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 30px;
        display: block;
}
.main-menu .submenu1
{
position: relative;
left: 0;
width: 100%;
padding-right: 0;
top: 0;
padding: 10px;
z-index: 9;
}
.menu-wrapper > ul .submenu li {
    padding: 2px 0px !important;
}
.menu
{
  position: inherit;
}
.main-menu .submenu2
{
  position:relative;
  width: 100%;
  left:0px; 
}
.main-menu{
  
    padding-top: 50px !important;
    padding-bottom: 130px !important;
    height: 100vh;
    margin-top: -40px !important;
    margin-bottom: -60px !important;
}
header .menu-header.active{
  transform: translateY(0px);
}
}
/**menu-css-end**/
.contacticons img{max-width: 30px;}

@media(max-width: 768px){
  .f1 {
    font-size: 35px;
    font-weight: 600;
}
.contacticons{
  display: none;
}
.demo {
        border-radius: 10px !important;
        padding: 20px !important;
        margin-top: 30px !important;
        text-align: center;
    }
    .man{
      display: none;
    }
    .rightside {
    border-radius: 20px;
}
.dev-btn{
color: black!important;
background: linear-gradient(90deg, #FFFFFF 0%, #D9E5FF 63.46%);
border: 1px solid #FFFFFF;
border-radius: 100px;

}

}