/*===============================================
Template Name: cryptobit - Transport & Logistics HTML5 Template
Author:  https://tamplatemonostar.com/author/dreamit
Description: Description
Version: 1.0.0
Text Domain: cryptobit
Tags:   delivery company, grid, logistics, moving, moving company, shipping, courier, shipping company, storage, transport, transport company, warehouse.
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. cryptobit Header Top Menu Area Css
02. cryptobit Nav Menu Area Css 
03. cryptobit Slider Area Css
04. cryptobit Breadcumb Area Css
05. cryptobit Featrue Area Css
06. cryptobit Section Title Css
07. cryptobit About Area Css
08. cryptobit Service Area Css
09. cryptobit Service Details Area Css
10. cryptobit Video Area Css
11. cryptobit Why Choose Us Area Css
12. cryptobit Portfolio Area Css 
13. cryptobit Portfolio Details Area Css
14. cryptobit Testimonial Area Css
15. cryptobit Pricing Area Css
16. cryptobit Skill Area Css
17. cryptobit Team Area Css
18. cryptobit Counter Area Css
19. cryptobit Contact Area Css
20. cryptobit Mission Vision Area Css
21. cryptobit Mission Area Css
22. cryptobit Contact Address Area Css
23. cryptobit Blog Area Css
24. cryptobit Blog Details Area Css
25. cryptobit Case Study Area Css
26. cryptobit Faq Area Css
27. cryptobit News Letter Area CSS
28. cryptobit Footer Area CSS
29. cryptobit Scrollup Section
30. cryptobit Search Popup Css
31. cryptobit Loader Css
=======================*/

/*=====================================
<--  cryptobit Nav Menu Area Css -->
=======================================*/

.cryptobit_nav_manu {
  padding: 0 100px;
  background: transparent;
  position: relative;
  margin-bottom: -110px;
}
.sticky {
  left: 0;
  margin: auto;
  position: fixed !important;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
  background: #10102e !important;
  transition: 0.5s;
  z-index: 999;
  padding: 10px 0 10px;
}

.sticky .logo {
  margin-top: 0;
}

.sticky.cryptobit_nav_manu:before {
  display: none;
}

/* cryptobit Menu Css*/

nav.cryptobit_menu {
  text-align: right;
}

.cryptobit_menu ul {
  list-style: none;
  display: inline-block;
}

.cryptobit_menu > ul > li {
  display: inline-block;
  position: relative;
  z-index: 2;
}

.cryptobit_menu > ul > li > a {
  display: block;
  margin: 30px 25px;
  -webkit-transition: 0.5s;
  font-weight: 500;
  font-size: 17px;
  color: #fdfdfd;
  text-transform: capitalize;
}
nav.cryptobit_menu span {
  font-size: 13px;
  padding-left: 6px;
  font-family: FontAwesome;
  opacity: 0.5;
}

.cryptobit_menu > ul > li > a:hover {
  color: #01de8e;
}

/*** Sub Menu Style ***/
.cryptobit_menu ul .sub-menu {
  position: absolute;
  left: 0;
  top: 130%;
  width: 217px;
  text-align: left;
  background: #fff;
  margin: 0;
  z-index: 1;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
}

.cryptobit_menu ul li:hover > .sub-menu {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  visibility: visible;
  top: 100%;
  opacity: 1;
  z-index: 9999;
}

.cryptobit_menu ul .sub-menu li {
  position: relative;
}

.cryptobit_menu ul .sub-menu li a {
  display: block;
  padding: 12px 20px;
  margin: 0;
  line-height: 1.3;
  letter-spacing: normal;
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  -webkit-transition: 0.1s;
  visibility: inherit !important;
  color: #211e3b !important;
}

.cryptobit_menu ul .sub-menu li:hover > a,
.cryptobit_menu ul .sub-menu .sub-menu li:hover > a,
.cryptobit_menu ul .sub-menu .sub-menu .sub-menu li:hover > a,
.cryptobit_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover > a {
  background: #ff3c00;
  color: #fff !important;
}

/* sub menu 2 */

.cryptobit_menu ul .sub-menu .sub-menu {
  left: 100%;
  top: 130%;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  visibility: hidden;
}

.cryptobit_menu ul .sub-menu li:hover > .sub-menu {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  visibility: visible;
  top: 0%;
}

/* sub menu 3 */

.cryptobit_menu ul .sub-menu .sub-menu li {
  position: relative;
}

.cryptobit_menu ul .sub-menu .sub-menu .sub-menu {
  right: 100%;
  left: auto;
  top: 130%;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  visibility: hidden;
}

.cryptobit_menu ul .sub-menu .sub-menu li:hover > .sub-menu {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  visibility: visible;
  top: 0%;
}

/* sub menu 4 */

.cryptobit_menu ul .sub-menu .sub-menu .sub-menu li {
  position: relative;
}

.cryptobit_menu ul .sub-menu .sub-menu .sub-menu .sub-menu {
}

.cryptobit_menu ul .sub-menu .sub-menu .sub-menu li:hover > .sub-menu {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  visibility: visible;
  top: 0%;
}

.cryptobit_menu li a:hover:before {
  width: 100%;
}

.cryptobit_nav_manu.sticky .logo_img {
  /*display: none;*/
}

.main_sticky {
  display: none;
}

.cryptobit_nav_manu.sticky .main_sticky {
  display: inherit;
}

.sticky .cryptobit_menu li a {
  color: #fff;
}

.cryptobit_nav_manu.sticky a.dtbtn {
  color: #fff;
  background: #f16722;
  border: 2px solid #f16722;
}

.cryptobit_nav_manu.sticky a.dtbtn:hover {
  color: #43baff;
}

.mobile-menu.mean-container {
  overflow: hidden;
}

/* Header Contact Right CSS */

.header-src-btn {
  display: inline-block;
  position: relative;
  padding-right: 30px;
}

.header-src-btn::before {
  position: absolute;
  content: "";
  right: 0;
  top: -55px;
  width: 2px;
  height: 70px;
  background: #ddd;
}

.header-contact-btc {
  float: right;
}

.search-box-btn.search-box-outer {
  position: absolute;
  bottom: 4px;
  right: 35px;
}

.header-contact {
  display: inline-block;
}

.header-contact-icon {
  display: inline-block;
}

.header-contact-text {
  display: inline-block;
}

.header-contact-icon {
  display: inline-block;
  padding-left: 25px;
  padding-right: 20px;
}

.header-contact-text p {
  font-size: 18px;
  color: #0e1317;
  font-weight: 700;
  margin-bottom: 0;
}

.header-contact-text span {
  font-size: 14px;
  font-weight: 700;
  color: #6d7a8e;
}

.header-contact-icon img {
  margin-top: -30px;
}

.sticky .search-box-btn.search-box-outer i {
  color: #fff;
}

.sticky .header-contact-text p {
  color: #fff;
}

/* Style Two */

.cryptobit_nav_manu.style-two {
  padding: 0 100px;
  position: relative;
  margin-bottom: -100px;
  border-bottom: 1px solid #3c4e68;
  z-index: 4;
}

.cryptobit_nav_manu.style-two:before {
  height: 110%;
  width: 24%;
  background: #ffda2b;
  clip-path: inherit;
  z-index: 1;
}

.cryptobit_nav_manu.style-two.inner-page:before {
  background: linear-gradient(to right, #f02830 6%, #ff5e14 96%);
}

.cryptobit_nav_manu.style-two .logo {
  position: inherit;
  margin-top: 0;
  z-index: 1;
}

.cryptobit_nav_manu.style-two .cryptobit_menu > ul > li > a {
  color: #fff;
  margin: 32px 10px 30px;
}

.cryptobit_nav_manu.style-two .header-src-btn {
  padding-right: 0;
}

.cryptobit_nav_manu.style-two .search-box-btn.search-box-outer {
  position: inherit;
  bottom: inherit;
  right: inherit;
  margin-left: 15px;
}

.cryptobit_nav_manu.style-two .search-box-btn.search-box-outer i {
  color: #fff;
}

.cryptobit_nav_manu.style-two .header-src-btn::before {
  display: none;
}

.cryptobit_nav_manu.style-two .header-contact-text span {
  color: #ffda2b;
}

.cryptobit_nav_manu.style-two .header-contact-text p {
  color: #fff;
}

.cryptobit_nav_manu.style-two .header-contact-btc {
  position: relative;
}

.cryptobit_nav_manu.style-two .header-contact-btc::before {
  position: absolute;
  content: "";
  left: -10px;
  top: -17px;
  height: 155%;
  width: 1px;
  background: #3c4e68;
}

.cryptobit_nav_manu.style-two.inner-page .header-contact-text span {
  color: #6d7a8e;
}
.menu-button a {
  background: #01de8e;
  padding: 9px 33px;
  display: inline-block;
  border-radius: 7px;
  color: #fff;
  transition: 0.5s;
}
.menu-button a:hover {
  background: #fff;
  color: #01de8e;
}

@import url("css.css");

.a {
  color: #e7484f;
}
.b {
  color: #f68b1d;
}
.c {
  color: #fced00;
}
.d {
  color: #009e4f;
}
.e {
  color: #00aac3;
}
.f {
  color: #732982;
}

.rainbow {
  background-color: rgb(1, 222, 142);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  padding: 8px 16px;
  text-align: center;
}
.rainbow.rainbow-5 a {
  color: #fff;
}
.rainbow-5:hover {
  background-image: linear-gradient(
    to right,
    #e7484f,
    #e7484f 16.65%,
    #f68b1d 16.65%,
    #f68b1d 33.3%,
    #fced00 33.3%,
    #fced00 49.95%,
    #009e4f 49.95%,
    #009e4f 66.6%,
    #00aac3 66.6%,
    #00aac3 83.25%,
    #732982 83.25%,
    #732982 100%,
    #e7484f 100%
  );
  animation: slidebg 2s linear infinite;
}

@keyframes slidebg {
  to {
    background-position: 20vw;
  }
}

/***======================================================
<--Start cryptobit Banner area Css -->
======================================================***/
.banner-area {
  padding: 100px 0 100px;
  background: url(../image/slider.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 900px;
}
.banner-content {
  margin-left: 35px;
}
.banner-title h1 {
  color: rgb(255, 255, 255);
  font-size: 48px;
  font-weight: 600;
}
.banner-title span {
  color: #01de8e;
}
.banner-user {
  display: flex;
  margin-top: 20px;
  margin-bottom: -10px;
}
.user-text {
  margin-left: 15px;
  position: relative;
  top: -10px;
}
.user-text h6 {
  color: rgb(255, 255, 255);
  font-weight: 600;
  line-height: 25px;
  font-size: 20px;
}
.user-text p {
  color: rgb(1, 222, 142);
  line-height: 25px;
  font-weight: 500;
  font-size: 15px;
}
.banner-button a {
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  padding: 12px 28px;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  font-family: "Inter";
}
.banner-button a::before {
  position: absolute;
  content: "";
  background: #8559fd;
  height: 100%;
  width: 35%;
  display: inline-block;
  border-radius: 5px;
  left: 0;
  top: 0;
  transition: 0.5s;
  z-index: -1;
}
.banner-button a:hover::before {
  width: 100%;
}
/***======================================================
<--End cryptobit Banner area Css -->
======================================================***/

/***======================================================
<--Start cryptobit Brand area Css -->
======================================================***/
.brand-area {
  background: url(../image/bg-bg.jpg);
  padding: 80px 0 15px 0;
  margin-top: -22px;
}
.single-brand {
  background: #161622;
  padding: 30px 15px 30px 30px;
  overflow: hidden;
  border-radius: 5px;
}
/***======================================================
<--End cryptobit Brand area Css -->
======================================================***/

/***======================================================
<--Start cryptobit about area Css -->
======================================================***/
.about-area {
  background: url(../image/about-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 80px 0 80px 0;
}
.about-content {
  margin-top: 66px;
}
.section-title h5 {
  color: #01de8e;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 15px;
  text-transform: capitalize;
}
.section-title h3 {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
}
.section-title p {
  font-size: 16px;
  width: 100%;
  margin: 12px auto 0;
}
.about-list ul {
  margin-top: 25px;
}
.about-list ul li {
  list-style: none;
  color: #fff;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  margin-top: 10px;
  font-size: 16px;
  font-weight: 400;
}
.about-list ul li i {
  color: #845afa;
  margin-right: 8px;
  font-size: 16px;
}
.banner-button.margin-top {
  margin-top: 30px;
}
/***======================================================
<--End cryptobit about area Css -->
======================================================***/

/***======================================================
<--Start cryptobit expart area Css -->
======================================================***/
.expart-team-area {
  background: url(../image/bg-bg.jpg);
  padding: 20px 0 50px 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.expart-team-thumb {
  position: relative;
}
.expart-team-thumb img {
  width: 100%;
  border-radius: 10px;
}
.expart-team-thumb:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: rgba(151, 80, 249, 0.5);
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.expart-team-icon {
  position: absolute;
}
.expart-team-icon ul li {
  list-style: none;
  display: inline;
  margin-right: 10px;
}
.expart-team-icon ul li a {
  position: relative;
  display: inline-block;
  top: -120px;
  left: 50px;
  color: #845afa;
  background: #fff;
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  border: 1px solid #845afa;
  border-radius: 3px;
  font-size: 18px;
  transition: 0.3s;
  opacity: 0;
}
.expart-team-icon ul li a:hover {
  color: #01de8e;
  border-color: #01de8e;
  background: transparent;
}
.single-expart-team:hover .expart-team-icon ul li a {
  opacity: 1;
  position: relative;
  top: -160px;
}
.expart-team-text {
  text-align: center;
  margin-top: 20px;
}
.expart-team-text h5 {
  font-size: 20px;
  color: #fff;
}
.expart-team-text p {
  color: #01de8e;
  font-weight: 500;
  padding-top: 5px;
  font-size: 15px;
}
.expert-content {
  margin-top: 50px;
  margin-left: 15px;
}
/***======================================================
<--End cryptobit expart area Css -->
======================================================***/

/***======================================================
<--Start cryptobit roadmap area Css -->
======================================================***/
.roadmap-area {
  background: url(../image/roadmap-bg.jpg);
  padding: 0 0 80px 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.roadmap-area.two {
  padding: 80px 0 70px 0;
}
.section-title.text-center p {
  width: 55%;
  margin: 18px auto 0;
  font-size: 16px;
  margin-bottom: 45px;
}
.single-roadmap {
  background: #14141e;
  border-radius: 10px;
  position: relative;
  margin-bottom: 20px;
}
.roadmap-left-text {
  transform: rotate(-90deg);
  overflow: hidden;
  position: absolute;
  top: 35%;
  left: -39px;
  background: #01de8e;
  padding: 6px 20px;
  border-radius: 0 0 5px 5px;
}
.roadmap-left-text h5 {
  font-size: 16px;
  font-weight: 600;
  position: relative;
  top: -5px;
}
.roadmap-content {
  padding: 35px 25px 15px 70px;
}
.roadmap-title h2 {
  font-size: 22px;
}
.roadmap-date h5 {
  color: #01de8e;
  margin: 8px 0 18px;
  font-weight: 600;
  font-size: 16px;
}
.roadmap-desc p {
  font-size: 15px;
  width: 93%;
  line-height: 24px;
}
.roadmap-math h1 {
  color: #9e4cf8;
  font-size: 80px;
  margin-top: 80px;
  margin-left: 15px;
  font-family: "Inter", sans-serif;
}
.roadmap-math.left h1 {
  float: right;
}
/***======================================================
<--End cryptobit roadmap area Css -->
======================================================***/

/***======================================================
<--Start cryptobit countdawn area Css -->
======================================================***/
.countdown-area {
  background: url(../image/bg-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.border-botom {
  border-bottom: 1px solid #326e58;
  padding: 0 0 200px 0;
}

div#clockdiv {
  width: 465px;
  height: 162px;
  text-align: center;
  background: #222;
  background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);
  border: 1px solid #111;
  border-radius: 5px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
  margin: auto;
  padding: 24px 0;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

div#clockdiv:before {
  content: "";
  width: 8px;
  height: 65px;
  background: #444;
  background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
  border: 1px solid #111;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  display: block;
  position: absolute;
  top: 48px;
  left: -10px;
}

div#clockdiv:after {
  content: "";
  width: 8px;
  height: 65px;
  background: #444;
  background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
  border: 1px solid #111;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  display: block;
  position: absolute;
  top: 48px;
  right: -10px;
}

.count-bx {
  display: inline-block;
}

.count-bx span {
  width: 92px;
  max-width: 92px;
  font: bold 48px "Droid Sans", Arial, sans-serif;
  text-align: center;
  color: #111;
  background-color: #ddd;
  background-image: -webkit-linear-gradient(top, #bbb, #eee);
  border-top: 1px solid #fff;
  border-radius: 3px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
  margin: 0 7px;
  padding: 18px 0;
  display: inline-block;
  position: relative;
}

.count-bx span:after {
  content: "";
  width: 100%;
  height: 1px;
  background: #eee;
  border-top: 1px solid #333;
  display: block;
  position: absolute;
  top: 48%;
  left: 0;
}

.smalltext {
  color: #9e4cf8;
  text-shadow: 1px 1px 0px #000;
  text-align: center;
  text-transform: uppercase;
  padding: 2px 0 0;
}

/***======================================================
<--End cryptobit countdawn area Css -->
======================================================***/

/***======================================================
<--Start cryptobit subscribe area Css -->
======================================================***/
.subscribe-area {
  background: url(../image/footer-b.jpg);
  padding: 100px 0 90px 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.Subscribe-text h3 {
  font-size: 24px;
  margin-bottom: 36px;
}
.subscribe-form input {
  width: 32%;
  background: #1d1d2a;
  height: 55px;
  border-color: transparent !important;
  font-size: 16px;
  padding: 5px 25px !important;
  border: 1px solid #ccc;
  border-radius: 3px;
  position: relative;
  left: -62px;
}
.subscribe-form input:focus {
  outline: 0;
}
.subscribe-form input[type="text"] {
  color: #fff;
}
.subscribe-form button {
  display: inline-block;
  background: #9e4cf8;
  padding: 12px 43px;
  color: #fff;
  font-weight: 500;
  border: 1px solid #9e4cf8;
  position: absolute;
  right: 310px;
}
.subscribe-form button:focus {
  outline: 0;
  border-color: #9e4cf8;
}
.subscribe-form button i {
  margin-left: 7px;
  font-size: 20px;
}
/***======================================================
<--End cryptobit subscribe area Css -->
======================================================***/

/***======================================================
<--Start cryptobit footer area Css -->
======================================================***/
.footer-area {
  padding: 40px 0px 30px 0px;
  border-top: 1px solid #585151;
  background-color: #0b0b11;
}
.footer-top p {
  margin-bottom: 30px;
}
.footer-quick h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 35px;
}
.footer-list ul li {
  list-style: none;
  margin-top: 15px;
}
.footer-list ul li a {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.footer-list ul li a i {
  margin-right: 7px;
  font-size: 14px;
}
.footer-content-two {
  text-align: center;
}
.footer-thumb {
  margin-bottom: 30px;
}
.footer-desc p {
  font-size: 16px;
  color: #6c6c6c;
}
.footer-list-icon {
  margin-top: 20px;
}
.footer-list-icon ul li {
  list-style: none;
  display: inline-block;
  margin-right: 9px;
}
.footer-list-icon ul li a {
  color: #fff;
  font-size: 20px;
}
.footer-content-three {
  text-align: right;
}
/***======================================================
<--end cryptobit footer area Css -->
======================================================***/

/***======================================================
<--Start cryptobit breadcump area Css -->
======================================================***/
.breadcump-area {
  background: url(../image/brtc.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 260px 0 155px;
  text-align: center;
  background-attachment: scroll;
}
.breadcump-content h3 {
  font-size: 55px;
  color: #fff;
  margin-bottom: 10px;
}

/***======================================================
<--End cryptobit breadcump area Css -->
======================================================***/

/***======================================================
<--Start cryptobit about area two Css -->
======================================================***/
.about-area-two {
  background: url(../image/bg-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 100px 0 60px 0;
}
.about-thumb-two {
  position: relative;
}
.about-thumb-two img {
  width: 100%;
  border-radius: 11px;
}
.about-video-icon a {
  display: inline-block;
  color: #01de8e;
  font-size: 26px;
  font-weight: 500;
  position: absolute;
  top: 210px;
  left: 260px;
}
.about-video-icon a i {
  background: #fff;
  height: 60px;
  width: 60px;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  border-radius: 50%;
  line-height: 60px;
  color: #01de8e;
  font-size: 26px;
  position: relative;
  -webkit-animation: ripple-red 1s linear infinite;
  animation: ripple-red 1s linear infinite;
  -webkit-transition: 0.5s;
}
.video-icon a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  height: 99px;
  width: 99px;
  background: rgba(12, 90, 219, 1);
  z-index: -1;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: pulse-border 1500ms ease-out infinite;
  animation: pulse-border 1500ms ease-out infinite;
}

@keyframes pulse-border {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0)
      scale(1.5);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
*/ .v-overlay .video-icon a i {
  border: 0px solid #fff;
  font-size: 30px;
}
/* Style One */
.single-video.style-one .video-icon,
.single-video.style-three .video-icon {
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

@-webkit-keyframes ripple-red {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(2241, 42, 2, 0);
  }
}

.about-content-two {
  margin-left: 15px;
}

/***======================================================
<--End cryptobit about area two Css -->
======================================================***/

/***======================================================
<--Start cryptobit project area two Css -->
======================================================***/
.project-area {
  padding: 80px 0 100px 0;
}
.row.mar-botom {
  padding-bottom: 40px;
}
.project-thumb img {
  width: 100%;
  border-radius: 12px;
}
.container-fulid {
  width: 90%;
  left: 0;
  right: 0;
  margin: auto;
}
.banner-button.tex-centr {
  text-align: center;
  margin-top: 50px;
}
/***======================================================
<--End cryptobit project area two Css -->
======================================================***/

/***======================================================
<--Start cryptobit meat team area two Css -->
======================================================***/
.meat-team-area {
  background: url(../image/call-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 80px 0 80px 0;
}
.meat-team-button a {
  display: inline-block;
  background: transparent;
  color: #fff;
  padding: 16px 30px;
  border-radius: 5px;
  border: 1px solid #9e4cf8;
  transition: 0.5s;
  font-size: 18px;
  font-weight: 500;
}
.meat-team-button a:hover {
  background: #9e4cf8;
}
/***======================================================
<--End cryptobit meat team area two Css --> -->
======================================================***/

/***======================================================
<--Start cryptobit Articles area two Css --> -->
======================================================***/
.Article-area {
  padding: 100px 0 80px 0;
}
.article-content-left {
  margin-top: 30px;
}
.single-article {
  margin-bottom: 30px;
}
.article-thumb img {
  width: 100%;
}
.article-content {
  background: #1d1d2a;
  padding: 22px 22px 22px;
  text-align: left;
}
.article-date span {
  color: #01de8e;
  font-size: 14px;
}
.article-title h2 {
  color: #fff;
  font-size: 18px;
  margin: 10px 0 20px;
}
.article-title h2 a {
  font-weight: 700;
}
.article-title h2 a:hover {
  color: #fff;
}
.article-text p {
  margin: 16px 0 15px;
}
.article-button a {
  font-size: 14px;
  color: #9e4cf8;
  transition: 0.5s;
}
.article-button a:hover {
  color: #fff;
}

/***======================================================
<--End cryptobit Articles area two Css --> -->
======================================================***/

/***======================================================
<--Start cryptobit About area three Css --> -->
======================================================***/
.about-area-three {
  background: url(../image/bg-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.row.bodder-tp {
  border-top: 1px solid #2a2626;
  padding: 80px 0 80px 0;
}

/***======================================================
<--End cryptobit About area three Css --> -->
======================================================***/

/***======================================================
<--Start cryptobit About area three Css --> -->
======================================================***/
.about-area-three {
  background: url(../image/bg-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.row.bodder-tp {
  border-top: 1px solid #2a2626;
  padding: 80px 0 80px 0;
}

/***======================================================
<--End cryptobit About area three Css --> -->
======================================================***/

/***======================================================
<--Start cryptobit blog area  Css --> -->
======================================================***/
.blog-area {
  background-color: #0b0b11;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 100px 0 70px 0;
}
.single-blog {
  margin-bottom: 30px;
}
.blog-content-left {
  margin-top: 30px;
}
.blog-thumb img {
  width: 100%;
  border-radius: 5px;
}
.blog-content {
  background: #1d1d2a;
  padding: 22px 22px 22px;
  text-align: left;
}
.blog-date {
  position: relative;
}
.blog-date::after {
  content: "";
  position: absolute;
  height: 14px;
  width: 1px;
  background-color: #616161;
  bottom: 7px;
  left: 40px;
}
.blog-date a {
  margin: 0 24px 0 0;
}
.blog-date a:hover {
  color: #01de8e;
}
.blog-date span {
  color: #616161;
  font-size: 16px;
}
.blog-title h2 {
  color: #fff;
  font-size: 21px;
  margin: 10px 0 20px;
}
.blog-title h2 a {
  font-weight: 800;
}
.blog-title h2 a:hover {
  color: #fff;
}

/***======================================================
<--End cryptobit blog area  Css --> -->
======================================================***/

/***======================================================
<--Start cryptobit blog details area  Css --> -->
======================================================***/
.blog-details-area {
  background-color: #0b0b11;
  padding: 100px 0 100px;
}
.blog-details-thumb a img {
  width: 100%;
}
.blog-details-content-left {
  padding: 28px 45px 40px;
  background: #151520;
}
.blog-details-date {
  color: #6c6c6c;
  font-size: 16px;
}
.blog-details-title h2 {
  color: #fff;
  font-size: 40px;
  margin-top: 10px;
  margin-bottom: 23px;
}
.blog-details-text p {
  color: #6c6c6c;
  line-height: 1.6;
}
.blog-details-text p.active {
  background-color: #000;
  padding: 30px 30px 30px;
  border-radius: 5px;
  box-shadow: 0 0 7px rgb(255 255 255 / 10%);
  border-left: 6px solid #01de8e;
  font-size: 19px;
  font-style: italic;
}
.blog-details-text p.active cite {
  display: block;
  font-style: italic;
  margin-top: 15px;
}
.entry-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 40px 0 0;
  padding: 40px 0 0;
}
.blog-details-list-icon ul li {
  list-style: none;
  display: inline-block;
  float: right;
  margin: 0 5px 5px 0px;
}
.blog-details-list-icon ul li a {
  display: inline-block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  border-radius: 5px;
  transition: 0.3s;
}
.blog-details-list-icon ul li a:hover {
  background: #01de8e;
  border: 1px solid #01de8e;
  color: #fff;
}
.comment-title h3 {
  color: #fff;
  margin-bottom: 60px;
  font-size: 24px;
  position: relative;
}

.input-box input {
  background: #1c1c22 !important;
  height: 52px;
  width: 100%;
  outline: 0;
  padding: 6px 20px !important;
  border-radius: 8px;
  border-color: transparent;
  margin-bottom: 15px;
}
.input-box input:focus {
  border: 1px solid #aec6ef;
}
.comment-box textarea {
  background: #1c1c22 !important;
  height: 150px !important;
  width: 100%;
  outline: 0;
  padding: 6px 20px !important;
  border-radius: 8px;
  border-color: transparent;
}
.comment-box textarea:focus {
  border: 1px solid #aec6ef;
}
.comment-button button {
  background: #01de8e;
  padding: 14px 39px;
  border-radius: 7px;
  color: #fff;
  display: inline-block;
  border: 0;
  transition: 0.3s;
  margin-top: 10px;
}
.comment-button button:hover {
  color: #01de8e;
  background: #fff;
}

.blog-content-right-one {
  background: #151520;
  padding: 35px 30px 35px;
  margin-bottom: 40px;
  border-radius: 8px;
}
.blog-details-title-right h1 {
  font-size: 21px;
  margin-bottom: 40px;
  position: relative;
}
.blog-details-title-right h1::before {
  content: "";
  position: absolute;
  height: 3px;
  width: 88px;
  bottom: -11px;
  background: #aec6ef;
}

.blog-content-right-two {
  background: #151520;
  padding: 35px 30px 35px;
  margin-bottom: 40px;
  border: 8px;
}
.blog-content-right-two ul li {
  list-style: none;
  display: block;
  line-height: 1.6;
  transition: 0.5s;
}
.blog-details-list-right-two ul li a:hover {
  color: #01de8e;
}
.single-blog-details-right-three {
  background: #151520;
  padding: 35px 30px 35px;
  margin-bottom: 40px;
  border-radius: 8px;
}
.single-blog-details {
  display: flex;
  margin-bottom: 20px;
}
.blog-details-thumb a img {
  width: 100%;
  border-radius: 4px;
  height: auto;
}
.blog-details-content {
  margin-left: 20px;
}
.blog-details-title h6 a {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  font-family: "Inter", sans-serif;
}
.blog-details-title h6 a:hover {
  color: #fff;
}
/***======================================================
<--End cryptobit blog details area  Css --> -->
======================================================***/

/***======================================================
<--Start cryptobit footer botom area  Css --> -->
======================================================***/

.footer-botom-area {
  background-color: #111a3a;
  padding: 195px 0 0px;
}
.footer-botom.text-center {
  border-top: 1px solid rgba(255, 255, 255, 0.23);
  padding: 20px 0;
}

/***======================================================
<--End cryptobit footer botom area  Css --> -->
======================================================***/

/***======================================================
<-- cryptobit Faq Area Css -->
======================================================***/

.video-icon {
  display: inline-block;
}

.video-icon-cda a {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 100%;
  color: #ff3c00;
  background: #fff;
  display: inline-block;
  text-align: center;
  position: relative;
  -webkit-animation: hassan 1s linear infinite;
  animation: hassan 1.5s linear infinite;
  -webkit-transition: 0.5s;
  font-size: 28px;
  z-index: 1;
}

@-webkit-keyframes hassan {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4),
      0 0 0 5px rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4),
      0 0 0 5px rgba(255, 255, 255, 0.4);
  }
  100% {
    -webkit-box-shadow: 0 0 0 50px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3),
      0 0 0 40px rgba(255, 255, 255, 0);
  }
}
@keyframes hassan {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4),
      0 0 0 5px rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4),
      0 0 0 5px rgba(255, 255, 255, 0.4);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4),
      0 0 0 40px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4),
      0 0 0 40px rgba(255, 255, 255, 0);
  }
}

/*
<!-- ============================================================== -->
<!-- cryptobit Scrollup Section -->
<!-- ============================================================== -->*/

.scroll-area {
  position: relative;
  z-index: 999;
}

.scroll-area .go-top {
  position: fixed;
  cursor: pointer;
  top: 0;
  right: 30px;
  color: #ffffff;
  background-image: -moz-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
  background-image: -webkit-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
  z-index: 9999;
  width: 45px;
  text-align: center;
  height: 45px;
  line-height: 42px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.9s ease-out 0s;
  -moz-transition: all 0.9s ease-out 0s;
  border-radius: 10px;
}

.scroll-area .go-top i {
  position: absolute;
  top: 50%;
  left: -4px;
  right: 0;
  margin: 0 auto;
  font-size: 15px;
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
}

.scroll-area .go-top i:last-child {
  opacity: 0;
  visibility: hidden;
  top: 60%;
}

.scroll-area .go-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: linear-gradient(to right, #00132b 0%, #00132b 100%);
  background-image: -ms-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  border-radius: 100%;
}

.scroll-area .go-top:focus,
.scroll-area .go-top:hover {
  color: #fff;
}

.scroll-area .go-top:focus::before,
.scroll-area .go-top:hover::before {
  opacity: 1;
  visibility: visible;
}

.scroll-area .go-top:focus i:first-child,
.scroll-area .go-top:hover i:first-child {
  opacity: 0;
  top: 0;
  visibility: hidden;
}

.scroll-area .go-top:focus i:last-child,
.scroll-area .go-top:hover i:last-child {
  opacity: 1;
  visibility: visible;
  top: 50%;
}

.scroll-area .go-top.active {
  top: 95%;
  -webkit-transform: translateY(-98%);
  -moz-transform: translateY(-98%);
  opacity: 1;
  visibility: visible;
  border-radius: 0;
  right: 30px;
  border-radius: 100%;
}

.top-wrap {
  position: relative;
}

.top-wrap .go-top-button {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  top: 3px;
  z-index: 1;
  background: #ff3c00;
}

.top-wrap .go-top-button i {
  font-size: 20px;
  font-weight: 700;
  padding-left: 4px;
  color: #fff;
}

.top-wrap .go-top-button::after {
  z-index: -1;
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 45px;
  height: 45px;
  -webkit-animation: ripple 1.6s ease-out infinite;
  -moz-animation: ripple 1.6s ease-out infinite;
  opacity: 0;
  background-image: -moz-linear-gradient(0deg, #f02830 0%, #f02830 100%);
  background-image: -webkit-linear-gradient(0deg, #f02830 0%, #f02830 100%);
  border-radius: 100%;
}

.top-wrap .go-top-button:hover {
  background-color: #222;
  color: #fff;
}

.scroll-area.home-two .top-wrap .go-top-button {
  background: #00aff5;
}
.scroll-area.home-two .top-wrap .go-top-button::after {
  background-image: -moz-linear-gradient(0deg, #00aff5 0%, #00aff5 100%);
  background-image: -webkit-linear-gradient(0deg, #00aff5 0%, #00aff5 100%);
}

@keyframes ripple {
  0%,
  35% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}

/*==========================================
    cryptobit Search Popup Css
=========================================*/

.search-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
  margin-top: -540px;
  transform: translateY(-100%);
  background-color: rgba(0, 0, 0, 0.9);
  -webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
  -moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
  -o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 1500ms cubic-bezier(0.86, 0, 0.07, 1); /* easeInOutQuint */
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-timing-function: cubic-bezier(
    0.86,
    0,
    0.07,
    1
  ); /* easeInOutQuint */
}

.search-popup {
  width: 100%;
}

.search-active .search-popup {
  transform: translateY(0%);
  margin-top: 0;
}

.search-popup .close-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 75%;
  margin: 0 auto;
  margin-top: -200px;
  border-radius: 50%;
  text-align: center;
  background: linear-gradient(to right, #f02830 6%, #ff5e14 96%);
  width: 70px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-bottom: 3px solid #ffffff;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  opacity: 0;
  visibility: hidden;
  height: 70px;
  line-height: 70px;
  text-align: center;
}

.search-popup .close-search i {
  position: relative;
  font-size: 30px;
  color: #ffffff;
}

.search-active .search-popup .close-search {
  visibility: visible;
  opacity: 1;
  top: 50%;
  -webkit-transition-delay: 1500ms;
  -moz-transition-delay: 1500ms;
  -ms-transition-delay: 1500ms;
  -o-transition-delay: 1500ms;
  transition-delay: 1500ms;
}

.search-popup form {
  position: absolute;
  max-width: 700px;
  top: 50%;
  left: 15px;
  right: 15px;
  margin: -35px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  background-color: #111111;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.search-active .search-popup form {
  transform: scaleX(1);
  -webkit-transition-delay: 1200ms;
  -moz-transition-delay: 1200ms;
  -ms-transition-delay: 1200ms;
  -o-transition-delay: 1200ms;
  transition-delay: 1200ms;
}

.search-popup .form-group {
  position: relative;
  margin: 0px;
  overflow: hidden;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"] {
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 50px;
  color: #000000;
  height: 70px;
  width: 100%;
  padding: 10px 30px;
  background-color: #ffffff;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  font-weight: 500;
  text-transform: capitalize;
}

.search-popup .form-group input[type="submit"],
.search-popup .form-group button {
  position: absolute;
  right: 30px;
  top: 0px;
  height: 70px;
  line-height: 70px;
  background: transparent;
  text-align: center;
  font-size: 24px;
  color: #000000;
  padding: 0;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover {
  color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder {
  color: #000000;
}

.search-popup .close-search.style-two {
  position: absolute;
  right: 25px;
  left: auto;
  color: #ffffff;
  width: auto;
  height: auto;
  top: 25px;
  margin: 0px;
  border: none;
  background: none !important;
  box-shadow: none !important;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.search-popup .close-search.style-two i {
  font-size: 20px;
  color: #ffffff;
}

.search-box-btn.search-box-outer i {
  font-size: 15px;
  display: inline-block;
  color: #0a2c3d;
  cursor: pointer;
}

/*===========================
<-- cryptobit Loader Css -->
=============================*/

.loader-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transition: 0.8s 1s ease;
  z-index: 666;
}

.loader {
  position: relative;
  display: flex;
  z-index: 201;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: red;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  transition: all 1s 1s ease;
  justify-content: space-between;
  animation: rotate 1s linear infinite;
}

.loader::before,
.loader::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid #fff;
  animation: prixClipFix 2s linear infinite;
}
.loader::after {
  border-color: #ff3d00;
  animation: prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse;
  inset: 6px;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

.loader-wrapper .loder-section {
  position: fixed;
  top: 0;
  width: 52%;
  height: 100%;
  background: #111;
  z-index: 2;
}

.loader-wrapper .loder-section.left-section {
  left: 0;
  transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
  right: 0;
  transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
  left: -100%;
}

.loaded .loder-section.right-section {
  right: -100%;
}

.loaded .loader-wrapper {
  visibility: hidden;
}

.loaded .loader {
  top: -100%;
  opacity: 0;
}