@charset "UTF-8";
/*==================
Author       : LollipopTheme
Template Name: Dexon - Data Science & Analytics HTML5 Template
Author URI : https://themeforest.net/user/lollipoptheme
Description: Data Science, Dexon.Science, Analytics, Html5 ,Bootstrap Responsive,2 Layout,
Version      : 1.0
================================*/
/*------------------------------------------------------------------
[Table of contents]

1. Basic
2. Typography 
3. Heading CSS 
4. BUTTONS STYLE 
5. Preloader css
4. Navigation
5. Banner
6. About
7. Services
8. Work Process 
9. Clients 
10. Portfolio
11. Testimonials
12. CTA
13. Pricing
14. Team 
15. COUNTER
16. Blog 
17. Contact 
18. Subscribe Form 
19. Footer / #footer
20. FIXED TO TOP
21. Blog PAGES
22. Inner Pages
-------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto&display=swap");
body, html {
  width: 100%;
  height: 100%;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 30px;
  font-weight: 400;
  color: #666666;
  position: relative;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

p {
  opacity: 0.9;
}

/*--------------------
 01.TYPOGRAPHY
-----------------*/
h1,
h2,
h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0px;
  color: #2F2E41;
}

/*----------------------------------------*/
/* 02 Heading CSS
/*----------------------------------------*/
h1 {
  font-size: 72px;
  line-height: 1.2;
}

h2 {
  font-size: 46px;
  line-height: 56px;
}

h3 {
  font-size: 24px;
  line-height: 34px;
}

/*-------------------
03.BUTTONS STYLE
----------------=----*/
.btn {
  font-weight: 500;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-transform: capitalize;
  padding: 15px 39px;
  border-radius: 5px;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  border: 1px solid transparent;
  transition: all 0.3s ease-in-out;
}
.btn:focus {
  box-shadow: none !important;
}

.btn-main {
  background: #0487F9;
  color: #fff;
  border-color: #0487F9;
}
.btn-main:hover {
  color: #0487F9;
  border-color: #0487F9;
  background: transparent;
}

.btn-solid-border {
  background: transparent;
  color: #0487F9;
  border-color: #0487F9;
}
.btn-solid-border:hover {
  background: #0487F9;
  color: #fff;
  border-color: #0487F9;
}

.btn-radius {
  border-radius: 35px;
}

a {
  color: #2F2E41;
  outline: none;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}
a:hover {
  color: #0487F9;
  outline: none;
  text-decoration: none;
}

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

.bg-shadow {
  box-shadow: 0px 3px 26px rgba(0, 0, 0, 0.04);
}

.text-primary {
  color: #0487F9 !important;
}

/*----------------------------------------*/
/*  List None CSS
/*----------------------------------------*/

/*----------------------------------------*/
/*  Input CSS
/*----------------------------------------*/

button:focus {
  outline: none;
}

::-webkit-input-placeholder {
  color: #666;
}

::-moz-placeholder {
  color: #666;
}

:-ms-input-placeholder {
  color: #666;
}

:-moz-placeholder {
  color: #666;
  font-weight: 400;
}

/*----------------------------------------*/
/*  Margin CSS
/*----------------------------------------*/

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-70 {
  margin-bottom: 70px;
}

/*------------------
Padding 
-------------*/
.section-padding {
  padding: 100px 0px;
}

.pt-75 {
  padding-top: 75px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-110 {
  padding-bottom: 110px;
}

/*----------------------------------------*/
/*  1.4 Preloader css
/*----------------------------------------*/

.section {
  overflow: hidden;
}

.section-heading span {
  font-family: "Poppins", sans-serif;
}

@keyframes zoom-fade {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}
@keyframes float-x {
  0% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(25px);
  }
  50% {
    transform: translateX(50px);
  }
  70% {
    transform: translateX(70px);
  }
  100% {
    transform: translateX(0px);
  }
}
/** service-hexagon **/
/*-------------------
  04 MENU
----------------------*/
.navbar {
  padding: 0px;
}

.navbar-brand {
  margin: 0px;
}

.navbar-light .navbar-nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.navbar-light .navbar-nav .nav-link {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-weight: 400;
  text-transform: capitalize;
  font-size: 16px;
  color: #051441;
  font-family: "Poppins", sans-serif;
  display: block;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: #0487F9;
}

/*-------------------
  DROPDOWN MENU
----------------------*/

.header-btn .btn {
  padding: 14px 26px;
  min-width: 140px;
}

.navbar-floating {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.navbar-light .navbar-nav .nav-item {
  border-color: rgba(255, 255, 255, 0.1);
}
.navbar-collapse {
  padding-top: 1rem;
  margin-top: -16px;
}

.navbar-toggler .navbar-toggler-icon::after {
  transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.navbar-toggler-icon, .navbar-toggler-icon::before, .navbar-toggler-icon::after {
  width: 22px;
  height: 2px;
  border-radius: 0.25rem;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.navbar-toggler .navbar-toggler-icon::before {
  transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}

.navbar-light .navbar-toggler-icon, .navbar-light .navbar-toggler-icon::before, .navbar-light .navbar-toggler-icon::after {
  background-color: #fff;
}

.navbar-toggler-icon::before {
  top: -6px;
}

.navbar-toggler-icon::before, .navbar-toggler-icon::after {
  display: block;
  content: "";
}

.navbar-toggler .navbar-toggler-icon {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.navbar-toggler-icon {
  display: block;
  top: 50%;
  margin-top: -1px;
}

.navbar-toggler {
  padding: 10px 12px;
  display: inline-block;
  position: relative;
  width: 45px;
  height: 35px;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  border: 0;
  margin: 0;
  overflow: visible;
  right: 0px;
  background: #0487F9;
  border-radius: 0px;
  color: #fff;
}

.navbar-toggler-icon::after {
  bottom: -6px;
}

.mainmenu ul li .nav-link {
  position: relative;
}
.mainmenu ul li .nav-link:focus {
  color: #fff;
}
.mainmenu ul li .nav-link:hover {
  color: #fff;
}

.mainmenu ul li .nav-link:after {
  background-color: #0487F9;
  width: 2px;
  height: 2px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  content: "";
  transition: 0.4s;
  opacity: 0;
}

.mainmenu ul li .nav-link:hover:after {
  width: 100%;
  opacity: 1;
}

.menu-transparent .navbar-floating {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 14px 10px;
}
.menu-transparent .navbar-brand {
  background: transparent;
  padding: 0px;
  border: 0px;
}
.menu-transparent .navbar-light .navbar-nav .nav-link {
  color: #fff;
  text-transform: uppercase;
  font-weight: 400;
}
.menu-transparent .navbar-light .navbar-nav .nav-link:hover {
  color: #F8F4F4;
}
.menu-transparent .navbar-light .navbar-nav .nav-link:focus {
  color: #fff;
}
.menu-transparent .mainmenu ul li .nav-link:after {
  bottom: -16px;
}
.menu-transparent .mainmenu ul li .nav-link:after:after {
  background-color: #fff;
}
.menu-transparent .btn {
  border-color: #fff;
  color: #fff;
}
.menu-transparent .btn:hover {
  background: #fff;
  color: #0487F9;
}

.menu-transparent .mainmenu ul li .nav-link:after {
  background: #fff;
}

.menu-white .navbar-floating {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 0px;
  padding-bottom: 0px;
}
.menu-white .navbar-floating .mainmenu ul li .nav-link {
  padding-top: 26px;
  padding-bottom: 26px;
  color: #222;
  text-transform: capitalize;
}
.menu-white .navbar-floating .mainmenu ul li .nav-link:hover {
  color: #0487F9;
}
.menu-white .navbar-floating .mainmenu ul li .nav-link:focus {
  color: #0487F9;
}
.menu-white .navbar-floating .mainmenu ul li .nav-link:after {
  bottom: -2px;
  background-color: #0487F9;
}

.menu-white .navbar-floating .mainmenu ul li .nav-link:before {
  top: 25px;
}

/*==================
Header Topbar
====================*/

/*----------------
03.Section Banner
----------------*/
.banner-height2 {
  min-height: 800px;
}

.banner {
  background: #F4F7FF;
  position: relative;
}
.banner .banner-content {
  max-width: 700px;
  margin-left: auto;
}

.banner-main {
  position: relative;
}

.banner-main:after {
  position: absolute;
  content: "";
  left: 0px;
  width: 100%;
  height: 100%;
  background: url(../images/banner/banner-bg2.png) no-repeat;
  background-position: left center;
  left: 10%;
  animation: float-x 5s infinite linear;
}

.banner-img {
  position: relative;
  margin-right: -160px;
  margin-top: 80px;
}

.banner-img .main-img {
  animation-duration: 1500ms;
  animation-delay: 500ms;
  animation-name: slideInUp;
}

.banner-main-shape {
  position: absolute;
  top: -40px;
  width: 55%;
  height: 50%;
  right: -90px;
  content: "";
  animation: zoom-fade 4s infinite cubic-bezier(0.25, 0.25, 0.75, 0.75);
}

.banner-content {
  position: relative;
  z-index: 2;
}

.banner-content h1 {
  font-size: 62px;
  line-height: 74px;
}
/*--------------------
Banner-2
--------------------*/

/*===================
Banner-3 
==================*/

/*----------------
06.Section About
----------------*/

/*----------------
ABout Nav Tabs
-------------*/

/*----------------
07.Section Services
----------------*/

/*-----------------
Service style 2
-------------------*/

/*---------------------
08.Section Work Process
---------------------*/
.item-arrow-left {
  position: relative;
}
.item-arrow-left:before {
  position: absolute;
  content: "";
  top: 16%;
  left: 54%;
  width: 100%;
  height: 100%;
  background: url(../images/about/angle-arrow-left.png) no-repeat;
  transform: rotate(-7deg);
}

.item-arrow-right {
  position: relative;
}
.item-arrow-right:before {
  position: absolute;
  content: "";
  top: 20%;
  left: 48%;
  width: 100%;
  height: 100%;
  background: url(../images/about/angle-arrow-right.png) no-repeat;
  transform: rotate(7deg);
}

.process-item {
  position: relative;
  padding: 0px 30px;
}
.process-item .process-icon {
  width: 168px;
  height: 168px;
  text-align: center;
  font-size: 60px;
  padding-top: 68px;
  border-radius: 50%;
  margin: 0px auto 35px;
  box-shadow: 0px 3px 26px rgba(0, 0, 0, 0.06);
  position: relative;
  color: #0487F9;
  transition: all 500ms ease;
  z-index: 1;
  background: #fff;
}
.process-item .process-icon:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  right: 0px;
  transform: scale(0, 0);
  border-radius: 50%;
  z-index: -1;
  transition: all 500ms ease;
  background: #fff;
}
.process-item .process-icon span {
  position: absolute;
  font-size: 18px;
  color: #fff;
  width: 38px;
  height: 38px;
  background: #2F2E41;
  border-radius: 50%;
  line-height: 36px;
  right: -4px;
  top: 20px;
  transition: all 500ms ease;
}
.process-item:hover .process-icon {
  color: #fff;
}
.process-item:hover .process-icon:before {
  background: #0487F9;
  transform: scale(1, 1);
}
.process-item:hover span {
  box-shadow: 0px 3px 26px rgba(0, 0, 0, 0.06);
  background: #fff;
  color: #0487F9;
}

/*----------------
Process 2
-------------*/

/*---------------------
09.Section Clietns
---------------------*/

/*----------------
Clients 2
-------------*/

/*---------------------
10.Section Portfolio
---------------------*/

/*----------------
portfolio Item2
-----------------*/

/*----------------
11.Testimonials
--------------*/

/*----------------
Testimonial-2
-------------*/

/*----------------
12.CTA-2
-------------*/

/*------------------
13.Pricing
---------------*/
.pricing-box {
  padding: 0px 50px 52px;
  background: #fff;
  box-shadow: 0px 3px 26px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 1;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: all 400ms linear;
}
.pricing-box:before {
  background-color: #0487F9;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  transition: all 400ms linear;
  z-index: -1;
  opacity: 0;
}
.pricing-box:hover {
  border-color: #CBD9FF;
}
.pricing-box:hover:before {
  opacity: 1;
}
.pricing-box:hover .pricing-header {
  border-color: rgba(255, 255, 255, 0.3);
}
.pricing-box:hover .pricing-header h2, .pricing-box:hover .pricing-header p, .pricing-box:hover .pricing-header span {
  color: #fff;
}
.pricing-box:hover .pricing-feature {
  color: #fff;
}
.pricing-box:hover .pricing-feature i {
  color: #fff;
}
.pricing-box:hover .btn {
  background: #fff;
  border-color: #fff;
  color: #0487F9;
}
.pricing-box:hover .btn:hover {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.pricing-box .pricing-header {
  text-align: center;
  padding: 45px 0px 20px;
  transition: all 0.3s ease;
  position: relative;
  border-bottom: 1px solid #CBD9FF;
}
.pricing-box .pricing-header h2 {
  font-size: 54px;
  line-height: 56px;
  margin: 10px 0px;
}
.pricing-box .pricing-header span {
  color: #0487F9;
  text-transform: capitalize;
}
.pricing-box .pricing-header h2, .pricing-box .pricing-header span, .pricing-box .pricing-header p {
  transition: all 400ms linear;
}
.pricing-box .pricing-feature {
  margin: 40px 0px 40px;
  transition: all 400ms linear;
}
.pricing-box .pricing-feature ul li {
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}
.pricing-box .pricing-feature ul li i {
  color: #0487F9;
  position: absolute;
  left: 0px;
  top: 0px;
  transition: all 400ms linear;
}

/*----------------
14.Team
--------------*/

/*----------------
15.COUNTER
-------------*/
.counter-item {
  position: relative;
  transition: all 0.4s ease;
}
.counter-item:hover .counter-icon {
  background: #0487F9;
  color: #fff;
}
.counter-item .counter-icon {
  width: 70px;
  height: 70px;
  background: #F2F9FF;
  text-align: center;
  border-radius: 100%;
  overflow: hidden;
  box-shadow: 0px 3px 26px rgba(0, 0, 0, 0.06);
  font-size: 20px;
  color: #fff;
  padding-top: 12px;
  margin: 0 auto;
  border: 10px solid #fff;
  color: #0487F9;
  position: absolute;
  left: 0px;
  transition: all 0.4s ease;
}
.counter-item .counter-content {
  overflow: hidden;
  padding-left: 95px;
}
.counter-item .counter-content p {
  margin-bottom: 0px;
}

/*----------------
16. Blog
--------------*/

/*----------------
Blog 2
-------------*/

/*----------------
17 Contact
--------------*/

/*---------------
18 Subscribe Form
---------------*/

/*------------------
19 Footer  
---------------------*/
.footer {
  background: #002748;
}

.footer-copyright {
  padding: 25px 0px;
  border-top: 1px solid rgba(186, 179, 207, 0.25);
}
.footer-copyright p {
  margin-bottom: 0px;
  color: #BAB3CF;
}

/*----------------
Footer-2
-------------*/

/*-----------------
20 FIXED TO TOP
-------------------*/
.fixed-btm-top {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease 0s;
}

.scroll-to-top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 3;
  background: #0487F9;
  text-align: center;
  padding-top: 10px;
  border-radius: 50%;
  color: #fff;
}
.scroll-to-top:hover {
  color: #fff;
}

/*------------------
21 PAGES
---------------------*/

/*-----------------
Blog single
------------------*/

/*-----------------
22 Pages
------------------*/

/*===================
Pricing Style 2
==================*/

/* ==================
HOME 3
===================== */

/*======================
Service Item home 4
=========================*/

/*===============
Process Item 4
===============*/

/*===============
Testimonial 4
===============*/

/*===============
Pricing 4 
===============*/
.pricing {
  position: relative;
}

/*==================
Blog STyle 2
=================*/