/*===========================================================================================================================
					Theme Colors , size , font familes , line height , letter spacing , fontweight
============================================================================================================================*/
/*------------------Defalt Styling------------------*/
	*{
		margin:0;
		padding:0;
	}
	html{
		overflow-x: hidden;
	}
	
	body{
		overflow-x: hidden;
		width: 100%;
		background-color: #F3F1FF !important;
    	font-family: sans-serif; /* Fallback font */
	}
	.width100{
		width: 100% !important;
		height:auto !important;
	}
	a{
		text-decoration: none !important;
	}
/*------------------color---------------------------*/
:root{
	--dark:#0d0d0d;
	--yellow:#C5E038;
	--blue:#EAF8F7;
	--footer:#0d0d0d;
	 --size: clamp(10rem, 1rem + 40vmin, 30rem);
	  --gap: calc(var(--size) / 14);
	  --duration: 60s;
	  --scroll-start: 0;
	  --scroll-end: calc(-100% - var(--gap));
}
/*-------------------font size ---------------------*/
.fontSize14{
	font-size: 14px;
}
.fontSize15{
	font-size: 15px;
}
.fontSize17{
	font-size: 17px;
}
.fontSize16{
	font-size: 16px;
}
.fontSize18{
	font-size: 18px;
}
.fontSize19{
	font-size: 19px;
}
.fontSize20{
	font-size: 20px;
}
.fontSize22{
	font-size: 22px;
}
.fontSize24{
	font-size: 24px;
}
.fontSize26{
	font-size: 26px;
}
.fontSize28{
	font-size: 28px;
}
.fontSize38{
	font-size: 38px;
}
.fontSize40{
	font-size: 40px;
}
.fontSize44{
	font-size: 44px;
}
.fontSize54{
	font-size: 54px;
}
.fontSize64{
	font-size: 64px;
}



/*------------------font style-----------------*/
/* ADDED BY AHSAN */
@font-face { font-family: 'Inter'; src: url('./Inter.woff2') format('woff2'); font-style: normal; font-display: swap; } 


.InterFont {
  font-family: "inter", Arial, Helvetica, sans-serif;
}

/*theme buttons
========================================================================*/
.btn__theme__primary_box{
	background:linear-gradient(180deg, #DAFF37 14.98%, #859900 131.58%);
	border-radius: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2px;
}
.btn__theme__primary{
	padding: 16px 32px 16px 32px;
	display: inline-block;
	border-radius: 36px;
	border:none;
	background:linear-gradient(90deg, #C3D455 14.98%, #859900 131.58%);
	box-shadow: 0px 4px 11px 0px rgba(33, 37, 13, 0.40), 0px 2px 1px 0px rgba(0, 0, 0, 0.15) inset;
	font-size: 15px;
	line-height: 125%;
	color: #17181A;
	position: relative;
	transition: 0.35s;
	overflow: hidden;
	z-index: 11
}
.btn__theme__primary::before{
	content: "";
	position: absolute;
	top:0;
	left: 0;
	width: 0%;
	height: 100%;
	  background: rgba(255,255,255,0.4);
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	  border-radius: 32px;
	 transition: 0.35s;
	 z-index: 1;

}

.btn__theme__primary::after{
	content: "";
	position: absolute;
	top:0;
	left: 0;
	width: 0%;
	height: 100%;
	  background: #DAFF37;
	  border-radius: 32px;
	 transition: 0.35s;
	 z-index: -1

}
.btn__theme__primary:hover::before{
	 width: 120%;
  background-color: rgba(255,255,255,0);
  
	-webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	        transition: all 0.4s ease-in-out;
}
.btn__theme__primary:hover::after{
	width: 100%;
}
.btn__theme__primary:hover{
	color: black;
}
.btn__theme__primary:hover .btn__theme__primary_box{
	background: linear-gradient(90deg, #d7ff28 14.98%, #d7ff28 131.58%);
}
.btn__theme__secondary{
	padding:  16px 32px 16px 32px;
	display: inline-block;
	border-radius: 36px;
	border:2px solid #7f855f;
	background:linear-gradient(180deg, rgba(247, 249, 234, 0.50) 14.98%, rgba(114, 119, 94, 0.50) 164.98%);
	box-shadow: 0px 4px 11px 0px rgba(33, 37, 13, 0.10), 0px 2px 1px 0px rgba(0, 0, 0, 0.15) inset;
	font-size: 15px;
	line-height: 125%;
	color: #212226;
	position: relative;
	transition: 0.35s;
	overflow: hidden;
	z-index: 11
}
.btn__theme__secondary::before{
	content: "";
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	  background: linear-gradient(
    to right,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.49) 50%,
    rgba(255,255,255,0.2) 100%
  );
	  border-radius: 32px;
	 transition: 0.35s;
	 z-index: -1;
	 opacity: 0;
	 backdrop-filter:blur(20px);

}
.btn__theme__secondary:hover::before{
	opacity: 1
}
.btn__theme__secondary:hover{
	color: black;
}


/*video farames
==========================================================================*/
.video-container {
            position: relative;
            width: 100%;
            height: 676px;
            background: url("../media/videobg.png");
            background-size: cover;
            background-position: center;
            cursor: pointer;
            border-radius: 26px 26px 0px 0px;
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 26px 26px 0px 0px;
        }
/*loader animation css
============================================*/


#loader {
	position: relative;
	width   : 4px;
	height  : 4px;
	padding : 0;
	display : inline-block;
}

#loader>div {
	content      : "";
	background   : white;
	width        : 4px;
	height       : 4px;
	position     : absolute;
	top          : 0;
	left         : 0;
	border-radius: 50%;
}

#loader>div:nth-of-type(1) {
	left: 15px;
}

#loader>div:nth-of-type(3) {
	left: -15px;
}

/* dots fade */
.dots-fade>div {
	-webkit-animation      : dots-fade 1.6s infinite ease;
	animation              : dots-fade 1.6s infinite ease;
	-webkit-animation-delay: 0.4s;
	animation-delay        : 0.4s;
}

.dots-fade>div:nth-of-type(1) {
	-webkit-animation-delay: 0.8s;
	animation-delay        : 0.8s;
}

.dots-fade>div:nth-of-type(3) {
	-webkit-animation-delay: 0s;
	animation-delay        : 0s;
}

@-webkit-keyframes dots-fade {
	0% {
		opacity: 1;
	}

	40% {
		opacity: 0.2;
	}

	80% {
		opacity: 1;
	}
}

@keyframes dots-fade {
	0% {
		opacity: 1;
	}

	40% {
		opacity: 0.2;
	}

	80% {
		opacity: 1;
	}
}

/*navbar css start
============================================================*/
.navbar{
	background-color: var(--dark);
	padding: 23px 0px;
}
.navbar .nav-item .nav-link{
	color: #E6E6E6;
	padding: 0.5rem 1.5rem;
	line-height: 160%;
	font-size: 14px;
	letter-spacing: 0.42px;
}
.navbar .nav-item:last-child a{
	background-color: var(--yellow);
	border-radius: 36px;
	color: #252931;
	font-size: 15px;
	font-weight: 500;
	line-height: 125%;
	padding:  16px 32px 16px 32px;
	border:2px solid #DAFF37;
	background: linear-gradient(180deg, #C3D455 14.98%, #859900 131.58%);
	box-shadow: 0px 4px 11px 0px rgba(33, 37, 13, 0.40), 0px 2px 1px 0px rgba(0, 0, 0, 0.15) inset;
	position: relative;
	transition: 0.35s;
	overflow: hidden;
	z-index: 11
}
.navbar .nav-item:last-child a::before{
	content: "";
	position: absolute;
	top:0;
	left: 0;
	width: 0%;
	height: 100%;
	  background: rgba(255,255,255,0.4);
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	  border-radius: 32px;
	 transition: 0.35s;
	 z-index: 1;

}

.navbar .nav-item:last-child a::after{
	content: "";
	position: absolute;
	top:0;
	left: 0;
	width: 0%;
	height: 100%;
	  background: #DAFF37;
	  border-radius: 32px;
	 transition: 0.35s;
	 z-index: -1

}
.navbar .nav-item:last-child a:hover::before{
	 width: 120%;
  background-color: rgba(255,255,255,0);
  
	-webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	        transition: all 0.4s ease-in-out;
}
.navbar .nav-item:last-child a:hover::after{
	width: 100%;
}
.navbar .nav-item:last-child a:hover{
	color: black;
}
.navbar .nav-item:last-child a:hover .btn__theme__primary_box{
	background: linear-gradient(90deg, #d7ff28 14.98%, #d7ff28 131.58%);
}
/*banner css start
=================================================================*/
.banner{
	background: linear-gradient(180deg,  #171616 8.35%,  #141414 21.6%,  rgba(20, 20, 20, 0.96) 34.64%, #0D0D0D 100%);
	padding: 80px 0px 28px 0px;
	position: relative;
	z-index: 1;
}
.banner::before{
	content: "";
	position: absolute;
	top: 10%;
	left: 10%;
	z-index: -1;
	width: 80%;
	height: 80%;
	border: 4.5px solid #1A2200;
	border-radius: 1080px;
	filter: blur(44.45000076293945px);
	background: radial-gradient(50.01% 50.01% at 50% 50%, rgba(221, 255, 0, 0.91) 0%, rgba(175, 204, 0, 0.86) 25%, rgba(98, 116, 2, 0.66) 50%, rgba(39, 52, 0, 0.72) 100%);
}
.banner .banner__heading{
	color: #F7F9EB;
	letter-spacing: -0.64px;
	line-height: 112.5%;
}
.banner .banner__text{
	color: #DBDECB;
	line-height: 120%;
}

/*badge slider 
======================================================================*/
       /*.testimonials slider*/
.slider {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/*  IMPORTANT CODE BELOW */

.slider .slide-track {
  width: calc(100px * 50);
  display: flex;
  animation: scroll 20s linear infinite;
  justify-content: space-between;
  align-items: center;
  gap:96px;
}

.slider .slide {
  width: 100px;
  height: auto;
  display: grid;
  place-items: center;
  transition:0.5s;
  cursor:pointer;
}
.slider .slide img{
	width: 100%;
	height: auto;
}
@keyframes scroll {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-150px * 10));
  }
}


@media screen and (max-width: 768px) {
  .slider .slide-track {
    width: calc(80px * 20);
  }

  .slider .slide-track2 {
    width: calc(80px * 15);
  }

  @keyframes scroll {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 10));
    }
  }
}
.laptop__review{
		display: block;
	}
	.mobile__review{
		display: none;
	}

/*subscribe__section css start
=========================================================*/
.subscribe__section{
	padding: 110px 0px 84px 0px;
	background-color: var(--dark);
}
.subscribe__heading{
	padding-bottom: 68px;
}
.subscribe__heading h2{
	color: #E6E6E6;
	letter-spacing: -0.54px;
	line-height: 120%;
}
.SVGAnalytics{
	margin-bottom: 130px;
}
.SVGAnalytics-mobile{
	display: none;
}
.subscribe__card{
	padding-bottom:80px;
}
.subscribe__card__number{
	background-image: url("../media/Circle.webp");
	background-size: 100% 100%;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150px;
	height: 150px;
}
.subscribe__card__number span{
	line-height: 110%;
	font-size: 72px;
	color: #DBDECB;
}
.subscribe__card__title{
	color: #E6E6E6;
	line-height: 125%;
}
.subscribe__card__text{
	color: #E6E6E6;
	line-height: 120%;
}
/*testimonial__section section css 
======================================================================*/
.testimonial__section{
	background-color: var(--yellow);
	padding: 96px 0px ;
}
.testimonial__text{
	color: #303322;
	line-height: 140%;
}
.testimonial__title{
	color: #273400;
	line-height: 125%;
}
.testimonial__subTitle{
	color: #273400;
	line-height: 150%;
	letter-spacing: 0.048px;
}

/*opportunitie section css
==========================================================================*/
.opportunitie__section{
	background-color: var(--dark);
	padding-top: 96px;
}
.opportunitie__heading img{
	width: 120px;
	height: 120px;
}
.opportunitie__heading h2{
	color: #E6E6E6;
	letter-spacing: -0.54px;
	line-height: 120%;
}
.opportunitie__section .nav-pills{
	gap:8px;
}
.opportunitie__section .nav-pills .nav-item .nav-link{
	padding: 14px 24px 12px 24px;
	color: white;
	font-size: 20px;
	font-weight: 400;
	line-height: 120%;
}
.opportunitie__section .nav-pills .nav-item .nav-link svg{
	transform: translateY(-2px);
}
.opportunitie__section .nav-pills .nav-item .nav-link.active{
	border-radius: 4px;
	padding: 14px 32px 12px 32px;
	background: linear-gradient(90deg, #4B5563 0%, #979E2C 100%);
	color: #F6F7F6;
}
.opportunitie__section .nav-pills .nav-item .nav-link.active .pill_icon{
	stroke: #DDFF00;
}
.opportunitie__image_box{
	position: relative;
	width: fit-content;
	margin: auto;
}
.opportunitie__image_box .opportunitie__image{
	border-radius: 20px;
	border: 6px solid rgba(75, 92, 11, 0.30);
	box-shadow: 0px 2px 0px 0px #7B8680 inset, 0px 4px 0px 0px #DCF91D;
}
.opportunitie__info{
	padding: 0px 12px;
	border-radius: 8px;
	background: linear-gradient(83deg, #4B5563 -2.46%, #0D0D0D 96.65%);
	box-shadow: 0px 4px 12px 0px #000, 0px 1.202px 1.202px 0px rgba(210, 210, 210, 0.20) inset;
	position: absolute;
	left: -30px;
	top:40%;
	display: flex;
	align-items: center;
}
.opportunitie__info span{
	color: #E6E6E6;
	line-height: 140%;

}
.tab-pane.show .slideShow{
	animation: fadeIn ease 3s;
  -webkit-animation: fadeIn ease 3s;
  -moz-animation: fadeIn ease 3s;
  -o-animation: fadeIn ease 3s;
  -ms-animation: fadeIn ease 3s;
}
.fade-in {
  
}


@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

/* The style below is just for the appearance of the example div */

.style {
  width:90vw; height:90vh;
  text-align:center;
  padding-top:calc(50vh - 50px);
  margin-left:5vw;
  border:4px double #F00;
  background-color:#000;
}

/*pricing section css 
============================================================*/
.pricing__section{
	background-color: var(--dark);
	padding-top: 120px;
}
.pricing__bg{
	background-image: url("../media/Spring.png");
	background-size: 100% auto;
	background-position: bottom;
	background-repeat: no-repeat;
}
.pricing__heading{
	color: #E6E6E6;
	line-height: 120%;
}
.pricing__Subheading{
	color: #E6E6E6;
	line-height: 135%;
}
.pricing__section .nav-pills{
	width: fit-content;
	padding: 4px;
	border-radius: 12px;
	background: linear-gradient(90deg, #9EC217 0%, #4B5C0B 82.19%);
	box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.15) inset;
}
.pricing__section .nav-pills button{
	padding: 10px 24px;
	letter-spacing: -0.6px;
	color: #DF0;
	line-height: 150%;
	font-size: 16px;
}
.pricing__section .nav-pills button.active{
	border-radius: 12px;
	background-color: #FFFFE4;
	color: #272937;
}
.basic__price{
	border-radius: 10px;
	border:3px solid #fff;
	background-color: #fff;
	box-shadow: 0px 2px 4px 0px rgba(100, 85, 69, 0.15);
	padding: 36px 40px 30px 40px;
}
.basic__price .basic__price__starter{
	background: #F1F1F1;
	border-radius: 6px;
	padding: 6px 18px;
	color: #000B33;
	font-size: 18px;
	line-height: 115%;
}
.basic__price__title{
	color: #000;
	line-height: 120%;
}
.basic__pricing__price{
	display: flex;
	align-items: center;
}
.basic__pricing__price span:first-child{
	color: #272937;
	font-size: 54px;
	line-height: 120%;
}
.basic__pricing__price span:last-child{
	color: #2C322A;
	font-size: 18px;
	line-height: 120%;
	opacity: 0.8;
}
.basic__pricing__divide{
	height: 1px;
	background: #E7E8E2;
	margin:45px 0px 35px 0px;
}
.basic__pricing__list li p{
	color: #000;
	line-height: 170%;
}
.basic__pricing__list li span{
	background: #C9FAD6;
	color: #00916E;
	padding: 2px 4px;
	font-size: 10px;
	font-weight: 400;
	line-height: 160%;
	border-radius: 4px;
}
.basic__pricing__btn{
	padding: 18px 30px;
	background: #1E1E1E;
	border-radius: 4px;
	color: white;
	transition: 0.35s;
}
.basic__pricing__btn:hover{
	transform: scale(1.015);
}
.basic__pricing__text{
	color: #444;
	line-height: 185%;
	font-size: 13px;
}
.tier__price{
	border-radius: 10px;
	border:3px solid #C1E600;
	background-color: #E3FF2B;
	box-shadow: 0px 2px 4px 0px rgba(100, 85, 69, 0.15);
	padding: 36px 40px 30px 40px;
}
.tier__price .tier__price__starter{
	background: #C5E038;
	border-radius: 6px;
	padding: 6px 18px;
	color: #000B33;
	font-size: 18px;
	line-height: 115%;
}
.tier__price__title{
	color: #141414;
	line-height: 120%;
}
.tier__pricing__price{
	display: flex;
	align-items: center;
}
.tier__pricing__price span:first-child{
	color: #171616;
	font-size: 54px;
	line-height: 120%;
}
.tier__pricing__price span:last-child{
	color: #141414;
	font-size: 18px;
	line-height: 120%;
	opacity: 0.8;
}
.tier__pricing__divide{
	height: 1px;
	background: #C1E600;
	margin:45px 0px 35px 0px;
}
.tier__pricing__list li p{
	color: #141414;
	line-height: 170%;
}
.tier__pricing__list li span{
	background: #E6E6E6;
	color: #23231A;
	padding: 2px 4px;
	font-size: 10px;
	font-weight: 400;
	line-height: 160%;
	border-radius: 4px;
}
.tier__pricing__btn{
	padding: 18px 30px;
	background: #23231A;
	border-radius: 4px;
	color: white;
	transition: 0.35s;
}
.tier__pricing__btn:hover{
	transform: scale(1.015);
}
.tier__pricing__text{
	color: #0D0D0D;
	line-height: 185%;
	font-size: 13px;
}
/*review section css 
========================================================================*/
.review__section{
	background-color: var(--dark);
	padding: 120px 0px 100px 0px;
}
.review__heading img{
	width: 96px;
	height: 96px;
}
.review__heading h2{
	color: #E6E6E6;
	line-height: 120%;
}
.review__Subheading{
	color: #E6E6E6;
	line-height: 135%;
}
.review__card{
	padding: 30px 30px 50px 30px;
	border-radius: 24px;
	border:1px solid #747474;
}
.review__card__title{
	color: #E6E6E6;
	line-height: 140%;
}
.review__card__text p{
	color: #E6E6E6;
	line-height: 140%;
}
.review__card__text{
	padding-bottom: 64px;
}
.review__card__image{
	max-width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.review__card__name{
	color: #E6E6E6;
	line-height: 140%;
}
.review__card__image img{
	margin-right: 10px;
	width: 100%;
	height: auto;
}
.review__card__position{
	color: #727272;
	line-height: 140%;
}
.marquee:hover .marquee__group {
  animation-play-state: paused;
}
.marquee {
  cursor: pointer;
}
.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 32px;
  mask-image: linear-gradient(
    var(--mask-direction, to right),
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 1%,
    hsl(0 0% 0% / 1) 99%,
    hsl(0 0% 0% / 0)
  );
  padding-bottom: 3px;
}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 32px;
  animation: scroll-x var(--duration) linear infinite;
}


.marquee--vertical {
  --mask-direction: to bottom;
}

.marquee--vertical,
.marquee--vertical .marquee__group {
  flex-direction: column;
}

.marquee--vertical .marquee__group {
  animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
  animation-direction: reverse;
  animation-delay: -3s;
}

@keyframes scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }
  to {
    transform: translateX(var(--scroll-end));
  }
}

@keyframes scroll-y {
  from {
    transform: translateY(var(--scroll-start));
  }
  to {
    transform: translateY(var(--scroll-end));
  }
}

/* Element styles */
.marquee .slideItem {
  display: grid;
  place-items: center;
  width: 390px;
  background: var(--dark);
  border:1px solid var(--themeGreen);
  aspect-ratio: 16/9;
  border-radius: 0.5rem;
}

.marquee--vertical .slideItem {
  aspect-ratio: 1;
  width: calc(var(--size) / 1.5);
  padding: calc(var(--size) / 6);
}

/* Parent wrapper */
.wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: auto;
  max-width: 100vw;
  background-color: var(--themeLite);
}

.wrapper--vertical {
  flex-direction: row;
  height: 100vh;
}

/*frustration section css
==========================================================================*/
.frustration__section{
	padding: 96px 0px 54px 0px;
	background-color: var(--dark);
}
.frustration__subHeading{
	color: #E6E6E6;
	line-height: 135%;
}
.frustration__Heading{
	padding-bottom: 64px;
}
.frustration__Heading h2{
	color: #E6E6E6;
	line-height: 120%;
}
.frustration__card{
	padding: 24px 36px;
	border-radius: 45px;
	border:1px solid #30322F;
	box-shadow: 0px 4px 0px 0px #DCF91D;
	margin-bottom: 64px;
}
.frustration__card__icon{
	max-width: 96px;
	height: 96px;
	border-radius: 50%;
	background-color: #232323;
	display: flex;
	justify-content: center;
	align-items: center;
}
.frustration__card__title{
	color: #E6E6E6;
	line-height: 140%;
}
.frustration__card__text{
	color: #E6E6E6;
}
.frustration__card__link{
	color: #FFFFE4;
	line-height: 140%;
}
.frustration__heading__image{
	width: 144px;
	height: 144px;
	rotate:-5.176deg;
	transform: translateY(-70px);

}
/*faqs section css
==========================================================================*/
.faqs{
	background-color: var(--dark);
	padding: 64px 0px 96px 0px;
	position: relative;
	z-index: 1;
}
.faqs::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 850px;
	left: 0;
	top: 0;
	background-image: url("../media/faqs.png");
	background-position: center;
	background-size: auto 100%;
	background-repeat: no-repeat;
	z-index: -1;
}
.faqs__heading{
	color: #FFFFE4;
	letter-spacing: -0.54px;
	line-height: 120%;
}
.accordion{
	margin:64px 0px;
}
.accordion-item{
	border-bottom: 1px solid #30322F !important;
	border-top: 1px solid #30322F !important;
	border-left:none !important;
	border-right:none !important;
	background-color:  rgba(13, 13, 13, 0.50) !important;
	border-radius: 0px !important
}
.accordion-button {
  background-color:  rgba(13, 13, 13, 0.50) !important;
  color: #FFFFE4 !important;
  border-radius: 0px;
  border:none !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
  letter-spacing: -1px;
  font-size: 500;
}

.accordion-button::after {
  background-image: url(../media/left.svg) !important;
  width: 36px !important;
  height: 20px !important;
  background-size: 100% 100% !important;
 background-position: center;
 position: absolute;
 top:33px;
 right:0;
 border:none !important;
}
.accordion-button:not(.collapsed) {
  background: rgba(13, 13, 13, 0.50) !important;
  color: #FFFFE4 !important;
  font-size: 24px;
  letter-spacing: -1px;
  border:none !important;

}
.accordion-button:not(.collapsed):after{
	background-image: url(../media/left.svg) !important;
	transform: rotate(90deg) !important;
	background-size: 100% 100%;
}
.accordion-button:focus {
  outline: none !important;
  box-shadow: 0 0 0 white !important;
   background-color:  rgba(13, 13, 13, 0.50) !important;
   border:none !important;
}
.accordion-body {
  padding: 20px 20px 40px 20px !important;
  background-color:  rgba(13, 13, 13, 0.50) !important;
}
.accordion-body p {
  color: #FFFFE4;
  letter-spacing: 0.051px;
  line-height: 141%;
}

/*Newsletter section css
======================================================================*/
.newsletter{
	background: linear-gradient(83deg, #4B5563 -2.46%, #0D0D0D 96.65%);
	padding: 64px 0px 140px 0px;
	position: relative;
}
.newsletter__bg{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 520px;
	height: auto;
	animation-delay: 4s !important;
}
.newsletter__heading{
	color: #F7F9EB;
	line-height: 120%;
	letter-spacing: -0.54px;
}
.newsletter__text{
	padding-top: 96px;
	padding-bottom: 40px;
}
.newsletter__text p{
	color: #DBDECB;
	line-height: 150%;
	letter-spacing: 0.18px;
}
.newsletter__box input{
	background: #191A19;
	padding: 24px 30px;
	border:none;
	color: #F6F7F6;
	font-weight: 400;
	border-radius: 8px 0px 0px 8px;
	width: 60%;
}
.newsletter__box input:focus{
	outline: none;
}
.newsletter__box button{
	border-radius: 0px 8px 8px 0px;
	background: linear-gradient(180deg, #C3D455 14.98%, #859900 131.58%);
	color: #191A19;
	font-size: 20px;
	padding:  16px 32px 16px 32px;
	border:none;
	letter-spacing: 3.2px;
	width: 40%;
}
/*footer section css
=========================================================================================*/
footer{
	background-color: var(--dark);
	padding: 96px 0px 200px 0px;
}
.footer_adress{
	color: #808080;
	line-height: 120%;
	font-size: 14px;
	width: 60%;
}
.footer__social__list ul{
	gap:10px;
}
.footer__social__list ul li a img{
	width: 36px ;
	height: 36px;
}
.fooer_link_heading{
	padding-bottom: 40px;
}
.fooer_link_heading p{
	font-size: 14px;
	color: #CCCACA;
	line-height: 120%;
}
.footer__link{
	color: #B3B3B3;
	font-size: 14px;
	line-height: 120%;
	transition: 0.3s;
}
.footer__link:hover{
	color: #C1E600;
}
.footer_list li{
	margin-bottom: px;
}
.copy__right__text{
	color: #808080;
	font-size: 12px;
	line-height: 120%;
}
.copy__right{
	background-color: var(--dark);
	padding-bottom: 96px;
}
.copy__right__text a{
	color: #C1E600;
	opacity: 0.9;
}
.copy__right__text:hover a{
	color: #C1E600;
	opacity: 1
}
.text_right{
	text-align: right;
}


@media screen and (min-width: 1400px){
	.newsletter__bg{
		width: 650px;
	}
}
@media screen and (max-width: 1200px){
	.newsletter__bg{
		width: 450px;
		height: auto;
	}
}
@media screen and (max-width: 991px){
	/*-------------------font size ---------------------*/
	.fontSize14{
		font-size: 14px;
	}
	.fontSize15{
		font-size: 15px;
	}
	.fontSize17{
		font-size: 16px;
	}
	.fontSize16{
		font-size: 16px;
	}
	.fontSize18{
		font-size: 17px;
	}
	.fontSize19{
		font-size: 18px;
	}
	.fontSize20{
		font-size: 19px;
	}
	.fontSize22{
		font-size: 20px;
	}
	.fontSize24{
		font-size: 21px;
	}
	.fontSize26{
		font-size: 22px;
	}
	.fontSize28{
		font-size: 24px;
	}
	.fontSize38{
		font-size: 32px;
	}
	.fontSize40{
		font-size: 33px;
	}
	.fontSize44{
		font-size: 38px;
	}
	.fontSize54{
		font-size: 40px;
	}
	.fontSize64{
		font-size: 48px;
	}
	/*tablet navbar============================================*/
	.navbar{
		padding: 10px 0px !important
	}
	.navbar-nav li{
		margin: 10px 0px;
	}
	/*banner section ======================================*/
	.banner{
		padding-top: 50px;
	}
	.video-container{
		height: 324px;
	}
	/*subscribe__section====================================*/
	.subscribe__section{
		padding: 50px 0px 0px 0px;
	}
	.subscribe__card__number{
		width: 100px;
		height: 100px;
	}
	.subscribe__card__number span{
		font-size: 40px;
	}
	.subscribe__card{
		padding-bottom: 56px;
	}
	/*testimonial__section===================================*/
	.testimonial__section{
		padding: 50px 0px;
	}

	/*opportunitie__section ==================================*/
	.opportunitie__section{
		padding: 50px 0px 0px 0px;
	}
	.opportunitie__heading img{
		width: 80px;
		height: auto;
	}

	/*pricing__section =====================================*/
	.pricing__section{
		padding-top: 80px;
	}

	/*review__section ======================================*/
	.review__section{
		padding: 80px 0px 50px 0px;
	}
	.marquee .slideItem{
		width: 300px;
	}
	.marquee .slideItem .review__card{
		padding: 20px 20px 30px 20px;
	}
	.review__card__text{
		padding-bottom: 40px
	}
	/*frustration__section ================================*/
	.frustration__section{
		padding: 50px 0px 36px 0px;
	}
	.frustration__Heading {
		padding-bottom: 40px;
	}
	.frustration__heading__image{
		width: 100px;
		height: 100px;
		transform: translate(-40px, -100px);
	}
	.frustration__card__icon {
		width: 70px;
		height: 70px;
	}
	.frustration__card__icon svg{
		width: 40px;
		height: auto;
	}
	.frustration__card{
		padding: 24px;
	}
	/*faqs ============================================*/
	.faqs{
		padding: 40px 0px 50px 0px;
	}
	.faqs::before{
		height: 750px;
	}
	/*.newsletter =====================================*/
	.newsletter{
		padding: 50px 0px;
	}
	.newsletter__bg{
		width: 350px;
		bottom: 43%;
	}
	/*footer ==========================================*/
	footer{
		padding: 50px 0px 100px 0px;
	}
	.footer__logo_box{
		text-align: center;
	}
	.footer_adress{
		width: 100%;
	}
	.footer__social__list ul{
		justify-content: center;
		padding-bottom: 32px;
	}
	.fooer_link_heading{
		text-align: center;
	}
	.footer_list{
		text-align: center;
	}
	.footer_list li{
	margin-bottom: 18px !important;
	}
	.fooer_link_heading{
		padding-bottom: 24px;
	}
	.mobile_pt{
		padding-top: 32px;
	}
}

@media screen and (max-width: 767px){
	/*-------------------font size ---------------------*/
	.fontSize14{
		font-size: 14px;
	}
	.fontSize15{
		font-size: 15px;
	}
	.fontSize17{
		font-size: 15px;
	}
	.fontSize16{
		font-size: 15px;
	}
	.fontSize18{
		font-size: 16px;
	}
	.fontSize19{
		font-size: 17px;
	}
	.fontSize20{
		font-size: 16px;
	}
	.fontSize22{
		font-size: 19px;
	}
	.fontSize24{
		font-size: 21px;
	}
	.fontSize26{
		font-size: 20px;
	}
	.fontSize28{
		font-size: 22px;
	}
	.fontSize38{
		font-size: 28px;
	}
	.fontSize40{
		font-size: 30px;
	}
	.fontSize44{
		font-size: 32px;
	}
	.fontSize54{
		font-size: 33px;
	}
	.fontSize64{
		font-size: 40px;
	}
	/*tablet navbar============================================*/
	.navbar{
		padding: 0px 0px !important
	}
	/*banner section ======================================*/
	.banner{
		padding-top: 30px;
	}
	.video-container{
		height: 290px;
	}
	/*subscribe__section====================================*/
	.subscribe__section{
		padding: 30px 0px 0px 0px;
	}
	.subscribe__heading{
		padding-bottom: 32px;
	}
	.subscribe__heading h2{
		text-align: center;
	}
	.subscribe__card{
		padding-bottom: 46px;
	}
	.SVGAnalytics{
		display: none;
	}
	.SVGAnalytics-mobile{
		display: block;
		padding-bottom: 0px;
	}
	/*testimonial__section===================================*/
	.testimonial__section{
		padding: 32px 0px;
	}
	.testimonial__image{
		width: 96px ;
		height: 96px ;
	}
	/*opportunitie__section ==================================*/
	.opportunitie__section{
		padding: 32px 0px;
	}
	.opportunitie__heading img{
		width: 60px;
		height: auto;
		display: none;
	}
	.opportunitie__heading h2{
		text-align: center;
	}
	.opportunitie__info{
		left: -5px;
		padding: 3px 10px;
	}
	.opportunitie__info span{
		font-size: 13px;
	}
	.opportunitie__section .nav-pills .nav-item .nav-link{
		font-size: 16px;
	}
	/*pricing__section =====================================*/
	.pricing__section{
		padding-top: 50px;
	}
	/*review__section ======================================*/
	.review__section{
		padding: 50px 0px 32px 0px;
	}
	.review__heading img{
		width: 60px;
		height: auto;
	}
	.marquee .slideItem .review__card{
		padding: 10px 20px 20px 20px;
	}
	.review__card__text{
		padding-bottom: 28px
	}
	.laptop__review{
		display: none;
	}
	.mobile__review{
		display: block;
	}

	/*frustration__section ================================*/
	.frustration__section{
		padding: 32px 0px 0px 0px;
	}
	.frustration__Heading {
		padding-bottom: 32px;
	}
	.frustration__heading__image{
		display: none;
	}
	.frustration__card__icon {
		width: 60px;
		height: 60px;
	}
	.frustration__card__icon svg{
		width: 35px;
		height: auto;
	}
	.frustration__card{
		padding: 16px 24px;
		margin-bottom: 40px;
	}
	/*faqs ============================================*/
	.faqs{
		padding: 32px 0px 50px 0px;
	}
	.accordion{
		margin: 40px 0px;
	}
	.accordion-button{
		padding:16px 24px !important;
        font-size: 14px !important;
	}
	.faqs::before{
		height: 550px;
	}
	/*newsletter ==================================*/
	.newsletter__box button{
		padding: 25px 10px;
	}
	.newsletter h2{
		text-align: center;
	}
	footer{
		padding: 32px 0px 50px 0px;
	}
	.copy__right{
		padding-bottom: 40px;
	}
	.copy__right__text{
		text-align: center;
		padding-top: 10px;
	}
	
}
@media screen and (max-width: 500px){
	.newsletter__bg{
		width: 300px;
		bottom:54%;
	}
	.newsletter__box {
		flex-direction: column;
	}
	.newsletter__box input{
		width: 100%;
		border-radius: 8px 8px 0px 0px;
	}
	.newsletter__box button{
		width: 100%;
		border-radius: 0px 0px 8px 8px;
	}
}
@media screen and (max-width: 400px){
	.mobile_column{
		flex-direction: column;
	}
	.btn__theme__primary{
		margin-bottom: 0px !important;
	}
	.btn__theme__secondary{
		margin-bottom: 0px !important;
	}
}
@media screen and (max-width: 460px){
	.video-container{
		height: 245px;
	}
}
@media screen and (max-width: 430px){
	.video-container{
		height: 230px;
	}
}
@media screen and (max-width: 400px){
	.video-container{
		height: 210px;
	}
}
@media screen and (max-width: 375px){
	.video-container{
		height: 196px;
	}
}
@media screen and (max-width: 360px){
	.video-container{
		height: 188px;
	}
}
@media screen and (max-width: 340px){
	.video-container{
		height: 175px;
	}
}
@media screen and (max-width: 340px){
	.video-container{
		height: 168px;
	}
}
/*----------------------------------------scroll animation css -------------------------*/

.animation-top {
  opacity: 0.4;
  transform: translateY(100px);
  transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1),
    opacity 0.3s 0.25s ease-out;
  will-change: transform, opacity;
  transition: 0.8s;
}

.animation-top.is-visible {
  opacity: 1;
  transform: translateY(0px);
}
.animation-right {
  opacity: 0;
  transform: translateX(100px);
  transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1),
    opacity 0.5s 0.25s ease-out;
  will-change: transform, opacity;
  transition: 0.8s;
}

.animation-right.is-visible {
  opacity: 1;
  transform: translateX(0px);
}

.animation-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1),
    opacity 0.5s 0.25s ease-out;
  will-change: transform, opacity;
  transition: 0.8s;
}

.animation-left.is-visible {
  opacity: 1;
  transform: translateX(0px);
}
@media screen and (max-width: 320px) {
  .animation-top {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }
  .animation-right {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }
}