@import "https://fonts.googleapis.com/css?family=Nunito:300,400,400i,600,700,800";
@import url(bootstrap-3.min.css);

.dark-template-bg,
.banner,
.services-list div:after,
.road-content,
.faq-icon,
.contact-info {
  background-color: #000;
  color: #fff;
}

.dark-template-light-bg,
.navbar.sticky-header,
.timer-box,
.about-special,
.card-accepted,
.services-list div,
.faq-icon img,
.faq .panel,
.contact-form input,
.contact-form textarea,
.about-special {
  background-color: #202020;
  color: #fff;
}

.dark-template-medium-bg,
.banner:after,
.benifit-box .media,
.contact-form,
span.circular-at,
.subscribe-input {
  background-color: #010202;
  color: #fff;
}

/*=================== LAYOUT =================================
    1. Global Style
    2. Header CSS
    3. Banner Section CSS
    4. About CSS
        4.1 What is creptency
        4.2 Why cryptency
        4.3 Whats special about cryptency
        4.4 how to buy token CSS
    5. Services CSS
    6. Roadmap CSS
    7. What our client saying
    8. CTA (Our sale Ends...) CSS
    9. White Paper CSS
    10. Our Partners CSS
    11. FaQs CSs
    12. Contact
    13. Footer
    14. Loader CSS

===================================================================*/
/*==================== COLOR CODES =================================
    Template Color        :#3D4E81 / #6E7FF3 [Dark Blue / light-blue]
    Main Heading Color :#fff [white Gray]
    Content Color      : #3D4E81 [Dark Gray]
    Button background  :     background: linear-gradient(-225deg, #3D4E81 0%, #6E7FF3 100%);
    Dark-background-color :  #171e31;
    light-background-color :  #1b2238;
    medium-background-color :  #1d253d;
====================================================================*/
/*===================== TYPOGRAPHY =================================
    Heading   :     font-family: 'Nunito', sans-serif;
    Body      :     font-family: 'Nunito', sans-serif;
    Logo      :     font-family: 'Nunito', sans-serif;
=====================================================================*/
/*==================== 1.Global Style =================================*/
/*----------------------------- flex-classes -----------------------------*/
.align-item-center {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.align-item-end {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}

.justify-content-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.justify-content-space-between {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.template-color {
  color: #4c9de1;
}

.template-bg {
  background-color: #3D4E81;
  color: #fff;
}

.light-bg {
  background-color: #f5faff;
}

.dark-bg {
  background-color: #F1F5FF;
}

.gradient-bg {
  background: linear-gradient(-225deg, #3D4E81 0%, #5753C9 60%, #6E7FF3 100%);
  color: #fff;
}

.gray-light-bg {
  background-color: #f9f9f9;
}

body {
  font-family: 'Nunito', sans-serif;
  color: #3D4E81;
}

button {
  background-color: transparent;
}

iframe {
  width: 100% !important;
}

strong {
  font-weight: 900;
}

textarea {
  resize: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

h2 {
  font-size: 2.3em;
  margin-top: 0;
}

input:active,
input:focus,
a:hover,
a:active,
a:focus,
button:hover,
button:active,
button:focus {
  outline: none;
}

input:active,
input:focus {
  box-shadow: none;
}

a:hover,
a:active,
a:focus,
a {
  text-decoration: none;
}

a,
button {
  transition: 0.3s;
}

.btn:focus,
input:active,
input:focus {
  outline: none;
}

.m0 {
  margin: 0;
}

.m1 {
  margin: 10px;
}

.m2 {
  margin: 20px;
}

.m3 {
  margin: 30px;
}

.m4 {
  margin: 40px;
}

.m5 {
  margin: 50px;
}

.m6 {
  margin: 60px;
}

.mt0 {
  margin-top: 0px;
}

.mt1 {
  margin-top: 10px;
}

.mt2 {
  margin-top: 20px;
}

.mt3 {
  margin-top: 30px;
}

.mt4 {
  margin-top: 40px;
}

.mt5 {
  margin-top: 50px;
}

.mt6 {
  margin-top: 60px;
}

.mb0 {
  margin-bottom: 0px;
}

.mb1 {
  margin-bottom: 10px;
}

.mb2 {
  margin-bottom: 20px;
}

.mb3 {
  margin-bottom: 30px;
}

.mb4 {
  margin-bottom: 40px;
}

.mb5 {
  margin-bottom: 50px;
}

.mb6 {
  margin-bottom: 60px;
}

.m0 {
  margin-left: 0px;
}

.ml1 {
  margin-left: 10px;
}

.ml2 {
  margin-left: 20px;
}

.ml3 {
  margin-left: 30px;
}

.ml4 {
  margin-left: 40px;
}

.ml5 {
  margin-left: 50px;
}

.ml6 {
  margin-left: 60px;
}

.mr0 {
  margin-right: 0;
}

.mr1 {
  margin-right: 10px;
}

.mr2 {
  margin-right: 20px;
}

.mr3 {
  margin-right: 30px;
}

.mr4 {
  margin-right: 40px;
}

.mr5 {
  margin-right: 50px;
}

.mr6 {
  margin-right: 60px;
}

.p0 {
  padding: 0;
}

.p1 {
  padding: 10px;
}

.p2 {
  padding: 20px;
}

.p3 {
  padding: 30px;
}

.p4 {
  padding: 40px;
}

.p5 {
  padding: 50px;
}

.p6 {
  padding: 60px;
}

.pl0 {
  padding-left: 0;
}

.pl1 {
  padding-left: 10px;
}

.pl2 {
  padding-left: 20px;
}

.pl3 {
  padding-left: 30px;
}

.pl4 {
  padding-left: 40px;
}

.pl5 {
  padding-left: 50px;
}

.pl6 {
  padding-left: 60px;
}

.pr0 {
  padding-right: 0;
}

.pr1 {
  padding-right: 10px;
}

.pr2 {
  padding-right: 20px;
}

.pr3 {
  padding-right: 30px;
}

.pr4 {
  padding-right: 40px;
}

.pr5 {
  padding-right: 50px;
}

.pr6 {
  padding-right: 60px;
}

.plr1 {
  padding: 0 10px;
}

.plr2 {
  padding: 0 20px;
}

.plr3 {
  padding: 0 30px;
}

.plr4 {
  padding: 0 40px;
}

.plr5 {
  padding: 0 50px;
}

.plr6 {
  padding: 0 60px;
}

.pb0 {
  padding-bottom: 0px !important;
}

.text-muted {
  opacity: 0.5;
}

.btn-alpha,
.btn-white,
.menu-btn,
.btn-beta {
  transition: 0.2s ease;
  border-radius: 50px;
  padding: 0 30px !important;
  border: none;
  box-shadow: 0px 3px 19px rgba(0, 0, 0, 0.07);
  font-weight: 800;
  display: inline-block;
  line-height: 40px !important;
  font-size: 0.85em;
  text-transform: uppercase;
}

.btn-beta {
  background: linear-gradient(-225deg, #3D4E81 0%, #6E7FF3 100%);
  color: #fff !important;
  border: 2px solid tranparent;
}

.btn-beta:hover {
  background: linear-gradient(225deg, #3D4E81 0%, #6E7FF3 100%);
}

.btn-alpha {
  background: linear-gradient(-225deg, #813d3d 0%, #4c9de1 100%);
  color: #fff !important;
  border: 2px solid tranparent;
}

.btn-alpha:hover {
  background: linear-gradient(225deg, #813d3d 0%, #4c9de1 100%);
}

.btn-white,
.menu-btn {
  color: #fff;
  border: 2px solid #fff;
}

.btn-white:hover,
.menu-btn:hover {
  background-color: #fff !important;
  color: #202020 !important;
}

.t-burger {
  padding-top: 100px;
}

.burger {
  padding: 100px 0;
}

.guter {
  padding: 0 120px;
}

.big-pera {
  font-size: 17px;
  opacity: 0.6;
}

/*---------------------------------- 2. Header ------------------------------------*/
.menu-btn {
  margin-left: 14px;
}

.site-logo {
  padding: 8px;
  height: 40px;
  transition: width .3s ease;
  width: 90%;
}

.sticky-header .site-logo {
  width: 100%;
}

.navbar {
  padding: 15px 0;
  border-width: 0 0 1px 0;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  transition: all ease 0.4s;
  z-index: 5;
  border-radius: 0;
  perspective: 1000px;
  transform-origin: top;
  border-bottom: 1px solid transparent;
}

.navbar.sticky-header {
  border-color: #4c9de1;
  box-shadow: 0px -12px 10px 9px rgba(0, 0, 0, 0.4);
}

@media (max-width: 991px) {
  .navbar-collapse {
    background-color: #010202;
  }
}

.navbar-nav>li>a {
  font-size: 0.85em;
  padding: 15px 10px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
}

.navbar-nav>li>a:hover {
  color: #4c9de1;
}

.navbar-nav li.active a,
.navbar-nav>li>a:focus,
.navbar-nav>li>a:hover,
.navbar-nav>li>a:active {
  background-color: transparent;
}

.navbar-nav li.active a {
  color: #4c9de1 !important;
}

/*-------------header-CSS-end----------*/
/*------------------------------ 3. Banner -------------------------*/
.banner {
  color: #fff;
  z-index: 1;
  min-height: 769px;
  overflow: hidden;
  position: relative;
  background-image: url(../images/bg-light2.png);
  background-position: center;
  background-size: cover;
}


.banner-btn-group a:last-child {
  margin-left: 20px;
}

.banner-text h1 {
  font-size: 4.1em;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 20px;
  margin-top: 0;
}

.banner-text h1:before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 50px;
  height: 5px;
  background-color: #000;
  border-radius: 50px;
}

/*---------- timer -----------*/
.timer-box {
  margin: 0px auto;
  width: 87%;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  padding: 40px 20px;
  border-radius: 6px;
}

.timer-box h2 {
  position: relative;
  font-size: 2em;
}

.timer-box h2:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 4px;
  left: 0;
  right: 0;
  bottom: -12px;
  margin: 0 auto;
  background: #FED382;
  border-radius: 47px;
}

.timer-text {
  font-size: 1.1em;
  font-weight: bold;
}

.timer-text i {
  border: 2px solid #FED382;
  border-radius: 50px;
  margin: 0 10px;
}

div.timer {
  display: flex;
  justify-content: space-between;
  margin: 40px 0 30px 0;
}

div.timer div {
  font-size: 3em;
  text-align: center;
  width: 25%;
  display: inline-block;
  line-height: 1.2;
}

div.timer span {
  font-size: 0.3em;
  display: block;
  color: #6E7FF3;
  font-weight: 700;
}

/*---------- timer CSS end ------------*/
/*---------- Banner-CSS end ------------*/
/*----------------------------------- 4. about css -----------------------------*/
/*------------------- 4.1 What is creptency-------------------*/
.check-list h3 {
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 1em;
}

.check-list img {
  width: 30px;
}

/*------What is creptency CSS END--------*/
/*--------------------- 4.2 Why cryptency -------------------*/
.pross-grid {
  padding: 50px 0;
}

.pross-grid h3 {
  font-size: 1.08em;
  font-weight: 600;
}

.pross-grid .right-bdr {
  position: relative;
}

.pross-grid .right-bdr::after {
  position: absolute;
  content: "";
  width: 6px;
  border-radius: 50px;
  height: 100%;
  background-color: #FED382;
  left: 0;
  top: 0px;
}

/*------Why cryptency CSS END------*/
/*--------------------- 4.3 Whats special about cryptency ------------------- */
.about-special {
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.benifit-box {
  width: calc(100% + 200px);
  margin-left: -200px;
}

.benifit-box .media {
  padding: 20px;
  box-shadow: 0px 1px 30px rgba(0, 0, 0, 0.1);
}

.benifit-box h3 {
  font-size: 1.27em;
  margin-top: 10px;
}

.benifit-contant {
  margin-right: 25%;
  padding: 50px;
}

/*----------Whats special about cryptency CSS END ----------*/
/* ---------------------------- 4.4 how to buy token CSS  ----------------------- */
.buy-step {
  display: flex;
  align-items: baseline;
}

.buy-step span {
  font-size: 3.3em;
  float: left;
  font-weight: 600;
  margin-right: 15px;
  opacity: 0.17;
}

.buy-step h3 {
  margin: 0;
}

.card-accepted {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  box-shadow: 0px 3px 14px rgba(0, 0, 0, 0.05);
  margin-top: 20px;
}

.card-accepted h4 {
  font-size: 1.1em;
  font-weight: 900;
  text-transform: uppercase;
}

.payment-cards i {
  font-size: 2.1em;
  margin-left: 5px;
}

/*----------how to buy token CSS END ----------*/
/*---------------------------- about CSS END -----------------------*/
/*--------------------------------------- 5. services CSS --------------------------------*/
.services-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: -30px;
}

.services-list div {
  width: calc(33.33% - 30px);
  margin: 30px 0 0px 30px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  padding: 30px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.services-list div:hover:after {
  border-radius: 50%;
  top: 9px;
}

.services-list div:after {
  content: "";
  width: 90px;
  height: 90px;
  position: absolute;
  top: 0;
  z-index: -1;
  border-radius: 0 0 50px 50px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: all ease 0.3s;
}

.services-list img {
  width: 50px;
  margin: 0 auto;
}

.services-list span {
  font-weight: 600;
  margin-top: 20px;
  display: block;
  font-size: 1.15em;
}

/*---------services CSS END --------*/
/*---------------------------- 6.Roadmap -----------------------*/
.roadmap {
  overflow: hidden;
}

.roadmap-list {
  padding-top: 30px;
  display: flex;
  align-items: flex-end;
  position: relative;
}

.roadmap-list:after {
  content: "";
  position: absolute;
  width: 100vw;
  height: 1px;
  background-color: #6E7FF3;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.road-item {
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  position: relative;
  z-index: 2;
  margin-bottom: 1px;
  min-height: 160px;
  margin-left: 15px;
}

.road-item:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  background-color: #6E7FF3;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.road-item.big {
  min-height: 310px;
}

.road-content {
  width: 100%;
  z-index: 1;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.05);
  padding: 15px;
  position: relative;
  border-left: 5px solid #6E7FF3;
}

.road-content span.road-year {
  font-size: 4.7em;
  position: absolute;
  opacity: 0.1;
  left: -60px;
  font-weight: 700;
  top: 50%;
  min-height: 94px;
  margin-top: -47px;
}

.road-content p {
  margin-bottom: 0;
  opacity: 0.7;
}

.road-content h3 {
  margin-top: 0;
  font-size: 1.1em;
}

/*----------- Roadmap CSS END ----------*/
/*--------------------------------- 7. What our client saying ------------------------------*/
.reviews .carousel {
  margin: 0 120px;
  padding: 0 70px;
  position: relative;
}

.reviews a {
  width: 50px;
  height: 50px;
  display: table;
  background: transparent !important;
  font-size: 3.5em;
  top: 50%;
  margin-top: -25px;
  transition: .3s;
  opacity: 0;
}

.reviews a i {
  vertical-align: middle;
  display: table-cell;
  text-shadow: none;
}

.reviews a:hover {
  opacity: 1 !important;
}

.reviews .media img {
  width: 160px;
  border-radius: 30px 60px 30px 60px;
}

.reviews .carousel-indicators li {
  border-color: #6E7FF3;
}

.reviews .carousel-indicators li.active {
  background-color: #6E7FF3;
}

.reviews {
  position: relative;
}

.reviews .media-left {
  padding-right: 40px;
}

.reviews i {
  color: #6E7FF3;
}

.reviews .hudge-quote {
  position: absolute;
  font-size: 6em;
}

.reviews .fa-quote-left {
  top: 0;
  left: 15px;
}

.reviews .fa-quote-right {
  right: 15px;
  bottom: 0;
}

.reviews:hover a {
  opacity: .5;
}

.reviews p {
  font-size: 1.15em;
  font-style: italic;
  line-height: 1.5;
}

.reviews ol.carousel-indicators {
  bottom: -30px;
  z-index: 0 !important;
}

.reviews span.author-name {
  font-size: 1.3em;
}

/*--------- What our client saying CSS END -----------*/
/*---------------------------- 8. CTA (Our sale starts...) CSS --------------------------*/
.cta {
  text-align: center;
  padding: 70px 0;
}

.cta .date {
  color: #FED382;
  font-size: 1.3em;
  line-height: 1.3;
}

.cta img {
  width: 90px;
}

/*--------- CTA CSS END --------*/
/*------------------------------ 9. White Paper CSS -------------------*/
#white-paper img {
  width: 260px;
  margin: 0 auto;
}

/*----------- White Paper CSS END ----------*/
/*-------------------------- 10. Our Partners ----------------------*/
.partners-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#partners img {
  margin: 0 auto;
  padding: 15px;
  width: 210px;
  transition: all ease .3s;
  opacity: 0.8;
}

#partners img:hover {
  opacity: 1;
}

/*---------- Our Partners CSS END ---------*/
/*-------------------------- 11. FaQs CSS ---------------------*/
.faq-box {
  width: 70%;
  margin: 0 auto;
  border: 5px solid #ddd;
  padding: 120px;
  position: relative;
}

.faq-icon {
  width: 300px;
  position: absolute;
  left: -150px;
  top: -150px;
  padding: 30px;
}

.faq-icon img {
  padding: 30px;
  border-radius: 50%;
}

.faq .panel {
  border: none !important;
  box-shadow: 0 3px 13px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  padding: 0;
  position: relative;
}

.faq .panel:last-child {
  margin-bottom: 0;
}

.faq .panel-heading {
  padding: 0;
}

.faq .panel-heading div {
  padding: 23px 23px 5px 75px;
  transition: all ease .3s;
  font-size: 1.35em;
  font-weight: 600;
  position: relative;
  cursor: pointer;
}

/*.faq .panel-heading div::after {
      content: "\f106";
      font: 1.8em FontAwesome;
      position: absolute;
      right: 23px;
      top: 19px;
      color: #6E7FF3; }*/
.faq .panel-heading div.collapsed {
  padding: 23px 23px 23px 75px;
}

/*.faq .panel-heading div.collapsed:after {
      content: "\f107"; }*/
.faq .panel-body {
  padding: 0px 23px 23px 75px;
  border-top: none !important;
  font-size: 1.1em;
  opacity: 0.7;
}

.faq span {
  font-size: 2em;
  font-weight: 900;
  position: absolute;
  left: 23px;
  top: 13px;
  color: #6E7FF3;
}

/*--------------- FaQ CSS END --------------*/
/*-------------------- 12. Contact-form -----------------*/
.contact-form {
  padding: 60px 130px 60px 60px;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  position: relative;
}

.contact-form input {
  height: 50px;
}

.contact-form .form-group {
  margin-bottom: 30px;
  position: relative;
}

.contact-form label {
  position: absolute;
  top: 25px;
  left: 15px;
  height: 20px;
  margin-top: -10px;
  pointer-events: none;
  transition: all 350ms cubic-bezier(0.285, 0.105, 0.465, 1.015);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75em;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  border: 1px solid transparent;
  box-shadow: none !important;
  border-radius: 0;
  padding-left: 0;
  color: #eee;
  transition: all 350ms cubic-bezier(0.285, 0.105, 0.465, 1.015);
  padding: 15px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #4c9de1;
}

.contact-form input:focus+label,
.contact-form input:valid+label,
.contact-form textarea:focus+label,
.contact-form textarea:valid+label {
  top: -10px;
  left: 0;
  color: #4c9de1;
}

#map {
  height: 600px;
  width: 100%;
}

ul.social {
  margin: 0;
}

ul.social li {
  display: inline-block;
}

ul.social a {
  color: #fff;
  font-size: 1.9em;
  margin-right: 15px;
}

ul.social a:hover {
  color: #6E7FF3;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.contact-item img {
  padding-right: 20px;
}

.contact-item span {
  font-size: 1.1em;
}

.contact-info {
  padding: 30px;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}

.notification {
  padding: 15px;
  color: #666;
  font-size: 1.05em;
  font-weight: 600;
  position: absolute;
  padding: 15px 15px 15px 55px;
  z-index: 2;
  transition: transform ease .3s;
  transform: rotate3d(1, 0, 0, 90deg);
  perspective: 1000px;
  box-shadow: 1px 4px 13px rgba(0, 0, 0, 0.05);
}

.notification:after {
  content: "";
  width: 30px;
  height: 30px;
  background-position: center;
  position: absolute;
  left: 15px;
  background-size: cover;
  top: calc(50% - 15px);
}

.notification.success,
.notification.error {
  transform: rotate(0deg);
  display: block;
}

.notification.contact {
  top: 81%;
  width: 71%;
}

.notification.subscribe {
  top: 132px;
  width: 80%;
  margin: 0 auto;
  text-align: left;
  left: 0;
  right: 0;
}

.notification.success {
  background-color: #dff0d8;
}

.notification.success:after {
  background-image: url(../images/checked.svg);
}

.notification.error {
  background-color: #f2dede;
}

.notification.error:after {
  background-image: url(../images/warning.svg);
}

/*------- Contact-form CSS END -------*/
/*----------------- 13. Footer --------------------*/
span.circular-at {
  width: 100px;
  height: 100px;
  display: block;
  padding: 20px;
  border-radius: 50%;
  margin: 0 auto 50px;
  left: 0;
  right: 0;
  box-shadow: 1px 5px 15px rgba(0, 0, 0, 0.1);
}

.subscribe-input {
  width: 100%;
  padding: 0 100px;
  height: 100px;
  border-radius: 100px;
  border: none;
  font-size: 1.4em;
  transition: .3s ease;
  border: 1px solid transparent;
  box-shadow: 1px 5px 15px rgba(0, 0, 0, 0.1);
}

.subscribe-input::placeholder {
  opacity: 0.5;
}

.subscribe-input:focus::placeholder {
  opacity: 0.3;
}

.subscribe-input:focus {
  border-color: #3D4E81;
}

.subscribe-form {
  position: relative;
  width: 80%;
  display: flex;
  margin: 50px auto;
  align-items: center;
}

.subscribe-form button {
  position: relative;
  margin-left: -100px;
  background-color: transparent;
  font-size: .8em;
  letter-spacing: 1px;
  white-space: nowrap;
}

.subscribe-form i {
  font-size: 2em;
  margin-right: -80px;
  z-index: 3;
}

ul.social {
  margin: 0;
}

ul.social li {
  display: inline-block;
}

ul.social a {
  font-size: 1.9em;
  margin-right: 15px;
  color: #6E7FF3;
}

ul.social a:hover {
  color: #3D4E81;
}

.copyright {
  margin: 0;
  font-size: 1.1em;
  padding: 20px 0;
}

/*----------Footer CSS END------`*/
/*---------------------- template-option ----------------*/
.gear-box {
  position: fixed;
  top: 30%;
  right: 0;
  background-color: #fff;
  z-index: 99;
  box-shadow: 0 3px 13px rgba(0, 0, 0, 0.1);
}

.gear {
  font-size: 1.5em;
  font-size: 1.4em;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 38px;
  cursor: pointer;
}

.template-list {
  padding: 10px;
  list-style: none;
  margin: 0;
}

.template-list a {
  display: flex;
  color: #3D4E81;
  font-weight: 900;
  text-transform: uppercase;
  font-size: .9em;
  align-items: center;
}

ul.template-list li {
  margin-bottom: 7px;
}

.template-list span {
  width: 28px;
  height: 28px;
  display: inline-block;
  position: relative;
  margin-right: 8px;
}

.template-dark-clr {
  background-color: #3D4E81 !important;
}

.template-light-clr {
  background-color: #6E7FF3 !important;
}

.template-blue-clr {
  background-color: #3455ff !important;
}

.template-black-clr {
  background-color: #1d1e20 !important;
}

/*------------------------- Loader CSS ------------------------*/
.site-loader {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  z-index: 9;
}

.loader-dots {
  margin: 40px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -webkit-animation: circleRotation 2s infinite linear;
  animation: circleRotation 2s infinite linear;
}

.loader-dots .circle {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  border-radius: 100%;
  -webkit-animation: circleBouncing 2s infinite ease-in-out;
  animation: circleBouncing 2s infinite ease-in-out;
}

.loader-dots .circle-1 {
  background-color: #813d3d;
}

.loader-dots .circle-2 {
  background-color: #4c9de1;
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes circleRotation {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes circleRotation {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes circleBouncing {

  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes circleBouncing {

  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*-------- loader CSS END  ---------*/
/*for small mobile device (iphone-4) */
@media (max-width: 480px) {
  .banner-btn-group a:last-child {
    margin-left: 15px;
  }

  .banner-btn-group a {
    padding: 0 17px !important;
  }

  .navbar-nav>li>a {
    padding: 7px 15px;
  }
}

/*for mobile device  */
@media (min-width: 481px) and (max-width: 767px) {
  .navbar-nav>li>a {
    padding: 9px 15px;
  }
}

/*for tablet device  */
@media (min-width: 768px) and (max-width: 1024px) {
  .burger {
    padding: 70px 0;
  }
}

/*for mobile device (till rotate view) */
@media (max-width: 767px) {
  #partners img {
    padding: 8px;
  }

  #white-paper img {
    margin-bottom: 50px;
    width: 100%;
  }

  .menu-btn {
    display: inline-block !important;
  }

  .timer-text i {
    margin: 0 8px;
  }

  .cryptency-graph {
    margin-bottom: 50px;
  }

  .faq-box {
    width: 90%;
    border-width: 3px;
    padding: 20px 0;
  }

  .white-paper-frame {
    display: none;
  }

  .cta {
    text-align: center;
    font-size: .8em;
  }

  .cta h2 {
    margin: 25px 0;
  }

  .card-accepted {
    font-size: .8em;
  }

  h2 {
    font-size: 2em;
    line-height: 1.2;
  }

  .burger {
    padding: 50px 0;
  }

  .graph-box {
    display: none;
  }

  .banner-text {
    padding-top: 30px;
  }

  .banner-text h1 {
    font-size: 3.3em;
    line-height: 47px;
  }

  .banner-text h1 img {
    width: 40px;
  }

  .banner {
    min-height: 100vh;
  }

  .timer-box {
    margin-top: 30px;
    font-size: 11px;
  }

  .timer-box,
  .benifit-box,
  .services-list div {
    width: 100%;
  }

  .services-list div,
  .benifit-box {
    margin-left: 0;
  }

  .align-item-center {
    display: block;
  }

  .pross-grid h2 {
    margin-bottom: 50px;
    text-align: center;
  }

  .right-bdr:after {
    display: none;
  }

  .pross-grid .pross-item {
    margin-bottom: 50px;
  }

  .pross-grid .pross-item:last-child {
    margin-bottom: 0;
  }

  .benifit-contant {
    padding: 35px 15px;
  }

  .media-item {
    margin-top: 20px;
  }

  .media-item .media {
    margin-bottom: 0;
  }

  .services-list {
    margin-top: 0;
  }

  .contact-form {
    padding: 30px 15px;
  }

  .contact-form .form-group {
    margin-bottom: 20px;
  }

  .contact-form h2 {
    margin-bottom: 30px;
  }

  .contact-form input:focus+label,
  .contact-form input:valid+label,
  .contact-form textarea:focus+label,
  .contact-form textarea:valid+label {
    top: -5px;
  }

  .contact-info {
    left: 0;
    margin-top: 50px;
  }

  .navbar-toggle.collapsed .icon-bar.btm {
    bottom: 0px;
    transition: .2s bottom ease .3s, transform ease .3s;
    transform: rotate(0deg);
  }

  .navbar-toggle.collapsed .icon-bar.mid {
    opacity: 1;
    transition: all ease .3s;
  }

  .navbar-toggle.collapsed .icon-bar.top {
    top: 0px;
    transform: rotate(0deg);
    transition: .2s top ease .3s, transform ease .3s;
  }

  .navbar-toggle .icon-bar {
    position: relative;
  }

  .navbar-toggle .icon-bar.btm {
    transition: bottom ease .3s, .2s transform ease .3s;
    bottom: 8px;
    transform: rotate(45deg);
  }

  .navbar-toggle .icon-bar.mid {
    opacity: 0;
  }

  .navbar-toggle .icon-bar.top {
    top: 8px;
    transition: top ease .3s, .2s transform ease .3s;
    transform: rotate(-45deg);
  }

  .subscribe-form {
    width: 100%;
    flex-wrap: wrap;
  }

  .subscribe-form i {
    font-size: 1.45em;
    left: 20px;
    top: 14px;
    position: absolute;
    margin-right: 0;
  }

  .subscribe-form button {
    margin: 0 auto;
  }

  .subscribe-input {
    margin-bottom: 20px;
    height: 46px;
    padding: 0px 20px 0px 48px;
    font-size: 1.1em;
  }

  .navbar {
    padding: 0;
  }

  .site-logo {
    width: 200px;
    padding: 10px;
  }

  .sticky-header .site-logo {
    width: 210px;
  }

  .faq-icon {
    display: none;
  }

  .faq .panel {
    font-size: .82em;
  }

  .faq span {
    left: 13px;
    top: 4px;
  }

  .faq .panel-body {
    padding: 0px 10px 10px 55px;
  }

  .faq .panel-heading div {
    padding: 10px 28px 5px 55px;
  }

  .faq .panel-heading div.collapsed {
    padding: 10px 28px 10px 55px !important;
  }

  .faq .panel-heading div::after {
    right: 13px;
    top: 7px;
  }

  .notification.success,
  .notification.error {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .banner-text h1 {
    font-size: 3.6em;
  }

  .navbar-header {
    width: 100%;
  }

  .navbar-nav {
    margin: 0;
    width: 100%;
  }

  .navbar-nav li {
    float: none;
  }

  .services-list {
    margin: 0 0 0 -30px;
  }
}

/*for container device  */
@media (max-width: 991px) {
  .guter {
    padding: 0;
  }

  .benifit-contant {
    margin-right: 0;
  }

  .sticky-header .navbar {
    background: #fff !important;
    border-color: #ddd;
  }

  .navbar.sticky-header a {
    color: #fff !important;
  }

  .roadmap-list {
    position: relative;
    flex-wrap: wrap;
    flex-direction: column;
    width: 67%;
    margin: 0 auto;
    left: 25px;
  }

  .roadmap-list:after {
    transform: translate(0);
    left: 0px;
    height: 100%;
    width: 1px;
  }

  .roadmap-list .road-item {
    display: block;
    width: 100%;
    margin-bottom: 50px;
    min-height: unset !important;
    margin-left: 0;
  }

  .roadmap-list .road-item:after {
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
  }

  .road-content {
    width: auto;
    margin-left: 50px;
  }

  .road-content span.road-year {
    left: -110px;
  }

  .banner-text {
    width: 100%;
  }

  /*------------------ hamburger toggle -------------------*/
  .navbar-toggle {
    position: relative;
    display: inline-block;
    width: 53px;
  }

  .navbar-toggle .icon-bar {
    background-color: #fff;
    width: 100%;
    height: 3px;
    border-radius: 100px;
  }

  .navbar-toggle .icon-bar+.icon-bar {
    margin-top: 5px;
  }

  .navbar-collapse.collapse {
    display: none !important;
  }

  .navbar-collapse.in {
    display: block !important;
  }

  .hudge-quote {
    font-size: 3em;
  }

  .reviews .media-left {
    display: block;
    margin-bottom: 20px;
    padding: 0;
  }

  .reviews .media-left img {
    width: 130px;
  }

  .reviews {
    text-align: center;
    margin: 80px 0;
  }

  .reviews .fa-quote-left {
    top: -80px;
  }

  .reviews .fa-quote-right {
    bottom: -80px;
  }

  .reviews .carousel {
    margin: 0;
    padding: 0 0 60px 0;
  }

  .reviews .carousel-indicators {
    bottom: 0 !important;
  }

  .reviews .hudge-quote {
    position: absolute;
    font-size: 5em;
    width: 65px;
    margin: 0 auto;
    display: block;
    left: 0 !important;
    right: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .faq-box {
    padding: 50px;
  }

  .faq-icon {
    width: 200px;
    left: -100px;
    top: -100px;
  }

  .subscribe-form {
    width: 93%;
  }

  .benifit-box {
    width: 100%;
    margin: 30px 0 0;
  }

  .services-list {
    margin: 0 0 0 -30px;
  }

  .contact-info {
    padding: 30px 15px;
  }

  .contact-form {
    padding: 40px 60px 40px 15px;
  }

  .contact-item img {
    padding-right: 18px;
    width: 45px;
  }

  .cta a {
    margin-left: -34px;
  }

  .card-accepted {
    font-size: .75em;
  }
}

@media (max-width: 1024px) {
  body {
    font-size: 13px;
  }

  .banner {
    border: none;
  }

  .banner:after {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    transform: rotate(0deg);
    border-radius: 0;
  }

  .banner-text {
    color: #fff;
  }
}

.link-primary {
  color: #4c9de1;
}

.link-primary:hover {
  color: #6ef39a83;
}

.text-primary {
  color: #202020;
}

.bg-primary {
  background-color: #202020;
}

.text-tertiary {
  color: #000;
}