/*===============================================
Template Name: Cryptera – ICO & Crypto Multipurpose HTML5 Template 
Author: https://templatemonster.com/authors/crelify agency
Description: Cryptera is a modern, clean and fully responsive HTML5 template designed for ICO, crypto, blockchain, NFT, web3, and financial startups. It’s built with the latest web technologies and perfect for showcasing crypto-related businesses and digital products.
Version: 1.0.0
Text Domain: cryptera 
Tags: crypto, ico, token, blockchain, bitcoin, finance, business, startup, web3, nft, exchange, multipurpose, responsive, html5


================================================*/


/*===============================
    START TABLE OF CONTENTS
================================*/
/*
01.cryptera name Nav Menu Area Css
02.             banner area css
03.             token area css
04.             marquee area css
05.             section title Css
07.             feature area css
8.              brand area css
9.              roadmap area css
10.             team Area css
11.             advisor Area css
12.             odometer Area css
13.             faq Area css
14.             contact Area css
15.             footer Area css
16.             breadcumb Area css
17.             blog area css
18.             Blog2 columns area css
19.             Blog details area css
20.             Scroll Up Css 
21.             Loader Css
*/

/*===============================
    End TABLE OF CONTENTS
================================*/


/* <-- staer cryptera Name Nav Menu Section Css --> */

.cryptera_Name_nav_manu {
    transition: 0.5s;
    background: #060000;
    position: absolute;
    z-index: 99;
    width: 100%;
}
  
#sticky-header.cryptera_Name_nav_manu.style-2.cryptera_Name_nav_manu {
    top: -22px;
    left: -56px;
}
  
.cryptera_Name_nav_manu.style-2.cryptera_Name_nav_manu {
    margin: 21px 30px 0 56px;
    transition: 0.5s;
}
.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    background: #050a1e !important;
    z-index: 500;
}

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

nav.cryptera_Name_menu {
    align-items: center !important;
    justify-content: center;
    display: flex;
}

.cryptera_Name_menu ul {
    list-style: none;
    display: inline-block;
    padding: 0;
}

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

.cryptera_Name_menu > ul > li > a {
    display: block;
    margin: 35px 18px;
    -webkit-transition: 0.5s;
    text-decoration: none;
    font-size: 16px;
    color: #ffffff;
    font-weight: 5;
    text-transform: uppercase;
}

.cryptera_Name_menu > ul > li > a:hover {
    color: #166cfb;
}

nav.cryptera_Name_menu ul li a i {
    display: inline-block;
    font-size: 12px;
    padding-left: 5px;
}

nav.cryptera_Name_menu span {
    font-size: 13px;
    padding-left: 6px;
    font-family: FontAwesome;
    opacity: 0.5;
}
.logo {
    position: relative;
    z-index: 1;
}

/* <-- End cryptera Name Nav Menu Section Css --> */

/* <-- Start Sub Menu Style Css --> */

.cryptera_Name_menu ul .sub-menu {
    position: absolute;
    left: 0;
    top: 150%;
    width: 215px;
    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;
}

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

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

.cryptera_Name_menu ul .sub-menu li a {
    display: block;
    padding: 12px 20px;
    margin: 0;
    letter-spacing: normal;
    font-size: 13px;
    font-weight: 500;
    -webkit-transition: 0.1s;
    visibility: inherit !important;
    color: #211e3b !important;
    text-decoration: none;
    transition: 0.5s;
    font-family: "Josefin Sans";
    text-transform: uppercase;
    border-top: 1px dashed #166cfb;
    border-bottom: 1px dashed #166cfb;
}

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

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

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

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

.cryptera_Name_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;
}

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

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

.cryptera_Name_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%;
}

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

.cryptera_Name_nav_manu.sticky .logo_img {
    display: none;
}

.main_sticky {
    display: none;
}

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

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

.cryptera_Name_nav_manu.sticky a.dtbtn {
    color: #fff;
    background: #166cfb;
    border: 2px solid #166cfb;
}

.cryptera_Name_nav_manu.sticky a.dtbtn:hover {
    color: #166cfb;
}

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

/* <-- end Sub Menu Style Css --> */


/*  <-- Start Header Button Css --> */

.header-button {
    text-align: right;
}

.header-button a {
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
    background: #166cfb;
    padding: 12px 32px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: 0.5s;
    border-radius: 5px;
}

.header-button a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #fff;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 5px;
}

.header-button a:hover:before {
    width: 100%;
}

.header-button a:hover {
   color: #166cfb;
}

/*  <-- end Header Button Css --> */


/*  <-- start banner section Css --> */

.banner-section {
    padding: 220px 0 120px;
    background-image: url(../images/banner-images/banner-bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.banner-section .banner-content h5 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 12px;
    padding-left: 40px;
    position: relative;
    z-index: 1;
}

.banner-section .banner-content h5:before {
    position: absolute;
    content: "";
    left: 0px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 25px;
    height: 2px;
    background: #166cfb;
    transition: 0.5s;
}

.banner-section .banner-content h1 {
    color: #ffffff;
    font-size: 70px;
    font-weight: 600;
    line-height: 70px;
    margin: 0 0 0;
}

.banner-section .banner-content p {
    color: #cfcfcf;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    width: 82%;
    margin: 40px 0 30px;
}

.banner-section .banner-content .banner-btn {
    display: flex;
    align-items: center;
    gap: 30px;
}

.banner-section .banner-content .banner-btn a.btn1 {
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
    background: #166cfb;
    padding: 13px 28px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: 0.5s;
    border-radius: 5px;
}

.banner-section .banner-content .banner-btn a.btn1 i {
    font-size: 16px;
    color: #ffffff;
    padding-left: 5px;
    transition: 0.5s;
}

.banner-section .banner-content .banner-btn a.btn1:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #fff;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 5px;
}

.banner-section .banner-content .banner-btn a.btn1:hover:before {
    width: 100%;
}

.banner-section .banner-content .banner-btn a.btn1:hover,
.banner-section .banner-content .banner-btn a.btn1:hover i {
    color: #166cfb;
}

.banner-section .banner-content .banner-btn a.btn2 {
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
    background: #166cfb;
    padding: 13px 28px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: 0.5s;
    border-radius: 5px;
}

.banner-section .banner-content .banner-btn a.btn2 i {
    font-size: 16px;
    color: #ffffff;
    padding-left: 5px;
    transition: 0.5s;
}

.banner-section .banner-content .banner-btn a.btn2:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #fff;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 5px;
}

.banner-section .banner-content .banner-btn a.btn2:hover:before {
    width: 100%;
}

.banner-section .banner-content .banner-btn a.btn2:hover,
.banner-section .banner-content .banner-btn a.btn2:hover i {
    color: #166cfb;
}

.banner-section .banner-thumb {
    text-align: right;
    animation: 5.0s ease 0s infinite normal none running bounce;
}

.banner-section .banner-thumb img {
    width: 100%;
}

/* home page two */
.banner-section.two {
    position: relative;
    z-index: 1;
}
.banner-section.two video.banner-inner-bg {
    position: absolute;
    top: 39.5%;
    right: 0;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    z-index: -1;
    opacity: 0.3;
}

/* home page four */
.water_image_bg {
  width: 100%;
  height: 100vh;
  background-image: url(../images/banner-images/banner-bg.png);
  background-size: cover;
}

.breadcumb-section.water_image_bg {
    width: 100%;
    height: 450px;
    background-image: url(../images/banner-images/banner-bg.png);
    background-size: cover;
}
 
/*  <-- end banner section Css --> */


/*  <-- start token section Css --> */

.token-section {
    padding: 120px 0 120px;
    background: #000000;
}

.sales-content-list {
    border: 1px solid #ffffff33;
    border-radius: 5px;
    padding: 40px 30px 30px;
    background: #0C0C0C;
}

.sales-content-list h3.sales-title {
    color: #ffff;
    font-weight: 600;
    font-size: 30px;
    margin: 0 0 30px;
}

.sales-content-list ul {
    list-style: none;
}

.sales-content-list ul li {
    color: #ffffff99;
    font-weight: 500;
    font-size: 20px;
    transition: 0.5s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ffffff33;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.sales-content-list ul li span {
    color: #166cfb;
    text-transform: capitalize;
}

.token-box {
    border: 1px solid #ffffff33;
    padding: 20px 30px;
    border-radius: 5px;
    margin-bottom: 30px;
}

.token-box h5 {
    color: #fff;
    font-weight: 500;
    font-size: 20px;
    margin: 0 0 0;
}

.token-box p {
    color: #ffffff99;
    font-weight: 500;
    font-size: 16px;
    margin: 8px 0 0;
}

.sales-content-list h4.token-title {
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    margin: 0 0 30px;
}

.style-inner #clockdiv > div {
    display: inline-block;
}
  
.style-inner #clockdiv div > span {
    margin-right: 10px;
}
  
.style-inner span.days, .hours, .minutes, .seconds {
    display: inline-block;
    font-size: 24px;
    color: #166cfb;
    font-weight: 600;
    text-align: center;
    width: 100px;
    height: 80px;
    line-height: 80px;
    border-radius: 5px;
    background: #ffffff;
}

.style-inner span.hours{
    color:#000000;
}

.style-inner span.minutes{
   color: #166cfb;
}

.style-inner span.seconds{
    color: #000000;
}

.style-inner .count-text {
    font-size: 16px;
    color: #efefef;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    margin-top: 20px;
}

.sales-content-list .token-btn a {
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
    background: #166cfb;
    padding: 12px 30px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: 0.5s;
    border-radius: 5px;
    margin-top: 40px;
}

.sales-content-list .token-btn a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #fff;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 5px;
}

.sales-content-list .token-btn a:hover:before {
    width: 100%;
}

.sales-content-list .token-btn a:hover:hover {
   color: #166cfb;
}

/*  <-- end token section Css --> */




/*  <-- start marquee section Css --> */

.marquee-section {
    padding: 80px 0;
    background: #1c1c1c;
}

.marquee-section .marquee {
    position: relative;
    --duration: 30s;
    --gap: 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
}

.marquee-section .marquee-block {
    flex-shrink: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    justify-content: space-around;
    gap: 0px;
    min-width: 100%;
    -webkit-animation: scroll 30s linear infinite;
    animation: scroll 30s linear infinite;
}

.marquee-block h3 {
    font-size: 80px;
    line-height: 90px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 500;
}

@-webkit-keyframes scroll {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(calc(-100% - var(--gap)));
      transform: translateX(calc(-100% - var(--gap)));
    }
  }

  @keyframes scroll {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(calc(-100% - var(--gap)));
      transform: translateX(calc(-100% - var(--gap)));
    }
  }


/*  <-- end marquee section Css --> */

/*  <-- start all section title Css --> */

/* style one */
.section-title {
    margin-bottom: 58px;
}

.section-title h5 {
    display: inline-block;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 12px;
    position: relative;
    z-index: 1;
}

.section-title h5:before {
    position: absolute;
    content: "";
    left: -40px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 25px;
    height: 2px;
    background: #166cfb;
    transition: 0.5s;
}

.section-title h1 {
    color: #ffff;
    font-size: 48px;
    line-height: 55px;
    font-weight: 600;
    margin: 0 0 0;
}

/* style two */

.section-title-two {
    margin-bottom: 58px;
}

.section-title-two h5 {
    display: inline-block;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 12px;
    position: relative;
    z-index: 1;
    padding-left: 40px;
}

.section-title-two h5:before {
    position: absolute;
    content: "";
    left: 0px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 25px;
    height: 2px;
    background: #166cfb;
    transition: 0.5s;
}

.section-title-two h1 {
    color: #ffff;
    font-size: 48px;
    line-height: 55px;
    font-weight: 600;
    margin: 0 0 0;
}

.section-title-two p {
    color: #ffffffb3;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin: 18px 0 0;
    width: 95%;
    transition: 0.5s;
}

/*  <-- end all section title Css --> */

/*  <-- start feature section Css --> */

section.feature-section {
    padding: 112px 0 90px;
    background: #000;
}

.feature-box {
    text-align: center;
    backdrop-filter: blur(50px);
    background: rgba(217, 217, 217, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 50px 10px 39px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
    transition: 0.5s;
}

.feature-box:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #1c1c1c;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 10px;
}

.feature-box:hover:before {
    width: 100%;
}

.feature-box .feature-icon img {
    transition: 0.5s;
}

.feature-box:hover .feature-icon img {
    webkit-animation: wooo 2s linear infinite;
    animation: wooo 2s linear infinite;
}

.feature-box h3 {
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    margin: 30px auto 20px;
    transition: 0.5s;
}

.feature-box:hover h3 {
    color: #166cfb;
}

.feature-box p {
    color: #ffffffb3;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin: 0 auto 0;
    width: 100%;
    transition: 0.5s;
}

/*wood animation*/
@keyframes wooo {
    0% {
      transform: rotate3d(0, 0, 0);
    }
    50% {
      transform: rotate3d(0, 1, 0, 180deg);
    }
    100% {
      transform: rotate3d(0, 1, 0, 359deg);
    }
  }

/*  <-- end feature section Css --> */


/*  <-- start brand section Css --> */
.brand-section {
    border-top: 1px solid #2c2c2c;
    padding: 120px 0 120px;
    background: #000;
}

.swiper-slide {
    text-align: center;
    border: 1px solid #ffffff4d;
    border-radius: 5px;
    padding: 40px 10px;
    overflow: hidden;
}

.swiper h3.brand-title {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 30px;
}


/*  <-- end brand section Css --> */


/*  <-- start roadmop section Css --> */

.roadmap-section {
    border-top: 1px solid #2c2c2c;
    padding: 110px 0 120px;
    background: #000;
}

.roadmap-thumb {
    position: relative;
    z-index: 1;
    animation: 5.0s ease 0s infinite normal none running bounce;
}

.roadmap-thumb .roadmap-shape {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.roadmap-box {
    border-right: 4px solid #166cfb;
    text-align: right;
    padding: 40px 30px 40px 0;
}

.roadmap-box .roadmap-item {
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.roadmap-box .roadmap-item:before {
    position: absolute;
    content: "";
    right: -30px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 20px;
    height: 2px;
    background: #ffffff;
}

.roadmap-box .roadmap-item h4 {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    margin: 0 0 0;
}

.roadmap-box .roadmap-item h5 {
    color: #ffffffb3;
    font-size: 16px;
    font-weight: 500;
    margin: 10px 0 0;
}

.roadmap-box.two {
    border-right: none;
    text-align: left;
    padding: 40px 0px 10px 10px;
    margin-top: 35px;
}

.roadmap-box.two .roadmap-item {
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.roadmap-box.two .roadmap-item:after {
    position: absolute;
    content: "";
    left: -30px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 20px;
    height: 2px;
    background: #166cfb;
}

.roadmap-box.two .roadmap-item:before {
    display: none;
}


@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translatex(0);
  }
  40% {
    transform: translatex(-30px);
  }
  60% {
    transform: translatex(-15px);
  }
}


/*  <-- end roadmop section Css --> */


/*  <-- start team section Css --> */
.team-section {
    padding: 112px 0 90px;
    background-image: url(../images/team-image/team-bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.team-box {
    background: #1c1c1c;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    overflow: hidden;
    padding: 30px 30px 30px;
    margin-bottom: 30px;
    border-radius: 10px;
}

.team-box .team-thumb {
    line-height: 0;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    border-radius: 10px;
}
.team-box .team-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #ffffff0d;
    transition: 0.5s;
    margin: auto;
    border-radius: 50%;
}

.team-box:hover .team-thumb:before {
    width: 100%;
    transition: 0.5s;
}

.team-box .team-thumb img {
    width: 100%;
    border-radius: 10px;
    transition: 0.5s;
}

.team-box:hover .team-thumb img {
    border-radius: 50%;
}

.team-box .team-content {
    padding-top: 30px;
}

.team-box h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 0;
    transition: 0.5s;
}

.team-box h3:hover {
    color: #166cfb;
}

.team-box p {
    color: #ffffffcc;
    font-size: 16px;
    font-weight: 400;
    margin: 12px 0 10px;
}

.team-box .team-share {
    display: inline-block;
    height: 45px;
    width: 45px;
    line-height: 45px;
    background: #166cfb;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.team-box .team-share i {
    color: #ffff;
    font-size: 16px;
    transition: 0.5s;
}

.team-box .team-social-icon {
    position: absolute;
    left: 0;
    bottom: 30px;
    transform: translateY(0%);
    opacity: 0;
    transition: 0.5s;
}

.team-box .team-social-icon.active {
    transform: translatex(38%);
    opacity: 1;
}

.team-box .team-social-icon a {
    display: inline-block;
    color: #ffff;
    font-size: 16px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    background: #166cfb;
    text-align: center;
    border-radius: 10px;
    transition: 0.5s;
    margin-right: 8px;
}

.team-box .team-social-icon a:hover {
    border-radius: 50px;
}

/*  <-- end team section Css --> */


/*  <-- start advisor section Css --> */

.advisor-section {
    background: #1c1c1c;
    padding: 110px 0 50px;
}

.skill {
  margin-bottom: 30px;
}

.skill p {
    margin: 0 0 10px;
    font-weight: 500;
    color: #fff;
    font-size: 18px;
}

.skill-bar {
    position: relative;
    width: 0;
    height: 8px;
    transition: width 0.5s ease;
    background: linear-gradient(268deg, #2b7cff, #8b3bff);
}

.skill-bar span {
    position: absolute;
    right: 10px;
    top: -30px;
    font-size: 18px;
    font-weight: 500;
    color: #2b7cff;
}

.advisor-button a {
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
    background: #166cfb;
    padding: 12px 30px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: 0.5s;
    border-radius: 5px;
    margin-top: 20px;
}

.advisor-button a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #fff;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 5px;
}

.advisor-button a:hover:before {
    width: 100%;
}

.advisor-button a:hover {
   color: #166cfb;
}

.advisor-thumb {
    text-align: center;
    animation: 5.0s 
ease 0s infinite normal none running bounce;
}

/*  <-- end advisorsection Css --> */


/*  <-- start counter section Css --> */
.counter-section {
    background: #1c1c1c;
    padding: 60px 0 90px;
}

.counter-box {
    text-align: center;
    border: 1px solid #ffffff4d;
    border-radius: 5px;
    padding: 30px 10px 30px;
    margin-bottom: 30px;
}

.counter-box h2 {
    color: #ffff;
    font-size: 60px;
    font-weight: 600;
    margin: 12px 0 10px;
}

.counter-box h4 {
    color: #166cfb;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 0;
    transition: 0.5s;
}

.counter-box h4:hover {
    color: #ffff;
}

.counter-box p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 0;
}
.counter-section.Up {
    padding: 120px 0 90px;
}

/*  <-- end counter section Css --> */


/*  <-- start faq section Css --> */

.faq-section {
    padding: 120px 0 100px;
    background-image: url(../images/faq-image/faq-bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.faq-social-icon ul {
    list-style: none;
}

.faq-social-icon ul li {
    display: inline-block;
    margin-right: 10px;
}

.faq-social-icon ul li a {
    display: inline-block;
    height: 90px;
    width: 90px;
    line-height: 90px;
    border: 2px solid #166cfb;
    text-align: center;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: 0.5s;
    color: #ffffff;
    font-size: 40px;
}

.faq-social-icon ul li a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #166cfb;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 50%px;
}

.faq-social-icon ul li a:hover:before {
    width: 100%;
}

.faq-social-icon ul li a:hover {
    border-color: #166cfb;
}

/* tab section */
.accordion li {
  list-style: none;
  padding: 0px 0px 20px;
}

.accordion li a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    font-weight: 600;
    font-size: 20px;
    color: #232323 !important;
    background: #ffffff;
    padding: 20px 30px;
    z-index: 1;
}

.accordion li p {
    display: none;
    padding: 30px 30px;
    margin: 0;
    background: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    width: 100%;
}
.accordion a:before {
  width: 2px;
  height: 15px;
  background: #166cfb;
  position: absolute;
  right: 41px;
  content: " ";
  top: 22px;
  transform: rotate(0deg);
  transition: all 0.5s ease-in-out;
}

.accordion a:after {
  width: 15px;
  height: 2px;
  background: #166cfb;
  position: absolute;
  right: 35px;
  content: " ";
  top: 28px;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

/* Active */
.accordion a.active:after {
  transform: rotate(0deg);
  -webkit-transition: all 0.5s ease-in-out;
  background: #fff;
}

.accordion a.active:before {
  display: none;
}

.accordion a.active {
  background: #166cfb;
  color: #fff !important;
}

.accordion li a.active span {
  color: #fff;
}

/*  <-- end faq section Css --> */


/*  <-- start footer section Css --> */

.contact-section {
    padding: 112px 0 120px;
    background: linear-gradient(268deg, #2b7cff, #8b3bff);
}

.contact-form-area {
    background: #ffffff1a;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    padding: 40px 30px 30px;
}

.contact-input-box label {
    margin-bottom: 10px;
    font-weight: 500;
    color: #ffffff;
    font-size: 20px;
}

.contact-input-box input, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 500;
    resize: none;
    background: transparent;
}

.contact-input-box input::placeholder {
    color: #ffffff !important;
}

.contact-input-box textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 500;
    resize: none;
    background: transparent;
    height: 200px;
}

.contact-input-box textarea::placeholder {
    color: #ffffff !important;
}

.contact-input-btn button {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    transition: 0.5s;
}

.contact-input-btn button:hover {
    background: #0056d2;
}

.success-msg {
    display: none;
    text-align: center;
    color: #ffffff;
    font-weight: 500;
    margin-top: 10px;
    font-size: 16px;
}

.contact-thumb {
    animation: movebounce 5.00s infinite;
}

.contact-thumb img {
    width: 100%;
}

@keyframes movebounce {
    0% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
    }
    50% {
      -webkit-transform: translateY(20px);
              transform: translateY(20px);
    }
    100% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
    }
  }

/*  <-- end contact section Css --> */


/*  <-- start footer section Css --> */
.footer-section {
    padding: 115px 0 0px;
    background-image: url(../images/footer-image/footer-bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.footer-widget-content .footer-desc p {
    color: #ffffffcc;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    width: 100%;
    margin: 25px 0 30px;
}

.footer-widget-content .footer-social-icon ul {
    list-style: none;
}

.footer-widget-content .footer-social-icon ul li {
    display: inline-block;
}

.footer-widget-content .footer-social-icon ul li a {
    display: inline-block;
    color: #ffff;
    font-size: 16px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    border:1px solid #ffff;
    text-align: center;
    border-radius: 50px;
    transition: 0.5s;
    margin-right: 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.footer-widget-content .footer-social-icon ul li a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #166cfb;
    transition: 0.5s;
    z-index: -1;
    margin: auto;
    border-radius: 50px;
}

.footer-widget-content .footer-social-icon ul li a:hover:before {
    width: 50px;
}

.footer-widget-content .footer-social-icon ul li a:hover{
    border-color: #166cfb;
    animation: bd-bounce 800ms ease-out alternate;
    -webkit-animation: bd-bounce 800ms ease-out alternate;
}

.footer-widget-content .footer-title h3 {
    color: #ffff;
    font-weight: 600;
    font-size: 30px;
    margin: 0 0 25px;
} 

.footer-widget-content .footer-menu ul {
    list-style: none;
}

.footer-widget-content .footer-menu ul li {
    margin-bottom: 16px;
}

.footer-widget-content .footer-menu ul li a {
    color: rgba(255, 255, 255, 0.6);
    display: inline-block;
    font-weight: 500;
    font-size: 18px;
    transition: 0.5s;
}

.footer-widget-content .footer-menu ul li a:hover {
    color: #166cfb;
}

.footer-widget-content .subscribe-area p {
    color: #ffffffcc;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    width: 100%;
    margin: 0px 0 30px;
}

.subscribe-area .subscribe-form input {
    display: inline-block;
    width: 100%;
    height: 56px;
    padding-left: 30px;
    background: transparent;
    border: 1px solid #ffffffb3;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
}

.subscribe-area .subscribe-form input::placeholder {
    color: #ffffffb3;
}

.subscribe-area .subscribe-form button {
    background: linear-gradient(268deg, #2b7cff, #8b3bff);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    transition: 0.5s;
    margin-top: 20px;
}

@keyframes bd-bounce {
    0%, 100%, 20%, 50%, 80% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0) translateX(0%);
    }
    40% {
      -webkit-transform: translateY(-8px);
      -ms-transform: translateY(-8px);
      transform: translateY(-8px) translateX(0%);
    }
    60% {
      -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
      transform: translateY(-4px) translateX(0%);
    }
}

/*  <-- start footer copyright section Css --> */

.copyright-text.text-center {
    border-top: 1px solid #ffffff4d;
    padding: 30px 0;
    margin-top: 75px;
}

.copyright-text.text-center p {
    font-size: 16px;
    font-weight: 500;
    color: #ffff;
    margin: 0 0 0;
}

.copyright-text.text-center p span {
    color: #166cfb;
}

/*  <-- end footer copyright section Css --> */


/*  <-- end footer section Css --> */


/*------ start prgoress section css ------------*/

.prgoress_indicator {
    position: fixed;
    right: 50px;
    bottom: 20px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(187, 247, 55, 0.2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

.prgoress_indicator.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
}

.prgoress_indicator::after {
    position: absolute;
    content: "\f062";
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    color: #166cfb;
    left: 0;
    top: 0;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_indicator::before {
  position: absolute;
  content: "\f062";
  font-family: "Font Awesome 5 Free";
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  -webkit-background-clip: text;
    background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  z-index: 2;
  transition: all 200ms linear !important;
}

.prgoress_indicator:hover ::after {
  color: #2871ff;
}

.prgoress_indicator:hover ::before {
  opacity: 1;
}

.prgoress_indicator svg path {
  fill: none;
}

.prgoress_indicator svg.progress-circle path {
    stroke: #166cfb;
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear !important;
}

/*------ start prgoress section css ------------*/


/*=======================================================*/
/*------ start all inner page section css ------------*/
/*=======================================================*/

/*------ start breadcumb section css ------------*/
.breadcumb-section {
    padding: 250px 0 150px;
    background: url(../images/breadcumb-image/breadcumb-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.breadcumb-section .breadcumb-content {
    margin-top: -50px;
}

.breadcumb-content .breadcumb-title h3 {
    display: inline-block;
    font-size: 50px;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 15px;
}

.breadcumb-content ul li {
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
}

.breadcumb-content ul li a {
    font-size: 16px;
    text-transform: uppercase;
    color: #166cfb;
    font-weight: 500;
}

.breadcumb-content ul li a span {
    display: inline-block;
    margin: 0 10px 0;
}

/*------ end breadcumb section css ------------*/


/*------ start map section css ------------*/
.map-section h5 {
    display: none;
}

/*------ end map section css ------------*/

/*------ start blog section css ------------*/
.blog-section {
    padding: 120px 0 90px;
}

.blog-box {
    border: 1px solid #000;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 30px;
    padding: 30px 30px 25px;
}

.blog-box .blog-thumb {
    line-height: 0;
    position: relative;
    z-index: 1;
    transition: 0.5s;
}

.blog-box .blog-thumb img {
    width: 100%;
}

.blog-box .blog-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #1c1c1c14;
    transition: 0.5s;
    margin: auto;
}

.blog-box:hover .blog-thumb:before {
    width: 100%;
}

.blog-box .blog-content {
    padding: 27px 0 0; 
}

.blog-box .blog-content h2 {
    margin: 0 0 0;
}
.blog-box .blog-content h2 a {
    color: #232321;
    font-size: 23px;
    font-weight: 600;
    line-height: 30px;
    width: 100%;
    transition: 0.5s;
}

.blog-box .blog-content h2 a:hover {
    color: #166cfb;
}

.blog-box .blog-content p {
    color: #525252;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 15px 0 20px;
    width: 94%;
}

.blog-box .blog-content a {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    color: #111;
    transition: 0.5s;
}

.blog-box .blog-content a:hover {
    color: #166cfb;
}


/*------ end blog section css ------------*/


/*------ start blog2 columns section css ------------*/

.blog2-columns-section {
    padding: 120px 0 90px;
}

.blog-box.two-columns .blog-content h2 {
    margin: 0 0 0;
}

.blog-box.two-columns .blog-content h2 a {
    font-size: 30px;
    line-height: 40px;
    font-weight: 600;
}

/*------ end blog2 columns section css ------------*/


/*------ start blog details section css ------------*/
.blog-details-section {
    padding: 120px 0 120px;
}

.blog-details-box .blog-details-thumb {
    line-height: 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: 0.5s;
}

.blog-details-box .blog-details-thumb img {
    width: 100%;
}

.blog-details-box .blog-details-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: #00000014;
    transition: 0.5s;
    margin: auto;
}

.blog-details-box .blog-details-thumb:hover:before {
    width: 100%;
}

.blog-details-box .blog-details-content {
    padding: 30px 0 0;
}

.blog-details-box h5 {
    font-size: 20px;
    text-transform: uppercase;
    color: #166cfb;
    font-weight: 500;
    margin: 0 0;
}

.blog-details-box h2 {
    font-size: 40px;
    line-height: 40px;
    font-weight: 600;
    color: #232321;
    margin-top: 15px;
}

.blog-details-box p {
    color: #525252;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin: 20px 0 40px;
    width: 100%;
}

.blog-details-list {
    margin-bottom: 30px;
}

.blog-details-list ul {
    list-style: none;
}

.blog-details-list ul li {
    color: #000;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 10px;
}

.blog-details-title {
    display: inline-block;
    background: #e5e2e2;
    padding: 30px;
    border-left: 5px solid #166cfb;
}


.blog-details-title h5 {
    color: #166cfb;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 10px;
}

.blog-details-title h3 {
    color: #232323;
    font-size: 22px;
    line-height: 30px;
    margin: 0 0 0;
    width: 100%;
}



/*------ end blog details section css ------------*/


/*------ start loader section css ------------*/

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

.loader {
    position: relative;
    display: block;
    z-index: 201;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    transition: all 1s 1s ease;
    border: 15px solid transparent;
    border-top-color: #000;
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    color: #ffffff;
}

.loader:before,
.loader:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    transform: rotateX(0deg);
    animation: 1s spin linear infinite;
}

.loader:after {
    color: #166cfb;
    transform: rotateY(0deg);
    animation-delay: .5s;
}

@keyframes rotate {
    0% {
      transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotateZ(360deg);
    }
  }

  @keyframes rotateccw {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }

  @keyframes spin {
    0%,
    100% {
      box-shadow: .2em 0px 0 0px currentcolor;
    }
    12% {
      box-shadow: .2em .2em 0 0 currentcolor;
    }
    25% {
      box-shadow: 0 .2em 0 0px currentcolor;
    }
    37% {
      box-shadow: -.2em .2em 0 0 currentcolor;
    }
    50% {
      box-shadow: -.2em 0 0 0 currentcolor;
    }
    62% {
      box-shadow: -.2em -.2em 0 0 currentcolor;
    }
    75% {
      box-shadow: 0px -.2em 0 0 currentcolor;
    }
    87% {
      box-shadow: .2em -.2em 0 0 currentcolor;
    }
  }


.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 50%;
    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;
}

.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;
}

/*------ end loader section css ------------*/



/*=======================================================*/
/*------ end all inner page section css ------------*/
/*=======================================================*/