/*--------------
 Fonts
 ---------------*/
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/*--------------
 Global CSS
----------------*/
:root {
	--main-color: #7857fe;
	--color-1: #e91e63;
	--color-2: #f5ae10;
	--color-3: #09d69c;
	--bg-dark: #2b2c2f;
	--main-to-dark-color: var(--main-color);
	--dark-to-main-color: var(--bg-dark);
	--shadow-black-100: 0 5px 15px rgba(0,0,0,0.1);
	--shadow-black-300: 0 5px 15px rgba(0,0,0,0.3);
	--black-900: #000000;
	--black-400: #555555;
	--black-100: #f7f7f7;
	--black-000: #ffffff;
	--black-alpha-100: rgba(0,0,0,0.05);
}
body {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	overflow-x: hidden;
	background-color: #fff;
	color: #000;
	line-height: 1.5;
	transition: 0.3s linear;
}
body.dark{
	color: #fff;
	background-color: var(--bg-dark);
	--black-100: #2a2a2f;
	--black-000: var(--bg-dark);
	--main-to-dark-color: var(--bg-dark);
	--dark-to-main-color: var(--main-color);
	--shadow-black-100: var(--shadow-black-300);
	--black-alpha-100: rgba(255,255,255,0.05);
	--black-900: #ffffff;
	--black-400: #bbbbbb;
}
*{
	margin: 0;
	padding: 0;
	outline: none!important;
}

/*--------------------
 Section Global
---------------------*/
 .section-padding{
	padding: 40px 0;
 }
 .section-title {
	margin-bottom: 40px;
 }
 .section-title h2 {
	font-size: 40px;
	color: var(--black-900);
	font-weight: 700;
 	text-transform: capitalize;
 	text-align: center;
 	margin: 0;
 }
 .section-title h2 span {
	color: var(--main-color);
 }

 .content-title{
	margin-bottom: 10px;
 }
 .content-title h3{
 	font-size: 30px;
	color: var(--black-900);
	font-weight: 500;
 	text-transform: capitalize;
 	text-align: left;
 	margin: 0;
 }
 .content-title h3 span {
	color: var(--main-color);
 }

 .content-text p a{
 	text-decoration: none;
 }

/*-----------------------
 Toggle Theme - light and dark
------------------------*/
 .toggle-theme{
	position: fixed;
	right: 0;
	top: calc(50% - 20px);
	height: 40px;
	width: 40px;
	background-color: var(--dark-to-main-color);
	z-index: 1200;
	color: #ffffff;
	cursor: pointer;
	border-radius: 50%;
	box-shadow: var(--shadow-black-300);
	font-size: 16px;
	text-align: center;
 }
 .toggle-theme i {
	line-height: 40px;
 }

/*-----------------
 Preloader Section
-------------------*//*
 .preloader{
 	position: fixed;
 	left: 0;
 	top: 0;
 	height: 100%;
 	width: 100%;
 	z-index: 2100;
 	background-color: var(--main-to-dark-color);
 }
 .preloader div {
 	display: block;
 	position: relative;
 	left: 50%;
 	top: 50%;
 	height: 150px;
 	width: 150px;
 	margin: -75px 0 0 -75px;
 	border-radius: 50%;
 	border: 3px solid transparent;
 	border-top-color: #ffffff;
 	border-radius: 50%;
 	animation: spin 2s linear infinite;
 }
 .preloader div::before{
 	content: '';
 	position: absolute;
 	top: 5px;
 	left: 5px;
 	right: 5px;
 	bottom: 5px;
 	border: 3px solid transparent;
 	border-radius: 50%;
 	border-top-color: var(--color-1);
 	animation: spin 3s linear infinite;
 }
 .preloader div::after{
 	content: '';
 	position: absolute;
 	top: 15px;
 	left: 15px;
 	right: 15px;
 	bottom: 15px;
 	border: 3px solid transparent;
 	border-radius: 50%;
 	border-top-color: var(--color-3);
 	animation: spin 1.5s linear infinite;
 }
 
/*-----------------
 Navbar Section
-------------------*/
 .navbar{
	background-color: var(--main-to-dark-color);
	padding: 20px 0;
	transition: all 0.5s  ease;
 }
 .navbar.navbar-shrink {
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
	background-color: var(--main-to-dark-color);
	padding: 10px 0;
 }
 .navbar > .container{
	padding: 0 15px;
 }

 .navbar .navbar-brand {
	font-size: 30px;
	color: #ffffff;
	font-weight: 500;
	text-transform: capitalize;
 }
 .navbar .nav-item{
	margin-left: 40px;
 }
 .navbar .nav-item .nav-link{
	font-size: 16px;
	color: #ffffff;
	text-transform: capitalize;
	font-weight: 400;
	padding: 5px 0;
	position: relative;
 }
 .navbar .nav-item .nav-link::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: #ffffff;
	transition: all 0.5s ease;
	transform: scale(0);
 }
 .navbar .nav-item .nav-link.active::before,
 .navbar .nav-item .nav-link:hover::before {
	transform: scale(1);
 }

/*--------------------
 Introduction Section
----------------------*/
 .introduction{
	background-color: var(--black-000);
	padding: 140px 0 0 0;
 }
 .date{
	font-size: 24px;
	margin: 4px;
	font-weight: 300;
	color: var(--black-900);
 }

/*---------------------
 Intro Section
-----------------------*/
 .intro{
 	padding: 140px 0 30px;
 	background-color: var(--main-to-dark-color);
 	position: relative;
 	z-index: 1;
 	overflow-x: hidden; 
 }

/*-----------------
 Content Section
-------------------*/
 .content{
 	background-color: var(--main-to-dark-color);
 	color: #ffffff;
 }
 .content .section-title{
 	color: #fff;
 }
 .content-list{
 	padding: 0 12px;
 }
 .content-list li a{
 	text-decoration: none;
 	color: #ffffff;
 	font-weight: 400;
 }
 .content-list li a:hover{
 	opacity: .6;
 }

/*-------------------------
 Security Section
---------------------------*/
 .security{
 	background-color: var(--black-100);
 }

/*-------------------------
 Protection Section
---------------------------*/
 .protection{
 	background-color: var(--black-100);
 }

/*-------------------------
 Businesstransfers Section
---------------------------*/
 .businesstransfers{
 	background-color: var(--black-100);
 }

/*-------------------------
 Credit Section
---------------------------*/
 .credit{
 	background-color: var(--black-100);
 }

/*-------------------------
 Thanks Section
---------------------------*/
 .thanks{
 	color: var(--black-900);
 }

/*----------------------
 Responsive Section
------------------------*/
 @media (max-width: 991px) {
 	.navbar-toggler{
 		background-color: var(--main-to-dark-color);
 		box-shadow: var(--shadow-black-300);
 		height: 34px;
 		width: 44px;
 		padding: 0;
 		font-size: 17px;
 		color: #ffffff;
 	}
 	.navbar-nav{
 		background-color: var(--main-to-dark-color);
 		box-shadow: var(--shadow-black-300);
 	}
 	.navbar .nav-item{
 		margin: 0;
 		padding: 5px 15px;
 	}
 	.navbar.navbar-shrink .navbar-toggler,
 	.navbar.navbar-shrink .navbar-nav{
 		background-color: var(--main-to-dark-color);
 	}
 	.sl-text{
 		font-size: 28px;
 	}
 }
 @media (max-width: 767px){
 	font-size: 16px;
	.section-title h2{
		font-size: 33px;
	}
	.content-title h3{
		font-size: 25px;
	}
	.sl-text{
 		font-size: 25px;
 	}
 }
 @media (max-width: 575px){
 	font-size: 14px;
 	.section-title h2 {
		font-size: 30px;
 	}
	.content-title h3{
		font-size: 22px;
	}
	.sl-text{
 		font-size: 20px;
 	}
 }