/* ======================================================================
   ZHB & SON'S — CUSTOM FIXES (UPDATED v2)
   Load this file AFTER css/custom.css
   ====================================================================== */

/* ============ PRELOADER — EXACT CENTER FIX (without fighting JS hide logic) ============ */
/* IMPORTANT: we do NOT force display:flex with !important on .preloader itself,
   because the theme's JS sets display:none (or adds a class) once the page
   finishes loading. Forcing display:flex !important here was overriding that
   JS and causing the preloader to flicker back / loop. We only center the
   INNER content, and let the theme's own JS control show/hide of .preloader. */
.preloader .loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
}
.preloader #loading-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
}
.preloader #loading-icon img {
	max-width: 220px !important;
	width: 220px !important;
	height: auto !important;
	margin: 0 auto !important;
	display: block !important;
}

/* ============ NAVBAR — NO BACKGROUND (transparent) ============ */
.main-header {
	background-color: transparent !important;
	background: transparent !important;
	box-shadow: none !important;
	transition: all 0.3s ease;
}
.header-sticky {
	background-color: transparent !important;
	background: transparent !important;
}
.main-header .navbar {
	background-color: transparent !important;
	background: transparent !important;
}

/* If the theme adds a "scrolled/sticky" class with its own bg when scrolling,
   neutralize that too so it stays transparent throughout */
.main-header.scroll-on,
.main-header.sticky,
.main-header.fixed-header {
	background-color: transparent !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* ============ NAV ITEMS ONE LINE FIX ============ */
.nav-menu-wrapper .navbar-nav {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 5px !important;
}
.nav-menu-wrapper .navbar-nav .nav-item {
	white-space: nowrap !important;
}
.nav-menu-wrapper .navbar-nav .nav-link {
	padding: 8px 12px !important;
	font-size: 15px !important;
	white-space: nowrap !important;
}

/* ============ NAVBAR BRAND LOGO — SAME SIZE AS FOOTER, FORCED BIGGER ============ */
/* NOTE: if the logo still looks small after this, the logo.png file itself
   likely has a lot of empty transparent space baked into the image —
   in that case the image needs to be re-exported/cropped tighter around
   the actual logo mark. This CSS forces the rendered box as large as
   the theme's layout allows. */
header.main-header .navbar-brand {
	height: auto !important;
	max-height: none !important;
	padding: 6px 0 !important;
	display: flex !important;
	align-items: center !important;
}
header.main-header .navbar-brand img,
.main-footer .footer-logo img {
	max-height: 110px !important;
	height: 110px !important;
	max-width: 260px !important;
	width: auto !important;
	object-fit: contain !important;
}
@media (max-width: 991px) {
	header.main-header .navbar-brand img,
	.main-footer .footer-logo img {
		max-height: 75px !important;
		height: 75px !important;
		max-width: 180px !important;
	}
}
@media (max-width: 575px) {
	header.main-header .navbar-brand img,
	.main-footer .footer-logo img {
		max-height: 60px !important;
		height: 60px !important;
		max-width: 150px !important;
	}
}

/* ============ DROPDOWN MENU FIX ============ */
.nav-item.submenu .dropdown-menu,
.nav-item.submenu ul {
	background-color: #1a3c2a !important;
}

/* ============ MOBILE RESPONSIVE NAV ============ */
@media (max-width: 991px) {
	.nav-menu-wrapper .navbar-nav {
		flex-direction: column !important;
		gap: 0 !important;
	}
	.nav-menu-wrapper .navbar-nav .nav-link {
		padding: 10px 15px !important;
	}
	/* Mobile menu still needs a readable background since navbar itself
	   is transparent now — keep the collapsed dropdown panel dark */
	.main-menu.show .nav-menu-wrapper,
	.collapse.navbar-collapse.show {
		background-color: #1a3c2a !important;
	}
}


/* ======================================================================
   HERO SECTION — Bg.png background, exact text layout, left aligned
   ====================================================================== */
.hero {
	background-image: url('../images1/Bg.png') !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

.hero .hero-content {
	text-align: left !important;
	max-width: 720px;
}

.hero .hero-main-title {
	text-align: left !important;
	color: #ffffff !important;
	font-weight: 800;
	line-height: 1.15;
	font-size: 52px;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.hero .hero-main-title .hero-highlight {
	color: #f5b400 !important;
}

.hero .hero-desc {
	text-align: left !important;
	color: #f1f1f1 !important;
	font-size: 17px;
	line-height: 1.7;
	max-width: 600px;
	margin-bottom: 30px;
}

.hero .hero-content-footer {
	justify-content: flex-start !important;
	display: flex;
	gap: 15px;
}

@media (max-width: 767px) {
	.hero .hero-main-title {
		font-size: 32px;
	}
	.hero .hero-desc {
		font-size: 15px;
	}
}


/* ======================================================================
   WELCOME / ABOUT US SECTION — welcome.png image fix
   ====================================================================== */
.about-us-image-box .about-us-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}
.about-us-image-box .about-us-image {
	overflow: hidden;
	border-radius: 12px;
}


/* ======================================================================
   OUR BANANA VARIETIES — 4 CARDS — TIGHT LAYOUT, NO ICON, IMAGE FIX
   ====================================================================== */

.service-item-box {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12px;
	height: 100%;
}

.service-item-image-wrap {
	width: 100%;
	height: 190px;
	overflow: hidden;
	border-radius: 12px 12px 0 0;
}

.service-item-image-wrap .service-item-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.4s ease;
}

.service-item:hover .service-item-image-wrap .service-item-image {
	transform: scale(1.06);
}

/* Icon removed from markup — tighten the header so there's no empty gap
   where the icon used to sit */
.service-item-header {
	padding: 16px 18px 0 18px !important;
	display: block !important;
}
.service-item-header .icon-box {
	display: none !important; /* safety: hide if any leftover icon-box markup remains */
}

.service-item-content h2 {
	margin-bottom: 8px;
	font-size: 19px;
}
.service-item-content p {
	margin-bottom: 0;
	font-size: 14px;
	line-height: 1.5;
}

.service-item-body {
	padding: 6px 18px 18px 18px !important;
	margin-top: 0 !important;
}

.service-item-list ul {
	margin-bottom: 14px;
	margin-top: 0 !important;
	padding-left: 0;
}
.service-item-list ul li {
	font-size: 13.5px;
	line-height: 1.6;
	margin-bottom: 4px;
}

/* ======================================================================
   "View Specifications" BUTTON
   ======================================================================
   This button now uses the exact same markup and classes as the theme's
   own "Get In Touch" / "Explore Our Bananas" buttons (btn-default
   btn-highlighted, no extra wrapper, no extra class). That means the
   theme's own CSS renders its arrow and hover state consistently — the
   same way it already does for every other button on the site, so it
   matches exactly and doesn't fight with a second, conflicting arrow.
   The only addition here is making it fill the card's width, since the
   theme's default buttons are inline/auto-width. */
.service-item-btn {
	margin-top: 4px;
	width: 100%;
}
.service-item-btn .btn-default {
	display: flex;
	width: 100%;
	box-sizing: border-box;
}


/* ======================================================================
   TESTIMONIALS — no "View All" button, no avatar photo, clean text layout,
   plus background image
   ====================================================================== */

.our-testimonials {
	background-image: url('../images1/testmonials.png') !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* Section-content-btn used to hold the "View All Testimonials" button.
   Button removed from markup; tighten this wrapper so no leftover gap. */
.our-testimonials .section-content-btn {
	display: block;
}
.our-testimonials .section-btn {
	display: none !important; /* safety in case markup still has it somewhere */
}

/* Author row: no image now, just name + role, vertically centered, clean */
.testimonial-item-author {
	display: flex;
	align-items: center;
	gap: 0;
	margin-top: 14px;
}
.testimonial-author-image {
	display: none !important; /* photo removed */
}
.testimonial-author-content h2 {
	font-size: 17px;
	margin-bottom: 2px;
}
.testimonial-author-content p {
	font-size: 13px;
	opacity: 0.8;
	margin-bottom: 0;
}

/* small quote icon before content, replacing the removed avatar visually */
.testimonial-item-content {
	position: relative;
	padding-left: 4px;
}
.testimonial-item-content::before {
	content: "\201C";
	font-size: 40px;
	line-height: 0;
	color: #f5b400;
	opacity: 0.6;
	display: inline-block;
	margin-right: 4px;
	vertical-align: -10px;
}


/* ======================================================================
   OUR EXPORT PROCESS — background image
   ====================================================================== */
.our-story {
	background-image: url('../images1/export.png') !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}


/* ======================================================================
   WHATSAPP FLOATING BUTTON — visible on every page, on top while scrolling
   ====================================================================== */
.whatsapp-float-btn {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 58px;
	height: 58px;
	background-color: #25D366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	z-index: 9999;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float-btn i {
	color: #ffffff;
	font-size: 30px;
}
.whatsapp-float-btn:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
@media (max-width: 575px) {
	.whatsapp-float-btn {
		width: 50px;
		height: 50px;
		bottom: 16px;
		right: 16px;
	}
	.whatsapp-float-btn i {
		font-size: 26px;
	}
}


/* ======================================================================
   GENERAL RESPONSIVENESS — extra safety rules across breakpoints
   ====================================================================== */

/* Prevent any horizontal overflow on small screens */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

img {
	max-width: 100%;
	height: auto;
}

/* Container padding stays comfortable on very small screens */
@media (max-width: 480px) {
	.container, .container-fluid {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* Service item cards: stack cleanly on tablets without odd gaps */
@media (max-width: 991px) and (min-width: 576px) {
	.our-services .row > div {
		margin-bottom: 24px;
	}
}

/* Testimonial cards readable width on small phones */
@media (max-width: 480px) {
	.testimonial-item-content p {
		font-size: 14px;
		line-height: 1.6;
	}
}


/* ======================================================================
   HEADER SIDEBAR — two phone numbers + four social icons (Instagram,
   Facebook, Email, WhatsApp) now fit cleanly instead of the old single
   number + two icons layout
   ====================================================================== */
.header-contact-box-content p {
	line-height: 1.7;
}
.header-contact-box-content p a {
	display: block;
	font-size: 14px;
	white-space: normal;
}

.header-social-links ul {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}
.header-social-links ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Footer: two phone lines need a touch more breathing room than one did */
.footer-info-list ul li {
	margin-bottom: 6px;
}
.footer-social-links ul {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}