/*----------------------------------------------------------------------------------- 
Template Name: Sasly - Multipurpose Landing Page HTML Template
URI: site.com 
Description: Sasly is a flexible and professional Multipurpose HTML template, ideal for a variety of landing page needs including SaaS, software, fintech, Ai, E-learning, creative agencies, consulting services, software subscriptions, web applications, and digital marketing websites. Designed with all the essential elements to create an impactful landing page or corporate site, Sasly covers every detail to suit your business needs. We have included best practices of web development and you can create a great website layout based on Bootstrap or Grid 1320px.
Author: Pixelfit
Author URI: https://themeforest.net/user/pixelfit
Version: 1.0 


------------------------------------------------------
   CSS INDEX
-----------------------------------------------------

    01. Common CSS 
    02. Header CSS 
    03. Hero CSS 
	04. Home Preview CSS
	05. Features CSS
	06. InnerPage Preview CSS
	07. Preview Responsive CSS
	08. Footer CSS
	09. Responsive Media CSS
-------------------------------------------------------    */


/*==========================
	01. Start Common CSS
===========================*/

:root {
	--primary-color: #F14F44;
	--heading-color: #111111;
	--white-color: #ffffff;
	--text-color: #696969;
	--border-color: rgba(16, 16, 16, 0.10);
	--main-gray: #F0F2F4;
	--heading-font: "Plus Jakarta Sans", sans-serif;
	--body-font: "Manrope", sans-serif;
}

html {
	font-size: 100%;
}

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

a {
	color: inherit;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
}

a:hover,
a:focus {
	color: inherit;
	text-decoration: none;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
	text-decoration: none;
	outline: none;
}

i,
span,
a {
	display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	margin: 0px;
	color: var(--heading-color);
	font-family: var(--heading-font);
}

h1 {
	font-size: 85px;
	line-height: 100px;
}

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

h3 {
	font-size: 27px;
	line-height: 40px;
}

h4 {
	font-size: 22px;
	line-height: 34px;
}

h5 {
	font-size: 20px;
	line-height: 1;
}

h6 {
	font-size: 18px;
	line-height: 1;
}

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

p {
	margin: 0px;
}

input,
textarea {
	display: inherit;
}

button {
	border: none;
}

label {
	margin-bottom: 0;
}

iframe {
	width: 100%;
	border: none;
	display: inherit;
}

img {
	max-width: 100%;
}

body {
	font-weight: normal;
	font-style: normal;
	font-weight: 400;
	color: var(--text-color);
	font-family: var(--body-font);
	font-size: 16px;
	line-height: 30px;
	overflow-x: hidden;
}

/*===== Scrollbar =====*/
::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-track {
	background: #abafb9;
}

::-webkit-scrollbar-thumb {
	background-color: #13172b;
}


/* Preloader CSS */

.preloader {
	bottom: 0;
	height: 100vh;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100vw;
	z-index: 99999;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background-color: var(--white-color);
}

.preloader .loader img {
	-webkit-animation: zoomInOut 3s ease-in-out infinite;
	animation: zoomInOut 3s ease-in-out infinite;
}

@-webkit-keyframes zoomInOut {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	50% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes zoomInOut {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	50% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

.bg_cover {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 100% 100%;
}


#smooth-wrapper {
	z-index: 1;
}

.theme-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 30px;
	border-radius: 30px;
	font-weight: 600;
	font-family: var(--heading-font);
}

.theme-btn i {
	margin-left: 7px;
}
.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
	max-width: 1320px;
}
/*==========================
	End Common CSS
===========================*/



/*====================== 
	02. Start Header CSS
=======================*/

.header-area{
  position: relative;
  z-index: 9999;
}
.header-area .header-navigation{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 80px;
}
.header-area .header-navigation .brand-logo{
  display: flex;
}
.header-area .header-navigation .buy-button .theme-btn {
    padding: 12px 35px;
    background-color: #ffffff;
    color: #070834;
}

/*====================== 
	End Header CSS
=======================*/

/*====================== 
	03. Start Hero CSS
=======================*/

.hero-wrapper {
	position: relative;
  padding: 190px 15px 0;
}
.hero-wrapper .hero-content {
    text-align: center;
    max-width: 1070px;
    margin: 0px auto;
    margin-bottom: 80px;
}
.hero-wrapper .hero-content h1 {
    margin-bottom: 40px;
    font-size: 45px;
    line-height: 1.3;
    color: #fff;
}
.hero-wrapper .hero-content h5 {
    font-weight: 500;
    text-transform: capitalize;
    font-size: 16px;
    line-height: 28px;
    color: #b9b9b9;
}
.hero-wrapper .hero-image{
  text-align: center;
}
.hero-wrapper .hero-image .image-center{
  z-index: 1;
  position: relative;
}
.hero-wrapper .hero-image .image-center img {
    max-width: 800px;
    width: 100%;
    display: block;
    margin: 0px auto;
}
.hero-wrapper .hero-image .image-right{
  position: absolute;
  bottom: -8px;
  right: 120px;
}
.hero-wrapper .hero-image .image-left{
  position: absolute;
  bottom: -7px;
  left: 120px;
}


/*====================== 
	End Hero CSS
=======================*/

/*=============================
	04. Start Home Preview CSS
==============================*/

.home-preview {
	padding: 150px 30px 80px;
}

.home-preview .text-box {
	text-align: center;
	max-width: 775px;
	margin: 0 auto 50px;
}

.home-preview .text-box h2 {
	margin-bottom: 20px;
}

.home-preview .text-box P {
	margin-bottom: 30px;
}

.home-preview .text-box ul li {
	display: inline-block;
	display: inline-flex;
	align-items: center;
}

.home-preview .text-box ul li:not(:last-child) {
	margin-right: 15px;
}

.home-preview .text-box ul li i {
	color: var(--primary-color);
	font-size: 25px;
	line-height: 0;
	flex: 0 0 25px;
	max-width: 25px;
	margin-right: 10px;
}

.item-home-wrapper {
	--bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
	gap: 30px 0;
}
.item-home-wrapper>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}
.item-home-wrapper .item-col {
	flex: 0 0 auto;
    width: 50%;
}
@media (max-width: 1199px){
	.item-home-wrapper .item-col {
		flex: 0 0 auto;
		width: 50%;
	}
}
@media (max-width: 767px){
	.item-home-wrapper .item-col {
		flex: 0 0 auto;
		width: 100%;
	}
}
.item-home-wrapper .preview-item {
	padding: 20px;
}
.item-home-wrapper  .preview-item .content .theme-btn{
	padding: 7px 20px;
}
@media (max-width: 575px){
	.item-home-wrapper .preview-item .content h4{
		font-size: 16px;
	}
}

.item-home-wrapper .preview-item.upcoming-item .thumbnail {
	position: relative;
	overflow: hidden;
}
.item-home-wrapper .preview-item.upcoming-item .thumbnail .hover{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, 0.10);
	backdrop-filter: blur(10px);
}
.item-home-wrapper .preview-item.upcoming-item .content {
	justify-content: center;
	padding-top: 45px;
}

.home-preview .item-button .theme-btn {
	background-color: #111111;
	color: var(--white-color);
}

/* Preview Item CSS */

.preview-item {
	padding: 30px;
	border-radius: 20px;
	background-color: var(--white-color);
	box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.10);
	overflow: hidden;
}
.preview-item .thumbnail {
	position: relative;
}
.preview-item .thumbnail .new{
	position: absolute;
	top:20px;
	right: 0;
	background-color: #F14F44;
	color: #fff;
	padding: 5px 20px;
	border-radius: 7px;
	font-weight: 600;
}
.preview-item .thumbnail img {
	width: 100%;
	border-radius: 20px;
}
.preview-item .content {
	padding-top: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.preview-item .content h4{
  font-size: 20px;
}
.preview-item .content .theme-btn {
    background-color: #101758;
    color: var(--white-color);
    padding: 10px 25px;
    font-size: 14px;
}
.preview-item .content .theme-btn:hover {
    background-color: #060b22;
}
.preview-innerpages .preview-item .content{
	justify-content: center;
}

/*==============================
	End Home Preview CSS
================================*/

/*==============================
	05. Start Features CSS
================================*/

.features-section {
	padding: 120px 0 100px;
	background-color: #FFFBFB;
}

.features-section .text-box {
	margin: 0 auto;
	text-align: center;
	margin-bottom: 55px;
}

.features-section .text-box h2 {
	margin-bottom: 30px;
}

.features-section .text-box p {
	max-width: 675px;
	margin: 0 auto;
}

.features-section .feature-item-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.features-section .feature-item-wrapper .item-col {
	flex: 0 0 20%;
	max-width: 20%;
}

.features-section .feature-item {
	margin: 0 15px 30px;
	padding: 40px 30px 30px;
	border-radius: 7px;
	background-color: #FFF;
	text-align: center;
	box-shadow: 0px 0px 20px 0px rgba(241, 79, 68, 0.05);
}

.features-section .feature-item:hover .icon img {
	transform: rotateY(360deg);
}

.features-section .feature-item .icon img {
	transform: rotateY(0deg);
	transition: all 1s;
}

.features-section .feature-item .content h4 {
	font-size: 16px;
	font-weight: 600;
	margin-top: 15px;
}

/*===========================
	End Features CSS
============================*/

/*==============================
	06. Start InnerPages CSS
================================*/


.preview-innerpages {
	padding: 130px 60px;
}

.item-heading {
	border-bottom: 1px solid #e1e1e1;
	display: flex;
  align-items: center;
	margin-bottom: 40px;
}

.home-preview .item-button,
.home-preview .item-title,
.preview-innerpages .item-title {
	margin-bottom: 20px;
}
.home-preview .item-title,
.home-preview .item-button,
.preview-innerpages .item-button,
.preview-innerpages .item-title {
	width: 50%;
}
.home-preview .item-button,
.preview-innerpages .item-button {
	text-align: right;
}
.preview-innerpages .item-button .innerpages-arrows {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 30px;
}
.preview-innerpages .item-button .innerpages-arrows .slick-arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #F0F2F4;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--heading-color);
	font-size: 18px;
	cursor: pointer;
	transition: all .3s;
}
.preview-innerpages .item-button .innerpages-arrows .slick-arrow:hover {
	background-color: var(--primary-color);
	color: var(--white-color);
}
.preview-innerpages .item-button .innerpages-arrows .slick-arrow i {
	line-height: 0;
}
.preview-innerpages .item-button .innerpages-arrows .slick-arrow.next {
	margin-left: 20px;
}
.inner-page-slider {
	margin-left: -15px;
	margin-right: -15px;
}
.inner-page-slider .slick-list {
	padding: 20px 10px;
}
.inner-page-slider .slick-slide {
	margin-left: 15px;
	margin-right: 15px;
}

/*==============================
	End InnerPages CSS
================================*/

/*===================================
	07. Start Preview Responsive CSS
====================================*/

.preview-responsive {
	background-color: #FFFBFB;
	padding: 120px 15px 90px;
}
.preview-responsive .text-box {
	text-align: center;
	margin-bottom: 60px;
}
.preview-responsive .responsive-wrapper {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
}
.preview-responsive .responsive-wrapper .item-col {
	flex: 0 0 25%;
	max-width: 25%;
}
.preview-responsive .responsive-wrapper .item {
	padding: 50px 40px;
	text-align: center;
	border-radius: 7px;
	background-color: #FFF;
	box-shadow: 0px 0px 20px 0px rgba(241, 79, 68, 0.05);
	margin: 0 15px 40px;
}
.preview-responsive .responsive-wrapper .item .icon {
	margin-bottom: 15px;
}
/*===================================
	End Preview Responsive CSS
====================================*/

/*==========================
	08. Start Footer CSS
===========================*/
.preview-footer {
    background-color: #051330;
    padding: 120px 15px;
}
.preview-footer .text-box {
	text-align: center;
	padding: 0 30px;
}
.preview-footer .text-box .sub-title {
	padding: 6px 20px;
	border-radius: 14px;
	border: 2px solid rgba(233, 233, 233, 0.10);
	background-color: rgba(255, 255, 255, 0.10);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--white-color);
	line-height: 15px;
	font-weight: 500;
	font-family: var(--heading-font);
 	margin-bottom: 30px;
}
.preview-footer .text-box .sub-title i {
	color: var(--primary-color);
	font-size: 24px;
	margin-right: 10px;
	margin-top: 2px;
}
.preview-footer .text-box h2 {
	color: #FFF;
	font-family: "Plus Jakarta Sans";
	font-size: 80px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -2.4px;
	margin-bottom: 30px;
}
.preview-footer .text-box .theme-btn {
    background-color: #ffffff;
    color: #27146c;
    padding: 14px 40px;
    border-radius: 30px;
}
/*==========================
	End Footer CSS
===========================*/

/*==========================
	09. Start Responsive CSS
===========================*/

/* Laptop (between 1024px and 1440px) */

@media (max-width: 1440px) {
  .hero-wrapper .hero-image .image-center {
    z-index: 1;
    position: relative;
    max-width: 875px;
    margin: 0 auto;
  }
}


/* Tablet (between 768px and 1024px) */

@media (max-width: 1200px) {

  .hero-wrapper .hero-image .image-left {
    position: absolute;
    bottom: 0;
    left: 30px;
  }
  .hero-wrapper .hero-image .image-right {
      position: absolute;
      bottom: 0;
      right: 30px;
  }
  .features-section .feature-item-wrapper .item-col {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .preview-responsive .responsive-wrapper .item{
    padding: 40px 30px;
  }
  .preview-responsive .responsive-wrapper .item .content h5{
    font-size: 16px;
  }
  .hero-wrapper .hero-image .image-right{

	bottom: -8px;
  }
  .hero-wrapper .hero-image .image-left{
	bottom: -8px;
  }
  
  
}

/* Tablet landscape ( MaxWidth 991 px) */

@media (max-width: 991px) {
  .header-area .header-navigation {
    padding: 30px 30px;
  }
  .hero-wrapper .hero-content h1{
    font-size: 70px;
  }
  .hero-wrapper .hero-content h5 {
    font-size: 16px;
  }
  .hero-wrapper .hero-image .image-left {
    display: none;
  }
  .hero-wrapper .hero-image .image-right {
      display: none;
  }
  .features-section .feature-item-wrapper .item-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .preview-responsive .responsive-wrapper .item-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .preview-innerpages {
      padding: 130px 15px;
  }
  .preview-footer .text-box h2 {
    font-size: 52px;
}
}

/* Phone ( MaxWidth 575px) */

@media (max-width: 575px){
  .preview-item .content .theme-btn,
  .preview-footer .text-box .theme-btn,
  .header-area .header-navigation .buy-button .theme-btn,
  .theme-btn {
    padding: 6px 17px;
    font-size: 14px;
  }
  h2{
    font-size: 32px;
  }
  .header-area .header-navigation {
    padding: 30px 15px;
  }
  .hero-wrapper .hero-content h1 {
    font-size: 34px;
    line-height: 50px;
  }
  .hero-wrapper .hero-content h5 {
    font-size: 16px;
    line-height: 30px;
  }
  .home-preview {
    padding: 150px 0 80px;
  } 
  .preview-item .thumbnail img {
    border-radius: 7px;
  }
  .preview-item {
    padding: 20px 15px;
    border-radius: 10px;
  }
  .features-section .feature-item-wrapper .item-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .preview-responsive .responsive-wrapper .item-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .preview-footer .text-box h2 {
    font-size: 28px;
    line-height: 1.5;
  }
  .preview-footer {
    padding: 120px 0;
}
  .preview-footer .text-box .sub-title{
	font-size: 14px;
  }
}

/*==========================
	End Responsive Section
===========================*/