/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : ULaunch - Multi Purpose Products Landing Page
* File          : CSS File
* Version       : 3.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. General css
02. Navigation area css
03. Slider area css
04. Facility area css
05. About us area css
06. Offers area css
07. Features area css
08. Products area css
09. Testimonial area css
10. Design Showcase area css
11. Contact us area css
12. Footer area css
13. Media Screens
-------------------------------------------------------------------------------------- */

/* primary-color: #00603b */

/************************************/
/***** 	   01. General css		 ****/
/************************************/

body {
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.on-side {
	margin-left: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	font-weight: 700;
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	outline: 0;
}

a:focus {
	text-decoration: none;
	outline: 0;
}

.container {
	max-width: 1160px;
}

.container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../images/linentree.png) no-repeat center center;
	background-size: cover;
	opacity: 0.5;
	/* Reduced opacity */
	z-index: -1;
}

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	background: #00603b;
	z-index: 9999;
}

.preloader::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../images/linentree.png) no-repeat center center;
	background-size: cover;
	opacity: 0.5;
	/* Reduced opacity */
	z-index: -1;
}

.loader {
	display: inline-block;
	width: 30px;
	height: 30px;
	position: relative;
	border: 4px solid #Fff;
	top: calc(50% - 15px);
	animation: loader 2s infinite ease;
}

.loader-inner {
	vertical-align: top;
	display: inline-block;
	width: 100%;
	background-color: #fff;
	animation: loader-inner 2s infinite ease-in;
}

.btn-custom {
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	padding: 10px 30px;
	text-align: center;
	color: #ff2938;
	background: #fff;
	border: 2px solid #fff;
	border-radius: 26px;
	transition: all 0.3s;
}

.btn-custom:hover {
	background: none;
	color: #fff;
}

/************************************/
/***** 02. Navigation area css  *****/
/************************************/

.navbar {
	margin-bottom: 0;
}

.navbar-brand {
	height: auto;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
}

.navbar-brand img {
	transition: all 0.3s;
	height: 58px;
}

nav.navbar.main-menu {
	background: #00603b;
	border-radius: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0);
	z-index: 101;
	padding: 20px 0;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
}

.navbar-nav li {
	padding: 30px 0;
	margin: 0 2px;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
}

.nav li {
	position: relative;
}

.attr-nav ul {
	list-style: none;
	margin-top: 12px;
}

.attr-nav>ul>li>a {
	padding: 32px 15px 0;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

nav.navbar.main-menu.sticky-header {
	padding: 10px 0;
	background: #00603b;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}

.sticked .attr-nav>ul>li>a {
	padding-top: 24px;
}


.sticky-header .navbar-brand img {
	height: 46px;
}

.sticky-header .attr-nav>ul>li>a img {
	filter: invert(100%);
	-webkit-filter: invert(100%);
}

.offcanvas-menu {
	background: #2c2c2c;
	padding: 0;
	position: fixed;
}

.offcanvas-menu .close-side {
	position: absolute;
	top: 10px;
	right: 20px;
	color: #fff;
}

.side-logo {
	text-align: center;
	padding: 50px 30px;
}

.offcanvas-menu .widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.offcanvas-menu .widget ul.link li a {
	display: block;
	text-transform: uppercase;
	font-size: 14px;
	color: #9f9f9f;
	letter-spacing: 1px;
	padding: 12px 30px;
	border-bottom: 1px dashed #3c3c3c;
}

.offcanvas-menu .widget ul.link li a:hover {
	color: #fff;
}

.offcanvas.offcanvas-menu {
	width: 280px;
}

.offcanvas-menu .widget ul.link li a i {
	padding-right: 10px;
}

/************************************/
/*****   03. Slider area css    *****/
/************************************/

.banner {
	position: relative;
	top: 0px;
	left: 0;
	width: 100%;
	background: url(../images/banner.webp?version=4) no-repeat bottom left;
	background-size: 80% auto;
	padding: 160px 0 100px;
}

.banner:after {
	content: '';
	display: block;
	width: 46%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background: #00603b;
}

.banner:before {
	content: '';
	display: block;
	width: 20%;
	position: absolute;
	top: 0;
	right: 32%;
	bottom: 0;
	background: #00603b;
	transform: skewX(-14deg);

}

.banner .row {
	position: relative;
	z-index: 1;
}

.header-content h3 {
	font-size: 14px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

.header-content h2 {
	color: #d6920d;
	font-size: 50px;
	font-weight: 900;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.header-content p {
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5em;
}

.btn-shopnow {
	display: inline-block;
	background: #d6920d;
	color: #fff;
	font-size: 14px;
	letter-spacing: 0.25em;
	font-weight: 400;
	text-transform: uppercase;
	padding: 12px 20px;
	margin-top: 10px;
	transition: all 0.3s;
}

.btn-shopnow:hover {
	background: #000;
	color: #fff;
}

/**************************************/
/*****   04. Facility area css    *****/
/**************************************/

.facility-button {
	background: #f7f7f7;
	padding: 20px 0;
}

.facility-single {
	position: relative;
}

.facility-single .icon-box {
	font-size: 50px;
	color: #00603b;
	position: absolute;
	top: 0;
	left: 0;
}

.facility-single p {
	margin: 0;
	color: #d6920d;
	font-size: 18px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	padding: 24px 0 24px 80px;
}

/************************************/
/*****  05. About us area css   *****/
/************************************/

.section-title {
	margin-bottom: 60px;
}

.section-title p {
	color: #aaa7a7;
	position: relative;
	font-size: 14px;
	padding-left: 70px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.section-title p:before {
	content: '';
	display: block;
	width: 50px;
	height: 1px;
	position: absolute;
	top: 9px;
	left: 0;
	background: #aaa7a7;
}

.section-title h2 {
	color: #d6920d;
	font-size: 40px;
	font-weight: 700;
}

.aboutus {
	padding: 80px 0;
}

.aboutus .section-title {
	margin-bottom: 40px;
}

.about-entry p {
	font-size: 14px;
	color: #aaa7a7;
	line-height: 1.5em;
	margin-bottom: 1.5em;
}

.btn-video {
	display: inline-block;
	color: #d6920d;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	position: relative;
	padding: 22px 0 22px 60px;
}

.btn-video i {
	color: #1edd77;
	font-size: 46px;
	position: absolute;
	top: 0;
	left: 0;
}

.btn-video:hover {
	color: #000;
}

/**********************************/
/*****  06. Offers area css   *****/
/**********************************/

.offer-wrapper {
	background: #f7f7f7;
	padding: 30px 50px;
}

.offer-entry {
	padding-top: 24px;
}

.offer-entry h3 {
	color: #d6920d;
	font-size: 26px;
	font-weight: 600;
}

.offer-entry p {
	color: #a4a6a7;
	font-size: 14px;
	font-weight: 500;
}

.offer-entry .btn-shopnow {
	background: #00603b;
}

.offer-entry .btn-shopnow:hover {
	background: #000;
}

/************************************/
/*****  07. Features area css   *****/
/************************************/

.features {
	padding: 80px 0;
}

.features .section-title {
	margin-bottom: 40px;
}

.feature-entry p {
	font-size: 14px;
	color: #aaa7a7;
	line-height: 1.5em;
	margin-bottom: 1.5em;
}

.feature-entry ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.feature-entry ul:after {
	content: '';
	display: block;
	clear: both;
}

.feature-entry ul li {
	width: 48%;
	float: left;
	position: relative;
	color: #aaa7a7;
	font-size: 14px;
	font-weight: 500;
	padding: 6px 6px 6px 20px;
}

.feature-entry ul li:before {
	content: '\f00c';
	font-family: FontAwesome;
	color: #00603b;
	position: absolute;
	top: 4px;
	left: 0;
}

.feature-image {
	padding-top: 20px;
}

/************************************/
/*****  08. Products area css   *****/
/************************************/

.products {
	background: #f2f6f9;
	padding: 80px 0;
}

.product-single {
	text-align: center;
}

.product-single figure {
	margin-bottom: 30px;
}

.product-single h3 {
	color: #2c2c2c;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
}

.product-single p {
	color: #00603b;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 0;
}

/***************************************/
/*****  09. Testimonial area css   *****/
/***************************************/

.testimonials {
	padding: 80px 0;
	background: url(../images/testimonial.webp) no-repeat top center fixed;
	background-size: cover;
	position: relative;
}

.testimonials:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 216, 101, 0.1);
}

.testimonials .container {
	position: relative;
	z-index: 1;
}

.testimonials .section-title h2 {
	color: #fff;
}

.testimonials .section-title p {
	color: #000;
}

.testimonials .section-title p:before {
	background: #000;
}

.testimonial-slider {
	margin: 0 auto;
	padding: 0 140px;
	position: relative;
}

.testimonial-single {
	text-align: center;
	position: relative;
}

.testimonial-single:before {
	content: '\f10d';
	font-family: FontAwesome;
	color: #fff;
	font-size: 76px;
}

.testimonial-single p {
	color: #fff;
	line-height: 1.5em;
}

.testimonial-single h3 {
	font-size: 18px;
	color: #fff;
	font-weight: 500;
	margin-top: 20px;
}

.testimonial-single h3 span {
	display: block;
	font-size: 13px;
	color: #2c2c2c;
	text-transform: uppercase;
	margin-top: 6px;
}

.testimonial-button-next,
.testimonial-button-prev {
	width: 36px;
	height: 36px;
	background: #fff;
	color: #00603b;
	border-radius: 50%;
	text-align: center;
	padding-top: 7px;
	position: absolute;
	cursor: pointer;
}

.testimonial-button-prev {
	top: 50%;
	left: 0px;
}

.testimonial-button-next {
	top: 50%;
	right: 0px;
}

/*******************************************/
/*****  10. Design Showcase area css   *****/
/*******************************************/

.design-showcase {
	padding: 80px 0;
}

.design-single {
	position: relative;
	padding-left: 70px;
}

.design-single span {
	font-size: 44px;
	color: #c3c2c2;
	font-weight: 600;
	position: absolute;
	line-height: 1em;
	top: 0;
	left: 0;
}

.design-single h3 {
	font-size: 20px;
	color: #2c2c2c;
	font-weight: 600;
}

.design-single p {
	color: #aaa7a7;
	font-size: 14px;
}

.showcase-slider {
	max-width: 880px;
	margin: 100px auto 30px;
}

.showcase-slider .leftClass,
.showcase-slider .rightClass {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #2c2c2c;
	padding-bottom: 4px;
	margin-top: -10px;
}

.showcase-slider>.navContainer>.leftClass:after,
.showcase-slider>.navContainer>.rightClass:after {
	background: #2c2c2c;
}

/**************************************/
/*****  11. Contact us area css   *****/
/**************************************/

.contactus {
	background: #f2f6f9;
	padding: 80px 0;
}

.contact-note {
	margin-top: 14px;
}

.contact-note p {
	font-size: 14px;
	color: #aaa7a7;
	line-height: 1.5em;
}

.contact-form {
	max-width: 768px;
	margin: 20px auto 0;
}

.contact-form .form-control {
	box-shadow: none;
	border-radius: 0;
	border: none;
	font-size: 14px;
	color: #aaa7a7;
	height: auto;
	padding: 12px 16px;
	resize: none;
}

.btn-contact {
	display: inline-block;
	border: none;
	background: #00603b;
	color: #fff;
	font-size: 14px;
	letter-spacing: 0.25em;
	font-weight: 400;
	text-transform: uppercase;
	padding: 12px 30px;
	transition: all 0.3s;
}

.btn-contact:focus,
.btn-contact:hover {
	outline: 0;
	background: #d6920d;
}

.with-errors ul {
	padding: 0;
	margin: 0;
	color: #a94442;
}

/**********************************/
/*****  12. Footer area css   *****/
/**********************************/

footer {
	padding: 60px 0 40px;
	background: #2c2c2c;
}

.footer-mega {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-about img {
	margin-bottom: 30px;
}

.footer-about p,
.footer-contact p,
.footer-siteinfo p {
	color: #aaa7a7;
	font-size: 14px;
	line-height: 1.5em;
	margin-bottom: 1.5em;
}

.footer-social {
	margin-bottom: 10px;
}

.footer-social a {
	display: inline-block;
	width: 36px;
	height: 36px;
	background: #ffffff;
	color: #00603b;
	border-radius: 50%;
	text-align: center;
	padding-top: 8px;
	margin-right: 6px;
}

.footer-social a:hover {
	background: #00603b;
	color: #fff;
}

.need-help,
.footer-menu {
	margin-top: 40px;
}

.need-help p {
	color: #aaa7a7;
	font-size: 14px;
	line-height: 1.5em;
	margin-bottom: 0;
}

.footer-menu ul {
	padding: 0;
	margin: 0;
}

.footer-menu ul li {
	display: inline-block;
}

.footer-menu ul li a {
	display: block;
	padding: 0 5px;
	color: #aaa7a7;
	font-size: 14px;
}

.footer-menu ul li a:hover {
	color: #00603b;
}

/************************************/
/*****    13. Media Screens     *****/
/************************************/

@media only screen and (max-width: 1200px) {
	.banner {
		background-size: contain;
	}
}

@media only screen and (max-width: 991px) {
	nav.navbar.bootsnav .navbar-header {
		padding-left: 0;
		padding-right: 0;
	}

	nav.navbar.bootsnav .navbar-brand {
		display: block;
		padding-left: 0;
		padding-right: 0;
	}

	.section-title h2 {
		font-size: 32px;
	}

	.banner {
		background-size: cover;
	}

	.banner:before {
		display: none;
	}

	.banner:after {
		width: 100%;
	}

	.offer-wrapper {
		text-align: center;
	}

	.offer-entry {
		margin-bottom: 30px;
	}

	.product-single {
		margin-bottom: 30px;
	}

	.testimonial-slider {
		padding: 0 80px;
	}

	.design-single {
		margin-bottom: 30px;
	}

	.showcase-slider {
		margin: 30px 0;
	}
}

/* Mobile Layout */
@media only screen and (max-width: 767px) {
	nav.navbar.bootsnav .navbar-brand {
		padding-left: 15px;
		padding-right: 15px;
	}

	.section-title h2 {
		font-size: 26px;
	}

	.header-content h2 {
		font-size: 28px;
	}

	.facility-single p {
		font-size: 16px;
		padding: 15px 0 15px 52px;
	}

	.facility-single .icon-box {
		font-size: 36px;
	}

	.aboutus,
	.features,
	.testimonials,
	.design-showcase,
	.contactus {
		padding: 60px 0;
	}

	.products {
		padding: 60px 0 30px;
	}

	.about-entry {
		margin-bottom: 30px;
	}

	.about-image img {
		width: 100%;
	}

	.offer-entry h3 {
		font-size: 22px;
	}

	.feature-image {
		text-align: center;
		margin-bottom: 40px;
	}

	.design-single {
		padding-left: 0;
		padding-top: 50px;
	}

	.design-single h3 {
		font-size: 18px;
	}

	.slider>.navContainer>.leftClass:after,
	.slider>.navContainer>.rightClass:after {
		width: 60px;
	}
}

/* Small Mobile Layout */

@media only screen and (max-width: 480px) {
	.section-title {
		margin-bottom: 40px;
	}

	.section-title h2 {
		font-size: 22px;
	}

	.btn-video {
		font-size: 14px;
	}

	.offer-wrapper {
		padding: 20px;
	}

	.feature-entry ul li {
		width: 100%;
	}

	.testimonial-slider {
		padding: 0;
	}

	.testimonial-pagination {
		text-align: center;
		padding-top: 20px;
	}

	.testimonial-button-next,
	.testimonial-button-prev {
		display: inline-block;
		position: relative;
		margin: 0 4px;
	}
}

.product-single figure {
	width: 100%;
	/* Make the container responsive */
	aspect-ratio: 1;
	/* Ensures the figure maintains a square aspect ratio */
	overflow: hidden;
	/* Hides any overflowing parts of the image */
	display: flex;
	justify-content: center;
	align-items: center;
}

.product-single figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ensures the image covers the container */
}

.square-image {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.square-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.out-of-stock-label {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: rgba(255, 0, 0, 0.8);
	color: #fff;
	padding: 5px 10px;
	font-size: 14px;
	font-weight: bold;
	border-radius: 3px;
	z-index: 10;
}

.text-danger {
	color: #dc3545;
}

.text-success {
	color: #28a745;
}

.whatsapp-float {
	position: fixed;
	width: 50px;
	height: 50px;
	bottom: 20px;
	right: 20px;
	background-color: #25d366;
	border-radius: 50%;
	padding: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	z-index: 100;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	text-decoration: none;
}

.whatsapp-float i {
	color: white;
}

.whatsapp-float:hover {
	transform: scale(1.1);
	transition: transform 0.3s;
}

.image-container {
	position: relative;
	overflow: hidden;
	/* Ensures the image doesn't overflow the container */
}

.zoom-image {
	transition: transform 0.3s ease;
	/* Smooth zoom effect */
}

.zoom-image:hover {
	transform: scale(1.2);
	/* Adjust the scale value for the desired zoom level */
}

.zoom-container {
	position: relative;
	overflow: hidden;
	/* Ensures the zoomed image doesn't overflow */
	width: 100%;
	/* Adjust to your container size */
	height: auto;
	cursor: crosshair;
	/* Changes cursor to indicate zoom effect */
}

.zoom-image {
	transition: transform 0.2s ease;
	/* Smooth zoom */
	width: 100%;
	/* Ensure the image is responsive */
	height: auto;
	transform-origin: center center;
	/* Default transform origin */
}