/* ---- reset ---- */





    /* ---- particles.js container ---- */

    #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50px;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;
    }

    #particles-2 {
      z-index: -1;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50px;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50
    }

    #particles-3 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50px;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50
    }

    #particles-4 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50px;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50
    }
    #particles-5 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50px;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50
    }
    #particles-6 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50px;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50
    }
    #particles-7 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50px;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50
    }
    #particles-8 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50px;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50
    }
    /* #particles-5 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50px;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50
    }
    #particles-6 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50px;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50
    } */
    #particles-black {
      position: absolute;
      width: 100%;
      height: 100%;

      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;
    }

    /* ---- stats.js ---- */

    .count-particles {
      background: #000022;
      position: absolute;
      top: 48px;
      left: 0;
      width: 80px;

      font-size: .8em;
      text-align: left;
      text-indent: 4px;
      line-height: 14px;
      padding-bottom: 2px;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
    }

    .js-count-particles {
      font-size: 1.1em;
    }

    #stats,
    .count-particles {
      -webkit-user-select: none;
    }

    #stats {
      border-radius: 3px 3px 0 0;
      overflow: hidden;
    }

    .count-particles {
      border-radius: 0 0 3px 3px;
    }

    .customHeader {
      /* box-shadow: 1px 1px 10px; */
      /* box-shadow: 0 5px 7px -7px grey!important; */

      /* padding:20px 0px 0px 0px!important; */
    }

    .servicepage .nav li a {
      font-family: "Open Sans", sans-serif;

      color: rgb(0, 0, 0);
      font-weight: 600;
      overflow: hidden;
      padding: 0px 15px;
      text-transform: uppercase;
      font-size: 18px;



    }

    /* .servicepage .nav li a.active {
      color: #da1c74 !important;
    }

    .servicepage {
      background-color: transparent !important;
      padding: 80px 0 100px !important;
    }

    .servicepage .nav li a span:before {

      color: #da1c74 !important;

    } */


    .headerText ,h3{
      color: white;
      font-family: quasimoda, sans-serif;
      overflow-wrap: normal;
      font-size: 4.2rem;
      font-weight: 900;
      line-height: unset!important;
    }

    .headerText2 ,h3{
      color: white;
      font-family: quasimoda, sans-serif;
      overflow-wrap: normal;
      font-size: 2.5 rem;
      font-weight: 500;
      line-height: unset!important;
    }

    .headerTextbtn ,h3{
      color: #212529;
      font-family: quasimoda, sans-serif;
      overflow-wrap: normal;
      font-size: 4.2rem;
      font-weight: 900;
      line-height: unset!important;
    }

    .info {
      font-family: "quasimoda", sans-serif;
      color: #d8dadd;
      margin-top: 40px !important;
    }

    .infobtn {
      font-family: "quasimoda", sans-serif !important;
      color: #212529 !important;
      margin-top: 40px !important;
    }

    .titletxt {
text-transform: uppercase;
      font-size: 42px;
      color: #d8dadd;
      margin-bottom: 20px;
      font-family: "quasimoda", sans-serif;
      font-weight: 100;
    }

    .titletxtbtn {
      color: #212529;
      font-size: 42px;
      margin-bottom: 20px !important;
      font-family: "quasimoda", sans-serif;
      font-weight: 100;
      text-transform: uppercase;
    }

    .albums-section:after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 630px;
      background-image: url(https://html.geekcodelab.com/spiffyplay/assets/images/music-wave.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-animation: fade-in 2.5s linear infinite;
      animation: fade-in 2.5s linear infinite;
      animation-play-state: running;
    }




    .btnslide {
      border: none;
      font-family: inherit;
  
      color: inherit;
      background: none;
      cursor: pointer;
      padding: 20px 60px;
      display: inline-block;
      margin: 20px 0px 0px -14px!important;
      text-transform: uppercase;
      letter-spacing: 1px;
      outline: none;
      position: relative;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
      border: 3px solid #046380;
      color: #046380;
      z-index: 999;
      font-family: quasimoda, sans-serif;
    font-weight: 100;
    font-size: 22px;
    
    }
    .btnslideblack {
      border: none;
      font-family: inherit;
  
      color: inherit;
      background: none;
      cursor: pointer;
      padding: 20px 60px;
      display: inline-block;
      margin: 0px 0px 0px -14px;
      text-transform: uppercase;
      letter-spacing: 1px;
      outline: none;
      position: relative;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
      border: 3px solid #ffffff;
      color: #ffffff;
      z-index: 999;
      font-family: quasimoda, sans-serif;
    font-weight: 100;
    font-size: 22px;
    }
    .btnslide:after {
      content: '';
      position: absolute;
      z-index: -1;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
    }
    .btnslideblack:after {
      content: '';
      position: absolute;
      z-index: -1;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
    }
    /* Button 3 */
    .btn-3slide:after {
      width: 0%;
      height: 100%;
      top: 0;
      left: 0;
      background: #046380;
    }
    .btn-3slideblack:after {
      width: 0%;
      height: 100%;
      top: 0;
      left: 0;
      background: #ffffff;
    }
    .btn-3slide:hover,
    .btn-3slide:active {
      color: #ffe249;
    }
    .btn-3slideblack:hover,
    .btn-3slideblack:active {
      color: #212529;
    }
    .btn-3slideblack:hover:after,
    .btn-3slideblack:active:after {
      width: 100%;

    }
    .btn-3slide:hover:after,
    .btn-3slide:active:after {
      width: 100%;

    }



    @media screen and (min-width: 992px) {

      .fp-viewing-aboutPage .logo-container .light,
      .fp-viewing-careerpage .logo-container .light,
      .fp-viewing-contactpage .logo-container .light,
      .fp-viewing-workpage .logo-container .light,
      .fp-viewing-productonepage .logo-container .light,
      .fp-viewing-teampage .logo-container .dark,
      .fp-viewing-blogpage .logo-container .dark,
      .fp-viewing-servicepage .logo-container .dark,
      .fp-viewing-mainPage .logo-container .dark, .fp-viewing-mainPage1 .logo-container .dark {
        display: block;
        height: -14%;
        height: 150px;
        width: 100%;
        margin-top: -30px;
      }
     
    }
.borderless{
  border: unset;
  border-bottom:2px solid #046380;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  font-size: 3.2rem;
  line-height: 1.4516;
 
}
.lables{
  font-size: 3.2rem;
  line-height: 1.4516;
}


/* 
    form */
    input {
      /* padding: 15px; */
      align-self: center;
      width: 120px;
      max-width: 500px;
      border: transparent;
      border-bottom:4px solid #046380!important;
      border-bottom: 2px solid;
      font-size: 3.2rem;
  line-height: 1.4516;
  text-indent: 1px;
  
  }
  select:focus,textarea:focus, input:focus{
    outline: none;
}
::placeholder{
  color: black;
  font-size: 24px;
}
.resp{
  word-spacing: 15px;
  background-color: white;
 width: 100%;
  height: 100vh;
  display: none;
  overflow: scroll;
 position: fixed;
 z-index: 999999999999999;
}
.footerform{
  word-spacing: 15px;
  background-color: white;
 width: unset!important;
  height: unset!important;
 
  overflow: unset!important; 
 position: absolute;
 z-index: 999999999999999;
}
#dspform{
  display: none;
}
#sspform{
  display: none;
}
#pubform{
  display: none;
}
#verform{
  display: none;
}
.bg{
  margin:100px;
  margin: 100px;
}
.jobtitle{
  display: none;
}
    .formtoggle{
      float: right;
    }
    /* .header .navbar-wrapper li {
      text-transform: capitalize;
   
  } */
  @media screen and (max-height:700px) {
    .headerText,.info,.headerTextbtn,.infobtn,h3{
        font-size: 2rem;
       
        
    }
    .resp{
      font-size: 1rem;
   overflow-x: hidden;
      word-spacing: 10px;
  
    }
    .width-dynamic{
      padding: 0px!important;
    }
    .logodiv,.inputdiv,.socialdiv{
      font-size: 2rem!important;
      line-height: 2rem!important;
    }
    .footertext{
      color: white;
      padding: 2vh 1vh;
     
    }
    .footerbtn{
      margin-top: 10px!important;
    }
}


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


.body-wrap h4, .work h3, .service h3, .about h3, .team h3, .contact-figc h3, .jointeam h3, .blog .figcaption h3 {
  font-size: 2rem!important;
}
}
@media screen and (min-width:769px){
  .hidepc{
    display: none;
  }
}
@media screen and (min-width: 993px){
  .header .logo-container{
    margin-top: 30px;
  }
}
@media screen and (max-width: 1200px)
  {
    .header .logo-container {
      width: 30%!important;
  }
  }
  @media screen and (max-width:1000px)
  {
    .header .logo-container {
      width: 17%!important;
  }
  
}

@media screen and (max-width:768px) {
  .footertext {
    color: white;
    padding: 2vh 0vh;
    font-size: 14px;
}
  .form-control{
    width: 100%;
  }
  .fp-tableCell, .fp-section, .addheight {
    height: inherit !important;
  }
  .bg{
    margin: 100px 20px!important;
  }
  .btnslide{
    float: left!important;
    margin-left: 1;
  }
  .headerText,.headerTextbtn,.headerTextbtn{
    font-size: 2rem;
     }
     .fp-section.fp-table {
      padding: 1vh!important;
  }
  .home .wrapper-text {
    margin: 5vh 0vw!important;
}
.logodiv,.inputdiv,.socialdiv{
  font-size: 2rem;
}
.ftr{
  display: block!important;
}
.mblnavbar-wrapper{
  display: none!important;
}

.navbar-wrapperblock{
display: unset;
}
.hidepc{
  display: block!important;
}
/* .navbrH{
  height: 100vh;
} */
.buttonup{
  display: none;
}
.content.hidepc .navbar-wrapper {
  display: block !important ;
  margin-top: 10px !important;
}
.header .nav-menu {
  position: fixed;
  top: 0;
  z-index: 5;
  width: 50vw;
  height: 100Vh;
  background: #192025;
 
  transition: all .5s ease-in-out;
}
.header .logo-container {
  width: 30% !important;
}
.lables{
  font-size: 2rem;
  line-height: 1.4516;
}
/* .header .nav-menu.nav-menu-open {
  left: 50wv !important;
} */
/* .about .wrapper-text {
  margin: 10vh 10vw!important;
} */
}


.footerlogo{
  height: 150px;
}
.logodiv,.inputdiv,.socialdiv{
  line-height: 4rem;
  font-size: 2.5rem;
}
.footerinput{
  height: 50px;
  width: 100%;
  font-size: 2.5rem;
}
.footertext{
  color: white;
  padding: 2vh 0vh;
 
}
.footerbtn{
  padding: 5px 20px;
  margin-top: 10px!important;
  margin-left: 0px!important;
}
.ftr{
  display: flex;justify-content: space-evenly;background-color: #1f282e;

}

.header .navbar-wrapper {
  overflow-y: unset;
  height: unset;
  display: flex;
  margin-top: 30px;
}

@media screen and (max-width: 1400px) and (max-height: 991px){
  .home .wrapper-text {
    margin: 12vh 0;
}
}
.fp-tableCell, .fp-section, .addheight {
  height: inherit !important;
}
@media screen and (max-width: 768px){
  .header .logo-container {
    width: 45% !important;
}
}
@media screen and (max-width: 992px){
  .header .content {
    width: 55%;
}
}

.column_img {
  float: left;
  width: 50%;
  padding: 5px;
}

.row_img::after {
  content: "";
  clear: both;
  display: table;
}

.column_img2 {
  float: left;
  width: 33.3%;
  padding: 5px;
}
.row_img2 {
  content: "";
  clear: both;
  display: table;
  padding-top: 25px;
}