/* --- General Styles & Variables --- */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
}

body:not(.home):not(.single-portfolio) .site-content .container {
	display: flex;
	justify-content: space-between;
	gap: 3rem;
}

section {
	padding: 80px 0;
	position: relative;
}

section[id] {
	scroll-margin-top: 80px;
}

.section-title span {
	background-image: url('../img/vectors/wave_long.png');
	background-repeat: repeat-x;
	background-size: 100% 100%;
	background-position: center;
}

.btn {
	display: inline-block;
	background-color: var(--cta-orange);
	color: var(--white) !important;
	padding: 14px 28px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
	transition: background-color 0.3s ease;
}

.btn:hover {
	background-color: #fb923c;
}

/* --- Base styles for BOTH buttons --- */
.primary-btn,
.secondary-btn,
.third-btn,
.simple-btn,
.basic-btn {
	position: relative;
	display: inline-block;
	z-index: 8;
	font-family: inherit;
	font-weight: bold;
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	border-radius: 10px;
	border-bottom-left-radius: 25px;
	border-top-right-radius: 25px;
	transition: transform 0.3s ease-out, border-color 0.3s ease-out, color 0.3s ease-out;
}

/* --- Styles UNIQUE to the Primary Button --- */
.primary-btn {
	color: var(--white);
	background-color: var(--cta-orange);
	border: none;
	padding: 5px 45px;
}

/* --- Styles UNIQUE to the Secondary Button --- */
.secondary-btn {
	background-color: transparent;
	color: inherit;
	padding: 3px 43px;
	background-image: url('../img/vectors/secondary_btn_bg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	border: none;
	border-radius: 0%;
}

button.primary-btn {
	line-height: 1.5em;
}

/* --- Styles UNIQUE to the Secondary Button --- */
/* .third-btn {
	background-color: var(--light-purple);
    padding: 6px 28px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: none;
    border-radius: 8px 8px;
    font-family: var(--_typography---font-styles--heading);
    font-size: 2em;
} */

.third-btn {
	background-image: url('../img/vectors/buton_testimoniale.svg');
	padding: 6px 28px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-color: transparent;
	border: none;
	border-radius: 8px 8px;
	font-family: var(--_typography---font-styles--heading);
	font-size: 2em;
}

.third-btn:hover {
	transform: translateY(-3px);
}

.simple-btn {
	background-color: transparent;
	color: inherit;
	padding: 6px 16px 6px 0;
	border: none;
	border-radius: 0%;
	font-size: 0.8em;
}

.simple-btn::after {
	content: '+';
	position: absolute;
	top: 2px;
	right: 4px;
	width: 10px;
	height: auto;
	font-size: 16px;
}

.basic-btn {
	background-color: transparent;
	color: inherit;
	padding: 6px 40px 6px 20px;
	border: 1px solid #EEE;
	border-radius: 8px;
	font-size: 0.8em;
	font-family: var(--font-new-spirit);
}

.basic-btn::after {
	content: '+';
	position: absolute;
	top: 5px;
	right: 15px;
	width: 20px;
	height: auto;
}

.basic-btn:hover {
	border-color: var(--third-purple);
}

/*
==============================================
  DRIP STYLES (for BOTH buttons)
==============================================
*/

/* --- Shared Drip Styles for BOTH buttons --- */
.primary-btn::before,
.primary-btn::after {
	content: '\25CF';
	position: absolute;
	z-index: 0;
	background-color: var(--parent-bg);
	width: 20px;
	height: 20px;
	color: var(--cta-orange);
	/* Initial drip color */
	border-radius: 10px;
	font-size: 21px;
	text-align: center;
	line-height: 17px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 0px;
	transition: color 0.2s ease-out;
}

/* --- Drip Positioning (for BOTH buttons) --- */
.primary-btn::before {
	top: -2px;
	right: -2px;
}

.primary-btn::after {
	bottom: -2px;
	left: -2px;
}

/*
==============================================
  HOVER EFFECTS (for BOTH buttons)
==============================================
*/

/* --- General Hover Effect --- */
.primary-btn:hover,
.secondary-btn:hover,
.simple-btn:hover,
.basic-btn:hover {
	transform: translateY(3px);
	color: var(--primary-purple);
}

/* --- Drip Hover Effect --- */
.primary-btn:hover::before,
.primary-btn:hover::after {
	color: var(--primary-purple);
}

.primary-btn:hover {
	color: var(--white);
	background-color: var(--secondary-purple);
}

/* --- 1. Header --- */
.site-header {
	padding: 0;
	z-index: 9999;
	position: relative;
}

.home .site-header {
	position: fixed;
	margin: auto;
	width: 100%;
	height: 100px;
}

.header-container {
	position: relative;
	background-color: var(--light-beige);
	--parent-bg: var(--light-beige);
}

.head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Common styles for both the top and bottom vectors */
/* .header-container::before,
.header-container::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 10px;
	background-image: url('../img/vectors/header-top.svg');
	background-repeat: repeat-x;
	background-size: cover;
	background-position: top center;
	z-index: 11;
	pointer-events: none;
} */

/* Position the top vector */
/* .header-container::before {
	top: -6px;
} */

/* Position and flip the bottom vector */
/* .header-container::after {
	bottom: -6px;
	transform: scaleY(-1);
} */

.site-branding a {
	display: block;
}

.site-branding .custom-logo {
	max-height: 40px;
	max-width: 70px;
	vertical-align: middle;
}

.main-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 30px;
}

.main-navigation ul li a {
	color: var(--dark-text);
	text-decoration: none;
	font-weight: 700;
	padding: 20px 10px;
}

.main-navigation ul li a:hover,
.footer-menu-widget ul li a:hover {
	color: var(--cta-orange);
}

/* --- 2. Hero Section --- */
.hero-section {
	position: relative;
	padding-bottom: 30px;
	padding-top: 120px;
}

.hero-section::after {
	content: '';
	position: absolute;
	bottom: -23px;
	left: 0;
	width: 100%;
	height: 25px;
	background-image: url('../img/vectors/transition.svg');
	background-repeat: repeat-x;
	background-size: cover;
	background-position: top center;
	z-index: 11;
	pointer-events: none;
	transform: scaleY(-1);
}

.hero-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.hero-content h1,
.hero-content p {
	color: var(--white);
}

.hero-content h1 {
	font-size: 4.8rem;
	line-height: 1.1;
	margin-bottom: 20px;
	margin-top: 0;
	position: relative;
}

.hero-content p {
	font-size: clamp(1.3rem, 2vw + 0.5rem, 1.7rem);
	font-family: var(--font-new-spirit);
	font-weight: bold;
}

.hero-content span.overlay {
	display: inline-block;
	background-image: url('../img/vectors/circle1.svg');
	background-size: contain;
	width: 0.8em;
	background-repeat: no-repeat;
	background-position: center;
	height: 1em;
	vertical-align: middle;
	text-indent: -999999px;
}

.hero-content span.overlay:nth-of-type(2) {
	background-image: url('../img/vectors/circle2.svg');
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.hero-image-wrapper {
	position: relative;
	width: 35%;
}

.hero-image-wrapper img {
	position: relative;
	z-index: 2;
	max-width: 100%;
}

/* --- 3. Section 1 (Intro) --- */
.intro-section .container {
	display: flex;
	align-items: center;
	gap: 60px;
}

.intro-image {
	flex: 0 0 40%;
}

.intro-image img {
	max-width: 100%;
	transform: scaleX(-1);
}

.intro-text {
	flex: 1;
}

/* --- 4. Section 2 (Services) --- */
.services-section {
	background-color: var(--white);
	text-align: center;
	padding: 0;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	margin-top: 60px;
	text-align: left;
	background-image: url('../img/vectors/icons_bg.png');
	background-repeat: no-repeat;
	background-size: 500px 500px;
	background-position: right bottom;
}

.services-grid .service-card {
	position: relative;
}

.services-grid .service-card:nth-child(even) {
	top: 190px;
}

.service-card {
	background-color: var(--light-purple);
	--parent-bg: var(--light-purple);
	padding: 30px 30px 60px;
	border-radius: 16px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.3s ease;
	transition: all 0.3s ease;
}

.service-card:hover .info-box {
	border-color: var(--cta-orange);
}

.service-card:hover .primary-btn {
	transform: translateY(3px);
}

.service-card::before {
	content: '';
	position: absolute;
	top: -10px;
	left: -10px;
	width: 60px;
	height: 60px;
	border-radius: 16px;
	z-index: 10;
	background-size: 100% 100%;
}

.service-card.service-1::before {
	background-image: url('../img/vectors/services-vector.png');
}

.service-card.service-2::before {
	background-image: url('../img/vectors/services-vector3.png');
}

.service-card.service-3::before {
	background-image: url('../img/vectors/services-vector1.png');
}

.service-card.service-4::before {
	background-image: url('../img/vectors/services-vector4.png');
}

.service-card.service-5::before {
	background-image: url('../img/vectors/services-vector2.png');
}

.service-card h3 {
	margin: 0;
}

.service-card p {
	font-weight: bold;
}

.service-image {
	width: 100%;
	height: 250px;
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: 20px;
}

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

.service-card:hover .service-image img {
	transform: scale(1.1);
}

.service-card .info-box {
	/* border: 2px solid var(--primary-purple); */
	background-color: var(--third-purple);
	padding: 15px;
	margin: 10px 0 30px;
	border-radius: 8px;
}

/* --- 5. Section 3 (Reviews) - UPDATED --- */
.reviews-section {
	text-align: center;
	position: relative;
	overflow: hidden;
}

.reviews-wrapper {
	column-count: 3;
	column-gap: 20px;
}

/* --- Review container fade effect --- */
.reviews-wrapper.has-fade-effect {
	position: relative;
	/* Add padding to the bottom to ensure the fade doesn't cover the last row of cards completely */
	padding-bottom: 0;
	margin-bottom: -100px;
	/* Negative margin to pull the "load more" button back up */
}

/* The gradient overlay */
.reviews-wrapper.has-fade-effect::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 500px;
	/* The height of the fade */
	/* This gradient transitions from fully transparent to solid white */
	background: linear-gradient(to top, white 30%, rgba(255, 255, 255, 0));
	pointer-events: none;
	/* This allows you to click on content "behind" the overlay */
	z-index: 5;
}

.review-card {
	background-color: var(--light-sand);
	padding: 20px;
	border-radius: 16px;
	text-align: left;
	margin-bottom: 20px;
	display: inline-block;
	width: 100%;
	transition: transform .3s ease;
}

.review-card:hover {
	transform: translateY(-2px);
}

.review-author {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 10px;
	position: relative;
	padding-bottom: 15px;
}

/* The purple line below the author */
.review-author::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 80px;
	height: 2px;
	background-color: var(--primary-purple);
	opacity: 0.9;
}

.review-author-info {
	display: flex;
	flex-direction: column;
}

/* 1. The Container DIV */
.review-author-image {
	width: 55px;
	height: 55px;

	/* This is CRUCIAL for positioning the frame on top */
	position: relative;
}

/* 2. The Person's Photo (The IMG from WordPress) */
.review-author-image img {
	/* The photo fills the container completely */
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	padding: 1px;
}

/* 3. The Frame Overlay (using your new picture_rama.png) */
.review-author-image::after {
	content: '';
	/* Required for the pseudo-element to appear */

	/* Position the frame to cover the image exactly */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	/* Apply your new rectangular PNG as the frame overlay */
	/* IMPORTANT: Update this path to be correct for your project! */
	background-image: url('../img/vectors/picture_rama.png');
	background-size: 100% 100%;
	/* Stretch to fit */
	background-repeat: no-repeat;
	background-position: center;

	/* This ensures you can still right-click the image if needed */
	pointer-events: none;
}

/* 2. The Inner DIV (This is the Photo) */
.review-author-photo {
	/* Make the photo slightly smaller than the frame to reveal the border */
	/* You can adjust this percentage to change the border thickness */
	width: 82%;
	height: 82%;

	/* The photo URL is applied via the inline style from the PHP */
	background-size: cover;
	background-position: center;

	/* This is the KEY FIX: Make the photo a perfect circle.
       This physically removes the square corners so they cannot show
       through the transparent parts of the frame. */
	border-radius: 50%;
}

.review-author-info .name {
	font-weight: 700;
	color: var(--dark-text);
	font-size: 1.25rem;
}

.review-author-info .role {
	font-size: .8em;
	color: var(--lighter-dark-text);
}

.review-text {
	/* font-style: italic; */
	font-size: 1rem;
	flex-grow: 1;
}

/* --- Styles for the Load More Button Container --- */
#load-more-reviews.loading {
	cursor: wait;
	opacity: 0.7;
}

/* --- 6. Section 4 (Introduction) --- */
.about-section {
	padding-bottom: 0;
}

.about-section .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}

.about-image {
	flex: 0 0 45%;
	position: relative;
}

/* .about-image img {
	vertical-align: bottom;
} */

.about-text {
	flex: 1;
	--parent-bg: var(--white);
	margin-bottom: 80px;
}

/* --- 7. Section 5 (Portfolio) --- */
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 60px;
}

.portfolio-card {
	background-color: var(--white);
	border-radius: 16px;
	overflow: hidden;
	text-align: left;
}

.portfolio-grid .portfolio-card {
	position: relative;
}

.portfolio-grid .portfolio-card:nth-child(2),
.portfolio-grid .portfolio-card:nth-child(5) {
	top: 60px;
}

.portfolio-card-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin: 25px 25px 0;
	border-radius: 16px 16px 0 0;
}

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

.portfolio-card:hover .secondary-btn,
.blog-card:hover .secondary-btn {
	transform: translateY(-3px);
	transition: transform 0.3s ease;
}

.portfolio-card:hover .portfolio-card-image img {
	transform: scale(1.1);
}

.portfolio-content {
	padding: 25px;
}

.portfolio-content h3 {
	margin: 0;
}

.portfolio-content p {
	margin-top: 0;
	margin-bottom: 25px;
}

.portfolio-section .bottom-text {
	margin: 120px auto 30px;
	max-width: 600px;
}

/* --- 8. Section 6 (Blog Posts) --- */
.blog-section {
	text-align: center;
	--parent-bg: var(--white);
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin: 60px 0 120px;
	text-align: left;
}

.blog-card {
	display: flex;
	gap: 20px;
	background-color: var(--light-sand);
	border-radius: 16px;
	padding: 20px;
}

.blog-card:hover .blog-card-image img {
	transform: scale(1.1);
}

.blog-grid .blog-card {
	position: relative;
}

.blog-grid .blog-card:nth-child(even) {
	top: 60px;
}

.blog-card-image {
	flex: 0 0 150px;
	overflow: hidden;
	border-radius: 8px;
}

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

.blog-card-content h3 {
	margin: 0;
	line-height: 1em;

	a {
		color: var(--dark-text);
		text-decoration: none;
	}
}

.blog-card-content p {
	font-size: 0.9rem;
}

.blog-section .bottom-cta {
	margin-top: 60px;
}

/* --- 9. Section 7 (Products) --- */
.products-section {
	padding: 0;
	--parent-bg: var(--white);
	background-image: url('../img/vectors/icons_bg.png');
	background-repeat: no-repeat;
	background-size: 500px 500px;
	background-position: -100px -70px;
}

.products-section .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.products-content {
	flex: 1;
	min-width: 0;
}

.products-image {
	background-image: url('../img/vectors/vector_bg.png');
	background-repeat: no-repeat;
	background-size: contain;
	flex: 1;
	min-width: 0;
}

.products-image img {
	max-width: 100%;
	margin-bottom: -320px;
}

/* --- 10. Section 8 (Newsletter) --- */
.newsletter-section-wrapper {
	position: relative;
}

section.newsletter-section {
	margin-top: 80px;
	padding: 40px 0 0;
}

section.newsletter-section::before {
	content: '';
	position: absolute;
	top: -23px;
	left: 0;
	width: 100%;
	height: 25px;
	background-image: url('../img/vectors/transition.svg');
	background-repeat: repeat-x;
	background-size: cover;
	background-position: top center;
	z-index: 11;
	pointer-events: none;
}

.newsletter-section .container {
	display: flex;
	align-items: flex-end;
	gap: 60px;
}

.newsletter-image {
	flex: 0 0 48%;
	margin-top: 0;
}

.swish-bg {
	background-image: url('../img/vectors/swish_bg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.swish-bg-2 {
	background-image: url('../img/vectors/swish_bg_2.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.swish-bg-3 {
	background-image: url('../img/vectors/vector_bg.png');
	background-repeat: no-repeat;
	background-size: contain;
}

.swish-bg-3-flipped {
	/* This container needs to be a positioning context for the ::before element */
	position: relative;
	/* Ensures the content stays above the pseudo-element background */
	z-index: 1;
}

.swish-bg-3-flipped::before {
	content: '';
	/* Pseudo-elements must have a content property */

	/* The background image is now on the pseudo-element */
	background-image: url('../img/vectors/vector_bg.png');
	background-repeat: no-repeat;
	background-size: contain;

	/* Position the pseudo-element to fill the entire container */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	/* Place the pseudo-element behind the container's actual content */
	z-index: -1;

	/* And finally, flip ONLY the pseudo-element */
	transform: scaleY(-1);
}

.newsletter-section .container {
	overflow: hidden;
}

.newsletter-image img {
	max-width: 130%;
	margin-bottom: -10px;
	vertical-align: bottom;
}

.newsletter-content {
	flex: 1;
	margin-top: 20px;
}

.pre-heading {
	font-size: 1rem;
	letter-spacing: 2px;
	font-family: var(--font-new-spirit);
	font-weight: bold;
	font-size: 25px;
}

.newsletter-content h2 {
	margin: 15px 0;
}

.newsletter-form,
#forminator-module-626.forminator-custom-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Forminator */
#forminator-module-626 .forminator-row {
	width: 75%;
	margin: 0 !important;
}

.newsletter-content .forminator-row-last .forminator-col,
#forminator-module-626 .forminator-field-name,
#forminator-module-626 .forminator-field-email {
	padding: 0 !important;
}

.newsletter-form label,
#forminator-module-626.forminator-custom-form label {
	display: block;
	margin-bottom: 5px;
	font-size: 0.9rem;
}

.newsletter-form input[type="text"],
.newsletter-form input[type="email"],
#forminator-module-626.forminator-custom-form input[type="text"],
#forminator-module-626.forminator-custom-form input[type="email"] {
	width: 70%;
	padding: 12px;
	border-radius: 8px;
	border: none;
	margin-bottom: 15px;
	box-sizing: border-box;
}

#forminator-module-626.forminator-custom-form input[type="text"],
#forminator-module-626.forminator-custom-form input[type="email"] {
	width: 100%;
}

.newsletter-form .primary-btn:hover,
.hero-content .primary-btn:hover,
.ghid-section .primary-btn:hover,
#forminator-module-626.forminator-custom-form .primary-btn:hover {
	background-color: var(--secondary-purple);
}

.newsletter-form .primary-btn:hover::before,
.newsletter-form .primary-btn:hover::after,
.hero-content .primary-btn:hover::before,
.hero-content .primary-btn:hover::after,
#forminator-module-626.forminator-custom-form .primary-btn:hover::before,
#forminator-module-626.forminator-custom-form .primary-btn:hover::after {
	color: var(--secondary-purple);
}

.primary-btn:empty {
	display: none;
}

.newsletter-disclaimer {
	font-size: 0.8rem;
	margin-top: 5px;
	margin-bottom: 30px;
	opacity: 0.8;

	a:hover {
		color: var(--cta-orange);
	}
}

/* Section Special Backgrounds */

.purple-bg {
	background-color: var(--primary-purple);
	--parent-bg: var(--primary-purple);
	color: var(--white);
}

.purple-bg h2,
.purple-bg h3,
.purple-bg p,
.purple-bg a {
	color: var(--white);
}

.forminator-response-message p {
	color: var(--dark-text);
}

.light-sand-bg {
	background-color: var(--light-sand);
	text-align: center;
	--parent-bg: var(--light-sand);
	position: relative;
}

/* Common styles for both the top and bottom vectors */
.light-sand-bg::before,
.light-sand-bg::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 25px;
	background-image: url('../img/vectors/transition.png');
	background-repeat: repeat-x;
	background-size: cover;
	background-position: top center;
	z-index: 11;
	pointer-events: none;
}

.light-sand-bg::before {
	top: -23px;
	/* Position it just above the container */
}

.light-sand-bg::after {
	bottom: -23px;
	transform: scaleY(-1);
}

/* Section Special Backgrounds END */

/* --- 11. Footer --- */
.site-footer {
	background-color: var(--secondary-purple);
	color: #d1d5db;
	padding: 60px 0 20px;
	position: relative;
	z-index: 10;
}

.site-footer::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 0;
	width: 100%;
	height: 10px;
	background-image: url('../img/vectors/subtract.svg');
	background-repeat: repeat-x;
	background-size: cover;
	background-position: top center;
	z-index: 11;
	pointer-events: none;
}

.chestionar-section::before {
	content: '';
	position: absolute;
	top: -22px;
	left: 0;
	width: 100%;
	height: 25px;
	background-image: url('../img/vectors/transition.svg');
	background-repeat: repeat-x;
	background-size: cover;
	background-position: top center;
	z-index: 11;
	pointer-events: none;
}

.chestionar-section::after {
	content: '';
	position: absolute;
	bottom: -22px;
	left: 0;
	width: 100%;
	height: 25px;
	background-image: url('../img/vectors/transition.svg');
	background-repeat: repeat-x;
	background-size: cover;
	background-position: top center;
	z-index: 11;
	pointer-events: none;
	transform: scaleY(-1);
}

.footer-main {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	--parent-bg: var(--secondary-purple);
}

.footer-left {
	max-width: 25%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.footer-left .primary-btn:hover {
	background-color: var(--primary-purple);
}

.footer-left .footer-logo {
	max-width: 100px;
	margin-bottom: 10px;
}

.footer-left .btn {
	margin-bottom: 20px;
}

.footer-socials {
	display: flex;
	gap: 15px;
	margin-top: 15px;
}

.footer-socials a {
	color: var(--white);
	font-size: 1.5rem;
	background-color: var(--cta-orange);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
}

.footer-socials a:hover {
	transform: translateY(5px);
	transition: all 0.3s ease;
}

.footer-socials a:hover :before {
	color: var(--primary-purple);
}

.footer-right:has(> :first-child:last-child),
.footer-right:has(> :nth-child(2):last-child) {
	justify-content: flex-end;
}

.footer-right {
	display: flex;
	justify-content: space-between;
	flex-grow: 1;
	max-width: 60%;
}

.footer-menu-widget h4 {
	color: var(--white);
	font-family: var(--font-new-spirit);
	font-size: 1.1rem;
}

.footer-menu-widget ul {
	list-style: none;
	padding: 0 10px;
	margin: 0;
}

.footer-menu-widget ul li a {
	color: var(--light-purple);
	text-decoration: none;
}

.footer-menu-widget ul li {
	margin-bottom: 10px;
}

.disclaimer {
	font-size: 0.9rem;
	text-align: center;
	margin: 60px auto auto;
	border-top: 1px solid var(--secondary-purple);
	padding-top: 20px;

	p {
		opacity: .8;
	}
}

.footer-bottom.disclaimer {
	border-top: 1px solid var(--primary-purple);
	margin: 0;
}

.footer-payment-icons {
	display: flex;
	gap: 10px;
	align-items: center;
}

.footer-payment-icons img {
	max-height: 25px;
}

/* --- Portfolio AJAX Modal (Fancybox) Styling - Images Only --- */
/* Style the main Fancybox pop-up window */
.fancybox__content {
	background: transparent;
	/* Make the popup frame transparent */
	padding: 0 !important;
	max-width: 90vw;
	/* Allow the modal to be wide */
	width: 1400px;
	color: var(--dark-text);
	/* For fallback text */
}

/* This is our new main container inside the modal */
.portfolio-modal-content-images-only {
	width: 100%;
	height: 100%;
}

/* Style the SwiperJS slider container */
.portfolio-modal-content-images-only .portfolio-image-slider {
	width: 100%;
	height: 100%;
	/* Make slider fill the modal vertically */
	margin: 0;
	padding: 0;
	position: relative;
}

.portfolio-modal-content-images-only .swiper-slide {
	width: 100%;
	/* Let images define their own width */
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: grab;
}

.portfolio-modal-content-images-only .swiper-slide img {
	display: block;
	max-width: 100%;
	max-height: 90vh;
	/* Prevent images from being taller than the screen */
	width: auto;
	height: auto;
}

/* Style the navigation arrows */
.portfolio-modal-content-images-only .swiper-button-next,
.portfolio-modal-content-images-only .swiper-button-prev {
	color: var(--white);
	background-color: rgba(0, 0, 0, 0.3);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	transition: background-color 0.2s ease;
}

.portfolio-modal-content-images-only .swiper-button-next:hover,
.portfolio-modal-content-images-only .swiper-button-prev:hover {
	background-color: rgba(0, 0, 0, 0.5);
}

.portfolio-modal-content-images-only .swiper-button-next::after,
.portfolio-modal-content-images-only .swiper-button-prev::after {
	font-size: 1.2rem;
}

/* Style the progress bar pagination */
.portfolio-modal-content-images-only .swiper-pagination {
	bottom: 10px !important;
	top: auto !important;
	background: rgba(255, 255, 255, 0.3);
}

.portfolio-modal-content-images-only .swiper-pagination-progressbar-fill {
	background: var(--white);
}

/* Fallback text styling */
.no-images-found {
	padding: 40px;
	text-align: center;
	font-size: 1.2rem;
}

/* Fallback for single featured image */
.portfolio-modal-content-images-only>img {
	width: 100%;
	height: auto;
	max-height: 90vh;
	object-fit: contain;
}

/* Main Fancybox close button */
.fancybox__button.is-close {
	color: var(--white);
	background: rgba(0, 0, 0, 0.3);
}

/* Main Fancybox close button */
.fancybox__button.is-close {
	position: absolute;
	/* Ensure it's positioned relative to the viewport/modal */
	top: 20px;
	right: 20px;
	z-index: 20;
	/* Make sure it's on top of everything */

	/* Style the button itself */
	color: #333;
	/* Dark icon color */
	background: rgba(255, 255, 255, 0.8);
	/* Semi-transparent white background */
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.fancybox__content>.f-button.is-close-btn {
	top: 0 !important;
	--f-button-width: 32px !important;
	--f-button-height: 32px !important;
}

.fancybox__button.is-close:hover {
	background: var(--white);
	/* Solid white on hover */
	transform: scale(1.1);
}

/* Fallback text styling (if no images are found) */
.no-images-found {
	padding: 40px;
	text-align: center;
	font-size: 1.2rem;
	color: #333;
	background: var(--light-sand);
	border-radius: 8px;
}

/* Responsive adjustments for the modal */
@media (max-width: 768px) {
	.fancybox__content {
		padding: 20px !important;
	}

	.portfolio-modal-text .modal-title {
		font-size: 2rem;
	}

	.portfolio-image-slider .swiper-slide {
		max-width: 90%;
	}
}

/* --- Responsive Styles --- */
@media (max-width: 992px) {

	.ebook-landing-page .hero-section {
		padding-top: 60px;
	}

	#forminator-module-626 .forminator-row {
		width: 100%;
	}

	h1,
	.hero-content h1 {
		font-size: clamp(2.8rem, 2vw + 0.5rem, 4.8rem);
	}

	.hero-content h1 span {
		display: inline-block;
	}

	.page .entry-title,
	.single .entry-title,
	.page-title {
		font-size: 2.4rem !important;
	}

	h2 {
		font-size: 2.25rem;
	}

	.site-content .container {
		flex-direction: column;
	}

	.site-content .container.hero-container {
		flex-direction: column;
		align-items: flex-start;
	}

	section {
		padding: 60px 0;
	}

	.hero-content {
		max-width: 100%;
	}

	.hero-image-wrapper {
		width: 100%;
		flex: 1;
		text-align: center;
		margin: auto;
	}

	.intro-section .container,
	.newsletter-section .container,
	.obtine-section .section-content,
	.contine-section .section-content,
	.cadou-section .section-content {
		flex-direction: column-reverse;
	}

	.services-grid {
		grid-template-columns: 1fr;
	}

	.blog-card {
		flex-direction: column;
	}

	.services-grid .service-card:nth-child(even),
	.blog-grid .blog-card:nth-child(even),
	.portfolio-grid .portfolio-card:nth-child(2),
	.portfolio-grid .portfolio-card:nth-child(5) {
		top: 0;
	}

	.services-grid .service-card:nth-child(5) {
		max-width: 100%;
		top: 0;
	}

	.reviews-wrapper {
		flex-direction: column;
	}

	.review-card {
		max-width: 100%;
	}

	.portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.products-section .container {
		flex-direction: column-reverse;
		text-align: center;
	}

	.products-image {
		order: -1;
		margin-bottom: 30px;
	}

	.footer-main {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.footer-left {
		max-width: 100%;
	}

	.footer-socials {
		justify-content: center;
	}

	.footer-right {
		flex-direction: column;
		gap: 30px;
		width: 100%;
	}

	.reviews-wrapper {
		column-count: 2;
	}


}

@media (max-width: 768px) {

	.reviews-wrapper {
		column-count: 1;
	}

	.blog-grid,
	.portfolio-grid {
		grid-template-columns: 1fr;
	}

	.blog-card-image {
		width: 100%;
		flex-basis: auto;
		height: 200px;
	}

	.portfolio-modal-text {
		padding: 25px;
	}

	.portfolio-modal-text .modal-title {
		font-size: 2rem;
	}

	.header-container .btn {
		display: none;
	}

	.main-navigation {
		display: none;
	}

	.newsletter-image img {
		max-width: 130%;
		margin-left: -15%;
	}
}

/* Single Pages Styles */
.page .entry-title,
.single .entry-title,
.page-title {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
}

.page .entry-title {
	color: var(--primary-purple);
	text-align: center;
}

.page .wp-block-heading {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3;
}

.page p.subtitle {
	text-align: center;
	margin-bottom: 100px;
}

.archive .entry-title,
.single .entry-title {
	margin-bottom: 10px;
}

.archive .entry-meta,
.single .entry-meta {
	margin-bottom: 20px;
}

.archive .div#comments,
.single div#comments {
	margin-bottom: 80px;
}

.archive .nav-links,
.single .nav-links {
	background: var(--light-sand);
	padding: 20px;
}

.archive footer.entry-footer,
.single footer.entry-footer {
	display: flex;
	gap: 1rem;
}

.archive .entry-content img,
.single .entry-content img,
.post-thumbnail img {
	display: block;
	width: 100%;
}

.comments-title {
	font-size: 1.75rem;
}

/* Sidebar */

.widget-area {
	margin-top: 50px;
	flex: 1;
}

.widget-area .wp-block-heading {
	font-size: 100%;
}