/*==========================================================
CONTACT PAGE HERO
==========================================================*/

.page-hero{

padding:180px 0 120px;

background:
radial-gradient(circle at top right,
rgba(72,168,255,.12),
transparent 40%),

radial-gradient(circle at bottom left,
rgba(10,102,194,.08),
transparent 45%),

#ffffff;

position:relative;

overflow:hidden;

}

.page-hero::before{

content:"";

position:absolute;

width:520px;

height:520px;

top:-180px;

right:-120px;

background:

radial-gradient(circle,
rgba(10,102,194,.18),
transparent 70%);

filter:blur(45px);

z-index:0;

}

.page-hero::after{

content:"";

position:absolute;

width:420px;

height:420px;

bottom:-150px;

left:-100px;

background:

radial-gradient(circle,
rgba(72,168,255,.16),
transparent 70%);

filter:blur(40px);

z-index:0;

}

.page-hero .container{

position:relative;

z-index:2;

max-width:760px;

text-align:center;

}

.page-hero .section-tag{

margin-bottom:22px;

}

.page-hero h1{

margin-bottom:24px;

font-size:clamp(2.8rem,6vw,4.8rem);

line-height:1.08;

}

.page-hero p{

max-width:640px;

margin:0 auto 40px;

font-size:1.1rem;

line-height:1.9;

color:var(--text);

}



/*==========================================================
CONTACT SECTION
==========================================================*/

.contact-page{

padding:120px 0;

background:#F8FBFF;

position:relative;

}

.contact-grid{

display:grid;

grid-template-columns:420px 1fr;

gap:60px;

align-items:start;

}



/*==========================================================
SECTION ANIMATION
==========================================================*/

.contact-info,
.contact-form-card{

transition:.4s ease;

}

.contact-info:hover,
.contact-form-card:hover{

transform:translateY(-6px);

}



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

@media(max-width:992px){

.contact-grid{

grid-template-columns:1fr;

gap:45px;

}

.page-hero{

padding:150px 0 90px;

}

.page-hero .container{

text-align:center;

}

}

@media(max-width:768px){

.contact-page{

padding:90px 0;

}

.page-hero h1{

font-size:2.5rem;

}

.page-hero p{

font-size:1rem;

}

}

/*==========================================================
CONTACT INFORMATION
==========================================================*/

.contact-info{

background:#ffffff;

padding:50px 42px;

border-radius:32px;

border:1px solid rgba(10,102,194,.08);

box-shadow:0 25px 70px rgba(7,27,54,.06);

position:relative;

overflow:hidden;

}

.contact-info::before{

content:"";

position:absolute;

top:-140px;

right:-120px;

width:320px;

height:320px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(72,168,255,.12),
transparent 70%
);

pointer-events:none;

}

.contact-info>*{

position:relative;

z-index:2;

}

.contact-info .section-tag{

margin-bottom:18px;

}

.contact-info h2{

margin-bottom:22px;

font-size:2.2rem;

line-height:1.2;

}

.contact-info>p{

margin-bottom:45px;

line-height:1.9;

color:var(--text);

}



/*==========================================================
CONTACT ITEMS
==========================================================*/

.contact-item{

display:flex;

align-items:flex-start;

gap:20px;

padding:22px 0;

border-bottom:1px solid rgba(10,102,194,.08);

transition:.35s ease;

}

.contact-item:last-child{

border-bottom:none;

padding-bottom:0;

}

.contact-item:hover{

transform:translateX(8px);

}



/*==========================================================
ICONS
==========================================================*/

.contact-item i{

width:64px;

height:64px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:

linear-gradient(
135deg,
#0A66C2,
#48A8FF
);

color:#fff;

flex-shrink:0;

box-shadow:

0 18px 35px rgba(10,102,194,.18);

transition:.35s ease;

}

.contact-item:hover i{

transform:

rotate(-8deg)

scale(1.08);

}



/*==========================================================
TEXT
==========================================================*/

.contact-item h3{

margin-bottom:6px;

font-size:1.15rem;

color:var(--heading);

}

.contact-item p{

font-size:.98rem;

line-height:1.7;

color:var(--text);

}



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

@media(max-width:768px){

.contact-info{

padding:36px 28px;

border-radius:26px;

}

.contact-info h2{

font-size:1.9rem;

}

.contact-item{

gap:16px;

}

.contact-item i{

width:56px;

height:56px;

border-radius:18px;

}

}

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

.contact-form-card{

background:rgba(255,255,255,.95);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

padding:55px;

border-radius:32px;

border:1px solid rgba(10,102,194,.08);

box-shadow:0 35px 80px rgba(7,27,54,.08);

position:relative;

overflow:hidden;

}

.contact-form-card::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:360px;

height:360px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(72,168,255,.12),
transparent 70%
);

pointer-events:none;

}

.contact-form-card>*{

position:relative;

z-index:2;

}

.contact-form-card h2{

margin-bottom:35px;

font-size:2rem;

}



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

#contactForm{

display:flex;

flex-direction:column;

gap:22px;

}



/*==========================================================
INPUTS
==========================================================*/

#contactForm input,
#contactForm select,
#contactForm textarea{

width:100%;

padding:18px 22px;

font-size:1rem;

font-family:inherit;

color:var(--heading);

background:#fff;

border:1px solid rgba(10,102,194,.10);

border-radius:18px;

outline:none;

transition:.35s ease;

resize:none;

}



/*==========================================================
PLACEHOLDER
==========================================================*/

#contactForm input::placeholder,
#contactForm textarea::placeholder{

color:#94A3B8;

}



/*==========================================================
FOCUS
==========================================================*/

#contactForm input:focus,
#contactForm select:focus,
#contactForm textarea:focus{

border-color:#0A66C2;

box-shadow:

0 0 0 5px rgba(10,102,194,.10);

transform:translateY(-2px);

}



/*==========================================================
SELECT
==========================================================*/

#contactForm select{

cursor:pointer;

appearance:none;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%230A66C2' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

background-repeat:no-repeat;

background-position:right 20px center;

padding-right:60px;

}



/*==========================================================
TEXTAREA
==========================================================*/

#contactForm textarea{

min-height:180px;

line-height:1.8;

}



/*==========================================================
BUTTON
==========================================================*/

#contactForm .btn{

width:100%;

margin-top:10px;

height:64px;

font-size:1.05rem;

}



/*==========================================================
BUTTON HOVER
==========================================================*/

#contactForm .btn:hover{

transform:translateY(-4px);

}



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

@media(max-width:768px){

.contact-form-card{

padding:35px 28px;

border-radius:26px;

}

.contact-form-card h2{

font-size:1.8rem;

}

#contactForm input,
#contactForm select,
#contactForm textarea{

padding:16px 18px;

}

#contactForm textarea{

min-height:160px;

}

}

/*==========================================================
WHY CHOOSE US
==========================================================*/

.contact-benefits{

padding:120px 0;

background:#ffffff;

position:relative;

overflow:hidden;

}

.contact-benefits::before{

content:"";

position:absolute;

top:-250px;

right:-180px;

width:520px;

height:520px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(72,168,255,.10),
transparent 70%
);

pointer-events:none;

}

.contact-benefits .section-heading{

max-width:760px;

margin:0 auto 70px;

text-align:center;

position:relative;

z-index:2;

}



/*==========================================================
BENEFITS GRID
==========================================================*/

.benefits-grid{

display:grid;

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

gap:32px;

position:relative;

z-index:2;

}



/*==========================================================
BENEFIT CARD
==========================================================*/

.benefit-card{

background:#fff;

padding:45px 38px;

border-radius:28px;

border:1px solid rgba(10,102,194,.08);

box-shadow:0 20px 60px rgba(7,27,54,.05);

transition:.4s ease;

position:relative;

overflow:hidden;

}

.benefit-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:260px;

height:260px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(72,168,255,.12),
transparent 70%
);

opacity:0;

transition:.4s ease;

}

.benefit-card:hover{

transform:translateY(-12px);

box-shadow:0 35px 80px rgba(7,27,54,.10);

}

.benefit-card:hover::before{

opacity:1;

}



/*==========================================================
ICON
==========================================================*/

.benefit-card i{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:26px;

border-radius:22px;

background:

linear-gradient(
135deg,
#0A66C2,
#48A8FF
);

color:#fff;

box-shadow:0 20px 40px rgba(10,102,194,.20);

transition:.35s ease;

}

.benefit-card:hover i{

transform:

rotate(-8deg)

scale(1.08);

}



/*==========================================================
TEXT
==========================================================*/

.benefit-card h3{

margin-bottom:14px;

font-size:1.45rem;

color:var(--heading);

}

.benefit-card p{

line-height:1.9;

color:var(--text);

}



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

@media(max-width:992px){

.benefits-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.contact-benefits{

padding:90px 0;

}

.benefit-card{

padding:34px 28px;

border-radius:24px;

}

.benefit-card i{

width:64px;

height:64px;

border-radius:20px;

}

.benefit-card h3{

font-size:1.3rem;

}

}

/*==========================================================
BRAND PROMISE
==========================================================*/

.brand-promise{

padding:120px 0;

background:#F8FBFF;

position:relative;

overflow:hidden;

}

.brand-promise::before{

content:"";

position:absolute;

top:-250px;

left:-180px;

width:520px;

height:520px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(72,168,255,.10),
transparent 70%
);

pointer-events:none;

}



/*==========================================================
PROMISE CARD
==========================================================*/

.promise-card{

position:relative;

z-index:2;

max-width:920px;

margin:auto;

padding:70px;

background:#fff;

border-radius:34px;

border:1px solid rgba(10,102,194,.08);

box-shadow:0 35px 90px rgba(7,27,54,.08);

text-align:center;

overflow:hidden;

}

.promise-card::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:380px;

height:380px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(72,168,255,.14),
transparent 70%
);

pointer-events:none;

}

.promise-card>*{

position:relative;

z-index:2;

}



/*==========================================================
HEADING
==========================================================*/

.promise-card .section-tag{

margin-bottom:22px;

}

.promise-card h2{

font-size:clamp(2.2rem,4vw,3.5rem);

line-height:1.2;

margin-bottom:28px;

color:var(--heading);

}



/*==========================================================
BODY
==========================================================*/

.promise-card>p{

max-width:700px;

margin:0 auto;

line-height:1.95;

font-size:1.05rem;

color:var(--text);

}



/*==========================================================
DIVIDER
==========================================================*/

.promise-divider{

width:90px;

height:4px;

margin:45px auto;

border-radius:999px;

background:

linear-gradient(
90deg,
#0A66C2,
#48A8FF
);

}



/*==========================================================
SIGNATURE
==========================================================*/

.promise-signature{

font-size:1rem;

color:#64748B;

line-height:1.9;

}

.promise-signature strong{

display:block;

font-size:1.2rem;

color:var(--heading);

margin-bottom:6px;

}



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

.promise-card{

transition:.4s ease;

}

.promise-card:hover{

transform:translateY(-8px);

box-shadow:0 45px 110px rgba(7,27,54,.12);

}



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

@media(max-width:768px){

.brand-promise{

padding:90px 0;

}

.promise-card{

padding:45px 28px;

border-radius:26px;

}

.promise-card h2{

font-size:2rem;

}

.promise-divider{

margin:35px auto;

}

}

/*==========================================================
SECTION REVEAL SUPPORT
==========================================================*/

.page-hero,
.contact-page,
.contact-benefits,
.brand-promise{

position:relative;
z-index:1;

}



/*==========================================================
SMOOTH CARD TRANSITIONS
==========================================================*/

.contact-info,
.contact-form-card,
.benefit-card,
.promise-card{

will-change:transform;

transition:
transform .4s ease,
box-shadow .4s ease,
border-color .35s ease;

}



/*==========================================================
INPUT AUTOFILL
==========================================================*/

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{

-webkit-box-shadow:0 0 0 1000px #ffffff inset;

-webkit-text-fill-color:#071B36;

transition:background-color 9999s;

}



/*==========================================================
FORM VALIDATION STATES
==========================================================*/

#contactForm input:valid,
#contactForm textarea:valid{

border-color:rgba(16,185,129,.35);

}

#contactForm input:invalid:focus,
#contactForm textarea:invalid:focus{

border-color:#EF4444;

box-shadow:
0 0 0 5px rgba(239,68,68,.12);

}



/*==========================================================
BUTTON IMPROVEMENTS
==========================================================*/

.contact-page .btn,
.page-hero .btn{

position:relative;

overflow:hidden;

}

.contact-page .btn:active,
.page-hero .btn:active{

transform:scale(.98);

}



/*==========================================================
ACCESSIBILITY
==========================================================*/

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

outline:3px solid rgba(10,102,194,.25);

outline-offset:4px;

}



/*==========================================================
LUCIDE ICONS
==========================================================*/

.contact-item svg,
.benefit-card svg{

width:30px;

height:30px;

stroke-width:2;

}



/*==========================================================
HOVER MICRO INTERACTIONS
==========================================================*/

.contact-item h3,
.benefit-card h3{

transition:color .3s ease;

}

.contact-item:hover h3,
.benefit-card:hover h3{

color:var(--primary);

}



/*==========================================================
SCROLL OFFSET
==========================================================*/

html{

scroll-padding-top:110px;

}



/*==========================================================
LARGE DESKTOP ENHANCEMENT
==========================================================*/

@media(min-width:1400px){

.contact-grid{

gap:90px;

}

.promise-card{

max-width:980px;

}

}



/*==========================================================
TABLET
==========================================================*/

@media(max-width:992px){

.contact-info,
.contact-form-card{

width:100%;

}

}



/*==========================================================
SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.page-hero{

padding:140px 0 80px;

}

.contact-info,
.contact-form-card,
.promise-card{

padding:28px 22px;

border-radius:22px;

}

.contact-item{

gap:14px;

}

.contact-item i{

width:52px;

height:52px;

border-radius:16px;

}

.contact-item svg,
.benefit-card svg{

width:24px;

height:24px;

}

#contactForm{

gap:18px;

}

#contactForm .btn{

height:58px;

font-size:1rem;

}

.benefit-card{

padding:28px 22px;

}

.promise-card h2{

font-size:1.8rem;

}

}



/*==========================================================
REDUCED MOTION
==========================================================*/

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}