@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');
/*font-family: 'Inter', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

:root{
	--font1:'Inter', sans-serif;
	--font2: "Merriweather", serif;
	--primary: #2d9b42; 
	--base: #FFFFFF;
	--secondary:  #4d7757;
	--secondary1: #000000;
	--secondary12: #3B443D;
	--grey1: #CFCFCF; 
	--dark: #222733; 
	--grey: #4F4F4F;
	--black:  #000;
	--text-color:  #3B443D;
	--white: #fff;
	--text-color1:  #CFCFCF;
}


*{ 
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0; 
    scroll-behavior: smooth; 
    font-size: 18px;
    line-height: 34px;
    color: var(--text-color);
    font-family: var(--font1);
}
h1,h2,h3,h4,h5,h6{
    color: var(--primary);
    font-family: var(--font2); 
    font-weight: 700;
}
p{
	margin: 0 0 20px;
	font-size: 18px;
}
img,svg{
    width: 100%;
}
.clear{
    clear: both;
}
.clear:after{
    position: relative;
    content: "";
    clear: both;
    display: table;
    width: 100%;
}
.mb-20{
	margin-bottom: 30px;
}

a{
    transition: .5s;
    text-decoration: none;
}
a:hover{
	text-decoration: none;
}


section{
    padding: 100px 0;
    position: relative; 
}
 

/**common**/
.dark_sec{
	background: var(--dark);
} 
.dark_sec {color: var(--text-color1);}
.bglight{
	background: var(--lightbg);
}
h1{font-size: 72px; line-height: 93px;}
.tophd{
	text-align: center;
	margin: 0 0 50px;
}
.dark_sec h2.title{color: var(--white);}
.tophd1{text-align: left;}

.tophd1 .subtitle{
	justify-content: flex-start;
}
.subtitle{display: flex; align-items: center; justify-content: center;
	color: var(--primary); letter-spacing: 2.4px;  text-transform: uppercase;
	font-weight: 700; 
	position: relative; 
	margin: 0 0 10px; 
	font-size: 12px;
	line-height: 28px;
}
.subtitle:before{
	position: relative;
	display: inline-flex;
	content: "";
	background: var(--primary);
	width: 18px;
	height: 2px;
	margin-right: 5px;
} 
h2.title{font-size: 44px; line-height: 55px; 
	text-transform: capitalize; margin: 0 0 10px;
}
h2.title span{
	display: inline-block;
	color: var(--primary);
}
 

ul{
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
.commonlist li{ 
	margin: 0 0 20px;
}
.commonlist li:before{
	position: relative;
	display: inline-flex;
	content: "";
	background: url(../images/subtitleico.svg) no-repeat 0 center;
	background-size: 20px;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	top: 2px;
} 
.cmnbtn{
	display: inline-block;
	font-weight: 500;
	position: relative;
	background: var(--primary); 
	color: var(--white);
	font-size: 16px;
	line-height: 18px;
	text-transform: capitalize; 
	overflow: hidden;
}
.cmnbtn span{
	display: block;
	padding: 18px 42px;
	position: relative;
	z-index: 1;
}
.cmnbtn:before{
	position: absolute;
	width: 100%;
	height: 100%;
	left: calc(100% - 10px);
	top: calc(-100% + 10px);
	background: var(--secondary);
	content: "";
	transition: .5s; 
}
.cmnbtn:after{
	position: absolute;
	width: 100%;
	height: 100%;
	left: calc(-100% + 10px);
	top: calc(100% - 10px);
	background: var(--secondary);
	content: "";
	transition: .5s; 
}
.cmnbtn:hover{color: var(--white);}
.cmnbtn:hover:before,
.cmnbtn:hover:after{
	left: 0; top: 0;
}
  

/*.cmnbtn i{display: inline-block; vertical-align: middle;
	margin-left: 5px;
}
*/


 

/**header**/
/* header */
.head-in-full {
    position: relative;
}
.head-main{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 99999;
	padding: 35px 0;
}
.header-in-full-sec{
	width: 100%;
}
.head-in{
	display: flex;
    justify-content: space-between;
	align-items: center;
}
.header-in-full-sec .head-nav{
	display: flex;
	margin: 0;
}
.head-nav li:before{
	content:"";
	position: absolute;
	bottom: 0;
	left: 0;
	background: var(--primary);
	border-radius: 5px;
	width: 0;
	height: 2px;
	transition: all linear 0.3s;
}
.head-logo h2 a{
	color: var(--base);
}
.head-nav li:hover:before{
	width: 100%;
}
.head-but{
	background-color: var(--primary);
	color: var(--base);
	padding: 13px 11px;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 2px;
	border: 1px solid var(--primary);
	position: relative;
	overflow: hidden;
	display: inline-block;
	    border-radius: 30px;
}
.head-but span{
	z-index: 5;
	position: relative;
}

.head-but:before {
	position: absolute;
    top: 0px;
    right: 0;
    bottom: 0px;
    width: 50%;
    content: "";
    transform: translateX(100%);
    transition: 0.5s;
    background-color: var(--secondary1);
    z-index: 2;
}
.head-but:after {
	position: absolute;
    top: 0px;
    left: 0;
    bottom: 0px;
    width: 50%;
    content: "";
    transform: translateX(-100%);
    background-color: var(--secondary1);
    z-index: 2;
	transition: 0.5s;
}

.head-but:hover:before,.head-but:hover:after{
    transform: translateX(0px);
	
}


.head-but:hover{
	color: var(--base);
}
.head-menu ul li a{
	color: var(--base);
	font-size: 18px;
}

.head-menu ul li{
	margin-right: 31px;
	position: relative;
}
.dropdown{
	position: relative;
}
.header-in-full-sec .dropdown .drop-menu{

    opacity: 0;
    transition: 0.5s;
    visibility: hidden;
    position: absolute;
    top: 54px;
    left: 0;
    background-color: var(--base);
    padding: 20px 0 20px 30px;
    min-width: 304px;
}
.mobile-menu  .dropdown .drop-menu{
	/* opacity: 0;
	transition: 0.5s;
	visibility: hidden;
	position: absolute;
	top: 54px;
	left: 0;
	background-color: var(--base);
	padding: 20px 0 20px 30px;
	display: flex;
	flex-direction: column;
	min-width: 304px; */
    display: none;
	
}
.dropdown ul li{
	padding-right: 0;
    margin-bottom: 25px;
}
.dropdown ul li:last-child {
	margin-bottom: 0;
  }
.dropdown .drop-menu li a{
	color: var(--secondary1);
}
.dropdown .fi-rr-angle-small-down{
	    color: white; 
		position: relative;
		top: 5px;
		font-size: 22px;
		margin: 0 2px;
}
.head-menu ul li.dropdown:hover .drop-menu{
opacity: 1;
visibility: visible;
}

.sticky-header{
    top: -100%;
    position: fixed;
    z-index: 999;
    transition: 0.5s;
    width: 100%;
   opacity: 1;
   box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
   background: var(--secondary1);
   padding: 20px 0;
} 
.sticky .sticky-header{
    top: 0;
}
.header-in-full-sec .dropdown-btn{
    display: none;
}
.header-in-full-sec .mobile-nav-toggler .inner {
    position: relative;
    display: block;
    padding: 3px 5px;
    background: var(--primary);
}
.mobile-nav-toggler .icon-bar {
    position: relative;
    display: block;
    background: #ffffff;
    height: 2px;
    width: 30px;
    margin: 7px 5px;
}
.header-in-full-sec .mobile-nav-toggler {
    position: relative;
    display: none;
    cursor: pointer;
   
}
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 100%;
    height: 100%;
    padding-right: 30px;
    opacity: 0;
    visibility: hidden;
    z-index: 999999;
}
.mobile-menu-visible .mobile-menu {
    opacity: 1;
    visibility: visible;
}
.mobile-menu .menu-box {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    background: #000000;
    padding: 0px 0px;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    border-radius: 0px;
    -webkit-transform: translateX(101%);
    -ms-transform: translateX(101%);
    transform: translateX(101%);
}
.mobile-menu-visible .mobile-menu .menu-box {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}
.mobile-menu-visible .mobile-menu .close-btn{
    transform: rotate(360deg);
}
.mobile-menu .head-in {
    flex-direction: column;
    align-items: flex-start;
}
/* .mobile-menu .head-menu ul {
    display: block;
} */

.mobile-menu .drop-menu li {
    position: relative;
    display: block;
}
.mobile-menu .head-logo{
    display: none;
}
.close-btn{
    position: absolute;
    top: 14px;
    right: 9px;
    width: 36px;
    z-index: 99;
    transition: all 0.9s ease;
}
.close-btn span{
    color: var(--base);
    font-size: 34px;
}
.mobile-menu .head-nav li.dropdown .dropdown-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    line-height: 32px;
    background: rgba(255, 255, 255, 0.10);
    cursor: pointer;
    border-radius: 2px;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    z-index: 5;
    display: inline-block;
}

.mobile-menu .head-nav li.dropdown .dropdown-btn.open {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
} 
.mobile-menu  .head-nav {
    display: block;
    padding: 54px 0;
}
.mobile-menu .head-nav li a{
    color: var(--base);
}
.mobile-menu .head-nav li {
    position: relative;
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.mobile-menu .head-nav li a{
    position: relative;
    display: block;
    padding: 10px 25px;
    color: #ffffff;
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    text-transform: capitalize;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
.mobile-menu .dropdown ul li {
    padding-right: 0;
    margin-bottom: 0;
    display: block;
}
.mobile-menu .dropdown ul li a{
    font-size: 15px;
    font-weight: 400;
    margin-left: 20px;
    text-transform: capitalize;
}
.rightb{
	display: flex;
    align-items: center;
    gap: 20px;
}
.rightb .fa-search{
	color: white;
}
.searchico.active .bi-search {
    display: none;
}
.searchico .fa-times {
    display: none;
}
.searchico.active .fa-times {
    display: inline-block;
    color: var(--primary);
}
.searchbox {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    width: 600px;
    padding: 10px 10px;
    display: none;
    border-radius: 25px;
}
ul.rightb-list {
	    position: relative;
    margin-bottom: 0;
}
ul.rightb-list li a{
    color:#fff;
}
ul.rightb-list ul.rightb-drp {
    position: absolute;
    top: 100%;
    background: #fff;
    width: 160px;
    right: 0;
    padding: 14px;
    scale: 0;
    transition: 0.5s;
    opacity: 0;
    box-shadow: 0px 1px 5px 4px #3c3c3c;
    border-radius: 6px;
}
ul.rightb-list:hover .rightb-drp {
    scale: 1;
    transition: 0.5s;
    opacity: 1;
}
ul.rightb-drp li a {
    color: #000;
    display: block;
    font-size: 14px;
    padding-bottom: 0;
    line-height: 30px;
    height: auto;
    border-top: 1px solid var(--primary);
}
/* banner */
.banner-slide{
	position: relative;
}
.banner-slide:before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #071422;
	opacity: 0.6;
	z-index: 1;
}
.banner-sec{
	position: relative;
}
.banner-content {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
	z-index: 2;
}
.banner-content-inside h1{
	font-size: 72px;
	color: var(--base);
	line-height: 93px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 47px;
	position: relative;
	z-index: 4;

}
.ban-but{
	    padding: 10px 35px;
	font-weight: 400;
}
.banner-full-sec .owl-theme .owl-nav .owl-prev,
.banner-full-sec .owl-theme .owl-nav .owl-next {
    position: relative;
    display: block;
    height: 70px;
    width: 70px;
    background: rgba(255, 255, 255, .20);

    border-radius: 50%;
    display: none !important;
   
}
.banner-full-sec .owl-theme .owl-nav {
    position: absolute;
   bottom: 45%;
    right: 15%;
    height: 150px;
    display: flex;
  
    align-items: center;
    flex-direction: column;
    align-items: flex-end;
    z-index: 3;
	gap:16px
}
.banner-full-sec .owl-theme .owl-next:before{
		position: absolute;
		background: url(../images/icons/leftarrow.png) no-repeat 0 0;
		background-size: cover;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		content: "";
		z-index: 90;
		width: 40px;
		height: 40px;
}
.banner-full-sec .owl-theme .owl-prev:before{
	position: absolute;
	background: url(../images/icons/rightarrow.png) no-repeat 0 0;
	background-size: cover;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	content: "";
	z-index: 90;
	width: 40px;
	height: 40px;
}

	.banner-sec .ban-shape {
		position: absolute;
		top: 0px;
		left: 115px;
		bottom: 100px;
		right: 100%;
		background-color: #222733;
		opacity: 0.5;
		z-index: 1;
		transform: skew(0deg, 0deg);
		transform-origin: left;
		transition: all 1000ms ease;
	}
	.banner-sec .active .ban-shape {
		right: 65%;
		transform: skew(20deg, 0deg);
		transition: all 1500ms ease;
	}

/* .banner-full-sec .owl-theme .owl-next:before{
	position: absolute;
    content: "\f178";
    font-family: 'FontAwesome';
    font-size: 18px;
    font-weight: 400;
    color: var(--secondary1);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
} */
.banner-full-sec .owl-theme .owl-next span,.banner-full-sec .owl-theme .owl-prev span{
	visibility: hidden !important;
}
.banner-content-inside h4{
	color: var(--primary);
	font-size: 25px;
	position: relative;
    z-index: 3;
}
/* menu */
.mtitle{
	text-align: center;
}
 .ctitle h5{
	display: inline-block;
	font-size: 22px;
	position:relative;
	padding-left: 39px;
	color: var(--dark);
	position: relative;
    z-index: 3;
 }
 .img-box61{
     position: relative;
 }
 .ctitle h5:before{
     content:"";
     position: absolute;
         top: -7px;
     left: 0;
     width: 30px;
     height: 30px;
     background: url(../images/resourses/covered-food-plate.svg);
     background-size: cover;
 }
 .ctitle h2{
	font-size: 51px;
	text-transform: capitalize;
 }
.menu-card{
	text-align: center;
	border: 1px solid #EAEAEA;
	border-radius: 5px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 30px 0;
	background-color: #fff;
}
.menu-card:before{
	background-color: #f5f5f5;
    position: absolute;
    content: "";
    left: 0;
    top: -183px;
    width: 100%;
    height: 345px;
    z-index: -1;
    border-radius: 50%;
	transition: 0.5s;
}

.menu-card:hover:before{
	border-radius: 0%;
	height: 100%;
	top: 0;
}
.menu-card:hover{
	border: 1px solid var(--primary);
}
.menu-card:after{
	background-color: var(--primary);
    position: absolute;
    content: "";
    left: 0;
    top: -100%;
    width: 100%;
    height: 345px;
    z-index: -1;
    border-radius: 50%;
	transition: 0.5s;
}
.menu-card:hover:after{
	top: -183px;
}
.menuimg{
	width: 50%;
    margin: 0 auto;
	border-radius: 9999px;
	    border: 1px dashed var(--primary);
    padding: 5px;
    
    position: relative;
}
.menuimg:before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: inherit;
    border: 2px dashed var(--primary);
    top: 0;
    left: 0;
    animation: spin 10s linear infinite;
}
.menuimg img{
	border-radius: 9999px;
}
@keyframes spin{
	100% {
		transform: rotate(360deg);
	}
	0% {
		transform: rotate(0);
	}
}
.menucont h6{
	font-size: 28px;
    margin-top: 20px;
}
.menubtn{
	padding: 2px 21px;
	border-radius: 23px;
}

.menu{
	position: relative;
}
 .bugimg{
	position: absolute;
	left: -157px;
	bottom: 0;
	animation: updown 7s infinite;
 }
 .coffee{
	position: absolute;
	right: 0;
	top: 0;
	animation: updown 7s infinite;
 }
 @keyframes updown{
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(-25px);
	}
	50% {
		transform: translateY(-15px);
	}
	75% {
		transform: translateY(-25px);
	}
	100% {
		transform: translateY(0);
	}
 }
 /* cta */
 .cta{
	background: url('../images/resourses/picbg.png') no-repeat 0 0;
	background-attachment: fixed;
    position: relative;
 }
 .cta-in{
     position: relative;
 }
 .cta:before{
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: black;
     opacity: 0.5;
 }
 .darkcont h2{
	color: #fff;
	
 }
 
 .darkcont h5{
	color: var(--primary);
	
 }
 .subfont h5{
	font-size: 24px;
 }
 .subfont h2{
	font-size: 72px;
 }
 .darkcont{
	color: white;
 }
.rightimg{
	position: relative;
}
.leafimg{
	position: absolute;
	top: 0;
	left: 0;

}
.tomatoimg{
	position: absolute;
	top: 0;
	left: 0;
	animation: spin 10s linear infinite
}
.tmimg{
	position: absolute;
	bottom: 0;
	left: 0;
	animation: updown 7s infinite;
}
/* #rotating-image {
	
	transition: transform 0.5s ease; 
  }
  
  .rotated {
	transform: rotate(360deg);
  } */
  /* about */
  .about{
	padding-top: 100px;
	overflow: hidden;
  }
 
  .abcont h3,.reccont h3,.portcont h3,.class-testicont h4,.blogcont h3,.fotcol h3{
	font-size: 25px;
  }
  .img-box6 .img1 {
    border-radius: 50%;
    background-color: var(--primary);
    padding: 30px;
	z-index: 1;

}
.img-box6{
	position: relative;
	padding-top: 238px;
}
.img-box6:before {
    position: absolute;
    top: 0;
    left: 50%;
    height: 50%;
    width: 250px;
    content: "";
    background: var(--primary);
    transform: translate(-50%, 0);
}
.bleafimg{
	position: absolute;
    left: -254px;
    bottom: 134px;
	animation: updown 7s infinite;
	z-index: -1;
}
.abmenubox{
	display: flex;
    gap: 20px;
    align-items: center;
	position: relative;
}
.abmenubox p{
	margin-bottom: 0;
}
.aboutmenu{
	border-top: 1px solid #D8DDE1;
    padding: 50px 0;
	position: relative;
}
.aboutmenu:before{
	position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 1px;
    content: "";
    background: #D8DDE1;
    transform: translate(-50%, 0);
}
.abi img{
	width: 60px;
}
.leaf3img{
	position: absolute;
	    top: -39px;
	right: 0;
	z-index: -1;
	animation: moving 8s linear infinite;
	width: 14%;
}
@keyframes moving{
	0% {
		
		transform: translateX(0);
	}
	50% {
		
		transform: translateX(-50px);
	}
	100% {
		
		transform: translateX(0);
	}
}
.aboutcont{
	position: relative;
}
.leaf4img{
	position: absolute;
	bottom: 0;
	right: 0;
	animation: updown 7s infinite;
	    width: 14%;
}
.abi img{
	transition: 0.5s;
}
.abi img:hover{
	transform: rotateY(180deg);
}
/* popular-recepies */
.popular-recepies{
	background: fixed;
	background-image: url('../images/resourses/recbg.jpg');
	background-repeat: no-repeat;
	position: relative;
	z-index: 28;
}
.popular-recepies:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--secondary1);
	content: "";
	opacity: 0.8;
	z-index: 30;
}
.popularcont{
	z-index: 34;
	position: relative;
}

.reccont{
	position: relative;
    padding: 30px 35px 30px;
    background-color: #f5f6fb;
}
.recsub{
	display: inline-block;
    background: var(--primary);
    padding: 0 10px;
    border-radius: 10px;
    color: white;
	font-size: 18px;
}
.reccont h3 a{
	color: #000;
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.blogcont h3 a{

}
.reccont h3{
	margin: 12px 0;
}
.recbot p a{
	color: var(--text-color);
}
.recbot{
	display: flex;
    justify-content: space-between;
}
.reccard{
	transition: 0.5s;
	border-radius: 8px;
	    background: white;
}
.reccard:hover {
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.10);
}
.reccardimg{
	position: relative;
	transition: 0.5s;
	padding: 10px;
}
.reccardimg img{
    border-radius: 8px 8px 0 0;
}
.reccont{
    border-radius: 0 0 8px 8px;
}
.reccardimg:before{
	position: absolute;
	left: 0px;
    top: 0px;
   width: 0%;
   height: 100%;
	background: var(--primary);
	opacity: 0.5;
	content: "";
	transform-origin: left center;
	transition: 0.4s ;
}
.reccard:hover .reccardimg:before{
	width: 100%;
}
.reccard:hover .reccont h3 a{
	color: var(--primary);
}
.reccard:hover .recbot p a{
	color: var(--primary);
}
.reccard:hover{
	transform: translateY(-10px);
}
/* drink */
.drink{
	position: relative;
}
.glassimg{
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}
.leftdrinkimg{
	position: relative;
}
.bgdrink{
	position: absolute;
	top: 0;
	left: 0;
}
/* portfolio */
.portfolio-card{
	position: relative;
}
.portcont{
	text-align: center;
    padding: 20px 0;
    background: black;
    color: white;
   left: 0;
   right: 0;
    bottom: 0;
      border: 2px solid var(--primary);
     opacity: 0;
    visibility: hidden;
        border-radius: 0 0 8px 8px;
}
.portcont h6{
	color: var(--primary);
	font-size: 20px;
}
.portcont h3{
	color: #fff;
}
.active.center .portfolio-card .portcont {
    opacity: 1;
    visibility: visible;
    transition: 0.5s;
}
.portfolio-card {
    margin-top: 70px;
    position: relative;
	transition: 0.5s;
	    border-radius: 8px;
}

.active.center .portfolio-card {
    margin: 0;
	transition: 0.5s;
}
.portfolio{
	background: url(../images/resourses/kj.jpg) no-repeat 0 0;
	background-size: cover;
	position: relative;
	z-index: 28;
	background-attachment: fixed;
}
.portfolio img{
    border-radius: 8px 8px 0px 0px;
}
.portfolio:before{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--secondary1);
    content: "";
    opacity: 0.8;
    z-index: 30;
}
.portfoliocont{
	z-index: 34;
    position: relative;
}

/* contact */
.contact form input,.contact form textarea{
	width: 100%;
    padding: 9px 32px;
    background-color: #f4f4f4;
    border: 1px solid var(--primary);
    outline: 0;
    border-radius: 4px;
}
.contform{
	margin-top: 35px;
}
.contact{
	position: relative;
}
.contimg{
    margin-right: 30px;
}
.tom1{
	position: absolute;
	top: 0;
	right: 0;
	animation: updown 7s infinite;
	z-index: 1;
}
.contwrite{
	position: relative;
	border: 1px dashed var(--primary);
    padding: 30px;
    background: white;
}
.chilli{
	position: absolute;
	bottom: 0;
	right: 0;
	animation: moving 8s linear infinite;
}
/* testimonial */
.test-up{
	display: flex;
    align-items: center;
    gap: 20px;
}
.testi-img,.testi-img img{
	border-radius: 50%;
}
.test-up p{
	margin-bottom: 0;
}
.test-up {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #D8DDE1;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.mb-60{
	margin-bottom: 60px;
}
.testimonial{
	background: url('../images/resourses/testi_bg_1.jpg') no-repeat 0 0;
	background-size: cover;
}
.test-card{
	background: white;
    padding: 20px;
}
/* brand */
.brandimg{
	place-content: center;
    text-align: center;
    min-height: 104px;
	opacity: 0.5;
    transition: 0.5s;
}
.brand{
	background-color: var(--primary);
	padding-bottom: 50px;
}
.brandimg:hover{
	opacity: 1;
}
/* blog */
.blogup{
	display: flex;
	gap: 12px;
}
.blogup ul li{
	font-size: 18px;
}
.blogup p{
	margin-bottom: 0;
}
.blogup a{
	color: #ABB8C3;
}
.blogcont {
	background: var(--base);
	padding: 30px;
	border-radius: 0 0 8px 8px;
	
}
.blogimg img{
    border-radius:  8px 8px 0 0;
}
.blogup{
	color: var(--dark);
}
.blogcont h3 a{
	color: var(--primary);
}
.blogbtn{
	color: var(--dark);
	padding-bottom: 5px;
    border-bottom: 1px solid var(--primary)
}
.blogcont h3{
	margin: 10px 0;
}
.blogup ul{
	display: flex;
    margin-bottom: 0;

}
.ad{
	position: relative;
    padding-right: 15px;
    margin-right: 15px;
}
.ad:after{
	content: "";
    position: absolute;
    background-color: #ABB8C3;
    width: 1px;
    height: 21px;
    right: 0;
    top: 6px;
    transform: translate(30deg);
    transform: rotate(20deg);
}
.blogcard{
	position: relative;
	overflow: hidden;
	transition: 0.5s;
	    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.10);
	    border-radius: 8px;
}
.bdate{
	background-color: var(--primary);
    position: absolute;
    left: 16px;
    top: 16px;
    color: #fff;
    z-index: 9;
    width: 80px;
    height: 73px;
    text-align: center;
    border-radius: 4px;
}
.bdate p{
	margin-bottom: 0;
}
.blogimg{
	overflow: hidden;
	transition: 0.5s;
}
.blogimg img{
	transform: scale(1.0);
	transition: 0.5s;
}
.blogcard:hover .blogimg img{
	transform: scale(1.2);
}
.blogcard:hover .blogcont h3 a{
	color: var(--primary);
}
.blogcard:hover .blogbtn{
	color: var(--primary);
}
.blogcard:hover{
	transform: translateY(-12px);
}
.blogcont h3 a{
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
/* gallery */
.gallery{
	z-index: 22;
	padding-top: 0;
	padding-bottom: 0;
}
.galcard .galimg img{
	transform: scale(1.0);
	transition: 0.5s;
}
.galcard{
	transition: 0.5s;
	overflow: hidden;
}
.galcard:hover .galimg img{
	transform: scale(1.2);
}
.galcard .galimg{
	position: relative;
}
.galcard .galimg:before{
	content: "";
	position: absolute;
	background-color: var(--primary);
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 9;
	left: 0;
	opacity: 0;
}
.galcard .galimg:after{
	content: "\f16d";
	font-family: "Font Awesome 6 Brands";
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
    font-size: 26px;
	opacity: 0;
	z-index: 29;

}
.galcard:hover .galimg:before{
	opacity: 0.8;
}
.galcard:hover.galcard .galimg:after{
	opacity: 1;
}
/* footer */
footer{
	position: relative;
/* 	margin-top: -64px; */
	background: var(--black)
}

footer .head-logo{
	padding-bottom: 20px;
}
.footsec{
	z-index: 2;
	color: #fff;
	position: relative;
	padding: 90px 0 0px 0;
}
.footlogo ul li a i{
	color: var(--primary);
    font-size: 20px;
}
.footlogo ul{
	display: flex;
    gap: 12px;
}
.footlogo ul li{
	background: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
	transition: 0.5s;
}
.fotcol ul li:hover a{
	color: var(--primary);
}
.footlogo ul li:hover{
	background: var(--primary);
}
.footlogo ul li:hover a i{
	color: #fff;
}
.fotcol h3 a{
	color: #fff;
	transition: 0.5s;
   
}
.fotcol h3{
	padding-bottom: 20px;
	position: relative;
	margin-bottom: 20px;
	transition: 0.5s;
	display: inline-block;
}
.fotcol h3 :before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--primary);
	width: 22%;
	height: 2px;
	border-radius: 3px;
	transition: 0.5s;
}
.fotcol h3 :hover:before{
	width: 100%;
}
.fotcol ul li a{
	color: #fff;
}
.fotcol ul li.ef1 a{
	position: relative;
	top: 0%;
}
.fotcol ul li.ef1:hover a{
	top: -100%;
}
.fotcol form input{
	padding: 5px 12px;
	outline: 0;
	border: 0;
	transition: 0.5s;
	width: 100%;
}
.fotcol form{
	position: relative;
	transition: 0.5s;
}
.fotsub{
	position: absolute;
    right: 0;
    top: 0;
    background: var(--primary);
    width: 45px;
    height: 12px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fotsub a i{
	color: #fff;
}
.fotcol form:hover .fotsub{
	background: #fff;
	border: 1px solid var(--primary);
}
.fotcol form:hover .fotsub a i{
	color: var(--primary);
}
.fotcol form:hover input{
	background-color: var(--secondary1);
}
.fotcol ul li{
	margin-bottom: 10px;
	font-size: 18px;
}
.footbot{
	z-index: 9;
    position: relative;
    color: #fff;
    display: flex;
    justify-content: space-between;
}
.footdown{
    padding: 12px 0;
    background: var(--primary);
}
.terms ul{
	display: flex;
	margin-bottom: 0;
}
.footup{
	padding-bottom: 40px;
    border-bottom: 1px solid white;
    margin-bottom: 0px;
}
.footbot p{
	margin-bottom: 0;

}
.fotcol p{
	margin-bottom: 20px;
}
.footbot p a{
	color: var(--black);
}
.terms ul li a{
	color: var(--black);
}
.terms1{
	padding-right: 10px;
    border-right: 1px solid white;
    margin-right: 10px;
}
/* about */
.inner-banner{
	position: relative;
}
.inban-content {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    width: 100%;
}
.inban-content h2 {
    color: var(--base);
    font-size: 52px;
    text-transform: capitalize;
}
.inban-b ul {
    display: flex;
    gap: 5px;
}
.aboutin .row{
    align-items: center;
}
.inban-b ul a.active {
    color: var(--primary);
    text-transform: capitalize;
}
.inban-b ul a {
    color: var(--base);
}
/* offer */
.offerphoto{
	display: flex;
    justify-content: space-between;
}
.offercont h3{
	margin: 10px 0;
	font-size: 23px;

}
.offercont h3 a{
	color: var(--primary);
}
.rightservimg{
	background-color: #eadfdf;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rightservimg img{
	height: 40px;
	width: 40px;
}
.rightableaf{
	position: absolute;
	right: 0;
	top: 0;
	opacity: 0;
}
.offercard{
	position: relative;
	background-color: var(--base);
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.06);
    padding: 30px;
    position: relative;
    z-index: 2;
}
.offercard:before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	background-color: var(--secondary1);
	transition: 0.5s;
}
.offercard:hover:before{
	width: 100%;
	height: 100%;
	z-index: -1;
}
.offercard:hover .offercont p{
	color: var(--base);
}
.offercard:hover .rightableaf{
	opacity: 1;
	
}
.rightservimg img{
	transition: 0.5s;
}
.offercard:hover .rightservimg img{
	transform: rotateY(180deg);
}
.offercard:hover .rightservimg{
	background-color: #1F1F1F;
}
.offer{
	background: url('../images/resourses/testi_bg_1.jpg') no-repeat 0 0;
	background-size: cover;
}
.offercont p{
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/* team */

 .teamcard{
	position: relative;
	transition: 0.5s;
}
.peoplecont{
	background: var(--base);
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 20px 30px;
    text-align: center;
	transition: 0.5s;
}
.teamcard:hover .peoplecont{
	background-color: var(--primary);
	color: var(--base);
}
.teamcard:hover .peoplecont h3{
	color: var(--base);
}
.teamcard .footlogo{
	position: absolute;
    top: 26px;
    left: 27px;
}
.teamcard .footlogo ul{
    flex-direction: column;
}
.teamcard .footlogo ul li{
	width: 40px;
    height: 40px;
	opacity: 0;
	transition: 0.5s;
}
.teamcard:hover .footlogo ul li{
	opacity: 1;
}
.peoplecont p{
	margin-bottom: 0;
}
/* contactus */
.loccontact ul li{
	display: flex;
    gap: 29px;
	align-items: center;
	margin-bottom: 20px;
}
.loci{
	background: #eadfdf;
	max-width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
	border: 1px solid var(--primary);
	width: 100%;
}
.loci i{
	color: var(--primary);
}
.locdcont p{
	margin-bottom: 0;
}
.locdcont p a{
	color: var(--text-color);
}
.locdcont h4{
	font-size: 20px;
    margin-bottom: 3px;
}
.coninform{
	background: #deffde;
	padding: 30px;
}
.con-sec{
	padding: 100px 0;
}
.getintouchform{
	padding: 30px;
}
/* vegcat */
.vegcat{
	position: relative;
}
.vegrecin .reccard {
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.10);
	margin-bottom: 20px;
}
.head-nav .menu-menu-1-container .navbar-nav{
	    flex-direction: row !important;
}
.contform form p label{
	width: 100%;
}
.contform form p{
	margin-bottom: 0;
}
.contform form p input[type="submit"]{
	    margin-bottom: 0;
    margin-top: 30px;
    background: var(--primary);
    color: var(--base);
}
/* new css */
 


/* receipedetails */
.blogstar{
	display: flex;
    align-items: center;
    gap: 12px;
}
.blogitem ul{
    margin-bottom: 0;
    gap: 5px;
}
.blogstar ul li i.active{
	color: #ffa80a;
}
.itembold{
	font-weight: 700;
}
.clientimg img{
	width: 80px;
}
.clientinbox{
	display: flex;
	gap: 20px;
}
.blogitem h2 a{
	color: var(--secondary1);
	font-size: 34px;
}
.blogitem .blogcard:hover {
    transform: none;
}
.blogitem .blogcard .blogimg{
	margin: 20px 0;
}
.blogitem .blogcard .blogup a, .blogitem .blogcard .blogup{
    color: var(--dark);
	margin-bottom: 20px;
}
.blogitem .blogcard .blogup .ad:after {
    background-color: var(--dark);
}
.blogitem h2{
	font-size: 23px;
}
.blogrecintro h4{
	font-size: 22px;
}
.blogimg1{
	margin-bottom: 10px;
}
.blogingreddirection h3{
	margin-bottom: 20px;
}
.clientcom h2{
	padding-bottom: 20px;
    position: relative;
    transition: 0.5s;
    display: inline-block;
}
.clientcom h2:before{
	content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--primary);
    width: 22%;
    height: 2px;
    border-radius: 3px;
    transition: 0.5s;
}
.clientcom h2:hover:before{
	width: 100%;
}
.clientdate .fa-calendar-days{
	color: var(--primary);
}
.clientcont p{
	margin-bottom: 0;
}
.crep .fa-reply{
	color: var(--primary);
	margin-right: 7px;
}
.crep{
	color: var(--secondary1);
}
.crep:hover{
	color: var(--primary);
}
.crevirew .clientbox:last-child>.clientinbox{
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.crevirew .clientbox>.clientinbox{
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid #D8DDE1;
}
.clientcom{
	background-color: #F8F8F8;
	padding: 50px;
	margin: 50px 0;
}
.crevirew{
	padding-top: 25px;
}
.concomment{
	margin-bottom: 0;
}
.searchitem form{
	position: relative;
}
.serachbut{
	background-color: var(--primary);
    width: 50px;
    height: 51px;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.serachbut span i{
	color: var(--base);
}
.goodfood{
	background: url('../images/resourses/blogrec.png') no-repeat 0 0;
	background-size: cover;
	text-align: center;
    padding: 30px;
}
.goodfoodcont{
	border: 1px solid var(--base);
    padding: 50px;
}
.goodfoodcont h6,.goodfoodcont h4{
	color: var(--base);
}
.goodfoodcont h4{
	font-size: 30px;
}
.posti{
	display: flex;
	gap: 10px;
}
.rpostcont h4 a{
	color: var(--secondary1);
	font-size: 18px;
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.rpostdate{
	font-size: 15px;
}
.rpostdate .fa-calendar-days{
	color: var(--primary);
	margin-right:0px;
}
.rpostimg img{
	width: 90px;
	height: 90px;
	object-fit: cover;
}
.postitem:hover .rpostcont h4 a{
	color: var(--primary);
}
.rightblogpost .postitem>.posti{
	margin-bottom: 20px;
}
.rightblogpost .postitem:last-child>.posti{
	margin-bottom: 0;
}
.rightpost h2{
	margin-bottom: 20px;
	font-size: 25px;
}
.blogcat ul li{
	display: flex;
	justify-content: space-between;
	background-color: var(--base);
    box-shadow: 0px 2px 4px rgba(2, 29, 53, 0.1);
    margin-bottom: 14px;
    padding: 17px 45px 17px 30px;
    transition: 0.4s ease-in-out;
}
.blogcat ul li:hover{
	background-color: var(--primary);
	color: var(--base);
}
.blogcat ul li:hover a{
	color: var(--base);
}

.blogcat ul li a{
	color: var(--secondary1);
}
.blogtags ul li a{
	color: var(--secondary1);
	
}
.blogtags ul li{
	display: inline-block;
    padding: 13px 20px 13px 20px;
    margin-right: 6px;
    margin-bottom: 10px;
    background-color: var(--base);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.06);
	transition: 0.5s;
}
.blogtags ul li:hover{
	background-color: var(--primary);
}
.blogtags ul li:hover a{
	color: var(--base);
}
.blogdirecblock h5{
	font-size: 18px;
}
.blogcat ul li a,.blogtags ul li a {
  font-size: 18px;
}
.searchitem{
	background-color: transparent;
	padding: 0;
}
.clientdate{
	font-size: 14px;
}
.blogreceipe .blogimg img{
	height: 1000px;
	object-fit: cover;
}
.blogincont ol{
	padding-left: 0 !important;
}
.blogincont ol li{
	list-style: none;
}
.blogincont h3{
	font-size: 23px;
}
.blogincont h4{
	font-size: 20px;
}
@media(max-width: 1399px){

    .rpostdate {
        font-size: 14px;
    }
}
@media (max-width: 1199px){
    .rpostdate {
        font-size: 12px;
    }
    .clientcom {
        padding: 30px;
    }
    .blogcat ul li a,.blogtags ul li a,.blogcat ul li{
        font-size: 16px;
      }
	.blogfood .searchitem{
		margin: 0;
		padding: 0;
		padding-bottom: 20px;
	}
	.blogincont ul li {
    font-size: 16px;
}
	.blogincont div span{
		font-size: 16px;
	}
	.blogincont h3{
		font-size: 23px;
	}
}
@media (max-width: 991px){
    .goodfood{
        margin-top: 0;
    }
    .searchitem{
        padding-bottom: 0;
        padding-top: 0;
      }
      
}
@media (max-width: 767px){
    .clientinbox{
        flex-wrap: wrap;
    }
	.blogreceipe .blogimg img {
		height: 882px ;
	}
}
@media (max-width: 575px){
    .blogitem h2 {
        font-size: 30px;
    }
    .clientdate{
        font-size: 14px;
    }
    
      .tagsec .clientcom {
        margin-bottom: 0;
      }
	    .blogreceipe .blogimg img {
        height: 500px;
    }
}
.rightb .clientcom{
	margin: 0;
}
.rightb .is-form-style input.is-search-input{
	        padding: 21px 12px !important;
}
.rightb  button.is-search-submit .is-search-icon{
	background: var(--primary) !important;
	border: none !important;
	    line-height: 2 !important;
    height: 44px !important;
	position: relative;
    top: -4px;
}
.rightb  .is-form-style .is-search-submit path {
    fill: var(--base);
}
.searchitem .is-form-style input.is-search-input{
	        padding: 21px 12px !important;
}

.searchitem button.is-search-submit .is-search-icon{
	background: var(--primary) !important;
	border: none !important;
	    line-height: 2 !important;
    height: 44px !important;
	position: relative;
    top: -4px;
}
.searchitem .is-form-style .is-search-submit path {
    fill: var(--base);
}


/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination a, .pagination span {
    color: #333;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color 0.3s;
    border: 1px solid #ddd;
    margin: 0 2px;
}

.pagination a {
    background-color: #f4f4f4;
}

.pagination a:hover {
    background-color: #ddd;
}

.pagination .current {
    background-color: var(--primary);
    color: white;
    border: 1px solid var(--primary);
}

.pagination .current:hover {
    background-color: #0073aa;
}

.pagination .prev, .pagination .next {
    background-color: #f4f4f4;
    color: #333;
    border: 1px solid #ddd;
}

.pagination .prev:hover, .pagination .next:hover {
    background-color: #ddd;
}
.blogimg img, .portimg img, .reccardimg img{
	height: 438px;
	object-fit: cover;
}

.blogincont ul li{
	position: relative;
	padding-left: 10px;
}
.blogincont ul li:before{
	content: "";
    position: absolute;
    top: 13px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dark);
}
.menucont{
	padding: 0 10px;
}
.fotcol{
	display: flex;
    align-items: center;
    justify-content: space-between;
}
.head-logo{
	width: 18%;
	margin-right: 18px;
}
.darkcont h5:before {
    background: url(../images/resourses/whp.png);
    background-size: cover;
}