/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/

/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/

@import url("https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700");
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");

/*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/

/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css);
@import url(normalize.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(slick.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
  box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth;
}

body {
  color: #f7e7e7;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  line-height: 1.80857;
  font-weight: normal;
  overflow-y: scroll; /* Add the ability to scroll */
  /* -ms-overflow-style: none;  
     scrollbar-width: none;     */
}

/* body::-webkit-scrollbar {
     display: none;
} */

a {
  color: #1f1f1f;
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0;
  font-weight: normal;
  position: relative;
  padding: 0 0 10px 0;
  font-weight: normal;
  line-height: normal;
  color: #111111;
  margin: 0;
}

h1 {
  font-size: 24px;
}

.GradientText {
  font-weight: 400;
  line-height: 1.15;
  background-image: linear-gradient(255deg, #75fff8 25%, #00df4a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 0.4px;
  -webkit-text-stroke-color: #fff;
  position: relative;
  z-index: 2;
  font-size: 20px;
}

.BannerBackground {
  font-weight: 600;
  line-height: 1.15;
  background-color: #00ff26;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 0.4px;
  -webkit-text-stroke-color: #fff;
  position: relative;
  z-index: 2;
  font-size: 34px;
}

.headline-div {
  /* background-color: black; */
  background-image: linear-gradient(255deg,rgba(255, 255, 255, 0.6) 25%, rgba(0,80,76,0.9));
  border-radius: 20px;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 13px;
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: #212121;
  text-decoration: none !important;
  opacity: 1;
}

button:focus {
  outline: none;
}

ul,
li,
ol {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

p {
  margin: 0px;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
}

a {
  color: #222222;
  text-decoration: none;
  outline: none !important;
}

a,
.btn {
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

img {
  max-width: 100%;
  height: auto;
}

:focus {
  outline: 0;
}

.btn-custom {
  margin-top: 20px;
  background-color: transparent !important;
  border: 2px solid #ddd;
  padding: 12px 40px;
  font-size: 16px;
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

.lead {
  font-size: 18px;
  line-height: 30px;
  color: #767676;
  margin: 0;
  padding: 0;
}

.form-control:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.navbar-form input {
  border: none !important;
}

.badge {
  font-weight: 500;
}

blockquote {
  margin: 20px 0 20px;
  padding: 30px;
}

button {
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.full {
  float: left;
  width: 100%;
}

.layout_padding {
  padding-top: 90px;
  padding-bottom: 90px;
}

.layout_padding_2 {
  padding-top: 75px;
  padding-bottom: 75px;
}

.light_silver {
  background: #f9f9f9;
}

.theme_bg {
  background: #38c8a8;
}

.margin_top_30 {
  margin-top: 30px !important;
}

.full {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
}

/**-- heading section --**/

/*---------------------------- preloader area ----------------------------*/

.loader_bg {
  position: fixed;
  z-index: 9999999;
  background: #fff;
  width: 100%;
  height: 100%;
}

.loader {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader img {
  width: 280px;
}

/*-- navigation--*/

.navigation.navbar {
  float: right;
}

.navigation.navbar-dark .navbar-nav .nav-link {
  padding: 0 25px;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
}

.navigation.navbar-dark .navbar-nav .nav-link:focus,
.navigation.navbar-dark .navbar-nav .nav-link:hover {
  color: #4ec660;
}

.navigation.navbar-dark .navbar-nav .active > .nav-link,
.navigation.navbar-dark .navbar-nav .nav-link.active,
.navigation.navbar-dark .navbar-nav .nav-link.show,
.navigation.navbar-dark .navbar-nav .show > .nav-link {
  color: #4ec660;
}

/*-- header area --*/

/*--------------------------------------------------------------------- top banner area ---------------------------------------------------------------------*/

/*--------------------------------------------------------------------- layout new css ---------------------------------------------------------------------*/

.header {
  background: black;
  width: 100%;
  /* height: 12%; */
  /* position: fixed; */
  /* z-index: 10; */
  /* top: -10; */
  /* padding: 0.5% 0.5% 0.5% 0.5%; */
}

.logo a {
  font-size: 40px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  line-height: 8%;
}

.banner_main {
  background: #1b1b1b;
  background-image: url("../images/cryptoBack3.gif");
  background-color: #1b1b1b;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 90%;
  padding-bottom: 5%;
  padding-top: 10%;
}

.text-bg h1 {
  color: #fff;
  font-size: 80px;
  line-height: 80px;
  /* padding-bottom: 25px; */
  font-weight: bold;
}

.GradientBackground {
  font-size: 20x;
  background-color: rgb(255, 0, 200);
  color: rgb(255, 255, 255);
  padding-left: 5px;
  padding-right: 5px;
  width: 100%;
  height: 30px;
  text-align: center;
  border-radius: 10%;
}

.GradientBackground:hover {
  background-color: rgb(0, 255, 85);
  color: rgb(255, 255, 255);
  border-radius: 5%;
}

/* .text-bg button {
     font-size: 20px;
     background-color: #fff;
     border-radius: 10%;
     padding-left: 5%;
     padding-right: 5%;
} */

/* .text-bg span {
     color: #fdd430;
     font-size: 40px;
     line-height: 35px;
     font-weight: bold;
} */

.text-bg p {
  color: #fff;
  font-size: 17px;
  line-height: 5%;
  /* padding: 40px 0; */
}

.text-bg a {
  font-size: 16px;
  background-color: #fff;
  color: #000;
  padding: 10px 0px;
  width: 100%;
  max-width: 190px;
  text-align: center;
  display: inline-block;
  text-transform: uppercase;
  border-radius: 5%;
}

.text-bg a:hover {
  background-color: #000;
  color: #fff;
  border-radius: 5%;
}

.text-img figure {
  margin: 0px;
}

.text-img figure img {
  width: 100%;
}

.titlepage {
  text-align: center;
  padding-bottom: 60px;
}

.titlepage h2 {
  font-size: 45px;
  color: black;
  line-height: 40px;
  font-weight: bold;
  padding: 0;
}

/** Hosting section **/

.hosting {
  padding-top: 90px;
}

.web_hosting {
  text-align: center;
}

.web_hosting figure {
  margin: 0;
}

.web_hosting p {
  color: black;
  font-size: 17px;
  line-height: 28px;
  padding: 40px 50px;
}

.web_hosting a {
  font-size: 16px;
  background-color: #000;
  color: #fff;
  padding: 10px 0px;
  width: 100%;
  max-width: 190px;
  text-align: center;
  display: inline-block;
  text-transform: uppercase;
  font-weight: 400;
}

.web_hosting a:hover {
  background-color: black;
  color: #fff;
}

/** end Hosting section **/

/** Services section **/

.Services {
  padding: 60px 0;
  background: #1b1b1b;
  font-family: Poppins;
}

.Services .titlepage {
  text-align: center;
}

.Services .titlepage h2 {
  color: #fff;
  padding-bottom: 20px;
}

.Services .titlepage p {
  color: #fff;
}

.Services .Services-box i {
  background: #fff;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  display: inline-block;
  padding-top: 19px;
}

.Services .Services-box i:hover {
  background: #ddd;
}

.Services .Services-box h3 {
  padding: 20px 0px 20px 0px;
  font-size: 20px;
  line-height: 25px;
  color: #fff;
  display: block;
  font-weight: 500;
}

.Services .Services-box {
  text-align: center;
  background-color: transparent;
  border-radius: 20px;
  border: #cecfd7 solid 2px;
  padding: 40px;
  transition: ease-in all 0.5s;
}

.Services .Services-box:hover {
  background: #8308eb;
  transition: ease-in all 0.5s;
  cursor: pointer;
}

.Services .Services-box p {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}

.read_more {
  font-size: 16px;
  background-color: #fff;
  color: #000;
  padding: 10px 0px;
  width: 100%;
  max-width: 190px;
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  margin-top: 20px;
}

.read_more:hover {
  background: #8308eb;
  color: #fff;
}

/** end Services section **/

/** why section **/

.why {
  background: #1b1b1b;
  font-family: Poppins;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
}

.why .titlepage {
  text-align: center;
}

.why .titlepage h2 {
  padding-bottom: 20px;
}

.why .titlepage p {
  color: #fff;
}

.why .why-box h3 {
  padding: 20px 0px 20px 0px;
  font-size: 20px;
  line-height: 25px;
  color: #fff;
  display: block;
  font-weight: 500;
}

.why .why-box h4 {
  padding: 20px 0px 20px 0px;
  font-size: 20px;
  line-height: 25px;
  color: #fff;
  display: block;
  font-weight: 500;
}

.why .why-box {
  text-align: center;
  background-color: transparent;
  border-radius: 20px;
  padding: 20px 20px 20px 20px;
  transition: ease-in all 0.5s;
  box-shadow: #ddd 1px 1px 10px;
}

.why .why-box p {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}

.why .why-box:hover {
  transition: ease-in all 0.1s;
  transform: scale(1.1);
}

.why .why-text h3 {
  padding: 20px 0px 20px 0px;
  font-size: 20px;
  line-height: 25px;
  color: #fff;
  display: block;
  font-weight: 500;
}

.why .why-text h4 {
  padding: 20px 0px 20px 0px;
  font-size: 20px;
  line-height: 25px;
  color: #fff;
  display: block;
  font-weight: 500;
}

.why .why-text {
  text-align: center;
  background-color: transparent;
  padding: 40px 20px 20px 20px;
}

.why .why-text p {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}

.why .why-cryp h3 {
  padding: 20px 0px 20px 0px;
  font-size: 20px;
  line-height: 25px;
  color: rgb(0, 0, 0);
  display: block;
  font-weight: 500;
}

.why .why-cryp h4 {
  padding: 20px 0px 20px 0px;
  font-size: 20px;
  line-height: 25px;
  color: #fff;
  display: block;
  font-weight: 500;
}

.why .why-cryp {
  text-align: center;
  border-radius: 20px;
  padding: 20px 20px 20px 20px;
  transition: ease-in all 0.5s;
  box-shadow: #ddd 1px 1px 10px;
  background-color: white;
  margin: 8px;
}

.why .why-cryp p {
  font-size: 16px;
  line-height: 24px;
  color: rgb(0, 0, 0);
}

.why .why-cryp:hover {
  transition: ease-in all 0.1s;
  transform: scale(1.1);
}

.bg {
  font-size: 16px;
  background-color: #090808;
  color: #fff;
  padding: 10px 0px;
  width: 100%;
  max-width: 190px;
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  margin-top: 20px;
}

.bg:hover {
  background: #8308eb;
  color: #fff;
}

/** end why section **/

/** contact section **/

.contact {
  font-family: Poppins;
}

.main_form {
  background: #1b1b1b;
  padding: 55px 55px;
  border-radius: 30px;
  margin-bottom: -58%;
}

.contact .main_form .contactus {
  border: #fff solid 1px;
  padding: 0px 19px;
  border-radius: 15px;
  width: 100%;
  height: 52px;
  background: #fff;
  color: #999999;
  font-size: 16px;
}

.contact .main_form .textarea {
  padding: 0px 19px;
  color: #999999 !important;
  width: 100%;
  border: #fff solid 1px;
  border-radius: 15px;
  padding-top: 38px;
  background: #fff;
}

.contact .main_form .send {
  font-size: 16px;
  transition: ease-in all 0.5s;
  background-color: #fff;
  color: #ef4259;
  padding: 12px 70px;
  margin: 0 auto;
  display: block;
  border-radius: 30px;
}

.contact .main_form .send:hover {
  background-color: #8308eb;
  transition: ease-in all 0.5s;
  color: #fff;
}

#contact *::placeholder {
  color: #999999;
  opacity: 1;
}

.current {
  color: #fff;
  margin-top: -4px;
  position: absolute;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover,
.dropdown:hover .dropbtn {
  /* background-color: red; */
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/** end contact section **/

/** footer **/

.footer {
  font-family: Poppins;
  background: #1b1b1b;
}

.cont {
  text-align: center;
  margin-top: 31%;
}

.cont h3 {
  color: #fff;
  font-size: 45px;
  line-height: 30px;
  font-weight: bold;
  padding: 30px 0px 0px 0px;
}

.cont span {
  color: #fff;
  font-size: 30px;
  line-height: 30px;
  padding: 30px 0px 30px 0px;
  display: inline-block;
  font-weight: bold;
}

.cont p {
  color: #fff;
  font-size: 17px;
  line-height: 30px;
  padding: 0 130px;
  padding-bottom: 60px;
}

.copyright {
  padding: 20px 0px;
  background: #fff;
}

.copyright p {
  color: #1e1e1e;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
}

.copyright a {
  color: #1e1e1e;
}

.copyright a:hover {
  color: black;
}

.css-famcce {
  position: relative;
  margin: auto;
}

.css-famcce section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
}

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
/** end footer **/