/* font */

@import url('https://fonts.cdnfonts.com/css/bodoni-std');
 @import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Style+Script&display=swap');


 .theme_color {
 	color: var(--main-color);
 }

 /* Theme Color */

 :root {

 	/* #960016 in decimal RGB */
 	--main-color: #960016;
 	/* #F8F4E1 in decimal RGB */
 	--secondary-color: #F8DE7E;
 	/* #FEBA17 in decimal RGB */
 	--color-three: #FEBA17;
 	/* blur in decimal RGB */
 	--color-blur: rgba(255, 255, 255, 0.1);
 	/* #fff in decimal RGB */
 	--footer-bg: #ffffff;
 	/* #1b1b1b in decimal RGB */
 	--color-body: #1b1b1b;
 	/* #262626 in decimal RGB */
 	--color-heading: #262626;
 	/* #eee in decimal RGB */
 	--color-line: #eee;
 	/* #ffffff in decimal RGB */
 	--white-color: #ffffff;
 	/* #000000 in decimal RGB */
 	--black-color: rgb(0, 0, 0);
 	--color-background: #EEEEEE;
 	--color-design: #fcf7f6;
 	--color-research: #f5f5f5;
 	--radius: 240px;
 	--f-light: 300;
 	--f-regular: 400;
 	--f-medium: 500;
 	--f-semi-bold: 600;
 	--f-bold: 700;
 	--f-extra-bold: 800;
 	--f-black: 900;
 	--translate: translate(-50%, -50%);
 	--transition: all 0.4s ease;
 	--font-primary: "Mulish", sans-serif;
 	--font-secondary:'Bodoni Std', sans-serif;
 	--font-script: "Style Script", cursive;
 	--fontawesome: "fontawesome", sans-serif;
 	--line-height-b1: 26px;
 	--line-height-b2: 26px;
 	--line-height-b3: 1.7;
 	--h1: 64px;
 	--h2: 48px;
 	--h3: 40px;
 	--h4: 36px;
 	--h5: 24px;
 	--h6: 20px;
 	--p-l: 24px;
 	--p-m: 20px;
 	--p-s: 16px;
 	--p-xs: 14px;
 }

 /*** 

====================================================================
	Reset
====================================================================

 ***/

 * {
 	margin: 0px;
 	padding: 0px;
 	border: none;
 	outline: none;
 }

 /*** 

====================================================================
	Global Settings
====================================================================

***/




 /* width */
 ::-webkit-scrollbar {
 	width: 10px;
 }

 /* Track */
 ::-webkit-scrollbar-track {
 	background: #f1f1f1;
 }

 /* Handle */
 ::-webkit-scrollbar-thumb {
 	background-color: var(--secondary);
 }

 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
 	background-color: var(--main-color);
 }

 body {
 	font-family: var(--font-family-Anybody);
 	line-height: 1.6em;
 	background-color: #ffffff;
	background-image: url("/images/svg/download.svg");
	background-repeat: repeat;

 }

 .leaf-bg {
 	position: relative;
 }

 .leaf-bg::before {
 	content: "";
 	position: fixed;
 	left: 0;
 	top: 200px;
 	z-index: -1;
 	height: calc(50% + 0px);
 	width: 100%;
 	/* background-image: url(/images/logo/logo-bg.png); */
 	background-size: auto 100%, auto;
 	background-repeat: no-repeat;
 	background-position: center;
 	filter: opacity(0.2);
 }

 .inner--page--bg {
 	position: relative;
	overflow: hidden;
 }

 .inner--page--bg::before {
 	content: "";
 	position: absolute;
 	left: 20%;
 	top: 25%;
 	z-index: 0;
 	height: calc(50% + 10px);
 	width: 100%;
 	background-image: url(/images/logo/logo-bg.png);
 	background-size: auto 100%, auto;
 	background-repeat: no-repeat;
 	filter: opacity(0.1);
 	-webkit-filter: opacity(0.1);
 }

 v section {
 	margin-top: 80px;
 	margin-bottom: 80px;
 }

 .inner-page-section {
 	margin-top: 40px;
 	margin-bottom: 40px;
 }

 @media (min-width: 768px) and (max-width: 992px) {
 	section {
 		margin-top: 60px;
 		margin-bottom: 60px;
 	}

 	.inner-page-section {
 		margin-top: 30px;
 		margin-bottom: 30px;
 	}
 }

 @media (min-width: 579px) and (max-width: 767px) {
 	section {
 		margin-top: 40px;
 		margin-bottom: 40px;
 	}

 	.inner-page-section {
 		margin-top: 20px;
 		margin-bottom: 20px;
 	}
 }

 @media (min-width: 300px) and (max-width: 578px) {
 	section {
 		margin-top: 0px;
 		margin-bottom: 40px;
 	}

 	.inner__section {
 		margin-top: 40px;
 	}

 	.inner-page-section {
 		margin-top: 20px;
 		margin-bottom: 20px;
 	}
 }

 .container {
 	max-width: 1290px;
 	margin: auto;
 	padding-left: 15px;
 	padding-right: 15px;
 }

 i {
 	font-style: normal;
 }

 a {
 	text-decoration: none;
 	cursor: pointer;
 	transition: all 0.3s ease;
 	-moz-transition: all 0.3s ease;
 	-webkit-transition: all 0.3s ease;
 	-ms-transition: all 0.3s ease;
 	-o-transition: all 0.3s ease;
 	color: var(--secondary);
 }

 a {
 	color: var(--color-heading);
 	text-decoration: none;
 	outline: none;
 }

 a:hover,
 a:focus,
 a:active {
 	text-decoration: none;
 	outline: none;
 	transition: all 0.3s ease;
 }

 a:focus {
 	outline: none;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
 	position: relative;
 	margin: 0px;
 	background: none;
 	color: var(--color-heading);
 	font-family: var(--font-secondary);
 }

 textarea {
 	overflow: hidden;
 }

 .text,
 p {
 	position: relative;
 	line-height: 1.5em;
 	font-size: 14px;
 	color: var(--color-body);
 	font-weight: 400 !important;
 	font-family: var(--font-primary);
 	/* text-align:start; */
 }

 /* Typography */

 h1,
 .h1 {
 	font-size: var(--h1);
 	line-height: 91px;
 }

 h2,
 .h2 {
 	font-size: var(--h2);
 	line-height: 1.23;
 }

 h3,
 .h3 {
 	font-size: var(--h3);
 	line-height: 54px;
 }

 h4,
 .h4 {
 	font-size: var(--h4);
 	line-height: 1.25;
 }

 h5,
 .h5 {
 	font-size: var(--h5);
 	line-height: 1.24;
 }

 h6,
 .h6 {
 	font-size: var(--h6);
 	line-height: 1.25;
 }

 @media only screen and (min-width: 768px) and (max-width: 991px) {

 	h1,
 	.h1 {
 		font-size: 38px;
 	}

 	h2,
 	.h2 {
 		font-size: 32px;
 	}

 	h3,
 	.h3 {
 		font-size: 28px;
 	}

 	h4,
 	.h4 {
 		font-size: 24px;
 	}

 	h5,
 	.h5 {
 		font-size: 18px;
 	}
 }

 @media only screen and (max-width: 767px) {

 	h1,
 	.h1 {
 		font-size: 34px;
		line-height: 42px !important;
 	}

 	h2,
 	.h2 {
 		font-size: 32px;
		line-height: 40px !important;
 	}

 	h3,
 	.h3 {
 		font-size: 30px;
		line-height: 38px !important;
 	}

 	h4,
 	.h4 {
 		font-size: 28px !important;
		line-height: 34px !important;
 	}

 	h5,
 	.h5 {
 		font-size: 20px;
		line-height: 28px !important;
 	}
 }

 h1 {
 	line-height: 68px;
 	font-size: 64px;
 }

 h2 {
 	line-height: 52px;
 	font-size: 48px;
 }

 h3 {
 	line-height: 44px;
 	font-size: 40px;

 }

 h4 {
 	line-height: 40px;
 	font-size: 36px;
 	font-weight: 600;
 }

 h5 {
 	line-height: 28px;
 	font-size: 24px;
 }

 h6 {
 	line-height: 24px;
 	font-size: 20px;
 }

 .auto-container {
 	position: static;
 	max-width: 1320px;
 	padding: 0px 15px;
 	margin: 0 auto;
 }

 .rts-section-title {
 	font-weight: 400;
 	margin-bottom: 0;
 	line-height: 1.2;
 }

 ul,
 li {
 	list-style: none;
 	padding: 0px;
 	margin: 0px;
 }

 img {
 	display: inline-block;
 	max-width: 100%;
 }

 .theme-btn {
 	cursor: pointer;
 	display: inline-block;
 	transition: all 0.3s ease;
 	-moz-transition: all 0.3s ease;
 	-webkit-transition: all 0.3s ease;
 	-ms-transition: all 0.3s ease;
 	-o-transition: all 0.3s ease;
 }

 .centered {
 	text-align: center;
 }

 .animate {
 	font-size: 16px;
 	font-family: var(--font-primary);
 	list-style: none;
 	line-height: 1.5rem;
 	color: var(--color-heading);
 }

 .main-head-span {
 	font-weight: 800;
	background: #50C878;
	background: linear-gradient(90deg,rgba(80, 200, 120, 1) 0%, rgba(64, 224, 208, 1) 100%);
 	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
 }

 /***

====================================================================
	Scroll To Top style
====================================================================

***/

 .progress-wrap {
 	position: fixed;
 	right: 35px;
 	bottom: 40px;
 	height: 35px;
 	width: 35px;
 	cursor: pointer;
 	display: block;
 	border-radius: 50px;
 	color: var(--main-color);
 	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.20);
 	z-index: 99;
 	opacity: 0;
 	visibility: hidden;
 	-webkit-transition: all 200ms linear;
 	transition: all 200ms linear;
 	transform: translateY(15px);
 	-webkit-transform: translateY(15px);
 	-moz-transform: translateY(15px);
 	-ms-transform: translateY(15px);
 	-o-transform: translateY(15px);
 }

 .progress-wrap::after {
 	position: absolute;
 	content: '\F6C0';
 	font-family: "bootstrap-icons";
 	text-align: center;
 	line-height: 35px;
 	font-size: 18px;
 	stroke: var(--main-color);
 	left: -3px;
 	top: 0px;
 	height: 40px;
 	width: 40px;
 	cursor: pointer;
 	display: block;
 	font-weight: 500;
 	z-index: 1;
 	-webkit-transition: all 200ms linear;
 	transition: all 200ms linear;
 }

 .progress-wrap svg path {
 	fill: none;
 }

 .progress-wrap svg.progress-circle path {
 	stroke: var(--main-color);
 	stroke-width: 4;
 	box-sizing: border-box;
 	-webkit-transition: all 200ms linear;
 	transition: all 200ms linear;
 }

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

 .progress-wrap.style2::after {
 	color: var(--thm-color-2);
 }

 .progress-wrap.style2 svg.progress-circle path {
 	stroke: var(--thm-color-2);
 }

 .progress-wrap.style3::after {
 	color: var(--thm-color-3);
 }

 .progress-wrap.style3 svg.progress-circle path {
 	stroke: var(--thm-color-3);
 }

 /* List Style One */

 .list-style-one {
 	position: relative;
 }

 .list-style-one li {
 	position: relative;
 	color: var(--white-color);
 	font-size: 16px;
 	font-weight: 400;
 	line-height: 1.8em;
 	margin-bottom: var(--margin-bottom-10);
 	padding-left: var(--padding-left-30);
 }

 .list-style-one li a {
 	position: relative;
 	color: var(--white-color);
 	-webkit-transition: all 300ms ease;
 	-moz-transition: all 300ms ease;
 	-ms-transition: all 300ms ease;
 	-o-transition: all 300ms ease;
 	transition: all 300ms ease;
 }

 .list-style-one li a:hover {
 	color: var(--main-color);
 }

 .list-style-one li .icon {
 	position: absolute;
 	left: 0px;
 	top: 5px;
 	color: var(--main-color);
 	font-size: 18px;
 	line-height: 1em;
 	font-weight: 300;
 	-webkit-transition: all 300ms ease;
 	-moz-transition: all 300ms ease;
 	-ms-transition: all 300ms ease;
 	-o-transition: all 300ms ease;
 	transition: all 300ms ease;
 }


 img {
 	display: inline-block;
 	max-width: 100%;
 	height: auto;
 }

 /*** 

====================================================================
	Section Title
====================================================================

***/

 .sec-title {
 	position: relative;
 	z-index: 2;
 	margin-bottom: 40px;
 }

 .sec-title_icon {
 	position: relative;
 	-webkit-animation: icon-bounce 0.8s ease-out infinite;
 	animation: icon-bounce 0.8s ease-out infinite;
 }

 .sec-title_title {
 	position: relative;
 	font-weight: 400;
 	display: block;
 	font-size: 18px;
 	letter-spacing: 1px;
 	margin-top: 20px;
 	color: var(--main-color);
 	text-transform: uppercase;

 }

 .sec-title_heading {
 	margin-top: 10px;
 	font-weight: 500;
 	color: var(--main-color);
 	text-transform: capitalize;
 	font-family: "Original Surfer", sans-serif;

 }

 .sec-title_heading_w {
 	margin-top: 10px;
 	font-weight: 400;
 	color: var(--white-color);
 	text-transform: capitalize;
 	font-family: "Original Surfer", sans-serif;

 }

 .sec-heading {
 	position: relative;
 	margin-bottom: 20px;
 	font-weight: 400;
 	display: block;
 	font-size: 32px;
 	line-height: 40px;
 	letter-spacing: 1px;
 	margin-top: 20px;
 	color: var(--main-color);
 	font-family: "Original Surfer", sans-serif;
 }

 .sec-title_text {
 	line-height: 28px;
 	font-size: 16px;
 	margin-top: 20px;
 	color: var(--secondary);
 }

 .sec-title.light .sec-title_text,
 .sec-title.light .sec-title_heading {
 	color: var(--white-color);
 }

 .sec-title.centered {
 	text-align: center !important;
 }

 .sec-title.centered .separator {
 	margin: 0 auto;
 }



 /* heading after */

 .fancierTitle h3 {
 	position: relative;
 	display: inline-block;
 	padding: 10px;
 }

 .fancierTitle h3:after {
 	content: " ";
 	width: 15%;
 	height: 1px;
 	display: block;
 	background-color: var(--main-color);
 	position: absolute;
 	bottom: 0;

 }

 .fancierTitle h3:before {
 	content: " ";
 	width: 100%;
 	height: 1px;
 	display: block;
 	background: var(--color-five);
 	position: absolute;
 	bottom: 0;
 	left: 0;
 }


 .js-scroll {
 	position: fixed;
 	z-index: 10;
 	top: 0;
 	left: 0;
 	overflow: hidden;
 	width: 100%;
 	will-change: transform;
 }


 .aims-icon {
 	padding: 0 10px 0 0;
 	color: var(--main-color);
 }


 .web-btn {
 	width: 140px;
 	height: 34px;
 	font-size: 11px;
 	cursor: pointer;
 	border: none;
 	outline: none;
 	background: transparent;
 	color: var(--color-body);
 	font-family: var(--font-primary);
 	font-weight: 500;
 	position: relative;
 	transition: all 0.5s;
 	z-index: 1;
 	text-transform: uppercase;
 }

 .web-btn::before {
 	content: "";
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 3px;
 	height: 100%;
 	background-color: var(--main-color);
 	z-index: -1;
 	transition: all 0.5s;
 }

 .web-btn:hover::before {
 	width: 100%;
 }

 .web-btn:hover {
 	color: rgb(255, 255, 255);
 }

 .web-btn:active:before {
 	background: #b9b9b9;
 }


 /* modal */
 .modal.right .modal-dialog {
 	position: absolute;
 	right: 0;
 	margin: 0;
 	max-width: 450px;
 	/* background-image: url(images\about\bg.webp); */
 	background-position: top right;
 	background-size: cover;
 }

 .modal.right .modal-content {
 	height: 100%;
 	border-radius: 0;
 	background: #ffffff;
 }

 /* Optional: Make it slide in */
 .modal.right.fade .modal-dialog {
 	transform: translateX(100%);
 	transition: transform 0.3s ease-out;
 }

 .modal.right.fade.show .modal-dialog {
 	transform: translateX(0);
 }

 .modal.right .modal-content .modal-body img {
 	width: 100%;
 	height: auto;
 }

 .modal.right.fade.show .modal-dialog .modal-footer {
 	display: flex;
 	justify-content: center;
 	border-top: none;
 }

 .modal.right.fade.show .modal-dialog .modal-content .modal-header {
 	border-bottom: none;
 }

 .modal.right.fade.show .modal-dialog .modal-content .modal-footer .Reset-btn {
 	background-color: var(--main-color);
 	border: 1px solid var(--main-color);
 	padding: 4px 50px;
 	transition: .3s;
 	color: #fff;
 	font-family: var(--font-primary);
 	font-size: 13px;
 }

 .modal.right.fade.show .modal-dialog .modal-content .modal-footer .Reset-btn:hover {
 	border: 1px solid var(--main-color);
 	background-color: transparent;
 	color: var(--main-color);
 }

 .modal.right.fade.show .modal-dialog .modal-content .modal-footer .Reset-btn-close {
	background-color: var(--color-body);
	border: 1px solid var(--color-body);
	padding: 4px 50px;
	transition: .3s;
	color: #fff;
	font-family: var(--font-primary);
	font-size: 13px;
	border-radius:2px ;
	-webkit-border-radius:2px ;
	-moz-border-radius:2px ;
	-ms-border-radius:2px ;
	-o-border-radius:2px ;
}

 .modal.right.fade.show .modal-dialog .modal-content .modal-footer .Reset-btn-close:hover {
 	border: 1px solid var(--color-body);
 	background-color: transparent;
 	color: var(--color-body);
 }

 .modal.right .modal-dialog .modal-content .modal-header .btn-close {
 	--bs-btn-close-hover-opacity: 0.75;
 	--bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
 	--bs-btn-close-focus-opacity: 1;
 	--bs-btn-close-disabled-opacity: 0.25;
 	--bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
 	box-sizing: content-box;
 	width: 10px;
 	height: 10px;
 	padding: .25em .25em;
 	color: #ff0000;
 	background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat;
 	border-radius: .375rem;
 	opacity: var(--bs-btn-close-opacity);
 }

 /*----------------------------------------*/
 /*  call button
/*----------------------------------------*/

 #main-div {
 	position: fixed;
 	right: 20px;
 	bottom: 20px;
 	z-index: 9;

 }

 #main-button {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	position: absolute;
 	right: 0;
 	bottom: 0;
 	height: 55px;
 	width: 55px;
 	font-size: 27px;
 	color: var(--main-color);
 	cursor: pointer;
 	background-color: #fff;
 	box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.196);
 	border-radius: 50%;
 	-webkit-border-radius: 50%;
 	-moz-border-radius: 50%;
 	-ms-border-radius: 50%;
 	-o-border-radius: 50%;
 }

 #main-button~a {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	cursor: pointer;
 	position: absolute;
 	right: 0;
 	bottom: 0;
 	z-index: -1;
 	height: 55px;
 	width: 55px;
 	font-size: 20px;
 	opacity: 0;
 	text-decoration: none;
 	color: #fff;
 	background-color: #fff;
 	box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.196);
 	border-radius: 50%;
 	-webkit-border-radius: 50%;
 	-moz-border-radius: 50%;
 	-ms-border-radius: 50%;
 	-o-border-radius: 50%;
 	transition: .2s all linear;
 	-webkit-transition: .2s all linear;
 	-moz-transition: .2s all linear;
 	-ms-transition: .2s all linear;
 	-o-transition: .2s all linear;
 }

 #main-button~.telegram-color {
 	background: linear-gradient(0deg, #fcfcfc, #ffffffe6);
 }

 #main-button~.whatsapp-color {
 	background: linear-gradient(0deg, #fcfcfc, #ffffffe6);
 }

 #main-button.open~a {
 	opacity: 1;
 	transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
 	-webkit-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
 	-moz-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
 	-ms-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
 	-o-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
 }

 #main-button.open~a:nth-of-type(1) {
 	bottom: 65px;
 }

 #main-button.open~a:nth-of-type(2) {
 	bottom: 130px;
 }

 .wave {
 	animation-name: wave;
 	animation-duration: 1s;
 	animation-timing-function: linear;
 	animation-iteration-count: infinite;
 }

 @keyframes wave {
 	0% {
 		box-shadow: 0 0 0px 0px rgba(255, 255, 255, 0.5);
 	}

 	100% {
 		box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0);
 	}
 }

 .open {
 	animation-iteration-count: 1;
 }

 .hover-text {
 	position: relative;
 }

 .hover-text::before {
 	content: attr(data-text);
 	position: absolute;
 	background-color: var(--white-color);
 	width: max-content;
 	color: var(--color-heading);
 	box-shadow: 0 0 10px 0 rgba(177, 177, 177, 0.5);
 	padding: 0.4rem 1rem;
 	top: 7px;
 	right: 70px;
 	font-size: 13px;
 	font-weight: 500;
 	font-family: var(--font-primary);
 	border-radius: 50px;
 	opacity: 0;
 	transform: translateY(20%);
 	transition: all .3s ease-in-out;
 	-webkit-border-radius: 50px;
 	-moz-border-radius: 50px;
 	-ms-border-radius: 50px;
 	-o-border-radius: 50px;
 }

 .hover-text[data-text]:not([data-text=""])::before {
 	opacity: 0;
 }

 .hover-text[data-text]:not([data-text=""]):hover::before {
 	opacity: 1;
 	transform: translateY(0%);
 }

 @media (min-width: 579px) and (max-width: 767px) {
 	#main-button {
 		height: 50px;
 		width: 50px;
 	}

 	.hover-text::before {
 		right: 60px;
 	}

 	#main-button~a {
 		height: 50px;
 		width: 50px;
 	}

 	#main-button.open~a:nth-of-type(1) {
 		bottom: 60px;
 	}

 	#main-button.open~a:nth-of-type(2) {
 		bottom: 120px;
 	}

 }

 @media (min-width: 300px) and (max-width: 578px) {
 	#main-button {
 		height: 50px;
 		width: 50px;
 	}

 	#main-button~a {
 		height: 50px;
 		width: 50px;
 	}

 	.hover-text::before {
 		right: 60px;
 	}

 	#main-button.open~a:nth-of-type(1) {
 		bottom: 60px;
 	}

 	#main-button.open~a:nth-of-type(2) {
 		bottom: 120px;
 	}
 }
 /*----------------------------------------*/
 /*  Preloader 
/*----------------------------------------*/

 .ctn-preloader {
 	align-items: center;
 	cursor: none;
 	display: flex;
 	height: 100%;
 	justify-content: center;
 	position: fixed;
 	left: 0;
 	top: 0;
 	width: 100%;
 	z-index: 9999;
 }

 .ctn-preloader .animation-preloader {
 	position: absolute;
 	z-index: 100;
 }

 /* Spinner */
 .ctn-preloader .animation-preloader .spinner {
 	animation: spinner 1s infinite linear;
 	border-radius: 50%;
 	border: 3px solid rgba(0, 0, 0, 0.2);
 	border-top-color: var(--black-color);
 	height: 9em;
 	margin: 0 auto 3.5em auto;
 	width: 9em;
 }


 /* Text */
 .ctn-preloader .animation-preloader .txt-loading {
 	font: 5em var(--font-secondary);
 	text-align: center;
 	user-select: none;
	font-weight: 500;
 }
 .ctn-preloader .animation-preloader .text-loading-down{
	text-align: center;
 	user-select: none;
	text-transform: uppercase;
	letter-spacing: 0.5rem;
 }
 .ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
 	animation: letters-loading 4s infinite;
 	background: linear-gradient(90deg,rgba(80, 200, 120, 1) 0%, rgba(64, 224, 208, 1) 100%);
 	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
 	content: attr(data-text-preloader);
 	left: 0;
 	opacity: 0;
 	position: absolute;
 	top: 0;
 	transform: rotateY(-90deg);
 }

 .ctn-preloader .animation-preloader .txt-loading .letters-loading {
 	color: rgba(0, 0, 0, 0.2);
 	position: relative;
 }

 .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
 	animation-delay: 0.2s;
 }

 .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
 	animation-delay: 0.4s;
 }

 .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
 	animation-delay: 0.6s;
 }

 .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
 	animation-delay: 0.8s;
 }

 .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
 	animation-delay: 1s;
 }

 .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
 	animation-delay: 1.2s;
 }
  .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before {
 	animation-delay: 1.4s;
 }
  .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(9):before {
 	animation-delay: 1.6s;
 }
 .ctn-preloader .loader-section {
 	background-color: var(--white-color);
	background-image: url("/images/svg/download.svg");
	background-repeat: repeat;
 	height: 100%;
 	position: fixed;
 	top: 0;
 	width: calc(50% + 1px);
 }

 .ctn-preloader .loader-section.section-left {
 	left: 0;
 }

 .ctn-preloader .loader-section.section-right {
 	right: 0;
 }

 /* Effect */
 .loaded .animation-preloader {
 	opacity: 0;
 	transition: 0.3s ease-out;
 }

 /* Effect */
 .loaded .loader-section.section-left {
 	transform: translateX(-101%);
 	transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
 }

 .loaded .loader-section.section-right {
 	transform: translateX(101%);
 	transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
 }

 /* animation preloader */
 @keyframes spinner {
 	to {
 		transform: rotateZ(360deg);
 	}
 }

 /* Animation preloader */
 @keyframes letters-loading {

 	0%,
 	75%,
 	100% {
 		opacity: 0;
 		transform: rotateY(-90deg);
 	}

 	25%,
 	50% {
 		opacity: 1;
 		transform: rotateY(0deg);
 	}
 }


 @media screen and (max-width: 767px) {

 	/* Preloader */
 	.ctn-preloader .animation-preloader .spinner {
 		height: 8em;
 		width: 8em;
 	}

 	/* Text*/
 	.ctn-preloader .animation-preloader .txt-loading {
 	font-size: 34px;
	font-weight: 800;
		
 	}
	.ctn-preloader .animation-preloader .text-loading-down,h5{
	text-align: center;
 	user-select: none;
	font-size: 14px;
 }
 }

 @media screen and (max-width: 500px) {

 	/* Preloader */
 	.ctn-preloader .animation-preloader .spinner {
 		height: 7em;
 		width: 7em;
 	}

 	/* Text */
 	.ctn-preloader .animation-preloader .txt-loading {
 	font-size: 28px;
	font-weight: 800;
		
 	}
	.ctn-preloader .animation-preloader .text-loading-down,h5{
	text-align: center;
 	user-select: none;
	font-size: 12px;
 }
 }