@charset "utf-8";
/*************** DEFAULT CSS ***************/
:root {
    --body-font: 'Quicksand', sans-serif;
    --body-font-Size: 16px;
    --body-color: #000;
    --primary-color: #4e2c18;
    --secondary-color: #000;
    --black: #000;
    --white: #fff;
}
body{
 	font-family: var(--body-font);
	font-size:var(--body-font-Size);
	font-style: normal;
	line-height: normal;
	font-weight:400;
	color: var(--body-color);
	text-decoration: none;
	margin:0px;
	-webkit-font-smoothing: antialiased;
	padding:0;
	
}
html{ scroll-behavior: smooth;}
* {
    -webkit-box-sizing: border-box;
    -mox-box-sizing: border-box;
    box-sizing: border-box;
}
::selection {
    background: var(--black); /* Safari */
	color:var(--white);
        }
::-moz-selection {
    background: var(--black); /* Firefox */
	color:var(--white);
}
a {
	color:var(--primary-color);
	text-decoration: none;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	}
	a:hover {
	color: var(--primary-color);
    }
p {
	margin:0 0 30px 0;
	clear:left;
	padding:0;
	}
/******* Headings Style *******/
h1 {font-size: 43px;}
h2 {font-size: 35px;}
h3 {font-size: 20px;}
h4 {font-size: 17px;}
h5 {font-size: 15px;}
h6 {font-size: 13px;}
h1, h2, h3, h4, h5, h6 {
	margin:0 0 20px 0;
	padding:0;
	font-weight:normal;
	}	
hr {
	margin:40px  0 60px 0;
	height:1px;
	border:0;
	border-top:1px solid #c1c1c1;
	border-bottom:1px solid #c1c1c1;
	float:left;
	width:100%;
	position:relative;
}
img{
	border:0;
}	
a img {
	border: 0;
	}

/*************** PRELOADER ***************/
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#000; /* change if the mask should have another color then white */
	z-index:999999; /* makes sure it stays on top */
}
#status {
	width:30px;
	height:30px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(../images/loading.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-15px 0 0 -15px; /* is width and height divided by two */
}

/*************** COLUMS AND ROWS ***************/
main{ position:relative;	}
.row-flex{ width: 100%; display: block; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.justify-content-center { justify-content: center; }
.space-between{ justify-content: space-between; }
.justify-content-flex-end{ justify-content: flex-end }
.row{width:100%;display:block;margin:0 0 30px 0;padding:0;}
.clearfix{width:100%;height:100px;margin:0;padding:0;display:block;}
.container{	width:1280px;margin:0 auto;}
.fullwidth{	width:100%;display:block;}
.col-flex-wrp{ display: flex; justify-content: space-between;}
.two-col{flex:0 0 48%; }
.three-col{	flex:0 0 31%;}
.four-col{flex:0 0 22%;}
section {width: 100%; display: inline-block;position: relative;}
aside { flex:0 0 25%; margin: 0; padding: 0;}
summary { flex:0 0 70%; margin: 0; padding: 0;}


/*************** HOME PAGE CSS ***************/
.digital-menu-wrap{ display: flex; flex-wrap: wrap;min-height: 100vh;}
.digital-menu{flex: 0 0 25%;box-shadow: 0 0 50px #00000057;min-width: 480px;}
.logo{text-align: center;padding: 15px 0px 0;}
.logo img{width: 130px;}
.menu-list-wrap{padding:  20px;}
.menu-list{display: flex;gap: 8%;margin-bottom: 15px;border-bottom: 1px solid #efefef;padding-bottom: 15px;}
.menu-cnt{display: flex;flex-direction: column;justify-content: space-between;}
.menu-cnt h2{font-size: 16px;font-weight: 600;margin-bottom: 5px;color: #242424;}
.menu-cnt p{font-size: 12px;font-weight: 500;color: #6c6c6c; margin-bottom: 20px;}
.menu-cnt h3{color: var(--primary-color);font-weight: 500;font-size: 18px;margin-bottom: 0;}
.menu-list .hover-effect{flex: 0 0 30%;line-height: 0; border-radius: 8px;}
.digital-menu-right {flex: 0 0 75%;display: flex;position: fixed;top: 0;bottom: 0;align-items: center;left: 50%;justify-content: center;}
.digital-menu-right img{ width: 300px;}
.popp-title-wrap{display: flex;justify-content: space-between;gap: 20px;margin-bottom: 10px;}
.popp-title-wrap h2{font-size: 18px;font-weight: 600;margin-bottom: 0;}
.popp-title-wrap h3{font-size: 16px;font-weight: 600;color: var(--primary-color);margin-bottom: 0;flex: 0 0 75px;text-align: right;}
.popp-wrap{padding: 20px;}
.popp-wrap p{margin-bottom: 0px;}

/**********forms**************/
form{margin:0;padding:0;}
*:focus {outline: none;}
.fieldset{width:100%;height: 50px;padding: 8px 15px;background-color: var(--white);display:block;border: 1px solid #c1c1c1;
margin:0 0 10px 0;color: #262626;font-size: 14px;border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-webkit-border-radius: 5px;}
textarea.fieldset, textarea{ height: 140px; }
.sendbutton{width:auto;height:auto;border:0;outline:0;margin:0 5px 0 0;float:left;color:#fff;font-size: 18px;cursor:pointer;
vertical-align:top;padding: 14px 25px 16px;text-align:center;background-color: var(--secondary-color);text-transform:uppercase;
border-radius: 50px;}
.sendbutton:hover{background-color:var(--primary-color);color:#fff;}
::-webkit-input-placeholder {color: #262626 !important;}
:-moz-placeholder {color: #262626 !important;}
::-moz-placeholder { color: #262626 !important;}
:-ms-input-placeholder { color: #262626 !important;}

/************************************* 1280px *************************************/
@media only screen and (max-width: 1280px) {
	.digital-menu-right {left: 59%;}
}
/************************************* 800px *************************************/
@media only screen and (max-width: 800px) {
.digital-menu-right{ display: none;}
.digital-menu{min-width: 100%; flex:0 0 100%;}
}

/************************************* 640px *************************************/
@media only screen and (max-width: 640px) {
.logo{ padding-bottom: 0px;}
}

/************************************* 575px *************************************/
@media only screen and (max-width: 575px) {
.menu-list {gap: 3%;}
.menu-cnt p{overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 3; line-clamp: 3;-webkit-box-orient: vertical;}
}

/************************************* 360px *************************************/
@media only screen and (max-width: 480px) {
.menu-list .hover-effect{flex:0 0 150px}
}

/************************************* 320px *************************************/
@media only screen and (max-width: 320px) {

}