/*



************** author details **************



Template Name: Sassco

Description: sassco - Just another sassco app landing page

Version: 1.0

about-area



************** common section **************
about-area


1.  common-area

2.  banner-area

3.  cms-area

4.  about-area

5.  production-area

6.  gallery-area

7.  video-area

8.  testimonial-area

9.  about-area-02

10. team-area

11. blog-area

12. brand-area

13. common-footer



*/

#button {

	display: inline-block;

	background-color: #f5f5f5;

	color: #000;

	width: 45px;

	height: 45px;

	text-align: center;

	border-radius: 50px;

	position: fixed;

	bottom: 30px;

	right: 30px;

	transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;

	opacity: 0;

	visibility: hidden;

	z-index: 1000;

   }

	#button::after {

	content: "\f077";

	font-family: "Font Awesome 5 Free";

	font-weight: normal;

	font-style: normal;

	font-size: 20px;

	line-height: 50px;

	position: absolute;

	right: 0;

	left: 0;

	top: -2px;

   }

	#button:hover {

	cursor: pointer;

	background-color: #5f2ded;

	color: #fff;

   }

	#button:active {

	background-color: #5f2ded;

   }

	#button.show {

	opacity: 1;

	visibility: visible;

   }

   

/** preloader **/

.js-preloader {

	position: fixed;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background-color: #fff;

	display: -webkit-box;

	display: flex;

	-webkit-box-align: center;

	align-items: center;

	-webkit-box-pack: center;

	justify-content: center;

	opacity: 1;

	visibility: visible;

	z-index: 9999;

	-webkit-transition: opacity 0.25s ease;

	transition: opacity 0.25s ease;

}



.js-preloader.loaded {

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

}



.js-preloader.loaded {

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

}



@keyframes dot {

	50% {

		-webkit-transform: translateX(96px);

		transform: translateX(-96px);

	}

}



@keyframes dots {

	50% {

		-webkit-transform: translateX(-31px);

		transform: translateX(-31px);

	}

}



.preloader-inner {

	position: relative;

	width: 142px;

	height: 40px;

	background: #fff;

}



.preloader-inner .dot {

	position: absolute;

	width: 16px;

	height: 16px;

	top: 12px;

	left: 15px;

	background: #5f2ded;

	border-radius: 50%;

	-webkit-transform: translateX(0);

	transform: translateX(0);

	-webkit-animation: dot 2.8s infinite;

	animation: dot 2.8s infinite;

}



.preloader-inner .dots {

	-webkit-transform: translateX(0);

	transform: translateX(0);

	margin-top: 12px;

	margin-left: 31px;

	-webkit-animation: dots 2.8s infinite;

	animation: dots 2.8s infinite;

}



.preloader-inner .dots span {

	display: block;

	float: left;

	width: 16px;

	height: 16px;

	margin-left: 16px;

	background: #5f2ded;

	border-radius: 50%;

}



/** 01. header area **/



.sticky {

	position: fixed;

	top: 0;

	width: 100%;

	z-index: 99;

}



.common-area {

	border-bottom: 1px solid #e5e5e5;

}



.common-area .main-wrapper img {

	width: auto;

	display: block;

}



.common-area .main-wrapper a {

	color: #000;

	text-decoration: none;

}



.common-area .main-wrapper ul li {

	color: #5f2ded;



}





.navbar-collapse.active {

	display: block;

}



.fa-classic,

.fa-regular,

.fa-solid,

.far,

.fas {

	font-family: "Font Awesome 5 Free";

}



.logo-and-icon {

	display: flex;

	justify-content: space-between;

	padding: 15px 0;

	align-items: center;

	border-bottom: 1px solid #222;

	width: 100%;

}



.navbar {

	padding: 0 15px;

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	max-height: 100%;

	display: flex;

	flex-direction: column;

	z-index: 10;

	background: #fff;

}



.navbar-toggler {

	display: block;

	border: none;

	backgronew-areaparent;

	new-areainter;

	padding: 6px 10px;

	transition: 0.4s;
about-area
	border-radius: 0;

	color: #000;
about-area
	font-size: 18px;

}
about-area


.navbar-toggler:hover .navbar-collapse.active {
about-area
	display: block;

}
about-area


.navbar-toggler:hover {

	background-color: #fff;

	color: #000;

}



.navbar-toggler:focus {

	text-decoration: none;

	outline: 0;

	box-shadow:none;

}



.navbar-collapse {

	overflow-y: scroll;

	display: none;

	padding: 20px;

	width: 100%;

	flex-basis: auto;

}



.navbar-collapse.open {

	display: block;

	width: 100%;

}



.navbar-nav>li>a {

	text-transform: uppercase;

	font-size: 1.1rem;

	font-weight: 700;

	display: block;

	border-bottom: 1px solid #222;

	border-radius: 1px;

	position: relative;

	transition: all 0.4s ease;

}



.btn-area .login-btn {

	color: #fff;

	border: none;

	border-radius: 5px;

	padding: 10px 25px;

	background-color: #5f2ded;

}



/** 01. end header area **/





/** 02. area-container **/



.main-area-container {

	/* overflow: hidden; */

	margin-bottom: 50px;

}



.main-area-container .slider-content {

	position: absolute;

	left: 19%;



}



.main-area-container .slider-content h1 {

	color: #000;

	font-weight: 700;

	padding: 50px 0;

}



.btn {

	background-color: #2daaed;

	border-radius: 50px;

	padding: 20px 46px;

	color: #fff;

	font-size: 1rem;

}



.btn:hover {

	background-color: #5f2ded;

	color: #fff;

}



.section-title {

	text-align: center;

	margin: 100px 0 80px 0;



}



.slider-content{

	font-size: 53px;

	font-weight: 700;

	padding: 35px 0;

}



.area-container-img{

	width: 130%;

	height: auto;

	background-image: url(https://xyzios.com/picture/slider_1.jpg);

	background-repeat:no-repeat;

	background-size: 175%;

	background-position: 95% 50%;

}



.area-container img{

	width: 100%;

	height: auto;

}



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

	.area-container-img{

		height: 280px;

	}

	

	.area-container{

		margin-top: 50px;

	}

	.slider-content{

	font-size: 48px;

	font-weight: 700;

	margin-bottom: 10px;


	}

	.area-container img{

		padding-top: 10px;

	}

}



/** 02. end area-container **/





/** 03. features-area **/

.features-area {

	margin: 0 0 150px 0;

}



.features-area .features-text h3 {

	color: #000;

	font-weight: 700;

}



.features-cms {

	text-align: center;

	padding: 50px 45px;

	background-color: #f5f5f5;

	transition: 0.4s;

}



.features-thumbnil img {

	transition: 0.4s;

}



.features-cms .features-thumbnil img:hover {

	transform: translate3d(0, -8px, 0);

}



.features-area .features-cms {

	margin-bottom: 20px;

}



.features-area .features-cms .features-text h3 {

	margin-bottom: 10px;

}



/** 03.end features-area **/





/** 04. service-area **/

.service-area {

	margin-bottom: 70px;

	position: relative;

	text-align: center;

}



.service-area .service-description {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	padding: 100px 0;

}





.service-description .form-area form input {

	border: none;

	border-radius: 50px;

	padding-left: 20px;

	width: 520px;

	height: 67px;

}





.service-area .service-description h2 {

	margin: 30px 0 60px 0;

}



/** 04. end service-area **/



/** 05. conunter-area **/

.conunter-area {

	border-bottom: 1px solid #e5e5e5;

	padding-bottom: 150px;

}



.conunter-area .counter-text {

	text-align: center;



}



/** 05. end conunter-area **/





/** 06. about-area **/



.about-area {

	/* margin: 150px 0; */

	margin-bottom: 70px;

}



.about-area img {

	transition: 0.4s;
margin-top: 87px;
}



.about-area img:hover {

	transform: translate3d(0, -10px, 0);

}



.about-area .ab-desc {

	margin: 50px 0 0 30px;

}



.about-area .ab-desc p {

	margin: 30px 0;

}



/** 06.end about-area **/





/** 07. pricing-area **/

.pricing-area {

	margin-bottom: 70px;

}



.pricing-table {

	transition: 0.4s;

}



.pricing-table:hover {

	transform: translate3d(0, -20px, 0);

}



.pricing-area .pricing-table {

	background-color: #fcfbff;

	text-align: center;

	border-radius: 30px 0 30px 0;



	position: relative;

	padding: 60px 0;

}



.pricing-area .pricing-table h4 {

	margin: 30px 0;

}



.pricing-area .pricing-table h2 span {

	font-size: 16px;

	color: #666;

	font-weight: 400;

	margin: 0 -10px;

}



.pricing-area .pricing-table ul {

	margin: 50px 0;

	padding: 0 60px;

}



.pricing-area .pricing-table ul li {

	list-style: none;

	line-height: 50px;

	text-align: left;

}



.pricing-area .pricing-table ul li a {

	color: #000;

}



.pricing-area .pricing-table ul li ::after {

	content: '';

	position: absolute;

	left: 0;

	width: 48px;

	height: 48px;

	background-image: url(https://xyzios.com/image/check.png);

	background-repeat: no-repeat;

	visibility: visible;

	margin-left: 30px;

	margin-top: -33px;

}



/** 07. end pricing-area **/





/** 08. app-area **/

.app-area {

	padding-bottom: 150px;

	overflow: hidden;

	border-bottom: 1px solid #e5e5e5;

}



.app-area .app-thumb {

	display: flex;

}



.app-area .app-thumb .play-store {

	margin-right: 20px;

}



.app-area .app-description {

	margin: 60px 0;

}



.app-area .app-description p {

	margin: 30px 0;

}



/** 08. end app-area **/





/** 09. blog-area **/

.blog-area {

	margin-bottom: 70px;

}



.blog-content {

	margin: 30px 0 150px 0;

}



.blog-section {

	border-bottom: 1px solid #e5e5e5;

}



.blog-area .blog-content h4 {

	margin: 15px 0;

}



.blog-area .blog-content h5 {

	margin: 0;

}



/** 09. end blog-area **/





/** 10. testimonial-area **/

.testimonial-area {

	margin-bottom: 70px;

}

 

 



.testimonial-area .testimonial-content img {

	width: 50px;

}





.testimonial-area .testimonial-content p {

	padding: 20px 0;

}



/** 10.end testimonial-area **/





/** 11. contact-area **/

.contact-area {

	margin-bottom: 70px;

	position: relative;

	text-align: center;

}



.contact-area .contact-description {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	padding: 65px 0;

}



.contact-area .contact-description h2 {

	margin-bottom: 20px;

	color: #fff;

}



/** 11. end contact-area **/





/** 12. common-footer **/



.common-footer .footer-widgets {

	display: flex;

	margin-bottom: 50px;

}





.common-footer .footer-widgets .single-widgets .widgets-content .widgets-title {

	margin-bottom: 20px;

}



.common-footer .footer-widgets .single-widgets .widgets-content .widgets-link ul {

	margin: 0;

	padding: 0;

}



.common-footer .footer-widgets .single-widgets .widgets-content .widgets-link ul li {

	list-style: none;

}



.common-footer .footer-widgets .single-widgets .widgets-content .widgets-link ul li a {

	color: #000;

	line-height: 30px;

}







.common-footer .footer-bottom .footer-copyright ul li {

	list-style: none;

}



.common-footer .footer-bottom .footer-copyright ul li a {

	color: #000;

}



.common-footer .footer-bottom {

	text-align: center;

}



.common-footer .footer-bottom img {

	width: 15%;

	margin-bottom: 20px;

}



/** 12. end common-footer **/



/** 13. consultation-area **/

.contact-me-area {

	position: fixed;

	z-index: 999999;

	float: right;

	bottom: 45%;

	right: 0.8%;

	text-align: center;

  }

  

  .contact-me-content {

	width: 90px;

	height: auto;

	text-align: center;

	border-radius: 10px;

	margin-bottom: 10px;

	background: #fff;

	padding: 10px 0px 5px 0px;

	box-shadow: 0 0 20px 1px rgb(0 0 0 / 20%);

	display: flex;

	flex-direction: column;

	justify-content: space-between;

	align-items: center;

  }

  

  .contact-me-content img {

	width: 55px;

	height: 55px;

	vertical-align: top;

  }

  

  .contact-me-content p {

	text-align: center;

	line-height: 30px;

	font-size: 14px;

	color: #666;

	margin-top: 0;

	/* margin-bottom: 1rem; */

  }

  

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

	.contact-me-area {

	  position: fixed;

	  z-index: 999999;

	  float: right;

	  bottom: 120px;

	  right: 2%;

	  text-align: center;

	}

  

	.contact-me-content {

	  width: 80px;

	}

  

	.contact-me-content img {

	  width: 45px;

	  height: 45px;

	  vertical-align: top;

	}

  }

  

  .contact-area a {

	display: inline;

  }

  /** 13. end consultation-area **/