@charset "utf-8";
 @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {

	--body-font: "Plus Jakarta Sans", sans-serif;

	--body-color: #fff;

	--primary-color: #DFB76B;

	--secondary-color: #E5CE71;

	--tertiary-color: #B68323;

	--quaternary-color:#866534;	

	--royal-black:#161616;

	--black: #000;

	--white: #fff;

	--grey: #DCDDDE;	

	--grey-light: #F8F8F8;

	--grey-dark: #6D6D6D;		 	 

	--font-thin:200;

	--font-light:300;

	--font-mediumm:400;

	--font-bold:600;

	--heading-font:"Cinzel", serif;

}



body {

	font-family: var(--body-font);

	font-size: 16px;

	font-style: normal;

	line-height: 24px;

	/*letter-spacing: -.1em;*/

	font-weight: var(--font-mediumm);

	color: var(--body-color);

	text-decoration: none;

	margin: 0px;

	-webkit-font-smoothing: antialiased;

	padding: 0;

	background: var(--royal-black); 	 

	overflow-x: hidden; 

}



 

/* *********Scrollbar Styling *************/



 



html {

	scroll-behavior: smooth;

	overflow-x:hidden;

}



* {

	-webkit-box-sizing: border-box;

	-mox-box-sizing: border-box;

	box-sizing: border-box;

}

 



::selection {

	background: var(--primary-color);

	/* Safari */

	color:var(--white);

}



::-moz-selection {

	background: var(--primary-color);

	/* Firefox */

	color:var(--white);

}



a {

	color: var(--body-color);

	text-decoration: none;

	transition: all 0.4s ease;

}



a:hover {

	color: var(--primary-color);

}



p {

	margin: 0px 0 20px 0;

	clear: left;

	padding: 0;

	font-weight: normal;

	font-size: 100%;

}



h1,

h2,

h3,

h4,

h5,

h6 {

	margin: 0 0 10px 0;

	padding: 0;

	font-weight: normal;

}



.hr {

	margin: 30px 0;

	height: 1px;

	border: 0;

	border-top: 1px solid rgba(255, 255, 255, 0.2);

	display: block;

	width: 100%;

	height:1px;

	position: relative;

}

 

img {

	border: 0;

	transition: all 0.4s ease;

}



a img {

	border: 0;

}



/*-----------text styles------------*/





.text-white {

	color: var(--white) !important;

}



.text-black {

	color: var(--black) !important;

}



.text-primary {

	color: var(--primary-color) !important;

}

  

 .text-secondary {

	color: var(--primary-color) !important;

}

 

.text-center {

	text-align: center;

}

.text-right{

	text-align:right;

}



.text-justify {

	text-align: justify;

}



 



/*-----------background styles------------*/

 

.bg-gradient{

	background-image: linear-gradient(to top right, var(--primary-color), var(--secondary-color));

	color:var(--white);	 

}

.bg-primary {

	background: var(--primary-color);

	 

}

.bg-secondary {

	background: var(--secondary-color); 

}



.bg-tertiary {

	background: var(--tertiary-color);		 

}

.bg-quaternary {

  background: var(--quaternary-color);

}

.bg-grey {

	background: var(--grey);

}

.bg-grey-light {

	background: var(--grey-light);

 }



#dust-canvas {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 99999; /* Highest z-index to be on top */

    pointer-events: none; /* Allows clicks to pass through to links underneath */

}

 

/*************** PRELOADER ***************/

 

.loader {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  background-color: var(--black);

  z-index: 999999999;

  display: flex;

  justify-content: start;

  align-items: start;

  gap: 15px;

  transition: 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.startplay {

  cursor: pointer;

}





.loaded {

  transition-delay: 0.5s;

  left: 100%;

}

.loaded .loaderBar,

.loaded .loaderText {

  transition-delay: 0.5s;

  transition: 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  opacity: 0;

  left: 100px;

}

.loaderBar {

  width: 30px;

  height: 0;

  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  border: 0;

  border-right: solid 1px var(--secondary-color);

}

.loaderText {

  height: 0;

  font-size: 50px;

  font-weight: 300;

  font-family:var(--heading-font);

  background: linear-gradient(to top right, var(--secondary-color), var(--quaternary-color));

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  display: flex;

  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  flex-direction: column;

  line-height: 1;

  justify-content: end;

}

 



 

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



.container {

	 width:1400px;

	 margin:0 auto;

}

.fullheight {

	width: 100%;

	height:100vh;

	overflow:auto;

} 

.fullwidth {

	width: 100%;

	display: block;

} 



.img-rounded{

	border-radius: 50%;

	overflow:hidden;

	}

.corner-radius{

	border-radius: 50%;

	}	

 

/*************HOVER EFFECT*******/



.hover-effect{

	width:100%;

	position:relative;

	overflow:hidden;

	/*border-radius: 16px;*/ 

}



 .hover-effect i{

    width:50px;

    height:50px;

    background-color:var(--primary-color);

	border-radius: 50%;

    color:#fff;

    position:absolute;

    left:50%;

    top:-100px;

    z-index:1;

    line-height:50px;

    text-align:center;

    margin:0 0 0 -25px;

    transition: all 0.4s ease;

}

 .hover-effect:hover i{

    top:50%;

    margin:-25px 0 0 -25px;

}



 .hover-effect i:hover{

	background-color:var(--secondary-color);

	}



.hover-effect img {

 	display:block;

  	width:100%;

	-webkit-filter: none;

    filter: none;

 	-webkit-transition: all .5s;

    transition: all .5s;

}

.hover-effect:hover img {

     -webkit-transform: scale(1.09, 1.09);

    transform: scale(1.09, 1.09);

    -webkit-filter: brightness(70%);

    transition: all 0.4s ease;

	/*-webkit-filter: brightness(70%);*/

	filter: grayscale(60%);

	-webkit-filter: grayscale(60%);

}





 .hover-effect:after {

  background:#FFF;

  width:0;

  height: 0;

  position: absolute;

  left: 50%;

  bottom: 50%;

  content: '';

  opacity: 0.7;

  transition: all 0.4s ease;

}



.hover-effect:hover:after {

	opacity: 0.1;

	width: 100%;

  	height: 100%;

	left: 0;

    bottom: 0;

}

 

section {

	width: 100%;

	display:block;

	position: relative;

	 

}



.section-spacing{

   padding:150px 0;

 }

.sticky{

 	position: -webkit-sticky !important;

	position: sticky !important;

	top: 100px;

	width:100%; 

}



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

 



 header{

	 width:100%; 

	 position:absolute;

	 left:0;

	 top:0;

	 padding:20px 0;

	 z-index:5;

	 transition: all 0.4s ease;

} 



header.scrolled {

    background-color: rgba(22, 22, 22, 0.9);

    box-shadow: 0 4px 20px rgba(0,0,0,0.5); 

    backdrop-filter: blur(10px);

}





 .logo { 

	width:120px;

	position:relative;

	transition: all 0.4s ease; 

}

 



.logo img {

	width:100%;

	display:block;

}   

 

/***********me-button***********/

 

.me-button {

    position: relative;

	transition: all 0.4s ease;

	text-decoration: none;

    text-align: center;  

    display: inline-block;

	padding:5px 5px 10px 5px;

}

.me-button i{

	margin-right:15px;

	font-size: 16px;

}

.me-button > span {

    display: block;    

    padding:12px 30px;

	border-radius: 50px;	

	border:1px solid rgba(255, 255, 255, 0.1); 

    font-size: 12px;

	text-transform:uppercase;

    font-weight: var(--font-bold);

	color: var(--white);

	transition: all 0.4s ease;

	background-image: linear-gradient(to top right, var(--primary-color), var(--secondary-color));

}

.me-button:hover > span {

    background: linear-gradient(120deg, #CF903D, #E4CD70, #CF903D);

    background-size: 400% 400%;

    -moz-animation: gradient 3s ease-in-out infinite;

    -webkit-animation: gradient 3s ease-in-out infinite;

    animation: gradient 3s ease-in-out infinite;

    color: var(--black);

	

}

 

.me-button span:after {

    content: "";

    position: absolute;			

    left:5%;

    top:40%; 

    width:90%;

    height:20%;

    border-radius: 50px;

	background-color:#FFFC00;

    z-index: -2;

    filter: blur(0);

    transition: filter 0.4s ease;

}



.me-button span:hover:after {

            filter: blur(1.1em);

			 

        }





/* motion */

@-moz-keyframes gradient {

0% {

background-position: 14% 0%;

}

50% {

background-position: 87% 100%;

}

100% {

background-position: 14% 0%;

}

}

@-webkit-keyframes gradient {

0% {

background-position: 14% 0%;

}

50% {

background-position: 87% 100%;

}

100% {

background-position: 14% 0%;

}

}

@keyframes gradient {

0% {

background-position: 14% 0%;

}

50% {

background-position: 87% 100%;

}

100% {

background-position: 14% 0%;

}

}

 

/***********me-button end***********/ 

 

 

 

 

.caps{

	text-transform:uppercase;

}

 

.heading-font{

 	font-family:var(--heading-font);

 }

.body-font{

	font-family:var(--body-font)!important;

} 

.heading{

	font-size:58px;

	line-height:normal;

	font-family:var(--heading-font);

}

.heading span{ 

	 

	

}

.subheading {

	font-size: 28px;

	line-height:normal; 

	font-family:var(--heading-font);

}

 

.subtitle{

	font-size: 22px;

	

 

}

.bold, strong{

	font-weight:var(--font-bold);

}





/* Sound button */

        .sound-btn {

            position: absolute;

            top: 30px;

            right: 90px;

            width:40px;

            height:40px;  

            border: none;

            cursor: pointer;

            /*background-color:transparent;*/

			z-index:999999;

            cursor: pointer;

            background-repeat: no-repeat;

            background-position: center;

            background-size: 50%;

            border-radius: 50%;

			transition: all 0.4s ease;

        }

		.sound-btn:hover{

			background-color:rgba(0,0, 0, 0.5);

		}

        /* Sound ON */

        .sound-btn.unmuted {

           background-image: url(../images/icons/mute.svg);

		   background-color:rgba(255,255, 255, 0.2);

        }



        /* Sound OFF */

        .sound-btn.muted {

            background-image: url(../images/icons/unmute.svg);

			 background-color:rgba(255,255, 255, 0.4);

        }

 /******************VIDEO SETTINGS****************/



.mute-btn {

  position: absolute;

  bottom: 40px;

  right: 40px;

  width:46px;

  height:46px;  

  border: none;

  cursor: pointer;

  background-color:transparent;

}



.icon, .sound-icon{

  width:46px;

  height:46px;

  border:1px solid var(--white);

  border-radius: 50%;

  background-image: url(../images/icons/unmute.svg);

  background-size:50%;

  background-repeat: no-repeat;

  background-position: center center;

  transition: all 0.4s ease;

 

}

.sound-icon{

	background-image: url(../images/icons/mute.svg);

	display:none;

}

.icon:hover, .sound-icon:hover{

	background-color:var(--secondary-color);

	border:1px solid var(--secondary-color);

}



/*****************audo controls **********************************/



.music-btn {

            background: rgba(255, 255, 255, 0.25);

            /*backdrop-filter: blur(10px);*/

            width: 40px;

            height: 40px;

            border-radius: 50%;

            cursor: pointer;

            display: flex;

            justify-content: center;

            align-items: center;

            transition: all 0.3s ease;

            outline: none;

			border:0;

			position:absolute;

			top:50px;

			right:50px;

			z-index:99;

}



        .music-btn:hover {

            transform: scale(1.1);

            background: rgba(255, 255, 255, 0.4);

        }



         



/* SVG Icon Styling */

        .music-btn svg {

            width: 100%;

            height: 100%;

            border-radius: 50%;

            fill: none;

            transition: all 0.3s ease;

			background-size:90%;

 			background-repeat: no-repeat;

 			background-position: center center;

        }



        /* Toggle Logic: Show/Hide icons based on 'playing' class */

        .music-btn .icon-sound-on {

            display: none;

			background-image: url(../images/icons/mute.svg);

        }

        .music-btn .icon-sound-off {

           background-image: url(../images/icons/unmute.svg);

		   display: block; /* Shown by default */

        }



        /* When the button has the 'playing' class */

        .music-btn.playing .icon-sound-on {

            display: block;

            animation: pulse 1.5s infinite;

        }

        .music-btn.playing .icon-sound-off {

            display: none;

        }



        .music-btn.playing {

            box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);

            background: rgba(255, 255, 255, 0.5);

        }



/* Perfume Music Button - Inside Content Section */

.perfume-music-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 24px;

    background: rgba(206, 142, 60, 0.2);

    border: 1px solid var(--primary-color);

    color: var(--body-color);

    font-family: var(--body-font);

    font-size: 14px;

    font-weight: var(--font-bold);

    cursor: pointer;

    transition: all 0.3s ease;

    margin: 15px 0 25px 0;

    border-radius: 4px;

    outline: none;

}



.perfume-music-btn:hover {

    background: rgba(206, 142, 60, 0.4);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(206, 142, 60, 0.3);

}



.perfume-music-btn i {

    font-size: 16px;

    transition: transform 0.3s ease;

}



.perfume-music-btn.playing {

    background: rgba(206, 142, 60, 0.5);

    border-color: var(--secondary-color);

}



.perfume-music-btn.playing i {

    transform: scale(1.2);

}



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

.overlap-shade{

	width:100%;

	height:100%;

	position:absolute;

	left:0;

	top:0;

	background-color:rgba(0, 0, 0, 0.3);

	z-index:2;

}

.hero-section{

	position:relative;

	z-index:0;

}





.video-outer{

	width:100%;

	height:100vh;

	position:relative;

}

.video-wrap{

	width: 100%;

	height: 100%;

	background:var(--royal-black);

	display: flex;

	align-items: center;

	justify-content: center;

}

.video-content{

	width:100%;

	height:100vh;

	position:relative;

	}

	

/*.video-wrap:before{

	width:100%;

	height:100%;

	position:absolute;

	left:0;

	top:0;

	content:'';

	z-index:2;

	background-color:rgba(0, 0, 0, 0.2);

}*/

 video {

    /*position: absolute;*/

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.menu-video {

    position: absolute;

    width: 100%;

    height: 100%;

	left:0;

	top:0;

	z-index:-1;

    object-fit: cover;

	overflow:hidden;

}

.menu-video:before{

	width:100%;

	height:100%;

	position:absolute;

	left:0;

	top:0;

	content:'';

	z-index:1;

	background-color:rgba(0, 0, 0, 0.5);

	}

	

.story-video{

	width: 100%;

	height: 100%;

	position:absolute;

	left:0;

	top:0;

	z-index:-1;

}

.story{

	background-color:var(--royal-black);

	text-align:center;

	height:100vh;

	width:50%;

	display:flex;

	text-align:center;

	flex-wrap: wrap;

	justify-content: center;

	align-items: center;

	flex-direction:column;

	padding:50px 80px;

}	

	

 /*************over content***********************/

 

 .content-section{

	position:absolute;

	left:0;

	top:0;

 	z-index:9;

	width:100%;

	height:100vh;

	display: flex;

	align-items: center;

	justify-content: center;

 }

 

 .brand-info{

 	padding:16px;

	border:6px solid var(--tertiary-color);

 

}

 .brand-content{

	width:470px;

 	height:470px;

	padding:10px 40px;

	display: flex;

	align-items: center;

	text-align:center;

	justify-content: center;

	outline: 1px solid var(--tertiary-color);

    outline-offset: 8px;

	flex-wrap: wrap;

	background-color:rgba(0, 0, 0, 0.4);

	background-image: url(../images/backgrounds/pattern.svg);

 	/*background-repeat: no-repeat;

	background-position: center center;

	-moz-background-size: cover;

	-webkit-background-size: cover;

	-o-background-size: cover;

	background-size: cover; */

	transition: all 0.4s ease;

}

 .brand-content:hover{

 	background-color:rgba(0, 0, 0, 0.9);

 }

 .brand-content h2{

	font-size:58px;

	line-height:60px;

	font-family:var(--heading-font);

}

 .brand-content h3{

	 text-align:center;	 

	 margin:0;

}

 .brand-content h3 span{

	background-image: linear-gradient(to top right, #FFEA77, #CE8E3C, #E5CE71);

    color: transparent;

    background-clip: text;	 

	display:inline-block;

	border-top:1px solid #CE8E3C;

	border-bottom:1px solid #CE8E3C;

	padding:10px 0;

	font-size:20px;

	line-height:normal;

	  

}



.the-craft{

	align-items: flex-start;

}
 .craft-heading{
	display:none !important;
}


.the-craft h2{

 	padding:150px 0 0 0;

 	font-size:120px;

 	line-height:120px;

 	font-family:var(--heading-font);

	 

}





 .boxy{

 	padding:60px 50px;

	outline: 1px solid var(--tertiary-color);

    outline-offset: 8px;	 

	background-color:rgba(0, 0, 0, 0.4);

	background-image: url(../images/backgrounds/pattern.svg);

 	background-repeat:repeat;

	background-position: center center;

	 

}

.boxy-normal{	 

	 padding:60px 50px;

}

.border-boxy{

	 border-left:1px solid rgba(255, 255, 255, 0.2);

	 border-right:1px solid rgba(255, 255, 255, 0.2);

}



.border-top{

	 border-top:1px solid rgba(255, 255, 255, 0.2);

 

}

.border-top-bottom{

	border-top:1px solid rgba(255, 255, 255, 0.2);

	border-bottom:1px solid rgba(255, 255, 255, 0.2);

}

 /**********animated line *********/

 

.scroll-down{ 

	width:140px;

	height:130px;

	padding-bottom:10px;

	position: absolute;

	display: flex;

	flex-wrap: wrap; 

	top:50%;

	left: 50%;

	margin:-65px 0 0 -70px;	 

	align-items: flex-end;

	text-align:center;

	justify-content: center;

	font-size:24px;

	line-height:24px;

	text-transform:uppercase;

	overflow: hidden;

	font-family:var(--heading-font);

	z-index:9; 

	background-image: url(../images/icons/crown.svg);

 	background-repeat: no-repeat;

	background-position: center 10px;

	background-size:70px;

	transition: all 0.4s ease;

	 

}

.scroll-down a{

	color:var(--white);

}

.scroll-down a:hover{

	color:var(--white);

	letter-spacing:1px;

	font-size:20px;

}	 

.scroll-down:hover{

	background-position: center top;

}

.scroll-down:after{

	position:absolute;

	width:0;

	height:1px;

	content:'';

	background-color:var(--white);

	left:50%;

	bottom:0;

	z-index:1;

	transition: all 0.4s ease;

} 

 



.scroll-down:hover:after{

	width:100%; 

	left:0;

 

}			

.hscroll-line {

	left: 33%;

	top:10px;

	height: 1px;

	position: absolute;

	overflow: hidden;

    width:100px;

    transform: rotate(90deg);

    transform-origin:50% 50%; 

}





.hscroll-line::before,

.hscroll-line::after {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	content: ""

}



.hscroll-line:before {

	background:rgba(0, 0, 0, 0.2);

}



.hscroll-line::after {

	background:var(--secondary-color);

	animation: move 3s infinite

}



@keyframes move {

	0% {

		transform: translate3d(-200%, 0, 0)

	}

	60% {

		transform: translate3d(100%, 0, 0)

	}

	100% {

		transform: translate3d(100%, 0, 0)

	}

}





/***********key fram animation*******/



.up-down-animation{

	animation: MoveUpDown 8s linear infinite;

}	

@keyframes MoveUpDown {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-45px);

  }

}

@keyframes MoveUpDown2 {

  0%, 100% {

    transform: translateX(0);

  }

  50% {

    transform: translateX(-20px);

  }

}

/* --- ANIMATION CLASSES (Slide + Fade) --- */



/* Base State for Animated Elements */

.anim-el {

    opacity: 0;

    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth easing */

    will-change: transform, opacity;

}



/* Directions (Initial State) */

.from-left {

    transform: translateX(-50px);

}

.from-right {

    transform: translateX(50px);

}

.from-bottom {

    transform: translateY(50px);

}

.from-top {

    transform: translateY(-50px);

}



/* Active State (Triggered by Locomotive Scroll 'is-inview') */

.anim-el.is-inview {

    opacity: 1;

    transform: translate(0, 0);

}



/* Delays for staggered effect */

.delay-1 { transition-delay: 0.1s; }

.delay-2 { transition-delay: 0.2s; }

.delay-3 { transition-delay: 0.3s; }





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



/* --- NEW INTRO SECTION STYLES --- */

.page-section{

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

    padding: 0; /* Remove default padding for full screen */

}



.intro-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.intro-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.6; /* Dim the background for readability */

}



/* Overlay gradient for better text contrast */

/*.intro-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to bottom, rgba(22,22,22,0.8), rgba(22,22,22,0.4), rgba(22,22,22,0.8));

    z-index: 2;

}*/



.intro-content {

    position: relative;

    z-index: 3;

    text-align: center;

    max-width: 800px;

    padding: 0 20px;

}





/***********HOME PAGE SETTINGS**************/



.split{

	width:50%;

	padding:0 100px 0 0;

}



 

.split-bg-right, .split-bg-left{

	width:50%;

	height:100%;

	position:absolute;

	top:0;

	right:0;

	z-index:-1;

	background-repeat: no-repeat;

	background-position: center center;

	-moz-background-size: cover;

	-webkit-background-size: cover;

	-o-background-size: cover;

	background-size: cover; 

}

.split-bg-left{

	right:auto;

	left:0;

}




 /*********responsive img *********/
.desktop-ad{
	display:block !important;
	width:100%;
	}
.mobile-ad{
	display:none !important;
	width:100%;
}
.mobile-img{
	display:none !important;
	width:100%;
	border:1px solid var(--tertiary-color);
}
/**************************/

 
 



 

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

  

.pos-rel{

	position:relative;

}

 

 

.news-widget{

  	padding:20px 0;

  	color:var(--body-color);

  }

 .news-widget h2{

  	font-size:22px;

  	line-height:normal;

 

  } 

.date{

	font-size:14px;

	line-height:14px;

	text-transform:uppercase;

	letter-spacing:1px;

	margin:0 0 15px 0;	

	vertical-align:middle;

}

.date i{

	font-size:16px;

	color:var(--secondary-color);

	vertical-align:middle;

	margin:-5px 10px 0 0; 

}

  .news-style p:last-child{

  	margin:25px 0 0 0;

  }

  /********************services scroller**********************/

  

.display-style{ 

     width: 100%;

	 aspect-ratio: 1 / 1;

     overflow: hidden;	 

	 position:relative;

	 z-index:2;

	 padding:40px;

	 transition: all 0.4s ease;

}

  

.shadow{	   

	  box-shadow: 0px 4px 10px 4px rgba(123, 123, 123, 0.1);  

 }

  

.iconic{

	width:100%;

	display:block;

	position:relative;

	padding:0 20px 0 120px;

	min-height:100px;

}

.iconic:last-child{

	border-bottom:0;

}

.iconic h2{

	font-size: 24px;

	font-family:var(--heading-font-medium);

	margin:0 0 15px 0;

	line-height:30px;

}

.webicon{	

	display: flex;

	justify-content: center;

	align-items: center;

	position:absolute;

	left:0;

	top:0;	

	width:80px;

	height:80px;

	text-align:center;

	color:var(--white);

	font-size:30px;

	vertical-align:middle;

	margin:0;

	padding:15px;

	border-radius:50%;

	/*background-image: linear-gradient(to top, var(--primary-color), var(--secondary-color));*/

	background-color:var(--secondary-color);	 

	transition: all 0.4s ease;

}

.webicon img{

	display:block;

	width:100%;

}

.webicon:hover{

	background-color:var(--primary-color);

}

.iconic p:last-child{

	margin:0;

}





 

  

  

/**********************Reviews**********************/

 

 

.m0-p0{

	margin:0 !important;

	padding:0 !important;

}

/*********whatsa app*/ 

.float{

	position:fixed;

	width:50px;

	height:50px;

	bottom:80px;

	line-height:50px;

	right:20px;

	background-color:#25d366;

	color:#FFF;

	border-radius:50%;

	text-align:center;

    font-size:30px;

	/*box-shadow: 2px 2px 3px #999;*/

    z-index:4;

}

.float i{

	transition: all 0.4s ease;

 

}

.float:hover i{

	transform: rotate(0.12turn);

}

.float:hover{

	color:#FFF;

	 

} 

.float h5 {

    width: 100px;

    top: 8px;

	right:50px;

    background-color:var(--white);

	color:var(--grey-dark);

	 box-shadow: 0px 0px 5px gray;

	line-height:12px;

    border-radius: 5px;

	font-size:12px;

	padding:10px;

	position:absolute;

	z-index:-1;

	margin:0;

	transition: all 0.4s ease;

	opacity:0;

}

.float:hover h5{

	 opacity:9;

	 right:60px;

}

 

/***************breadcrumb***************/



.breadcrumb-container{

	width:100%;

	position:absolute;

	left:0;

	bottom:50px;

	z-index:3;

} 

.breadcrumb-container h2{

	font-family:var(--heading-font);

	line-height:normal;

	font-size:24px;

	margin:0 0 10px 0;

	}

	

.breadcrumb {   

    display: flex;

	color:var(--grey-dark);

	margin:0;

	position:relative;

	z-index:2;

	 

}

 

.breadcrumb ul {

	display: flex;

    flex-wrap: wrap;

    list-style: none;

    margin:0;

	padding:0;

	font-family:var(--heading-font);

    

}



.breadcrumb li {

    margin: 0;

	font-size:12px;

	color:var(--white);

	font-weight:var(--font-bold);

	text-transform:uppercase;

 } 

    

.breadcrumb li:not(:last-child)::after {

    display: inline-block;

    margin: 0 15px;

    /*content: " → "; */

	 content: " / "; 

	 

}

 .breadcrumb a{

   color:var(--white);

}

 .breadcrumb a:hover{

   color:rgba(255, 255, 255, 0.5);	

 

}



.web-icon{

	border-radius: 50%;

	width:70px;

	height:70px;

	overflow:hidden;

	display:inline-flex;

	padding:10px;

	background-image: linear-gradient(to top right, var(--primary-color), var(--secondary-color));

}

.web-icon img{

	width:100%;

	display:block;

}





/******************SHOPPING CART STYLE ********************/



.product-des{

    display: flex;

    flex-wrap: wrap;

	justify-content: space-between;

	padding:10px 0;

	align-items: center;

	line-height:normal;

}



.product-des-start{

	width:35%;

	font-weight:var(--font-bold);

	font-size:20px;

}

 .product-des-end{

	width:60%;

	}

	

 /* Quantity Control Styling */

        .quantity-control {

            display: flex;

            align-items: center;

            background-color:var(--royal-black);

			border:1px solid var(--grey-dark);

            padding: 4px;

            width: fit-content;

            margin-top: 0.75rem;

        }



        .qty-btn {

            width: 32px;

            height: 32px;

            border: none;

            background-color: var(--black);

            color: var(--white);

            font-size:18px;

            cursor: pointer;

            display: flex;

            align-items: center;

            justify-content: center;

            transition: all 0.2s;

            

        }



        .qty-btn:hover {

            background-color: var(--secondary-color);

            color: white;

        }



        .qty-btn:active {

            transform: scale(0.95);

        }



        .qty-input {

            width: 40px;

            text-align: center;

            border: none;

            background: transparent;

            font-weight: 600;

            color: var(--text-main);

            font-size: 1rem;

            margin: 0 4px;

        }



        .qty-input:focus {

            outline: none;

        }



/* Compact Cart Layout */

.cart-layout {

    display: grid;

    grid-template-columns: 1fr 380px;

    gap: 40px;

    margin-top: 40px;

}



/* Cart Items Section */

.cart-items-section {

    flex: 1;

}



.cart-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

    padding-bottom: 15px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}



.cart-header h2 {

    margin: 0;

}



.cart-count {

    color: rgba(255, 255, 255, 0.6);

    font-size: 14px;

}



/* Compact Cart Item Row */

.cart-item-row {

    display: grid;

    grid-template-columns: 80px 1fr 140px 100px 120px 40px;

    gap: 20px;

    align-items: center;

    padding: 20px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    transition: background-color 0.3s ease;

}



.cart-item-row:hover {

    background-color: rgba(255, 255, 255, 0.02);

}



.cart-item-row:last-child {

    border-bottom: none;

}



/* Cart Item Thumbnail */

.cart-item-thumbnail {

    width: 80px;

    height: 80px;

    overflow: hidden;

    border-radius: 7px;

    flex-shrink: 0;

}



.cart-item-thumbnail img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/* Cart Item Info */

.cart-item-info {

    min-width: 0;

}



.cart-item-name {

    font-size: 16px;

    font-weight: var(--font-bold);

    margin: 0 0 5px 0;

    color: var(--white);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.cart-item-variant {

    font-size: 13px;

    color: rgba(255, 255, 255, 0.6);

    margin: 0;

}



.cart-item-price-mobile {

    display: none;

    font-size: 14px;

    color: var(--primary-color);

    margin-top: 5px;

    font-weight: var(--font-bold);

}



/* Cart Item Quantity */

.cart-item-quantity {

    display: flex;

    justify-content: center;

}



.cart-item-quantity .quantity-control {

    margin: 0;

}



/* Cart Item Price */

.cart-item-price {

    text-align: right;

}



.unit-price {

    font-size: 14px;

    color: rgba(255, 255, 255, 0.7);

}



/* Cart Item Total */

.cart-item-total {

    text-align: right;

}



.cart-item-total .item-subtotal {

    font-size: 16px;

    font-weight: var(--font-bold);

    color: var(--white);

}



/* Cart Item Remove */

.cart-item-remove {

    display: flex;

    justify-content: center;

}



.remove-item-btn {

    background: transparent;

    border: none;

    color: rgba(255, 255, 255, 0.5);

    width: 32px;

    height: 32px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 16px;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

}



.remove-item-btn:hover {

    background-color: rgba(255, 0, 0, 0.1);

    color: #ff6b6b;

    transform: scale(1.1);

}



/* Cart Actions Bottom */

.cart-actions-bottom {

    margin-top: 30px;

    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.continue-shopping-link {

    color: rgba(255, 255, 255, 0.7);

    font-size: 14px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: color 0.3s ease;

}



.continue-shopping-link:hover {

    color: var(--primary-color);

}



/* Cart Summary Sidebar */

.cart-summary-sidebar {

    position: sticky;

    top: 100px;

    height: fit-content;

}



.summary-box {

    padding: 30px;

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 7px;

    background-color: rgba(255, 255, 255, 0.05);

}



.summary-box h3 {

    margin: 0 0 25px 0;

}



.summary-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 0;

    font-size: 14px;

}



.summary-label {

    color: rgba(255, 255, 255, 0.7);

}



.summary-value {

    color: var(--white);

    font-weight: var(--font-bold);

}



.summary-row.total-row {

    padding: 20px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    margin-top: 10px;

}



.summary-row.total-row .summary-label,

.summary-row.total-row .summary-value {

    font-size: 18px;

    color: var(--white);

}



.checkout-actions {

    margin-top: 25px;

}



.checkout-btn {

    width: 100%;

    text-align: center;

    justify-content: center;

}



.clear-cart-btn {

    width: 100%;

    padding: 12px 20px;

    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.3);

    color: rgba(255, 255, 255, 0.7);

    font-size: 14px;

    border-radius: 7px;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-family: var(--body-font);

}



.clear-cart-btn:hover {

    background: rgba(255, 255, 255, 0.1);

    border-color: rgba(255, 255, 255, 0.5);

    color: var(--white);

}



.clear-cart-btn i {

    font-size: 14px;

}



.cart-expiry-info {

    margin-top: 15px;

    padding: 10px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 7px;

    text-align: center;

}



.cart-expiry-info p {

    margin: 0;

    color: rgba(255, 255, 255, 0.6);

    font-size: 12px;

}



/* Empty Cart State */

.empty-cart-state {

    padding: 80px 20px;

    text-align: center;

}



.empty-cart-icon {

    margin-bottom: 30px;

}



.empty-cart-state h2 {

    margin-bottom: 20px;

}



.empty-cart-state p {

    margin-bottom: 30px;

    color: rgba(255, 255, 255, 0.7);

}



/* Responsive Cart Layout */

@media (max-width: 1024px) {

    .cart-layout {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    

    .cart-summary-sidebar {

        position: static;

        order: -1;

    }

}



/* Checkout Page Styles */

.checkout-layout {

    display: grid;

    grid-template-columns: 1fr 400px;

    gap: 40px;

    margin-top: 40px;

}



.checkout-form-section {

    flex: 1;

}



.checkout-form-section h2 {

    margin-bottom: 30px;

    padding-bottom: 15px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}



.form-section {

    margin-bottom: 40px;

}



.form-section h3 {

    margin-bottom: 20px;

    color: var(--white);

    font-size: 18px;

    font-weight: var(--font-bold);

}



.checkout-form textarea.fieldset {

    resize: vertical;

    min-height: 100px;

    font-family: var(--body-font);

    height: auto;

    padding: 18px 20px;

    line-height: 1.5;

}



.checkout-actions-form {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 40px;

    padding-top: 30px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.back-to-cart-link {

    color: rgba(255, 255, 255, 0.7);

    font-size: 14px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: color 0.3s ease;

}



.back-to-cart-link:hover {

    color: var(--primary-color);

}



.checkout-summary-sidebar {

    position: sticky;

    top: 100px;

    height: fit-content;

}



.checkout-items-list {

    margin-bottom: 20px;

    max-height: 400px;

    overflow-y: auto;

}



.checkout-item {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    padding: 15px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.checkout-item:last-child {

    border-bottom: none;

}



.checkout-item-info {

    display: flex;

    gap: 15px;

    flex: 1;

}



.checkout-item-thumb {

    width: 60px;

    height: 60px;

    overflow: hidden;

    border-radius: 7px;

    flex-shrink: 0;

}



.checkout-item-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.checkout-item-details {

    flex: 1;

    min-width: 0;

}



.checkout-item-name {

    font-size: 14px;

    font-weight: var(--font-bold);

    margin: 0 0 5px 0;

    color: var(--white);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.checkout-item-variant {

    font-size: 12px;

    color: rgba(255, 255, 255, 0.6);

    margin: 0 0 5px 0;

}



.checkout-item-qty {

    font-size: 12px;

    color: rgba(255, 255, 255, 0.5);

}



.checkout-item-price {

    font-size: 16px;

    font-weight: var(--font-bold);

    color: var(--white);

    text-align: right;

}



/* Responsive Checkout Layout */

@media (max-width: 1024px) {

    .checkout-layout {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    

    .checkout-summary-sidebar {

        position: static;

        order: -1;

    }

    

    .checkout-actions-form {

        flex-direction: column;

        gap: 20px;

        align-items: stretch;

    }

    

    .back-to-cart-link {

        text-align: center;

    }

    

    .sendbutton {

        width: 100%;

    }

}



@media (max-width: 768px) {

    .cart-item-row {

        grid-template-columns: 60px 1fr;

        gap: 15px;

        padding: 15px 0;

    }

    

    .cart-item-thumbnail {

        width: 60px;

        height: 60px;

    }

    

    .cart-item-price,

    .cart-item-total,

    .cart-item-quantity {

        grid-column: 2;

        text-align: left;

        margin-top: 10px;

    }

    

    .cart-item-price {

        order: 1;

    }

    

    .cart-item-quantity {

        order: 2;

    }

    

    .cart-item-total {

        order: 3;

    }

    

    .cart-item-remove {

        position: absolute;

        top: 15px;

        right: 0;

        grid-column: 2;

    }

    

    .cart-item-row {

        position: relative;

    }

    

    .cart-item-price-mobile {

        display: block;

    }

    

    .unit-price {

        display: none;

    }

    

    .cart-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

    

    .summary-box {

        padding: 20px;

    }

}



/*************** footer CSS ***************/

 

footer {

	color:var(--white);

	border-bottom:1px solid rgba(255, 255, 255, 0.2);

	border-top:1px solid rgba(255, 255, 255, 0.2);

	font-size:14px;

}



footer a {

	color:var(--white);

}

 footer a:hover  {

	color:rgba(255, 255, 255, 0.5);

}  

 

 .footer-left{

 	width:50%;

	padding:50px 50px 50px 0;

 }

 .footer-right{

	 width:50%;

	 border-left:1px solid rgba(255, 255, 255, 0.2);

	 padding:50px 0 50px 50px;

	 display:flex;

	 justify-content: space-between;

	 

 }



.menu-col{

	width:50%;

	justify-content: space-between;

	display:flex;

	gap:0 20px;

}

.address-col{

		width:30%;

} 

 

 .footer-col{

}



 .footer-col ul,  .footer-col ul li{

 	list-style:none;

	margin:0;

	padding:0;

	

 } 

 .footer-col ul li a{

 	padding:8px 0;

	display:block;

	line-height:normal;

}

.footer-logo{

	margin-bottom:20px;

}

.footer-logo img{

	width:120px;

	display:inline-block;

}

 

.lower-footer{

    display: flex;

    flex-wrap: wrap; 

	justify-content: space-between;

	align-items: center;

	padding:50px 0;

	font-size:12px;

	text-transform:uppercase;

	}

	

.footer-menu{

	display:flex;

	gap:0 15px;

}



.powered{}

.social {

 	padding:10px 0;

	display:flex;

	vertical-align:middle;

 

}

.social a  {

	width:40px;

	height:40px;

	line-height:40px;

	border-radius: 50%;

	text-align:center;

	color:var(--white);

	font-size:18px;

	margin:5px; 

	display:inline-block;

	text-align:center;

}

.social a:hover  {

	color:var(--white);

	background-color:var(--secondary-color);

}



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

 .address-box{

	padding:30px;

	border-radius:20px;

	border-bottom:4px solid var(--secondary-color);

	/*background-image: linear-gradient(to top right, var(--primary-color), var(--secondary-color));*/

	box-shadow: 0px 4px 10px 4px rgba(123, 123, 123, 0.1);  

	} 

.add{

	width:100%;

	position:relative;

	padding:0 0 0 60px;

	min-height:30px;

	margin-bottom:20px;

	font-size:20px; 

	vertical-align:top;

	line-height:24px;

	 

}

 .add h2{

 	font-size:20px;

	line-height:24px;

	font-weight:var(--font-bold);

	color:var(--primary-color);

	margin:0;

	line-height:normal;

 }

.add i{

	width:35px;

	height:35px;

	line-height:35px;

	background-color:var(--tertiary-color);

	border-radius: 5px;

	color:var(--primary-color);

	font-size:14px;

	margin:0;

	position:absolute;

	left:0;

	top:0;

	text-align:center;

 

	

}

 .google-map{

     overflow: hidden;

     width: 100%;

	 height:450px;

	 margin:0;

	 padding:0;

	 outline:none;

	 border:0;

	 display:block;

}



.ext{

	display:inline-block;

	padding-top:10px;

}

.add a{

	color:var(--white);

	}

.add a:hover{

	color:var(--tertiary-color);

	}

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



ul.list {

	margin: 0;

	padding: 0;

	margin-bottom: 30px;

}



ul.list li {

	list-style: none;

	padding:10px 0;

	line-height: normal;

	position: relative;

	margin:0 0 10px 0;

	font-family:var(--heading-font);

	border-bottom:1px solid var(--primary-color);

}

ul.list li:first-child{

	border-top:1px solid var(--primary-color);

}

/* ul.list li:before {

	/*content: "\f111";*/

	/*content: "\f138";*/

	/*content:'';

	position: absolute;

	width:15px;

	height:1px;

	background-image: linear-gradient(to top right, var(--primary-color), var(--secondary-color));

	top: 50%;

	left: 0;

	font-family: "FontAwesome";

	color: var(--primary-color);

	font-size: 16px;

}*/

ul.listing {

	margin: 0;

	padding: 0;

	margin-bottom: 30px;

}



ul.listing li {

	list-style: none;

	margin: 0 0 20px 0;

	padding:0 0 0 30px;

	line-height: normal;

	position: relative;

 

	 

}

 ul.listing li:before {

	/*content: "\f111";*/

	content: "\f138";	 

	position: absolute;

	width:15px;

	height:15px;

	top:0;

	left: 0;

	font-family: "FontAwesome";

	color: var(--primary-color);

	font-size: 16px;

} 



.tint{

	display:inline-block;

	padding:5px 15px;

	line-height:normal;

	border:1px solid var(--primary-color);

	border-radius: 50px;

	font-size:12px;

}

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

 

 

.table-wrap{

	width:100%;

	position:relative;

	display:flex;

	overflow-x:scroll;

} 

table { 

	min-width:100%;

	width:900px;

	border-collapse: collapse; 

	

	}



/* Zebra striping */

tr:nth-of-type(odd) { 

	background: #eee; 

	}



th { 

	background:var(--secondary-color);

	color: var(--white);

	

	}



td, th { 

	padding: 8px 15px !important; 

	border: 1px solid #ccc; 

	text-align: left; 

	font-size: 14px;

	} 



 

 

 

 

/*************** JARALLAX ***************/

.cover {

	position: relative;

	background-repeat: no-repeat;

	background-position: center center;

	-moz-background-size: cover;

	-webkit-background-size: cover;

	-o-background-size: cover;

	background-size: cover;

}

.fix-bg{

	background-attachment:fixed !important; 

}

/*********backgrounds***************/

 
 
 
 .bg1 {

	background-image: url(../images/backgrounds/bg1.jpg);

	background-attachment:fixed;

	}

 

/**********forms**************/

 

/*******custome select ******/



 .select-box {

     appearance: none;

     -webkit-appearance: none;

     background-image: url(../images/icons/dd-arrow.svg);

     background-repeat: no-repeat;

     background-position: right 15px center;

     background-size: 14px;



 

}

 .form-group {

     position: relative;

     margin-bottom: 10px;

}



.form-control {

     width:100%;

	 height: 60px;

     line-height: 60px;

	 border-radius:7px;

     border: none;

     border:1px solid rgba(255, 255, 255 ,0.3);

	 background-color:rgba(255, 255, 255 ,0.2) !important;

     padding: 0 54px 0 20px;

     font-size: 14px;

	 color:var(--white) !important;

	 box-sizing: border-box;

}

 

.form-control option{

	 color:var(--white) !important;

}	

	

 .form-group-select:after {

    /* content: "\f107";

	border-left: 1px solid #ccc;

	font-family: FontAwesome;

	font-size: 12px;

	*/

	 width:20px;

	 height:20px;

	 content:'';

     position: absolute;

     top: 50%;    

     right:20px;

     transform: translateY(-50%);

     background: url(../images/icons/down-arrow.svg) no-repeat center center;

	 background-size:20px;

     z-index: 1;

}

 .form-group-select select {

     -webkit-appearance: none;

     -moz-appearance: none;

     -ms-appearance: none;

     -o-appearance: none;

     appearance: none;

     color: #000;

     cursor: pointer;

     background:transparent;

}

.form-gutter{

	gap:20px 3.5%;

	}

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



/* The Magic Wrapper */

        .input-group {

            display: flex;

            align-items: center;

			border:1px solid rgba(255, 255, 255 ,0.3);

            background-color:rgba(255, 255, 255 ,0.2);

            border-radius: 7px;

            height: 60px;

            box-sizing: border-box;

            transition: all 0.3s ease;

        }



        .input-group:focus-within {

           /* border-color: #ff0000;

            box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);*/

        }



 

        .country-select {

            border: none;

			background-color:transparent;

			padding:18px 20px;

			border-right:1px solid rgba(255, 255, 255 ,0.3);

			font-size: 14px;

            cursor: pointer;

            outline: none;

            color:var(--white);             

            appearance: none; 

            -webkit-appearance: none;

            text-align: left;

            min-width: 100px;

            height: 100%;

            box-sizing: border-box;

        }

	       option{

			color:var(--white);

			background-color:#161616;           

			}

        .country-select:hover {

            

        }



        /* The Phone Number Input */

        .phone-input {

            border: none;

            outline: none;

            border-radius:7px;

			padding:18px 20px;

            font-size: 14px;

            flex-grow: 1; 

            background-color:transparent;

			color:var(--white);             

            width: 100%;

            height: 100%;

            box-sizing: border-box;

        }



        .phone-input::placeholder {

            color: #aaa;

        }

.label{

 	display:block;

	padding:0 0 15px 0;

	margin:0;

	line-height:normal;

	font-size:14px;

	color:rgba(255, 255, 255, 0.3);

 }

.formstyle{}

 

form {

	margin: 0;

	padding: 0;

}



*:focus {

	outline: none;

}



.fieldset {

	width: 100%;

	border-radius: 7px;

	padding: 20px 20px;

	font-size: 14px;

	border: 1px solid rgba(255, 255, 255, 0.3);

	background-color: rgba(255, 255, 255, 0.2);

	color: var(--white);

	display: block;

	margin: 0;


	box-sizing: border-box;

	transition: all 0.3s ease;

}



/* Form Validation Styles */

.fieldset.field-error {

	border-color: rgba(255, 107, 107, 0.6);

	background-color: rgba(255, 107, 107, 0.1);

	box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);

}



.fieldset:focus {

	border-color: var(--primary-color);

	background-color: rgba(255, 255, 255, 0.25);

	outline: none;

	box-shadow: 0 0 0 2px rgba(206, 142, 60, 0.2);

}



.fieldset.field-error:focus {

	border-color: rgba(255, 107, 107, 0.8);

	box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.3);

}



.field-error-message {

	color: #ff6b6b;

	font-size: 12px;

	margin-top: 5px;

	margin-bottom: 10px;

	display: block;

	padding-left: 5px;

}



.form-error-message {

	background: rgba(255, 0, 0, 0.1);

	border: 1px solid rgba(255, 0, 0, 0.3);

	color: #ff6b6b;

	padding: 15px 20px;

	border-radius: 7px;

	margin-bottom: 20px;

	font-size: 14px;

	display: flex;

	align-items: center;

	gap: 10px;

}



.form-error-message i {

	font-size: 16px;

}



.form-control.field-error {

	border-color: rgba(255, 107, 107, 0.6);

	background-color: rgba(255, 107, 107, 0.1);

}



.phone-input.field-error {

	border-color: rgba(255, 107, 107, 0.6);

}



.input-group.field-error {

	border-color: rgba(255, 107, 107, 0.6);

	background-color: rgba(255, 107, 107, 0.1);

}



.input-group.field-error .phone-input {

	border-color: transparent;

}



.form-group.field-error .form-control {

	border-color: rgba(255, 107, 107, 0.6);

	background-color: rgba(255, 107, 107, 0.1);

}





.sendbutton {

	color: var(--white)!important;

	font-size: 20px;

	font-weight:normal;

	letter-spacing:normal;

	padding:15px 40px;	 

	font-style: normal;

	display: inline-block;

	position: relative;

	margin:0;

	border:0;

	outline:none;

	border-radius: 50px; 

	background-image: linear-gradient(to top right, var(--primary-color), var(--secondary-color));

	font-family:var(--heading-medium);

	position:relative;

	transition: all 0.4s ease;

	 

}



.sendbutton:hover {	

	background-image: linear-gradient(to top left, var(--primary-color), var(--secondary-color));

}



.sendbutton i, .link a i{

	margin-right:10px;

	font-size:22px;

	color:var(--white);

	vertical-align:middle;

} 

 



::-webkit-input-placeholder {

	color:var(--body-color);

}



:-moz-placeholder {

	/* Firefox 18- */

	color: var(--body-color);

}



::-moz-placeholder {

	/* Firefox 19+ */

	color: var(--body-color);

}



:-ms-input-placeholder {

	color: var(--body-color);

}

/*************** backToTop *************/

 .progress-wrap {

     position: fixed;

     right: 10px;

     bottom: 10px;

     height: 45px;

     width: 45px;

     cursor: pointer;

     display: block;

     border-radius: 50px;

    /* box-shadow: inset 0 0 0 2px rgb(0 0 0 / 100%);

    */

     z-index: 99;

     opacity: 0;

     visibility: hidden;

     transform: translateY(15px);

     -webkit-transition: all 200ms linear;

     transition: all 200ms linear;

}

 .progress-wrap.active-progress {

     opacity: 1;

     visibility: visible;

     transform: translateY(0);

}

 .progress-wrap::after {

     position: absolute;

     content: "\f062";

     font-family: 'Font Awesome 5 Free';

     font-weight: 900;

     text-align: center;

     line-height: 45px;

     font-size: 20px;

     color:var(--primary-color);

     left: 0;

     top: 0;

     height: 45px;

     width: 45px;

     cursor: pointer;

     display: block;

     z-index: 1;

     -webkit-transition: all 200ms linear;

     transition: all 200ms linear;

}

 .progress-wrap svg path {

     fill: none;

}

 .progress-wrap svg.progress-circle path {

     stroke: var(--black);

     stroke-width: 4;

     box-sizing:border-box;

     -webkit-transition: all 200ms linear;

     transition: all 200ms linear;

}





 

/************************************* 1400px *************************************/



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

.container {

	padding:0 20px;

	width:100%;

	}



}



/************************************* 1280px *************************************/

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

 

}



/************************************* 1024px *************************************/

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



 .section-spacing{

	 padding:40px 0;

 }

 

 

   



}



/************************************* 980px *************************************/

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

 

  .footer-left{

	padding:50px 20px 50px 0;

 }

 .footer-right{	  

	 padding:50px 0 50px 20px;

	 gap:10px;

 }

 

 

}



/************************************* 900px *************************************/

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



.footer-left{

    text-align:center;

	display:flex;

	justify-content: center;

	flex-direction:column;

	}

   .footer-left,  .footer-right{

	width:100%;

	padding:20px 0;

	

 }

 .footer-right{

	 border-left:0;  

	  

 }

}



/************************************* 767px *************************************/

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



body{

	font-size:14px;

}

 

 .heading{

 	font-size:34px;

 }

 

 .subheading{

 	font-size:24px;

 }



.boxy{

 	padding:20px;	 

}

}



/************************************* 640px *************************************/

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

 
  header{
	 
	 position:relative;
	 left:auto;
	 top:auto;
	 padding:10px 0;
	 
}


 .logo { 

	width:100px;
  

}
/********************video*****/

 
.story-video{
    display: flex;
    flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	 
}
.video-outer{
	height:50vh;
}
.full-hto{
	height:100vh;
}
.video-wrap{
	height: 50%;
}
.full-htw{
	height: 100%;
}
.video-content{
	height:auto;
}
/************end video*********/ 
 .content-section{ 
	height:auto;
	position:relative;
	padding:20px;
 

 }
.the-craft {
	display:none;

}

 .craft-heading{
  	font-size:30px;
 	line-height:35px;
	text-transform:uppercase;
	border-bottom:1px solid rgba(255, 255, 255, 0.2);
	padding-bottom:10px;
	margin:0;
	display:inline-block !important;
	text-align:center;
	font-family:var(--heading-font);
	color:var(--primary-color);
	}

.split-bg-right{
	width:100%;		
}

.split{

	width:100%;
	padding:30px;
	background-color:rgba(0, 0, 0, 0.5);
	text-align:center;

}

.story{
	width:90%;
	margin: 25px auto;
	height:auto;
	padding:30px;
	flex-direction:row;
	background-color:rgba(0, 0, 0, 0.5);
	outline: 1px solid rgba(255, 255, 255, 0.2);
    outline-offset: -10px;

}

 

.brand-info{
 	padding:16px;
	border:4px solid var(--tertiary-color);
	background-color:rgba(0, 0, 0, 0.5);
}

 .brand-content{
	width:100%;
 	height:auto;
	padding:20px 20px;

}
 
 .brand-content h2{
	font-size:24px;
	line-height:28px;
}

 .brand-content h3 span{
	font-size:18px;  
}



.footer-left{

	padding:20px 0 0 0;

}

 .footer-right{

	display:flex;

	flex-direction:column;

	padding:0; 

 }

 

 .menu-col, .address-col{	 

	width:100%; 

 

 }

.address-col{

	padding:15px 0;	 

	  

}

.lower-footer{     

	padding:20px 0;

	flex-direction:column;

 

	}

	

.footer-menu, .powered{	 

	display:flex;

	justify-content: center;

	text-align:center;

	gap:0 4px;

}

.border-boxy{

	 border-left:0;

	 border-right:0;

	 border-top:1px solid rgba(255, 255, 255, 0.2);

	 border-bottom:1px solid rgba(255, 255, 255, 0.2);

}



 

.border-top-bottom{

	 

}

  .heading{

 	font-size:24px;

 }

 

 .subheading{

 	font-size:20px;

 }



.product-des{

	padding:8px 0;

 

}



.product-des-start{
	font-size:16px;

}
 .sound-btn {
     top: 15px;
 

}

 /*********responsive img *********/
.desktop-ad{
	display:none !important;
	 
	}
.mobile-ad{
	display:block !important;
}
.mobile-img{
	display:block !important;
 
}
/************backgrounds***********/

 
 
 
 
}

/************************************* 480px *************************************/

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

	 

 

}



/************************************* 360px *************************************/

@media only screen and (max-width: 360px) {}



/************************************* 320px *************************************/

@media only screen and (max-width: 320px) {}
.hero-section.no_video {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 250px;
}
:root {
	--emp--form-bg: #454545;
	--emp--form-border: rgba(255, 255, 255, 0.3);
	--emp--form-item-height: 60px;
	--emp--form-item-space: 20px;
}
.hero-section.no_video .breadcrumb-container {
	position: relative;
	bottom: 0;
}
.title_inline {
	align-items: center;
	display: flex;
	flex-flow: row wrap;
	gap: 15px;
}
.title_inline .subtitle {
	margin-bottom: 0 !important;
}
.checkbox-container {
	align-items: center;
	display: flex;
	flex-flow: row wrap;
	gap: 5px;
}
.checkbox-container .label {
	padding-bottom: 0 !important;
}
.g_placeholder_label .country-select {
	border-right: 0;
}
.input_wrap {
	margin-bottom: 25px !important;
	position: relative;
}
.input_wrap .form_elements {
	background-color: var(--emp--form-bg);
	border: 1px solid var(--emp--form-border);
	border-radius: 7px;
	color: var(--white);
	height: var(--emp--form-item-height);
	padding: 0 var(--emp--form-item-space);
	width: 100%;
}
.input_wrap textarea.form_elements {
	height: calc(var(--emp--form-item-height) * 2);
	padding-top: calc(var(--emp--form-item-space) * 0.8);
}
.input_wrap .form_elements.field-error {
	border-color: rgba(255, 107, 107, 0.6);
	background-color: rgba(255, 107, 107, 0.1);
}
.input_wrap .lb_placeholder {
	background-color: transparent;
	display: inline-flex;
	font-size: 14px;
	left: var(--emp--form-item-space);
	line-height: var(--emp--form-item-height);
	padding: 0;
	position: absolute;
	top: 0;
	transition: all 0.3s ease;
	z-index: 1;
	pointer-events: none;
}
.input_wrap input:not(:placeholder-shown) + .lb_placeholder,
.input_wrap input:focus + .lb_placeholder,
.input_wrap textarea:not(:placeholder-shown) + .lb_placeholder,
.input_wrap textarea:focus + .lb_placeholder,
.input_wrap select:focus + .lb_placeholder,
.input_wrap select:valid + .lb_placeholder {
	font-size: 12px;
	line-height: 1;
	opacity: 0.7;
	top: 2px;
}
.input_wrap .field-error-message {
	margin: 0;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	pointer-events: none;
}
.input-group .input_wrap {
	flex-grow: 1;
	margin-bottom: 0 !important;
}
.input-group .input_wrap .form_elements {
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
	border-right: 0 !important;
}