/*------------------------------------------------------------------

  Project: Digital Invoico
  Author: Upsqode
  Last change:  30/12/2022 [fixed Float bug, vf]
  Primary use: Invoice Generate

------------------------------------------------------------------ */

/*-----------------------[Table of contents]------------------------

1.Default CSS 
2.Header CSS
3.Introduction Section CSS
4.Demo Section CSS
5.Feature Section CSS
6.BuyNow Section CSS
7.Cursor CSS
8.Animation Keyframe CSS
9.Scroll Top CSS

------------------------------------------------------------------ */

/*------------------------ [Color codes] ------------------------

Background: #12151C 
Content: #888888, #ffffff, #12151C, #00BAFF

a (visited): #000000
a (standard): #000000   
a (hover):  #000000  
a (active): #000000

------------------------------------------------------------------ */

/************************* 1.Default CSS **************************/

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
	background: #ffffff;
	width: auto;
	height: 100%;
	color: #ffffff;
	font-family: 'Inter', sans-serif;
	margin: 0;
}

*, ::after, ::before {
    box-sizing: border-box;
}
a:focus, a {
  outline: none;
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
}
a:hover {
	color: #000000;
}
section {
	position: relative;
}
.sm-text{
	font-size: 18px;
	line-height: 24px;
} 
.b-text {
	color: #12151C;
}
.w-text {
	color: #ffffff;
}
:root {
	--primary: #c9f31d;
  --white: #fff;
  --black-2: #121212;
  --gray-2: #999;
  --base: hsl(var(--hue), 95%, 50%);
  --complimentary1: hsl(var(--hue-complimentary1), 95%, 50%);
  --complimentary2: hsl(var(--hue-complimentary2), 95%, 50%);
   --bg-gradient: linear-gradient(
    to bottom,
    hsl(var(--hue), 95%, 99%),
    hsl(var(--hue), 95%, 84%)
  );
}

/************************* 2.Header CSS **************************/

.preview-header {
	background: #12151C;
	padding: 20px 0;
}
.invoic-menu-navbar {
	display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
.invoic-menu-navbar .nav-item {
	padding-left: 80px;
}
.invoi-buy-btn {
	background: #00D061;
  border-radius: 30px;
  padding: 14px 40px;
  font-weight: 700 !important;
  transition: all .3s ease-in;
}
.invoi-buy-btn:hover {
  background: #ffffff;
  color: #0cbffd;
  transition: all .3s ease-in;

}
.invoic-menu-navbar .nav-link{
	font-weight: 500;
}
.invoi-intro-heading {
	font-weight: 500;
	font-size: 48px;
	line-height: 58px;
	padding: 20px 0 40px
}

/************************* 3.Introduction Section CSS **************************/

.invoi-introdu-content{
  width: 100%;
  height: auto;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  -webkit-animation: ani 20s ease infinite;
  -moz-animation: ani 20s ease infinite;
  animation: ani 20s ease infinite;
   background-size: 1000% 1000%;
}
@-webkit-keyframes ani {
    0%{background-position:4% 0%}
    50%{background-position:97% 100%}
    100%{background-position:4% 0%}
}
@-moz-keyframes ani {
    0%{background-position:4% 0%}
    50%{background-position:97% 100%}
    100%{background-position:4% 0%}
}
@keyframes ani { 
    0%{background-position:4% 0%}
    50%{background-position:97% 100%}
    100%{background-position:4% 0%}
}
.invoi-intro-left-content {
	padding-right: 10px;
}
.invoi-introdu-content .row {
	align-items: center;
}
.down-arrow-circle {
	text-align: center;
}
.invoi-intro-desc-two, .invoi-intro-desc-one {
	font-weight: 400;
	font-size: 20px;
	line-height: 30px;
  color: #f5f5f5;
}
.invoi-intro-left-content {
  background: rgba(255, 255, 255, 0.375);
  box-shadow: 0 0.75rem 2rem 0 rgb(0 0 0 / 10%);
  border: 1px solid rgba(255, 255, 255, 0.125);
  border-radius: 2rem;
  padding: 30px 30px;
}
.invoi-intro-heading {
  background-image: linear-gradient( 45deg, #9906f4 25%, #f90663);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent
}
.down-arrow {
	position: absolute;
  text-align: center;
  display: inline-block;
  margin: 0 auto;
  background: #00D061;
  border: 2px solid #F8F9FD;
  border-radius: 50px;
  border-radius: 100%;
  padding: 20px;
  top: auto;
  bottom: -39px;
  z-index: 8;
  cursor: pointer;
  animation: ripple 1.5s linear infinite;
  transition: all 0.7s ease;
  margin-right: 34px;
  right: 46%;
}
.down-arrow svg {
	-webkit-animation: mover 1s infinite  alternate;
	animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { 
    	transform: translateY(0); 
    }
    100% { 
    	transform: translateY(-10px); 
    }
}
@keyframes mover {
    0% { 
    	transform: translateY(0); 
    }
    100% { 
    	transform: translateY(-10px); 
    }
}
.orb-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}


/************************* 4.Demo Section CSS **************************/

.invoi-demo-section {
	padding: 110px 0 80px;
	background: #F8F9FD;
}
ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: flex;
    align-items: center;
    justify-content: center;
}
ul.tabs li{
	background: none;
	color: #222;
	display: inline-block;
	cursor: pointer;
	padding: 14px 40px;
    cursor: pointer;
    background: #12151c;
    color: #fff;
    border-radius: 14px 0px 0px 14px;
}
ul.tabs li.tab-link-two {
   border-radius: 0px 14px 14px 0px;
}
ul.tabs li.current{
	background: #00BAFF;
	color: #ffffff;
	border-radius: 14px 0px 0px 14px;
	padding: 14px 40px;
}
ul.tabs li.tab-link-two.current {
	border-radius: 0px 14px 14px 0px;
}

.tab-content{
	display: none;
}
.tab-content.current{
	display: flex;
    justify-content: center;
    padding: 0;
}
.invoi-light-row {
	width: 100%;
	padding-top: 60px;
}
.invoic-light-demo-img {
	width: 100%;
    height: auto;
    border-radius: 20px;
}
.light-demo-title .invoi-light-title{
	font-weight: 400;
	font-size: 24px;
	line-height: 29px;
	text-align: center;
	padding-top: 20px;
}
.inv-top {
	padding-top: 60px;
}
.invoic-light-demo-img img {
	border-radius: 20px;
}
.invoice-light-wrap:hover .follow-img {
  opacity: 1;
}

.invoice-light-wrap {
	position: relative;
}

.invoice-light-wrap .invoic-light-demo-img:before {
	position: absolute;
    content: '';
    left: 0;
    top: 100%;
    right: 0;
    bottom: 0;
    background: rgb(172 168 168 / 38%);
    transition: all 350ms;
    width: 100%;
    border-radius: 20px;
}
.invoic-light-demo-img img{
  width: 100%;
  height: auto;
}
.invoice-light-wrap.light-demo-wrap .invoic-light-demo-img:before{
	background: rgb(28 27 27 / 38%);
}
.invoice-light-wrap .invoic-light-demo-img:hover::before {
	top: 0;
}
.inv-top:hover .light-demo-title .invoi-light-title, .agency-col:hover .light-demo-title .invoi-light-title,
.hotel-col:hover .light-demo-title .invoi-light-title, .rest-col:hover .light-demo-title .invoi-light-title {
  color: #00baff;
}

/************************* 5.Feature Section CSS **************************/

.invoi-feature-title {
	font-weight: 500;
	font-size: 48px;
	line-height: 58px; 
	padding: 0 0 30px 0;
}
.invoi-feature-section {
	padding: 80px 0;
}
.invoic-feature-wrap {
	text-align: center;
}
.invoic-feature-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-icon-list {
	padding-top: 30px;
}
.feature-img {
	padding-bottom: 20px;
}

/************************* 6.BuyNow Section CSS **************************/

.invoi-buynow-section {
	background: #F8F9FD;
}
.buynow-des {
	font-weight: 400;
	font-size: 20px;
	line-height: 30px;
	color: #888888;
}
.invoic-buynow-title {
	font-weight: 500;
	font-size: 48px;
	line-height: 58px;
	padding: 20px 0 40px;
}
.invoic-foot-buynow {
	display: inline-block;
    background: #00D061;
    border-radius: 30px;
    padding: 18px 40px;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    transition: all .3s ease-in;
}
.invoic-foot-buynow:hover {
	background: #12151c;
	color: #00D061;
	transition: all .3s ease-in;
}
.invoic-buynow-image img  {
	width: auto;
	height: 100%;
}

/************************* 6.BuyNow Section CSS **************************/

.invoic-copyright {
	background: #12151C;
}
.invoic-copyright-content {
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
	padding: 18px 0;
}

/************************* 7.Cursor CSS **************************/

.cursor {
  position: fixed;
  pointer-events: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  color: var(--white);
  background: var(--black-2);
  text-transform: capitalize;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 999;
  opacity: 0;
  mix-blend-mode: hard-light;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.cursor.large {
  width: 180px;
  height: 180px;
  text-align: center;
  font-size: 19px;
  font-weight: 400;
}

.cursor1 {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1px solid var(--primary);
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: 0.15s;
  transition: 0.15s;
  z-index: 999;
  mix-blend-mode: difference;
}
@media (max-width: 1200px) {
  .cursor1 {
    display: none;
  }
}
.cursor1.hide {
  opacity: 0;
  visibility: hidden;
}

.cursor2 {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: var(--primary);
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  z-index: 999;
  mix-blend-mode: difference;
}
@media (max-width: 1200px) {
  .cursor2 {
    display: none;
  }
}
.cursor2.hide {
  opacity: 0;
  visibility: hidden;
}
.cursor2.circle {
  width: 60px;
  height: 60px;
}



/************************* 8.Animation Keyframe CSS **************************/


@keyframes ripple {
    0% {
      box-shadow: 0 0 0 0 rgba(183, 179, 179, 0.3),
        0 0 0 1px rgba(183, 179, 179, 0.3),
        0 0 0 3px rgba(183, 179, 179, 0.3),
        0 0 0 5px rgba(183, 179, 179, 0.3);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(183, 179, 179, 0.3),
        0 0 0 4px rgba(183, 179, 179, 0.3),
        0 0 0 20px rgba(183, 179, 179, 0),
        0 0 0 30px rgba(183, 179, 179, 0);
    }
}

/************************* 9.Scroll Top CSS **************************/

.scroll-top{
    position: fixed;
    bottom: 34px;
    right: 26px;
    z-index: 1;
    background: #00baff;
    color: #00baff;
    border-radius: 50px;
    height: 50px;
    width: 50px;
    outline: none;
    border: 2px solid #00baff;
    text-align: center;
    font-weight: bold;
    line-height: normal;
    padding:10px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    -webkit-animation: doublePulsation 1.9s ease infinite;
    -moz-animation: doublePulsation 1.9s ease infinite;
    -ms-animation: doublePulsation 1.9s ease infinite;
    -o-animation: doublePulsation 1.9s ease infinite;
    animation: doublePulsation 1.9s ease infinite;
}
@keyframes doublePulsation {
    0% {
        box-shadow: 0 0 0 0px #fff;
        opacity: 0.6; 
    }
    100% {
        box-shadow: 0 0 0 15px rgba(86, 191, 231, 0.28);
    }
}
@-webkit-keyframes doublePulsation {
    0% {
        -webkit-box-shadow: 0 0 0 0px #fff;
        box-shadow: 0 0 0 0px #fff;
        opacity: 0.6;   
    }
    100% {
        -webkit-box-shadow: 0 0 0 15px rgba(86, 191, 231, 0.28);
        box-shadow: 0 0 0 15px rgba(86, 191, 231, 0.28);
    }
}
@-o-keyframes doublePulsation {
    0% {
        -webkit-box-shadow: 0 0 0 0px #fff;
        box-shadow: 0 0 0 0px #fff;
        opacity: 0.6; 
    }
    100% {
        -webkit-box-shadow: 0 0 0 15px rgba(86, 191, 231, 0.28);
        box-shadow: 0 0 0 15px rgba(86, 191, 231, 0.28); 
    }
}
@keyframes doublePulsation {
    0% {
        -webkit-box-shadow: 0 0 0 0px #fff;
        box-shadow: 0 0 0 0px #fff;
        opacity: 0.6; 
    }
    100% {
        -webkit-box-shadow: 0 0 0 15px rgba(86, 191, 231, 0.28);
        box-shadow: 0 0 0 15px rgba(86, 191, 231, 0.28);
    }
}