/* Sasen Business & Agency HTML Template */

/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header / Style Two / Style Three / Style Four / Style Five / Style Six
5. Main Slider
6. Services Section
7. Chart Section
8. Default Section
9. Counter Section
10. Project Section
11. Call To Action Section / Style Two
12. Price Section
13. Testimonial Section / Style Two
14. Map Section
15. Newslatter Section
16. About Section / Style Two
17. Chart Section
18. Plans Section
19. Fullwidth Section
20. Team Section
21. Clients Section
22. Project Section
23. Pricing Tab Section
24. Page Title
25. Blogs Section
26. Error Section
27. Faq's Section
28. Pricing Section / Style Two / Style Three
29. Project Masonry
30. Project FullWidth / Style Two / Style Three / Style Four
31. Team Section / Style Two / Style Three / Style Four
32. Contact Map
33. Contact Info
34. Contact Form

**********************************************/
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap');

@import url('font-awesome.css');

/*** 

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

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

/*** 

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

 ***/


:root{
	--theme-color: rgba(203, 56, 255, 1);
	--primary-color:#F8F1FF;
	--text-color: rgba(106, 106, 106, 1);
	--title-color: rgba(17, 17, 17, 1);
	--white-color:#FFFFFF;
	--text-font: 'Hanken Grotesk';
	--title-font: 'Outfit';
}

body {
	font-size:15px;
	color:#777777;
	line-height:1.8em;
	font-weight:400;
	background:var(--white-color);
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-family: var(--title-font);
}

a{
	text-decoration:none;
	cursor:pointer;
	color: #111111;
}

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

h1,h2,h3,h4,h5,h6 {
	position:relative;
	font-weight:normal;
	margin:0px;
	background:none;
	line-height:1.6em;
	font-family: var(--title-font);
}

input,button,select,textarea{
	font-family: var(--title-font);
}

::-ms-input-placeholder { /* Edge 12-18 */
	color: #6A6A6A;
}
  
::placeholder {
	color: #6A6A6A;
}
.theme_color{
	color:#111111;
}
p{
	position:relative;
	line-height:1.8em;
}
.auto-container{
	position:static;
	max-width:1290px;
	padding:0px 15px;
	margin:0 auto;
}
.medium-container{
	position: relative;
    max-width: 850px;
	padding:0px 15px;
    margin: 0 auto;
}
.login-container{
	position: relative;
    max-width: 510px;
	padding:0px 15px;
    margin: 0 auto;
}

.page-wrapper{
	position:relative;
	margin:0 auto;
	width:100%;
	min-width:300px;
	overflow: hidden;
}

.grey-bg{
	background-color:#f8fcff;
}

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

.link-box.client_btn {
    text-align: left;
    margin-top: 45px;
}

.theme-btn{
	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;
}

.theme-btn.three {
    padding: 14px 30px;
}

.theme-btn.four {
    padding: 9px 30px;
	margin-top: 10px;
}

.centered{
	text-align:center;	
}

.theme-btn.four.btn-bg-color {
    background: linear-gradient(270deg, #CB38FF 0%, #682FFF 100%);
    border: none;
	color: var(--white-color);
}

/*List Style One*/

.list-style-one{
	position:relative;
	margin:0px 0px;
}

.list-style-one li{
	position:relative;
	padding-left:30px;
	margin-bottom:8px;
	color:#000000;
	font-size:15px;
	font-weight:400;
}

.list-style-one li:before{
	position:absolute;
	content:'\f00c';
	left:0px;
	top:0px;
	color: var(--title-color);
	font-size: 14px;
	font-weight: 300;
	font-family: 'FontAwesome';
}

.list-style-one li.cross:before{
	position:absolute;
	content:'\f00d';
	left:0px;
	top:0px;
	color:#e21e1e;
	font-size:16px;
	font-weight:300;
	font-family: 'FontAwesome';
}

/*Btn Style One*/

.btn-style-one{
	position:relative;
	line-height:24px;
	color:#222222;
	font-size:15px;
	font-weight:600;
	background:none;
	display:inline-block;
	padding:12px 40px 12px;
	border:2px solid #e7e7e7;
	border-radius:50px;
	text-transform:uppercase;
}

.btn-style-one:hover{
	opacity:0.70;
	color:var(--white-color);
	border-color:#03c7d9;
	background-color:#03c7d9;
}

/*Btn Style Two*/

.btn-style-two{
	position:relative;
	line-height:24px;
	color:var(--white-color);
	font-size:15px;
	font-weight:500;
	background:#03c7d9;
	display:inline-block;
	padding:13px 40px 13px;
	border-radius:50px;
	text-transform:uppercase;
}

.btn-style-two:hover{
	background:#ff4052;
	color:var(--white-color);
}

/*Btn Style Three*/

.btn-style-three{
	position:relative;
	line-height:24px;
	color:var(--white-color);
	font-size:14px;
	font-weight:500;
	background:none;
	border-radius:50px;
	letter-spacing:1px;
	display:inline-block;
	padding:11px 38px 11px;
	text-transform:uppercase;
	border:2px solid var(--white-color);
}

.btn-style-three:hover{
	background:#03c7d9;
	color:var(--white-color);
	border-color:#03c7d9;
}

/*Btn Style Four*/

.btn-style-four{
	position:relative;
	line-height:24px;
	color:#03c7d9;
	font-size:13px;
	font-weight:500;
	background:none;
	display:inline-block;
	padding:11px 34px 11px;
	border:2px solid #03c7d9;
	border-radius:50px;
	text-transform:uppercase;
	font-family: 'Montserrat', sans-serif;
}

.btn-style-four:hover{
	color:var(--white-color);
	background-color:#03c7d9;
}


/* Preloader */

.handle-preloader {
	align-items: center;
	-webkit-align-items: center;
	display: flex;
	display: -ms-flexbox;
	height: 100%;
	justify-content: center;
	-webkit-justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 9999999;
	background: #CB38FF;
  }
  
  .preloader-close{
	position: fixed;
	z-index: 99999999;
	font-size: 14px;
	background: #fff;
	color: #CB38FF;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	cursor: pointer;
	right: 30px;
	top: 30px;
	font-weight: 400;
  }
  
  .handle-preloader .animation-preloader {
	position: absolute;
	z-index: 100;
  }
  
  .handle-preloader .animation-preloader .spinner{
	animation: spinner 1s infinite linear;
	border-radius: 50%;
	height: 150px;
	margin: 0 auto 45px auto;
	width: 150px;
  }
  
  .handle-preloader .animation-preloader .txt-loading {
	text-align: center;
	user-select: none;
  }
  
  .handle-preloader .animation-preloader .txt-loading .letters-loading:before{
	animation: letters-loading 4s infinite;
	content: attr(data-text-preloader);
	left: 0;
	opacity: 0;
	top:0;
	position: absolute;
  }
  
  .handle-preloader .animation-preloader .txt-loading .letters-loading{
	font-family: var(--title-font);
	font-weight: 500;
	letter-spacing: 15px;
	display: inline-block;
	position: relative;
	font-size: 70px;
	line-height: 70px;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: rgba(255, 255, 255, 0.30);
  }
  
  .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {animation-delay: 0.2s;}
  .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {animation-delay: 0.4s;}
  .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {animation-delay: 0.6s;}
  .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {animation-delay: 0.8s;}
  .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { animation-delay: 1s;}
  .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { animation-delay: 1.2s;}
  .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { animation-delay: 1.4s;}
  .handle-preloader .loader-section {
	background-color: var(--white-color);
	height: 100%;
	position: fixed;
	top: 0;
	width: calc(50% + 1px);
  }
  
  .preloader .loaded .animation-preloader {
	opacity: 0;
	transition: 0.3s ease-out;
  }
  
  .handle-preloader .animation-preloader .txt-loading .letters-loading:before{
	color: var(--white-color);
  }
  
  .handle-preloader .animation-preloader .spinner{
	border: 3px solid var(--white-color);
	border-top-color: rgba(255, 255, 255, 0.5); 
  }
  
  /* Animación del preloader */
  @keyframes spinner {
	to {
	  transform: rotateZ(360deg);
	}
  }
  @keyframes letters-loading {
	0%,
	75%,
	100% {
	  opacity: 0;
	  transform: rotateY(-90deg);
	}
  
	25%,
	50% {
	  opacity: 1;
	  transform: rotateY(0deg);
	}
  }
  
  @media screen and (max-width: 767px) {
	.handle-preloader .animation-preloader .spinner {
	  height: 8em;
	  width: 8em;
	}
  }
  @media screen and (max-width: 500px) {
	.handle-preloader .animation-preloader .spinner {
	  height: 7em;
	  width: 7em;
	}
	.handle-preloader .animation-preloader .txt-loading .letters-loading {font-size: 40px; letter-spacing: 10px;}
  }


.preloader{ position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:999999; background-color:var(--white-color); background-position:center center; background-repeat:no-repeat; background-image:url(../images/icons/preloader.svg);}

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


.float-bob-y {
    animation-name: float-bob-y;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: float-bob-y;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: float-bob-y;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob-y;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob-y;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
  }
  
  .float-bob-x{
    animation-name: float-bob-x;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: float-bob-x;
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: float-bob-x;
    -moz-animation-duration: 15s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob-x;
    -ms-animation-duration: 15s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob-x;
    -o-animation-duration: 15s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
  }

  @-webkit-keyframes ripple {
    70% {
      -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
              box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
    }
    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
              box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }
  @keyframes ripple {
    70% {
      -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
              box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
    }
    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
              box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }



:root {
	--progress-bar-width: 100px;
	--progress-bar-height: 100px;
	--font-size: 30px;
}
.circular-progress {
	width: 85px;
	height: 85px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.inner-circle {
	position: absolute;
	width: calc(var(--progress-bar-width) - 30px);
	height: calc(var(--progress-bar-height) - 30px);
	border-radius: 50%;
	background-color: lightgrey;
}
  
.percentage {
    position: absolute;
    right: 155px;
    top: 34px;
    font-size: var(--font-size);
    color: rgba(30, 27, 57, 1) !important;
    line-height: 40px;
    font-weight: 700;
	font-family: "Outfit";
}
.progress-two .percentage {
    position: relative;
    right: 0px;
    top: 0px;
    font-size: 20px;
    color: rgba(30, 27, 57, 1) !important;
    line-height: 40px;
    font-weight: 600;
    font-family: "Outfit";
}


/*** 

====================================================================
	Social Icon One
====================================================================

***/

.social-icon-one{
	position:relative;
}

.social-icon-one .share{
	color:#222222;
	font-size:16px;
	font-weight:700;
}

.social-icon-one li{
	position:relative;
	margin-left:12px;
	display:inline-block;
}

.social-icon-one li a{
	position:relative;
	font-size:18px;
	color:#333333;
	display:inline-block;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.social-icon-one li a:hover{
	color:#03c7d9;
}



/*** 

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

***/

.scroll-to-top{
	position:fixed;
	bottom:15px;
	right:15px;
	width:50px;
	height:50px;
	color:var(--white-color);
	font-size:13px;
	text-transform:uppercase;
	line-height:50px;
	text-align:center;
	z-index:100;
	cursor:pointer;
	background: linear-gradient(270deg, #CB38FF 0%, #682FFF 100%);
	display:none;
	border-radius:3px;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	transition:all 500ms ease;		
}

.scroll-to-top::before{
	position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    content: '';
    z-index: -1;
	background: var(--title-color);
    /* background: linear-gradient(270deg, #CB38FF 0%, #682FFF 100%); */
	color: var(--white-color);
    transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
}
.scroll-to-top:hover:before{
	width: 100%;
}
.scroll-to-top:hover i{
	color: var(--white-color);
}

/* .scroll-to-top:hover{
	color:var(--white-color);
	background: var(--title-color);
} */

.centred{
	text-align: center;
}

.subtitle {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: var(--title-color);
    font-family: var(--text-font);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.heading_title {
    font-size: 48px;
    line-height: 56px;
    font-weight: 600;
    font-family: var(--title-font);
    color: var(--title-color);
    margin-bottom: 35px;
}

/* ----------Contact Info------------- */
.social-contact-section {
    position: relative;
    padding-top: 160px;
    z-index: 1;
}
.contact-section {
    position: relative;
    margin: 120px 0px 150px 0px;
    z-index: 1;
}
.link-box .btn-large.contact-us {
    display: block;
}
.contact-info{
	position:relative;
	z-index: 1;
}
.contact-info .info-block{
	position:relative;
	display:block;
	margin-bottom:30px;
	border-radius: 10px;
}
.contact-info .info-block .inner-box{
	position:relative;
	display:block;
	padding: 54px 0px 54px 122px;
	line-height:24px;
	font-size:14px;
	color:#707070;
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0px 30px 100px rgba(0, 0, 0, 0.05);
	border-radius: 10px;
}
.contact-info .info-block .inner-box h4{
	font-weight: 500;
	text-transform:capitalize;
	margin-bottom:10px;
	font-size: 20px;
	line-height: 22px;
	color: rgba(0, 0, 0, 1);
}
.contact-info .info-block .inner-box .icon-box{
	position:absolute;
	left: 40px;
	top: 55px;
	text-align:center;
	width:60px;
	height:60px;
	line-height:64px;
	background:rgba(248, 241, 255, 1);
	font-size: 25px;
	border-radius:50%;
}
.contact-info .info-block .inner-box .icon-box span {
    background: linear-gradient(180deg, #BE37FF 0%, #6A2FFF 61.11%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 500ms ease;
}

.contact-info .info-block .inner-box .text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
	margin-bottom: 0px;
	color: rgba(0, 0, 0, 1);
}
.contact-shape-image {
    position: relative;
}
.contact-shape-image img {
    position: absolute;
    display: inline-block;
    top: -154px;
    left: 28%;
    z-index: -2;
}


/* -----------Login Page Css-------------------- */
.login-section {
    position: relative;
    margin: 150px 0px;
}
.login-section .form-container .form {
    margin-bottom: 0px;
}
.form-container {
    display: flex;
    flex-direction: column;
}
.login-section .close-icon {
    position: absolute;
    top: 32px;
    right: 50px;
    font-size: 14px;
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
}
.form-container .form {
    background-color: #fff;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}
.form-container .form h2 {
	margin-bottom: 20px;
    text-align: center;
    font-size: 28px;
    line-height: 32px;
    font-weight: 600;
    color: var(--title-color);
}
.form-container .form .input-group {
    margin-bottom: 15px;
	display: block;
}
.form-container .form .input-group label {
	display: block;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
	font-family: var(--text-font);
    color: var(--title-color);
}
.form-container .form .input-group input {
    width: 100%;
    padding: 10px 27px;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 145px;
	margin-bottom: 10px;
}
.form-container .form button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 3px;
    background: linear-gradient(90deg, #CB38FF 0%, #682FFF 100%);
    color: #fff;
	border-radius: 145px;
    cursor: pointer;
}
.form-container .form button:hover {
    background-color: #0056b3;
}
.form-container .form span.psw {
    position: relative;
    display: block;
    text-align: right;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
	margin-bottom: 30px;
	background: linear-gradient(270deg, #CB38FF 0%, #682FFF 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}
.form-container .form .small-xl .text-muted {
    font-family: var(--text-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    color: var(--title-color);
}
.form-container .form .small-xl a {
    font-family: var(--text-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    background: linear-gradient(270deg, #CB38FF 0%, #682FFF 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.form-container .form .small-xl {
    margin-top: 30px;
}
.form-container .form p{
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	font-family: var(--text-font);
	color: rgba(110, 110, 110, 1);
	margin-bottom: 20px;
}
.form-container .form .login-part:before{
	position: absolute;
	content: "";
	top: 10px;
	left: 0px;
	height: 1px;
	width: 170px;
	background-color: rgba(229, 229, 229, 1);
}
.form-container .form .login-part:after{
	position: absolute;
	content: "";
	top: 10px;
	right: 0px;
	height: 1px;
	width: 170px;
	background-color: rgba(229, 229, 229, 1);
}
.google-link ul {
    display: flex;
    justify-content: center;
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
	color: var(--title-color);
	width: 100%;
    padding: 10px 27px;
    border: 1px solid rgba(229, 229, 229, 1);
	border-radius: 145px;
	margin-bottom: 30px;
}
.google-link ul li{
	margin-right: 10px;
}
.facebook-link ul {
    display: flex;
    justify-content: center;
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
	color: var(--title-color);
	width: 100%;
    padding: 10px 27px;
    border: 1px solid rgba(229, 229, 229, 1);
	border-radius: 145px;
}
.facebook-link ul li{
	margin-right: 10px;
}
.signup-section {
    position: relative;
    margin: 150px 0px;
}
.signup-section .form-container .form{
	margin-bottom: 0;
}
.signup-section .close-icon {
    position: absolute;
    top: 32px;
    right: 50px;
    font-size: 14px;
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
}

.owl-carousel {
	-ms-touch-action: none;
	touch-action: none;
}