/* Mobile First Responsive Design */

/* Base Mobile Styles - Default */
.container {
	max-width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

.ptb {
	padding-top: 50px;
	padding-bottom: 50px;
}

.pt-50 {
	padding-top: 10px;
}

.pt-100 {
	padding-top: 50px;
}

.pb-50 {
	padding-bottom: 20px;
}

/* Banner Styles - Mobile */
.banner {
	min-height: 300px;
}

.banner .owl-item {
	min-height: 300px;
}

.banner-headding {
	font-size: 35px;
}

.banner-sub-hed {
	letter-spacing: 1px;
	font-size: 18px;
}

.banner-text {
	top: 90px;
}

/* Menu and Navigation - Mobile */
.headding-part .headding-title {
	font-size: 30px;
	line-height: 30px;
}

.headding-part .headding-sub {
	font-size: 20px;
}

/* Layout adjustments for mobile */
.order-top {
	top: -20px;
}

.order-bottom {
	bottom: -20px;
}

/* Mobile Header Fixes - Apply to all mobile devices */
@media (max-width: 767px) {
	/* Hide desktop navigation items on mobile */
	.header-right-link > ul > li.nav-link-item {
		display: none;
	}

	.header-right-link > ul > li.call-icon {
		display: none;
	}

	/* Optimize spacing between header icons */
	.header-right-link > ul > li {
		padding: 0 3px !important;
	}

	/* Keep cart icon visible with proper spacing */
	.header-right-link > ul > li.cart-icon {
		display: inline-block;
		padding: 0 8px !important;
	}

	.header-right-link > ul > li.cart-icon > a .link-text {
		display: none;
	}

	.header-right-link > ul > li.cart-icon > a {
		position: relative;
		padding: 8px !important;
	}

	.header-right-link > ul > li.cart-icon > a span.icon {
		display: block;
		background-position: -9px -14px;
		height: 22px;
		width: 22px;
	}

	/* Fix badge positioning to prevent cutoff */
	.header-right-link > ul > li.cart-icon > a::after {
		content: attr(data-cart-count);
		position: absolute;
		top: 0px;
		right: -2px;
		background: #fd9d3e;
		color: white;
		border-radius: 50%;
		width: 16px;
		height: 16px;
		font-size: 10px;
		text-align: center;
		line-height: 16px;
		font-weight: bold;
		min-width: 16px;
		z-index: 10;
	}

	/* Style login button as smaller circle icon */
	.header-right-link > ul > li.order-online {
		padding: 0 5px !important;
	}

	.header-right-link > ul > li.order-online .btn {
		padding: 8px !important;
		font-size: 0 !important;
		min-width: 34px !important;
		width: 34px !important;
		height: 34px !important;
		border-radius: 50% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		border: none !important;
		background: #fd9d3e !important;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
	}

	.header-right-link > ul > li.order-online .btn:hover {
		background: #e4964d !important;
		transform: scale(1.05) !important;
		transition: all 0.2s ease !important;
	}

	.header-right-link > ul > li.order-online .btn i {
		font-size: 16px !important;
		margin: 0 !important;
		color: white !important;
	}

	/* Hide all text from login button */
	.header-right-link > ul > li.order-online .btn .btn-text,
	.header-right-link > ul > li.order-online .btn span.btn-text {
		display: none !important;
	}

	/* Authenticated user dropdown styling */
	.header-right-link > ul > li.order-online .dropdown .btn {
		padding: 8px !important;
		font-size: 0 !important;
		min-width: 34px !important;
		width: 34px !important;
		height: 34px !important;
		border-radius: 50% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		border: none !important;
		background: #fd9d3e !important;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
	}

	.header-right-link > ul > li.order-online .dropdown .btn i {
		font-size: 16px !important;
		margin: 0 !important;
		color: white !important;
	}

	/* Hide dropdown arrow */
	.header-right-link > ul > li.order-online .dropdown .btn::after {
		display: none !important;
	}

	/* Hide user name text */
	.header-right-link > ul > li.order-online .dropdown .btn .btn-text {
		display: none !important;
	}
}

/* Mobile Footer Fixes */
@media (max-width: 767px) {
	footer .footer-box {
		margin-bottom: 30px;
		text-align: center;
	}

	footer .footer-box:last-child {
		margin-bottom: 0;
	}

	footer .footer-logo {
		text-align: center;
	}

	footer .footer-logo p.footer-des {
		text-align: center;
	}

	footer .footer-logo ul {
		text-align: center;
		list-style: none;
		padding: 0;
	}

	footer .footer-logo ul li {
		text-align: center;
	}

	footer .opening-hours {
		text-align: center;
	}

	footer .opening-hours h2 {
		text-align: center;
	}

	footer .opening-hours ul {
		text-align: center;
		list-style: none;
		padding: 0;
	}

	footer .opening-hours ul li {
		text-align: center;
	}

	footer .useful-links {
		text-align: center;
	}

	footer .useful-links h2 {
		text-align: center;
	}

	footer .useful-links ul {
		text-align: center;
		list-style: none;
		padding: 0;
	}

	footer .useful-links ul li {
		text-align: center;
	}

	footer .copyright {
		text-align: center;
	}

	footer .copyright .row > div {
		margin-bottom: 15px;
		text-align: center;
	}

	footer .copyright .row > div:last-child {
		margin-bottom: 0;
	}

	footer .copyright ul {
		justify-content: center;
		text-align: center;
	}

	footer .copyright p.copy-text {
		text-align: center;
	}
}

.menu-top-bg {
	top: -15px;
}

.menu-bottom-bg {
	bottom: -23px;
}

.chef-top-bg {
	top: -55px;
}

.chef-bottom-bg {
	bottom: -60px;
}

.customer-top-bg {
	top: -15px;
}

.customer-bottom-bg {
	bottom: -3px;
}


/* Tablet Portrait - 481px and up */
@media (min-width: 481px) {
	.banner {
		min-height: 400px;
	}

	.banner .owl-item {
		min-height: 400px;
	}

	.banner-headding {
		font-size: 50px;
	}

	.banner-text {
		top: 100px;
	}

	.order-top {
		top: -30px;
	}

	.order-bottom {
		bottom: -30px;
	}

	.menu-top-bg {
		top: -20px;
	}

	.menu-bottom-bg {
		bottom: -35px;
	}

	.chef-top-bg {
		top: -95px;
	}

	.chef-bottom-bg {
		bottom: -90px;
	}
}


/* Tablet Landscape - 768px and up */
@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}

	.ptb {
		padding-top: 65px;
		padding-bottom: 65px;
	}

	.pt-50 {
		padding-top: 20px;
	}

	.pt-100 {
		padding-top: 65px;
	}

	.banner {
		min-height: 500px;
	}

	.banner .owl-item {
		min-height: 500px;
	}

	.banner-headding {
		font-size: 90px;
	}

	.banner-text {
		top: 100px;
	}

	.headding-part .headding-title {
		font-size: 50px;
		line-height: 45px;
	}

	.headding-part .headding-sub {
		font-size: 25px;
	}

	/* Layout improvements */
	.order-section .order-title {
		font-size: 25px;
		padding-bottom: 5px;
	}

	.speciality-img {
		width: 200px;
		height: 200px;
	}

	.speciality-img .spec-image {
		width: 200px;
		height: 200px;
	}

	/* Page specific adjustments */
	.page-banner {
		padding-top: 115px;
		padding-bottom: 70px;
	}

	.page-headding {
		font-size: 42px;
	}
}


/* Desktop Small - 992px and up */
@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}

	.pb-50 {
		padding-bottom: 35px;
	}

	.com-btn {
		padding: 12px 30px;
		margin-top: 30px;
	}

	/* Navigation improvements */
	.mobilemenu-content,
	.nav > li.level:hover .megamenu {
		display: block !important;
	}

	.megamenu {
		display: block !important;
		opacity: 0;
		visibility: hidden;
		top: calc(100% + 10px);
	}

	.nav > li.level:hover .megamenu {
		opacity: 1;
		visibility: visible;
		top: 100%;
	}

	/* Header improvements */
	header#header.sticky .navbar-brand img {
		max-width: 150px;
	}

	.sticky .navbar-nav > li > a {
		padding-top: 25px;
		padding-bottom: 25px;
	}

	/* Banner adjustments */
	.banner {
		min-height: 630px;
	}

	.banner .owl-item {
		min-height: 630px;
	}

	.banner-headding {
		font-size: 120px;
	}

	.banner-text {
		top: 130px;
	}

	.headding-part .headding-title {
		font-size: 60px;
	}

	.speciality-img {
		width: 280px;
		height: 280px;
	}

	.speciality-img .spec-image {
		width: 280px;
		height: 280px;
	}

	/* Layout adjustments */
	.order-section .padding-lf {
		padding: 0px 20px;
	}

	.order-top {
		top: -40px;
	}

	.order-bottom {
		bottom: -40px;
	}

	.menu-top-bg {
		top: -40px;
	}

	.menu-bottom-bg {
		bottom: -70px;
	}

	.chef-top-bg {
		top: -190px;
	}

	.chef-bottom-bg {
		bottom: -190px;
	}

	.customer-top-bg {
		top: -42px;
	}

	.customer-bottom-bg {
		bottom: 0px;
	}

	/* Page specific */
	.page-banner {
		padding-top: 125px;
		padding-bottom: 80px;
	}
}




/* Desktop Medium - 1200px and up */
@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}

	.banner {
		min-height: 800px;
	}

	.banner .owl-item {
		min-height: 800px;
	}

	.banner-headding {
		font-size: 150px;
	}

	.banner-text {
		top: 150px;
	}

	.headding-part .headding-title {
		font-size: 70px;
		line-height: 58px;
	}

	.headding-part .headding-sub {
		font-size: 30px;
	}

	.speciality-img {
		width: 350px;
		height: 350px;
	}

	.speciality-img .spec-image {
		width: 350px;
		height: 350px;
	}

	/* Layout improvements */
	.order-section .padding-lf {
		padding: 0px 60px;
	}

	.order-top {
		top: -80px;
	}

	.order-bottom {
		bottom: -75px;
	}

	.menu-top-bg {
		top: -50px;
	}

	.menu-bottom-bg {
		bottom: -90px;
	}

	.chef-top-bg {
		top: -231px;
	}

	.chef-bottom-bg {
		bottom: -231px;
	}

	.customer-top-bg {
		top: -45px;
	}

	.customer-bottom-bg {
		bottom: 0px;
	}
}


/* Desktop Large - 1500px and up */
@media (min-width: 1500px) {
	.container {
		max-width: 1230px;
	}

	.speciality-img {
		width: 380px;
		height: 380px;
	}

	.speciality-img .spec-image {
		width: 380px;
		height: 380px;
	}

	/* Enhanced spacing for large screens */
	.order-top {
		top: -90px;
	}

	.order-bottom {
		bottom: -95px;
	}

	.menu-top-bg {
		top: -80px;
	}

	.menu-bottom-bg {
		bottom: -150px;
	}

	.chef-top-bg {
		top: -371px;
	}

	.chef-bottom-bg {
		bottom: -381px;
	}

	.customer-top-bg {
		top: -75px;
	}

	.customer-bottom-bg {
		bottom: -7px;
	}

}