/**

* Contact Page
*
* @package A2Z_Woo_Solutions
  */

/* =========================================================
BASE
========================================================= */

.contact-page {
position: relative;
overflow: hidden;
background: var(--bp-background);
color: var(--bp-text);
}

.contact-page *,
.contact-page *::before,
.contact-page *::after {
box-sizing: border-box;
}

.contact-page .container {
width: min(1180px, calc(100% - 40px));
margin: 0 auto;
}

.contact-page .section-space {
padding: 120px 0;
}

/* =========================================================
COMMON ELEMENTS
========================================================= */

.contact-section-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
color: var(--bp-blue);
font-size: 12px;
font-weight: 800;
letter-spacing: 1.5px;
}

.contact-section-eyebrow::before {
width: 26px;
height: 2px;
background: var(--bp-pink);
content: "";
}

.contact-section-eyebrow--light {
color: rgba(255, 255, 255, 0.8);
}

.contact-section-heading {
max-width: 700px;
margin-bottom: 60px;
}

.contact-section-heading--center {
margin-right: auto;
margin-left: auto;
text-align: center;
}

.contact-section-heading--center .contact-section-eyebrow {
justify-content: center;
}

.contact-section-heading h2,
.contact-form-content h2,
.contact-support h2 {
margin: 0 0 20px;
font-size: clamp(38px, 5vw, 60px);
line-height: 1.08;
letter-spacing: -2px;
}

.contact-section-heading h2 span,
.contact-form-content h2 span,
.contact-support h2 span {
color: var(--bp-blue);
}

.contact-section-heading p {
margin: 0;
color: var(--bp-text-muted);
font-size: 17px;
line-height: 1.8;
}

/* =========================================================
BUTTONS
========================================================= */

.contact-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 54px;
padding: 0 24px;
border: 0;
border-radius: 14px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}

.contact-button:hover {
transform: translateY(-3px);
}

.contact-button--primary {
background: var(--bp-blue);
color: var(--bp-white);
box-shadow: var(--bp-shadow);
}

.contact-button--primary:hover {
background: var(--bp-blue-light);
box-shadow: var(--bp-shadow-hover);
}

.contact-button--secondary {
border: 1px solid var(--bp-border-blue);
background: rgba(255, 255, 255, 0.75);
color: var(--bp-text);
}

.contact-button--secondary:hover {
background: var(--bp-blue-soft);
border-color: var(--bp-blue);
}

.contact-button--light {
background: var(--bp-white);
color: var(--bp-blue);
}

.contact-button--light:hover {
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

.contact-button__arrow {
font-size: 20px;
transition: transform 0.25s ease;
}

.contact-button:hover .contact-button__arrow {
transform: translateX(4px);
}

/* =========================================================
HERO
========================================================= */

.contact-hero {
position: relative;
padding: 150px 0 110px;
min-height: 780px;
background:
linear-gradient(
135deg,
var(--bp-background) 0%,
var(--bp-blue-soft) 55%,
var(--bp-pink-soft) 100%
);
overflow: hidden;
}

.contact-hero__background {
position: absolute;
inset: 0;
pointer-events: none;
}

.contact-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(
rgba(33, 25, 201, 0.045) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(33, 25, 201, 0.045) 1px,
transparent 1px
);
background-size: 55px 55px;
mask-image: linear-gradient(
to bottom,
black,
transparent
);
}

.contact-orb {
position: absolute;
border-radius: 50%;
filter: blur(25px);
opacity: 0.55;
animation: contactOrbFloat 8s ease-in-out infinite;
}

.contact-orb--one {
top: 5%;
left: -8%;
width: 400px;
height: 400px;
background: var(--bp-blue-pale);
}

.contact-orb--two {
right: -5%;
top: 15%;
width: 350px;
height: 350px;
background: var(--bp-pink-pale);
animation-delay: 2s;
}

.contact-orb--three {
bottom: -100px;
left: 40%;
width: 280px;
height: 280px;
background: var(--bp-blue-pale);
animation-delay: 4s;
}

@keyframes contactOrbFloat {

 
0%,
100% {
	transform: translate(0, 0);
}

50% {
	transform: translate(20px, -25px);
}
 

}

.contact-hero__container {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr minmax(400px, 520px);
align-items: center;
gap: 80px;
}

.contact-hero__content {
max-width: 650px;
}

.contact-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
padding: 9px 15px;
border: 1px solid var(--bp-border-blue);
border-radius: 999px;
background: rgba(255, 255, 255, 0.75);
color: var(--bp-blue);
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
}

.contact-eyebrow__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bp-pink);
box-shadow: 0 0 0 6px var(--bp-pink-pale);
}

.contact-hero h1 {
margin: 0;
font-size: clamp(52px, 6vw, 76px);
line-height: 1.03;
letter-spacing: -3px;
}

.contact-hero h1 span {
display: block;
background: linear-gradient(
90deg,
var(--bp-blue),
var(--bp-pink)
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.contact-hero__content > p {
max-width: 620px;
margin: 28px 0;
color: var(--bp-text-muted);
font-size: 18px;
line-height: 1.8;
}

.contact-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}

.contact-hero__trust {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 40px;
}

.contact-trust-item {
display: flex;
align-items: center;
gap: 8px;
color: var(--bp-text-muted);
font-size: 12px;
font-weight: 700;
}

.contact-trust-item__icon {
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border-radius: 8px;
background: var(--bp-blue-pale);
color: var(--bp-blue);
}

/* =========================================================
MESSAGE WINDOW
========================================================= */

.contact-hero__visual {
position: relative;
}

.contact-message-window {
position: relative;
z-index: 2;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 26px;
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 40px 100px rgba(33, 25, 201, 0.16);
backdrop-filter: blur(20px);
overflow: hidden;
animation: contactWindowFloat 6s ease-in-out infinite;
}

@keyframes contactWindowFloat {

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

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

}

.contact-message-window__header {
display: flex;
align-items: center;
gap: 18px;
padding: 20px 24px;
border-bottom: 1px solid var(--bp-border);
color: var(--bp-text);
font-size: 13px;
font-weight: 800;
}

.contact-window-dots {
display: flex;
gap: 6px;
}

.contact-window-dots span {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--bp-border);
}

.contact-window-dots span:first-child {
background: var(--bp-pink);
}

.contact-window-dots span:nth-child(2) {
background: var(--bp-blue-light);
}

.contact-message-window__body {
display: grid;
gap: 20px;
min-height: 360px;
padding: 28px;
background: var(--bp-background-soft);
}

.contact-message {
display: flex;
align-items: flex-end;
gap: 10px;
}

.contact-message--outgoing {
justify-content: flex-end;
}

.contact-message__avatar {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--bp-pink-pale);
color: var(--bp-pink);
font-size: 14px;
font-weight: 800;
}

.contact-message__avatar--brand {
background: var(--bp-blue);
color: var(--bp-white);
font-size: 9px;
}

.contact-message__bubble {
max-width: 290px;
padding: 14px 17px;
border-radius: 16px 16px 16px 4px;
background: var(--bp-white);
box-shadow: 0 8px 20px rgba(23, 22, 51, 0.05);
}

.contact-message--outgoing .contact-message__bubble {
border-radius: 16px 16px 4px 16px;
background: var(--bp-blue);
color: var(--bp-white);
}

.contact-message__bubble strong,
.contact-message__bubble span {
display: block;
}

.contact-message__bubble strong {
margin-bottom: 5px;
font-size: 12px;
}

.contact-message__bubble span {
color: var(--bp-text-muted);
font-size: 11px;
line-height: 1.6;
}

.contact-message--outgoing .contact-message__bubble span {
color: rgba(255, 255, 255, 0.85);
}

.contact-typing {
display: flex;
gap: 5px;
width: fit-content;
padding: 12px 16px;
margin-left: 44px;
border-radius: 14px;
background: var(--bp-white);
}

.contact-typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bp-text-light);
animation: contactTyping 1.2s infinite ease-in-out;
}

.contact-typing span:nth-child(2) {
animation-delay: 0.15s;
}

.contact-typing span:nth-child(3) {
animation-delay: 0.3s;
}

@keyframes contactTyping {

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

30% {
	transform: translateY(-5px);
}
 

}

.contact-message-window__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin: 18px;
padding: 13px 14px 13px 18px;
border: 1px solid var(--bp-border);
border-radius: 13px;
color: var(--bp-text-light);
font-size: 12px;
}

.contact-message-window__footer button {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 0;
border-radius: 10px;
background: var(--bp-blue);
color: var(--bp-white);
font-size: 18px;
}

/* =========================================================
FLOATING CARDS
========================================================= */

.contact-floating-card {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 16px;
background: rgba(255, 255, 255, 0.92);
box-shadow: var(--bp-shadow);
backdrop-filter: blur(15px);
animation: contactCardFloat 5s ease-in-out infinite;
}

.contact-floating-card--one {
top: 18%;
left: -55px;
}

.contact-floating-card--two {
right: -35px;
bottom: 15%;
animation-delay: 2s;
}

@keyframes contactCardFloat {

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

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

}

.contact-floating-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--bp-blue-pale);
color: var(--bp-blue);
font-weight: 900;
}

.contact-floating-card__icon--pink {
background: var(--bp-pink-pale);
color: var(--bp-pink);
}

.contact-floating-card strong,
.contact-floating-card span {
display: block;
}

.contact-floating-card strong {
font-size: 12px;
}

.contact-floating-card div span {
margin-top: 3px;
color: var(--bp-text-light);
font-size: 10px;
}

/* =========================================================
CONTACT METHODS
========================================================= */

.contact-methods {
background: var(--bp-white);
}

.contact-methods__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.contact-method-card {
display: flex;
flex-direction: column;
min-height: 310px;
padding: 32px;
border: 1px solid var(--bp-border);
border-radius: 24px;
background: var(--bp-background);
color: var(--bp-text);
text-decoration: none;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}

.contact-method-card:hover {
transform: translateY(-8px);
border-color: var(--bp-border-blue);
box-shadow: var(--bp-shadow);
}

.contact-method-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 25px;
border-radius: 15px;
background: var(--bp-blue-pale);
color: var(--bp-blue);
font-size: 21px;
}

.contact-method-card__icon--pink {
background: var(--bp-pink-pale);
color: var(--bp-pink);
}

.contact-method-card h3 {
margin: 0 0 12px;
font-size: 22px;
}

.contact-method-card p {
margin: 0;
color: var(--bp-text-muted);
font-size: 14px;
line-height: 1.75;
}

.contact-method-card__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 30px;
color: var(--bp-blue);
font-size: 13px;
font-weight: 800;
}

.contact-method-card__link span {
font-size: 20px;
transition: transform 0.25s ease;
}

.contact-method-card:hover .contact-method-card__link span {
transform: translateX(5px);
}

/* =========================================================
CONTACT FORM
========================================================= */

.contact-form-section {
padding: 120px 0;
background: var(--bp-background-soft);
}

.contact-form-layout {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 100px;
align-items: center;
}

.contact-form-content > p {
margin: 0;
color: var(--bp-text-muted);
font-size: 16px;
line-height: 1.8;
}

.contact-form-benefits {
display: grid;
gap: 18px;
margin-top: 40px;
}

.contact-form-benefits > div {
display: flex;
align-items: center;
gap: 15px;
}

.contact-form-benefits span {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border-radius: 10px;
background: var(--bp-blue-pale);
color: var(--bp-blue);
font-size: 11px;
font-weight: 900;
}

.contact-form-benefits p {
margin: 0;
color: var(--bp-text-muted);
font-size: 14px;
}

.contact-form-card {
padding: 40px;
border: 1px solid var(--bp-border);
border-radius: 28px;
background: var(--bp-white);
box-shadow: var(--bp-shadow);
}

.contact-form {
display: grid;
gap: 22px;
}

.contact-form__row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}

.contact-form__field {
display: grid;
gap: 8px;
}

.contact-form__field label {
color: var(--bp-text);
font-size: 13px;
font-weight: 700;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
width: 100%;
border: 1px solid var(--bp-border);
border-radius: 12px;
outline: none;
background: var(--bp-background);
color: var(--bp-text);
font-family: inherit;
font-size: 14px;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}

.contact-form__field input,
.contact-form__field select {
height: 52px;
padding: 0 15px;
}

.contact-form__field textarea {
padding: 15px;
resize: vertical;
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
border-color: var(--bp-blue);
box-shadow: 0 0 0 4px var(--bp-blue-pale);
}

.contact-form__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 5px;
}

.contact-form__footer p {
margin: 0;
color: var(--bp-text-light);
font-size: 12px;
line-height: 1.6;
}

/* =========================================================
SUPPORT
========================================================= */

.contact-support {
background: var(--bp-white);
}

.contact-support__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center;
}

.contact-support__content > p {
max-width: 560px;
margin: 0;
color: var(--bp-text-muted);
line-height: 1.8;
}

.contact-support__cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}

.contact-support-card {
padding: 28px;
border: 1px solid var(--bp-border);
border-radius: 20px;
background: var(--bp-background);
}

.contact-support-card > div {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
margin-bottom: 20px;
border-radius: 13px;
background: var(--bp-blue-pale);
color: var(--bp-blue);
font-size: 18px;
font-weight: 900;
}

.contact-support-card .contact-support-card__icon--pink {
background: var(--bp-pink-pale);
color: var(--bp-pink);
}

.contact-support-card h3 {
margin: 0 0 10px;
font-size: 18px;
}

.contact-support-card p {
margin: 0;
color: var(--bp-text-muted);
font-size: 13px;
line-height: 1.7;
}

/* =========================================================
FAQ
========================================================= */

.contact-faq {
padding: 120px 0;
background: var(--bp-background-blue);
}

.contact-faq__list {
max-width: 850px;
margin: 0 auto;
}

.contact-faq-item {
margin-bottom: 14px;
border: 1px solid var(--bp-border);
border-radius: 16px;
background: var(--bp-white);
overflow: hidden;
}

.contact-faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 25px;
list-style: none;
cursor: pointer;
font-size: 15px;
font-weight: 700;
}

.contact-faq-item summary::-webkit-details-marker {
display: none;
}

.contact-faq-item__icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--bp-blue-pale);
color: var(--bp-blue);
font-size: 20px;
transition: transform 0.25s ease;
}

.contact-faq-item[open] .contact-faq-item__icon {
transform: rotate(45deg);
}

.contact-faq-item__content {
padding: 0 25px 25px;
}

.contact-faq-item__content p {
margin: 0;
color: var(--bp-text-muted);
font-size: 14px;
line-height: 1.8;
}

/* =========================================================
CTA
========================================================= */

.contact-cta {
background: var(--bp-white);
}

.contact-cta__inner {
padding: 100px 40px;
border-radius: 40px;
background:
radial-gradient(
circle at top right,
rgba(229, 27, 120, 0.22),
transparent 35%
),
linear-gradient(
135deg,
var(--bp-deep),
var(--bp-blue)
);
color: var(--bp-white);
text-align: center;
}

.contact-cta h2 {
max-width: 750px;
margin: 0 auto 20px;
font-size: clamp(42px, 6vw, 70px);
line-height: 1.05;
letter-spacing: -2px;
}

.contact-cta p {
max-width: 650px;
margin: 0 auto 35px;
color: rgba(255, 255, 255, 0.72);
font-size: 16px;
line-height: 1.8;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

 
.contact-hero__container,
.contact-form-layout,
.contact-support__inner {
	grid-template-columns: 1fr;
}

.contact-hero__container {
	gap: 70px;
}

.contact-hero__content {
	max-width: 750px;
	margin: 0 auto;
	text-align: center;
}

.contact-hero__content > p {
	margin-right: auto;
	margin-left: auto;
}

.contact-hero__actions,
.contact-hero__trust {
	justify-content: center;
}

.contact-hero__visual {
	max-width: 600px;
	width: 100%;
	margin: 0 auto;
}

.contact-form-layout,
.contact-support__inner {
	gap: 60px;
}
 

}

@media (max-width: 800px) {

 
.contact-methods__grid {
	grid-template-columns: 1fr;
}

.contact-support__cards {
	grid-template-columns: 1fr;
}
 

}

@media (max-width: 600px) {

 
.contact-page .container {
	width: min(100% - 30px, 1180px);
}

.contact-page .section-space,
.contact-form-section,
.contact-faq {
	padding: 80px 0;
}

.contact-hero {
	min-height: auto;
	padding: 120px 0 70px;
}

.contact-hero h1 {
	font-size: 45px;
	letter-spacing: -2px;
}

.contact-hero__content > p {
	font-size: 16px;
}

.contact-floating-card {
	display: none;
}

.contact-hero__actions {
	flex-direction: column;
}

.contact-button {
	width: 100%;
}

.contact-form-card {
	padding: 25px;
}

.contact-form__row {
	grid-template-columns: 1fr;
}

.contact-form__footer {
	flex-direction: column;
	align-items: stretch;
}

.contact-message-window__body {
	padding: 20px;
}

.contact-message__bubble {
	max-width: 240px;
}

.contact-cta__inner {
	padding: 70px 25px;
}

.contact-support__cards {
	grid-template-columns: 1fr;
}
 

}

@media (prefers-reduced-motion: reduce) {

 
.contact-page *,
.contact-page *::before,
.contact-page *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
}
 

}