/**
 * Global Responsive Fixes & Cross-Browser Compatibility
 * High Grown Trees Eco Trading LLC
 */

/* ============================================
   GLOBAL OVERFLOW PREVENTION
   ============================================ */
html {
	scroll-behavior: smooth;
}

body,
.page-wraper {
	overflow-x: hidden;
	max-width: 100vw;
}

/* Ensure all images are responsive by default */
img {
	max-width: 100%;
	height: auto;
}

/* ============================================
   DROPDOWN - DESKTOP HOVER, MOBILE CLICK
   ============================================ */
@media (min-width: 992px) {
	.dropdown:hover .dropdown-menu {
		display: block;
		margin-top: 0;
	}
	.dropdown:hover > a {
		color: #2c7a34;
	}
}

/* On mobile, dropdown works via Bootstrap click toggle */
@media (max-width: 991px) {
	.header-nav .nav > li .tabindex,
	.header-nav .nav > li a i.tabindex,
	i.tabindex {
		display: none !important;
	}
	.header-nav .nav > li.dropdown {
		position: relative;
	}
	.header-nav .nav > li.dropdown > a {
		padding: 10px 15px;
		display: block;
	}
	.header-nav .nav .dropdown-menu {
		position: static !important;
		float: none !important;
		box-shadow: none !important;
		border: none !important;
		background: transparent !important;
		padding: 0 0 0 15px !important;
		margin: 0 !important;
		transform: none !important;
	}
	.header-nav .nav .dropdown-menu .dropdown-item {
		padding: 8px 15px;
		color: inherit;
		white-space: normal;
	}
}

/* ============================================
   NAVBAR / HEADER RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
	.header-nav .nav > li > a {
		padding: 10px 15px;
	}
	.logo-header img {
		max-width: 140px;
	}
}

@media (max-width: 480px) {
	.logo-header img {
		max-width: 120px;
	}
}

/* ============================================
   HERO / BANNER RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
	.main-banner .content-info .title {
		font-size: 36px;
	}
	.main-banner .single-product-info-right {
		margin-top: 20px;
	}
	.dz-bnr-inr-entry h1 {
		font-size: 38px;
	}
	.single-product-media {
		margin-top: 60px !important;
		padding-top: 40px !important;
	}
	.single-product-media .dz-media img {
		margin-top: -80px !important;
	}
}

/* ===========================================================
   MOBILE/TABLET HERO (mhero) — editorial, restrained, interactive
   =========================================================== */
.mhero { display: none; }

@media (max-width: 991px) {
	.mhero {
		display: block;
		background: #faf8f4;
		color: #1a2820;
		padding: 0 0 56px;
		font-family: inherit;
	}

	/* === Photo slider — true landscape 3:2, matches source, no bleed === */
	.mhero__photo {
		position: relative;
		width: 100%;
		aspect-ratio: 3 / 2;
		overflow: hidden;
		background: #1a2820;
	}
	.mhero__slides {
		position: absolute;
		inset: 0;
	}
	.mhero__photo-slide {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity 0.9s ease;
		pointer-events: none;
	}
	.mhero__photo-slide.is-active {
		opacity: 1;
		pointer-events: auto;
	}
	.mhero__photo-slide img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
	}
	.mhero__photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(180deg, rgba(26,40,32,0) 50%, rgba(26,40,32,0.55) 100%),
			linear-gradient(0deg, rgba(26,40,32,0.15) 0%, rgba(26,40,32,0) 30%);
		pointer-events: none;
		z-index: 1;
	}
	.mhero__photo-overlay {
		position: absolute;
		left: 22px;
		right: 22px;
		bottom: 64px;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 12px;
		color: #fff;
		z-index: 2;
	}

	/* === Slider nav (arrows + dots) === */
	.mhero__photo-nav {
		position: absolute;
		left: 22px;
		right: 22px;
		bottom: 18px;
		display: flex;
		align-items: center;
		gap: 14px;
		z-index: 3;
	}
	.mhero__photo-arrow {
		width: 32px;
		height: 32px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.12);
		border: 1px solid rgba(255, 255, 255, 0.35);
		color: #fff;
		border-radius: 50%;
		cursor: pointer;
		flex-shrink: 0;
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		transition: background 0.25s ease;
		padding: 0;
	}
	.mhero__photo-arrow:active {
		background: rgba(255, 255, 255, 0.25);
	}
	.mhero__photo-dots {
		flex: 1;
		display: flex;
		gap: 6px;
		align-items: center;
		justify-content: center;
	}
	.mhero__photo-dot {
		width: 22px;
		height: 2px;
		background: rgba(255, 255, 255, 0.35);
		border: none;
		padding: 0;
		cursor: pointer;
		transition: background 0.3s ease, width 0.3s ease;
	}
	.mhero__photo-dot.is-active {
		background: #fff;
		width: 36px;
	}
	.mhero__brand {
		font-family: 'Marcellus', serif;
		font-size: 15px;
		letter-spacing: 0.3px;
		line-height: 1;
	}
	.mhero__location {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 11px;
		letter-spacing: 1.4px;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.85);
	}
	.mhero__dot {
		width: 6px;
		height: 6px;
		background: #c9a96e;
		border-radius: 50%;
		display: inline-block;
		animation: mheroPulse 2s ease-in-out infinite;
	}
	@keyframes mheroPulse {
		0%, 100% { opacity: 1; transform: scale(1); }
		50% { opacity: 0.4; transform: scale(1.4); }
	}

	/* === Editorial copy === */
	.mhero__copy {
		padding: 38px 22px 0;
	}
	.mhero__chapter {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-bottom: 24px;
		padding-bottom: 16px;
		border-bottom: 1px solid rgba(26, 40, 32, 0.12);
	}
	.mhero__chapter-num {
		font-family: 'Marcellus', serif;
		font-size: 13px;
		color: #c9a96e;
		letter-spacing: 0.5px;
	}
	.mhero__chapter-label {
		font-size: 11px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: #4a5a52;
		font-weight: 500;
	}
	.mhero__title {
		font-family: 'Marcellus', serif;
		font-size: 42px;
		line-height: 1.05;
		font-weight: 400;
		color: #1a2820;
		margin: 0 0 18px;
		letter-spacing: -0.8px;
	}
	.mhero__title em {
		font-style: italic;
		color: #2d5a3d;
		font-weight: 400;
	}
	.mhero__lead {
		font-size: 15px;
		line-height: 1.6;
		color: #4a5a52;
		margin: 0 0 28px;
		max-width: 32ch;
	}
	.mhero__actions {
		display: flex;
		align-items: center;
		gap: 22px;
	}
	.mhero__cta {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		background: #1a2820;
		color: #fff;
		padding: 16px 22px;
		border-radius: 0;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.5px;
		text-decoration: none;
		transition: background 0.3s ease;
	}
	.mhero__cta:active {
		background: #2d5a3d;
		color: #fff;
	}
	.mhero__cta svg {
		transition: transform 0.3s ease;
	}
	.mhero__cta:active svg { transform: translateX(3px); }
	.mhero__link {
		font-size: 13px;
		font-weight: 500;
		color: #1a2820;
		text-decoration: none;
		border-bottom: 1px solid #1a2820;
		padding-bottom: 2px;
		letter-spacing: 0.3px;
	}

	/* === Animated counters === */
	.mhero__counters {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
		margin: 56px 22px 0;
		padding: 28px 0 0;
		border-top: 1px solid rgba(26, 40, 32, 0.12);
	}
	.mhero__counter {
		text-align: left;
		padding-right: 12px;
	}
	.mhero__counter:not(:last-child) {
		border-right: 1px solid rgba(26, 40, 32, 0.08);
	}
	.mhero__counter:not(:first-child) {
		padding-left: 14px;
	}
	.mhero__counter-num {
		font-family: 'Marcellus', serif;
		font-size: 32px;
		font-weight: 400;
		color: #1a2820;
		line-height: 1;
		margin-bottom: 8px;
		letter-spacing: -0.5px;
	}
	.mhero__counter-label {
		font-size: 10.5px;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: #6a7a72;
		font-weight: 500;
		line-height: 1.3;
	}

	/* === Plant carousel === */
	.mhero__carousel {
		margin-top: 56px;
	}
	.mhero__carousel-head {
		padding: 0 22px;
		margin-bottom: 22px;
	}
	.mhero__carousel-eyebrow {
		font-size: 11px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: #c9a96e;
		font-weight: 500;
		margin-bottom: 8px;
	}
	.mhero__carousel-title {
		font-family: 'Marcellus', serif;
		font-size: 24px;
		font-weight: 400;
		color: #1a2820;
		margin: 0;
		line-height: 1.15;
		letter-spacing: -0.3px;
	}
	.mhero__track {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 4px 22px 24px;
		scrollbar-width: none;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 22px;
	}
	.mhero__track::-webkit-scrollbar { display: none; }
	.mhero__slide {
		flex: 0 0 78%;
		scroll-snap-align: start;
		text-decoration: none;
		color: inherit;
		display: flex;
		flex-direction: column;
		background: #f0ece4;
		overflow: hidden;
		transition: transform 0.4s ease;
	}
	.mhero__slide:active {
		transform: scale(0.985);
		color: inherit;
	}
	.mhero__slide-img {
		aspect-ratio: 4 / 5;
		background: #e8e4dc;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding: 28px 22px 0;
		overflow: hidden;
		position: relative;
	}
	.mhero__slide-img::before {
		content: "";
		position: absolute;
		inset: 0;
		background:
			radial-gradient(ellipse at center bottom, rgba(0,0,0,0.08), transparent 60%);
		pointer-events: none;
	}
	.mhero__slide-img img {
		max-width: 92%;
		max-height: 100%;
		object-fit: contain;
		object-position: bottom center;
		filter: drop-shadow(0 12px 18px rgba(0,0,0,0.15));
		position: relative;
		z-index: 1;
	}
	.mhero__slide-meta {
		padding: 18px 18px 22px;
		background: #faf8f4;
	}
	.mhero__slide-index {
		font-size: 10.5px;
		letter-spacing: 1.6px;
		color: #c9a96e;
		font-family: 'Marcellus', serif;
		margin-bottom: 8px;
	}
	.mhero__slide-name {
		font-family: 'Marcellus', serif;
		font-size: 18px;
		color: #1a2820;
		line-height: 1.15;
		margin-bottom: 4px;
		letter-spacing: -0.2px;
	}
	.mhero__slide-genus {
		font-size: 12px;
		color: #6a7a72;
		font-style: italic;
	}

	/* Progress bar (driven by JS scroll listener) */
	.mhero__progress {
		margin: 0 22px;
		height: 1px;
		background: rgba(26, 40, 32, 0.1);
		position: relative;
		overflow: hidden;
	}
	.mhero__progress-bar {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 16.6%;
		background: #1a2820;
		transition: width 0.25s ease, transform 0.25s ease;
	}
	.mhero__pager {
		margin: 14px 22px 0;
		font-family: 'Marcellus', serif;
		font-size: 13px;
		color: #4a5a52;
		letter-spacing: 0.5px;
	}
	.mhero__pager-current {
		color: #1a2820;
		font-size: 16px;
	}
	.mhero__pager-total {
		margin-left: 4px;
		color: #c9a96e;
	}
}

@media (max-width: 380px) {
	.mhero__photo { min-height: 460px; height: 72vh; }
	.mhero__title { font-size: 36px; }
	.mhero__counter-num { font-size: 26px; }
	.mhero__slide { flex: 0 0 82%; }
}

/* ===========================================================
   MOBILE/TABLET SPECIALITIES (mspec) — editorial accordion
   =========================================================== */
.mspec { display: none; }

@media (max-width: 991px) {
	.mspec {
		display: block;
		background: #1a2820;
		color: #faf8f4;
		padding: 64px 0 56px;
	}
	.mspec__inner { padding: 0 22px; }

	.mspec__head {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-bottom: 22px;
	}
	.mspec__rule {
		flex: 1;
		height: 1px;
		background: rgba(250, 248, 244, 0.2);
	}
	.mspec__chapter {
		display: inline-flex;
		align-items: center;
		gap: 10px;
	}
	.mspec__chapter-num {
		font-family: 'Marcellus', serif;
		font-size: 13px;
		color: #c9a96e;
	}
	.mspec__chapter-label {
		font-size: 11px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: rgba(250, 248, 244, 0.7);
		font-weight: 500;
	}
	.mspec__title {
		font-family: 'Marcellus', serif;
		font-size: 36px;
		line-height: 1.1;
		font-weight: 400;
		color: #faf8f4;
		margin: 0 0 36px;
		letter-spacing: -0.5px;
	}
	.mspec__title em {
		color: #c9a96e;
		font-style: italic;
		font-weight: 400;
	}

	/* Accordion list */
	.mspec__list {
		list-style: none;
		padding: 0;
		margin: 0 0 32px;
	}
	.mspec__item {
		border-top: 1px solid rgba(250, 248, 244, 0.14);
	}
	.mspec__item:last-child {
		border-bottom: 1px solid rgba(250, 248, 244, 0.14);
	}
	.mspec__row {
		width: 100%;
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 14px;
		padding: 22px 0;
		background: transparent;
		border: none;
		text-align: left;
		color: #faf8f4;
		cursor: pointer;
		font: inherit;
	}
	.mspec__row-num {
		font-family: 'Marcellus', serif;
		font-size: 12px;
		color: #c9a96e;
		letter-spacing: 0.5px;
		font-style: italic;
	}
	.mspec__row-title {
		font-family: 'Marcellus', serif;
		font-size: 20px;
		font-weight: 400;
		color: #faf8f4;
		line-height: 1.15;
		letter-spacing: -0.2px;
		transition: transform 0.4s ease;
	}
	.mspec__item.is-open .mspec__row-title {
		color: #c9a96e;
	}
	.mspec__row-toggle {
		position: relative;
		width: 22px;
		height: 22px;
		flex-shrink: 0;
	}
	.mspec__row-toggle::before,
	.mspec__row-toggle::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		background: #faf8f4;
		transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s ease;
	}
	.mspec__row-toggle::before {
		width: 14px;
		height: 1px;
		transform: translate(-50%, -50%);
	}
	.mspec__row-toggle::after {
		width: 1px;
		height: 14px;
		transform: translate(-50%, -50%);
	}
	.mspec__item.is-open .mspec__row-toggle::before {
		background: #c9a96e;
	}
	.mspec__item.is-open .mspec__row-toggle::after {
		transform: translate(-50%, -50%) rotate(90deg);
		background: #c9a96e;
		opacity: 0;
	}

	/* Panel (smooth height transition) */
	.mspec__panel {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.mspec__item.is-open .mspec__panel {
		grid-template-rows: 1fr;
	}
	.mspec__panel-inner {
		overflow: hidden;
		min-height: 0;
	}
	.mspec__panel-inner p {
		font-size: 14.5px;
		line-height: 1.65;
		color: rgba(250, 248, 244, 0.78);
		margin: 0 0 16px;
		padding-left: 28px;
		padding-bottom: 8px;
	}
	.mspec__tags {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding: 0 0 22px 28px;
	}
	.mspec__tags span {
		display: inline-block;
		padding: 5px 12px;
		font-size: 11px;
		letter-spacing: 0.4px;
		color: rgba(250, 248, 244, 0.7);
		border: 1px solid rgba(250, 248, 244, 0.18);
		border-radius: 100px;
	}

	/* Inline CTA */
	.mspec__cta {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		color: #faf8f4;
		text-decoration: none;
		font-size: 13px;
		letter-spacing: 0.5px;
		font-weight: 500;
		padding-bottom: 6px;
		border-bottom: 1px solid #c9a96e;
	}
	.mspec__cta:active {
		color: #c9a96e;
	}
}

@media (max-width: 380px) {
	.mspec__title { font-size: 30px; }
	.mspec__row-title { font-size: 18px; }
}

/* ===========================================================
   Hide old desktop sections on mobile via Bootstrap d-none/d-md-block
   (handled by Bootstrap utility classes; nothing extra needed here)
   =========================================================== */

/* ============================================
   PRODUCT CARDS RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
	.premium-product-card .card-image-wrapper {
		height: 240px !important;
	}
}

@media (max-width: 767px) {
	.premium-product-card .card-image-wrapper {
		height: 200px !important;
	}
	.premium-product-card .card-content {
		padding: 18px !important;
	}
	.premium-product-card .product-title {
		font-size: 1.2rem !important;
	}
	/* Shop cards */
	.shop-card,
	.special-shop-card {
		margin-bottom: 20px;
	}
	.shop-card .dz-media img,
	.special-shop-card .dz-media img {
		width: 100% !important;
		max-width: 100% !important;
	}
}

@media (max-width: 480px) {
	.premium-product-card .card-image-wrapper {
		height: 180px !important;
	}
	.premium-product-card .card-content {
		padding: 15px !important;
	}
}

/* ============================================
   SPECIALITY CARDS RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
	.premium-title {
		font-size: 32px;
	}
	.premium-subtitle {
		font-size: 16px;
	}
	.speciality-card.premium {
		padding: 30px 22px 28px;
	}
}

@media (max-width: 767px) {
	.premium-title {
		font-size: 26px;
	}
	.premium-subtitle {
		font-size: 14px;
	}
	.row.g-4.mt-5 {
		margin-top: 1rem !important;
	}
}

@media (max-width: 480px) {
	.premium-title {
		font-size: 22px;
	}
}

/* ============================================
   GALLERY RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
	.gallery-col-2 .dz-box {
		min-height: 350px;
	}
}

@media (max-width: 767px) {
	.gallery-col-2 .dz-box {
		min-height: 250px;
	}
	.gallery-wrapper {
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	.gallery-col-2 .dz-box {
		min-height: 200px;
	}
}

/* ============================================
   ABOUT PAGE RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
	.premium-image-container {
		height: 450px !important;
		padding-right: 0 !important;
		margin-bottom: 40px;
	}
	.premium-content-wrapper {
		padding: 0 15px !important;
	}
	.floating-quote-card {
		left: 15px !important;
		right: 15px !important;
		bottom: 15px !important;
		padding: 20px !important;
	}
	.quote-text {
		font-size: 16px !important;
	}
	.enhanced-title {
		font-size: 30px;
	}
}

@media (max-width: 767px) {
	.premium-image-container {
		height: 350px !important;
	}
	.enhanced-title {
		font-size: 26px;
	}
	.enhanced-image-gallery .main-image .image-wrapper {
		height: 280px;
	}
	.enhanced-image-gallery .gallery-item:not(.main-image) .image-wrapper {
		height: 130px;
	}
	.mission-card {
		padding: 24px !important;
	}
	.card-title {
		font-size: 22px;
	}
	.story-card {
		margin-bottom: 16px;
	}
}

@media (max-width: 480px) {
	.premium-image-container {
		height: 280px !important;
	}
	.enhanced-title {
		font-size: 22px;
	}
	.enhanced-image-gallery .main-image .image-wrapper {
		height: 200px !important;
	}
	.enhanced-image-gallery .gallery-item:not(.main-image) .image-wrapper {
		height: 120px !important;
	}
	.mission-card {
		padding: 18px !important;
	}
	.card-title {
		font-size: 20px !important;
	}
	.story-card {
		padding: 18px !important;
	}
}

/* ============================================
   ABOUT PAGE - STORY SECTION
   ============================================ */
@media (max-width: 767px) {
	.enhanced-story-section {
		background-attachment: scroll !important;
	}
}

@media (max-width: 480px) {
	.enhanced-story-section {
		padding: 50px 0 !important;
		background-attachment: scroll !important;
	}
	/* Large story headings */
	.enhanced-story-section h2,
	.enhanced-story-section .story-title {
		font-size: clamp(1.4rem, 5vw, 42px) !important;
	}
}

/* ============================================
   CONTACT PAGE RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
	.contact-form-wrapper {
		padding: 35px 25px !important;
	}
}

@media (max-width: 767px) {
	.premium-contact-banner .dz-bnr-inr-entry {
		padding: 60px 0 !important;
	}
	.banner-title {
		font-size: 2rem !important;
	}
	.banner-subtitle {
		font-size: 0.95rem !important;
	}
	.contact-form-wrapper {
		padding: 25px 18px !important;
	}
	.floating-badge {
		display: none !important;
	}
	.premium-contact-card {
		padding: 30px 20px !important;
	}
}

@media (max-width: 480px) {
	.banner-title {
		font-size: 1.5rem !important;
	}
	.banner-subtitle {
		font-size: 0.85rem !important;
	}
	.premium-contact-banner .dz-bnr-inr-entry {
		padding: 40px 0 !important;
	}
	.premium-contact-card {
		padding: 22px 15px !important;
	}
	.contact-form-wrapper {
		padding: 20px 15px !important;
	}
}

/* Contact page decorative floating elements - hide on mobile */
@media (max-width: 767px) {
	.floating-leaf,
	[style*="position: absolute"][style*="border-radius: 50%"] {
		display: none !important;
	}
}

/* ============================================
   FAQ PAGE RESPONSIVE (50/50 LAYOUT)
   ============================================ */
@media (max-width: 991px) {
	.faq-side-content {
		min-height: 350px !important;
		padding: 40px 25px !important;
	}
	.faq-end-content {
		padding: 40px 25px !important;
	}
}

@media (max-width: 767px) {
	.faq-side-content {
		min-height: 280px !important;
		padding: 30px 20px !important;
	}
	.faq-end-content {
		padding: 30px 15px !important;
	}
	.faq-side-content h1 {
		font-size: 1.8rem;
	}
}

@media (max-width: 480px) {
	.faq-side-content {
		min-height: auto !important;
		padding: 25px 15px !important;
	}
	.faq-end-content {
		padding: 20px 10px !important;
	}
	.faq-side-content h1 {
		font-size: 1.5rem;
	}
	.accordion-button {
		font-size: 0.9rem;
		padding: 12px 15px;
	}
}

/* ============================================
   FOOTER RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
	.footer-map .map-iframe {
		min-height: 250px;
	}
}

@media (max-width: 767px) {
	.footer-links li a {
		padding-left: 0;
	}
	.footer-links li a:before {
		display: none;
	}
	.footer-map .map-iframe iframe {
		min-height: 200px !important;
	}
	.footer-top {
		padding: 30px 15px;
	}
	.widget-address p {
		font-size: 14px;
	}
	.footer-title {
		font-size: 18px;
		margin-top: 20px;
	}
}

@media (max-width: 480px) {
	.footer-top .row > [class*="col-"] {
		margin-bottom: 15px;
	}
	.footer-bottom .copyright-text {
		font-size: 13px;
	}
}

/* ============================================
   SECTION PADDING RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
	.content-inner {
		padding: 50px 0 !important;
	}
	/* Respect pt-0 utility on content-inner */
	.content-inner.pt-0 {
		padding-top: 0 !important;
	}
	/* Prevent double padding when content-inner is nested */
	.content-inner .content-inner {
		padding-top: 0 !important;
	}
	.content-inner-3 {
		padding: 40px 0 !important;
	}
	.enhanced-about-section,
	.enhanced-mission-section,
	.premium-section,
	.enhanced-story-section {
		padding: 60px 0 !important;
	}
	/* Override inline padding: 100px 0 on sections */
	section[style*="padding: 100px"] {
		padding: 50px 0 !important;
	}
	section[style*="padding: 120px"] {
		padding: 60px 0 !important;
	}
}

@media (max-width: 480px) {
	.content-inner {
		padding: 35px 0 !important;
	}
	.content-inner.pt-0 {
		padding-top: 0 !important;
	}
	.content-inner .content-inner {
		padding-top: 0 !important;
	}
	.content-inner-3 {
		padding: 30px 0 !important;
	}
	.enhanced-about-section,
	.enhanced-mission-section,
	.premium-section,
	.enhanced-story-section {
		padding: 40px 0 !important;
	}
	section[style*="padding: 100px"] {
		padding: 35px 0 !important;
	}
	section[style*="padding: 120px"] {
		padding: 40px 0 !important;
	}
}

/* ============================================
   MODAL - SISTER CONCERN POPUPS
   ============================================ */
.modal-content {
	border: none;
}

.modal-title {
	font-weight: 600;
}

.modal-body p {
	font-size: 15px;
	line-height: 1.6;
}

/* Ensure close X button is visible */
.modal-header .btn-close {
	background-color: transparent;
	opacity: 0.6;
	filter: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
	background-size: 14px;
	background-repeat: no-repeat;
	background-position: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.modal-header .btn-close:hover {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.05);
}

.modal-footer .btn-close-modal {
	background: #2d5a3d;
	color: #fff;
	border: none;
	padding: 8px 24px;
	border-radius: 8px;
	font-weight: 500;
	transition: all 0.3s ease;
}

.modal-footer .btn-close-modal:hover {
	background: #1e3c2e;
}

/* ============================================
   MODAL RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
	.modal-dialog {
		margin: 15px;
	}
	.modal-body p {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.modal-dialog {
		margin: 10px;
	}
	.modal-body p {
		font-size: 13px !important;
	}
	.modal-header .modal-title {
		font-size: 1.1rem;
	}
}

/* ============================================
   PORTFOLIO / PROJECTS RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
	.portfolio-box .dz-media img {
		width: 100%;
		height: auto;
	}
	.portfolio-detail-1 .dz-media img {
		width: 100%;
		height: auto;
	}
	.detail-list-box {
		position: relative !important;
		top: auto !important;
		margin-top: 20px;
	}
}

@media (max-width: 480px) {
	.portfolio-box .dz-content .title {
		font-size: 1rem;
	}
	.portfolio-box .dz-content .badge {
		font-size: 0.75rem;
	}
}

/* ============================================
   PRODUCT DEFAULT PAGE RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
	.dz-product-detail.static-media {
		position: relative !important;
		top: auto !important;
	}
}

@media (max-width: 767px) {
	.dz-product-detail .dz-content h2.title {
		font-size: 1.4rem;
	}
	.dz-product-detail .dz-media img {
		width: 100%;
		height: auto;
	}
}

/* ============================================
   BREADCRUMB RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
	.breadcrumb {
		font-size: 0.85rem;
		flex-wrap: wrap;
	}
	.breadcrumb-item + .breadcrumb-item::before {
		padding: 0 4px;
	}
}

/* ============================================
   TOUCH DEVICE IMPROVEMENTS
   ============================================ */
@media (hover: none) {
	.premium-product-card:hover {
		transform: none;
	}
	.premium-contact-card:hover {
		transform: none;
	}
	.enhanced-feature-card:hover {
		transform: none;
	}
	.speciality-card.premium:hover {
		transform: none;
	}
	/* Ensure cards don't get stuck in hover state on touch */
	.portfolio-box:hover .dz-media img {
		transform: none;
	}
	.DZoomImage img {
		transform: none !important;
	}
}

/* ============================================
   CROSS-BROWSER FIXES
   ============================================ */
/* Firefox gradient text fallback */
.highlight-text {
	background: linear-gradient(135deg, #2c7a34 0%, #4a9d56 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}

/* Safari flexbox gap fallback */
@supports not (gap: 1px) {
	.social-icons > * {
		margin-right: 12px;
		margin-bottom: 12px;
	}
	.contact-item > *:first-child {
		margin-right: 15px;
	}
}

/* Mask composite for Firefox */
.speciality-card.premium::before {
	-webkit-mask: linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* ============================================
   FLUID TYPOGRAPHY
   ============================================ */
.section-head .title {
	font-size: clamp(1.5rem, 4vw, 3rem);
}

.section-head .sub-title {
	font-size: clamp(0.8rem, 2vw, 0.95rem);
}

/* ============================================
   INLINE STYLE OVERRIDES FOR MOBILE
   These target elements that use large inline styles
   ============================================ */

/* Override large inline font-sizes on mobile */
@media (max-width: 767px) {
	[style*="font-size: 3.5rem"],
	[style*="font-size: 3rem"] {
		font-size: clamp(1.5rem, 5vw, 3rem) !important;
	}
	[style*="font-size: 42px"] {
		font-size: clamp(1.5rem, 5vw, 42px) !important;
	}
	[style*="font-size: 2.5rem"] {
		font-size: clamp(1.3rem, 4vw, 2.5rem) !important;
	}
}

@media (max-width: 480px) {
	[style*="font-size: 3.5rem"],
	[style*="font-size: 3rem"] {
		font-size: 1.5rem !important;
	}
	[style*="font-size: 42px"] {
		font-size: 1.5rem !important;
	}
	[style*="font-size: 2.5rem"] {
		font-size: 1.3rem !important;
	}
}

/* Override excessive inline padding on mobile */
@media (max-width: 480px) {
	[style*="padding: 80px 0"] {
		padding: 40px 0 !important;
	}
	[style*="padding: 40px 30px"] {
		padding: 25px 18px !important;
	}
}

/* Hide large decorative absolute-positioned elements on small screens */
@media (max-width: 767px) {
	[style*="position: absolute"][style*="width: 120px"],
	[style*="position: absolute"][style*="width: 180px"],
	[style*="position: absolute"][style*="width: 200px"] {
		display: none !important;
	}
}

/* ============================================
   NEWSLETTER SECTION RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
	.dzSubscribe .input-group {
		flex-direction: column;
	}
	.dzSubscribe .form-control {
		border-radius: 8px !important;
		margin-bottom: 10px;
	}
	.dzSubscribe .sub-btn .btn {
		border-radius: 8px !important;
		width: 100%;
	}
}

/* ============================================
   PLANT SECTION — MOBILE CIRCULAR LAYOUT FIX
   The circle orbit squeezes on small screens because:
   1. radius drops to 160px making icons overlap the centre card
   2. shop-card gets scale(0.6) which shrinks the tree image badly
   3. nav height of 330px is too short for the radius + card
   Fix: increase radius & height, remove the scale, size the card properly.
   ============================================ */

/* 576px–991px: tablet / large phone landscape */
@media (max-width: 991px) {
	.service-box .nav-tabs {
		height: 600px !important;
	}
	.service-box .nav-tabs.rotate {
		--radius: 240px !important;
	}
}

/* ≤575px: small phone portrait — this is where the squeeze is worst */
@media (max-width: 575px) {
	/* Give the section and all ancestors room to breathe —
	   the circle orbit extends beyond normal box bounds */
	#Plant_section,
	#Plant_section .container,
	#Plant_section .row,
	#Plant_section .col-xl-7,
	#Plant_section .col-lg-9,
	#Plant_section .col-sm-12 {
		overflow: visible !important;
	}
	.service-box {
		overflow: visible !important;
	}

	/* Larger orbit so thumbnails don't overlap the centre card */
	.service-box .nav-tabs {
		height: 420px !important;
	}
	.service-box .nav-tabs.rotate {
		--radius: 185px !important;
	}

	/* Remove the harsh scale(0.6) — size the card naturally instead */
	.service-box .shop-card {
		width: 160px !important;
		min-width: 160px !important;
		height: auto !important;
		transform: none !important;
	}

	/* Thumbnail orbit nodes: keep them round and readable */
	.plant-bx {
		height: 52px !important;
		width: 52px !important;
		border-radius: 50% !important;
		padding-top: 32px !important;
		margin-top: 16px !important;
	}
	.plant-bx .dz-media {
		margin-top: -55px !important;
		transform: scale(1.2) !important;
	}

	/* Shrink the scrolling text so it doesn't overflow */
	.plant-row .plant-text {
		font-size: 80px !important;
	}
}

/* ============================================
   GENERAL UTILITY - PREVENT OVERFLOW
   ============================================ */
.container,
.container-fluid {
	overflow-x: hidden;
}

/* Allow header dropdown menus to overflow */
.header .container-fluid {
	overflow: visible;
}

/* Allow banner text to overflow its column without clipping */
.main-banner .container {
	overflow-x: visible;
}

/* Tables and iframes responsive */
table {
	max-width: 100%;
	overflow-x: auto;
	display: block;
}

iframe {
	max-width: 100%;
}

/* ============================================
   HEADER — Match 19" desktop view on 13-15" laptops
   Restore full desktop padding/spacing for screens ≥1200px
   so smaller laptops (1280-1480px wide) display the header
   the same as larger desktops.
   ============================================ */
@media (min-width: 1200px) {
	.site-header .container-fluid,
	.site-header .container,
	.main-bar-wraper .container-fluid,
	.main-bar-wraper .container {
		padding-left: 80px;
		padding-right: 80px;
	}

	.header-nav.w3menu .nav > li > a {
		padding: 28px 15px;
		font-size: 16px;
	}

	.logo-header img {
		max-width: 200px;
		height: auto;
	}
}

/* Tighten only when the menu would actually overflow (≤1280px),
   while keeping the larger 19" rhythm above that. */
@media (min-width: 1200px) and (max-width: 1366px) {
	.site-header .container-fluid,
	.main-bar-wraper .container-fluid {
		padding-left: 40px;
		padding-right: 40px;
	}

	.header-nav.w3menu .nav > li > a {
		padding: 28px 12px;
	}
}