/*!
Theme Name: Pearl Theme
Theme URI: http://underscores.me/
Author: Techmiss Services
Author URI: http://underscores.me/
Description: A custom WordPress theme for Pearl which is clean, fast, and fully customizable.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: pearl-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Pearl Theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

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

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #ffffff;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

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

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* 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: 0 0 1.5em;
}

.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;
}

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

/* ===== OVERRIDE ANY CONFLICTS ===== */

/* Force our custom menu to show always */
.pearl-menu {
    display: flex !important;
}

/* Neutralize any conflicting navigation styles */
.pearl-nav .main-navigation {
    all: unset;
}

/* Ensure our header styles take precedence */
.pearl-header {
    position: relative;
    z-index: 100;
}

/* Make sure menu items are visible */
.pearl-menu li {
    display: block !important;
    visibility: visible !important;
}

.pearl-menu a {
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* ========================================
   PEARL CUSTOM STYLES - CONFLICT PROOF
   ======================================== */

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* ===== HEADER STYLES ===== */
.pearl-header {
    background: #ffffff !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid #eaeaea !important;
    width: 100%;
    position: relative;
    z-index: 1000;
}

.pearl-header .container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}


/* Navigation - FORCED VISIBLE */
.pearl-nav {
    margin-left: 40px !important;
    display: block !important;
}

.pearl-menu {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 35px !important;
}

.pearl-menu li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pearl-menu a {
    display: block !important;
    text-decoration: none !important;
    color: #364153 !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    padding: 0 !important;
}

.pearl-menu a:hover {
    color: rgb(152, 16, 250) !important;
}

/* Header Button */
.btn-header {
    background: #9810FA !important;
    color: #ffffff !important;
    padding: 12px 28px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: inline-block !important;
}

/* ===== HERO BANNER ===== */
.hero-section {
    background: #3c0366 !important;
    padding: 100px 0 !important;
}

.hero-title {
    font-size: 56px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
    color: #FFFFFF !important;
}

.hero-title .highlight {
    color: #AC8FD1 !important;
    display: block !important;
}

.hero-description {
    font-size: 18px !important;
    color: #FFFFFF !important;
    margin-bottom: 35px !important;
    line-height: 1.6 !important;
}

.hero-buttons {
    display: flex !important;
    gap: 20px !important;
}

.btn {
    padding: 16px 35px !important;
    border-radius: 40px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

.btn-primary {
    background: #9810FA !important;
    color: #ffffff !important;
}

.btn-secondary {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}

/* ===== TRUSTED BRANDS ===== */
.trusted-brands {
    padding: 21px 0 !important;
    text-align: center !important;
    background: #f8f9fa;

}

.trusted-title {
    font-size: 14px !important;
    letter-spacing: 2px !important;
    color: #888888 !important;
    margin-bottom: 18px !important;
}

.brands-grid {
    display: flex !important;
    justify-content: center !important;
    gap: 60px !important;
    flex-wrap: wrap !important;
}

.brand {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #555555 !important;
    opacity: 0.8 !important;
}

/* ===== HEADER ONE-LINE FIX ===== */
/* EXACT MATCH FOR YOUR HTML */
.pearl-header {
    background: #ffffff;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 20px;
    border-bottom: 1px solid #eaeaea;
}

.logo {
    flex-shrink: 0;
}

.custom-logo {
    max-height: 60px;
    width: auto;
    display: block;
}

.pearl-nav {
    flex: 1;
}

.pearl-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 25px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.pearl-menu li {
    white-space: nowrap;
}

.pearl-menu a {
    text-decoration: none;
    color: #4A4A4A;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.btn-header {
    background: #9810fa;
    color: white;
    padding: 8px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}


/* More space from corners */
.pearl-header {
    padding-left: 40px !important;   /* Left side space */
    padding-right: 40px !important;  /* Right side space */
}

/* Optional: Add space between elements if needed */
.pearl-header {
    gap: 50px !important;  /* Space between logo, menu, and button */
}

/* Make header sticky */
.pearl-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ffffff;  /* Keep background color */
}

/* ===== HOVER EFFECTS ===== */

/* Header Button Hover */
.btn-header {
    transition: all 0.3s ease;
}

.btn-header:hover {
    background: #7a0ec8 !important;  /* Darker purple */
    transform: translateY(-2px);       /* Slight lift */
    box-shadow: 0 4px 10px rgba(152, 16, 250, 0.3); /* Purple glow */
}

/* Banner Primary Button Hover */
.btn-primary {
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: #7a0ec8 !important;
    border-color: #7a0ec8 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(152, 16, 250, 0.3);
}

/* Banner Secondary Button Hover */
.btn-secondary {
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: #ffffff !important;
    color: #9810fa !important;
    border-color: #9810fa !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(152, 16, 250, 0.2);
}


/* Test with bright color */
img.custom-logo {
    background: #ffffff !important;
}

/*FORCE BUTTON SIZE */
.btn-header {
    font-size: 15px !important;
    padding: 11px 29px !important;
}

.pearl-menu a {
    font-size: 15px !important;
}


/* ===== MEGA MENU - 3 COLUMNS ===== */

/* Parent Services item */
.menu-item-has-children {
    position: relative;
}

/* Dropdown container */
.menu-item-has-children .sub-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 30px;
    width: 900px;
    z-index: 1000;
}

/* Show on hover */
.menu-item-has-children:hover .sub-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px;
}

/* Each main category (DIGITAL MARKETING, WEBSITE & E-COMMERCE, MANAGEMENT & OTHER) */
.menu-item-has-children .sub-menu > .menu-item {
    width: calc(33.33% - 14px) !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Category headers - CLICKABLE NOW */
.menu-item-has-children .sub-menu > .menu-item > a {
    font-weight: 700 !important;
    color: #9810fa !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    margin-bottom: 15px !important;
    display: block !important;
    cursor: pointer !important;  /* Makes it clickable */
    text-decoration: none !important;
    position: relative;
    padding-bottom: 8px;
}

/* Half underline for headings only */
.menu-item-has-children .sub-menu > .menu-item > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;  /* Half width underline */
    height: 2px;
    background: #9810fa;
}

/* Service items container */
.menu-item-has-children .sub-menu > .menu-item .sub-menu {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
    transform: none !important;
}

/* Individual service items - CLICKABLE */
.menu-item-has-children .sub-menu > .menu-item .sub-menu li {
    margin: 10px 0 !important;
    list-style: none !important;
}

.menu-item-has-children .sub-menu > .menu-item .sub-menu a {
    font-weight: 400 !important;
    color: #4A4A4A !important;
    font-size: 14px !important;
    text-transform: none !important;
    padding: 5px 0 !important;
    display: block !important;
    white-space: nowrap !important;
    cursor: pointer !important;  /* Makes it clickable */
    text-decoration: none !important;
    transition: all 0.3s ease;
}

/* Remove any underlines from service items */
.menu-item-has-children .sub-menu > .menu-item .sub-menu a::after {
    display: none !important;  /* No underline for service items */
}

/* Hover effect for service items */
.menu-item-has-children .sub-menu > .menu-item .sub-menu a:hover {
    color: #9810fa !important;
    padding-left: 8px !important;
}

/* Mobile responsive */
@media (max-width: 992px) {
    .menu-item-has-children .sub-menu {
        width: 100% !important;
        position: static !important;
        transform: none !important;
        padding: 15px !important;
        box-shadow: none !important;
    }
    
    .menu-item-has-children .sub-menu > .menu-item {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* Arrow only for top-level SERVICES */
.pearl-menu > .menu-item-has-children > a {
    position: relative;
    padding-right: 14px !important;
}

.pearl-menu > .menu-item-has-children > a::after {
    content: '▼';
    font-size: 10px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    color: #4A4A4A;
    transition: transform 0.3s ease;
}

.pearl-menu > .menu-item-has-children:hover > a::after {
    transform: translateY(-50%) rotate(180deg);
    color: #9810fa;
}

/* Remove ALL arrows from dropdown */
.sub-menu a::after,
.sub-menu .menu-item-has-children > a::after {
    display: none !important;
    content: none !important;
}


/* Banner with background image */
.hero-section {
    position: relative;
    background: #3c0366; /* Your dark purple fallback color */
    padding: 100px 0;
    overflow: hidden; /* Prevents the image from spilling out */
}

/* The background image with low opacity */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* >>> PASTE YOUR IMAGE URL BELOW <<< */
    background-image: url('https://pr.pearldigitalmarketing.com/wp-content/uploads/2026/03/pearl-digital-marketing-main-banner.jpg');
    background-size: cover; /* Covers the entire area */
    background-position: center; /* Centers the image */
    opacity: 0.15; /* 15% opacity - adjust this value to your liking */
    z-index: 1; /* Places it behind the content */
}

/* Ensures your text and buttons stay above the image */
.hero-section .container {
    position: relative;
    z-index: 2;
}

.brand-vogue {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
    font-style: normal !important;  /* Changed from italic to normal */
    font-weight: 700 !important;
    text-transform: none !important;
}

.brand-shopify {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    font-weight: 750 !important;
    font-style: normal !important;
}

.brand-forbes {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-style: normal !important;
}

/* BuzzFeed - Bold italic, keep original capitalization */
.brand-buzzfeed {
    font-family: 'Arial Black', 'Helvetica Bold', sans-serif !important;
    font-weight: 800 !important;
    text-transform: none !important;  /* This keeps BuzzFeed as-is */
    font-style: italic !important;
}

/* TIKTOK - Rounded modern */
.brand-tiktok {
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}


/* Force space between CONTACT and button */
.pearl-nav {
    margin-right: 20px;  /* Push nav items left, creating space on right */
}

.btn-header {
    margin-left: 15px;  /* Ensure button has left margin */
    flex-shrink: 0;  /* Prevent button from shrinking */
}

/* ===== FOOTER STYLES ===== */
.pearl-footer {
    background: #1a1a1a;
    color: #ffffff;
    padding: 60px 0 20px;
    margin-top: 60px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 40px;
}

/* Brand Column */
.footer-brand {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #b856ff;
    letter-spacing: 0.5px;
}

.footer-description {
    color: #999999;
    line-height: 1.6;
    font-size: 14px;
    max-width: 300px;
    margin-bottom: 20px;
}

/* Social Icons */
.footer-social {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 36px;
    height: 36px;
    background: #333333;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: #9810fa;
    transform: translateY(-3px);
}

/* Column Titles */
.footer-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Footer Menus */
.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu li {
    margin-bottom: 12px;
}

.footer-menu a {
    color: #999999;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-menu a:hover {
    color: #9810fa;
}

/* Contact Info */
.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-contact li {
    color: #999999;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.5;
}

/* Footer Bottom - Centered */
.footer-bottom {
    border-top: 1px solid #333333;
    padding-top: 20px;
    text-align: center;  /* Centered */
    color: #666666;
    font-size: 14px;
}

.footer-bottom p {
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-description {
        max-width: 100%;
    }
    
    .footer-social {
        justify-content: center;
    }
}

/* Social Icons - White icon always, purple background on hover */
.social-icon {
    width: 40px;
    height: 40px;
    background: #333333;
    color: #ffffff !important;  /* White icons always */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: #9810fa !important;  /* Purple background on hover */
    color: #ffffff !important;       /* Icon stays white */
    transform: translateY(-3px);
}

/* ===== WHAT WE DELIVER SECTION ===== */
.deliver-section {
    padding: 38px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Section Header */
.deliver-section .section-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 20px;
}

.deliver-section .section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.deliver-section .section-title .highlight {
    color: #9810fa; /* Your hero banner purple */
    position: relative;
    display: inline-block;
}

.deliver-section .section-subtitle {
    font-size: 16px;
    color: #666666;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Deliver Grid - 4 boxes per row */
.deliver-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Deliver Cards */
.deliver-card {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid #f0f0f0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

/* Scroll Animation */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered delays for each card */
.deliver-card:nth-child(1) { animation-delay: 0.1s; }
.deliver-card:nth-child(2) { animation-delay: 0.2s; }
.deliver-card:nth-child(3) { animation-delay: 0.3s; }
.deliver-card:nth-child(4) { animation-delay: 0.4s; }
.deliver-card:nth-child(5) { animation-delay: 0.5s; }
.deliver-card:nth-child(6) { animation-delay: 0.6s; }
.deliver-card:nth-child(7) { animation-delay: 0.7s; }

/* Icon Wrapper - Purple background */
.deliver-icon-wrapper {
    width: 70px;
    height: 70px;
    background: #9810fa; /* Primary button purple */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(152, 16, 250, 0.3);
}

/* Icon - White color */
.deliver-icon {
    font-size: 32px;
    color: #ffffff; /* White icon */
    line-height: 1;
    transition: all 0.4s ease;
}

/* Hover effect - Icon zooms */
.deliver-card:hover .deliver-icon-wrapper {
    transform: scale(1.1);
    background: #7a0ec8; /* Darker purple on hover */
    box-shadow: 0 8px 20px rgba(152, 16, 250, 0.4);
}

.deliver-card:hover .deliver-icon {
    transform: scale(1.2);
}

/* Card hover effect */
.deliver-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(152, 16, 250, 0.15);
    border-color: rgba(152, 16, 250, 0.3);
}

/* Title - Dark purple */
.deliver-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a; /* Dark text */
    margin-bottom: 12px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.deliver-card:hover .deliver-title {
    color: #9810fa; /* Turns purple on hover */
}

/* Description */
.deliver-description {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 0;
    padding: 0 5px;
}

/* Responsive */
@media (max-width: 992px) {
    .deliver-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .deliver-section .section-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .deliver-section {
        padding: 60px 0;
    }
    
    .deliver-section .section-title {
        font-size: 28px;
    }
    
    .deliver-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 15px;
    }
    
    .deliver-card {
        padding: 25px 15px;
    }
    
    .deliver-icon-wrapper {
        width: 60px;
        height: 60px;
    }
    
    .deliver-icon {
        font-size: 28px;
    }
}


/* ===== INDUSTRIES SECTION - PURPLE THEME ===== */
.industries-section {
    padding: 80px 0;
    background: #3c0366;  /* Solid purple background */
    position: relative;
    overflow: hidden;
}

/* Decorative lighter purple elements */
.industries-section::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.industries-section::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.industries-section .container {
    position: relative;
    z-index: 2;
}

.industries-section .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.industries-section .section-title {
    font-size: 42px;
    font-weight: 700;
    color: #ffffff;  /* White text */
    margin-bottom: 15px;
}

.industries-section .section-title .highlight {
    color: #ffffff;
    position: relative;
    font-weight: 800;
}

.industries-section .section-title .highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.2);
    z-index: -1;
    border-radius: 4px;
}

.industries-section .section-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.9);  /* White with opacity */
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Industries Grid */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 25px;
}

.industries-grid:last-child {
    margin-bottom: 0;
}

/* Industry Cards - Light Purple Opacity */
.industry-card {
    background: rgba(255,255,255,0.1);  /* Light opacity white = light purple effect */
    backdrop-filter: blur(5px);
    padding: 30px 25px;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid rgba(255,255,255,0.15);
    text-align: left;
    position: relative;
    overflow: hidden;
}

/* Card hover effect */
.industry-card:hover {
    background: rgba(255,255,255,0.15);  /* Slightly lighter on hover */
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* Title - White */
.industry-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;  /* White text */
    margin-bottom: 12px;
    position: relative;
    padding-bottom: 12px;
}

.industry-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #ffffff;  /* White underline */
    transition: width 0.3s ease;
}

.industry-card:hover .industry-title::after {
    width: 60px;
}

/* Description - White with slight opacity */
.industry-description {
    font-size: 14px;
    color: rgba(255,255,255,0.9);  /* White with slight transparency */
    line-height: 1.6;
    margin-bottom: 0;
}

/* Animation on scroll */
.industry-card {
    opacity: 0;
    transform: translateY(30px);
    animation: industryFadeUp 0.6s ease forwards;
}

@keyframes industryFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered delays */
.industries-grid:first-child .industry-card:nth-child(1) { animation-delay: 0.1s; }
.industries-grid:first-child .industry-card:nth-child(2) { animation-delay: 0.2s; }
.industries-grid:first-child .industry-card:nth-child(3) { animation-delay: 0.3s; }
.industries-grid:first-child .industry-card:nth-child(4) { animation-delay: 0.4s; }
.industries-grid:last-child .industry-card:nth-child(1) { animation-delay: 0.2s; }
.industries-grid:last-child .industry-card:nth-child(2) { animation-delay: 0.3s; }
.industries-grid:last-child .industry-card:nth-child(3) { animation-delay: 0.4s; }
.industries-grid:last-child .industry-card:nth-child(4) { animation-delay: 0.5s; }

/* Responsive */
@media (max-width: 992px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .industries-section .section-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .industries-section {
        padding: 60px 0;
    }
    
    .industries-section .section-title {
        font-size: 28px;
    }
    
    .industries-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 15px;
    }
    
    .industry-card {
        padding: 25px 20px;
    }
    
    .industry-title {
        font-size: 18px;
    }
}


/* ===== STATS SECTION ===== */
.stats-section {
    padding: 60px 0;
    background: #f8f9fa;  /* Light background to match your theme */
    position: relative;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

/* Stat Items */
.stat-item {
    padding: 20px;
}

.stat-number {
    font-size: 56px;
    font-weight: 800;
    color: #9810fa;  /* Your purple color */
    line-height: 1.2;
    margin-bottom: 10px;
    text-shadow: 0 5px 15px rgba(152, 16, 250, 0.2);
}

.stat-label {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Add subtle animation on scroll */
.stat-item {
    opacity: 0;
    transform: translateY(20px);
    animation: statFadeUp 0.6s ease forwards;
}

.stat-item:nth-child(1) { animation-delay: 0.1s; }
.stat-item:nth-child(2) { animation-delay: 0.2s; }
.stat-item:nth-child(3) { animation-delay: 0.3s; }

@keyframes statFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .stats-section {
        padding: 40px 0;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .stat-number {
        font-size: 42px;
    }
    
    .stat-label {
        font-size: 14px;
    }
}

/* ===== TESTIMONIALS SECTION ===== */
.testimonials-section {
    padding: 41px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Decorative background */
.testimonials-section::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(152, 16, 250, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.testimonials-section::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(152, 16, 250, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.testimonials-section .container {
    position: relative;
    z-index: 2;
}

.testimonials-section .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.testimonials-section .section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.testimonials-section .section-title .highlight {
    color: #9810fa;
    position: relative;
}

.testimonials-section .section-title .highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(152, 16, 250, 0.1);
    z-index: -1;
    border-radius: 4px;
}

.testimonials-section .section-subtitle {
    font-size: 16px;
    color: #666666;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Testimonials Grid */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Testimonial Cards */
.testimonial-card {
    background: #ffffff;
    padding: 35px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: all 0.4s ease;
    border: 1px solid #f0f0f0;
    position: relative;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(152, 16, 250, 0.1);
    border-color: rgba(152, 16, 250, 0.2);
}

/* Quote mark decoration */
.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 80px;
    color: rgba(152, 16, 250, 0.1);
    font-family: serif;
    line-height: 1;
}

/* Rating stars */
.testimonial-rating {
    color: #FFD700;  /* Gold color for stars */
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

/* Testimonial text */
.testimonial-text {
    font-size: 15px;
    color: #4a4a4a;
    line-height: 1.7;
    margin-bottom: 20px;
    font-style: italic;
    position: relative;
    z-index: 2;
}

/* Author info */
.testimonial-author {
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
}

.testimonial-author strong {
    display: block;
    font-size: 16px;
    color: #1a1a1a;
    margin-bottom: 5px;
    font-weight: 600;
}

.testimonial-author span {
    font-size: 14px;
    color: #9810fa;
    display: block;
}

/* Animation on scroll */
.testimonial-card {
    opacity: 0;
    transform: translateY(30px);
    animation: testimonialFadeUp 0.6s ease forwards;
}

.testimonial-card:nth-child(1) { animation-delay: 0.1s; }
.testimonial-card:nth-child(2) { animation-delay: 0.2s; }
.testimonial-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes testimonialFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .testimonials-section .section-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .testimonials-section {
        padding: 60px 0;
    }
    
    .testimonials-section .section-title {
        font-size: 28px;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .testimonial-card {
        padding: 25px 20px;
    }
}


/* ===== WHY CHOOSE PEARL SECTION ===== */
.why-choose-section {
    padding: 25px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.section-title .highlight {
    color: #9810fa;
    position: relative;
}

.section-title .highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(152, 16, 250, 0.1);
    z-index: -1;
    border-radius: 4px;
}

.section-subtitle {
    font-size: 16px;
    color: #666666;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Two Column Layout */
.why-choose-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* Benefits Column */
.benefits-column {
    background: #ffffff;
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.benefit-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.benefit-item:hover {
    transform: translateX(5px);
}

.benefit-check {
    font-size: 20px;
    margin-right: 15px;
    color: #9810fa;
    background: rgba(152, 16, 250, 0.08);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.benefit-text {
    font-size: 16px;
    color: #1a1a1a;
    font-weight: 500;
}

/* Image Column */
.why-choose-image {
    background: #ffffff;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(152, 16, 250, 0.08);
    border: 1px solid rgba(152, 16, 250, 0.15);
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image styling */
.pearl-image {
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.image-placeholder {
    width: 100%;
    text-align: center;
}

.image-note {
    margin-top: 10px;
    font-size: 13px;
    color: #9810fa;
    opacity: 0.7;
}

/* Animation */
.benefits-column, .why-choose-image {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.5s ease forwards;
}

.why-choose-image {
    animation-delay: 0.2s;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 992px) {
    .section-title {
        font-size: 36px;
    }
    
    .why-choose-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .why-choose-section {
        padding: 50px 0;
    }
    
    .section-title {
        font-size: 30px;
    }
    
    .benefits-column {
        padding: 25px;
    }
    
    .benefit-text {
        font-size: 15px;
    }
    
    .why-choose-image {
        min-height: 280px;
    }
}

/* Light Purple Gradient Background */
.why-choose-section {
    background: linear-gradient(135deg, #f5f0ff 0%, #faf5ff 100%);
}


/* ===== GET STARTED PAGE ===== */

/* Hero Section */
.getstarted-hero {
    padding: 60px 0 40px;
    text-align: center;
}

/* Purple page title with responsive size */
.page-title {
    color: #9810fa !important;
    font-size: 48px;
    font-weight: 700;
}

.getstarted-hero-subtitle {
    font-size: 18px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* Consultation Section */
.consultation-section {
    padding: 20px 0 80px;
}

.consultation-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Free Consultation Box */
.consultation-box {
    background: #ffffff;
    padding: 30px 25px 35px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(152, 16, 250, 0.08);
    border: 1px solid rgba(152, 16, 250, 0.15);
    position: relative;
    display: flex;
    flex-direction: column;
}

.consultation-badge {
    position: absolute;
    top: -12px;
    left: 30px;
    background: #9810fa;
    color: white;
    padding: 5px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}

.consultation-title {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 10px 0 20px;
    line-height: 1.3;
}

.consultation-title .highlight {
    color: #9810fa;
}

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

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 15px;
    color: #4a4a4a;
}

.feature-icon {
    color: #9810fa;
    font-weight: bold;
    font-size: 18px;
    background: rgba(152, 16, 250, 0.08);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Consultation Image - Added BELOW content */
.consultation-image {
    margin: 15px 0 20px;
    border-radius: 12px;
    overflow: hidden;
    height: 140px;
}

.consultation-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.consultation-img:hover {
    transform: scale(1.05);
}

.consultation-button {
    display: inline-block;
    background: #9810fa;
    color: #ffffff !important;
    padding: 14px 25px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
    border: none;
    cursor: pointer;
}

.consultation-button:hover {
    background: #7a0ec8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(152, 16, 250, 0.3);
}

.consultation-note {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    color: #9810fa;
    font-weight: 500;
}

/* Proposal Form Box */
.proposal-box {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
}

.proposal-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.proposal-title .highlight {
    color: #9810fa;
}

.proposal-subtitle {
    font-size: 15px;
    color: #666;
    margin-bottom: 25px;
}

/* Form Styling */
.proposal-form {
    width: 100%;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 15px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #f9f9f9;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #9810fa;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(152, 16, 250, 0.1);
}

.form-group textarea {
    resize: vertical;
}

/* Checkbox styling */
.checkbox-group {
    margin: 20px 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: #9810fa;
}

/* Optgroup styling */
optgroup {
    font-weight: 600;
    color: #1a1a1a;
}

optgroup option {
    font-weight: normal;
    padding-left: 20px;
}

.submit-button {
    background: #9810fa;
    color: white;
    padding: 16px 30px;
    border: none;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 10px;
}

.submit-button:hover {
    background: #7a0ec8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(152, 16, 250, 0.3);
}

/* Why Choose Us Section */
.getstarted-why {
    padding: 60px 0;
    background: #f8f9fa;
    text-align: center;
}

.why-title {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 40px;
}

.why-title .highlight {
    color: #9810fa;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.why-card {
    background: white;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(152, 16, 250, 0.1);
    border-color: rgba(152, 16, 250, 0.2);
}

.why-icon {
    font-size: 40px;
    margin-bottom: 15px;
    color: #9810fa;
}

.why-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.why-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 992px) {
    .consultation-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .getstarted-hero-title {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .getstarted-hero-title {
        font-size: 36px;
    }
    
    .consultation-box,
    .proposal-box {
        padding: 25px 20px;
    }
    
    .consultation-image {
        height: 120px;
    }
    
    .why-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ===== BLOG SECTION ===== */
.blog-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.blog-section .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.blog-section .section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.blog-section .section-title .highlight {
    color: #9810fa;
}

.blog-section .section-subtitle {
    font-size: 16px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

/* Blog Card */
.blog-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(152, 16, 250, 0.1);
    border-color: rgba(152, 16, 250, 0.2);
}

/* Blog Image */
.blog-image {
    height: 200px;
    overflow: hidden;
}

.blog-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-thumbnail {
    transform: scale(1.05);
}

/* Blog Content */
.blog-content {
    padding: 25px 20px;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #666;
}

.blog-date {
    color: #9810fa;
    font-weight: 500;
}

.blog-category a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-category a:hover {
    color: #9810fa;
}

.blog-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 10px;
}

.blog-title a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-title a:hover {
    color: #9810fa;
}

.blog-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

.blog-read-more {
    color: #9810fa;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.blog-read-more:hover {
    transform: translateX(5px);
}

/* View All Button */
.blog-view-all {
    text-align: center;
    margin-top: 20px;
}

.view-all-button {
    display: inline-block;
    padding: 12px 30px;
    background: transparent;
    color: #9810fa;
    border: 2px solid #9810fa;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.view-all-button:hover {
    background: #9810fa;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(152, 16, 250, 0.3);
}

/* Responsive */
@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .blog-section .section-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .blog-section {
        padding: 60px 0;
    }
    
    .blog-section .section-title {
        font-size: 28px;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .blog-image {
        height: 180px;
    }
}

/* ===== CASE STUDIES SECTION ===== */
.case-studies-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.case-studies-section .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.case-studies-section .section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.case-studies-section .section-title .highlight {
    color: #9810fa;
}

.case-studies-section .section-subtitle {
    font-size: 16px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Case Studies Grid */
.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

/* Case Study Card */
.case-study-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.case-study-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(152, 16, 250, 0.1);
    border-color: rgba(152, 16, 250, 0.2);
}

/* Case Study Image */
.case-study-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.case-study-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.case-study-card:hover .case-study-image img {
    transform: scale(1.05);
}

.case-study-category {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #9810fa;
    color: white;
    padding: 5px 15px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Case Study Content */
.case-study-content {
    padding: 25px;
}

.case-study-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.case-study-description {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* Results */
.case-study-results {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    padding: 10px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.result-item {
    flex: 1;
}

.result-number {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #9810fa;
    line-height: 1.2;
}

.result-label {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.case-study-link {
    color: #9810fa;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
}

.case-study-link:hover {
    transform: translateX(5px);
}

/* View All Button */
.case-studies-cta {
    text-align: center;
    margin-top: 20px;
}

/* Responsive */
@media (max-width: 992px) {
    .case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .case-studies-section {
        padding: 60px 0;
    }
    
    .case-studies-section .section-title {
        font-size: 28px;
    }
    
    .case-studies-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ===== QUICK PROPOSAL FORM ===== */
.quick-proposal-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #f5f0ff 0%, #ffffff 100%);
}

.quick-proposal-wrapper {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    background: #ffffff;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(152, 16, 250, 0.08);
    border: 1px solid rgba(152, 16, 250, 0.15);
}

.quick-proposal-title {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.quick-proposal-title .highlight {
    color: #9810fa;
}

.quick-proposal-subtitle {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
}

.quick-proposal-form {
    margin-bottom: 20px;
}

.quick-form-group {
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
}

.quick-input {
    flex: 1;
    padding: 16px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
}

.quick-input:focus {
    border-color: #9810fa;
    box-shadow: 0 0 0 3px rgba(152, 16, 250, 0.1);
}

.quick-button {
    background: #9810fa;
    color: white;
    border: none;
    padding: 16px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.quick-button:hover {
    background: #7a0ec8;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(152, 16, 250, 0.3);
}

.quick-proposal-note {
    font-size: 14px;
    color: #666;
    margin-top: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .quick-proposal-wrapper {
        padding: 30px 20px;
    }
    
    .quick-proposal-title {
        font-size: 28px;
    }
    
    .quick-form-group {
        flex-direction: column;
    }
    
    .quick-button {
        width: 100%;
    }
}


.website-notice {
    background: #f0f0ff;
    border-left: 4px solid #9810fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 15px;
}

.website-notice p {
    margin: 0;
    color: #1a1a1a;
}

.website-notice strong {
    color: #9810fa;
    word-break: break-all;
}


/* Center Fluent Forms Button */
.ff-btn-submit:not(.ff-btn_no_style) {
    background-color: #9810fa !important;
    color: #ffffff !important;
    border: none !important;
    transition: all 0.3s ease !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    min-width: 200px !important;
    padding: 16px 40px !important;
}

.ff-btn-submit:not(.ff-btn_no_style):hover {
    background-color: #7a0ec8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(152, 16, 250, 0.3) !important;
}


/* ===== RIGHT SIDE MODERN DESIGN ===== */
.right-side-modern {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Main Consultation Card */
.consultation-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(152, 16, 250, 0.25);
    transition: transform 0.3s ease;
}

.consultation-card:hover {
    transform: translateY(-5px);
}

/* Card Background */
.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.card-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
}

.card-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #9810fa 0%, #7a0ec8 100%);
    opacity: 0.9;
}

/* Card Content */
.card-content {
    position: relative;
    z-index: 2;
    padding: 40px 35px;
    color: white;
}

.card-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 40px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge-icon {
    font-size: 18px;
}

.badge-text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Features */
.card-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.card-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.feature-dot {
    width: 8px;
    height: 8px;
    background: #ffd700;
    border-radius: 50%;
    display: inline-block;
}

/* Card CTA */
.card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-text {
    font-size: 14px;
    opacity: 0.9;
}

.cta-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 6px 15px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
}

/* Trust Row */
.trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    background: white;
    padding: 15px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.trust-icon {
    font-size: 20px;
    color: #9810fa;
}

.trust-text {
    font-size: 11px;
    font-weight: 500;
    color: #666;
}

/* Mini Testimonial */
.mini-testimonial {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    text-align: center;
}

.testimonial-stars {
    color: #ffd700;
    font-size: 18px;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.testimonial-quote {
    font-size: 14px;
    color: #666;
    font-style: italic;
    margin-bottom: 15px;
    line-height: 1.5;
}

.testimonial-author strong {
    display: block;
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 3px;
}

.testimonial-author span {
    font-size: 12px;
    color: #9810fa;
}

/* Responsive */
@media (max-width: 992px) {
    .card-features {
        grid-template-columns: 1fr;
    }
    
    .trust-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .card-content {
        padding: 30px 20px;
    }
    
    .card-cta {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

/* Dark Purple Background */
.form-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2d0a3a, #1a0530);
    z-index: 1;
}

/* Remove or comment out these lines since we're not using image */
/* .bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
} */

.bg-overlay {
    display: none; /* Hide overlay since we don't need it */
}


/* ===== CLEAN PROFESSIONAL PROPOSAL SECTION ===== */
.proposal-section {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.proposal-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Left Content */
.proposal-left {
    max-width: 500px;
}

.proposal-tag {
    font-size: 13px;
    font-weight: 500;
    color: #9810fa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.proposal-headline {
    font-size: 42px;
    font-weight: 600;
    line-height: 1.2;
    color: #1a1a1a;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.proposal-headline .highlight {
    color: #9810fa;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.proposal-description {
    font-size: 16px;
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 450px;
}

/* Value Props */
.value-props {
    display: flex;
    gap: 30px;
}

.value-prop {
    display: flex;
    align-items: center;
    gap: 8px;
}

.prop-dot {
    width: 4px;
    height: 4px;
    background: #9810fa;
    border-radius: 50%;
    opacity: 0.5;
}

.prop-text {
    font-size: 14px;
    color: #4a4a4a;
    font-weight: 400;
}

/* Right Form */
.proposal-right {
    position: relative;
}

.proposal-form-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 45px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.proposal-form-card:hover {
    box-shadow: 0 30px 50px -15px rgba(152, 16, 250, 0.15);
    border-color: rgba(152, 16, 250, 0.2);
}

.form-header {
    margin-bottom: 30px;
}

.form-title {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.form-subtitle {
    font-size: 14px;
    color: #888;
    font-weight: 400;
}

/* Form */
.proposal-form {
    width: 100%;
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 15px;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s ease;
    background: #fafafa;
}

.form-input:focus {
    border-color: #9810fa;
    outline: none;
    background: #ffffff;
}

.form-input::placeholder {
    color: #aaa;
    font-weight: 300;
}

.proposal-submit-btn {
    width: 100%;
    background: #9810fa;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.proposal-submit-btn:hover {
    background: #7a0ec8;
}

/* Form Footer */
.form-footer {
    display: flex;
    justify-content: center;
    gap: 25px;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trust-icon {
    color: #9810fa;
    font-size: 12px;
    font-weight: 600;
}

.trust-text {
    font-size: 13px;
    color: #888;
}

/* Responsive */
@media (max-width: 992px) {
    .proposal-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .proposal-left {
        max-width: 100%;
        text-align: center;
    }
    
    .proposal-description {
        margin-left: auto;
        margin-right: auto;
    }
    
    .value-props {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .proposal-section {
        padding: 70px 0;
    }
    
    .proposal-headline {
        font-size: 32px;
    }
    
    .value-props {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .proposal-form-card {
        padding: 35px 25px;
    }
    
    .form-footer {
        flex-wrap: wrap;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .proposal-headline {
        font-size: 28px;
    }
    
    .proposal-tag {
        font-size: 12px;
    }
    
    .proposal-form-card {
        padding: 25px 20px;
    }
    
    .form-footer {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}

/* ===== CLEAN PROFESSIONAL PROPOSAL SECTION WITH IMAGE ===== */
.proposal-section {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
}

/* Background Image with Light Opacity */
.proposal-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://pr.pearldigitalmarketing.com/wp-content/uploads/2026/03/main-page-proposal-banner.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
}

/* Keep content above background */
.container {
    position: relative;
    z-index: 2;
}

/* Center all content in proposal form card */
.proposal-form-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 45px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    text-align: center; /* This centers all text content */
}

/* Center form header */
.form-header {
    margin-bottom: 30px;
    text-align: center;
}

.form-title {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
    text-align: center;
}

.form-subtitle {
    font-size: 14px;
    color: #888;
    text-align: center;
}

/* Center form elements */
.proposal-form {
    width: 100%;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-group {
    margin-bottom: 15px;
    width: 100%;
    max-width: 400px; /* Optional: limits width of input */
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s ease;
    background: #fafafa;
    text-align: left; /* Keep input text left-aligned */
}

.proposal-submit-btn {
    width: 100%;
    max-width: 400px; /* Match input width */
    background: #9810fa;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 auto; /* Center button */
}

/* Center form footer */
.form-footer {
    display: flex;
    justify-content: center;
    gap: 25px;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== SERVICE PAGE STYLES ===== */

/* Back to Services */
.back-to-services {
    padding: 20px 0;
    background: #f8f9fa;
}

.back-link {
    color: #9810fa;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.back-link:hover {
    color: #7a0ec8;
    text-decoration: underline;
}



/* Main Content Section */
.service-main-section {
    padding: 60px 0;
    background: #ffffff;
}

.service-content-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Left Column */
.service-left {
    width: 100%;
}

.service-description {
    font-size: 16px;
    color: #4a4a4a;
    line-height: 1.8;
    margin-bottom: 50px;
}

/* Key Features */
.key-features {
    margin-bottom: 50px;
}

.key-features-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

.key-features-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: #9810fa;
}

.key-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.key-feature-item {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.key-feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(152, 16, 250, 0.1);
    border-color: #9810fa;
}

.feature-icon {
    font-size: 36px;
    margin-bottom: 15px;
    display: block;
}

.key-feature-item h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.key-feature-item p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Why Choose Us */
.why-choose {
    background: #f8f9fa;
    padding: 40px;
    border-radius: 16px;
}

.why-choose-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.why-choose-text {
    font-size: 16px;
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 30px;
}

.stats-box {
    display: flex;
    gap: 40px;
}

.stat-item {
    text-align: left;
}

.stat-number {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: #9810fa;
    line-height: 1.2;
}

.stat-label {
    font-size: 14px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Right Column - Sidebar */
.service-right {
    width: 100%;
}

.sidebar-widget {
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    margin-bottom: 25px;
}

.widget-title {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 8px;
}

.widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #9810fa;
}

.services-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-link {
    color: #4a4a4a;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 6px;
    background: #f8f9fa;
}

.service-link:hover {
    color: #9810fa;
    padding-left: 20px;
    background: #f0f0ff;
}

.contact-widget {
    background: linear-gradient(135deg, #9810fa, #7a0ec8);
    color: white;
    border: none;
}

.contact-widget .widget-title {
    color: white;
}

.contact-widget .widget-title::after {
    background: white;
}

.contact-text {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 20px;
    line-height: 1.6;
}

.contact-btn {
    display: inline-block;
    background: white;
    color: #9810fa;
    padding: 12px 25px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Pricing Section */
.pricing-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.pricing-section .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.pricing-section .section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.pricing-section .section-title .highlight {
    color: #9810fa;
}

.pricing-section .section-subtitle {
    font-size: 18px;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    border-radius: 16px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(152, 16, 250, 0.15);
}

.pricing-card.featured {
    border: 2px solid #9810fa;
    transform: scale(1.05);
}

.popular-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #9810fa;
    color: white;
    padding: 5px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.pricing-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.pricing-price {
    font-size: 42px;
    font-weight: 800;
    color: #9810fa;
    margin-bottom: 15px;
}

.pricing-description {
    font-size: 15px;
    color: #666;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.pricing-features li {
    margin-bottom: 12px;
    font-size: 15px;
    color: #4a4a4a;
}

.pricing-btn {
    display: inline-block;
    width: 100%;
    background: transparent;
    color: #9810fa;
    border: 2px solid #9810fa;
    padding: 14px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.pricing-btn:hover {
    background: #9810fa;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(152, 16, 250, 0.3);
}

/* CTA Section */
.cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #9810fa, #7a0ec8);
    text-align: center;
}

.cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.cta-title {
    font-size: 42px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.cta-title .highlight {
    color: white;
    text-decoration: underline;
}

.cta-text {
    font-size: 18px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 30px;
}

.cta-btn {
    display: inline-block;
    background: white;
    color: #9810fa;
    padding: 16px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* Responsive */
@media (max-width: 992px) {
    .service-content-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .service-hero-title {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .service-hero-title {
        font-size: 36px;
    }
    
    .key-features-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-box {
        flex-direction: column;
        gap: 20px;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
    }
    
    .pricing-card.featured {
        transform: scale(1);
    }
    
    .cta-title {
        font-size: 32px;
    }
}

/* ===== SOCIAL MEDIA PAGE STYLES ===== */

/* Hero Section */
.smm-hero {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    text-align: center;
}

.smm-hero-title {
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.smm-hero-subtitle {
    font-size: 18px;
    color: #666;
    max-width: 700px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.smm-btn {
    display: inline-block;
    background: #9810fa;
    color: #ffffff;
    padding: 14px 35px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.smm-btn:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(152, 16, 250, 0.3);
    color: #ffffff !important;
}

.smm-platforms {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}

.smm-platforms span {
    background: #f0f0ff;
    color: #9810fa;
    padding: 8px 25px;
    border-radius: 30px;
    font-weight: 500;
    border: 1px solid rgba(152, 16, 250, 0.2);
}

/* ===== WHY SOCIAL MEDIA MATTERS ===== */
.smm-why {
    padding: 80px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Decorative background */
.smm-why::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(152, 16, 250, 0.02) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.smm-why .container {
    position: relative;
    z-index: 2;
}

/* Header */
.smm-why-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.smm-why-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
    line-height: 1.2;
}

.smm-why-title span {
    color: #9810fa;
}

.smm-why-subtitle {
    font-size: 18px;
    color: #4a4a4a;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* 4 Column Grid */
.smm-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 20px;
}

/* Cards */
.smm-why-card {
    background: #f8f9fa;
    padding: 35px 25px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.smm-why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(152, 16, 250, 0.1);
    border-color: #9810fa;
    background: #ffffff;
}

/* Icon Circle with Purple Background */
.card-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #9810fa, #ff66c4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(152, 16, 250, 0.3);
}

.smm-why-card:hover .card-icon {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(152, 16, 250, 0.4);
}

.smm-why-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 12px;
}

.smm-why-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .smm-why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .smm-why-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .smm-why {
        padding: 60px 0;
    }
    
    .smm-why-title {
        font-size: 32px;
    }
    
    .smm-why-subtitle {
        font-size: 16px;
    }
    
    .smm-why-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .smm-why-card {
        padding: 25px 20px;
    }
    
    .card-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
}

/* ===== PLATFORM SERVICES SECTION ===== */
.smm-platform-services {
    padding: 80px 0;
    background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

/* Decorative gradient elements */
.smm-platform-services::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(152, 16, 250, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: float 20s infinite ease-in-out;
}

.smm-platform-services::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 102, 196, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: float 15s infinite ease-in-out reverse;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, 20px); }
}

.smm-platform-services .container {
    position: relative;
    z-index: 2;
}

/* Section Header */
.smm-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.smm-section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.smm-section-title span {
    background: linear-gradient(135deg, #9810fa, #ff66c4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.smm-section-subtitle {
    font-size: 18px;
    color: #4a4a4a;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Platform Grid */
.smm-platforms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 20px;
}

/* Platform Card */
.smm-platform-card {
    background: white;
    border-radius: 20px;
    padding: 35px 30px;
    transition: all 0.4s ease;
    border: 1px solid rgba(152, 16, 250, 0.1);
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

.smm-platform-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #9810fa, #ff66c4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.smm-platform-card:hover::before {
    transform: scaleX(1);
}

.smm-platform-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(152, 16, 250, 0.15);
    border-color: rgba(152, 16, 250, 0.3);
}

/* Platform Icon with White Logos */
.platform-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #9810fa, #ff66c4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(152, 16, 250, 0.3);
}

.platform-icon i {
    font-size: 28px;
    color: white;
}

.platform-icon span {
    font-size: 28px;
    color: white;
}

.smm-platform-card:hover .platform-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, #7a0ec8, #ff4db8);
    box-shadow: 0 10px 25px rgba(152, 16, 250, 0.4);
}

/* Platform Title */
.platform-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Platform Description */
.platform-desc {
    font-size: 15px;
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Platform Features */
.platform-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.platform-features li {
    font-size: 14px;
    color: #4a4a4a;
    position: relative;
    padding-left: 20px;
}

.platform-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    background: linear-gradient(135deg, #9810fa, #ff66c4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

/* Learn More Link */
.platform-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9810fa;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
}

.platform-link::after {
    content: '→';
    transition: transform 0.3s ease;
}

.platform-link:hover {
    color: #ff66c4;
    gap: 12px;
}

.platform-link:hover::after {
    transform: translateX(3px);
}

/* Responsive */
@media (max-width: 992px) {
    .smm-platforms-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .smm-section-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .smm-platform-services {
        padding: 60px 0;
    }
    
    .smm-section-title {
        font-size: 32px;
    }
    
    .smm-section-subtitle {
        font-size: 16px;
    }
    
    .smm-platforms-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .smm-platform-card {
        padding: 30px 25px;
    }
    
    .platform-title {
        font-size: 22px;
    }
    
    .platform-features {
        grid-template-columns: 1fr;
    }
}










/* Pricing Section */
.smm-pricing {
    padding: 80px 0;
    background: #f8f9fa;
}

.smm-pricing-main-title {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 50px;
}

.smm-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.smm-pricing-card {
    background: white;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    position: relative;
}

.smm-pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(152, 16, 250, 0.15);
}

.smm-pricing-card.popular {
    border: 2px solid #9810fa;
    transform: scale(1.05);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #9810fa;
    color: white;
    padding: 4px 20px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.smm-package-title {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.smm-price {
    font-size: 36px;
    font-weight: 700;
    color: #9810fa;
    margin-bottom: 15px;
}

.smm-package-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.smm-package-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.smm-package-features li {
    margin-bottom: 12px;
    font-size: 14px;
    color: #4a4a4a;
}

/* Proposal Section */
.smm-proposal {
    padding: 60px 0;
}

.smm-proposal-box {
    background: linear-gradient(135deg, #9810fa, #7a0ec8);
    color: white;
    padding: 60px;
    border-radius: 20px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.smm-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 6px 20px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.smm-proposal-box h2 {
    font-size: 36px;
    margin-bottom: 15px;
}

.smm-proposal-box p {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 30px;
}

.smm-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto 20px;
}

.smm-form input {
    flex: 1;
    padding: 15px 20px;
    border: none;
    border-radius: 40px 0 0 40px;
    font-size: 16px;
}

.smm-form .smm-btn {
    border-radius: 0 40px 40px 0;
    background: #333;
    margin: 0;
}

.smm-form .smm-btn:hover {
    background: #222;
}

.smm-note {
    font-size: 14px;
    opacity: 0.8;
}

/* FAQ Section */
.smm-faq {
    padding: 60px 0;
    background: #f8f9fa;
}

.smm-faq-title {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 40px;
}

.smm-faq-item {
    background: white;
    border-radius: 12px;
    margin-bottom: 15px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
}

.smm-faq-question {
    padding: 20px 25px;
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    color: #1a1a1a;
    transition: all 0.3s ease;
}

.smm-faq-question:hover {
    color: #9810fa;
}

.smm-faq-toggle {
    font-size: 24px;
    color: #9810fa;
    font-weight: 300;
}

.smm-faq-answer {
    padding: 0 25px 20px;
    display: none;
    color: #666;
    line-height: 1.6;
}

.smm-faq-item.active .smm-faq-answer {
    display: block;
}

.smm-faq-item.active .smm-faq-question {
    color: #9810fa;
    background: #f8f9fa;
}

/* CTA Section */
.smm-cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #9810fa, #7a0ec8);
    text-align: center;
}

.smm-cta-title {
    font-size: 42px;
    font-weight: 700;
    color: white;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.smm-cta-button {
    display: inline-block;
    background: white;
    color: #9810fa;
    padding: 16px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    transition: all 0.3s ease;
}

.smm-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* Responsive */
@media (max-width: 992px) {
    .smm-hero-title {
        font-size: 42px;
    }
    
    .smm-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .smm-service-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .smm-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .smm-hero-title {
        font-size: 36px;
    }
    
    .smm-hero-subtitle {
        font-size: 16px;
    }
    
    .smm-features-grid {
        grid-template-columns: 1fr;
    }
    
    .smm-service-list {
        grid-template-columns: 1fr;
    }
    
    .smm-pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .smm-pricing-card.popular {
        transform: scale(1);
    }
    
    .smm-proposal-box {
        padding: 40px 20px;
    }
    
    .smm-proposal-box h2 {
        font-size: 28px;
    }
    
    .smm-form {
        flex-direction: column;
        gap: 10px;
    }
    
    .smm-form input,
    .smm-form .smm-btn {
        border-radius: 40px;
    }
    
    .smm-cta-title {
        font-size: 28px;
    }
}

/* ===== HERO SECTION WITH BACKGROUND IMAGE ===== */
.smm-hero {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    color: white;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

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

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2d0a3a 0%, #c257ff 100%);
    opacity: 0.91;
    z-index: 2;
}

.smm-hero .container {
    position: relative;
    z-index: 3;
}

.smm-hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.smm-hero-title {
    font-size: 56px;
    font-weight: 800;
    color: white;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.smm-hero-title span {
    color: #9810fa;
    text-shadow: 0 0 20px rgba(152,16,250,0.5);
}

.smm-hero-subtitle {
    font-size: 18px;
    color: rgba(255,255,255,0.9);
    max-width: 700px;
    margin: 0 auto 30px;
    line-height: 1.6;
    text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.smm-hero-btn {
    display: inline-block;
    background: transparent;
    color: white;
    padding: 16px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 40px;
    border-color: white !important;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.smm-hero-btn:hover {
    background: #ffffff;
    border-color: white;
    color: #9810fa !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* Platform Tags */
.smm-platforms {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.smm-platforms span {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    color: white;
    padding: 10px 25px;
    border-radius: 40px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.3);
    transition: all 0.3s ease;
}

.smm-platforms span:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
}

/* Purple Platform Tags */
.smm-platforms span {
    background: #ffffff;
    color: #9810fa;
    padding: 10px 25px;
    border-radius: 40px;
    font-weight: 500;
    display: inline-block;
    margin: 5px;
    transition: all 0.3s ease;
}

/* Optional: Hover effect */
.smm-platforms span:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(152, 16, 250, 0.3);
}

/* Smaller Hero Banner */
.smm-hero {
    padding: 60px 0;  /* Reduced from 120px to 60px */
}

/* If you want even smaller */
.smm-hero {
    padding: 40px 0;  /* Even smaller */
}