/*!
Theme Name: xcoin
Author: Mohammad Yousif 
Author URI: https://moyousif.com/
Version: 1.0.5
Text Domain: xcoin
*/

html {
	box-sizing: border-box;
	display: block;
	scroll-behavior: smooth;
	scroll-padding-top: 160px;
}

[lang="ar"] {
	direction: rtl;
}

*,
::after,
::before {
	box-sizing: inherit;
}

/* =====================================
   Define CSS Variables
   ===================================== */
:root {
	--font-body-text: "Space Grotesk", sans-serif;
	--font-heading: "Space Grotesk", sans-serif !important;
	--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--line-height-base: 1.4;
	--font-color-base: var(--body-text-standard);
	/* Layout Variables */
	--container-width: 1320px;
	--container-max-width: min(90%, var(--container-width));
	--content-spacing: 1.5rem;
	--section-spacing: 3rem;
	--layout-wide-offset: 130px;
	/* Colors */
	--color-primary: #026666 !important;
	--color-secondary: #ffc107;
	--color-accent: #026666;
	--color-text: #282828;
	--color-heading: #002944;
	--color-link: var(--color-primary);
	--color-link-hover: var(--color-accent);
	--color-background: #fff;
	/* Figma Colors */
	--body-text-black: #000d22;
	--body-text-standard: #475467;
	--dark-blue-100: #094273;
	--dark-blue-200: #011840;
	--dark-blue-300: #000d22;
	--light-blue-300: #0088fd;
	--body-text-standard: #475467;
	--white: #ffffff;
	--offwhite: #f9f9f9;
	--steel-grey-50: #efefef;
	--steel-grey-100: #d0d5dd;
	--steel-grey-200: #b6c2d4;
	--steel-grey-300: #99a0ac;
	--yellow-400: #ffb018;
	--yellow-100: #fff5df;
	/* Typography */
	--heading-font: var(--font-heading);
	--heading-color: var(--dark-blue-300);
	--s-text-size: 13px;
	--font-size-base: 15px;
	--font-size-h1: 2.5rem;
	--font-size-h2: 2rem;
	--font-size-h3: 1.75rem;
	--font-size-h4: 1.5rem;
	--font-size-h5: 1.25rem;
	--font-size-h6: 1rem;
	/* Other Variables */
	--desktop-logo-size: 40px;
	--mobile-logo-size: 40px;
	--footer-logo-size: 40px;
	--input-placeholder-color: var(--color-text);
	--input-border-color: var(--steel-grey-100);
	--input-background-color: var(--color-background);
	--input-focus-border-color: var(--light-blue-300);
	--checkbox-radio-color: var(--color-primary);
}

/* =====================================
   Base Styles
   ===================================== */
/* Ensure light mode regardless of custom attributes */
html[native-dark-active] {
	background-color: #ffffff !important;
	/* Light background */
	color: #000000 !important;
	/* Dark text */
}

body {
	margin: 0;
	font-family: var(--font-body-text);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--font-color-base);
	background-color: var(--color-background);
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: 700 !important;
	color: var(--heading-color);
	font-family: var(--heading-font);
}

h1 {
	font-size: var(--font-size-h1);
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
}

h4 {
	font-size: var(--font-size-h4);
}

h5 {
	font-size: var(--font-size-h5);
}

h6 {
	font-size: var(--font-size-h6);
}

/* Paragraphs */

p {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 500;
}

article p {
	margin-bottom: 1.5em;
}

.p-has-icon,
.a-has-icon {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Links */
a {
	color: var(--color-primary);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
}

/* Reset styles can be added here */
/*=== Colors Classes ===*/
.color-primary {
	color: var(--color-primary);
}

.color-secondary {
	color: var(--color-secondary);
}

.color-accent {
	color: var(--color-accent);
}

.color-text {
	color: var(--color-text);
}

.color-heading {
	color: var(--color-heading);
}

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

.bg-secondary {
	background-color: var(--color-secondary);
}

.bg-accent {
	background-color: var(--color-accent);
}

.bg-text {
	background-color: var(--color-text);
}

.bg-heading {
	background-color: var(--color-heading);
}

.line-break {
	display: block;
}

img {
	max-width: 100%;
	pointer-events: none;
}

/* =====================================
   Components
   ===================================== */
.owl-carousel .animated {
	animation-duration: 0s !important;
	animation-fill-mode: both;
}

video {
	max-width: 100%;
	position: relative;
	display: block;
	pointer-events: none;
}

/*=== Column's Gap ===*/

[data-flex-col-gap="s"] {
	display: flex;
	gap: 8px;
	flex-direction: column;
	flex-wrap: wrap;
}

[data-flex-col-gap="m"] {
	display: flex;
	gap: 16px;
	flex-direction: column;
	flex-wrap: wrap;
}

[data-flex-col-gap="l"] {
	display: flex;
	gap: 32px;
	flex-direction: column;
	flex-wrap: wrap;
}

[data-flex-col-gap="20"] {
	display: flex;
	gap: 20px;
	flex-direction: column;
	flex-wrap: wrap;
}

[data-flex-col-gap="20-no-wrap"] {
	display: flex;
	gap: 20px;
	flex-direction: column;
}

[data-flex-col-gap="24"] {
	display: flex;
	gap: 24px;
	flex-direction: column;
	flex-wrap: wrap;
}

.center-rows {
	display: flex;
	align-items: center;
}

/*=== Row's Gap ===*/

[data-flex-row-gap="s"] {
	display: flex;
	gap: 8px;
	flex-direction: row;
	flex-wrap: wrap;
}

[data-flex-row-gap="m"] {
	display: flex;
	gap: 16px;
	flex-direction: row;
	flex-wrap: wrap;
}

[data-flex-row-gap="l"] {
	display: flex;
	gap: 32px;
	flex-direction: row;
	flex-wrap: wrap;
}

[data-object-fit="cover"] {
	-webkit-object-fit: cover !important;
	-moz-object-fit: cover !important;
	-o-object-fit: cover !important;
	object-fit: cover !important;
}

[data-object-fit="contain"] {
	-webkit-object-fit: contain !important;
	-moz-object-fit: contain !important;
	-o-object-fit: contain !important;
	object-fit: contain !important;
}

/*=== Visibility ===*/
/* Base visibility classes */
[data-visibility="mobile-only"],
[data-visibility="desktop-only"],
[data-visibility="desktop-only-flex"],
[data-visibility="tablet-only-flex"],
[data-visibility="tablet-only"],
[data-visibility="print-only"],
[data-visibility="landscape"],
[data-visibility="portrait"],
[data-visibility="touch"],
[data-visibility="no-touch"] {
	display: none !important;
}

/* Default display types */
[data-visibility] table {
	display: table !important;
}

[data-visibility] span {
	display: inline !important;
}


[data-visibility] flex {
	display: flex !important;
}

[data-visibility] grid {
	display: grid !important;
}

.no-border {
	border: none !important;
}

/* Mobile (< 768px) */
@media screen and (max-width: 768px) {
	[data-visibility="mobile-only"] {
		display: block !important;
	}

	[data-visibility="tablet-only"] {
		display: block !important;
	}

	[data-visibility="tablet-only-flex"] {
		display: flex !important;
	}
}

/* Tablet (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	[data-visibility="tablet-only"] {
		display: block !important;
	}

	[data-visibility="tablet-only-flex"] {
		display: flex !important;
	}
}

/* Desktop (> 1024px) */
@media screen and (min-width: 1025px) {
	[data-visibility="desktop-only"] {
		display: block !important;
	}

	.desktop-hide-break {
		display: none;
	}
}

@media screen and (min-width: 1024px) {
	[data-visibility="desktop-only-flex"] {
		display: flex !important;
	}
}

/* Print */
@media print {
	[data-visibility="print-only"] {
		display: block !important;
	}

	[data-visibility="print-only"] * {
		display: inherit !important;
	}
}

/* Orientation */
@media screen and (orientation: landscape) {
	[data-visibility="landscape"] {
		display: block !important;
	}

	[data-visibility="landscape"] * {
		display: inherit !important;
	}
}

@media screen and (orientation: portrait) {
	[data-visibility="portrait"] {
		display: block !important;
	}

	[data-visibility="portrait"] * {
		display: inherit !important;
	}
}

/* Touch capability */
@media (hover: none) and (pointer: coarse) {
	[data-visibility="touch"] {
		display: block !important;
	}

	[data-visibility="touch"] * {
		display: inherit !important;
	}
}

@media (hover: hover) and (pointer: fine) {
	[data-visibility="no-touch"] {
		display: block !important;
	}

	[data-visibility="no-touch"] * {
		display: inherit !important;
	}
}

/* Input Styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="color"],
input[type="file"],
select,
.select2,
.select2.select2-container,
.phone-input-container,
textarea,
.xcoin-dropdown-selected,
.xcoin-dropdown-option,
.btcd-fld-itm textarea {
	padding: 10px;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base) !important;
	line-height: var(--line-height-base) !important;
	color: var(--font-color-base) !important;
	border: 1px solid var(--input-border-color);
	background-color: var(--input-background-color);
	/* border-radius: 100px !important; */
	padding: 14px 12px;
	outline: 0px solid transparent !important;
	transition: all 0.12s cubic-bezier(0.355, 0.03, 0.415, 0.85);
}

textarea {
	padding: 12px !important;
	resize: vertical !important;
}

/* Focus and Hover Styles */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="color"]:focus,
input[type="file"]:focus,
textarea:focus,
.phone-input-container.focus,
.btcd-fld-itm textarea:focus,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
input[type="month"]:hover,
input[type="week"]:hover,
input[type="color"]:hover,
input[type="file"]:hover,
textarea:hover,
.phone-input-container.hover,
.btcd-fld-itm textarea:hover {
	outline: 0px solid var(--input-focus-border-color);
	border-color: var(--input-focus-border-color);
	box-shadow: 0 0 0 0px var(--input-focus-border-color);
}

/* Checkbox and Radio Styles */

input[type="checkbox"],
input[type="radio"] {
	/* appearance: none;
  -webkit-appearance: none; */
	background-color: transparent;
	border: 1px solid var(--checkbox-radio-color);
	border-radius: 4px;
	width: 16px;
	height: 16px;
	cursor: pointer;
	margin: 0;
}

input::placeholder {
	color: var(--steel-grey-300, #99a0ac) !important;
	opacity: 1;
}

input::-webkit-input-placeholder {
	color: var(--steel-grey-300, #99a0ac) !important;
}

input::-moz-placeholder {
	color: var(--steel-grey-300, #99a0ac) !important;
}

input:-ms-input-placeholder {
	color: var(--steel-grey-300, #99a0ac) !important;
}

input::-ms-input-placeholder {
	color: var(--steel-grey-300, #99a0ac) !important;
}

/* =====================================
   Layout Elements
   ===================================== */
.wpcf7-response-output {
	font-size: 12px !important;
	padding: 5px 10px !important;
	text-align: center !important;
}

.xcoin-container {
	position: relative;
	margin: auto;
	overflow: hidden;
	max-width: var(--container-max-width);
}

.xcoin-container-overflow {
	position: relative;
	margin: auto;
	overflow: unset;
	max-width: var(--container-max-width);
	width: 100%;
}

[data-col-gap="5"] {
	gap: 5px;
}

[data-col-gap="8"] {
	gap: 8px;
}

[data-col-gap="10"] {
	gap: 10px;
}

[data-col-gap="16"] {
	gap: 16px;
}

[data-col-gap="20"] {
	gap: 20px;
}

[data-col-gap="30"] {
	gap: 30px;
}

[data-col-gap="100"] {
	row-gap: 32px;
	column-gap: 100px;
}

[data-grid="1-2"] {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
}

[data-grid="2-1"] {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
}

[data-grid="2"] {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

[data-grid="3"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

[data-grid="3-2"] {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
}

[data-grid="4"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

[data-grid="4-2"] {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
}

[data-grid="5"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

[data-grid="6"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

/*=*/

[data-grid-auto="2"] {
	display: grid;
	grid-template-columns: auto auto;
}

[data-grid-auto="3"] {
	display: grid;
	grid-template-columns: auto auto auto;
}

[data-grid-auto="4"] {
	display: grid;
	grid-template-columns: auto auto auto auto;
}

[data-grid-auto="5"] {
	display: grid;
	grid-template-columns: auto auto auto auto auto;
}

[data-grid-auto="6"] {
	display: grid;
	grid-template-columns: auto auto auto auto auto auto;
}

[data-column="start"] {
	-ms-flex-pack: flex-start;
	justify-content: flex-start;
	display: flex;
	text-align: left;
	align-items: center;
	float: left;
}

[data-column="start"]>[data-items="item"] {
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: flex-start;
	/* -ms-flex-pack: justify;
  -moz-box-pack: justify; */
	justify-content: flex-start;
	align-items: center;
	margin-right: 15px;
	flex-direction: row;
	align-items: center;
}

[data-column="center"] {
	-ms-flex-pack: center;
	justify-content: center;
	display: flex;
	align-items: center;
	margin: auto;
}

[data-column="center"]>[data-items="item"] {
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: center;
	-ms-flex-pack: justify;
	-moz-box-pack: justify;
	justify-content: center;
	align-items: center;
}

[data-column="end"] {
	-ms-flex-pack: flex-end;
	justify-content: flex-end;
	display: flex;
	align-items: center;
}

[data-column="end"]>[data-items="item"] {
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: flex-end;
	-ms-flex-pack: justify;
	-moz-box-pack: justify;
	justify-content: flex-end;
	align-items: center;
}

[data-text="center"] {
	text-align: center
}

/*==== Spacing ====*/
[data-spacing="top"] {
	padding-top: 100px;
}

[data-spacing="bottom"] {
	padding-bottom: 100px;
}

[data-spacing="top-bottom"] {
	padding-top: 100px;
	padding-bottom: 100px;
}

@media screen and (max-width: 768px) {
	.xcoin-container-overflow {
		overflow: hidden;
	}

	[data-spacing="top"] {
		padding-top: 50px;
	}

	[data-spacing="bottom"] {
		padding-bottom: 60px;
	}

	[data-spacing="top-bottom"] {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	[data-m-column-reverse="true"] {
		flex-direction: column-reverse !important;
	}

	.buttons-wrapper-center {
		justify-content: flex-start;
	}
}

/* =====================================
   Buttons
   ===================================== */

/* Button Styles */

button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button,
.btcd-fld-itm button {
	font-family: var(--font-body-text) !important;
	font-size: 16px;
	padding: 0px !important;
	border: none !important;
	border-radius: 100px !important;
	cursor: pointer;
	transition: background-color 0.3s ease;
	font-weight: 550 !important;
	box-shadow: none;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	width: fit-content;
	line-height: 1;
	letter-spacing: 0.3px !important;
}

@media screen and (max-width:768px) {

	button,
	.button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"],
	.btcd-fld-itm button {}

}

[data-btn-type="wide"] {
	min-width: 172px;
}

.br-mobile {
	display: none;
}

/* Button Variants */

.button-primary {
	background-color: var(--color-primary);
	color: #fff !important;
}

.button-primary:hover,
.button-primary:focus {
	color: #fff !important;
	background-color: var(--color-link-hover);
}

.button-primary-icon {
	border-radius: 50px;
}

.button-primary-icon span {
	background-color: #026666;
	color: #fff !important;
	padding: 16px 24px !important;
	border-radius: 50px;
	min-width: 48px;
	font-weight: 700;
	font-size: 16px;
	transition: background-color 0.3s ease;
}

.button-primary-icon span:nth-child(2) {
	padding: 16px 16px !important;
}

.button-primary-icon:hover span {
	background-color: #004545;
}

a.button.button-primary-icon.box-section:hover span {
	color: #fff !important;
	background-color: #3EAD70;
	transition: background-color 0.3s ease;

}

.button-primary-two {
	background-color: var(--color-secondary, #ffc118);
	color: var(--dark-blue-200, #011840) !important;
}

.button-primary-two:hover,
.button-primary-two:focus {
	color: var(--dark-blue-200, #011840) !important;
	background-color: #ffb018;
}

.primary-link {
	color: var(--color-primary);
	color: #427493;
	font-family: var(--font-body-text);
	font-size: 14px;
	font-style: normal;
	font-weight: 550;
	line-height: 150%;
	/* 21px */
	text-transform: capitalize;
}

.primary-link:hover,
.primary-link:focus {
	color: var(--color-link-hover);
}

.button-secondary {
	color: var(--dark-blue-200, #011840) !important;
	display: flex;
	border: 1px solid #d0d5dd !important;
	background: #fff;
}

.button-secondary:hover,
.button-secondary:focus {
	color: var(--dark-blue-200, #011840) !important;
	background-color: #e5e5e5;
}

.button-secondary-two {
	color: #fff !important;
	border-radius: 5px;
	color: #161616 !important;
	background: #89D4AB;
	border-radius: 100px;
	padding: 16px 24px !important;
}

.button-secondary-two:hover,
.button-secondary-two:focus {
	color: #FFF !important;
	background: #3EAD70;
}

.button-accent {
	background-color: var(--color-accent);
	color: #fff;
}

.button-accent:hover,
.button-accent:focus {
	background-color: var(--color-accent-dark);
}

.buttons-wrapper {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
}

.buttons-wrapper-center {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.buttons-wrapper i {
	color: #9ea7b0;
	font-family: Montserrat;
	font-size: 12px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.6px;
	text-transform: capitalize;
}

[data-button-size="s"] {
	min-height: 38px;
	font-size: 12px !important;
	padding: 12px 16px !important;
}

a.has-icon {
	gap: 8px;
}

.section-link-text {
	color: #0E0F0B;
	text-align: center;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 14px;
}

a.has-icon svg {
	max-width: 17px;
	max-height: 15px;
	color: currentColor !important;
}

/* Hyperlink */
.hyperlink {
	color: inherit !important;
}

.hyperlink:hover {
	text-decoration: underline;
}

.site-header {
	padding: 24px 0px;
	position: sticky;
	width: 100%;
	top: 0px;
	z-index: 10;
	background: #EAFBF2;
}

.header-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

section.header-section {
	border-radius: 0 0 80px 80px;
	background: #EAFBF2;
	padding-top: 150px;
}

.hero-img {
	max-width: 976.002px;
	margin-inline: auto;
	margin-bottom: -180px;
	margin-top: 100px;
}

h1.header-title {
	color: #161616;
	text-align: center;
	font-size: 72px;
	font-style: normal;
	font-weight: 550;
	line-height: 110%;
	/* 79.2px */
	letter-spacing: -1.4px;
}

p.header-text {
	color: #161616;
	text-align: center;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	/* 30px */
}

.status-wrapper {
	display: flex;
	align-items: center;
	gap: 16px;
	justify-content: flex-start;
}

.status-wrapper p {
	color: #161616;
	font-family: "Space Grotesk";
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
}

.status-wrapper svg {
	display: flex;
	width: 45px;
	height: 45px;
	min-width: 30px;
	min-height: 30px;
	padding: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

section.status-section {
	padding: 24px 0px;
}


.xcoin-carousel {
	display: flex;
	gap: 100px;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	margin: 100px 0;
}


/* Main hero list container */
.hero-list-container {
	width: 100%;
	height: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 36px;
}

/* Individual list item */
.hero-list-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

/* Icon wrapper */
.hero-list-icon-wrapper {
	padding: 4.17px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8.33px;
}

/* Icon container */
.hero-list-icon-container {
	width: 18.67px;
	height: 18.67px;
	position: relative;
	overflow: hidden;
}

/* Icon */
.hero-list-icon {
	width: 16.67px;
	height: 16.67px;
	left: 0px;
	top: 0px;
	position: absolute;
	background: #018B79;
	border-radius: 50%;
}

/* List item text */
.hero-list-text {
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: #161616;
	font-size: 16px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	line-height: 21px;
	word-wrap: break-word;
	margin-left: 0;
}


.icons-container {
	display: flex;
	gap: 80px;
	align-items: center;
	position: absolute;
	width: 100%;
}

.floating-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40px;
	color: white;
	transition: transform 0.3s ease;
}

.floating-icon:hover {
	transform: scale(1.1);
}

.icon-1 {
	animation: float1 3s ease-in-out infinite;
	margin-bottom: -300px;
}

.icon-2 {
	animation: float2 3s ease-in-out infinite 0.5s;
}

.icon-3 {
	animation: float3 3s ease-in-out infinite 1s;
	right: 10px;
	position: absolute;
	bottom: -140px;
}

@keyframes float1 {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-20px);
	}
}

@keyframes float2 {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-15px);
	}
}

@keyframes float3 {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-25px);
	}
}

/* Alternative subtle floating effect */
.gentle-float {
	animation: gentleFloat 4s ease-in-out infinite;
}

@keyframes gentleFloat {

	0%,
	100% {
		transform: translateY(0px) rotate(0deg);
	}

	25% {
		transform: translateY(-10px) rotate(1deg);
	}

	50% {
		transform: translateY(-5px) rotate(0deg);
	}

	75% {
		transform: translateY(-15px) rotate(-1deg);
	}
}

.swiper-pagination {
	text-align: left !important;
}

.carousel-image-wrapper {
	max-width: 400px;
}

/* Responsive Design */
@media (max-width: 1024px) {
	.slide-content {
		gap: 40px;
	}

	.slide-title {
		font-size: 2.5rem;
	}
}

@media (max-width: 768px) {
	.xcoin-carousel {
		margin: 0px;
	}


	.xcoin-slider__image {
		display: none !important;
	}

	.slide-content {
		grid-template-columns: 1fr;
		gap: 30px;
		text-align: center;
	}

	.slide-title {
		font-size: 2.2rem;
		margin-bottom: 20px;
	}

	.slide-description {
		margin-bottom: 30px;
	}

	.swiper-pagination {
		text-align: center !important;
	}

	.swiper-button-next,
	.swiper-button-prev {
		display: none;
	}
}

@media (max-width: 480px) {
	.slide-title {
		font-size: 1.8rem;
	}

	.slide-description {
		font-size: 1rem;
	}

}

.swiper-slide {
	flex-shrink: 0;
	width: 100% !important;
}


.stats-container {
	display: flex;
	gap: 60px;
	width: 100%;
	justify-content: space-between;
	flex-wrap: wrap;
}

.stat-number {
	color: #0E0F0B;
	font-family: "Space Grotesk";
	font-size: 52px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: -1.04px;
}

.stat-label {
	color: #161616;
	font-family: "Space Grotesk";
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	line-height: 21px;
	/* 140% */
}

/* Responsive design */
/* @media (max-width: 768px) {
	.stats-container {
		flex-direction: column;
		gap: 40px;
		align-items: center;
	}

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

	.stat-number {
		font-size: 3rem;
	}
}

@media (max-width: 480px) {
	.stat-number {
		font-size: 2.5rem;
	}

	.stats-container {
		gap: 30px;
	}
} */


.main-title {
	color: #0E0F0B;
	font-family: "Space Grotesk";
	font-size: 48px;
	font-style: normal;
	font-weight: 700;
	line-height: 50.4px;
	margin-bottom: 24px;
	letter-spacing: -0.84px;
}

.subtitle {
	color: #161616;
	font-family: "Space Grotesk";
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	/* 27px */
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 27px;
	margin-top: 40px;
	margin-bottom: 40px;
	text-align: left;
}

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

.checkmark {
	width: 24px;
	height: 24px;

}

.feature-text {
	color: #0E0F0B;
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	line-height: 21px;
}

section.fast-safe-section {
	border-radius: 80px;
	background: #F6F6F6;
	background: url(/wp-content/themes/xcoin/inc/assets/img/man-bg.png);
	background-repeat: no-repeat;
	background-size: 1400px;
	background-position: bottom left;
	background-color: #f8f8f8;
}

.fast-safe-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 2rem;
	position: relative;
}

.fast-safe-image {
	max-width: 500px;
}

.fast-safe-image img {
	position: absolute;
	left: 0;
	max-width: 485px;
	bottom: 0;
}

.fast-safe-content {
	padding: 100px 0px;
}

.fast-safe-section .xcoin-container {
	overflow: unset !important;
}

h1.section-title {
	color: #161616;
	text-align: center;
	font-size: 48px;
	font-style: normal;
	font-weight: 550;
	line-height: 110%;
	letter-spacing: -1.4px;
	margin-bottom: 100px;
}

.how-its-work-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
}

.how-its-work-card {
	display: flex;
	padding: 36px;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	flex: 1 0 0;
	align-self: stretch;
	background: #eee;
	border-radius: 30px;
	background: #9DDFC8;
	height: 400px;
}

.how-its-work-card h2 {
	color: #161616;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 110%;
	margin-bottom: 24px;
}

.how-its-work-card p {
	color: #161616;
	font-family: "Space Grotesk";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
}


.card-1 {
	border-radius: 30px;
	background: #F6F6F6;
	background: url(/wp-content/themes/xcoin/inc/assets/img/card-1.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
	background-color: #f8f8f8;
}

.card-2 {
	border-radius: 30px;
	background: #F6F6F6;
	background: url(/wp-content/themes/xcoin/inc/assets/img/card-2.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
	background-color: #f8f8f8;
}

.card-3 {
	border-radius: 30px;
	background: #F6F6F6;
	background: url(/wp-content/themes/xcoin/inc/assets/img/card-3.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
	background-color: #f8f8f8;
}

.card-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.card-3 .card-content h2,
.card-3 .card-content p,
.card-2 .card-content h2,
.card-2 .card-content p {
	color: #ffffff;
}






.carousel-content-wrapper {
	max-width: 663px;
}










.traders-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 100px;
	align-items: center;
	max-width: 1200px;
	margin: auto;
}


/* Content wrapper */
.content-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
	border-radius: 30px;
	background: #026666;
	padding: 100px 20px;
}

/* Text section */
.text-section {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 32px;
}

/* Main heading */
.main-heading {
	text-align: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: white;
	font-size: 64px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	line-height: 70.4px;
	word-wrap: break-word;
}

/* Sub heading */
.sub-heading {
	text-align: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: white;
	font-size: 20px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	line-height: 30px;
	word-wrap: break-word;
}

/* Call to action text */
.call-to-action {
	text-align: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: white;
	font-size: 20px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	line-height: 30px;
	word-wrap: break-word;
}

/* Button container */
.button-container {
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
}

/* Voucher button */
.voucher-button {
	padding: 16px 24px;
	background: #89D4AB;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.button-text {
	text-align: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: #161616;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	font-weight: 550;
	line-height: 14px;
	word-wrap: break-word;
}

/* Arrow button */
.arrow-button {
	width: 47.5px;
	height: 46px;
	padding: 16px;
	background: #89D4AB;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.arrow-icon {
	width: 9.6px;
	height: 8px;
	background: #161616;
}



/* Main footer container */
.xcoin-footer-container {
	width: 100%;
	height: 100%;
	padding: 100px 0px;
	background: #F6F6F6;
	border-top-left-radius: 80px;
	border-top-right-radius: 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
	margin-top: 100px;
}

/* Logo and icons */
.xcoin-footer-logo {
	width: 61.33px;
	height: 24px;
}

.xcoin-footer-icon-1 {
	width: 4.82px;
	height: 7.72px;
	background: #BABABA;
}

.xcoin-footer-icon-2 {
	width: 21.88px;
	height: 24px;
	background: #BABABA;
}

.xcoin-footer-icon-3 {
	width: 16.56px;
	height: 16.20px;
	background: #BABABA;
}

.xcoin-footer-icon-4 {
	width: 4.23px;
	height: 15.52px;
	background: #BABABA;
}

.xcoin-footer-icon-5 {
	width: 14.61px;
	height: 15.84px;
	background: #BABABA;
}

/* Compliance text */
.xcoin-footer-compliance-text {
	align-self: stretch;
	text-align: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: black;
	font-size: 14px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 400;
	line-height: 22.5px;
	word-wrap: break-word;
	max-width: var(--container-max-width);
	margin: auto;
}

/* Company information */
.xcoin-footer-company-info {
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: #161616;
	font-size: 14px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 400;
	line-height: 22.5px;
	word-wrap: break-word;
}

/* Links container */
.xcoin-footer-links-container {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
}

.xcoin-footer-terms-link,
.xcoin-footer-privacy-link {
	text-align: center;
	color: #161616;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	line-height: 18px;
	word-wrap: break-word;
	cursor: pointer;
	transition: color 0.3s ease;
}

.xcoin-footer-terms-link a,
.xcoin-footer-privacy-link a {
	color: #161616;
	font-size: 18px;
}

.xcoin-footer-terms-link:hover,
.xcoin-footer-privacy-link:hover {
	color: #026666;
}

a.button.button-primary-icon.box-section span {
	background: #89D4AB;
	color: #161616 !important;
}

/* Divider */
.xcoin-footer-divider {
	width: 2px;
	height: 17px;
	align-self: stretch;
	background: #DADADA;
}

@media (max-width: 480px) {
	.xcoin-footer-container {
		padding: 50px 20px;
		gap: 24px;
		align-items: flex-start;
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
		margin-top: 50px;
	}

	.xcoin-footer-links-container {
		gap: 12px;
	}

	.xcoin-footer-compliance-text,
	.xcoin-footer-company-info {
		color: #000;
		font-family: "Space Grotesk";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 22.5px;
		text-align: left;
		padding: 0px;
		margin: 0px;
	}
}


/* Main copyright container */
.xcoin-copyright-container {
	width: 100%;
	height: 100%;
	padding: 20px 300px;
	background: black;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
}

/* Copyright text */
.xcoin-copyright-text {
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: white;
	font-size: 14px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 400;
	line-height: 22.5px;
	word-wrap: break-word;
	text-align: center;
}

/* .xcoin-slider {
	margin: 0 auto;
	background: white;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	position: relative;
} */

.xcoin-slider__slide {
	display: flex;
	align-items: center;
	padding: 0px;
	gap: 130px;
	position: relative;
	padding: 1px;
	min-height: 400px;
	justify-content: space-between;
}

.xcoin-slider__content {
	flex: 1;
	max-width: 650px;
}

.xcoin-slider__title {
	color: #161616;
	font-family: "Space Grotesk";
	font-size: 48px;
	font-style: normal;
	font-weight: 700;
	line-height: 110%;
	margin-bottom: 24px;
	letter-spacing: -1.4px;
}

.xcoin-slider__description {
	color: #161616;
	font-family: "Space Grotesk";
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	min-height: 140px;
	background: #ffffff;
}

span.swiper-pagination-bullet {
	background: #D9D9D9;
	opacity: 1;
	border-radius: 40px;
	height: 10px;
	width: 10px;
	transition: width 0.3s ease;
}

span.swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: #018B79 !important;
	width: 30px;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
	width: unset !important
}

.xcoin-slider__dots {
	display: flex;
	justify-content: flex-start;
	padding: 0;
	gap: 10px;
	margin-top: 30px;
}

.xcoin-slider__dot {
	width: 10px;
	height: 10px;
	border-radius: 40px;
	background: #D9D9D9;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.xcoin-slider__dot--active {
	background: #018B79;
	width: 30px;
}

.xcoin-slider__dot:hover {
	background: #018B79;
}

.xcoin-slider__image {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	max-width: 408px;
}

.xcoin-slider__phone {
	width: 280px;
	height: 320px;
	background: linear-gradient(135deg, #4CAF50, #81C784);
	border-radius: 30px;
	position: relative;
	box-shadow: 0 20px 40px rgba(76, 175, 80, 0.3);
}

.xcoin-slider__phone::before {
	content: '';
	position: absolute;
	top: 15px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 4px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 2px;
}

.xcoin-slider__app-content {
	padding: 40px 30px;
	color: white;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.xcoin-slider__diamond {
	width: 40px;
	height: 40px;
	background: white;
	border-radius: 8px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.xcoin-slider__diamond::after {
	content: '♦';
	color: #4CAF50;
	font-size: 20px;
}

.xcoin-slider__coin-text {
	background: rgba(255, 255, 255, 0.2);
	padding: 12px 24px;
	border-radius: 25px;
	margin-bottom: 30px;
	font-weight: 600;
}

.xcoin-slider__voucher-card {
	background: white;
	border-radius: 15px;
	padding: 20px;
	width: 180px;
	text-align: center;
	color: #333;
	margin-top: auto;
}

.xcoin-slider__like-icon {
	width: 40px;
	height: 40px;
	background: #4CAF50;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 15px;
	color: white;
}

.xcoin-slider__amount {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 5px;
}

.xcoin-slider__status {
	font-size: 12px;
	color: #666;
}

.xcoin-slider__woman {
	position: absolute;
	right: -50px;
	bottom: 0;
	width: 200px;
	height: 280px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 280"><rect fill="%23f0c2a0" x="75" y="20" width="50" height="60" rx="25"/><rect fill="%23d4a574" x="60" y="40" width="80" height="60" rx="20"/><rect fill="%23ff9999" x="50" y="100" width="100" height="80" rx="15"/><rect fill="%236b4e3d" x="70" y="180" width="60" height="100" rx="10"/></svg>') no-repeat center;
	background-size: contain;
}

/* Hide default Owl Carousel dots */
.owl-dots {
	display: none !important;
}

/* Hide default Owl Carousel navigation arrows */
.owl-nav {
	display: none !important;
}

.percentage {
	font-size: 24px;
}

@media (max-width: 768px) {
	.xcoin-slider__slide {
		flex-direction: column;
		padding: 0px;
		gap: 0px;
		min-height: 240px;
	}

	section.carousel-section {
		margin: 50px 0px;
	}

	.xcoin-slider__title {
		font-size: 32px;
	}

	.xcoin-slider__phone {
		width: 240px;
		height: 280px;
		margin-top: 30px;
	}

	.xcoin-slider__description {
		color: #161616;
		font-family: "Space Grotesk";
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
		line-height: 140%;
		min-height: 170px;
	}
}

/*===================== Responsive ====================*/

@media (max-width: 768px) {
	.header-cta {
		display: none;
	}

	h1.header-title {
		font-size: 40px;
		text-align: left;
	}

	p.header-text {
		font-size: 18px;
		text-align: left;
	}

	.header-content {
		gap: 24px;
		align-items: flex-start
	}

	.hero-list-container {
		width: 100%;
		height: 100%;
		display: inline-flex;
		justify-content: center;
		align-items: flex-start;
		gap: 8px;
		flex-direction: column;
	}

	.fast-safe-image {
		max-width: 500px;
		display: none;
	}

	.stats-container {
		display: grid;
		gap: 32px;
		grid-template-columns: 1fr 1fr;
	}

	.status-wrapper p {
		font-size: 16px;
	}

	.stat-number {
		font-size: 40px;
	}

	section.header-section {
		padding-top: 50px;
		padding-bottom: 50px;
		border-radius: 0 0 30px 30px;
	}

	.fast-safe-wrapper {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0px;
	}

	.fast-safe-content {
		padding: 50px 0px;
	}

	h1.main-title {
		color: #0E0F0B;
		font-family: "Space Grotesk";
		font-size: 32px;
		font-style: normal;
		font-weight: 700;
		line-height: 110%;
		letter-spacing: -0.84px;
	}

	p.subtitle {
		color: #161616;
		font-family: "Space Grotesk";
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 150%;
	}

	.feature-text br {
		display: none;
	}

	section.fast-safe-section {
		border-radius: 30px;
		background: #F6F6F6 !important;
		padding: 0 10px;
	}

	h1.section-title {
		font-size: 32px;
		margin-bottom: 40px;
		text-align: left;
		max-inline-size: 320px;
	}

	.how-its-work-container {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.traders-content {
		display: grid;
		grid-template-columns: 1fr;
		gap: 50px;
	}

	.main-heading {
		font-size: 40px;
		text-align: left;
		line-height: 1.2 !important;
	}

	.main-heading br {
		display: none;
		line-height: 1 !important;
	}

	.sub-heading,
	.call-to-action {
		color: #FFF;
		font-family: "Space Grotesk";
		font-size: 20px;
		font-style: normal;
		font-weight: 500;
		line-height: 150%;
		letter-spacing: -0.84px;
		text-align: left;
	}

	.content-wrapper {
		padding: 40px 30px;
		align-items: flex-start;
	}

	.xcoin-footer-terms-link a,
	.xcoin-footer-privacy-link a {
		color: #161616;
		font-size: 16px;
	}

	.xcoin-copyright-text {
		line-height: 18px;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		text-align: left;
	}

	.xcoin-copyright-container {
		padding: 20px 20px;
	}

	.icons-container,
	.hero-img {
		display: none !important;
	}

	.br-mobile {
		display: block;
	}

	.features-grid {
		gap: 8px;
	}

	.how-its-work-card h2 {
		margin-bottom: 0px !important;
	}

	.card-content {
		gap: 16px;
	}
	.contact-hero-text h1 {
		font-size: 40px !important;
	}
}


/*===================== Contact ====================*/

.contact-hero-section {
	padding: 100px 0px;
	border-radius: 0 0 80px 80px;
	background: #EAFBF2;
}


.contact-hero-wrapper {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 48px;
	max-width: 1000px;
	margin: auto;
	align-items: center;
}


.contact-hero-text h1 {
	color: #161616;
	font-family: "Space Grotesk";
	font-size: 48px;
	font-style: normal;
	font-weight: 700;
	line-height: 110%;
	/* 52.8px */
	letter-spacing: -1.4px;
	margin-bottom: 32px;
}

.contact-hero-text p {
	color: #161616;
	font-family: "Space Grotesk";
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
}

.stats-section-contact {
	margin: 50px 0px;
}






























.slider-container {
	width: 100%;
	max-width: 800px;
	background: white;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	position: relative;
}

.slider-wrapper {
	position: relative;
	height: 200px;
	overflow: hidden;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: translateX(100%);
	transition: all 0.5s ease;
	padding: 40px 50px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background: white;
}

.slide.active {
	opacity: 1;
	transform: translateX(0);
}

.slide.prev {
	transform: translateX(-100%);
}

.slide-content {
	max-width: 100%;
	text-align: left;
}

.slide p {
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	font-weight: 400;
	margin: 0;
}

.dots-container {
	padding: 20px 50px;
	display: flex;
	gap: 12px;
	background: white;
}

.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #e0e0e0;
	cursor: pointer;
	position: relative;
	transition: all 0.3s ease;
	border: none;
}

.dot.active {
	background: #00c896;
}

.dot:not(.active) {
	background: #e0e0e0;
}

/* Timer circle inside the dot */
.dot-timer {
	position: absolute;
	top: -2px;
	left: -2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid transparent;
	opacity: 0;
	transform: rotate(-90deg);
}

.dot.active .dot-timer {
	opacity: 1;
	border-color: #00c896;
	animation: timer-fill 5s linear;
}

@keyframes timer-fill {
	from {
		background: conic-gradient(#00c896 0deg, transparent 0deg);
	}

	to {
		background: conic-gradient(#00c896 360deg, transparent 360deg);
	}
}

/* Alternative timer approach using stroke-dasharray */
.dot-timer-svg {
	position: absolute;
	top: -3px;
	left: -3px;
	width: 18px;
	height: 18px;
	transform: rotate(-90deg);
	opacity: 0;
}

.dot.active .dot-timer-svg {
	opacity: 1;
}

.timer-circle {
	fill: none;
	stroke: #00c896;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 50.27;
	/* 2 * π * 8 */
	stroke-dashoffset: 50.27;
	animation: timer-progress 5s linear;
}

@keyframes timer-progress {
	from {
		stroke-dashoffset: 50.27;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@media (max-width: 768px) {
	.slide {
		padding: 30px 30px;
	}

	.dots-container {
		padding: 20px 30px;
	}

	.slide p {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.slide {
		padding: 25px 20px;
	}

	.dots-container {
		padding: 15px 20px;
	}
}





.creative-btn {
	margin-top: 20px;
	display: inline-flex;
	transition: opacity 0.5s ease, filter 0.5s ease;
	animation: fadeInUp 1s ease forwards;
	opacity: 0;
	filter: blur(4px);
	animation-delay: 0.7s;
}

.creative-btn,
.creative-btn.btn-fill {
	margin: 0 10px;
	padding: 11px 32px 10px;
	font-size: 13px;
	letter-spacing: 0.085em;
	color: #010101;
	border: 1px solid #010101;
	background: transparent;
	border-radius: 4px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
}

.creative-btn.btn-fill {
	background-color: #010101;
	color: #fff;
}

.creative-btn,
.creative-btn.btn-fill {
	margin: 0 10px;
	padding: 11px 32px 10px;
	font-size: 13px;
	letter-spacing: 0.085em;
	color: #010101;
	border: 1px solid #010101;
	background: transparent;
	border-radius: 4px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
}

.creative-btn.btn-fill {
	background-color: #010101;
	color: #fff;
}

.creative-btn .btn-animate-y {
	position: relative;
	display: block;
	overflow: hidden;
}

.creative-btn .btn-animate-y-1 {
	display: block;
	transition: all .37s cubic-bezier(.15, .7, .78, 1), opacity .37s linear;
}

.creative-btn .btn-animate-y-2 {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transform: translate(0, 100%);
	transition: all .37s cubic-bezier(.15, .7, .78, 1), opacity .37s linear;
}

.creative-btn:hover .btn-animate-y-1 {
	opacity: 0;
	transform: translate(0, -100%);
}

.creative-btn:hover .btn-animate-y-2 {
	opacity: 1;
	transform: translate(0, 0);
}





@media (max-width: 768px) {

	.contact-hero-wrapper {
		display: grid;
		grid-template-columns: 1fr;
		gap: 50px;
	}

	section.contact-hero-section {
		border-radius: 0 0 30px 30px;
		background: #EAFBF2;
		padding: 50px 0px;
	}

	.privacy-notice p {
		text-align: left !important;
		margin-left: 5px !important;
	}

	.contact-form-container {
		max-width: 100% !important;
	}
}
/* =====================================
   Voucher Modal Styles (API Version)
   ===================================== */

/* O fundo escurecido (overlay) do modal */
.voucher-modal-overlay {
    display: none; /* Escondido por padrão */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* A caixa de conteúdo do modal */
.voucher-modal-content {
    position: relative;
    background-color: #ffffff;
    width: 100%;
    max-width: 480px; /* Largura ideal para formulários */
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    overflow: hidden;
}

#voucher-modal-body {
    padding: 25px 30px;
	width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

/* O botão de fechar (X) */
.voucher-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    font-weight: bold;
    color: #555;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
    padding: 5px;
}

.voucher-modal-close:hover {
    color: #000;
}

/* Estilos do Formulário */
.voucher-form-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: center;
}

.voucher-form-logo {
    max-width: 120px;
    margin: 0 auto 10px;
}

.form-field {
    text-align: left;
}

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

.form-field input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box; /* Garante que padding não afete a largura */
}

.voucher-submit-button {
    width: 100%;
    padding: 14px !important;
    font-size: 16px;
    font-weight: bold !important;
    color: #fff;
    background-color: #026666 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: background-color 0.3s;
}

.voucher-submit-button:hover {
    background-color: #004545 !important; /* Cor primária mais escura */
}

.voucher-submit-button:disabled {
    background-color: #999;
    cursor: not-allowed;
}

/* Estilos das Mensagens */
.voucher-message {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
}

.voucher-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Estilos da Tela de Sucesso */
.voucher-success-container {
    text-align: center;
    padding: 20px;
}

.voucher-success-container h3 {
    font-size: 22px;
    color: #155724;
    margin-bottom: 15px;
}

.voucher-success-container p {
    margin: 10px 0;
}

.voucher-code-display {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    background-color: #f0f0f0;
    padding: 10px 15px;
    border-radius: 8px;
    display: inline-block;
    margin: 10px 0;
}

.voucher-payment-link {
    display: inline-block;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #89D4AB; /* Cor secundária do tema */
    border-radius: 8px;
    text-decoration: none;
    margin-top: 15px;
    transition: background-color 0.3s;
}

.voucher-payment-link:hover {
    background-color: #3EAD70;
}

.voucher-email-notice {
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}


/* Responsividade */
@media (max-width: 768px) {
    .voucher-modal-content {
        width: 95%;
    }
    #voucher-modal-body {
       padding: 20px;
    }
}

/* =====================================
   Código do Modal de Voucher - Fim
   ===================================== */