html {
  scroll-behavior: smooth;
}
.preview .header-menu-4 .menu {
	text-align: right;
}
.preview .header-menu-4 .menu ul li a {
	text-transform: uppercase;
}
.preview  .btn {
	color: #fff !important;
	padding: .375rem .75rem !important;;
}
.preview .hero-content span {
	color: var(--main-color);
}
.preview  .hero-area-4.overview-section {
	background-color: var(--white);
	background-image: url(../../assets/img/hero-area/hero-bg.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-bottom: 70px;
}
.preview .hero-area-4 .section-title h2 {
	font-size: 52px;
	color: var(--heading-color);
}
.preview .hero-content {
	padding: 100px 0;
}
.preview .btn-primary {
	background-color: #334FAA;
	border-color: #334FAA;
	transition: .6s all;
}
.btn.btn-primary:hover {
	background: var(--main-color);
}
.preview .overview-bg {
	height: auto;
	width: 100%;
	margin-top: 10%;
	position: relative;
	box-shadow: 5px 5px 11px #1c1e22, -5px -5px 11px #262a2e;
}
.preview .section-title {
	margin-bottom: 30px;
}

.preview .overview-bg .destop {
	width: 100%;
	height: auto;
}
.preview .overview-bg .destop-m {
	width: 180px;
	position: absolute;
	right: -14%;
	top: 28%;
	-webkit-animation: previewm-animation 4s linear infinite;
	animation: previewm-animation 4s linear infinite;
}
@keyframes previewm-animation {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

.demo-filter-menu li {
  display: inline-block;
}
.demo-filter-menu li.active {
	background: #334FAA;
	color: #fff;
}
.demo-filter-menu li {
	padding: 10px 15px;
	text-transform: uppercase;
	font-size: 18px;
	background: rgba(0, 0, 0, 0.05);
	color: var(--dark);
	border-radius: 5px;
	margin: 0 -1px;
	cursor: pointer;
	font-weight: 500;
	margin-bottom: 10px;
}
.demo-filter-menu {
  text-align: center;
  margin-bottom: 30px;
}
.single-show-case-item  .preview {
	height:500px;
	margin: 30px 0 0;
	overflow: hidden;
	display: block;
	border-radius: 10px 10px 0 0;
	-webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.07);
	box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.07);
}

.single-show-case-item .home-preview {
	height:500px;
	box-shadow: 0px 0px 30px #cec8f0;
}
.single-show-case-item {
	position: relative;
}

.demo-bg {
	width: 100%;
	height: 100%;
	display: inline-block;
	position: relative;
	background-repeat: no-repeat;
	background-size: contain;
}
.demo-bg::after {
	background: linear-gradient( to top, #f4f2f2, #dfe3ea );
	content: "";
	position: absolute;
	left: 0;
	top: -1%;
	height: 103%;
	width: 100%;
	z-index: -1;
	box-shadow: 0 0 4px #1c1e22, 0 0 4px #262a2e;
}
.showcase-feature.section-padding {
	padding-top: 0;
}
.show-case-scroll {
	-webkit-transition: all 25s ease-out 0s;
	transition: all 25s ease-out 0s;
	background-position: center 0;
	background-repeat: no-repeat;
	position: absolute;
	width: calc(100% - 0px);
	height: calc(100% - 0px);
	background-size: cover;
}
.demo-bg:hover .show-case-scroll {
	background-position: center 100% !important;
}
.more-btn {
	transition: .6s all;
	color: var(--dark);
	font-size: 18px;
	text-transform: uppercase;
	display: block;
}
.more-btn:hover {
	color: #fff;
}
.bottom-btn {
	text-align: center;
	background: #C3C7D5;
	padding: 25px 0;
	position: absolute;
	width: 100%;
	bottom: -2%;
	transition: all 0.6s ease-in-out;
	border-radius: 0 0 10px 10px;
}
.bottom-btn:hover a {
	color: #fff;
}
.bottom-btn:hover {
	background: var(--bs-danger);
}
.showcase-feature .section-title h2 {
	font-size: 30px;
	text-transform: uppercase;
}
.showcase-feature .section-title h2 span {
	color: var(--home4-color);
}
.showcase-feature-itmes .show-case-features-img {
	border-radius: 10px;
}
.show-case-features-img {
	box-shadow: 0px 0px 15px #dfd9ff;
	-webkit-box-shadow: 0px 0px 15px #dfd9ff;
	-moz-box-shadow: 0px 0px 15px #dfd9ff;
	background: #fff;;
	transition: .6s all;
}
.show-case-features-img:hover{
	animation-iteration-count: 1;
	animation: hover-icon 1s ease-in
}
@keyframes hover-icon{
	16.65% {
	  transform: translateX(8px);
	}
	33.3% {
	  transform: translateX(-6px);
	}
	49.95% {
	  transform: translateX(4px);
	}
	66.6% {
	  transform: translateX(-2px);
	}
	83.25% {
	  transform: translateX(1px);
	}
	100% {
	  transform: translateX(0);
	}
  }


.feature-img {
	width: 100%;
}
.showcase-features-text {
	color: var(--heading-color);
	font-size: 14px;
	text-align: center;
	font-weight: 700;
	border-radius: 10px;
	cursor: pointer;
	margin: 20px 0;
}

.ecommerce-area {
	background-image: url(../../assets/img/demo-img/ecommerce-bg.jpg);
	background-size: cover;
	background-position: center;
	position: relative;
	z-index: 1;
	padding: 250px 0;
	margin-bottom: 30px;
}
.ecommerce-area::after {
	position: absolute;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0, .75);
	content: "";
	top: 0;
	z-index: -1;
}

.ecommerce-title h2 {
	margin-bottom: 15px;
	font-size: 35px;
	text-transform: capitalize;
	line-height: 55px;
	color: #fff;
	font-weight: 700;
}
.ecommerce-title p {
	color: #fff;
	font-size: 17px;
	font-weight: 400;
}

.ecommerce-title h2 span a {
  color: var(--home4-color);
}
.home-4.preview .footer {
	position: relative;
	z-index: 1;
	background: var(--home4-color);
	color: #fff;
	padding-top: 0;
}

.footer-top-full-area {
	background-image: url(../../assets/img/demo-img/review-bg.jpg);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-color: var(--heading-color);
	padding: 250px 0;
	margin-bottom: 50px;
	position: relative;
	z-index: 0;
}
.footer-top-full-area ::before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0, .75);
	z-index: -1;
	opacity: .2;
}
.footer-top-full-area .content h2 {
	color: #fff;
	font-size: 50px;
	font-weight: 600;
	letter-spacing: -1px;
	margin-bottom: 20px;
	font-style: italic;
}
.footer-top-full-area .content p {
	color: #fff;
	margin-bottom: 30px;
	font-size: 20px;
}

.buy-now-btn {
  background: var(--bs-danger);
  padding: 15px 30px;
  color: #fff;
  border-radius: 5px;
  transition: .6s all;
  display: inline-block;
}
.buy-now-btn:hover {
  color: #fff;
  background: var(--heading-color);
  border: 1px solid #fff;
}
.footer-top-full-area .content span {
	color: var(--main-color);
}