@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap");
:root {
--h1size: 52px;
--h2size: 42px;
--h3size: 26px;
--h4size: 22px;
--h5size: 20px;
--h6size: 18px;
--bodysize: 16px;
--h1height: 60px;
--h2height: 50px;
--h3height: 34px;
--h4height: 30px;
--h5height: 28px;
--h6height: 30px;
--bodyheight: 30px;
--pfamily: 'Rubik', sans-serif;
--red: #ff3838;
--gray: #777777;
--text: #555555;
--blue: #1494a9;
--white: #ffffff;
--chalk: #f5f5f5;
--green: #11b76b;
--purple: #b12fad;
--orange: #e86121;
--yellow: #ffab10;
--body: #f5f6f7;
--border: #e8e8e8;
--heading: #39404a;

--primary1:#202020;
--primary: #fba832;
--secondary:#ff8e32;
--background: #F6F1EB;
--sub-heading: #565765;
--green-chalk: #ddffd5;
--green-dark: #072f17;
--gray-chalk: #cccccc;
--intro-bg: #f8fffa;
--facebook: #3b5998;
--linkedin: #0e76a8;
--twitter: #00acee;
--google: #E60023;
--instagram: #F77737;
--primary-bshadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
--primary-tshadow: 2px 3px 8px rgba(0, 0, 0, 0.1)
}
* {
	margin:0px;
	padding:0px;
	outline:0px
}


img {
	vertical-align:middle
}
a {
	text-decoration:none !important;
	display:inline-block;
}
a:hover {
	text-decoration:none
}
ul, ol {
	padding:0px !important;
	list-style:none
}
h1, h2, h3, h4, h5, h6, p, ol, ul, li, span, label {
	margin-bottom:0px !important;
}
html, body {
	scroll-behavior:smooth;
	overflow-x: hidden;
	font-weight: 400;
	
}

body{
	background: #fff !important;
}

.slider-container {
	width: 300px;
	height: 400px;
	overflow: hidden;
	position: relative;
	border-radius: 10px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.slider {
	display: flex;
	flex-direction: column;
	transition: transform 0.5s ease-in-out;
}
.slide {
	width: 100%;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	font-weight: bold;
	color: white;
}
.slide:nth-child(1) { background: #ff5733; }
.slide:nth-child(2) { background: #33ff57; }
.slide:nth-child(3) { background: #3357ff; }
.slide:nth-child(4) { background: #ff33a8; }

.swiper1 {
	width: 300px;
	height: 500px;
}
.swiper-slide1 {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	background: #c5c5c5;
	color: white;
	height: 250px !important; /* Adjust height */
}

.swiper2 {
	width: 300px;
	height: 500px;
}
.swiper-slide2 {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	background: #e7e7e7;
	color: white;
	height: 300px !important; /* Adjust height */
}

.vertical-slider{
	gap: 10px;
}

footer{
	
	background: linear-gradient(rgba(255, 255, 255, 0.286),rgba(255, 255, 255, 0.264)),url(../images/spicy/footer-bg.webp);
	border-top-left-radius: 60px;
	border-top-right-radius: 60px;
	z-index: -1;
	padding-top:7%;
	box-shadow: rgba(23, 24, 24, 0.212) 0px 2px 4px 0px, rgba(14, 30, 37, 0.234) 0px 2px 16px 0px;
	color: #5e5e5e;
	font-weight: 500;
	a{
		color: #636363;
		font-weight: 500;
	}
	a:hover{
		transform: translateX(5px);
		color: #ff8e32;
		transition: transform 0.1s ease-in-out;
	}
}

.f-top{
	position: absolute;
	width: 80%;
	z-index: 1;
	border: 5px double rgb(255, 255, 255);
	background-color: #4e4f59;
	color: white;
	padding: 30px;
    margin-top: -30px;
    /* margin-bottom: 50px; */
    justify-content: center;
    justify-self: anchor-center;
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.made-icons img{

		font-size: 10px !important;
	
}

.social-links-footer{
margin: 12px;
	i{
		border-radius: 6px;
		background-color: #fff;
		padding: 3px;
		margin: 6px;
		font-size: 28px;
	}
}

.footer-btm{
	color: #414141;
	border-top: 1px solid #8f8f8f;
	a:hover{
		color: rgb(255, 153, 0);
	}
  }
  .f-btm{
	background-color: #4e4f59;
  }
  .footer-copytext {
	font-size:15px;
	color:#dfdfdf;
	padding: 10px;
}
.footer-copytext a {
	font-weight: 600;
	color:#ffffff;
}
.footer-copytext a:hover {
	text-decoration:underline;
}


.s1 {
	background-color: #ff8e32;
}

.s2 {
	background-color: #cacaca;

	h4,
	p {
		color: #2b2b2b !important;
	}
}

.s3 {
	background-color: #373737;

	h4,
	p {
		color: #ffffff !important;
	}
}

.vedio-bg{
	padding-top: 0px;
}

.Product_feature_section {
	position: relative;

	/* background-color: #e5e5e4; */
	&::before {
		position: absolute;
		content: "";
		background:  linear-gradient(rgba(0,0,0, 0.7),rgba(0, 0, 0, 0.7)),url(../images/banners/Banner.png) repeat;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		z-index: -1;
	}
	.homebaner{
		
	}
	h2,h6{
		color: #ffeee2;
	}

	.productFeature-box {
		box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; 

		display: flex;
		/* align-items: center; */
		justify-content: space-between;
		gap: 20px;
		height: 100%;

		border-radius: 20px;

		.pf-img {
			width: 100%;

			img {
				width: 100%;
			}
		}
		
	}

	.pf-content {
		display: flex;
		padding: 10px;
		background-color: #fff0fe;
		border: 3px solid #bbbbbb;
		border-radius: 8px;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		/* border: 1px solid red; */
		padding: 5px;
		

		h4 {
			font-size: 30px;
			color: #555555;

		}

		span {
			font-size: 14px;
		}

		p {
			font-weight: 400 !important;
			padding-top: 5px;
			font-size: 15px;
			line-height: 20px !important;
			color: #696969;
		}

		a {
			border: 2px solid var(--primary);
			padding: 0px 15px;
			color: #272727;
			text-align: center !important;
		}

	}

	.pf-box {
		border-radius: 50px !important;
	}

	.pf-content:hover a {
		background-color: var(--primary);
		color: #fff;
	}

	.pf-ebtn {
		
		width: 100%;
		/* margin-top: -30px; */

	}

	.yt-video {
		width: 100%;
		height: 100%;

		.youtuberee {
			width: 100%;
			height: 100%;
		}

	}
}

.my-section2 {
	padding-top: 2px;
}


.homebaner .swiper-button-next {
	top: var(--swiper-navigation-top-offset, 95%) !important;

}

.homebaner .swiper-button-prev {
	top: var(--swiper-navigation-top-offset, 95%) !important;
	color: var(--swiper-navigation-color, var(--swiper-theme-color));


}

.homebaner .swiper-button-prev {
	left: inherit !important;
	right: 70px !important;
	width: 41px !important;
	height: 41px !important;


}

.homebaner .swiper-button-next {
	right: 20px !important;
	left: auto;
	width: 41px !important;
	height: 41px !important;

}

.homebaner .swiper-button-prev:after {
	content: "\f104" !important;
	font-family: FontAwesome !important;
	font-size: 24px !important;
	color: rgb(0, 0, 0) !important;
	margin-bottom: 10px;
	background-color: #dedede;
	border-radius: 8px;
	padding: 5px;
}

.homebaner .swiper-button-next:after {
	content: "\f105" !important;
	font-family: FontAwesome !important;
	font-size: 24px !important;
	color: rgb(0, 0, 0) !important;
	margin-bottom: 10px;
	background-color: #dedede;
	border-radius: 8px;
	padding: 5px;
}

.productfeature .swiper-wrapper {
	padding-bottom: 40px;
}

.cl-card{
	border: 22px solid #ede8d0;
	border-radius: 9px;
	box-shadow: rgba(99, 99, 99, 0.404) 0px 2px 8px 0px;
}

.span-heading{
	color: rgb(59, 59, 59);
}
.solution{
	background-color: #eaeaea;
}
.solution-in{
	padding: 20px;
	border: 3px dashed #767676;
	background-color: #fff;
}

.up{
	background: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.7)),url(../images/creatives/1.webp);
	background-size: contain;
}

.custom-row {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.custom-col {
	border-top: 6px solid #020521;
	background-color: #ff8e32;
padding: 15px;
padding-bottom: 17px !important;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
}

/* Alternate margin adjustments */
.custom-col:nth-child(odd) {
	margin-top: 0px; /* Lower by 10px */
	margin-bottom: 30px;

}
.custom-col:nth-child(odd):hover{
	
	background-color: #fff;
}

.custom-col:nth-child(even) {
	margin-top: 30px; /* Lower by an additional 10px */
	margin-bottom: 5px;
}
.custom-col:nth-child(even):hover{
	
	background-color:#fff;
}

.cmn-link{
	background-color: rgb(183, 183, 183);
	padding: 8px;
}
/****************************************************************************************************/

.form-container {
    width: 300px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
}
label, input, select {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}
button {
    background-color: #f8796c;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.v-sec{
	background:linear-gradient(rgba(255, 253, 250, 0.93),rgba(255, 253, 250, 0.93)),url(../images/creatives/bg.jpg);
	color: #383838;
	font-weight: 400;
	
	h5{
		color: #3d3d3d;
	}
}

.v-sec-text{
	backdrop-filter: blur(0px);
}
/*<================================ product section =================================> */
.product-gallery {
	img {
		max-width: 100%;
		height: auto;
		vertical-align: middle;
		display: inline-block;
	}
	.btn-success{
		background-color: var(--primary);
		color: #fff;
	}

	.grid-wrapper>div {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.grid-wrapper>div>img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 2px;

	}

	.grid-wrapper {
		display: grid;
		grid-gap: 10px;
		grid-template-columns: repeat(auto-fit, minmax(24%, 1fr));
		grid-auto-flow: dense;
	}

	.grid-wrapper .wide {
		grid-column: span 2;
	}

	.grid-wrapper .tall {
		grid-row: span 1;
	}

	.grid-wrapper .big {
		grid-row: span 2;
	}

	.grid-box a {
		display: block;
		width: 100%;
		height: 100%;
		position: relative;

		.show-text {
			position: absolute;
            left: 15px;
            bottom: 20px;
            color: rgb(72, 72, 72);
            border: 1px solid #4c4c4c;
            padding: 0px 5px;
            transition: all .6s linear;
            opacity: 1;
            scale: 0.9;
			font-weight: bold;

			h4 {
				color: rgb(60, 60, 60);
				font-size: 15px;
				font-weight: 600;
			}
		}

	}

	.grid-box {
		a img {
			transition: all 0.5s linear 0s;
		}

		overflow: hidden;
		position: relative;

		.hovershow {
			position: absolute;
			top: 0px;
			left: 0px;
			background: #ff8e32;
			text-align: center;
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 0px 10px;
			color: #4b4b4b;
			gap: 15px;
			transition: all .5s linear;
			opacity: 0;

			p {
				color: #636363;
				;
				text-align: center;
				font-size: 14px;
				font-weight: normal !important;
				line-height: normal !important;
				opacity: 0;
				transition: all .5s linear;
			}

			h5 {
				color: #555553;
				opacity: 0;
				transition: all .5s linear;
			}
		}

		.borderhover {
			border: 1px solid #4c4c4c;
			;
			width: 100%;
			height: 95%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 0px 10px;
			color: #4b4b49;
			gap: 15px;
		}

		&:hover a img {
			transform: scale(1.5);
		}

		&:hover .hovershow {
			opacity: 1;
		}

		&:hover .hovershow p {
			opacity: 1;
		}

		&:hover .hovershow h5 {
			opacity: 1;
		}

		&:hover a .show-text {
			opacity: 0;
			scale: 0;
		}
	}

	.grid-box a img,
	.grid-box a .product-gallery-text {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.product-gallery-text {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0px;

	h2 {
		padding: 20px 0px;
		position: relative;
		background: var(--chalk);

		&::before {
			position: absolute;
			content: "";
			width: 20px;
			height: 20px;
			background: var(--primary);
			left: -3px;
			top: -3px;
			z-index: -1;
		}

		&::after {
			position: absolute;
			content: "";
			width: 20px;
			height: 20px;
			background: var(--primary);
			right: -3px;
			bottom: -3px;
			z-index: -1;
		}
		
	}
}

/* Responsive layout for mobile */
@media (max-width: 768px) {
	.product-gallery .grid-wrapper {
		grid-template-columns: repeat(1, 1fr);
		/* 2 equal-sized images per row */
		grid-auto-rows: auto;
		/* Auto height */
	}

	.product-gallery .grid-wrapper .wide,
	.product-gallery .grid-wrapper .tall,
	.product-gallery .grid-wrapper .big {
		grid-column: span 1;
		/* Ensures images take equal space on mobile */
		grid-row: span 1;
	}
}
@media (max-width: 992px) {
	.product-gallery .grid-wrapper {
		grid-template-columns: repeat(1, 1fr);
		/* 2 equal-sized images per row */
		grid-auto-rows: auto;
		/* Auto height */
	}

	.product-gallery .grid-wrapper .wide,
	.product-gallery .grid-wrapper .tall,
	.product-gallery .grid-wrapper .big {
		grid-column: span 1;
		/* Ensures images take equal space on mobile */
		grid-row: span 1;
	}
}


.img-text img:hover{
    filter: brightness(100%);
    transition: .3s ease ;
    transform: scale(.98);
	
   }
  
   .img-text{
    position: relative;
    
   }
   .overlay-text{
    position: absolute;
    transform: translate(-30%, -30%);
    color: #ffffff;
    padding: 0px;
    text-align: center;
    display: block;
   
    top: 30%;
    left:35%;

   }
   .q-card{
	margin-right: 0px;
	padding: 1px;
	
   }
   .q-card:hover{
	filter: brightness(100%);
	.overlay-text{
	  display: none;
	}
   }
   
.ql-img{
	
	filter: brightness(40%);
	border-radius: 14px;
	width:95%;
  }
  
 .q-bg{
	background:url(../images/creatives/7xm.xyz514276.jpg);
 }

 .top{
	padding: 10px;
	background-color: var(--secondary);
	border-radius: 16px;
	margin-bottom: 10px;
 }
 
 .down{
	padding: 10px;
	background-color: #cec9b2;
	border-radius: 16px;
 }

 .side{
	padding: 10px;
	background-color: rgb(232, 230, 230);
	border-radius: 16px;
 }

 .updateSection {
    background-color:var(--primary);
    position: relative;
    margin-bottom: 25px;
    overflow: hidden;
}
.my-section {
    padding: 20px 0;
}

.updateSection {
    &::before {
        position: absolute;
        content: "";
        background-image: url(../images/mountain.svg);
	 background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 100px;
        bottom: 0;
        left: 0;
    }
}

.updateSection {
    .upForm {
        padding: 25px 15px 50px 15px;
    }
}


    .upForm {
        .upRight {
            display: flex;
            flex-direction: column;
        }
    }


	.enq_quick {
		padding: 0;
		margin: 0px 0 0px 0;
		background: #fff;
	}

	.enq_quick_area {
		display: flex
	;
		justify-content: center;
		align-items: center;
		gap: 10px;
		padding: 0px 0 20px 0;
	}

	.qck_contact {
		font-size: 20px;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 600;
		padding: 7px 10px;
		border-radius: 0;
		color: #000;
	}

	.enq_quick_area input, .frm_drp {
		max-width: 180px;
		color: #999 !important;
		height: 40px !important;
		border: 1px solid #999 !important;
		border-radius: 4px;
		font-size: 14px;
		padding: 0 0px 0 15px;
		justify-self: center;
		margin-bottom: 4px !important;
	}

	.frm_drp {
		padding-top: 0px;
	}

	.enq_quick_area button {
		max-width: 120px;
	}
	.btn_style {
		color: #fff;
		background: linear-gradient(120deg, #d42f19 0%, #af4e42 100%) !important;
		border-color: #fba832;
		width: 100%;
		box-shadow: none;
		margin: 0 5px 0 5px;
		display: inline-block;
		padding: 10px 12px;
		margin-bottom: 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.42857143;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		-ms-touch-action: manipulation;
		touch-action: manipulation;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background-image: none;
		border: 1px solid transparent;
		border-radius: 4px;
	}
	button {
		background-color: inherit;
		cursor: pointer;
	}

	.inner-padding {
		padding-top: 10px 0px;
	}

	.section-title-area-2 {
		width: 100%;
		height: auto;
		margin: 7px 0px 30px;
	}

	.section-title {
		font-size: 28px;
		font-weight: 700;
		line-height: 28px;
		letter-spacing: 0;
		color: #303030;
		text-transform: uppercase;
		
	}

	.single-feature {
		width: 100%;
		float: left;
		margin-bottom: 40px;
	}

	.feature-title{
		font-weight: lighter !important;
	}

	.feature-content{
		i{
			padding: 10px;
			border: 1px solid #dadada;
			border-radius: 6px;
		}
	}

	.service-area{
		background: radial-gradient(white,rgba(255, 255, 255, 0.562));
	}

	.service-img{
		margin-top: 30px;
		
		
	}

	.service-item {
		width: 100%;
		height: auto;
		border: 2px solid #4d4d4d;
		border-radius: 15px;
		text-align: center;
		padding: 60px 25px 30px;
		margin-top: 55px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.service-icon {
		width: 100%;
		height: auto;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;
		
	
	}

	.service-item img {
		
		background-color: #4d4d4d;
		border-radius: 50%;
		top: 20px;
		position: relative;
		z-index: 1;
		-webkit-transition: all 0.4s ease-in-out;
		-moz-transition: all 0.4s ease-in-out;
		-o-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
	}

	.service-item:hover{
	color: #fff;
			background-color: #4d4d4d;
			box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	.service-icon:before {
		content: "";
		position: absolute;
		width: 50px;
		height: 40px;
		text-align: center;
		top: 45%;
		left: 30%;
		border-bottom: 2px solid #9e9e9e;
		background-color: #fff;
		-webkit-transform: rotate(26deg);
		-moz-transform: rotate(26deg);
		-ms-transform: rotate(26deg);
		-o-transform: rotate(26deg);
		transform: rotate(26deg);
	}

	.service-icon:after {
		content: "";
		position: absolute;
		width: 50px;
		height: 40px;
		text-align: center;
		top: 45%;
		right: 30%;
		border-bottom: 2px solid #9e9e9e;
		background-color: #fff;
		-webkit-transform: rotate(-26deg);
		-moz-transform: rotate(-26deg);
		-ms-transform: rotate(-26deg);
		-o-transform: rotate(-26deg);
		transform: rotate(-26deg);
	}

	.btn-readmore-2 {
		font-size: 12px;
		font-weight: 400;
		line-height: 28px;
		letter-spacing: 0;
		color: #fff;
		background-color: #0083be;
		text-transform: uppercase;
		padding: 5px 18px;
		border: 1px solid #ebebeb;
		border-radius: 5px;
	}
	.btn {
		border-radius: 0px;
		padding: 15px 35px;
		font-size: 14px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.ab-loc{
		padding: 18px;
		box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
		margin-bottom: 10px;
		background-color: #fff;
	}

	.c-card{
		text-align: center !important;
		img{
			box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
			padding: 14px;
			border-radius: 50%;
			justify-content: center;
			margin-bottom: 10px;
		}

	}

	.certificates{
		background: linear-gradient(rgba(255, 255, 255, 0.685),rgba(255, 255, 255, 0.618)),url(../images/creatives/getty-1.jpg);
	}

	.a1{
		background-color: rgb(240, 240, 240);
	}
	.a2{
		background-color: rgb(255, 248, 226);
	}
	.a3{
		background-color: rgb(240, 240, 240);
	}

	.contact-card{
		background-color: #fff;
		padding: 13px;
		margin: 12px;
		border: 1px solid #e1e1e1;
		border-radius: 7px;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
	}

	.contact-card1{
		background-color: #fff;
		padding: 13px;
		margin: 12px;
		border: 1px solid #e1e1e1;
		border-radius: 7px;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
	}

	.contact{
		background-color: #f2f2f2;
	}

	.btn-prim{
		color: #2b2b2b !important;
		background-color: #e2e2e2;
		border: 1px solid #949494;
		padding: 8px;
	}
.btn-prim:hover{
	
	background-color: #cecece;
}
	.form--area{
		padding: 25px;
		background-color: #fff;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
	}

	.sustainable{
		background: #f2f2f2;
	}
	.sus-img{
		box-shadow: 10px 10px #6a6a6a;
	}

	/* .pr-cardd{
		text-align: center !important;
		img{
			height: 200px;
		}
		h6{
			background-color: rgb(255, 236, 199);
			padding: 6px;
			color: #303030;
		}
	} */


	.pr-card{
		text-align: center !important;
		img{
			height: 200px;
		}
		h6{
			background-color: rgb(255, 236, 199);
			padding: 6px;
			color: #303030;
		}
	}

	.inp-f{
		PADDING: 4px;
		border-radius: 3px;
		border: 1px solid #9f9f9f;
		width: 70%;
		background: #fff;
	}

	.btn-f{
		background-color: #ece1cc;
		padding: 4px;
		color: #3a3a3a;
		margin-top: 9px;
		border: 1px solid #fff;
	}

	.btn-f:hover{
		background-color:#d9ceba ;
		transform: rotate(8deg);
	}

	.get-btn{

	}

	@keyframes rotateLR {
		0%, 100% {
			transform: rotate(-5deg);
		}
		50% {
			transform: rotate(5deg);
		}
	}
	.animate-rotateLR {
		animation: rotateLR 1.5s infinite linear;
		background-color: #fd8332;
		padding: 2px;
		color: #fff !important;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	}

	.animate-rotateLR:hover {
		animation: none;
	}

	.h-card{
		border-end-end-radius: 20%;
		border-top-left-radius: 20%;
		background-color: #fff;
	}

	.box-shadow{
		box-shadow: rgb(153, 153, 153) 0px 30px 60px -12px inset, rgba(68, 68, 68, 0.993) 0px 18px 36px -18px inset;
		border-radius: 4px;
	   }

	   .happy{
		background: linear-gradient(#faf0e6,rgb(255, 226, 171,0.5)),url(../images/creatives/getty.jpg);
	   }

	   .pbg{
		background: url(../images/creatives/getty-1.jpg);
	   }

	   .feature-area {
		background: linear-gradient(rgba(255, 255, 255, 0.49),rgba(255,255,255,0.49)),url(../images/creatives/getty-1.jpg);
	   }

	   .quote-link{

	

        .quote-btn:hover {
            background-color: #fffefe;
            transform: translateY(-2px);
			color: #4d4d4d !important;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(2px);
        }

        .modal-content {
            background-color: white;
            width: 90%;
            max-width: 450px;
            margin: 50px auto;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            animation: slideIn 0.3s ease-out;
        }

        @keyframes slideIn {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 28px;
            cursor: pointer;
            color: #3e3e3e;
            transition: color 0.2s;
        }

        .close-btn:hover {
            color: #e74c3c;
        }

        .enquiry-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 24px;
            text-align: center;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        label {
            margin-bottom: 8px;
            color: #444;
            font-size: 14px;
            font-weight: 500;
        }

        input, textarea {
            padding: 12px;
            border: 1px solid #e0e0e0 !important;
            border-radius: 8px;
            font-size: 14px;
            background-color: #fafafa;
            transition: border-color 0.2s;
        }

        input:focus, textarea:focus {
            outline: none;
            border-color: #ff9c4a;
            box-shadow: 0 0 5px #ffd9ba;
        }

        textarea {
            resize: vertical;
            min-height: 100px;
        }

        .submit-btn {
            padding: 12px;
            background-color: #ff9c4a;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.2s;
        }

        .submit-btn:hover {
            background-color: #ff8e32;
        }

	   }

	   .table-container {
		width: 100%;
		
		background: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	}
	table {
		width: 100%;
		border-collapse: collapse;
		text-align: left;
	}
	th, td {
		padding: 10px;
		border-bottom: 1px solid #ddd;
	}
	th {
		background-color: #ff9c4a;
		color: white;
		text-transform: uppercase;
	}
	tr:nth-child(even) {
		background-color: #f2f2f2;
	}

	.blog-content{
		background-color: rgb(255, 255, 255); 
		padding: 10px;
		text-align: center;
		border: 1px solid #c5c5c5;
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
	}
	.blog-bg{
		background:linear-gradient(rgba(255, 174, 0, 0.4),rgba(250, 223, 137, 0.4)),url(../images/creatives/7xm.xyz810178.jpg) ;
		background-repeat: repeat;
		
	}
	.btn-prim{
		background-color: #cccccc;
		padding: 4px;
		color: #fff1d4;
	border-radius: 3px;
	border: 1px solid #979797;
	margin-top: 15px;
	}
	.btn-prim:hover{
		background-color: transparent;
		color: #333333;
		
	}
	.img-skew:hover{
	
	
	transform: scale(1.1);
	transition: transform .5s linear;
	}
	.blogg{
		overflow: hidden;
	}
	
	.blog-d-bg,.gallery-bg{
		background:linear-gradient(rgba(255, 255, 255, 0.562),rgba(255, 255, 255, 0.479)) ,url(../images/creatives/image221.png);
		background-repeat: repeat;
	}


	
   
/***** Gallery Section *****/
.project-block-one {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
   /* Set a fixed height for uniform image boxes */
}

.image-box {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	border-radius: 20px;
}

.image-box img {
    max-width: 100%;
    max-height: 100%;
    transition: transform 0.3s ease;
    object-fit: cover; /* Ensures image fits inside the box */
}

.project-block-one:hover .image-box img {
    transform: scale(1.1);
}

.view-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-block-one:hover .view-btn {
    opacity: 1;
}

.view-btn a {
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    padding: 12px;
    border-radius: 50%;
    font-size: 20px;
}

.view-btn a:hover {
    background: #000;
}
/***** End Gallery Section *****/

.pr-card{
	
	img{
		padding: 0px;
	}
}

.product-page{
	background: url(../images/creatives/7xm.xyz514276.jpg);
}

.mySwiper33 .swiper-slide {
	width: 25%;
	height: 100%;
	filter: brightness(20%);
  }

  .mySwiper33 .swiper-slide-thumb-active {
	filter: brightness(100%);
  }

/*********/.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(41, 41, 41, 0.5);
	z-index: 1;
}

.modal-content {
	background-color: white;
	margin: 10% auto;
	padding: 20px;
	width: 70%;
	max-width: 500px;
	position: relative;
	border-radius: 36px;
	
}

.close {
	position: absolute;
	right: 10px;
	top: 5px;
	font-size: 24px;
	cursor: pointer;
}

.enquiry-form input,
.enquiry-form textarea {
	width: 100%;
	margin: 10px 0;
	padding: 8px;
	box-sizing: border-box;
	color: #353535;
	border: 1px solid #d1d1d1 !important;
}

.enquiry-form button {
	background-color: #ff9c4a;
	color: white;
	padding: 10px 20px;
	border: none;
	cursor: pointer;
}

.open-btn {
	padding: 10px 20px;
	cursor: pointer;
	background-color: #ff9c4a;
}
.process{
	background: linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.4)),url(../images/creatives/7xm.xyz514276.jpg);
}


/* blogs ========================================> */


.blogs-section {

	background-color: #ffffff;
		.blogs-box {
			
	
			img {
				width: 100%;
			}
		}
	
		.blogs-content {
			padding: 20px 10px;
			background: rgb(239, 239, 239);
	
			h4 {
				color: #585858;
				padding-bottom: 10px;
			}
	
			p {
				font-size: 14px;
				line-height: 20px;
			}
		}
	
	
		.pf-ebtn {
			margin-top: 20px;
		}
	}
	
	
	.blogssection .swiper-button-next {
		top: var(--swiper-navigation-top-offset, 10%) !important;
	
	}
	
	.blogssection .swiper-button-prev {
		top: var(--swiper-navigation-top-offset, 10%) !important;
		color: var(--swiper-navigation-color, var(--swiper-theme-color));
	}
	
	.blogssection .swiper-button-prev {
		left: inherit !important;
		right: 70px !important;
		width: 41px !important;
		height: 41px !important;
	
	
	}
	
	.blogssection .swiper-button-next {
		right: 20px !important;
		left: auto;
		width: 41px !important;
		height: 41px !important;
	
	}
	
	.blogssection .swiper-button-prev:after {
		content: "\f104" !important;
		font-family: FontAwesome !important;
		font-size: 24px !important;
		color: rgba(0, 0, 0, 0.5) !important;
	}
	
	.blogssection .swiper-button-next:after {
		content: "\f105" !important;
		font-family: FontAwesome !important;
		font-size: 24px !important;
		color: rgba(0, 0, 0, 0.5) !important;
	}
	
	.blogssection {
		padding: 20px;
	}

	.common-btn{
		background:#ff8e32 !important;
		color: #ffffff;
		padding: 5px;
		border: 1px solid #747474;
		
	}
	.common-btn:hover{
		background-color: #ffffff !important;
		color: #878787;
	}

	.mySwiper69{
		.pr-card{
			width: auto;
			
		}
}

.in{
	input{
		width: 100%;
		
	}
}



/***************************************************************/
.content {
	line-height: 1.6;
	margin-bottom: 20px;
}

.read-more-btn {
	color: #007bff;
	cursor: pointer;
	margin-top: 10px;
}

/* Mobile view (≤768px) */
@media (max-width: 768px) {
	.full-text {
		display: none;
	}
	.short-text {
		display: block;
	}
	.read-more-btn {
		display: inline-block;
	}
}

/* Desktop view (>768px) */
@media (min-width: 769px) {
	.full-text {
		display: block;
	}
	.short-text {
		display: none;
	}
	.read-more-btn {
		display: none;
	}
}

/***************************************************************/

.wrapper {
	width: 100%;
	margin: auto;
	overflow: hidden;
	background: white;
	padding: 20px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.top-banner {
	background: #2E8B57;
	color: white;
	padding: 20px 0;
	text-align: center;
	font-size: 24px;
}
.key-point {
	font-size: 22px;
	font-weight: bold;
	color: #ff8e32;
}
.info-box {
	background: #fff7ef;
	padding: 15px;
	margin: 10px 0;
	border-left: 5px solid #ff8e32;
}


.c-blue {
    background-color: #ff8e32;
    color: #fff;
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

.c-grey {
    background-color: #2B3C43 !important;
    color: #fff;
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

.box-shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.y-btn {
    border: 2px solid #cccccc;
    padding: 10px;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.video-section {
	position: relative;
	width: 100%;
	height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	overflow: hidden;
}

.background-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.gradient-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 30%, rgba(255, 102, 0, 0.8));
	clip-path: polygon(0 0, 100% 20%, 100% 100%, 0% 80%);
}

.video-content {
	text-align: center;
	max-width: 800px;
	padding: 20px;
	z-index: 2;
	animation: slideUp 1.5s ease-in-out;
}

@keyframes slideUp {
	from { opacity: 0; transform: translateY(50px); }
	to { opacity: 1; transform: translateY(0); }
}

.text-animation {
	font-size: 40px;
	font-weight: bold;
	display: inline-block;
	color: #ff6600;
}

.main-heading {
	font-size: 55px;
	font-weight: bold;
}

.scrolling-text {
	position: absolute;
	bottom: 10%;
	left: 0;
	width: 100%;
	font-size: 2rem;
	font-weight: bold;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.21);
	white-space: nowrap;
	overflow: hidden;
	animation: marqueeText 10s linear infinite;
}

@keyframes marqueeText {
	from { transform: translateX(100%); }
	to { transform: translateX(-100%); }
}

/* Section Styling */
.eco-section {
	background-color: #f9f9f9;
    padding: 80px 5%;
   
    color: #333;
    border-radius: 12px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
}

/* Title Styling */
.section-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 40px;
    color: #222;
    text-transform: capitalize;
}
.section-title span {
    color: #d49456;
}

/* Content Box */
.content-box {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

.intro-text {
    font-size: 1.2rem;
    font-weight: 400;
    color: #555;
    margin-bottom: 20px;
}

/* List Styling */
.info-list {
    padding: 0;
    list-style: none;
}
.info-list li {
    background: #f8f8f8;
    padding: 15px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    color: #444;
    border-left: 5px solid #d49456;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 10px;
}

/* Image Styling */
.image-box {
    text-align: center;
}
.image-box img {
    width: 100%;
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
}

/* Responsive Design */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    .content-box {
        padding: 20px;
    }
    .info-list li {
        font-size: 0.95rem;
    }
}


.first { 
	background: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0,0,0,0.3)),url(../images/extras/updates.jpg) no-repeat center center fixed;
	background-size: cover;
	color: #333;

	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.eco-container {
	max-width: 1200px;
	margin: 50px auto;
	padding: 20px;
	background: rgba(255, 255, 255, 0.634);
	backdrop-filter: blur(20px);
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 30px;
	overflow: hidden;
	backdrop-filter: blur(8px);
}

.eco-text-section {
	flex: 1;
	padding: 40px;
	color: #222;
}

.eco-text-section h2 {
	font-size: 40px;
	font-weight: 600;
	margin-bottom: 15px;
	text-transform: uppercase;
	color: #0a0a0a;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.499);

	.green{
		color: rgb(0, 200, 0);
		text-shadow: 2px 2px 4px rgba(253, 253, 253, 0.6);
	}
}

.eco-text-section p {
	font-size: 16px;
	line-height: 1.6;
	color: #0a0a0a;
}

.eco-info-box {
	background: rgba(255, 255, 255, 0.67);
	padding: 15px;
	margin-top: 15px;
	border-left: 4px solid #ff6600;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	border-radius: 8px;
}

.eco-info-box strong {
	color: #ff6600;
	font-size: 18px;
}

.eco-image-section {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	
}

.eco-image-section img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media (max-width: 992px) {
	.eco-container {
		flex-direction: column;
		text-align: center;
	}
	.eco-text-section {
		padding: 20px;
	}
	.eco-image-section {
		padding: 0;
	}
}

/* Section Background */
.recognized-section {
	background: #f1f1f1; /* Light Grey Background */
	padding: 40px 0;
  }
  
  /* Title Styling */
  .section-title {
	font-size: 38px;
	font-weight: bold;
	color: #333;
	border-bottom: 3px solid var(--primary);
	padding-bottom: 5px;
	line-height: 3rem;  }
  
  /* Paragraph Styling */
  .description {
	font-size: 18px;
	line-height: 1.8;
	color: #555;
	margin-bottom: 20px;
  }
  
  /* Feature List */
  .feature-list ul {
	list-style: none;
	padding: 0;
	margin-right: 30px;
  }
  
  .feature-list ul li {
	font-size: 17px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
  }
  
  .feature-list i {
	color: var(--primary);
	margin-right: 8px;
	font-size: 20px;
  }
  
  /* Image Styling */
  .elevator-image {
	width: 100%;
	border-radius: 10px;
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease-in-out;
  }
  
  .elevator-image:hover {
	transform: scale(1.05);
  }
  
  .e-commerce-video {
    display: flex
;
    align-items: center;
    justify-content: center;
}
.e-commerce-video, .packaging-video {
    height: 550px;
    width: 100%;
    object-fit: cover;
    position: relative;
}

.e-commerce-video, .packaging-video {
    height: 550px;
    width: 100%;
    object-fit: cover;
    position: relative;
}

.bold-title {
    font-size: 36px;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 810px;
    text-align: center;
    line-height: 46px;
    display: flex
;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.e-commerce-video:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 106, 0, 0.5);
    width: 100%;
    height: 100%;
}

.form-row {
    display: -ms-flexbox;
    display: flex
;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

.career-form{
	padding: 30px;
	background: #fff;
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}


.product-container {
	background: linear-gradient(rgba(9, 9, 9, 0.444),rgba(0, 0, 0, 0.41)),url(../images/creatives/blue-bg.jpg);
	background-repeat: repeat;
	background-size: contain;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	padding: 40px 0;
}

.product-item {
	text-align: center;
	width: 100px; /* Adjust size as needed */
}

.product-item img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid transparent;
	transition: all 0.3s ease-in-out;
}

.product-item img:hover {
	border:5px solid #ff8e32; /* Highlight effect */
	transform: scale(1.1);
}

.product-title {
	font-size: 13px;
	font-weight: bold;
	margin-top: 8px;
	color: #fff;
}


.hero {
	position: relative;
	width: 100%;
	height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	overflow: hidden;
}
.video {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	z-index: -1 !important;
}
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 30%, rgba(255, 102, 0, 0.8));
	clip-path: polygon(0 0, 100% 20%, 100% 100%, 0% 80%);
}
.hero-content {
	text-align: center;
	max-width: 800px;
	padding: 20px;
	z-index: 2;
	animation: fadeInUp 1.5s ease-in-out;
}
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(50px); }
	to { opacity: 1; transform: translateY(0); }
}
.changing-text {
	font-size: 40px;
	font-weight: bold;
	display: inline-block;
	color: #ff6600;
}
.hero-text {
	font-size: 32px;
	font-weight: bold;
}
.moving-text {
	position: absolute;
	bottom: 10%;
	left: 0;
	width: 100%;
	font-size: 2rem;
	font-weight: bold;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.2);
	white-space: nowrap;
	overflow: hidden;
	animation: moveText 10s linear infinite;
}
@keyframes moveText {
	from { transform: translateX(100%); }
	to { transform: translateX(-100%); }
}