/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Roast - Coffee Shop & Cafe HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. Scrolling Ticker css
06. About Us css
07. Why Choose Us css
08. Intro Video css
09. Our Pricing css
10. Interactive Process css
11. Our Offers css
12. About Restaurant css
13. Our Testimonials css
14. CTA Box css
15. Footer css
16. About Us Page css
17. Services Page css
18. Service Single css
19. Menu Page css
20. Blog Archive css
21. Blog Single css
22. Projects Page css
23. Projects Single css
24. Team Page css
25. Team Single css
26. Image Gallery css
27. Video Gallery css
28. FAQs Page css
29. Contact Us Page css
30. Book Table Page css
31. 404 Error Page css
32. Responsive css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root{
	--primary-color				: #FFFFFF;
	--secondary-color			: #121D23;
	--text-color				: #CECECE;
	--accent-color				: #C9A581;
	--accent-secondary-color	: #E4CCB4;
	--divider-color				: #FFFFFF24;
	--dark-divider-color		: #FFFFFF1A;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "Jost", serif;
	--accent-font				: "Forum", serif;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

body{
	font-family: var(--default-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 1em;
	background-color: var(--secondary-color);
	color: var(--text-color);
}

::-webkit-scrollbar-track{
	background-color: var(--primary-color);
	border-left: 1px solid var(--primary-color);
}
::-webkit-scrollbar{
	width: 7px;
	background-color: var(--primary-color);
}
::-webkit-scrollbar-thumb{
	background: var(--accent-color);
}

::selection{
	color: var(--secondary-color);
	background-color: var(--primary-color);
	filter: invert(1);
}

p{
	line-height: 1.6em;
	margin-bottom: 1.4em;
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin : 0;
	font-weight: 500;
	line-height: 1.2em;
	color: var(--primary-color);
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
    text-decoration: none;
    color: inherit;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

html,
body{
	width: 100%;
	overflow-x: clip;
}

.container{
	max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
    padding-right: 15px;
    padding-left: 15px;
}

.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.row > *{
	padding-right: 15px;
	padding-left: 15px;
}

.row.no-gutters{
    margin-right: 0px;
    margin-left: 0px;
}

.row.no-gutters > *{
    padding-right: 0px;
    padding-left: 0px;
}

.btn-default{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1em;
	text-transform: capitalize;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	color: var(--secondary-color);
	border: none;
	border-radius: 100px;
	padding: 17px 30px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.btn-default:hover{
	background-position: right center;
}

.btn-default.btn-highlighted{
	background: transparent;
	border: 1px solid var(--accent-color);
	color: var(--accent-color);
	padding: 16px 30px;
}

.btn-default.btn-highlighted:hover{
	color: var(--secondary-color);
}

.btn-default.btn-highlighted:before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
  	left: 50%;
  	right: 50%;
  	opacity: 0;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	border-radius: 100px;
	transition: all 0.4s ease-in-out;
	z-index: -1;
}

.btn-default.btn-highlighted:hover:before{
	left: -5px;
  	right: -5px;
	opacity: 1;
}

.readmore-btn{
	position: relative;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4em;
	color: var(--accent-color);
	text-transform: capitalize;
	display: inline-block;
	padding-right: 30px;
	transition: all 0.4s ease-in-out;
}

.readmore-btn::before{
	content: '\f178';
    position: absolute;
	right: 0;
    top: 50%;
	font-family: 'Font Awesome 6 Free';
    font-size: 16px;
    line-height: normal;
    font-weight: 600;
	color: var(--accent-color);
	background-position: center center;
	border-radius: 50%;
	transform: translate(-3px, -50%);
	transition: all 0.4s ease-in-out;
}

.readmore-btn:hover{
	color: var(--primary-color);
}

.readmore-btn:hover::before{
	color: var(--primary-color);
	transform: translate(0, -50%);
}

.cb-cursor:before{
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-container,
.loading{
	height: 100px;
	position: relative;
	width: 100px;
	border-radius: 100%;
}

.loading-container{
	margin: 40px auto;
}

.loading{
	border: 1px solid transparent;
	border-color: transparent var(--secondary-color) transparent var(--secondary-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading{
	transition: all 0.5s ease-in-out;
}

#loading-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 500px;
	transform: translate(-50%, -50%);
}

@keyframes rotate-loading{
	0%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}

.light-bg-section{
	position: relative;
}

.light-bg-section::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: var(--primary-color);
	opacity: 2%;
	z-index: 0;
}

.light-bg-section .container{
	position: relative;
	z-index: 1;
}

.section-row{
	margin-bottom: 80px;
}

.section-row .section-title{
	margin-bottom: 0;
}

.section-row .section-title{
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	text-align: center;
}

.section-btn{
	text-align: end;
}

.section-title-content p{
	margin: 0;
}

.section-title{
	margin-bottom: 40px;
}

.section-title h3{
	position: relative;
	display: inline-block;
	font-size: 16px;
    font-weight: 500;
	line-height: 1.6em;
    text-transform: capitalize;
    color: var(--primary-color);
	padding-left: 30px;
    margin-bottom: 10px;
}

.section-title h3::before{
	content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url('../images/icon-sub-heading.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    width: 20px;
    height: 20px;
}

/* Override for Choco Series heading icon */
.section-title.section-title--choco h3::before{
    background: url('../images/icon-choco.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    width: 20px;
    height: 20px;
}

/* Override for Matcha Series heading icon */
.section-title.section-title--matcha h3::before{
    background: url('../images/icon-matcha-series.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    width: 20px;
    height: 20px;
}

/* Override for Tea Series heading icon */
.section-title.section-title--tea h3::before{
    background: url('../images/icon-tea-series.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    width: 20px;
    height: 20px;
}

/* Override for Signature Drinks heading icon */
.section-title.section-title--signature h3::before{
    background: url('../images/icon-signature-series.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    width: 20px;
    height: 20px;
}

/* Override for Bread & Pastries heading icon */
.section-title.section-title--bread h3::before{
    background: url('../images/icon-bread-pastries.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    width: 20px;
    height: 20px;
}

/* Override for Brownies, Cookies & Pies heading icon */
.section-title.section-title--cookies h3::before{
    background: url('../images/icon-cookies.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    width: 20px;
    height: 20px;
}

/* Override for Food of the Day heading icon */
.section-title.section-title--food h3::before{
    background: url('../images/icon-food.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    width: 20px;
    height: 20px;
}

/* Override for Sereni Tea heading icon */
.section-title.section-title--sereni h3::before{
    background: url('../images/icon-fruit.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    width: 20px;
    height: 20px;
}

/* Override for Beverages heading icon */
.section-title.section-title--beverages h3::before{
    background: url('../images/icon-can.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    width: 20px;
    height: 20px;
}

.section-title h1{
	font-family: var(--accent-font);
	font-size: 70px;
	text-transform: uppercase;
	font-weight: 400;
	line-height: 1.1em;
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-family: var(--accent-font);
	font-size: 44px;
	text-transform: uppercase;
	font-weight: 400;
	margin-bottom: 0;
	cursor: none;
}

.section-title p{
	margin-top: 20px;
	margin-bottom: 0;
}

.help-block.with-errors ul{
	margin: 0;
	text-align: left;
}

.help-block.with-errors ul li{
	color: var(--error-color);
	font-weight: 500;
	font-size: 14px;
}

/************************************/
/**** 	   03. Header css		 ****/
/************************************/

.topbar{
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	padding: 10px 0;
}

.topbar-contact-info ul{
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
	gap: 30px;
}

.topbar-contact-info ul li{
	font-size: 16px;
	color: var(--secondary-color);
    display: flex;
    align-items: center;
}

.topbar-contact-info ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.topbar-contact-info ul li a:hover{
	color: var(--primary-color);
}

.topbar-contact-info ul li img{
	width: 100%;
	max-width: 20px;
	margin-right: 10px;
	transition: all 0.3s ease-in-out;
}

.topbar-contact-info ul li a:hover img{
	filter: brightness(0) invert(1);
}

.topbar-social-links{
	text-align: right;
}

.topbar-social-links ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.topbar-social-links ul li{
	display: inline-block;
	border-right: 1px solid var(--secondary-color);
	margin-right: 15px;
	padding-right: 15px;
}

.topbar-social-links ul li:last-child{
	border-right: none;
	margin-right: 0px;
	padding-right: 0px;
}

.topbar-social-links ul li a{
	color: inherit;
}

.topbar-social-links ul li a i{
	font-size: 18px;
	color: var(--secondary-color);
	transition: all 0.3s ease-in-out;
}

.topbar-social-links ul li a:hover i{
	color: var(--primary-color);
}

header.main-header{
	position: relative;
	z-index: 100;
}

header.main-header .header-sticky{
	position: relative;
	top: 0;
	z-index: 100;
}

header.main-header .header-sticky.hide{
	top: -110px;
	/* transform: translateY(-100%); */
	transition: transform 0.4s ease-in-out;
}

header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-radius: 0;
    /* transform: translateY(0); */
	background-color: var(--secondary-color);
	border-bottom: 1px solid var(--divider-color);
}

.navbar{
	padding: 20px 0;
	align-items: center;
}

.navbar-brand{
	padding: 0;
	margin: 0;
}

.navbar-brand img{
	max-height: 170px;
	width: auto;
}

.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: right;
	margin: 0 60px;
}

.main-menu .nav-menu-wrapper > ul{
	align-items: center;
	display: inline-flex;
}

.main-menu ul li{
	margin: 0;
	position: relative;
}

.main-menu ul li.nav-item a{
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: normal;
	padding: 15px !important;
	color: var(--primary-color);
	text-transform: uppercase;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu > a:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
	margin-top: 4px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-color);
}

.main-menu ul ul{
	visibility: hidden;
	opacity: 0;
	transform: scaleY(0.8);
	transform-origin: top;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 230px;
	border-radius: 20px;
	position: absolute;
	left: 0;
	top: 100%;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	text-align: left;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu:first-child ul{
    width: 230px;
}

.main-menu ul ul ul{
	left: 100%;
	top: 0;
	text-align: left;
}
.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scaleY(1);
    padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu > a:after{
    content: '\f105';
    float: right;
}

.main-menu ul ul li{
	margin: 0;
	padding: 0;
}

.main-menu ul ul li.nav-item a{
	color: var(--secondary-color);
	padding: 6px 20px !important;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scaleY(1);
    padding: 5px 0;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--primary-color);
	background-color: transparent;
	padding: 6px 20px 6px 23px !important;
}

.main-menu ul li.highlighted-menu{
    display: none;
}

.header-button-box{
	display: flex;
	align-items: center;
}

.header-sidebar-btn .btn-popup{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	z-index: 100;
}

.header-sidebar-btn .offcanvas-backdrop{
	z-index: 100;
}

.header-sidebar-btn .btn-popup{
	padding: 0;
	margin-left: 40px;
	border: none;
}

.header-sidebar-btn .btn-popup img{
	max-width: 36px;
}

body:has(:not(.offcanvas)){
	padding-right: initial !important;
}

body:has(.offcanvas){
	padding-right: 0 !important;
}

.header-sidebar-btn .offcanvas{
	position: fixed;
	top: 0;
	bottom: 0;
	left: auto;
	right: -15px;
	background: var(--primary-color) !important;
	border-radius: 0;
	opacity: 100%;
	width: 100% !important;
	height: 100% !important;
	max-width: 650px;
	border: none;
	padding: 200px 130px 60px;
	transform: translateX(100%) !important;
	z-index: 101;
	transition: all 0.3s ease-in-out !important;
}

.offcanvas.show:not(.hiding),
.offcanvas.showing{
    transform: translateX(0) !important;
}

.navbar-expand-lg .offcanvas .offcanvas-body{
	text-align: center;
	display: block;
}

.header-sidebar-btn .offcanvas .btn-close{
	position: absolute;
	top: 60px;
	right: 60px;
	background-color: var(--accent-color);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 100%;
	box-shadow: none;
	padding: 0;
	transition: all 0.4s ease-in-out;
}

.header-sidebar-btn .offcanvas .btn-close:hover{
	background-color: var(--accent-secondary-color);
}

.header-title-box,
.header-sidebar-info{
	background: url(../images/icon-coffee-beans.svg) no-repeat;
	background-position: center bottom 27px;
	background-size: 16px auto;
	padding-bottom: 70px;
}

.header-title-box h2{
	font-family: var(--accent-font);
	font-size: 44px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--accent-color);
	margin-bottom: 10px;
}

.header-title-box p{
	color: var(--secondary-color);
	margin-bottom: 0;
}

.header-sidebar-info h2{
	font-size: 34px;
	font-weight: 600;
	color: var(--accent-color);
	margin-bottom: 30px;
}

.header-sidebar-info h2 a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.header-sidebar-info h2 a:hover{
	color: var(--secondary-color);
}

.header-sidebar-info ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.header-sidebar-info ul li a:hover{
	color: var(--accent-secondary-color);
}

.header-sidebar-info ul,
.header-sidebar-timing ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-sidebar-info ul li,
.header-sidebar-timing ul li{
	margin-bottom: 15px;
}

.header-sidebar-info ul li:last-child,
.header-sidebar-timing ul li:last-child{
	margin-bottom: 0;
}

.header-sidebar-social-list{
	margin-top: 60px;
}

.header-sidebar-social-list ul{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-sidebar-social-list ul li{
	line-height: 1em;
	margin-right: 15px;
	padding-right: 15px;
	border-right: 1px solid var(--secondary-color);
}

.header-sidebar-social-list ul li:last-child{
	margin-right: 0;
	padding-right: 0;
	border-right:  none;
}

.header-sidebar-social-list ul li a{
	color: inherit;
}

.header-sidebar-social-list ul li i{
	font-size: 20px;
	color: var(--secondary-color);
	transition: all 0.4s ease-in-out;
}

.header-sidebar-social-list ul li:hover i{
	color: var(--accent-color);
}

.responsive-menu,
.navbar-toggle{
	display: none;
}

.responsive-menu{
	top: 0;
	position: relative;
}

.slicknav_btn{
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 8px;
	transition: all 0.3s ease-in-out;
}

.navbar-toggle a.slicknav_btn.slicknav_open{
	background-position: right center;
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--secondary-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child{
	margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child{
	margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu{
	position: absolute;
    width: 100%;
	padding: 0;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: capitalize;
	padding: 6px 20px;
	color: var(--secondary-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: transparent;
	color: var(--primary-color);
}

.slicknav_menu ul ul li a{
    padding: 6px 20px 6px 30px;
}

.slicknav_arrow{
	font-size: 0 !important;
}

.slicknav_arrow:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--dark-color);
	position: absolute;
	right: 15px;
    top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
    transform: translateY(-50%) rotate(-180deg);
	color: var(--secondary-color);
}

/************************************/
/***        04. Hero css	      ***/
/************************************/

.hero{
	position: relative;
	background: url('../images/hero-bg.jpg') no-repeat;
	background-position: center center;
	background-size: auto;
	padding: 210px 0;
}

.hero::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: var(--secondary-color);
	opacity: 80%;
	z-index: 1;
}

.hero.hero-video .hero-bg-video{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.hero.hero-video .hero-bg-video video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider-layout{
	background: none;
	padding: 0;
}

.hero.hero-slider-layout .hero-slide{
	position: relative;
	background: url('../images/hero-bg.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
    padding: 210px 0;
}

.hero.hero-slider-layout .hero-slide.slide-2{
	background: url('../images/hero-bg-2.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.hero.hero-slider-layout .hero-slide::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: var(--secondary-color);
	opacity: 80%;
	z-index: 1;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider-layout .hero-pagination{
	position: absolute;
    bottom: 50px;
	padding-left: calc(((100vw - 1300px) / 2) + 15px);
	z-index: 2;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background: var(--divider-color);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    margin: 0 5px;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active{
    background: var(--accent-color);
}

.hero-content{
	position: relative;
	z-index: 2;
}

/* Translucent background for hero texts */
.hero-with-text-bg .section-title {
    display: block;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.hero-with-text-bg .section-title > h3,
.hero-with-text-bg .section-title > h1,
.hero-with-text-bg .section-title > h2,
.hero-with-text-bg .section-title > p {
    display: inline-block;
    background: rgba(18, 29, 35, 0.22);
    padding: 8px 12px;
    border-radius: 6px;
    margin: 0 0 8px 0;
}

.hero-with-text-bg .hero-btn {
    margin-top: 24px;
}

.hero-btn{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

/************************************/
/***   05. Scrolling Ticker css   ***/
/************************************/

.our-scrolling-ticker{
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	padding: 25px 0;
}

.scrolling-ticker-box{
	--gap: 30px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	align-items: center;
}

.scrolling-content{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll 50s linear infinite;
}

.scrolling-content span{
	font-family: var(--accent-font);
	display: inline-flex;
	align-items: center;
	font-size: 44px;
	line-height: 1.2em;
	text-transform: uppercase;
	color: var(--secondary-color);
	vertical-align: middle;
}

.scrolling-content span img{
	width: 100%;
	max-width: 30px;
	margin-right: 30px;
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}

	to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}

/************************************/
/***       06. About Us css	      ***/
/************************************/

.about-us{
	background: url(../images/about-bg-image.png) no-repeat;
	background-position: top center;
	background-size: 100% auto;
	padding: 100px 0;
}

.about-us-content{
	margin-right: 50px;
}

.about-body-item{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.about-body-item:last-child{
	margin-bottom: 0;
}

.about-body-item .icon-box{
	position: relative;
	width: 60px;
	height: 60px;
	background: var(--dark-divider-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 30px;
}

.about-body-item .icon-box::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-body-item:hover .icon-box::before{
	transform: scale(1);
}

.about-body-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.about-body-item:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.about-body-list-content{
	width: calc(100% - 90px);
}

.about-body-list-content h3{
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.about-body-list-content p{
	margin-bottom: 0;
}

.about-us-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
	margin-top: 60px;
}

.video-play-button{
	display: inline-flex;
    align-items: center;
    justify-content: center;
}

.video-play-button a{
	position: relative;
	height: 50px;
	width: 50px;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	border: 1px solid var(--accent-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: none;
	margin-right: 30px;
}

.video-play-button a:before{
	content: '';
	position: absolute;
	top: -53%;
	left: -53%;
	width: 160%;
	height: 160%;
	border: 50px solid var(--divider-color);
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.video-play-button a:after{
	content: '';
	position: absolute;
	top: -53%;
	left: -53%;
	width: 160%;
	height: 160%;
	border: 50px solid var(--divider-color);
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
	animation-delay: .3s;
}

@keyframes border-zooming{
	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.video-play-button i{
	font-size: 18px;
	color: var(--secondary-color);
	margin-left: 3px;
}

.video-play-button p{
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	color: var(--primary-color);
	margin: 0;
}

.about-us-image{
	position: relative;
	padding-left: 70px;
}

.about-us-img figure{
	border-radius: 400px 400px 0 0;
	display: block;
}

.about-us-img img{
	width: 100%;
	aspect-ratio: 1 / 1.237;
	object-fit: cover;
	border-radius: 400px 400px 0 0;
}

.opening-time-box{
	position: absolute;
	bottom: 50px;
	left: 0;
	width: 100%;
	max-width: 320px;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border-radius: 26px;
	padding: 30px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.opening-time-box:hover{
	background-position: right center;
}

.opening-time-box .icon-box{
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--secondary-color);
	border-radius: 50%;
	margin-bottom: 15px;
}

.opening-time-box .icon-box i{
	font-size: 24px;
	color: var(--primary-color);
}

.opening-time-content h3{
	font-size: 22px;
	text-transform: capitalize;
	color: var(--secondary-color);
	margin-bottom: 20px;
}

.opening-time-content ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.opening-time-content ul li{
	color: var(--secondary-color);
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}

.opening-time-content ul li:last-child{
	margin-bottom: 0;
}

.opening-time-content ul li span{
	width: 45%;
}

/************************************/
/***     07. Why Choose Us css    ***/
/************************************/

.why-choose-us{
	position: relative;
	padding: 100px 0;
}

.why-choose-us::before{
	content: '';
	position: absolute;
	bottom: 125px;
	left: -60px;
	width: 460px;
	height: 450px;
	background-image: url('../images/why-chose-us-bg.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.why-choose-content{
	position: sticky;
	top: 20px;
	margin-right: 20px;
}

.why-choose-list{
	display: flex;
	flex-wrap: wrap;
}

.why-choose-item{
	width: 50%;
    padding: 30px 30px 30px 0;
    border-bottom: 1px solid var(--divider-color);
    border-right: 1px solid var(--divider-color);
}

.why-choose-item:nth-of-type(2n + 2){
    padding: 30px 0 30px 30px;
    border-right: none;
}

.why-choose-item:nth-last-child(-n + 2){
    padding-bottom: 0;
    border-bottom: none;
}

.why-choose-item:nth-child(-n + 2){
    padding-top: 0;
}

.why-choose-item .icon-box{
    position: relative;
    background-color: var(--dark-divider-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 20px;
}

.why-choose-item .icon-box::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.why-choose-item:hover .icon-box::before{
    transform: scale(1);
}

.why-choose-item .icon-box img{
    max-width: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.why-choose-item:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.why-choose-item-content h3{
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.why-choose-item-content p{
	margin: 0;
}

/************************************/
/***      08. Intro Video css     ***/
/************************************/

.intro-video{
	position: relative;
	padding: 200px 0 100px;
	background-image: url('../images/journey.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.intro-video:before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	width: 100%;
	height: 100%;
    background: var(--secondary-color);
    opacity: 80%;
	z-index: 0;
}

.intro-video .container{
	position: relative;
	z-index: 1;
}

.intro-video-content .section-title{
	margin-bottom: 0;
}

.intro-video-content .section-title h3{
	color: var(--accent-color);
}

.intro-video-box.about-intro-video{
	text-align: end;
}

.intro-video-box.about-intro-video .video-play-button p{
	font-size: 20px;
}

.intro-video-counters{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-top: 1px solid var(--divider-color);
	margin-top: 200px;
	padding-top: 40px;
}

.video-counter-item{
	width: calc(25% - 22.5px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.video-counter-item .icon-box{
	position: relative;
	width: 60px;
	height: 60px;
	background: var(--dark-divider-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
}

.video-counter-item .icon-box::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.video-counter-item:hover .icon-box::before{
	transform: scale(1);
}

.video-counter-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.video-counter-item:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.video-counter-content{
	width: calc(100% - 80px);
}

.video-counter-content h2{
	font-family: var(--accent-font);
	font-size: 44px;
}

.video-counter-content p{
	color: var(--primary-color);
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/***      09. Our Pricing css     ***/
/************************************/

.our-pricing{
	background: url(../images/pricing-bg-image.png) no-repeat;
	background-position: center center;
	background-size: 100% auto;
	padding: 100px 0;
}

.our-support-nav{
	margin-bottom: 80px;
}

.our-pricing-box .nav-tabs{
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 30px;
	background: var(--secondary-color);
	border: none;
}

.our-pricing-box ul li button{
	border: none;
}

.our-pricing-box .nav-tabs .nav-item .btn-default.btn-highlighted.active{
	color: var(--secondary-color);
}

.our-pricing-box .nav-tabs .nav-item .btn-default.btn-highlighted.active:before,
.our-pricing-box .nav-tabs .nav-item .btn-default.btn-highlighted:focus:before{
	left: -5px;
    right: -5px;
    opacity: 1;
}

.pricing-image{
	margin-right: 95px;
}

.pricing-image figure{
	display: block;
	border-radius: 400px 400px 0 0;
}

.pricing-image img{
	width: 100%;
	aspect-ratio: 1 / 1.296;
	object-fit: cover;
	border-radius: 400px 400px 0 0;
}

.menu-list-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px dashed var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.menu-list-item:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.menu-list-image{
	margin-right: 30px;
}

.menu-list-image figure{
	display: block;
	max-width: 100px;
	border-radius: 50%;
}

.menu-list-image img{
	width: 100%;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.menu-item-body{
	width: calc(100% - 130px);
}

.menu-item-title{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 10px;
}

.menu-item-title h3{
	font-family: var(--accent-font);
	width: 100%;
	font-size: 22px;
	max-width: fit-content;
	text-transform: uppercase;
}

.menu-item-title hr{
	height: 1px;
	width: 40%;
	color: var(--dark-divider-color);
	border-style: dashed;
	margin: 0;
	opacity: 1;
}

.menu-item-title span{
	font-weight: 700;
	font-size: 16px;
	color: var(--accent-color);
}

.menu-item-content p{
	margin: 0;
}

.section-footer-text{
	margin-top: 80px;
	text-align: center;
}

.section-footer-text p{
	text-transform: capitalize;
	margin-bottom: 0;
}

.section-footer-text p a{
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--accent-color);
	transition: all 0.4s ease-in-out;
}

.section-footer-text p a:hover{
	color: var(--primary-color);
}

/************************************/
/***  10. Interactive Process css ***/
/************************************/

.interactive-process-layout .interactive-process-item{
	width: 25%;
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-right: 1px solid var(--dark-divider-color);
    position: relative;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    overflow: hidden
}

.interactive-process-layout .interactive-process-item:nth-child(4n + 4){
	border-right: none;
}

.interactive-process-layout .interactive-inner-process{
    padding: 580px 0 0;
    position: relative;
    z-index: 3
}

.process-content-wap{
	position: relative;
	padding: 40px 40px 30px;
	-ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.process-content-wap::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(0deg, var(--secondary-color) 5%, transparent 95%);
	height: 0;
	width: 100%;
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.interactive-process-layout .interactive-inner-process.activate .process-content-wap::before{
	height: 100%;
}

.process-inner-content-wap{
	position: relative;
	z-index: 1;
}

.process-content-wap p{
	font-size: 16px;
	font-weight: 500;
	color: var(--accent-color);
	margin-bottom: 10px;
}

.process-content-wap h2{
	font-family: var(--accent-font);
    font-size: 40px;
	text-transform: uppercase;
	color: var(--primary-color);
    font-weight: 400;
    line-height: 1.2em;
}

.process-content-wap h2 a{
	color: inherit;
}

.interactive-process-layout .interactive-con{
    position: relative;
    z-index: 1;
    padding-bottom: 0!important;
}

.interactive-process-layout .interactive-con-inner{
    position: relative;
    display: flex;
	flex-wrap: wrap;
    z-index: 2
}

.interactive-process-layout .interactive-con-inner:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,rgba(48,55,62,0) 0%,#363738 100%);
    opacity: .5;
    z-index: 1
}

.interactive-process-layout .interactive-process-list-image{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden
}

.interactive-process-layout .interactive-process-list-image .interactive-process-image{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    z-index: -1;
    -ms-transition: all .7s ease;
    -o-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -webkit-transition: all .7s ease;
    transition: all .7s ease
}

.interactive-process-layout .interactive-process-list-image .interactive-process-image:first-child{
    z-index: 1
}

.interactive-process-layout .interactive-process-list-image .interactive-process-image.show{
    z-index: 2;
    opacity: 1;
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

/************************************/
/***      11. Our Offers css      ***/
/************************************/

.our-offers{
	background: url('../images/offer-bg-image.png') no-repeat;
	background-position: center center;
	background-size: 100% auto;
	padding: 100px 0;
}

.offers-accordion .accordion-item{
    border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
	margin-bottom: 30px;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}

.offers-accordion .accordion-item:last-child{
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.offers-accordion .accordion-header .accordion-button{
	font-size: 22px;
	font-weight: 500;
	line-height: 1.4em;
	text-transform: capitalize;
	background: transparent;
	padding-left: 30px;
	color: var(--primary-color);
}

.offers-accordion .accordion-button:not(.collapsed){
	padding-bottom: 10px;
}

.offers-accordion .accordion-item .accordion-button::after,
.offers-accordion .accordion-item .accordion-button.collapsed::after{
    content: '\2b';
    font-family: 'FontAwesome';
    font-size: 20px;
    font-weight: 900;
	color: var(--accent-color);
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.4s ease-in-out;
}

.offers-accordion .accordion-button:not(.collapsed)::after{
	content: '\f068';
}

.offers-accordion .accordion-body p{
    color: var(--text-color);
	margin: 0;
}

.offer-button{
	margin-top: 60px;
}

.our-offers-images{
	position: relative;
	padding: 0 80px 0 60px;
	margin-left: 65px;
}

.offer-image figure{
	display: block;
	border-radius: 400px 400px 0 0;
}

.offer-image img{
	width: 100%;
	aspect-ratio: 1 / 1.405;
	object-fit: cover;
	border-radius: 400px 400px 0 0;
}

.offer-circle-image-1,
.offer-circle-image-2{
	position: absolute;
	border: 8px solid var(--primary-color);
	border-radius: 50%;
	z-index: 1;
}

.offer-circle-image-1{
	top: 80px;
	right: 0;
}

.offer-circle-image-2{
	left: 0;
	bottom: 80px;
}

.offer-circle-image-1 figure,
.offer-circle-image-2 figure{
	display: block;
	border-radius: 50%;
}

.offer-circle-image-1 img,
.offer-circle-image-2 img{
	width: 100%;
	max-width: 165px;
	object-fit: cover;
}

/************************************/
/***   12. About Restaurant css   ***/
/************************************/

.about-restaurant{
	background: url(../images/about-restaurant-bg-image.svg) no-repeat;
	background-position: left bottom 120px;
	background-size: 80px auto;
	padding: 100px 0;
}

.about-restaurant .container .row{
	align-items: center;
}

.about-restaurant-content,
.restaurant-timing-box	{
	text-align: center;
}

.about-restaurant-info{
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
	margin-bottom: 40px;
}

.about-restaurant-info h3{
	font-size: 20px;
	line-height: 1.4em;
	margin-bottom: 30px;
}

.about-restaurant-info p:last-child{
	margin-bottom: 0;
}

.about-author-box img{
	width: 100%;
	max-width: 140px;
	margin-bottom: 10px;
}

.about-author-box h3{
	font-size: 20px;
	text-transform: uppercase;
	color: var(--accent-color);
}

.about-restaurant-image{
    margin: 0 15px;
}

.about-restaurant-image figure{
	display: block;
	border-radius: 400px 400px 0 0;
}

.about-restaurant-image img{
	width: 100%;
	aspect-ratio: 1 / 1.795;
	object-fit: cover;
	border-radius: 400px 400px 0 0;
}

.restaurant-time-body{
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
}

.restaurant-time-body h3{
	font-size: 20px;
	line-height: 1.4em;
	margin-bottom: 30px;
}

.restaurant-time-body h3:last-child{
	margin-bottom: 0;
}

.restaurant-time-body ul{
	position: relative;
	margin: 0 0 30px 0;
	padding: 0 0 30px 0;
	list-style: none;
}

.restaurant-time-body ul::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100px;
	height: 1px;
	transform: translateX(-50%);
	background: var(--accent-color);
}

.restaurant-time-body ul li{
	line-height: 1.4em;
	margin-bottom: 15px;
}

.restaurant-time-body ul li:last-child{
	margin-bottom: 0;
}

/************************************/
/***   13. Our Testimonials css   ***/
/************************************/

.our-testimonials{
	position: relative;
	padding: 100px 0;
	background: url('../images/testimonial-bg.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
}

.our-testimonials:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	width: 100%;
	height: 100%;
    background: var(--secondary-color);
    opacity: 80%;
}

.our-testimonials .container{
	position: relative;
	z-index: 1;
}

.our-testimonials .section-title h3{
	color: var(--accent-color);
}

.testimonial-slider{
	position: relative;
}

.testimonial-slider .swiper{
    position: static;
    margin: 0 120px;
}

.testimonial-slider .swiper-wrapper{
	cursor: none;
}

.testimonial-item{
	text-align: center;
}

.testimonial-content p{
	font-size: 36px;
	line-height: 1.2em;
	margin: 0;
}

.author-info{
	margin-top: 20px;
}

.author-info p{
	text-transform: capitalize;
	margin: 0;
}

.testimonial-btn-prev,
.testimonial-btn-next{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 60px;
	height: 60px;
	background-color: var(--dark-divider-color);
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.testimonial-btn-prev{
	left: 0;
}

.testimonial-btn-next{
	right: 0;
}

.testimonial-btn-prev:hover,
.testimonial-btn-next:hover{
	background-color: var(--primary-color);
}

.testimonial-btn-prev::before,
.testimonial-btn-next::before{
	font-family: 'FontAwesome';
	content: '\f053';
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	font-size: 20px;
	color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.testimonial-btn .testimonial-btn-next::before{
	transform: rotate(180deg);
}

.testimonial-pagination{
	position: relative;
	text-align: center;
	margin-top: 60px;
}

.testimonial-pagination .swiper-pagination-bullet{
    height: 10px;
    width: 10px;
    background: var(--secondary-color);
    opacity: 1;
    margin: 0 3px;
    transition: all 0.4s ease-in-out;
}

.testimonial-pagination .swiper-pagination-bullet-active{
    background: var(--accent-color);
}

/************************************/
/***        14. CTA Box css	      ***/
/************************************/

.cta-box{
	position: relative;
	padding: 100px 0;
}

.cta-box::before{
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	background: url(../images/cta-bg-image.png) no-repeat;
	background-position: center right;
	background-size: cover;
	height: 390px;
	width: 240px;
	z-index: 0;
}

.cta-box-content{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	text-align: center;
}

.cta-box-content .section-title{
	margin-bottom: 60px;
}

.cta-box-buttons{
    display: flex;
	flex-wrap: wrap;
    align-items: center;
	justify-content: center;
	gap: 30px;
}

.cta-box-buttons .btn-default{
	display: flex;
	align-items: center;
	padding: 15px 30px;
}

.cta-box-buttons .btn-default i{
	font-size: 20px;
	margin-right: 10px;
}

/************************************/
/***        15. Footer css	      ***/
/************************************/

.main-footer{
	position: relative;
	background: url(../images/footer-bg.jpg) no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 100px 0 0;
}

.main-footer::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: var(--secondary-color);
	opacity: 85%;
	z-index: 0;
}

.main-footer .container{
	position: relative;
	z-index: 1;
}

.footer-contact-list{
	display: flex;
	gap: 30px 15px;
	flex-wrap: wrap;
}

.footer-contact-item{
	width: calc(33.33% - 10px);
	border-right: 1px solid var(--divider-color);
	text-align: center;
	padding-right: 15px;
}

.footer-contact-item:last-child,
.footer-contact-item:nth-child(3n + 3){
	border-right: none;
	padding: 0;
}

.footer-contact-item .icon-box,
.footer-contact-detail{
	margin-bottom: 20px;
}

.footer-contact-item .icon-box img{
	width: 100%;
	max-width: 60px;
}

/* Ensure font icons in footer contact match legacy SVG size and color */
.footer-contact-item .icon-box i{
    font-size: 60px;
    color: var(--accent-color);
    line-height: 1;
}

.footer-contact-detail h3{
	font-family: var(--accent-font);
	font-size: 30px;
	color: var(--accent-color);
	text-transform: uppercase;
	margin-bottom: 10px;
}

.footer-contact-detail p{
	font-family: var(--accent-font);
	font-size: 24px;
	line-height: 1.4em;
	color: var(--primary-color);
	margin-bottom: 2px;
}

.footer-contact-detail p:last-child{
	margin-bottom: 0;
}

.footer-contact-detail p a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.footer-contact-detail p a:hover{
	color: var(--accent-secondary-color);
}

.footer-contact-button a{
	text-transform: uppercase;
}

.footer-copyright{
	display: flex;
	gap: 30px;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--divider-color);
	padding: 80px 0 100px;
	margin-top: 80px;
}

.footer-copyright-text p{
	color: var(--primary-color);
	margin-bottom: 0;
}

.footer-logo img{
	width: 100%;
	max-width: 192px;
}

.footer-social-links ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-social-links ul li{
	display: inline-block;
	margin-right: 15px;
	transition: all 0.3s ease-in-out;
}

.footer-social-links ul li:last-child{
	margin-right: 0;
}

.footer-social-links ul li a{
	color: var(--primary-color);
	background-color: var(--accent-color);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.footer-social-links ul li a:hover{
	background-color: var(--primary-color);
	color: var(--secondary-color);
}

.footer-social-links ul li a i{
	font-size: 24px;
	color: inherit
}

/************************************/
/***    16. About Us Page css     ***/
/************************************/

.page-header{
	position: relative;
	background-image: url('../images/page-header-bg.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 160px 0;
}

/* Page-specific header background overrides */
.page-header.header-contact{
    background-image: url('../images/header/header-index.jpg');
}

.page-header.header-menu{
    background-image: url('../images/header/header-other.JPG');
}

.page-header.header-products{
    background-image: url('../images/header/header_3.jpg');
    background-position: center 92%;
}

@media (max-width: 768px) {
    .page-header.header-products{
        background-position: center 100%;
    }
}

.page-header.header-story{
    background-image: url('../images/header/header_2.jpg');
}

.page-header::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	background-color: var(--secondary-color);
	opacity: 80%;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.page-header-box{
	position: relative;
	z-index: 1;
}

.page-header-box h1{
	display: inline-block;
    color: var(--primary-color);
	font-family: var(--accent-font);
    font-size: 70px;
    font-weight: 400;
    line-height: 1.1em;
	text-transform: uppercase;
    margin-bottom: 10px;
    cursor: none;
}

.page-header-box ol{
	margin: 0;
	padding: 0;
}

.page-header-box ol li.breadcrumb-item{
	font-size: 18px;
    font-weight: 400;
	text-transform: capitalize;
	line-height: normal;
	color: var(--text-color);
}

.page-header-box ol li.breadcrumb-item a{
    color: inherit;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
    color: var(--text-color);
}

.our-scrolling-ticker.subpages-scrolling-ticker{
	padding: 15px 0;
}

.our-scrolling-ticker.subpages-scrolling-ticker .scrolling-ticker-box{
    --gap: 15px;
}

.our-scrolling-ticker.subpages-scrolling-ticker .scrolling-content span{
    font-size: 26px;
}

.our-scrolling-ticker.subpages-scrolling-ticker .scrolling-content span img{
    width: 100%;
	max-width: 22px;
    margin-right: 15px;
}

.our-approach{
	padding: 100px 0;
}

.mission-vision-item{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.mission-vision-item:last-child{
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: none;
}

.mission-vision-item .icon-box{
    position: relative;
    background-color: var(--dark-divider-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-right: 30px;
}

.mission-vision-item .icon-box::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.mission-vision-item:hover .icon-box::before{
    transform: scale(1);
}

.mission-vision-item .icon-box img{
	width: 100%;
    max-width: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.mission-vision-item:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.mission-vision-content{
	width: calc(100% - 90px);
}

.mission-vision-content h3{
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.mission-vision-content p{
	margin: 0;
}

.our-approach-image{
	margin-left: 100px;
}

.our-approach-image figure{
	display: block;
	border-radius: 400px 400px 0 0;
}

.our-approach-image img{
	width: 100%;
	aspect-ratio: 1 / 1.166;
	object-fit: cover;
	border-radius: 400px 400px 0 0;
}

.our-team{
	background: url('../images/offer-bg-image.png') no-repeat;
	background-position: center center;
	background-size: 100% auto;
	padding: 100px 0 70px;
}

.team-item{
	position: relative;
	height: calc(100% - 30px);
    margin-bottom: 30px;
    overflow: hidden;
}

.team-image{
	position: relative;
}

.team-image a{
    display: block;
	cursor: none;
	border-radius: 30px;
	overflow: hidden;
}

.team-image figure:before{
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
	background: linear-gradient(180deg, transparent 50%, #000000 100%);
    z-index: 1;
}

.team-image img{
    width: 100%;
    aspect-ratio: 1 / 1.24;
    object-fit: cover;
	transition: all 0.4s ease-in-out;
}

.team-item:hover .team-image img{
	transform: scale(1.1);
}

.team-body{
	position: absolute;
	right: 30px;
	bottom: 30px;
	left: 30px;
	text-align: center;
	z-index: 1;
}

.team-social-icon{
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
}

.team-item:hover .team-social-icon{
	opacity: 1;
	visibility: visible;
	margin-bottom: 30px;
}

.team-social-icon ul{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.team-social-icon ul li{
	display: inline-block;
	margin-right: 10px;
}

.team-social-icon ul li:last-child{
	margin-right: 0;
}

.team-social-icon ul li a{
	width: 40px;
	height: 40px;
	color: var(--primary-color);
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.team-social-icon ul li a:hover{
	background: var(--primary-color);
	color: var(--secondary-color);
}

.team-social-icon ul li a i{
	color: inherit;
	font-size: 18px;
}

.team-content h3{
	color: var(--primary-color);
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.team-content h3 a{
	color: inherit;
}

.team-content p{
	text-transform: capitalize;
	margin: 0;
}

.our-story{
	padding: 100px 0;
}

.our-story-image{
	margin-right: 100px;
}

.our-story-image figure{
	display: block;
	border-radius: 400px 400px 0 0;
}

.our-story-image img{
	width: 100%;
    aspect-ratio: 1 / 1.509;
	object-fit: cover;
	border-radius: 400px 400px 0 0;
}

.story-item{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.story-item:last-child{
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: none;
}

.story-item .icon-box{
    position: relative;
    background-color: var(--dark-divider-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-right: 30px;
}

.story-item .icon-box::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.story-item:hover .icon-box::before{
    transform: scale(1);
}

.story-item .icon-box img{
	width: 100%;
    max-width: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.story-item:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.story-item-content{
	width: calc(100% - 90px);
}

.story-item-content h3{
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.story-item-content p{
	margin: 0;
}

.our-story-btn{
	margin-top: 40px;
}

.our-faqs{
	padding: 100px 0;
}

.faq-accordion .accordion-item{
	position: relative;
	background: var(--secondary-color);
    border: 1px solid var(--divider-color);
	border-radius: 10px;
	margin-bottom: 30px;
    padding: 0;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}

.faq-accordion .accordion-item::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
	height: 100%;
	width: 100%;
}

.faq-accordion .accordion-item:last-child{
	margin-bottom: 0;
}

.faq-accordion .accordion-header .accordion-button{
	font-size: 22px;
	font-weight: 500;
	line-height: 1.4em;
	background: transparent;
	color: var(--primary-color);
	padding: 15px 50px 15px 20px;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-header .accordion-button.collapsed{
	background: var(--secondary-color);
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\f068';
	font-family: "FontAwesome";
	position: absolute;
	right: 20px;
	top: 16px;
	bottom: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 400;
    line-height: normal;
	width: 24px;
	height: 24px;
    color: var(--secondary-color);
	background-color: var(--accent-color);
    border-radius: 50%;
	transition: all 0.4s ease-in-out;
}

.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\2b';
	color: var(--primary-color);
}

.faq-accordion .accordion-item .accordion-body{
	position: relative;
	padding: 5px 50px 15px 20px;
	z-index: 1;
}

.faq-accordion .accordion-item .accordion-body p{
	margin: 0;
}

.faqs-image{
	margin-left: 90px;
}

.faqs-image figure{
	display: block;
	border-radius: 400px 400px 0 0;
}

.faqs-image img{
	width: 100%;
	aspect-ratio: 1 / 1.132;
	object-fit: cover;
	border-radius: 400px 400px 0 0;
}

/************************************/
/***     17. Services Page css    ***/
/************************************/

.page-services{
	padding: 100px 0 70px;
}

.service-item{
	border: 1px solid var(--divider-color);
	border-radius: 26px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
}

.service-item .icon-box{
    position: relative;
    background-color: var(--dark-divider-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 50px;
}

.service-item .icon-box::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-item:hover .icon-box::before{
    transform: scale(1);
}

.service-item .icon-box img{
	width: 100%;
    max-width: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.service-item:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.service-content{
	margin-bottom: 30px;
}

.service-content h3{
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.service-content h3 a{
	color: inherit;
}

.service-content p{
	margin: 0;
}

/************************************/
/***    18. Service Single css    ***/
/************************************/

.page-service-single{
	padding: 100px 0;
}

.page-single-sidebar{
    position: sticky;
    top: 30px;
    margin-right: 30px;
}

.page-category-list{
    border: 1px solid var(--divider-color);
	border-radius: 26px;
    margin-bottom: 40px;
}

.page-category-list h3{
	font-size: 22px;
	text-transform: capitalize;
	color: var(--primary-color);
	border-bottom: 1px solid var(--divider-color);
    padding: 20px 30px;
}

.page-category-list ul{
    list-style: none;
    margin: 0;
    padding: 20px 30px 30px;
}

.page-category-list ul li{
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.page-category-list ul li:last-child{
    border: none;
    margin: 0;
    padding: 0;
}

.page-category-list ul li a{
    display: block;
    color: var(--text-color);
	line-height: 1.4em;
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

.page-category-list ul li a:hover{
    color: var(--accent-color);
}

.sidebar-cta-box{
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border-radius: 26px;
    padding: 40px 30px;
	transition: all 0.4s ease-in-out;
}

.sidebar-cta-box:hover{
	background-position: right center;
}

.cta-client-images{
    display: inline-flex;
    margin-bottom: 20px;
}

.cta-client-img{
    margin-left: -16px;
}

.cta-client-img:first-child{
    margin: 0;
}

.cta-client-img figure{
    display: block;
    border: 1px solid var(--secondary-color);
    border-radius: 50%;
    overflow: hidden;
}

.cta-client-img img{
    max-width: 50px;
    border-radius: 50%;
}

.sidebar-cta-body{
    margin-bottom: 30px;
}

.sidebar-cta-body h3{
    font-size: 22px;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.sidebar-cta-body p{
    color: var(--secondary-color);
    margin-bottom: 0;
}

.sidebar-cta-body p a{
    font-weight: 700;
	text-transform: capitalize;
    color: var(--secondary-color);
	transition: all 0.3s ease-in-out;
}

.sidebar-cta-body p a:hover{
	color: var(--primary-color);
}

.sidebar-cta-footer ul{
	margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-cta-footer ul li{
	color: var(--secondary-color);
    margin-bottom: 20px;
}

.sidebar-cta-footer ul li:last-child{
	margin-bottom: 0;
}

.sidebar-cta-footer ul li a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.sidebar-cta-footer ul li a:hover{
	color: var(--primary-color);
}

.sidebar-cta-footer ul li img{
	max-width: 30px;
    margin-right: 20px;
}

.service-feature-image{
	margin-bottom: 20px;
}

.service-feature-image figure{
	display: block;
	border-radius: 26px;
}

.service-feature-image img{
	width: 100%;
	aspect-ratio: 1 / 0.483;
	object-fit: cover;
	border-radius: 26px;
}

.service-entry{
	margin-bottom: 60px;
}

.service-entry p{
	margin-bottom: 20px;
}

.service-entry p:last-child{
	margin-bottom: 0;
}

.service-entry h2{
	font-family: var(--accent-font);
    font-size: 44px;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 20px;
}

.service-entry ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-entry ul li{
	position: relative;
	line-height: 1.5em;
	text-transform: capitalize;
    color: var(--text-color);
	padding-left: 30px;
    margin-bottom: 15px;
}

.service-entry ul li:last-child{
	margin-bottom: 0;
}

.service-entry ul li::before{
	content: '\f00c';
    font-family: 'FontAwesome';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
    color: var(--accent-color);
}

.coffee-industry-info{
	margin-top: 60px;
}

.service-entry-box{
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid var(--divider-color);
	border-bottom: 1px solid var(--divider-color);
	padding: 40px 0;
	margin: 40px 0;
}

.service-entry-item{
	width: calc(50% - 15px);
}

.service-entry-item .icon-box{
	position: relative;
    background-color: var(--dark-divider-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 50px;
}

.service-entry-item .icon-box::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-entry-item:hover .icon-box::before{
    transform: scale(1);
}

.service-entry-item .icon-box img{
    max-width: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.service-entry-item:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.service-entry-item-content h3{
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.service-entry-item-content p{
	margin: 0;
}

/************************************/
/***       19. Menu Page css      ***/
/************************************/

.page-menu{
	padding: 100px 0;
}

.page-menu-box{
	display: flex;
	flex-direction: column;
	gap: 100px;
}

.page-menu-item .section-title{
	text-align: center;
}

.page-menu-image{
	margin-bottom: 40px;
}

.page-menu-image figure{
	display: block;
	border-radius: 26px;
}

.page-menu-image img{
	width: 100%;
	aspect-ratio: 1 / 0.37;
	object-fit: cover;
	border-radius: 26px;
}

.page-menu-list{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.page-menu-list .our-menu-list{
	width: calc(50% - 15px);
}

/* Product Card Specific Styles */
.product-card {
	border: 2px solid var(--divider-color);
	border-radius: 20px;
	padding: 30px;
	background: var(--secondary-color);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	transition: all 0.4s ease-in-out;
}

.product-card:hover {
	border-color: var(--accent-color);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
	transform: translateY(-5px);
}

.product-card-features {
	margin: 20px 0;
}

.product-card-features .feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.product-card-features .feature-list li {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	font-size: 14px;
	color: var(--primary-color);
}

.product-card-features .feature-list li i {
	color: var(--accent-color);
	margin-right: 10px;
	font-size: 16px;
}

.product-card-actions {
	display: flex;
	gap: 15px;
	margin-top: 25px;
}

.product-card-actions .btn {
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 25px;
	transition: all 0.3s ease-in-out;
}

.product-card-actions .btn-primary {
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	border: none;
	color: var(--secondary-color);
}

.product-card-actions .btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.product-card-actions .btn-outline-secondary {
	border: 2px solid var(--accent-color);
	color: var(--accent-color);
	background: transparent;
}

.product-card-actions .btn-outline-secondary:hover {
	background: var(--accent-color);
	color: var(--secondary-color);
}

/* Improved Products Page Styles */
.products-intro {
	margin-bottom: 60px;
}

.products-intro .section-title h2 {
	font-size: 36px;
	margin-bottom: 20px;
	color: var(--primary-color);
}

.products-intro .section-title p {
	font-size: 18px;
	color: var(--text-muted);
	max-width: 600px;
	margin: 0 auto;
}

.products-grid {
	margin-bottom: 80px;
}

.product-item {
	background: var(--secondary-color);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	transition: all 0.4s ease-in-out;
	height: 100%;
}

.product-item:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.product-image {
	position: relative;
	overflow: hidden;
}

	.product-image figure {
		margin: 0;
		height: 250px;
		overflow: hidden;
		width: 100%;
		position: relative;
	}

	.product-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		transition: transform 0.4s ease-in-out;
		display: block;
	}

.product-item:hover .product-image img {
	transform: scale(1.1);
}

.product-badge {
	position: absolute;
	top: 15px;
	right: 15px;
}

.product-badge .badge {
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 20px;
}

.product-content {
	padding: 30px;
}

.product-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.product-title h3 {
	font-size: 24px;
	font-weight: 700;
	color: var(--primary-color);
	margin: 0;
}

.product-price .price {
	font-size: 20px;
	font-weight: 700;
	color: var(--accent-color);
}

.product-description {
	margin-bottom: 20px;
}

.product-description p {
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0;
}

.product-features {
	margin-bottom: 25px;
}

.product-features .feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.product-features .feature-list li {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	font-size: 14px;
	color: var(--primary-color);
}

.product-features .feature-list li i {
	color: var(--accent-color);
	margin-right: 10px;
	font-size: 14px;
}

.product-actions {
	display: flex;
	gap: 15px;
}

.product-actions .btn {
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 25px;
	transition: all 0.3s ease-in-out;
	flex: 1;
}

.product-actions .btn-primary {
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	border: none;
	color: var(--secondary-color);
}

.product-actions .btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.product-actions .btn-outline-secondary {
	border: 2px solid var(--accent-color);
	color: var(--accent-color);
	background: transparent;
}

.product-actions .btn-outline-secondary:hover {
	background: var(--accent-color);
	color: var(--secondary-color);
}

/* Products Information Section */
.products-info {
	margin-bottom: 80px;
}

.info-card {
	background: var(--secondary-color);
	padding: 40px 30px;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	transition: all 0.4s ease-in-out;
	height: 100%;
}

.info-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.info-icon {
	margin-bottom: 25px;
}

	.info-icon i {
		color: var(--primary-color);
	}

.info-card h4 {
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 15px;
}

.info-card p {
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0;
}

/* Products Contact Section */
.products-contact {
	margin-bottom: 60px;
}

.contact-box {
	background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	padding: 60px 40px;
	border-radius: 20px;
	color: var(--secondary-color);
}

.contact-box h3 {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 20px;
}

.contact-box p {
	font-size: 18px;
	margin-bottom: 30px;
	opacity: 0.9;
}

.contact-buttons {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}

.contact-buttons .btn {
	padding: 15px 30px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 25px;
	transition: all 0.3s ease-in-out;
}

.contact-buttons .btn-primary {
	background: var(--secondary-color);
	color: var(--accent-color);
	border: 2px solid var(--secondary-color);
}

.contact-buttons .btn-primary:hover {
	background: transparent;
	color: var(--secondary-color);
}

.contact-buttons .btn-outline-primary {
	background: transparent;
	color: var(--secondary-color);
	border: 2px solid var(--secondary-color);
}

.contact-buttons .btn-outline-primary:hover {
	background: var(--secondary-color);
	color: var(--accent-color);
}

/* Responsive adjustments for product cards */
@media only screen and (max-width: 991px) {
	.page-menu-list .our-menu-list {
		width: 100%;
	}

	.product-card {
		padding: 20px;
	}

	.product-card-actions {
		flex-direction: column;
	}

	.product-card-actions .btn {
		width: 100%;
		text-align: center;
	}

	.products-intro .section-title h2 {
		font-size: 28px;
	}

	.products-intro .section-title p {
		font-size: 16px;
	}

	.product-content {
		padding: 20px;
	}

	.product-title h3 {
		font-size: 20px;
	}

	.contact-box {
		padding: 40px 20px;
	}

	.contact-box h3 {
		font-size: 24px;
	}

	.contact-box p {
		font-size: 16px;
	}

	.contact-buttons {
		flex-direction: column;
		align-items: center;
	}

	.contact-buttons .btn {
		width: 100%;
		max-width: 250px;
	}

	/* Navbar Responsive Rules for Tablets */
	.navbar {
		padding: 15px 0;
	}

	.navbar-brand img {
		max-height: 120px;
	}

	.main-menu .nav-menu-wrapper {
		margin: 0 30px;
	}

	.main-menu ul li.nav-item a {
		font-size: 14px;
		padding: 12px !important;
	}

	.header-sidebar-btn .btn-popup {
		margin-left: 20px;
	}

	.header-sidebar-btn .btn-popup img {
		max-width: 30px;
	}

	/* Show mobile menu on tablets when desktop menu doesn't fit */
	@media (max-width: 991px) and (min-width: 768px) {
		.main-menu {
			display: none !important;
		}

		.responsive-menu,
		.navbar-toggle {
			display: block !important;
		}

		.navbar-toggle {
			position: absolute;
			right: 15px;
			top: 50%;
			transform: translateY(-50%);
			z-index: 1000;
		}

		.slicknav_menu {
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			z-index: 999;
			box-shadow: 0 4px 8px rgba(0,0,0,0.1);
		}

		.slicknav_nav .slicknav_row,
		.slicknav_nav li a {
			font-size: 14px;
			padding: 12px 20px;
			border-bottom: 1px solid rgba(255,255,255,0.1);
		}

		.slicknav_nav a:hover,
		.slicknav_nav a:focus,
		.slicknav_nav .slicknav_row:hover {
			background-color: rgba(255,255,255,0.1);
		}

		/* Header Button Box Tablet */
		.header-button-box {
			position: absolute;
			right: 60px;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	/* Topbar Responsive */
	.topbar {
		padding: 8px 0;
	}

	.topbar-contact-info ul li {
		font-size: 13px;
		margin-right: 15px;
	}

	.topbar-contact-info ul li img {
		max-width: 14px;
	}

	.topbar-social-links ul li a i {
		font-size: 16px;
	}
}

@media only screen and (max-width: 767px) {
	.product-card {
		padding: 15px;
	}

	.product-card-features .feature-list li {
		font-size: 13px;
	}

	.product-card-actions .btn {
		padding: 8px 16px;
		font-size: 13px;
	}

	.products-intro .section-title h2 {
		font-size: 24px;
	}

	.products-intro .section-title p {
		font-size: 14px;
	}

	.product-image figure {
		height: 200px;
	}

	.product-content {
		padding: 15px;
	}

	.product-title h3 {
		font-size: 18px;
	}

	.product-price .price {
		font-size: 18px;
	}

	.info-card {
		padding: 30px 20px;
	}

	.info-card h4 {
		font-size: 18px;
	}

	.contact-box {
		padding: 30px 15px;
	}

	.contact-box h3 {
		font-size: 20px;
	}

	.contact-box p {
		font-size: 14px;
	}

	/* Navbar Responsive Rules for Mobile */
	.navbar {
		padding: 10px 0;
	}

	.navbar-brand img {
		max-height: 80px;
	}

	.main-menu {
		display: none !important;
	}

	.responsive-menu,
	.navbar-toggle {
		display: block !important;
	}

	.navbar-toggle {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1000;
	}

	.slicknav_menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 999;
		box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	}

	.slicknav_nav .slicknav_row,
	.slicknav_nav li a {
		font-size: 14px;
		padding: 12px 20px;
		border-bottom: 1px solid rgba(255,255,255,0.1);
	}

	.slicknav_nav a:hover,
	.slicknav_nav a:focus,
	.slicknav_nav .slicknav_row:hover {
		background-color: rgba(255,255,255,0.1);
	}

	/* Header Button Box Mobile */
	.header-button-box {
		position: absolute;
		right: 60px;
		top: 50%;
		transform: translateY(-50%);
	}

	.header-sidebar-btn .btn-popup {
		margin-left: 10px;
	}

	.header-sidebar-btn .btn-popup img {
		max-width: 28px;
	}

	/* Offcanvas Mobile */
	.header-sidebar-btn .offcanvas {
		padding: 100px 30px 60px;
		max-width: 100%;
	}

	.header-sidebar-btn .offcanvas .btn-close {
		top: 30px;
		right: 30px;
		width: 40px;
		height: 40px;
	}

	.header-sidebar-info h2 {
		font-size: 28px;
		margin-bottom: 20px;
	}

	.header-sidebar-info ul li,
	.header-sidebar-timing ul li {
		font-size: 14px;
		margin-bottom: 10px;
	}

	.header-sidebar-social-list {
		margin-top: 40px;
	}

	.header-sidebar-social-list ul li i {
		font-size: 18px;
	}

	/* Topbar Mobile */
	.topbar {
		padding: 5px 0;
	}

	.topbar-contact-info {
		display: none;
	}

	.topbar-social-links {
		text-align: center;
	}

	.topbar-social-links ul {
		justify-content: center;
	}

	.topbar-social-links ul li {
		margin: 0 10px;
	}

	.topbar-social-links ul li a i {
		font-size: 18px;
	}
}

/* Enhanced Responsive Design for All Devices */
@media only screen and (max-width: 575px) {
	/* Extra Small Devices (phones, 576px and down) */
	.products-intro {
		margin-bottom: 40px;
	}

	.products-intro .section-title h2 {
		font-size: 22px;
		margin-bottom: 15px;
	}

	.products-intro .section-title p {
		font-size: 13px;
		max-width: 100%;
	}

	.products-grid {
		margin-bottom: 50px;
	}

	.product-item {
		margin-bottom: 30px;
	}

	.product-image figure {
		height: 180px;
	}

	.product-content {
		padding: 15px;
	}

	.product-title {
		margin-bottom: 10px;
	}

	.product-title h3 {
		font-size: 16px;
		line-height: 1.3;
	}

	.product-price .price {
		font-size: 16px;
	}

	.product-description {
		margin-bottom: 15px;
	}

	.product-description p {
		font-size: 13px;
		line-height: 1.4;
	}

	.product-features {
		margin-bottom: 20px;
	}

	.product-features .feature-list li {
		font-size: 12px;
		margin-bottom: 8px;
	}

	.product-features .feature-list li i {
		font-size: 12px;
		margin-right: 8px;
	}

	.product-actions {
		flex-direction: column;
		gap: 10px;
	}

	.product-actions .btn {
		width: 100%;
		padding: 10px 15px;
		font-size: 14px;
	}

	.products-info {
		margin-bottom: 40px;
	}

	.info-card {
		padding: 25px 15px;
		margin-bottom: 20px;
	}

	.info-icon {
		margin-bottom: 15px;
	}

	.info-icon i {
		font-size: 24px;
	}

	.info-card h4 {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.info-card p {
		font-size: 13px;
		line-height: 1.4;
	}

	.products-contact {
		margin-bottom: 40px;
	}

	.contact-box {
		padding: 25px 15px;
		text-align: center;
	}

	.contact-box h3 {
		font-size: 18px;
		margin-bottom: 15px;
	}

	.contact-box p {
		font-size: 13px;
		line-height: 1.4;
		margin-bottom: 20px;
	}

	.contact-buttons {
		flex-direction: column;
		gap: 10px;
	}

	.contact-buttons .btn {
		width: 100%;
		padding: 12px 20px;
		font-size: 14px;
	}

	/* Navbar Extra Small Mobile */
	.navbar {
		padding: 8px 0;
	}

	.navbar-brand img {
		max-height: 60px;
	}

	.navbar-toggle {
		right: 10px;
	}

	.slicknav_btn {
		width: 32px;
		height: 32px;
	}

	.slicknav_icon .slicknav_icon-bar {
		width: 18px;
		height: 2px;
	}

	.slicknav_nav .slicknav_row,
	.slicknav_nav li a {
		font-size: 13px;
		padding: 10px 15px;
	}

	/* Header Button Box Extra Small */
	.header-button-box {
		right: 50px;
	}

	.header-sidebar-btn .btn-popup {
		margin-left: 5px;
	}

	.header-sidebar-btn .btn-popup img {
		max-width: 24px;
	}

	/* Offcanvas Extra Small */
	.header-sidebar-btn .offcanvas {
		padding: 80px 20px 40px;
	}

	.header-sidebar-btn .offcanvas .btn-close {
		top: 20px;
		right: 20px;
		width: 35px;
		height: 35px;
	}

	.header-sidebar-info h2 {
		font-size: 24px;
		margin-bottom: 15px;
	}

	.header-sidebar-info ul li,
	.header-sidebar-timing ul li {
		font-size: 13px;
		margin-bottom: 8px;
	}

	.header-sidebar-social-list {
		margin-top: 30px;
	}

	.header-sidebar-social-list ul li {
		margin-right: 10px;
		padding-right: 10px;
	}

	.header-sidebar-social-list ul li i {
		font-size: 16px;
	}
}

/* Tablet Landscape and Small Laptops */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.navbar {
		padding: 20px 0;
	}

	.navbar-brand img {
		max-height: 140px;
	}

	.main-menu .nav-menu-wrapper {
		margin: 0 40px;
	}

	.main-menu ul li.nav-item a {
		font-size: 15px;
		padding: 13px !important;
	}

	.header-sidebar-btn .btn-popup {
		margin-left: 25px;
	}

	.header-sidebar-btn .btn-popup img {
		max-width: 32px;
	}

	/* Topbar Tablet */
	.topbar {
		padding: 10px 0;
	}

	.topbar-contact-info ul li {
		font-size: 14px;
		margin-right: 20px;
	}

	.topbar-contact-info ul li img {
		max-width: 15px;
	}

	.topbar-social-links ul li a i {
		font-size: 17px;
	}
}

/* Large Laptops and Desktops */
@media only screen and (min-width: 1200px) {
	.navbar {
		padding: 20px 0;
	}

	.navbar-brand img {
		max-height: 160px;
	}

	.main-menu .nav-menu-wrapper {
		margin: 0 60px;
	}

	.main-menu ul li.nav-item a {
		font-size: 16px;
		padding: 15px !important;
	}

	.header-sidebar-btn .btn-popup {
		margin-left: 40px;
	}

	.header-sidebar-btn .btn-popup img {
		max-width: 35px;
	}

	/* Topbar Desktop */
	.topbar {
		padding: 10px 0;
	}

	.topbar-contact-info ul li {
		font-size: 14px;
		margin-right: 20px;
	}

	.topbar-contact-info ul li img {
		max-width: 15px;
	}

	.topbar-social-links ul li a i {
		font-size: 16px;
	}
}

/* Extra Large Screens */
@media only screen and (min-width: 1400px) {
	.navbar {
		padding: 25px 0;
	}

	.navbar-brand img {
		max-height: 180px;
	}

	.main-menu .nav-menu-wrapper {
		margin: 0 80px;
	}

	.main-menu ul li.nav-item a {
		font-size: 17px;
		padding: 18px !important;
	}

	.header-sidebar-btn .btn-popup {
		margin-left: 50px;
	}

	.header-sidebar-btn .btn-popup img {
		max-width: 40px;
	}
}

/* Landscape Orientation for Mobile */
@media only screen and (max-height: 500px) and (orientation: landscape) {
	.navbar {
		padding: 5px 0;
	}

	.navbar-brand img {
		max-height: 50px;
	}

	.navbar-toggle {
		top: 50%;
		transform: translateY(-50%);
	}

	.slicknav_menu {
		max-height: 60vh;
		overflow-y: auto;
	}

	.header-button-box {
		top: 50%;
		transform: translateY(-50%);
	}

	.header-sidebar-btn .btn-popup img {
		max-width: 20px;
	}

	/* Offcanvas Landscape */
	.header-sidebar-btn .offcanvas {
		padding: 60px 20px 30px;
	}

	.header-sidebar-btn .offcanvas .btn-close {
		top: 15px;
		right: 15px;
		width: 30px;
		height: 30px;
	}

	.header-sidebar-info h2 {
		font-size: 20px;
		margin-bottom: 10px;
	}

	.header-sidebar-info ul li,
	.header-sidebar-timing ul li {
		font-size: 12px;
		margin-bottom: 5px;
	}

	.header-sidebar-social-list {
		margin-top: 20px;
	}

	.header-sidebar-social-list ul li i {
		font-size: 14px;
	}
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.navbar-brand img {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}

	.header-sidebar-btn .btn-popup img {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
}

/* Print Styles */
@media print {
	.navbar {
		display: none !important;
	}

	.topbar {
		display: none !important;
	}

	.header-button-box {
		display: none !important;
	}
}

/* Touch-friendly improvements for mobile devices */
@media (max-width: 767px) {
	/* Ensure touch targets are at least 44px for accessibility */
	.navbar-toggle .slicknav_btn {
		min-width: 44px;
		min-height: 44px;
		padding: 8px;
	}

	.slicknav_nav .slicknav_row,
	.slicknav_nav li a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.header-sidebar-btn .btn-popup {
		min-width: 44px;
		min-height: 44px;
		padding: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-sidebar-btn .offcanvas .btn-close {
		min-width: 44px;
		min-height: 44px;
	}

	/* Improve touch scrolling */
	.slicknav_menu {
		-webkit-overflow-scrolling: touch;
		overflow-y: auto;
		max-height: 70vh;
	}

	/* Better focus states for accessibility */
	.slicknav_nav a:focus,
	.header-sidebar-btn .btn-popup:focus,
	.header-sidebar-btn .offcanvas .btn-close:focus {
		outline: 2px solid var(--accent-color);
		outline-offset: 2px;
	}

	/* Prevent text selection on interactive elements */
	.navbar-toggle,
	.header-sidebar-btn .btn-popup {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}

	/* Smooth transitions for better UX */
	.navbar-toggle .slicknav_icon .slicknav_icon-bar {
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Better visual feedback for touch interactions */
	.slicknav_nav a:active,
	.header-sidebar-btn .btn-popup:active {
		transform: scale(0.95);
		transition: transform 0.1s ease;
	}
}

/* Landscape orientation improvements */
@media (max-height: 500px) and (orientation: landscape) {
	.navbar-toggle .slicknav_btn {
		min-width: 40px;
		min-height: 40px;
	}

	.header-sidebar-btn .btn-popup {
		min-width: 40px;
		min-height: 40px;
	}

	.slicknav_nav .slicknav_row,
	.slicknav_nav li a {
		min-height: 40px;
		padding: 8px 20px;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.navbar-toggle .slicknav_btn {
		border: 2px solid var(--secondary-color);
	}

	.slicknav_nav a {
		border-bottom: 1px solid var(--secondary-color);
	}

	.header-sidebar-btn .btn-popup {
		border: 2px solid var(--accent-color);
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.navbar-toggle .slicknav_icon .slicknav_icon-bar,
	.slicknav_nav a,
	.header-sidebar-btn .btn-popup,
	.header-sidebar-btn .offcanvas {
		transition: none !important;
		animation: none !important;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.slicknav_menu {
		background: linear-gradient(90deg, #2a2a2a 0%, #3a3a3a 100%);
	}

	.slicknav_nav .slicknav_row,
	.slicknav_nav li a {
		color: #ffffff;
	}

	.slicknav_nav a:hover,
	.slicknav_nav a:focus,
	.slicknav_nav .slicknav_row:hover {
		background-color: rgba(255,255,255,0.1);
		color: var(--accent-color);
	}
}

/* Print Styles */
@media print {
	.navbar {
		display: none !important;
	}

	.topbar {
		display: none !important;
	}

	.header-button-box {
		display: none !important;
	}
}

/* Footer Responsive Design */
@media only screen and (max-width: 991px) {
	/* Footer Contact List - Tablet */
	.footer-contact-list {
		gap: 20px 10px;
	}

	.footer-contact-item {
		width: calc(50% - 5px);
		border-right: none;
		border-bottom: 1px solid var(--divider-color);
		padding-right: 0;
		padding-bottom: 20px;
		margin-bottom: 20px;
	}

	.footer-contact-item:nth-child(2n) {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.footer-contact-item:last-child {
		width: 100%;
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.footer-contact-item .icon-box img {
		max-width: 50px;
	}

	.footer-contact-item .icon-box i {
		font-size: 50px;
	}

	.footer-contact-detail h3 {
		font-size: 24px;
		margin-bottom: 8px;
	}

	.footer-contact-detail p {
		font-size: 18px;
	}

	/* Footer Copyright - Tablet */
	.footer-copyright {
		flex-direction: column;
		gap: 20px;
		padding: 40px 0 60px;
		margin-top: 40px;
		text-align: center;
	}

	.footer-logo img {
		max-width: 100px;
	}

	.footer-social-links ul li a {
		width: 45px;
		height: 45px;
	}

	.footer-social-links ul li a i {
		font-size: 20px;
	}
}

@media only screen and (max-width: 767px) {
	/* Footer Contact List - Mobile */
	.main-footer {
		padding: 60px 0 0;
	}

	.footer-contact-list {
		flex-direction: column;
		gap: 30px 0;
	}

	.footer-contact-item {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--divider-color);
		padding-right: 0;
		padding-bottom: 30px;
		margin-bottom: 0;
		text-align: center;
	}

	.footer-contact-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.footer-contact-item .icon-box,
	.footer-contact-detail {
		margin-bottom: 15px;
	}

	.footer-contact-item .icon-box img {
		max-width: 45px;
	}

	.footer-contact-item .icon-box i {
		font-size: 45px;
	}

	.footer-contact-detail h3 {
		font-size: 20px;
		margin-bottom: 10px;
	}

	.footer-contact-detail p {
		font-size: 16px;
		line-height: 1.5em;
	}

	.footer-contact-button a {
		padding: 12px 25px;
		font-size: 14px;
	}

	/* Footer Copyright - Mobile */
	.footer-copyright {
		flex-direction: column;
		gap: 25px;
		padding: 30px 0 50px;
		margin-top: 30px;
		text-align: center;
	}

	.footer-copyright-text {
		order: 3;
	}

	.footer-logo {
		order: 1;
	}

	.footer-social-links {
		order: 2;
	}

	.footer-copyright-text p {
		font-size: 14px;
		line-height: 1.4em;
	}

	.footer-logo img {
		max-width: 80px;
	}

	.footer-social-links ul {
		justify-content: center;
	}

	.footer-social-links ul li {
		margin-right: 10px;
	}

	.footer-social-links ul li a {
		width: 40px;
		height: 40px;
	}

	.footer-social-links ul li a i {
		font-size: 18px;
	}
}

@media only screen and (max-width: 575px) {
	/* Footer Contact List - Extra Small Mobile */
	.main-footer {
		padding: 40px 0 0;
	}

	.footer-contact-list {
		gap: 25px 0;
	}

	.footer-contact-item {
		padding-bottom: 25px;
	}

	.footer-contact-item .icon-box,
	.footer-contact-detail {
		margin-bottom: 12px;
	}

	.footer-contact-item .icon-box img {
		max-width: 40px;
	}

	.footer-contact-item .icon-box i {
		font-size: 40px;
	}

	.footer-contact-detail h3 {
		font-size: 18px;
		margin-bottom: 8px;
	}

	.footer-contact-detail p {
		font-size: 14px;
		line-height: 1.4em;
	}

	.footer-contact-button a {
		padding: 10px 20px;
		font-size: 13px;
	}

	/* Footer Copyright - Extra Small Mobile */
	.footer-copyright {
		gap: 20px;
		padding: 25px 0 40px;
		margin-top: 25px;
	}

	.footer-copyright-text p {
		font-size: 13px;
		line-height: 1.3em;
	}

	.footer-logo img {
		max-width: 70px;
	}

	.footer-social-links ul li {
		margin-right: 8px;
	}

	.footer-social-links ul li a {
		width: 35px;
		height: 35px;
	}

	.footer-social-links ul li a i {
		font-size: 16px;
	}
}

/* Tablet Landscape and Small Laptops */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	/* Footer Contact List - Tablet Landscape */
	.footer-contact-list {
		gap: 25px 15px;
	}

	.footer-contact-item {
		width: calc(33.33% - 10px);
		border-right: 1px solid var(--divider-color);
		padding-right: 15px;
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.footer-contact-item:last-child {
		border-right: none;
		padding-right: 0;
		width: calc(33.33% - 10px);
	}

	.footer-contact-item .icon-box img {
		max-width: 55px;
	}

	.footer-contact-item .icon-box i {
		font-size: 55px;
	}

	.footer-contact-detail h3 {
		font-size: 26px;
	}

	.footer-contact-detail p {
		font-size: 20px;
	}

	/* Footer Copyright - Tablet Landscape */
	.footer-copyright {
		flex-direction: row;
		gap: 25px;
		padding: 60px 0 80px;
		margin-top: 60px;
		text-align: left;
	}

	.footer-logo img {
		max-width: 110px;
	}

	.footer-social-links ul li a {
		width: 48px;
		height: 48px;
	}

	.footer-social-links ul li a i {
		font-size: 22px;
	}
}

/* Large Laptops and Desktops */
@media only screen and (min-width: 1200px) {
	/* Footer Contact List - Desktop */
	.footer-contact-list {
		gap: 35px 20px;
	}

	.footer-contact-item {
		width: calc(33.33% - 13px);
		padding-right: 20px;
	}

	.footer-contact-item .icon-box img {
		max-width: 65px;
	}

	.footer-contact-item .icon-box i {
		font-size: 65px;
	}

	.footer-contact-detail h3 {
		font-size: 32px;
		margin-bottom: 12px;
	}

	.footer-contact-detail p {
		font-size: 26px;
	}

	.footer-contact-button a {
		padding: 15px 30px;
		font-size: 16px;
	}

	/* Footer Copyright - Desktop */
	.footer-copyright {
		gap: 35px;
		padding: 90px 0 110px;
		margin-top: 90px;
	}

	.footer-copyright-text p {
		font-size: 16px;
	}

	.footer-logo img {
		max-width: 140px;
	}

	.footer-social-links ul li {
		margin-right: 18px;
	}

	.footer-social-links ul li a {
		width: 55px;
		height: 55px;
	}

	.footer-social-links ul li a i {
		font-size: 26px;
	}
}

/* Extra Large Screens */
@media only screen and (min-width: 1400px) {
	/* Footer Contact List - Extra Large */
	.footer-contact-list {
		gap: 40px 25px;
	}

	.footer-contact-item {
		width: calc(33.33% - 17px);
		padding-right: 25px;
	}

	.footer-contact-item .icon-box img {
		max-width: 70px;
	}

	.footer-contact-item .icon-box i {
		font-size: 70px;
	}

	.footer-contact-detail h3 {
		font-size: 35px;
		margin-bottom: 15px;
	}

	.footer-contact-detail p {
		font-size: 28px;
	}

	.footer-contact-button a {
		padding: 18px 35px;
		font-size: 17px;
	}

	/* Footer Copyright - Extra Large */
	.footer-copyright {
		gap: 40px;
		padding: 100px 0 120px;
		margin-top: 100px;
	}

	.footer-copyright-text p {
		font-size: 17px;
	}

	.footer-logo img {
		max-width: 160px;
	}

	.footer-social-links ul li {
		margin-right: 20px;
	}

	.footer-social-links ul li a {
		width: 60px;
		height: 60px;
	}

	.footer-social-links ul li a i {
		font-size: 28px;
	}
}

/* Landscape Orientation for Mobile */
@media only screen and (max-height: 500px) and (orientation: landscape) {
	/* Footer Contact List - Landscape */
	.main-footer {
		padding: 30px 0 0;
	}

	.footer-contact-list {
		gap: 15px 10px;
	}

	.footer-contact-item {
		padding-bottom: 15px;
	}

	.footer-contact-item .icon-box,
	.footer-contact-detail {
		margin-bottom: 8px;
	}

	.footer-contact-item .icon-box img {
		max-width: 35px;
	}

	.footer-contact-item .icon-box i {
		font-size: 35px;
	}

	.footer-contact-detail h3 {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.footer-contact-detail p {
		font-size: 12px;
	}

	.footer-contact-button a {
		padding: 8px 15px;
		font-size: 12px;
	}

	/* Footer Copyright - Landscape */
	.footer-copyright {
		gap: 15px;
		padding: 20px 0 30px;
		margin-top: 20px;
	}

	.footer-copyright-text p {
		font-size: 12px;
	}

	.footer-logo img {
		max-width: 60px;
	}

	.footer-social-links ul li a {
		width: 30px;
		height: 30px;
	}

	.footer-social-links ul li a i {
		font-size: 14px;
	}
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.footer-logo img {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}

	.footer-contact-item .icon-box img {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
}

/* Touch-friendly improvements for footer */
@media (max-width: 767px) {
	.footer-contact-button a {
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.footer-social-links ul li a {
		min-width: 44px;
		min-height: 44px;
	}

	.footer-contact-button a:focus,
	.footer-social-links ul li a:focus {
		outline: 2px solid var(--accent-color);
		outline-offset: 2px;
	}

	.footer-contact-button a:active,
	.footer-social-links ul li a:active {
		transform: scale(0.95);
		transition: transform 0.1s ease;
	}
}

/* High contrast mode support for footer */
@media (prefers-contrast: high) {
	.footer-contact-item {
		border-color: var(--primary-color);
	}

	.footer-copyright {
		border-top-color: var(--primary-color);
	}

	.footer-social-links ul li a {
		border: 2px solid var(--primary-color);
	}
}

/* Reduced motion support for footer */
@media (prefers-reduced-motion: reduce) {
	.footer-contact-detail p a,
	.footer-social-links ul li a,
	.footer-contact-button a {
		transition: none !important;
	}
}

/* Dark mode support for footer */
@media (prefers-color-scheme: dark) {
	.footer-contact-item {
		border-color: rgba(255,255,255,0.2);
	}

	.footer-copyright {
		border-top-color: rgba(255,255,255,0.2);
	}
}

/* Index Page Responsive Design */
@media only screen and (max-width: 991px) {
	/* Hero Section - Tablet */
	.hero {
		padding: 150px 0;
	}

	.hero-content .section-title h1 {
		font-size: 50px;
		line-height: 1.2em;
	}

	.hero-content .section-title h2 {
		font-size: 36px;
		line-height: 1.2em;
	}

	.hero-content .section-title h3 {
		font-size: 14px;
		padding-left: 25px;
	}

	.hero-content .section-title h3::before {
		width: 18px;
		height: 18px;
	}

	.hero-content .section-title p {
		font-size: 16px;
		margin-top: 15px;
	}

	.hero-btn {
		gap: 20px;
	}

	.hero-btn .btn-default {
		padding: 12px 25px;
		font-size: 14px;
	}

	/* About Us Section - Tablet */
	.about-us {
		padding: 80px 0;
	}

	.about-us-content {
		margin-right: 30px;
	}

	.about-us-content .section-title h2 {
		font-size: 36px;
		line-height: 1.2em;
	}

	.about-us-content .section-title h3 {
		font-size: 14px;
		padding-left: 25px;
	}

	.about-us-content .section-title h3::before {
		width: 18px;
		height: 18px;
	}

	.about-body-item {
		margin-bottom: 30px;
	}

	.about-body-item .icon-box {
		width: 60px;
		height: 60px;
		margin-right: 20px;
	}

	.about-body-item .icon-box img {
		width: 30px;
		height: 30px;
	}

	.about-body-list-content h3 {
		font-size: 20px;
		margin-bottom: 10px;
	}

	.about-body-list-content p {
		font-size: 15px;
		line-height: 1.6em;
	}

	.about-us-footer {
		margin-top: 30px;
		gap: 20px;
	}

	.video-play-button a {
		width: 60px;
		height: 60px;
	}

	.video-play-button i {
		font-size: 20px;
	}

	.video-play-button p {
		font-size: 14px;
		margin-top: 10px;
	}

	/* Opening Time Box - Tablet */
	.opening-time-box {
		padding: 25px;
		margin-top: 30px;
	}

	.opening-time-box .icon-box {
		width: 50px;
		height: 50px;
		margin-right: 20px;
	}

	.opening-time-box .icon-box i {
		font-size: 20px;
	}

	.opening-time-content h3 {
		font-size: 20px;
		margin-bottom: 15px;
	}

	.opening-time-content ul li {
		font-size: 14px;
		margin-bottom: 8px;
	}

	.opening-time-content ul li span {
		font-size: 14px;
	}

	/* Scrolling Ticker - Tablet */
	.our-scrolling-ticker {
		padding: 20px 0;
	}

	.scrolling-content span {
		font-size: 32px;
	}

	.scrolling-content span img {
		max-width: 25px;
		margin-right: 20px;
	}
}

@media only screen and (max-width: 767px) {
	/* Hero Section - Mobile */
	.hero {
		padding: 120px 0;
	}

	.hero-content .section-title h1 {
		font-size: 36px;
		line-height: 1.2em;
		margin-bottom: 15px;
	}

	.hero-content .section-title h2 {
		font-size: 28px;
		line-height: 1.2em;
		margin-bottom: 15px;
	}

	.hero-content .section-title h3 {
		font-size: 13px;
		padding-left: 20px;
		margin-bottom: 8px;
	}

	.hero-content .section-title h3::before {
		width: 16px;
		height: 16px;
	}

	.hero-content .section-title p {
		font-size: 15px;
		margin-top: 12px;
		line-height: 1.6em;
	}

	.hero-btn {
		flex-direction: column;
		gap: 15px;
		align-items: stretch;
	}

	.hero-btn .btn-default {
		padding: 15px 20px;
		font-size: 14px;
		text-align: center;
		width: 100%;
	}

	/* About Us Section - Mobile */
	.about-us {
		padding: 60px 0;
	}

	.about-us-content {
		margin-right: 0;
		margin-bottom: 40px;
	}

	.about-us-content .section-title h2 {
		font-size: 28px;
		line-height: 1.2em;
		margin-bottom: 15px;
	}

	.about-us-content .section-title h3 {
		font-size: 13px;
		padding-left: 20px;
		margin-bottom: 8px;
	}

	.about-us-content .section-title h3::before {
		width: 16px;
		height: 16px;
	}

	.about-body-item {
		margin-bottom: 25px;
		flex-direction: column;
		text-align: center;
	}

	.about-body-item .icon-box {
		width: 70px;
		height: 70px;
		margin-right: 0;
		margin-bottom: 15px;
		align-self: center;
	}

	.about-body-item .icon-box img {
		width: 35px;
		height: 35px;
	}

	.about-body-list-content h3 {
		font-size: 18px;
		margin-bottom: 8px;
	}

	.about-body-list-content p {
		font-size: 14px;
		line-height: 1.6em;
	}

	.about-us-footer {
		margin-top: 25px;
		flex-direction: column;
		gap: 20px;
		align-items: center;
	}

	.about-us-footer .about-btn {
		width: 100%;
	}

	.about-us-footer .about-btn .btn-default {
		width: 100%;
		padding: 15px 20px;
		text-align: center;
	}

	.video-play-button {
		text-align: center;
	}

	.video-play-button a {
		width: 70px;
		height: 70px;
	}

	.video-play-button i {
		font-size: 24px;
	}

	.video-play-button p {
		font-size: 13px;
		margin-top: 8px;
	}

	/* Opening Time Box - Mobile */
	.opening-time-box {
		padding: 20px;
		margin-top: 20px;
		flex-direction: column;
		text-align: center;
	}

	.opening-time-box .icon-box {
		width: 60px;
		height: 60px;
		margin-right: 0;
		margin-bottom: 15px;
		align-self: center;
	}

	.opening-time-box .icon-box i {
		font-size: 24px;
	}

	.opening-time-content h3 {
		font-size: 18px;
		margin-bottom: 12px;
	}

	.opening-time-content ul li {
		font-size: 13px;
		margin-bottom: 6px;
		justify-content: space-between;
	}

	.opening-time-content ul li span {
		font-size: 13px;
	}

	/* Scrolling Ticker - Mobile */
	.our-scrolling-ticker {
		padding: 15px 0;
	}

	.scrolling-content span {
		font-size: 24px;
	}

	.scrolling-content span img {
		max-width: 20px;
		margin-right: 15px;
	}

	/* About Us Image - Mobile */
	.about-us-img figure {
		margin-bottom: 20px;
	}

	.about-us-img img,
	.about-us-img video {
		border-radius: 6px;
	}
}

@media only screen and (max-width: 575px) {
	/* Hero Section - Small Mobile */
	.hero {
		padding: 100px 0;
	}

	.hero-content .section-title h1 {
		font-size: 28px;
		line-height: 1.2em;
		margin-bottom: 12px;
	}

	.hero-content .section-title h2 {
		font-size: 22px;
		line-height: 1.2em;
		margin-bottom: 12px;
	}

	.hero-content .section-title h3 {
		font-size: 12px;
		padding-left: 18px;
		margin-bottom: 6px;
	}

	.hero-content .section-title h3::before {
		width: 14px;
		height: 14px;
	}

	.hero-content .section-title p {
		font-size: 14px;
		margin-top: 10px;
		line-height: 1.5em;
	}

	.hero-btn .btn-default {
		padding: 12px 15px;
		font-size: 13px;
	}

	/* About Us Section - Small Mobile */
	.about-us {
		padding: 50px 0;
	}

	.about-us-content .section-title h2 {
		font-size: 22px;
		line-height: 1.2em;
		margin-bottom: 12px;
	}

	.about-us-content .section-title h3 {
		font-size: 12px;
		padding-left: 18px;
		margin-bottom: 6px;
	}

	.about-us-content .section-title h3::before {
		width: 14px;
		height: 14px;
	}

	.about-body-item {
		margin-bottom: 20px;
	}

	.about-body-item .icon-box {
		width: 60px;
		height: 60px;
		margin-bottom: 12px;
	}

	.about-body-item .icon-box img {
		width: 30px;
		height: 30px;
	}

	.about-body-list-content h3 {
		font-size: 16px;
		margin-bottom: 6px;
	}

	.about-body-list-content p {
		font-size: 13px;
		line-height: 1.5em;
	}

	.about-us-footer {
		margin-top: 20px;
		gap: 15px;
	}

	.about-us-footer .about-btn .btn-default {
		padding: 12px 15px;
		font-size: 13px;
	}

	.video-play-button a {
		width: 60px;
		height: 60px;
	}

	.video-play-button i {
		font-size: 20px;
	}

	.video-play-button p {
		font-size: 12px;
		margin-top: 6px;
	}

	/* Opening Time Box - Small Mobile */
	.opening-time-box {
		padding: 15px;
		margin-top: 15px;
	}

	.opening-time-box .icon-box {
		width: 50px;
		height: 50px;
		margin-bottom: 12px;
	}

	.opening-time-box .icon-box i {
		font-size: 20px;
	}

	.opening-time-content h3 {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.opening-time-content ul li {
		font-size: 12px;
		margin-bottom: 5px;
	}

	.opening-time-content ul li span {
		font-size: 12px;
	}

	/* Scrolling Ticker - Small Mobile */
	.our-scrolling-ticker {
		padding: 12px 0;
	}

	.scrolling-content span {
		font-size: 20px;
	}

	.scrolling-content span img {
		max-width: 18px;
		margin-right: 12px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	/* Hero Section - Tablet Landscape */
	.hero {
		padding: 180px 0;
	}

	.hero-content .section-title h1 {
		font-size: 56px;
	}

	.hero-content .section-title h2 {
		font-size: 40px;
	}

	.hero-content .section-title h3 {
		font-size: 15px;
		padding-left: 28px;
	}

	.hero-content .section-title h3::before {
		width: 19px;
		height: 19px;
	}

	.hero-content .section-title p {
		font-size: 17px;
		margin-top: 18px;
	}

	.hero-btn {
		gap: 25px;
	}

	.hero-btn .btn-default {
		padding: 14px 28px;
		font-size: 15px;
	}

	/* About Us Section - Tablet Landscape */
	.about-us {
		padding: 90px 0;
	}

	.about-us-content {
		margin-right: 40px;
	}

	.about-us-content .section-title h2 {
		font-size: 40px;
	}

	.about-us-content .section-title h3 {
		font-size: 15px;
		padding-left: 28px;
	}

	.about-us-content .section-title h3::before {
		width: 19px;
		height: 19px;
	}

	.about-body-item {
		margin-bottom: 35px;
	}

	.about-body-item .icon-box {
		width: 65px;
		height: 65px;
		margin-right: 25px;
	}

	.about-body-item .icon-box img {
		width: 32px;
		height: 32px;
	}

	.about-body-list-content h3 {
		font-size: 22px;
		margin-bottom: 12px;
	}

	.about-body-list-content p {
		font-size: 16px;
		line-height: 1.6em;
	}

	.about-us-footer {
		margin-top: 35px;
		gap: 25px;
	}

	.video-play-button a {
		width: 65px;
		height: 65px;
	}

	.video-play-button i {
		font-size: 22px;
	}

	.video-play-button p {
		font-size: 15px;
		margin-top: 12px;
	}

	/* Opening Time Box - Tablet Landscape */
	.opening-time-box {
		padding: 30px;
		margin-top: 35px;
	}

	.opening-time-box .icon-box {
		width: 55px;
		height: 55px;
		margin-right: 25px;
	}

	.opening-time-box .icon-box i {
		font-size: 22px;
	}

	.opening-time-content h3 {
		font-size: 22px;
		margin-bottom: 18px;
	}

	.opening-time-content ul li {
		font-size: 15px;
		margin-bottom: 10px;
	}

	.opening-time-content ul li span {
		font-size: 15px;
	}

	/* Scrolling Ticker - Tablet Landscape */
	.our-scrolling-ticker {
		padding: 22px 0;
	}

	.scrolling-content span {
		font-size: 36px;
	}

	.scrolling-content span img {
		max-width: 28px;
		margin-right: 25px;
	}
}

@media only screen and (min-width: 1200px) {
	/* Hero Section - Desktop */
	.hero {
		padding: 220px 0;
	}

	.hero-content .section-title h1 {
		font-size: 70px;
		line-height: 1.1em;
	}

	.hero-content .section-title h2 {
		font-size: 44px;
		line-height: 1.1em;
	}

	.hero-content .section-title h3 {
		font-size: 16px;
		padding-left: 30px;
	}

	.hero-content .section-title h3::before {
		width: 20px;
		height: 20px;
	}

	.hero-content .section-title p {
		font-size: 18px;
		margin-top: 20px;
		line-height: 1.6em;
	}

	.hero-btn {
		gap: 30px;
	}

	.hero-btn .btn-default {
		padding: 16px 32px;
		font-size: 16px;
	}

	/* About Us Section - Desktop */
	.about-us {
		padding: 100px 0;
	}

	.about-us-content {
		margin-right: 50px;
	}

	.about-us-content .section-title h2 {
		font-size: 44px;
		line-height: 1.1em;
	}

	.about-us-content .section-title h3 {
		font-size: 16px;
		padding-left: 30px;
	}

	.about-us-content .section-title h3::before {
		width: 20px;
		height: 20px;
	}

	.about-body-item {
		margin-bottom: 40px;
	}

	.about-body-item .icon-box {
		width: 70px;
		height: 70px;
		margin-right: 30px;
	}

	.about-body-item .icon-box img {
		width: 35px;
		height: 35px;
	}

	.about-body-list-content h3 {
		font-size: 24px;
		margin-bottom: 15px;
	}

	.about-body-list-content p {
		font-size: 17px;
		line-height: 1.6em;
	}

	.about-us-footer {
		margin-top: 40px;
		gap: 30px;
	}

	.video-play-button a {
		width: 70px;
		height: 70px;
	}

	.video-play-button i {
		font-size: 24px;
	}

	.video-play-button p {
		font-size: 16px;
		margin-top: 15px;
	}

	/* Opening Time Box - Desktop */
	.opening-time-box {
		padding: 35px;
		margin-top: 40px;
	}

	.opening-time-box .icon-box {
		width: 60px;
		height: 60px;
		margin-right: 30px;
	}

	.opening-time-box .icon-box i {
		font-size: 24px;
	}

	.opening-time-content h3 {
		font-size: 24px;
		margin-bottom: 20px;
	}

	.opening-time-content ul li {
		font-size: 16px;
		margin-bottom: 12px;
	}

	.opening-time-content ul li span {
		font-size: 16px;
	}

	/* Scrolling Ticker - Desktop */
	.our-scrolling-ticker {
		padding: 25px 0;
	}

	.scrolling-content span {
		font-size: 44px;
	}

	.scrolling-content span img {
		max-width: 30px;
		margin-right: 30px;
	}
}

@media only screen and (min-width: 1400px) {
	/* Hero Section - Large Desktop */
	.hero {
		padding: 250px 0;
	}

	.hero-content .section-title h1 {
		font-size: 80px;
		line-height: 1.1em;
	}

	.hero-content .section-title h2 {
		font-size: 50px;
		line-height: 1.1em;
	}

	.hero-content .section-title h3 {
		font-size: 18px;
		padding-left: 35px;
	}

	.hero-content .section-title h3::before {
		width: 22px;
		height: 22px;
	}

	.hero-content .section-title p {
		font-size: 20px;
		margin-top: 25px;
		line-height: 1.6em;
	}

	.hero-btn {
		gap: 35px;
	}

	.hero-btn .btn-default {
		padding: 18px 36px;
		font-size: 18px;
	}

	/* About Us Section - Large Desktop */
	.about-us {
		padding: 120px 0;
	}

	.about-us-content {
		margin-right: 60px;
	}

	.about-us-content .section-title h2 {
		font-size: 50px;
		line-height: 1.1em;
	}

	.about-us-content .section-title h3 {
		font-size: 18px;
		padding-left: 35px;
	}

	.about-us-content .section-title h3::before {
		width: 22px;
		height: 22px;
	}

	.about-body-item {
		margin-bottom: 45px;
	}

	.about-body-item .icon-box {
		width: 75px;
		height: 75px;
		margin-right: 35px;
	}

	.about-body-item .icon-box img {
		width: 38px;
		height: 38px;
	}

	.about-body-list-content h3 {
		font-size: 26px;
		margin-bottom: 18px;
	}

	.about-body-list-content p {
		font-size: 18px;
		line-height: 1.6em;
	}

	.about-us-footer {
		margin-top: 45px;
		gap: 35px;
	}

	.video-play-button a {
		width: 75px;
		height: 75px;
	}

	.video-play-button i {
		font-size: 26px;
	}

	.video-play-button p {
		font-size: 18px;
		margin-top: 18px;
	}

	/* Opening Time Box - Large Desktop */
	.opening-time-box {
		padding: 40px;
		margin-top: 45px;
	}

	.opening-time-box .icon-box {
		width: 65px;
		height: 65px;
		margin-right: 35px;
	}

	.opening-time-box .icon-box i {
		font-size: 26px;
	}

	.opening-time-content h3 {
		font-size: 26px;
		margin-bottom: 25px;
	}

	.opening-time-content ul li {
		font-size: 18px;
		margin-bottom: 15px;
	}

	.opening-time-content ul li span {
		font-size: 18px;
	}

	/* Scrolling Ticker - Large Desktop */
	.our-scrolling-ticker {
		padding: 30px 0;
	}

	.scrolling-content span {
		font-size: 50px;
	}

	.scrolling-content span img {
		max-width: 35px;
		margin-right: 35px;
	}
}

/* Touch-friendly improvements for mobile devices */
@media (max-width: 767px) {
	/* Ensure touch targets are at least 44px for accessibility */
	.hero-btn .btn-default {
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.video-play-button a {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.about-us-footer .about-btn .btn-default {
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Improve touch scrolling */
	.hero,
	.about-us {
		-webkit-overflow-scrolling: touch;
	}

	/* Optimize animations for mobile */
	.hero-content .section-title h1,
	.hero-content .section-title h2,
	.hero-content .section-title h3,
	.hero-content .section-title p,
	.hero-btn .btn-default,
	.about-body-item,
	.about-us-footer,
	.video-play-button,
	.opening-time-box {
		will-change: transform;
		transform: translateZ(0);
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.hero-content .section-title h1,
	.hero-content .section-title h2,
	.about-us-content .section-title h2 {
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	}

	.hero-btn .btn-default,
	.about-us-footer .about-btn .btn-default {
		border: 2px solid currentColor;
	}

	.video-play-button a {
		border: 2px solid var(--accent-color);
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.hero-content .section-title h1,
	.hero-content .section-title h2,
	.hero-content .section-title h3,
	.hero-content .section-title p,
	.hero-btn .btn-default,
	.about-body-item,
	.about-us-footer,
	.video-play-button,
	.opening-time-box {
		animation: none !important;
		transition: none !important;
	}

	.scrolling-content {
		animation: none !important;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.hero::before {
		background: rgba(0, 0, 0, 0.7);
	}

	.about-us {
		background-color: var(--secondary-color);
	}

	.opening-time-box {
		background: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.2);
	}
}

/* -----------------------------------------------
   Products: Premium Card Styles (Front Pages)
   ----------------------------------------------- */
.product-card{
  background: #182229;
  border: 1px solid var(--dark-divider-color);
  border-radius: 999px 999px 16px 16px;
  padding: 0; /* Ensure image touches curved border */
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  border-color: var(--accent-color);
}

.product-card .image-wrap{
  overflow: hidden;
}

.product-card .card-img-top{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-bottom: 1px solid var(--dark-divider-color);
  transition: transform 0.4s ease;
}

.product-card:hover .card-img-top{
  transform: scale(1.05);
}

.product-card .card-body{
  padding: 1rem 1rem 1.25rem;
}

.product-card .card-title{
  font-family: var(--accent-font);
  letter-spacing: 0.3px;
  color: var(--primary-color);
}

.product-card .card-text{
  color: var(--text-color);
}

.price-badge{
  background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
  color: var(--secondary-color);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(201,165,129,0.35);
}

/* Compact variant for custom gradient button */
.btn-default.btn-sm{
  padding: 10px 18px;
  font-size: 14px;
}

/* Navbar logo sizing overrides (smaller logo across breakpoints) */
header.main-header .navbar-brand img {
  max-height: 80px;
}

@media only screen and (min-width: 1400px) {
  header.main-header .navbar-brand img {
    max-height: 90px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  header.main-header .navbar-brand img {
    max-height: 80px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1199.98px) {
  header.main-header .navbar-brand img {
    max-height: 70px;
  }
}

@media only screen and (max-width: 767.98px) {
  header.main-header .navbar-brand img {
    max-height: 50px;
  }
}

@media only screen and (max-height: 500px) and (orientation: landscape) {
  header.main-header .navbar-brand img {
    max-height: 50px;
  }
}