@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

html {

	line-height: 1.15;

	-webkit-text-size-adjust: 100%;

}



/* Sections

	 ========================================================================== */



/**

 * Remove the margin in all browsers.

 */

body {

	margin: 0;
    font-family: "Cairo", sans-serif;

}



/**

 * Render the `main` element consistently in IE.

 */

main {

	display: block;

}



/**

 * Correct the font size and margin on `h1` elements within `section` and

 * `article` contexts in Chrome, Firefox, and Safari.

 */

h1 {

	font-size: 2em;

	margin: 0.67em 0;

}



/* Grouping content

	 ========================================================================== */



/**

 * 1. Add the correct box sizing in Firefox.

 * 2. Show the overflow in Edge and IE.

 */

hr {

	box-sizing: content-box;

	height: 0;

	overflow: visible;

}



/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */

pre {

	font-family: monospace, monospace;

	font-size: 1em;

}



/* Text-level semantics

	 ========================================================================== */



/**

 * Remove the gray background on active links in IE 10.

 */

a {

	background-color: transparent;

}



/**

 * 1. Remove the bottom border in Chrome 57-

 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.

 */

abbr[title] {

	border-bottom: none;

	text-decoration: underline;

	text-decoration: underline dotted;

}



/**

 * Add the correct font weight in Chrome, Edge, and Safari.

 */

b,

strong {

	font-weight: bolder;

}



/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */

code,

kbd,

samp {

	font-family: monospace, monospace;

	font-size: 1em;

}



/**

 * Add the correct font size in all browsers.

 */

small {

	font-size: 80%;

}



/**

 * Prevent `sub` and `sup` elements from affecting the line height in

 * all browsers.

 */

sub,

sup {

	font-size: 75%;

	line-height: 0;

	position: relative;

	vertical-align: baseline;

}



sub {

	bottom: -0.25em;

}



sup {

	top: -0.5em;

}



/* Embedded content

	 ========================================================================== */



/**

 * Remove the border on images inside links in IE 10.

 */

img {

	border-style: none;

}



/* Forms

	 ========================================================================== */



/**

 * 1. Change the font styles in all browsers.

 * 2. Remove the margin in Firefox and Safari.

 */

button,

input,

optgroup,

select,

textarea {

	font-family: inherit;

	font-size: 100%;

	line-height: 1.15;

	margin: 0;

}



/**

 * Show the overflow in IE.

 * 1. Show the overflow in Edge.

 */

button,

input {

	overflow: visible;

}



/**

 * Remove the inheritance of text transform in Edge, Firefox, and IE.

 * 1. Remove the inheritance of text transform in Firefox.

 */

button,

select {

	text-transform: none;

}



/**

 * Correct the inability to style clickable types in iOS and Safari.

 */

button,

[type="button"],

[type="reset"],

[type="submit"] {

	-webkit-appearance: button;

}



/**

 * Remove the inner border and padding in Firefox.

 */

button::-moz-focus-inner,

[type="button"]::-moz-focus-inner,

[type="reset"]::-moz-focus-inner,

[type="submit"]::-moz-focus-inner {

	border-style: none;

	padding: 0;

}



/**

 * Restore the focus styles unset by the previous rule.

 */

button:-moz-focusring,

[type="button"]:-moz-focusring,

[type="reset"]:-moz-focusring,

[type="submit"]:-moz-focusring {

	outline: 1px dotted ButtonText;

}



/**

 * Correct the padding in Firefox.

 */

fieldset {

	padding: 0.35em 0.75em 0.625em;

}



/**

 * 1. Correct the text wrapping in Edge and IE.

 * 2. Correct the color inheritance from `fieldset` elements in IE.

 * 3. Remove the padding so developers are not caught out when they zero out

 *		`fieldset` elements in all browsers.

 */

legend {

	box-sizing: border-box;

	color: inherit;

	display: table;

	max-width: 100%;

	padding: 0;

	white-space: normal;

}



/**

 * Add the correct vertical alignment in Chrome, Firefox, and Opera.

 */

progress {

	vertical-align: baseline;

}



/**

 * Remove the default vertical scrollbar in IE 10+.

 */

textarea {

	overflow: auto;

}



/**

 * 1. Add the correct box sizing in IE 10.

 * 2. Remove the padding in IE 10.

 */

[type="checkbox"],

[type="radio"] {

	box-sizing: border-box;

	padding: 0;

}



/**

 * Correct the cursor style of increment and decrement buttons in Chrome.

 */

[type="number"]::-webkit-inner-spin-button,

[type="number"]::-webkit-outer-spin-button {

	height: auto;

}



/**

 * 1. Correct the odd appearance in Chrome and Safari.

 * 2. Correct the outline style in Safari.

 */

[type="search"] {

	-webkit-appearance: textfield;

	outline-offset: -2px;

}



/**

 * Remove the inner padding in Chrome and Safari on macOS.

 */

[type="search"]::-webkit-search-decoration {

	-webkit-appearance: none;

}



/**

 * 1. Correct the inability to style clickable types in iOS and Safari.

 * 2. Change font properties to `inherit` in Safari.

 */

::-webkit-file-upload-button {

	-webkit-appearance: button;

	font: inherit;

}



/* Interactive

	 ========================================================================== */



/*

 * Add the correct display in Edge, IE 10+, and Firefox.

 */

details {

	display: block;

}



/*

 * Add the correct display in all browsers.

 */

summary {

	display: list-item;

}



/* Misc

	 ========================================================================== */



/**

 * Add the correct display in IE 10+.

 */

template {

	display: none;

}



/**

 * Add the correct display in IE 10.

 */

[hidden] {

	display: none;

}



/* Box sizing

--------------------------------------------- */



/* Inherit box-sizing to more easily change it's value on a component level.

@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */

*,

*::before,

*::after {

	box-sizing: inherit;

}



html {

	box-sizing: border-box;

}



/*--------------------------------------------------------------

# Base

--------------------------------------------------------------*/



/* Typography

--------------------------------------------- */

body,

button,

input,

select,

optgroup,

textarea {

	color: #404040;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	font-size: 1rem;

	line-height: 1.5;

}



h1,

h2,

h3,

h4,

h5,

h6 {

	clear: both;

}



p {

	margin-bottom: 1.5em;

}



dfn,

cite,

em,

i {

	font-style: italic;

}



blockquote {

	margin: 0 1.5em;

}



address {

	margin: 0 0 1.5em;

}



pre {

	background: #eee;

	font-family: "Courier 10 Pitch", courier, monospace;

	line-height: 1.6;

	margin-bottom: 1.6em;

	max-width: 100%;

	overflow: auto;

	padding: 1.6em;

}



code,

kbd,

tt,

var {

	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;

}



abbr,

acronym {

	border-bottom: 1px dotted #666;

	cursor: help;

}



mark,

ins {

	background: #fff9c0;

	text-decoration: none;

}



big {

	font-size: 125%;

}



/* Elements

--------------------------------------------- */

body {

	background: #fff;

}



hr {

	background-color: #ccc;

	border: 0;

	height: 1px;

	margin-bottom: 1.5em;

}



ul,

ol {

	margin: 0 0 1.5em 3em;

}



ul {

	list-style: disc;

}



ol {

	list-style: decimal;

}



li > ul,

li > ol {

	margin-bottom: 0;

	margin-left: 1.5em;

}



dt {

	font-weight: 700;

}



dd {

	margin: 0 1.5em 1.5em;

}



/* Make sure embeds and iframes fit their containers. */

embed,

iframe,

object {

	max-width: 100%;

}



img {

	height: auto; 
	max-width: 100%;
	border-radius: 4px;

}



figure {

	margin: 1em 0;

}



table {

	margin: 0 0 1.5em;

	width: 100%;

}



/* Links

--------------------------------------------- */

a {

	color: #289b91;

}



a:visited {

	color: #fff;

}



a:hover,

a:focus,

a:active {

	color: #289b91;

}



a:focus {

	outline: thin dotted;

}



a:hover,

a:active {

	outline: 0;

}
 
/*--------------------------------------------------------------

# Layouts

--------------------------------------------------------------*/



/*--------------------------------------------------------------

# Components

--------------------------------------------------------------*/



/* Navigation

--------------------------------------------- */

.main-navigation {

	display: block;

	width: 100%;

}



.main-navigation ul {

	display: none;

	list-style: none;

	margin: 0;

	padding-left: 0;

}



.main-navigation ul ul {

	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);

	float: left;

	position: absolute;

	top: 100%;

	left: -999em;

	z-index: 99999;

}



.main-navigation ul ul ul {

	left: -999em;

	top: 0;

}



.main-navigation ul ul li:hover > ul,

.main-navigation ul ul li.focus > ul {

	display: block;

	left: auto;

}



.main-navigation ul ul a {

	width: 200px;

}



.main-navigation ul li:hover > ul,

.main-navigation ul li.focus > ul {

	left: auto;

}



.main-navigation li {

	position: relative;

}



.main-navigation a {

	display: block;

	text-decoration: none;

}



/* Small menu. */

.menu-toggle,

.main-navigation.toggled ul {

	display: block;

}



@media screen and (min-width: 37.5em) {



	.menu-toggle {

		display: none;

	}



	.main-navigation ul {

		display: flex;

	}

}





/* Posts and pages

--------------------------------------------- */

.sticky {

	display: block;

}



/* .post,

.page {

	margin: 0 0 1.5em;

} */



.updated:not(.published) {

	display: none;

}



.page-content,

.entry-content,

.entry-summary {

	margin: 1.5em 0 0;

}



.page-links {

	clear: both;

	margin: 0 0 1.5em;

}



/* Comments

--------------------------------------------- */

.comment-content a {

	word-wrap: break-word;

}



.bypostauthor {

	display: block;

}



/* Widgets

--------------------------------------------- */

.widget {

	margin-bottom:50px;

}



.widget select {

	max-width: 100%;

}



/* Media

--------------------------------------------- */

.page-content .wp-smiley,

.entry-content .wp-smiley,

.comment-content .wp-smiley {

	border: none;

	margin-bottom: 0;

	margin-top: 0;

	padding: 0;

}



/* Make sure logo link wraps around logo image. */

.custom-logo-link {

	display: inline-block;

}



/* Captions

--------------------------------------------- */

.wp-caption {

	margin-bottom: 1.5em;

	max-width: 100%;

}



.wp-caption img[class*="wp-image-"] {

	display: block;

	margin-left: auto;

	margin-right: auto;

}



.wp-caption .wp-caption-text {

	margin: 0.8075em 0;

}



.wp-caption-text {

	text-align: center;

}



/* Galleries

--------------------------------------------- */

.gallery {

	margin-bottom: 1.5em;

	display: grid;

	grid-gap: 1.5em;

}



.gallery-item {

	display: inline-block;

	text-align: center;

	width: 100%;

}



.gallery-columns-2 {

	grid-template-columns: repeat(2, 1fr);

}



.gallery-columns-3 {

	grid-template-columns: repeat(3, 1fr);

}



.gallery-columns-4 {

	grid-template-columns: repeat(4, 1fr);

}



.gallery-columns-5 {

	grid-template-columns: repeat(5, 1fr);

}



.gallery-columns-6 {

	grid-template-columns: repeat(6, 1fr);

}



.gallery-columns-7 {

	grid-template-columns: repeat(7, 1fr);

}



.gallery-columns-8 {

	grid-template-columns: repeat(8, 1fr);

}



.gallery-columns-9 {

	grid-template-columns: repeat(9, 1fr);

}



.gallery-caption {

	display: block;

}



/*--------------------------------------------------------------

# Plugins

--------------------------------------------------------------*/



/* Jetpack infinite scroll

--------------------------------------------- */



/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */

.infinite-scroll .posts-navigation,

.infinite-scroll.neverending .site-footer {

	display: none;

}



/* Re-display the Theme Footer when Infinite Scroll has reached its end. */

.infinity-end.neverending .site-footer {

	display: block;

}



/*--------------------------------------------------------------

# Utilities

--------------------------------------------------------------*/



/* Accessibility

--------------------------------------------- */



/* Text meant only for screen readers. */

.screen-reader-text {

	border: 0;

	clip: rect(1px, 1px, 1px, 1px);

	clip-path: inset(50%);

	height: 1px;

	margin: -1px;

	overflow: hidden;

	padding: 0;

	position: absolute !important;

	width: 1px;

	word-wrap: normal !important;

}



.screen-reader-text:focus {

	background-color: #f1f1f1;

	border-radius: 3px;

	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);

	clip: auto !important;

	clip-path: none;

	color: #21759b;

	display: block;

	font-size: 0.875rem;

	font-weight: 700;

	height: auto;

	left: 5px;

	line-height: normal;

	padding: 15px 23px 14px;

	text-decoration: none;

	top: 5px;

	width: auto;

	z-index: 100000;

}



/* Do not show the outline on the skip link target. */

#primary[tabindex="-1"]:focus {

	outline: 0;

}



/* Alignments

--------------------------------------------- */

.alignleft {



	/*rtl:ignore*/

	float: left;



	/*rtl:ignore*/

	margin-right: 1.5em;

	margin-bottom: 1.5em;

}



.alignright {



	/*rtl:ignore*/

	float: right;



	/*rtl:ignore*/

	margin-left: 1.5em;

	margin-bottom: 1.5em;

}



.aligncenter {

	clear: both;

	display: block;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 1.5em;

}

/*--------------------------------------------------------------
# Product Modal Styles
--------------------------------------------------------------*/

/* Product Card Hover Effect */
.product-card {
	transition: all 0.3s ease;
}

.product-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
}

/* Modal Styling */
.modal-content {
	border-radius: 15px;
	border: 1px solid #e0e0e0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 16px 48px rgba(40, 155, 145, 0.15);
	overflow: hidden;
}

.modal-header {
	background: linear-gradient(135deg, #289b91 0%, #1f7a72 100%);
	color: white;
	border-bottom: none;
	padding: 25px 30px;
}

.modal-header .modal-title {
	color: white;
	font-weight: 700;
	font-size: 26px;
	margin: 0;
}

.modal-header .btn-close {
	display: none !important;
}

.modal-body {
	padding: 35px;
	background: #fff;
}

/* Product Modal Image */
.product-modal-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 300px;
	background: linear-gradient(135deg, #e3f5f2 0%, #d4ebe8 100%);
	border-radius: 15px;
	box-shadow: 0 5px 20px rgba(40, 155, 145, 0.15);
	position: relative;
	overflow: hidden;
	padding: 15px;
}

.product-modal-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 10px;
	transition: transform 0.3s ease;
}

.product-modal-image:hover img {
	transform: scale(1.05);
}

.product-modal-title {
	color: #2c536e;
	font-weight: 700;
	font-size: 22px;
	margin-bottom: 20px;
	border-bottom: 3px solid #289b91;
	padding-bottom: 10px;
}

.product-description {
	color: #2c536e;
	line-height: 1.8;
	font-size: 15px;
}

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

.product-description ul {
	padding-left: 20px;
}

.product-description li {
	margin-bottom: 8px;
}

.modal-footer {
	display: none !important;
}

.modal-backdrop.show {
	opacity: 0.75;
}

/* Responsive */
@media (max-width: 768px) {
	.modal-dialog {
		margin: 10px;
	}

	.modal-body {
		padding: 20px;
	}

	.modal-header .modal-title {
		font-size: 20px;
	}

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

/* Animation */
.modal.fade .modal-dialog {
	transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
	transform: none;
}

/*--------------------------------------------------------------
# Single News Page Styles
--------------------------------------------------------------*/

/* Banner Section */
.single-news-banner {
	position: relative;
	padding: 120px 0 80px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.single-news-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
	z-index: 1;
}

.single-news-banner .theme-breadcrumb-box {
	position: relative;
	z-index: 2;
}

.single-news-banner .news-category-badge .badge {
	font-size: 14px;
	padding: 8px 20px;
	border-radius: 25px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.single-news-title {
	color: #ffffff;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.3;
	margin: 20px 0;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.single-news-banner .breadcrumb {
	background: transparent;
	padding: 0;
	margin: 0;
}

.single-news-banner .breadcrumb-item,
.single-news-banner .breadcrumb-item a {
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
}

.single-news-banner .breadcrumb-item.active {
	color: #ffffff;
}

.single-news-banner .breadcrumb-item + .breadcrumb-item::before {
	color: rgba(255, 255, 255, 0.6);
}

/* Article Content */
.single-news-content-section {
	background: #ffffff;
}

.article-content {
	font-size: 18px;
	line-height: 1.8;
	color: #333;
}

.article-content p {
	margin-bottom: 20px;
}

.article-content h2,
.article-content h3,
.article-content h4 {
	margin-top: 30px;
	margin-bottom: 15px;
	font-weight: 700;
	color: #2c3e50;
}

.article-content ul,
.article-content ol {
	margin-bottom: 20px;
	padding-left: 30px;
}

.article-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 20px 0;
}

/* Social Share Buttons */
.article-share h5 {
	font-weight: 700;
	color: #2c3e50;
	font-size: 18px;
}

.social-share-buttons {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	color: #ffffff;
	font-size: 20px;
	transition: all 0.3s ease;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.share-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
	color: #ffffff;
}

.share-btn.facebook {
	background: linear-gradient(135deg, #4267B2 0%, #1877f2 100%);
}

.share-btn.facebook:hover {
	background: linear-gradient(135deg, #365899 0%, #0d65d9 100%);
}

.share-btn.twitter {
	background: linear-gradient(135deg, #1DA1F2 0%, #0c8bd9 100%);
}

.share-btn.twitter:hover {
	background: linear-gradient(135deg, #0d8bd9 0%, #0a6fb8 100%);
}

.share-btn.linkedin {
	background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
}

.share-btn.linkedin:hover {
	background: linear-gradient(135deg, #005885 0%, #004565 100%);
}

.share-btn.whatsapp {
	background: linear-gradient(135deg, #25d366 0%, #1da851 100%);
}

.share-btn.whatsapp:hover {
	background: linear-gradient(135deg, #1da851 0%, #128C41 100%);
}

/* Article Navigation */
.nav-card {
	display: block;
	padding: 25px;
	background: #f8f9fa;
	border: 2px solid #e9ecef;
	border-radius: 12px;
	text-decoration: none;
	transition: all 0.3s ease;
	height: 100%;
}

.nav-card:hover {
	background: #ffffff;
	border-color: #4a90e2;
	box-shadow: 0 8px 25px rgba(74, 144, 226, 0.15);
	transform: translateY(-5px);
}

.nav-label {
	display: block;
	font-size: 13px;
	color: #6c757d;
	margin-bottom: 10px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1px;
}

.nav-label i {
	font-size: 12px;
	margin: 0 5px;
}

.nav-title {
	color: #2c3e50;
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	line-height: 1.4;
}

.nav-card:hover .nav-title {
	color: #4a90e2;
}

/* Related News Section */
.related-news-section h3 {
	font-size: 36px;
	font-weight: 700;
	color: #2c3e50;
}

/* Responsive */
@media (max-width: 991px) {
	.single-news-title {
		font-size: 36px;
	}

	.article-content {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.single-news-title {
		font-size: 28px;
	}

	.social-share-buttons {
		justify-content: center;
	}

	.nav-title {
		font-size: 16px;
	}
}

/*--------------------------------------------------------------
# Fix Footer White Space Issue
--------------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

body {
	min-height: 100vh;
	margin: 0 !important;
	padding: 0 !important;
	overflow-x: hidden;
}

.footer {
	margin: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.footer .primary-footer {
	margin-bottom: 0 !important;
}

.footer .secondary-footer {
	margin: 0 !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.secondary-footer .container {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.secondary-footer .row {
	margin-bottom: 0 !important;
}

.secondary-footer .copyright {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}


/* Product Cards - Enhanced Design with V1 Dimensions */
.service-item,
.service-item.style-2,
.product-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-bottom: 30px !important;
    position: relative !important;
    border: 1px solid #e0e0e0 !important;
    height: 100% !important;
}

.service-item:hover,
.service-item.style-2:hover,
.product-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 16px 48px rgba(40, 155, 145, 0.15) !important;
    border-color: #289b91 !important;
}

/* Product Image Container - V1 Aspect Ratio */
.service-item .service-image,
.product-card .product-image {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #e3f5f2 0%, #d4ebe8 100%) !important;
    height: 280px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.service-item .service-image img,
.product-card .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.service-item:hover .service-image img,
.product-card:hover .product-image img {
    transform: scale(1.1) !important;
}

/* Gradient Overlay on Hover */
.service-item .service-image::after,
.product-card .product-image::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(92, 152, 143, 0.15), rgba(65, 88, 107, 0.15)) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}

.service-item:hover .service-image::after,
.product-card:hover .service-image::after {
    opacity: 1 !important;
}

/* New Badge - Top Right */
.product-badge,
.new-badge {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: linear-gradient(135deg, #17c5a3 0%, #14a888 100%) !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 25px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    box-shadow: 0 6px 16px rgba(23, 197, 163, 0.4) !important;
    z-index: 10 !important;
}

/* Favorite/Star Icon - Top Right Corner */
.product-favorite,
.product-star {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: #ffffff !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 10 !important;
}

.product-favorite:hover,
.product-star:hover {
    background: #ffd700 !important;
    transform: scale(1.15) rotate(15deg) !important;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4) !important;
}

.product-favorite i,
.product-star i {
    color: #ffd700 !important;
    font-size: 20px !important;
}

.product-favorite:hover i,
.product-star:hover i {
    color: #ffffff !important;
}

/* Product Card Content */
.service-item .service-desc,
.product-card .product-content {
    padding: unset !important;
}

.service-item .service-title h4,
.product-card .product-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
    min-height: 54px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.3s ease !important;
}

.service-item:hover .service-title h4,
.product-card:hover .product-title {
    color: #5c988f !important;
}

/* Product Description - Visible with line clamp */
.service-item .service-desc p,
.product-card .product-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #6c757d !important;
    margin-bottom: 18px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Product Count */
.product-count {
    font-size: 13px !important;
    color: #6c757d !important;
    margin-bottom: 18px !important;
    font-weight: 500 !important;
}

/* View Button - Enhanced CTA */
.service-item .arrow-button,
.product-view-btn,
.service-item .themeht-btn,
.product-card .themeht-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 50% !important;
    padding: 16px 28px !important;
    background: #289b91 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(40, 155, 145, 0.3) !important;
}

.service-item .arrow-button:hover,
.product-view-btn:hover,
.service-item .themeht-btn:hover,
.product-card .themeht-btn:hover {
    background: #1f7a72 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(40, 155, 145, 0.45) !important;
    color: #ffffff !important;
}

/* Hide icons in buttons */
.service-item .arrow-button i,
.product-view-btn i,
.service-item .themeht-btn i,
.product-card .themeht-btn i {
    display: none !important;
}

/* Product Grid Spacing - V1 */
.products-grid .row {
    margin: 0 -15px !important;
}

.products-grid .col-lg-3,
.products-grid .col-md-6,
.products-grid .col-sm-6 {
    padding: 0 15px !important;
    margin-bottom: 30px !important;
}

/* ========================================
   PRODUCT MODAL
   ======================================== */

.product-modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    padding: 40px 20px !important;
    animation: fadeIn 0.3s ease-out !important;
}

.product-modal.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-modal-content {
    background: #ffffff !important;
    border-radius: 20px !important;
    max-width: 900px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    position: relative !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    animation: slideUp 0.4s ease-out !important;
}

.product-modal-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    color: #2c3e50 !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.product-modal-close:hover {
    background: #bd424e !important;
    color: #ffffff !important;
    transform: rotate(90deg) !important;
}

.product-modal-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    padding: 40px !important;
}

.product-modal-image {
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #e8f5f3 0%, #f0f9f7 100%) !important;
}

.product-modal-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.product-modal-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

.product-modal-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.product-modal-description {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #6c757d !important;
}

.product-modal-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 20px !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
}

.product-modal-meta-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 15px !important;
}

.product-modal-meta-item i {
    color: #5c988f !important;
    font-size: 18px !important;
    width: 24px !important;
}

.product-modal-actions {
    display: flex !important;
    gap: 12px !important;
    margin-top: auto !important;
}

.product-modal-btn {
    flex: 1 !important;
    padding: 16px 24px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.product-modal-btn.primary {
    background: linear-gradient(135deg, #5c988f 0%, #41586b 100%) !important;
    color: #ffffff !important;
}

.product-modal-btn.primary:hover {
    background: linear-gradient(135deg, #41586b 0%, #5c988f 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(92, 152, 143, 0.35) !important;
}

.product-modal-btn.secondary {
    background: #ffffff !important;
    color: #5c988f !important;
    border: 2px solid #5c988f !important;
}

.product-modal-btn.secondary:hover {
    background: #5c988f !important;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .product-modal-body {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 24px !important;
    }

    .product-modal-title {
        font-size: 24px !important;
    }

    .product-modal-actions {
        flex-direction: column !important;
    }
}

/* ========================================
   PRODUCT PAGE HERO SECTION
   ======================================== */

.products-hero {
    background: linear-gradient(135deg, #e8f5f3 0%, #f0f9f7 100%) !important;
    padding: 80px 40px !important;
    text-align: center !important;
    margin-bottom: 60px !important;
}

.products-hero h1 {
    font-size: 48px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin-bottom: 16px !important;
}

.products-hero p {
    font-size: 20px !important;
    color: #6c757d !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}

@media (max-width: 768px) {
    .products-hero {
        padding: 50px 20px !important;
    }

    .products-hero h1 {
        font-size: 32px !important;
    }

    .products-hero p {
        font-size: 16px !important;
    }
}

/* ========================================
   ANIMATIONS FOR MODAL
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}