/**
 * 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;
	}
}

@media (max-width: 767px) {
	.main-banner .content-info .title {
		font-size: 28px;
	}
	.dz-bnr-inr-entry h1 {
		font-size: 30px;
	}
	.dz-bnr-inr-entry {
		padding: 60px 0 !important;
	}
	.dz-bnr-inr {
		padding: 50px 0;
	}
	.single-product-media {
		margin-top: 30px !important;
		padding-top: 20px !important;
		border-radius: 200px 200px 0 0 !important;
	}
	.single-product-media:after {
		border-radius: 200px 200px 0 0 !important;
	}
	.single-product-media .dz-media img {
		margin-top: -40px !important;
	}
}

@media (max-width: 480px) {
	.main-banner .content-info .title {
		font-size: 22px;
	}
	.dz-bnr-inr-entry h1 {
		font-size: 24px;
	}
	.dz-bnr-inr {
		padding: 35px 0;
	}
	.single-product-media {
		margin-top: 15px !important;
		padding-top: 15px !important;
		border-radius: 150px 150px 0 0 !important;
	}
	.single-product-media:after {
		border-radius: 150px 150px 0 0 !important;
	}
	.single-product-media .dz-media img {
		margin-top: -20px !important;
	}
}

/* ============================================
   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%;
	}
}

/* ============================================
   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%;
}